diff --git a/ROADMAP.md b/ROADMAP.md
index c264fd62f4..83a7ce801f 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -5,7 +5,7 @@
 > **Spec Version:** @objectstack/spec v3.0.9
 > **Client Version:** @objectstack/client v3.0.9
 > **Target UX Benchmark:** 🎯 Airtable parity
-> **Current Priority:** AppShell Navigation · Designer Interaction · View Config Live Preview Sync · Dashboard Config Panel · Airtable UX Polish · **Flow Designer ✅** · **Schema-Driven View Config Panel ✅**
+> **Current Priority:** AppShell Navigation · Designer Interaction · View Config Live Preview Sync · Dashboard Config Panel · Airtable UX Polish · **Flow Designer ✅** · **App Creation & Editing Flow ✅**
 
 ---
 
@@ -13,7 +13,7 @@
 
 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, 99+ components, 5,618+ tests, 78 Storybook stories, 42/42 builds passing, ~88% 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), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), and **ListView Spec Protocol Gap Fixes** (P2.6 partial) — all ✅ complete.
+**Where We Are:** Foundation is **solid and shipping** — 35 packages, 99+ components, 5,700+ 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), **AppShell Navigation Renderer** (P0.1), **Flow Designer** (P2.4), **Feed/Chatter UI** (P1.5), and **App Creation & Editing Flow** (P1.11) — 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
@@ -389,6 +389,78 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [ ] Mobile/tablet end-to-end testing for all view types
 - [ ] Dynamic width calculation for Gantt task list and Kanban columns based on container width
 
+### P1.11 App Creation & Editing Flow (Airtable Interface Designer UX)
+
+> Full app creation & editing experience aligned with Airtable Interface Designer UX.
+> Components live in `@object-ui/plugin-designer`, types in `@object-ui/types`.
+
+**Types & Interfaces:**
+- [x] `AppWizardDraft` / `AppWizardStep` / `BrandingConfig` / `ObjectSelection` / `EditorMode` types
+- [x] `isValidAppName()` snake_case validator function
+- [x] `wizardDraftToAppSchema()` draft-to-schema conversion function
+
+**App Creation Wizard (4-step):**
+- [x] Step 1: Basic Info — name (snake_case validated), title, description, icon, template, layout selector
+- [x] Step 2: Object Selection — card grid with search, select all/none, toggle selection
+- [x] Step 3: Navigation Builder — auto-generates NavigationItem[] from selected objects, add group/URL/separator, reorder up/down, remove
+- [x] Step 4: Branding — logo URL, primary color, favicon, live preview card
+- [x] Step indicator with connected progress dots
+- [x] Step validation (step 1 requires valid snake_case name + title)
+- [x] onComplete callback returns full AppWizardDraft
+
+**Navigation Designer:**
+- [x] Recursive NavigationItem tree renderer (supports infinite nesting)
+- [x] Quick add buttons for all 7 nav item types (object, dashboard, page, report, group, URL, separator)
+- [x] Inline label editing (double-click to edit, Enter/Escape to commit/discard)
+- [x] Add child to groups (nested navigation)
+- [x] Reorder items (up/down buttons)
+- [x] Deep tree operations (remove/reorder works at any depth)
+- [x] Live preview sidebar showing navigation as rendered
+- [x] Type badges with color coding
+
+**Page Canvas Editor:**
+- [x] Component palette (Grid, Kanban, Calendar, Gallery, Dashboard, Form, Layout Grid)
+- [x] Component list with drag handles, selection, reorder
+- [x] Property panel for selected component (label, type, ID)
+- [x] Add/remove/reorder components
+- [x] Syncs PageSchema children on every change
+
+**Dashboard Editor:**
+- [x] 6 widget types (KPI Metric, Bar Chart, Line Chart, Pie Chart, Table, Grid)
+- [x] Widget card grid with selection, drag handles, reorder
+- [x] Widget property panel (title, type, data source, value field, aggregate, color variant)
+- [x] Add/remove/reorder widgets
+- [x] Grid layout based on DashboardSchema columns
+
+**Object View Configurator:**
+- [x] 7 view type switcher (Grid, Kanban, Calendar, Gallery, Timeline, Map, Gantt)
+- [x] Column visibility toggle with visible count
+- [x] Column reorder (up/down)
+- [x] Toolbar toggles (showSearch, showFilters, showSort)
+- [x] Appearance section (row height, striped, bordered)
+- [x] Collapsible sections
+
+**Editor Mode Toggle:**
+- [x] Three-way toggle (Edit / Preview / Code)
+- [x] Radio group accessibility (role="radiogroup", aria-checked)
+- [x] Disabled state support
+
+**i18n:**
+- [x] `appDesigner` section with 54 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
+
+**Testing:**
+- [x] 9 type tests (isValidAppName, wizardDraftToAppSchema, type shapes)
+- [x] 31 AppCreationWizard tests (rendering, steps 1-4, navigation, callbacks, read-only)
+- [x] 18 NavigationDesigner tests (rendering, add, remove, groups, badges, read-only)
+- [x] 7 EditorModeToggle tests (render, active mode, onChange, accessibility, disabled)
+- [x] 14 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only)
+- [x] 10 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only)
+- [x] 14 ObjectViewConfigurator tests (rendering, view type switch, column visibility, toggles, read-only)
+- [x] **Total: 103 new tests, all passing**
+
+**ComponentRegistry:**
+- [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`
+
 ---
 
 ## 🧩 P2 — Polish & Advanced Features
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
index f73991bb7d..0e9a628112 100644
--- a/packages/i18n/src/locales/ar.ts
+++ b/packages/i18n/src/locales/ar.ts
@@ -138,6 +138,60 @@ const ar = {
     general: 'عام',
     advanced: 'متقدم',
   },
+  appDesigner: {
+    createApp: 'Create Application',
+    editApp: 'Edit Application',
+    basicInfo: 'Basic Info',
+    objects: 'Objects',
+    navigation: 'Navigation',
+    branding: 'Branding',
+    appName: 'App Name',
+    appTitle: 'Title',
+    appDescription: 'Description',
+    appIcon: 'Icon',
+    template: 'Template',
+    layout: 'Layout',
+    layoutSidebar: 'Sidebar',
+    layoutHeader: 'Header',
+    layoutEmpty: 'Empty',
+    selectObjects: 'Select Objects',
+    searchObjects: 'Search objects…',
+    selectAll: 'Select All',
+    deselectAll: 'Deselect All',
+    navBuilder: 'Navigation Builder',
+    addGroup: 'Add Group',
+    addUrl: 'Add URL',
+    addSeparator: 'Add Separator',
+    noNavItems: 'No navigation items yet.',
+    logoUrl: 'Logo URL',
+    primaryColor: 'Primary Color',
+    faviconUrl: 'Favicon URL',
+    preview: 'Preview',
+    complete: 'Complete',
+    snakeCaseHint: 'Must be snake_case (e.g. my_app)',
+    modeEdit: 'Edit',
+    modePreview: 'Preview',
+    modeCode: 'Code',
+    addWidget: 'Add Widget',
+    widgetProperties: 'Widget Properties',
+    dataSource: 'Data Source',
+    valueField: 'Value Field',
+    aggregate: 'Aggregate',
+    colorVariant: 'Color Variant',
+    addComponent: 'Add Component',
+    componentProperties: 'Component Properties',
+    viewType: 'View Type',
+    fields: 'Fields',
+    toolbar: 'Toolbar',
+    showSearch: 'Show Search',
+    showFilters: 'Show Filters',
+    showSort: 'Show Sort',
+    appearance: 'Appearance',
+    rowHeight: 'Row Height',
+    stripedRows: 'Striped Rows',
+    bordered: 'Bordered',
+    livePreview: 'Live Preview',
+  },
   console: {
     title: 'وحدة تحكم ObjectStack',
     initializing: 'جاري تهيئة التطبيق...',
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
index db66cc1f4b..0762055d39 100644
--- a/packages/i18n/src/locales/de.ts
+++ b/packages/i18n/src/locales/de.ts
@@ -137,6 +137,60 @@ const de = {
     general: 'Allgemein',
     advanced: 'Erweitert',
   },
+  appDesigner: {
+    createApp: 'App erstellen',
+    editApp: 'App bearbeiten',
+    basicInfo: 'Grundinformationen',
+    objects: 'Objekte',
+    navigation: 'Navigation',
+    branding: 'Branding',
+    appName: 'App-Name',
+    appTitle: 'Titel',
+    appDescription: 'Beschreibung',
+    appIcon: 'Symbol',
+    template: 'Vorlage',
+    layout: 'Layout',
+    layoutSidebar: 'Seitenleiste',
+    layoutHeader: 'Kopfzeile',
+    layoutEmpty: 'Leer',
+    selectObjects: 'Objekte auswählen',
+    searchObjects: 'Objekte suchen…',
+    selectAll: 'Alle auswählen',
+    deselectAll: 'Alle abwählen',
+    navBuilder: 'Navigations-Builder',
+    addGroup: 'Gruppe hinzufügen',
+    addUrl: 'URL hinzufügen',
+    addSeparator: 'Trenner hinzufügen',
+    noNavItems: 'Noch keine Navigationselemente.',
+    logoUrl: 'Logo-URL',
+    primaryColor: 'Primärfarbe',
+    faviconUrl: 'Favicon-URL',
+    preview: 'Vorschau',
+    complete: 'Fertigstellen',
+    snakeCaseHint: 'Muss snake_case sein (z.B. my_app)',
+    modeEdit: 'Bearbeiten',
+    modePreview: 'Vorschau',
+    modeCode: 'Code',
+    addWidget: 'Widget hinzufügen',
+    widgetProperties: 'Widget-Eigenschaften',
+    dataSource: 'Datenquelle',
+    valueField: 'Wertfeld',
+    aggregate: 'Aggregat',
+    colorVariant: 'Farbvariante',
+    addComponent: 'Komponente hinzufügen',
+    componentProperties: 'Komponenteneigenschaften',
+    viewType: 'Ansichtstyp',
+    fields: 'Felder',
+    toolbar: 'Symbolleiste',
+    showSearch: 'Suche anzeigen',
+    showFilters: 'Filter anzeigen',
+    showSort: 'Sortierung anzeigen',
+    appearance: 'Erscheinung',
+    rowHeight: 'Zeilenhöhe',
+    stripedRows: 'Gestreifte Zeilen',
+    bordered: 'Umrandet',
+    livePreview: 'Live-Vorschau',
+  },
   console: {
     title: 'ObjectStack Konsole',
     initializing: 'Anwendung wird initialisiert...',
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
index 44df292ddc..571ebddd79 100644
--- a/packages/i18n/src/locales/en.ts
+++ b/packages/i18n/src/locales/en.ts
@@ -137,6 +137,60 @@ const en = {
     general: 'General',
     advanced: 'Advanced',
   },
+  appDesigner: {
+    createApp: 'Create Application',
+    editApp: 'Edit Application',
+    basicInfo: 'Basic Info',
+    objects: 'Objects',
+    navigation: 'Navigation',
+    branding: 'Branding',
+    appName: 'App Name',
+    appTitle: 'Title',
+    appDescription: 'Description',
+    appIcon: 'Icon',
+    template: 'Template',
+    layout: 'Layout',
+    layoutSidebar: 'Sidebar',
+    layoutHeader: 'Header',
+    layoutEmpty: 'Empty',
+    selectObjects: 'Select Objects',
+    searchObjects: 'Search objects…',
+    selectAll: 'Select All',
+    deselectAll: 'Deselect All',
+    navBuilder: 'Navigation Builder',
+    addGroup: 'Add Group',
+    addUrl: 'Add URL',
+    addSeparator: 'Add Separator',
+    noNavItems: 'No navigation items yet.',
+    logoUrl: 'Logo URL',
+    primaryColor: 'Primary Color',
+    faviconUrl: 'Favicon URL',
+    preview: 'Preview',
+    complete: 'Complete',
+    snakeCaseHint: 'Must be snake_case (e.g. my_app)',
+    modeEdit: 'Edit',
+    modePreview: 'Preview',
+    modeCode: 'Code',
+    addWidget: 'Add Widget',
+    widgetProperties: 'Widget Properties',
+    dataSource: 'Data Source',
+    valueField: 'Value Field',
+    aggregate: 'Aggregate',
+    colorVariant: 'Color Variant',
+    addComponent: 'Add Component',
+    componentProperties: 'Component Properties',
+    viewType: 'View Type',
+    fields: 'Fields',
+    toolbar: 'Toolbar',
+    showSearch: 'Show Search',
+    showFilters: 'Show Filters',
+    showSort: 'Show Sort',
+    appearance: 'Appearance',
+    rowHeight: 'Row Height',
+    stripedRows: 'Striped Rows',
+    bordered: 'Bordered',
+    livePreview: 'Live Preview',
+  },
   console: {
     title: 'ObjectStack Console',
     initializing: 'Initializing application...',
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
index 594ee82555..f59acb2f53 100644
--- a/packages/i18n/src/locales/es.ts
+++ b/packages/i18n/src/locales/es.ts
@@ -137,6 +137,60 @@ const es = {
     general: 'General',
     advanced: 'Avanzado',
   },
+  appDesigner: {
+    createApp: 'Crear aplicación',
+    editApp: 'Editar aplicación',
+    basicInfo: 'Información básica',
+    objects: 'Objetos',
+    navigation: 'Navegación',
+    branding: 'Marca',
+    appName: 'Nombre de la app',
+    appTitle: 'Título',
+    appDescription: 'Descripción',
+    appIcon: 'Ícono',
+    template: 'Plantilla',
+    layout: 'Diseño',
+    layoutSidebar: 'Barra lateral',
+    layoutHeader: 'Encabezado',
+    layoutEmpty: 'Vacío',
+    selectObjects: 'Seleccionar objetos',
+    searchObjects: 'Buscar objetos…',
+    selectAll: 'Seleccionar todo',
+    deselectAll: 'Deseleccionar todo',
+    navBuilder: 'Constructor de navegación',
+    addGroup: 'Agregar grupo',
+    addUrl: 'Agregar URL',
+    addSeparator: 'Agregar separador',
+    noNavItems: 'Sin elementos de navegación.',
+    logoUrl: 'URL del logo',
+    primaryColor: 'Color principal',
+    faviconUrl: 'URL del favicon',
+    preview: 'Vista previa',
+    complete: 'Completar',
+    snakeCaseHint: 'Debe ser snake_case (ej. my_app)',
+    modeEdit: 'Editar',
+    modePreview: 'Vista previa',
+    modeCode: 'Código',
+    addWidget: 'Agregar widget',
+    widgetProperties: 'Propiedades del widget',
+    dataSource: 'Fuente de datos',
+    valueField: 'Campo de valor',
+    aggregate: 'Agregado',
+    colorVariant: 'Variante de color',
+    addComponent: 'Agregar componente',
+    componentProperties: 'Propiedades del componente',
+    viewType: 'Tipo de vista',
+    fields: 'Campos',
+    toolbar: 'Barra de herramientas',
+    showSearch: 'Mostrar búsqueda',
+    showFilters: 'Mostrar filtros',
+    showSort: 'Mostrar orden',
+    appearance: 'Apariencia',
+    rowHeight: 'Altura de fila',
+    stripedRows: 'Filas rayadas',
+    bordered: 'Con borde',
+    livePreview: 'Vista previa en vivo',
+  },
   console: {
     title: 'Consola ObjectStack',
     initializing: 'Inicializando aplicación...',
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
index e57ecd0f8f..db35642631 100644
--- a/packages/i18n/src/locales/fr.ts
+++ b/packages/i18n/src/locales/fr.ts
@@ -137,6 +137,60 @@ const fr = {
     general: 'Général',
     advanced: 'Avancé',
   },
+  appDesigner: {
+    createApp: 'Créer une application',
+    editApp: "Modifier l'application",
+    basicInfo: 'Informations de base',
+    objects: 'Objets',
+    navigation: 'Navigation',
+    branding: 'Marque',
+    appName: "Nom de l'application",
+    appTitle: 'Titre',
+    appDescription: 'Description',
+    appIcon: 'Icône',
+    template: 'Modèle',
+    layout: 'Disposition',
+    layoutSidebar: 'Barre latérale',
+    layoutHeader: 'En-tête',
+    layoutEmpty: 'Vide',
+    selectObjects: 'Sélectionner les objets',
+    searchObjects: 'Rechercher des objets…',
+    selectAll: 'Tout sélectionner',
+    deselectAll: 'Tout désélectionner',
+    navBuilder: 'Constructeur de navigation',
+    addGroup: 'Ajouter un groupe',
+    addUrl: 'Ajouter un URL',
+    addSeparator: 'Ajouter un séparateur',
+    noNavItems: 'Aucun élément de navigation.',
+    logoUrl: 'URL du logo',
+    primaryColor: 'Couleur principale',
+    faviconUrl: 'URL du favicon',
+    preview: 'Aperçu',
+    complete: 'Terminer',
+    snakeCaseHint: 'Doit être en snake_case (ex. my_app)',
+    modeEdit: 'Éditer',
+    modePreview: 'Aperçu',
+    modeCode: 'Code',
+    addWidget: 'Ajouter un widget',
+    widgetProperties: 'Propriétés du widget',
+    dataSource: 'Source de données',
+    valueField: 'Champ de valeur',
+    aggregate: 'Agrégat',
+    colorVariant: 'Variante de couleur',
+    addComponent: 'Ajouter un composant',
+    componentProperties: 'Propriétés du composant',
+    viewType: 'Type de vue',
+    fields: 'Champs',
+    toolbar: "Barre d'outils",
+    showSearch: 'Afficher la recherche',
+    showFilters: 'Afficher les filtres',
+    showSort: 'Afficher le tri',
+    appearance: 'Apparence',
+    rowHeight: 'Hauteur de ligne',
+    stripedRows: 'Lignes rayées',
+    bordered: 'Bordé',
+    livePreview: 'Aperçu en direct',
+  },
   console: {
     title: 'Console ObjectStack',
     initializing: "Initialisation de l'application...",
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
index 66e47fa6b2..e194c50b2a 100644
--- a/packages/i18n/src/locales/ja.ts
+++ b/packages/i18n/src/locales/ja.ts
@@ -137,6 +137,60 @@ const ja = {
     general: '基本',
     advanced: '詳細',
   },
+  appDesigner: {
+    createApp: 'アプリを作成',
+    editApp: 'アプリを編集',
+    basicInfo: '基本情報',
+    objects: 'オブジェクト',
+    navigation: 'ナビゲーション',
+    branding: 'ブランディング',
+    appName: 'アプリ名',
+    appTitle: 'タイトル',
+    appDescription: '説明',
+    appIcon: 'アイコン',
+    template: 'テンプレート',
+    layout: 'レイアウト',
+    layoutSidebar: 'サイドバー',
+    layoutHeader: 'ヘッダー',
+    layoutEmpty: '空白',
+    selectObjects: 'オブジェクトを選択',
+    searchObjects: 'オブジェクトを検索…',
+    selectAll: 'すべて選択',
+    deselectAll: 'すべて解除',
+    navBuilder: 'ナビビルダー',
+    addGroup: 'グループを追加',
+    addUrl: 'URLを追加',
+    addSeparator: '区切りを追加',
+    noNavItems: 'ナビゲーション項目がありません。',
+    logoUrl: 'ロゴURL',
+    primaryColor: 'プライマリカラー',
+    faviconUrl: 'ファビコンURL',
+    preview: 'プレビュー',
+    complete: '完了',
+    snakeCaseHint: 'snake_case形式が必要です（例: my_app）',
+    modeEdit: '編集',
+    modePreview: 'プレビュー',
+    modeCode: 'コード',
+    addWidget: 'ウィジェット追加',
+    widgetProperties: 'ウィジェット設定',
+    dataSource: 'データソース',
+    valueField: '値フィールド',
+    aggregate: '集計',
+    colorVariant: 'カラー',
+    addComponent: 'コンポーネント追加',
+    componentProperties: 'コンポーネント設定',
+    viewType: 'ビュータイプ',
+    fields: 'フィールド',
+    toolbar: 'ツールバー',
+    showSearch: '検索を表示',
+    showFilters: 'フィルタを表示',
+    showSort: 'ソートを表示',
+    appearance: '外観',
+    rowHeight: '行の高さ',
+    stripedRows: 'ストライプ',
+    bordered: 'ボーダー',
+    livePreview: 'ライブプレビュー',
+  },
   console: {
     title: 'ObjectStack コンソール',
     initializing: 'アプリケーションを初期化中...',
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
index 221852238f..888c7ec904 100644
--- a/packages/i18n/src/locales/ko.ts
+++ b/packages/i18n/src/locales/ko.ts
@@ -137,6 +137,60 @@ const ko = {
     general: '일반',
     advanced: '고급',
   },
+  appDesigner: {
+    createApp: 'Create Application',
+    editApp: 'Edit Application',
+    basicInfo: 'Basic Info',
+    objects: 'Objects',
+    navigation: 'Navigation',
+    branding: 'Branding',
+    appName: 'App Name',
+    appTitle: 'Title',
+    appDescription: 'Description',
+    appIcon: 'Icon',
+    template: 'Template',
+    layout: 'Layout',
+    layoutSidebar: 'Sidebar',
+    layoutHeader: 'Header',
+    layoutEmpty: 'Empty',
+    selectObjects: 'Select Objects',
+    searchObjects: 'Search objects…',
+    selectAll: 'Select All',
+    deselectAll: 'Deselect All',
+    navBuilder: 'Navigation Builder',
+    addGroup: 'Add Group',
+    addUrl: 'Add URL',
+    addSeparator: 'Add Separator',
+    noNavItems: 'No navigation items yet.',
+    logoUrl: 'Logo URL',
+    primaryColor: 'Primary Color',
+    faviconUrl: 'Favicon URL',
+    preview: 'Preview',
+    complete: 'Complete',
+    snakeCaseHint: 'Must be snake_case (e.g. my_app)',
+    modeEdit: 'Edit',
+    modePreview: 'Preview',
+    modeCode: 'Code',
+    addWidget: 'Add Widget',
+    widgetProperties: 'Widget Properties',
+    dataSource: 'Data Source',
+    valueField: 'Value Field',
+    aggregate: 'Aggregate',
+    colorVariant: 'Color Variant',
+    addComponent: 'Add Component',
+    componentProperties: 'Component Properties',
+    viewType: 'View Type',
+    fields: 'Fields',
+    toolbar: 'Toolbar',
+    showSearch: 'Show Search',
+    showFilters: 'Show Filters',
+    showSort: 'Show Sort',
+    appearance: 'Appearance',
+    rowHeight: 'Row Height',
+    stripedRows: 'Striped Rows',
+    bordered: 'Bordered',
+    livePreview: 'Live Preview',
+  },
   console: {
     title: 'ObjectStack 콘솔',
     initializing: '애플리케이션 초기화 중...',
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
index 37e7fdd782..33a53a9e0a 100644
--- a/packages/i18n/src/locales/pt.ts
+++ b/packages/i18n/src/locales/pt.ts
@@ -137,6 +137,60 @@ const pt = {
     general: 'Geral',
     advanced: 'Avançado',
   },
+  appDesigner: {
+    createApp: 'Create Application',
+    editApp: 'Edit Application',
+    basicInfo: 'Basic Info',
+    objects: 'Objects',
+    navigation: 'Navigation',
+    branding: 'Branding',
+    appName: 'App Name',
+    appTitle: 'Title',
+    appDescription: 'Description',
+    appIcon: 'Icon',
+    template: 'Template',
+    layout: 'Layout',
+    layoutSidebar: 'Sidebar',
+    layoutHeader: 'Header',
+    layoutEmpty: 'Empty',
+    selectObjects: 'Select Objects',
+    searchObjects: 'Search objects…',
+    selectAll: 'Select All',
+    deselectAll: 'Deselect All',
+    navBuilder: 'Navigation Builder',
+    addGroup: 'Add Group',
+    addUrl: 'Add URL',
+    addSeparator: 'Add Separator',
+    noNavItems: 'No navigation items yet.',
+    logoUrl: 'Logo URL',
+    primaryColor: 'Primary Color',
+    faviconUrl: 'Favicon URL',
+    preview: 'Preview',
+    complete: 'Complete',
+    snakeCaseHint: 'Must be snake_case (e.g. my_app)',
+    modeEdit: 'Edit',
+    modePreview: 'Preview',
+    modeCode: 'Code',
+    addWidget: 'Add Widget',
+    widgetProperties: 'Widget Properties',
+    dataSource: 'Data Source',
+    valueField: 'Value Field',
+    aggregate: 'Aggregate',
+    colorVariant: 'Color Variant',
+    addComponent: 'Add Component',
+    componentProperties: 'Component Properties',
+    viewType: 'View Type',
+    fields: 'Fields',
+    toolbar: 'Toolbar',
+    showSearch: 'Show Search',
+    showFilters: 'Show Filters',
+    showSort: 'Show Sort',
+    appearance: 'Appearance',
+    rowHeight: 'Row Height',
+    stripedRows: 'Striped Rows',
+    bordered: 'Bordered',
+    livePreview: 'Live Preview',
+  },
   console: {
     title: 'Console ObjectStack',
     initializing: 'Inicializando aplicação...',
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
index 9b87246b54..667b578052 100644
--- a/packages/i18n/src/locales/ru.ts
+++ b/packages/i18n/src/locales/ru.ts
@@ -137,6 +137,60 @@ const ru = {
     general: 'Основные',
     advanced: 'Дополнительно',
   },
+  appDesigner: {
+    createApp: 'Create Application',
+    editApp: 'Edit Application',
+    basicInfo: 'Basic Info',
+    objects: 'Objects',
+    navigation: 'Navigation',
+    branding: 'Branding',
+    appName: 'App Name',
+    appTitle: 'Title',
+    appDescription: 'Description',
+    appIcon: 'Icon',
+    template: 'Template',
+    layout: 'Layout',
+    layoutSidebar: 'Sidebar',
+    layoutHeader: 'Header',
+    layoutEmpty: 'Empty',
+    selectObjects: 'Select Objects',
+    searchObjects: 'Search objects…',
+    selectAll: 'Select All',
+    deselectAll: 'Deselect All',
+    navBuilder: 'Navigation Builder',
+    addGroup: 'Add Group',
+    addUrl: 'Add URL',
+    addSeparator: 'Add Separator',
+    noNavItems: 'No navigation items yet.',
+    logoUrl: 'Logo URL',
+    primaryColor: 'Primary Color',
+    faviconUrl: 'Favicon URL',
+    preview: 'Preview',
+    complete: 'Complete',
+    snakeCaseHint: 'Must be snake_case (e.g. my_app)',
+    modeEdit: 'Edit',
+    modePreview: 'Preview',
+    modeCode: 'Code',
+    addWidget: 'Add Widget',
+    widgetProperties: 'Widget Properties',
+    dataSource: 'Data Source',
+    valueField: 'Value Field',
+    aggregate: 'Aggregate',
+    colorVariant: 'Color Variant',
+    addComponent: 'Add Component',
+    componentProperties: 'Component Properties',
+    viewType: 'View Type',
+    fields: 'Fields',
+    toolbar: 'Toolbar',
+    showSearch: 'Show Search',
+    showFilters: 'Show Filters',
+    showSort: 'Show Sort',
+    appearance: 'Appearance',
+    rowHeight: 'Row Height',
+    stripedRows: 'Striped Rows',
+    bordered: 'Bordered',
+    livePreview: 'Live Preview',
+  },
   console: {
     title: 'Консоль ObjectStack',
     initializing: 'Инициализация приложения...',
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
index 144231a18f..bcdccb3782 100644
--- a/packages/i18n/src/locales/zh.ts
+++ b/packages/i18n/src/locales/zh.ts
@@ -137,6 +137,60 @@ const zh = {
     general: '基本',
     advanced: '高级',
   },
+  appDesigner: {
+    createApp: '创建应用',
+    editApp: '编辑应用',
+    basicInfo: '基本信息',
+    objects: '业务对象',
+    navigation: '导航',
+    branding: '品牌',
+    appName: '应用名称',
+    appTitle: '标题',
+    appDescription: '描述',
+    appIcon: '图标',
+    template: '模板',
+    layout: '布局',
+    layoutSidebar: '侧边栏',
+    layoutHeader: '顶部导航',
+    layoutEmpty: '空白',
+    selectObjects: '选择对象',
+    searchObjects: '搜索对象…',
+    selectAll: '全选',
+    deselectAll: '取消全选',
+    navBuilder: '导航构建器',
+    addGroup: '添加分组',
+    addUrl: '添加链接',
+    addSeparator: '添加分隔线',
+    noNavItems: '暂无导航项。',
+    logoUrl: 'Logo 链接',
+    primaryColor: '主色调',
+    faviconUrl: '网站图标链接',
+    preview: '预览',
+    complete: '完成',
+    snakeCaseHint: '必须使用 snake_case 格式（如 my_app）',
+    modeEdit: '编辑',
+    modePreview: '预览',
+    modeCode: '代码',
+    addWidget: '添加组件',
+    widgetProperties: '组件属性',
+    dataSource: '数据源',
+    valueField: '数值字段',
+    aggregate: '聚合',
+    colorVariant: '颜色',
+    addComponent: '添加组件',
+    componentProperties: '组件属性',
+    viewType: '视图类型',
+    fields: '字段',
+    toolbar: '工具栏',
+    showSearch: '显示搜索',
+    showFilters: '显示筛选',
+    showSort: '显示排序',
+    appearance: '外观',
+    rowHeight: '行高',
+    stripedRows: '斑马纹',
+    bordered: '边框',
+    livePreview: '实时预览',
+  },
   console: {
     title: 'ObjectStack 控制台',
     initializing: '正在初始化应用程序...',
diff --git a/packages/plugin-designer/src/AppCreationWizard.tsx b/packages/plugin-designer/src/AppCreationWizard.tsx
new file mode 100644
index 0000000000..329f8b1c36
--- /dev/null
+++ b/packages/plugin-designer/src/AppCreationWizard.tsx
@@ -0,0 +1,931 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * AppCreationWizard Component
+ *
+ * Multi-step wizard for creating applications following the Airtable
+ * Interface Designer UX pattern. Steps:
+ * 1. Basic Info (name, title, description, icon, template, layout)
+ * 2. Object Selection (select business objects to include)
+ * 3. Navigation Builder (build navigation tree from selected objects)
+ * 4. Branding (logo, primary color, favicon)
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import type {
+  AppWizardDraft,
+  AppWizardStep,
+  BrandingConfig,
+  ObjectSelection,
+  NavigationItem,
+} from '@object-ui/types';
+import { isValidAppName } from '@object-ui/types';
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  ChevronDown,
+  Search,
+  Plus,
+  Trash2,
+  Layout,
+  PanelLeft,
+  LayoutTemplate,
+  FolderOpen,
+  Link,
+  Minus,
+  Image,
+  Palette,
+  Globe,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface AppCreationWizardProps {
+  /** Available business objects to select from */
+  availableObjects?: ObjectSelection[];
+  /** Available templates */
+  templates?: Array<{ id: string; label: string; description?: string }>;
+  /** Initial draft state (for editing existing apps) */
+  initialDraft?: Partial<AppWizardDraft>;
+  /** Callback when wizard completes */
+  onComplete?: (draft: AppWizardDraft) => void;
+  /** Callback when wizard is cancelled */
+  onCancel?: () => void;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** CSS class */
+  className?: string;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const WIZARD_STEPS: AppWizardStep[] = [
+  { id: 'basic', label: 'Basic Info', description: 'Name, title, and layout', icon: 'Settings' },
+  { id: 'objects', label: 'Objects', description: 'Select business objects', icon: 'Database' },
+  { id: 'navigation', label: 'Navigation', description: 'Build navigation tree', icon: 'Menu' },
+  { id: 'branding', label: 'Branding', description: 'Logo, colors, and favicon', icon: 'Palette' },
+];
+
+const DEFAULT_DRAFT: AppWizardDraft = {
+  name: '',
+  title: '',
+  description: '',
+  icon: '',
+  template: '',
+  layout: 'sidebar',
+  objects: [],
+  navigation: [],
+  branding: {
+    logo: '',
+    primaryColor: '#3b82f6',
+    favicon: '',
+  },
+};
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function generateNavFromObjects(objects: ObjectSelection[]): NavigationItem[] {
+  return objects
+    .filter((o) => o.selected)
+    .map((o) => ({
+      id: o.name,
+      type: 'object' as const,
+      label: o.label,
+      icon: o.icon,
+      objectName: o.name,
+    }));
+}
+
+let navItemCounter = 0;
+
+function createNavId(prefix: string): string {
+  navItemCounter += 1;
+  return `${prefix}_${Date.now()}_${navItemCounter}`;
+}
+
+// ============================================================================
+// Step Indicator
+// ============================================================================
+
+interface StepIndicatorProps {
+  steps: AppWizardStep[];
+  currentIndex: number;
+  onStepClick: (index: number) => void;
+}
+
+function StepIndicator({ steps, currentIndex, onStepClick }: StepIndicatorProps) {
+  return (
+    <nav className="flex items-center justify-center gap-0 px-4 py-6">
+      {steps.map((step, i) => {
+        const isCompleted = i < currentIndex;
+        const isCurrent = i === currentIndex;
+        return (
+          <React.Fragment key={step.id}>
+            {i > 0 && (
+              <div
+                className={cn(
+                  'h-0.5 w-12 sm:w-20',
+                  isCompleted ? 'bg-blue-500' : 'bg-gray-200'
+                )}
+              />
+            )}
+            <button
+              type="button"
+              data-testid={`wizard-step-${step.id}`}
+              onClick={() => onStepClick(i)}
+              className={cn(
+                'flex flex-col items-center gap-1 outline-none focus-visible:ring-2 focus-visible:ring-blue-400 rounded-lg px-2 py-1',
+                isCurrent && 'cursor-default',
+                !isCurrent && 'cursor-pointer'
+              )}
+            >
+              <div
+                className={cn(
+                  'flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold transition-colors',
+                  isCompleted && 'bg-blue-500 text-white',
+                  isCurrent && 'bg-blue-600 text-white ring-2 ring-blue-300',
+                  !isCompleted && !isCurrent && 'bg-gray-200 text-gray-500'
+                )}
+              >
+                {isCompleted ? <Check className="h-4 w-4" /> : i + 1}
+              </div>
+              <span
+                className={cn(
+                  'text-xs font-medium',
+                  isCurrent ? 'text-blue-600' : 'text-gray-500'
+                )}
+              >
+                {step.label}
+              </span>
+            </button>
+          </React.Fragment>
+        );
+      })}
+    </nav>
+  );
+}
+
+// ============================================================================
+// Step 1: Basic Info
+// ============================================================================
+
+interface BasicInfoStepProps {
+  draft: AppWizardDraft;
+  templates: Array<{ id: string; label: string; description?: string }>;
+  readOnly: boolean;
+  onChange: (partial: Partial<AppWizardDraft>) => void;
+}
+
+function BasicInfoStep({ draft, templates, readOnly, onChange }: BasicInfoStepProps) {
+  const nameError = draft.name.length > 0 && !isValidAppName(draft.name);
+
+  return (
+    <div data-testid="wizard-step-basic-content" className="mx-auto max-w-lg space-y-5">
+      {/* Name */}
+      <div className="space-y-1.5">
+        <label htmlFor="app-name" className="block text-sm font-medium text-gray-700">
+          App Name <span className="text-red-500">*</span>
+        </label>
+        <input
+          id="app-name"
+          data-testid="app-name-input"
+          type="text"
+          value={draft.name}
+          onChange={(e) => onChange({ name: e.target.value })}
+          placeholder="my_app"
+          disabled={readOnly}
+          className={cn(
+            'block w-full rounded-md border px-3 py-2 text-sm shadow-sm outline-none transition-colors',
+            'focus:border-blue-500 focus:ring-1 focus:ring-blue-500',
+            'disabled:cursor-not-allowed disabled:bg-gray-50',
+            nameError ? 'border-red-400' : 'border-gray-300'
+          )}
+        />
+        {nameError && (
+          <p className="text-xs text-red-500">Must be snake_case (e.g. my_app)</p>
+        )}
+      </div>
+
+      {/* Title */}
+      <div className="space-y-1.5">
+        <label htmlFor="app-title" className="block text-sm font-medium text-gray-700">
+          Title <span className="text-red-500">*</span>
+        </label>
+        <input
+          id="app-title"
+          data-testid="app-title-input"
+          type="text"
+          value={draft.title}
+          onChange={(e) => onChange({ title: e.target.value })}
+          placeholder="My Application"
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
+        />
+      </div>
+
+      {/* Description */}
+      <div className="space-y-1.5">
+        <label htmlFor="app-description" className="block text-sm font-medium text-gray-700">
+          Description
+        </label>
+        <textarea
+          id="app-description"
+          data-testid="app-description-input"
+          value={draft.description ?? ''}
+          onChange={(e) => onChange({ description: e.target.value })}
+          placeholder="A brief description of your application…"
+          rows={3}
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50 resize-none"
+        />
+      </div>
+
+      {/* Icon */}
+      <div className="space-y-1.5">
+        <label htmlFor="app-icon" className="block text-sm font-medium text-gray-700">
+          Icon
+        </label>
+        <input
+          id="app-icon"
+          type="text"
+          value={draft.icon ?? ''}
+          onChange={(e) => onChange({ icon: e.target.value })}
+          placeholder="LayoutDashboard"
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
+        />
+      </div>
+
+      {/* Template */}
+      {templates.length > 0 && (
+        <div className="space-y-1.5">
+          <label htmlFor="app-template" className="block text-sm font-medium text-gray-700">
+            Template
+          </label>
+          <select
+            id="app-template"
+            value={draft.template ?? ''}
+            onChange={(e) => onChange({ template: e.target.value })}
+            disabled={readOnly}
+            className="block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
+          >
+            <option value="">None</option>
+            {templates.map((t) => (
+              <option key={t.id} value={t.id}>
+                {t.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Layout */}
+      <fieldset className="space-y-2">
+        <legend className="text-sm font-medium text-gray-700">Layout</legend>
+        <div className="flex gap-3">
+          {([
+            { value: 'sidebar', label: 'Sidebar', Icon: PanelLeft },
+            { value: 'header', label: 'Header', Icon: Layout },
+            { value: 'empty', label: 'Empty', Icon: LayoutTemplate },
+          ] as const).map(({ value, label, Icon }) => (
+            <label
+              key={value}
+              data-testid={`app-layout-${value}`}
+              className={cn(
+                'flex flex-1 cursor-pointer flex-col items-center gap-1.5 rounded-lg border-2 p-3 transition-colors',
+                draft.layout === value
+                  ? 'border-blue-500 bg-blue-50'
+                  : 'border-gray-200 hover:border-gray-300',
+                readOnly && 'pointer-events-none opacity-60'
+              )}
+            >
+              <Icon className="h-5 w-5 text-gray-600" />
+              <span className="text-xs font-medium text-gray-700">{label}</span>
+              <input
+                type="radio"
+                name="layout"
+                value={value}
+                checked={draft.layout === value}
+                onChange={() => onChange({ layout: value })}
+                disabled={readOnly}
+                className="sr-only"
+              />
+            </label>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+
+// ============================================================================
+// Step 2: Object Selection
+// ============================================================================
+
+interface ObjectSelectionStepProps {
+  objects: ObjectSelection[];
+  readOnly: boolean;
+  onToggle: (name: string) => void;
+  onToggleAll: (selected: boolean) => void;
+  search: string;
+  onSearchChange: (value: string) => void;
+}
+
+function ObjectSelectionStep({
+  objects,
+  readOnly,
+  onToggle,
+  onToggleAll,
+  search,
+  onSearchChange,
+}: ObjectSelectionStepProps) {
+  const filtered = useMemo(() => {
+    if (!search) return objects;
+    const lower = search.toLowerCase();
+    return objects.filter(
+      (o) =>
+        o.name.toLowerCase().includes(lower) || o.label.toLowerCase().includes(lower)
+    );
+  }, [objects, search]);
+
+  const allSelected = objects.length > 0 && objects.every((o) => o.selected);
+  const noneSelected = objects.every((o) => !o.selected);
+
+  return (
+    <div data-testid="wizard-step-objects-content" className="mx-auto max-w-2xl space-y-4">
+      {/* Toolbar */}
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+          <input
+            data-testid="object-search"
+            type="text"
+            value={search}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search objects…"
+            className="block w-full rounded-md border border-gray-300 py-2 pl-9 pr-3 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+          />
+        </div>
+        <button
+          type="button"
+          onClick={() => onToggleAll(!allSelected)}
+          disabled={readOnly}
+          className="rounded-md border border-gray-300 px-3 py-2 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {allSelected ? 'Deselect All' : 'Select All'}
+        </button>
+      </div>
+
+      {/* Grid */}
+      {filtered.length === 0 ? (
+        <p className="py-8 text-center text-sm text-gray-400">No objects found.</p>
+      ) : (
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
+          {filtered.map((obj) => (
+            <button
+              key={obj.name}
+              type="button"
+              data-testid={`object-card-${obj.name}`}
+              disabled={readOnly}
+              onClick={() => onToggle(obj.name)}
+              className={cn(
+                'flex flex-col items-start gap-1 rounded-lg border-2 p-3 text-left transition-colors',
+                obj.selected
+                  ? 'border-blue-500 bg-blue-50'
+                  : 'border-gray-200 hover:border-gray-300',
+                readOnly && 'pointer-events-none opacity-60'
+              )}
+            >
+              <div className="flex w-full items-center justify-between">
+                <span className="text-sm font-medium text-gray-800">{obj.label}</span>
+                <div
+                  className={cn(
+                    'flex h-5 w-5 items-center justify-center rounded border transition-colors',
+                    obj.selected
+                      ? 'border-blue-500 bg-blue-500 text-white'
+                      : 'border-gray-300'
+                  )}
+                >
+                  {obj.selected && <Check className="h-3 w-3" />}
+                </div>
+              </div>
+              <span className="text-xs text-gray-500">{obj.name}</span>
+              {obj.icon && <span className="text-xs text-gray-400">{obj.icon}</span>}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Step 3: Navigation Builder
+// ============================================================================
+
+interface NavigationBuilderStepProps {
+  items: NavigationItem[];
+  readOnly: boolean;
+  onAdd: (type: 'group' | 'url' | 'separator') => void;
+  onRemove: (id: string) => void;
+  onReorder: (id: string, direction: 'up' | 'down') => void;
+}
+
+const TYPE_BADGE_COLORS: Record<string, string> = {
+  object: 'bg-green-100 text-green-700',
+  group: 'bg-purple-100 text-purple-700',
+  url: 'bg-sky-100 text-sky-700',
+  separator: 'bg-gray-100 text-gray-600',
+  dashboard: 'bg-amber-100 text-amber-700',
+  page: 'bg-teal-100 text-teal-700',
+  report: 'bg-rose-100 text-rose-700',
+  action: 'bg-orange-100 text-orange-700',
+};
+
+function NavigationBuilderStep({
+  items,
+  readOnly,
+  onAdd,
+  onRemove,
+  onReorder,
+}: NavigationBuilderStepProps) {
+  return (
+    <div data-testid="wizard-step-navigation-content" className="mx-auto max-w-lg space-y-4">
+      {/* Add buttons */}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          data-testid="add-group-btn"
+          onClick={() => onAdd('group')}
+          disabled={readOnly}
+          className="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <FolderOpen className="h-3.5 w-3.5" />
+          Add Group
+        </button>
+        <button
+          type="button"
+          data-testid="add-url-btn"
+          onClick={() => onAdd('url')}
+          disabled={readOnly}
+          className="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Link className="h-3.5 w-3.5" />
+          Add URL
+        </button>
+        <button
+          type="button"
+          data-testid="add-separator-btn"
+          onClick={() => onAdd('separator')}
+          disabled={readOnly}
+          className="inline-flex items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <Minus className="h-3.5 w-3.5" />
+          Add Separator
+        </button>
+      </div>
+
+      {/* Item list */}
+      {items.length === 0 ? (
+        <p className="py-8 text-center text-sm text-gray-400">
+          No navigation items yet. Select objects in the previous step or add items manually.
+        </p>
+      ) : (
+        <ul className="space-y-1.5">
+          {items.map((item, idx) => (
+            <li
+              key={item.id}
+              data-testid={`nav-item-${item.id}`}
+              className="flex items-center gap-2 rounded-md border border-gray-200 bg-white px-3 py-2"
+            >
+              {item.icon && (
+                <span className="text-xs text-gray-400">{item.icon}</span>
+              )}
+              <span className="flex-1 truncate text-sm text-gray-800">
+                {item.type === 'separator' ? '— Separator —' : item.label}
+              </span>
+              <span
+                className={cn(
+                  'rounded-full px-2 py-0.5 text-[10px] font-medium',
+                  TYPE_BADGE_COLORS[item.type] ?? 'bg-gray-100 text-gray-600'
+                )}
+              >
+                {item.type}
+              </span>
+
+              {/* Reorder / Remove */}
+              <div className="flex items-center gap-0.5">
+                <button
+                  type="button"
+                  onClick={() => onReorder(item.id, 'up')}
+                  disabled={readOnly || idx === 0}
+                  className="rounded p-0.5 text-gray-400 transition-colors hover:text-gray-700 disabled:opacity-30"
+                  aria-label="Move up"
+                >
+                  <ChevronUp className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onReorder(item.id, 'down')}
+                  disabled={readOnly || idx === items.length - 1}
+                  className="rounded p-0.5 text-gray-400 transition-colors hover:text-gray-700 disabled:opacity-30"
+                  aria-label="Move down"
+                >
+                  <ChevronDown className="h-3.5 w-3.5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => onRemove(item.id)}
+                  disabled={readOnly}
+                  className="rounded p-0.5 text-gray-400 transition-colors hover:text-red-500 disabled:opacity-30"
+                  aria-label="Remove"
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Step 4: Branding
+// ============================================================================
+
+interface BrandingStepProps {
+  branding: BrandingConfig;
+  title: string;
+  readOnly: boolean;
+  onChange: (partial: Partial<BrandingConfig>) => void;
+}
+
+function BrandingStep({ branding, title, readOnly, onChange }: BrandingStepProps) {
+  return (
+    <div data-testid="wizard-step-branding-content" className="mx-auto max-w-lg space-y-5">
+      {/* Logo URL */}
+      <div className="space-y-1.5">
+        <label htmlFor="branding-logo" className="block text-sm font-medium text-gray-700">
+          Logo URL
+        </label>
+        <div className="relative">
+          <Image className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+          <input
+            id="branding-logo"
+            data-testid="branding-logo-input"
+            type="text"
+            value={branding.logo ?? ''}
+            onChange={(e) => onChange({ logo: e.target.value })}
+            placeholder="https://example.com/logo.svg"
+            disabled={readOnly}
+            className="block w-full rounded-md border border-gray-300 py-2 pl-9 pr-3 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
+          />
+        </div>
+      </div>
+
+      {/* Primary Color */}
+      <div className="space-y-1.5">
+        <label htmlFor="branding-color" className="block text-sm font-medium text-gray-700">
+          Primary Color
+        </label>
+        <div className="relative">
+          <Palette className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+          <input
+            id="branding-color"
+            data-testid="branding-color-input"
+            type="text"
+            value={branding.primaryColor ?? '#3b82f6'}
+            onChange={(e) => onChange({ primaryColor: e.target.value })}
+            placeholder="#3b82f6"
+            disabled={readOnly}
+            className="block w-full rounded-md border border-gray-300 py-2 pl-9 pr-3 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
+          />
+        </div>
+      </div>
+
+      {/* Favicon URL */}
+      <div className="space-y-1.5">
+        <label htmlFor="branding-favicon" className="block text-sm font-medium text-gray-700">
+          Favicon URL
+        </label>
+        <div className="relative">
+          <Globe className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400" />
+          <input
+            id="branding-favicon"
+            data-testid="branding-favicon-input"
+            type="text"
+            value={branding.favicon ?? ''}
+            onChange={(e) => onChange({ favicon: e.target.value })}
+            placeholder="https://example.com/favicon.ico"
+            disabled={readOnly}
+            className="block w-full rounded-md border border-gray-300 py-2 pl-9 pr-3 text-sm shadow-sm outline-none transition-colors focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-50"
+          />
+        </div>
+      </div>
+
+      {/* Branding Preview */}
+      <div className="space-y-1.5">
+        <span className="block text-sm font-medium text-gray-700">Preview</span>
+        <div className="rounded-lg border border-gray-200 bg-white p-4">
+          <div className="flex items-center gap-3">
+            {branding.logo ? (
+              <img
+                src={branding.logo}
+                alt="App logo"
+                className="h-8 w-8 rounded object-contain"
+              />
+            ) : (
+              <div className="flex h-8 w-8 items-center justify-center rounded bg-gray-100 text-xs text-gray-400">
+                Logo
+              </div>
+            )}
+            <span className="text-sm font-semibold text-gray-800">{title || 'App Title'}</span>
+          </div>
+          <div className="mt-3 flex items-center gap-2">
+            <div
+              className="h-4 w-4 rounded-full border border-gray-200"
+              style={{ backgroundColor: branding.primaryColor || '#3b82f6' }}
+            />
+            <span className="text-xs text-gray-500">
+              {branding.primaryColor || '#3b82f6'}
+            </span>
+          </div>
+          {branding.favicon && (
+            <div className="mt-2 flex items-center gap-2">
+              <img
+                src={branding.favicon}
+                alt="Favicon"
+                className="h-4 w-4 rounded object-contain"
+              />
+              <span className="text-xs text-gray-500">Favicon</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Wizard Component
+// ============================================================================
+
+export function AppCreationWizard({
+  availableObjects = [],
+  templates = [],
+  initialDraft,
+  onComplete,
+  onCancel,
+  readOnly = false,
+  className,
+}: AppCreationWizardProps) {
+  // ---- State ----
+  const [currentStep, setCurrentStep] = useState(0);
+  const [objectSearch, setObjectSearch] = useState('');
+
+  const [draft, setDraft] = useState<AppWizardDraft>(() => ({
+    ...DEFAULT_DRAFT,
+    objects: availableObjects.map((o) => ({ ...o })),
+    ...initialDraft,
+  }));
+
+  // ---- Derived ----
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === WIZARD_STEPS.length - 1;
+
+  const step1Valid = useMemo(
+    () => draft.name.length > 0 && isValidAppName(draft.name) && draft.title.trim().length > 0,
+    [draft.name, draft.title]
+  );
+
+  const canProceed = useMemo(() => {
+    if (currentStep === 0) return step1Valid;
+    return true;
+  }, [currentStep, step1Valid]);
+
+  // ---- Callbacks ----
+  const updateDraft = useCallback((partial: Partial<AppWizardDraft>) => {
+    setDraft((prev) => ({ ...prev, ...partial }));
+  }, []);
+
+  const updateBranding = useCallback((partial: Partial<BrandingConfig>) => {
+    setDraft((prev) => ({
+      ...prev,
+      branding: { ...prev.branding, ...partial },
+    }));
+  }, []);
+
+  const toggleObject = useCallback((name: string) => {
+    setDraft((prev) => ({
+      ...prev,
+      objects: prev.objects.map((o) =>
+        o.name === name ? { ...o, selected: !o.selected } : o
+      ),
+    }));
+  }, []);
+
+  const toggleAllObjects = useCallback((selected: boolean) => {
+    setDraft((prev) => ({
+      ...prev,
+      objects: prev.objects.map((o) => ({ ...o, selected })),
+    }));
+  }, []);
+
+  const addNavItem = useCallback((type: 'group' | 'url' | 'separator') => {
+    const newItem: NavigationItem = {
+      id: createNavId(type),
+      type,
+      label: type === 'separator' ? '' : type === 'group' ? 'New Group' : 'New Link',
+      ...(type === 'group' ? { children: [] } : {}),
+      ...(type === 'url' ? { url: '' } : {}),
+    };
+    setDraft((prev) => ({
+      ...prev,
+      navigation: [...prev.navigation, newItem],
+    }));
+  }, []);
+
+  const removeNavItem = useCallback((id: string) => {
+    setDraft((prev) => ({
+      ...prev,
+      navigation: prev.navigation.filter((item) => item.id !== id),
+    }));
+  }, []);
+
+  const reorderNavItem = useCallback((id: string, direction: 'up' | 'down') => {
+    setDraft((prev) => {
+      const items = [...prev.navigation];
+      const idx = items.findIndex((item) => item.id === id);
+      if (idx < 0) return prev;
+      const targetIdx = direction === 'up' ? idx - 1 : idx + 1;
+      if (targetIdx < 0 || targetIdx >= items.length) return prev;
+      [items[idx], items[targetIdx]] = [items[targetIdx], items[idx]];
+      return { ...prev, navigation: items };
+    });
+  }, []);
+
+  const handleNext = useCallback(() => {
+    if (isLastStep) return;
+    // Auto-generate navigation when moving from objects → navigation
+    if (currentStep === 1) {
+      setDraft((prev) => ({
+        ...prev,
+        navigation: generateNavFromObjects(prev.objects),
+      }));
+    }
+    setCurrentStep((s) => s + 1);
+  }, [currentStep, isLastStep]);
+
+  const handleBack = useCallback(() => {
+    if (isFirstStep) return;
+    setCurrentStep((s) => s - 1);
+  }, [isFirstStep]);
+
+  const handleComplete = useCallback(() => {
+    onComplete?.(draft);
+  }, [draft, onComplete]);
+
+  const handleStepClick = useCallback(
+    (index: number) => {
+      // Only allow navigating to completed steps or the next valid step
+      if (index <= currentStep) {
+        setCurrentStep(index);
+      } else if (index === currentStep + 1 && canProceed) {
+        // Auto-generate navigation when jumping from objects → navigation
+        if (currentStep === 1 && index === 2) {
+          setDraft((prev) => ({
+            ...prev,
+            navigation: generateNavFromObjects(prev.objects),
+          }));
+        }
+        setCurrentStep(index);
+      }
+    },
+    [currentStep, canProceed]
+  );
+
+  // ---- Render ----
+  return (
+    <div className={cn('flex h-full flex-col rounded-xl border border-gray-200 bg-white shadow-sm', className)}>
+      {/* Step Indicator */}
+      <div className="border-b border-gray-100">
+        <StepIndicator
+          steps={WIZARD_STEPS}
+          currentIndex={currentStep}
+          onStepClick={handleStepClick}
+        />
+      </div>
+
+      {/* Step Content */}
+      <div className="flex-1 overflow-y-auto p-6">
+        {currentStep === 0 && (
+          <BasicInfoStep
+            draft={draft}
+            templates={templates}
+            readOnly={readOnly}
+            onChange={updateDraft}
+          />
+        )}
+        {currentStep === 1 && (
+          <ObjectSelectionStep
+            objects={draft.objects}
+            readOnly={readOnly}
+            onToggle={toggleObject}
+            onToggleAll={toggleAllObjects}
+            search={objectSearch}
+            onSearchChange={setObjectSearch}
+          />
+        )}
+        {currentStep === 2 && (
+          <NavigationBuilderStep
+            items={draft.navigation}
+            readOnly={readOnly}
+            onAdd={addNavItem}
+            onRemove={removeNavItem}
+            onReorder={reorderNavItem}
+          />
+        )}
+        {currentStep === 3 && (
+          <BrandingStep
+            branding={draft.branding}
+            title={draft.title}
+            readOnly={readOnly}
+            onChange={updateBranding}
+          />
+        )}
+      </div>
+
+      {/* Navigation Buttons */}
+      <div className="flex items-center justify-between border-t border-gray-100 px-6 py-4">
+        <button
+          type="button"
+          data-testid="wizard-cancel"
+          onClick={onCancel}
+          disabled={readOnly}
+          className="rounded-md px-4 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Cancel
+        </button>
+        <div className="flex items-center gap-2">
+          {!isFirstStep && (
+            <button
+              type="button"
+              data-testid="wizard-back"
+              onClick={handleBack}
+              disabled={readOnly}
+              className="inline-flex items-center gap-1 rounded-md border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <ChevronLeft className="h-4 w-4" />
+              Back
+            </button>
+          )}
+          {isLastStep ? (
+            <button
+              type="button"
+              data-testid="wizard-complete"
+              onClick={handleComplete}
+              disabled={readOnly || !canProceed}
+              className="inline-flex items-center gap-1 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <Check className="h-4 w-4" />
+              Complete
+            </button>
+          ) : (
+            <button
+              type="button"
+              data-testid="wizard-next"
+              onClick={handleNext}
+              disabled={readOnly || !canProceed}
+              className="inline-flex items-center gap-1 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              Next
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/plugin-designer/src/DashboardEditor.tsx b/packages/plugin-designer/src/DashboardEditor.tsx
new file mode 100644
index 0000000000..6556906c2e
--- /dev/null
+++ b/packages/plugin-designer/src/DashboardEditor.tsx
@@ -0,0 +1,445 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * DashboardEditor Component
+ *
+ * Visual editor for DashboardSchema — grid layout with widget selection,
+ * property editing, and drag-based reordering. Supports KPI, Chart, Table,
+ * and custom widget types from the spec.
+ */
+
+import React, { useState, useCallback } from 'react';
+import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
+import {
+  Plus,
+  Trash2,
+  GripVertical,
+  ChevronUp,
+  ChevronDown,
+  BarChart3,
+  LineChart,
+  PieChart,
+  TrendingUp,
+  Table2,
+  LayoutGrid,
+  Settings2,
+  X,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface DashboardEditorProps {
+  /** Dashboard schema to edit */
+  schema: DashboardSchema;
+  /** Callback when schema changes */
+  onChange: (schema: DashboardSchema) => void;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** CSS class */
+  className?: string;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const WIDGET_TYPES = [
+  { type: 'metric', label: 'KPI Metric', Icon: TrendingUp },
+  { type: 'bar', label: 'Bar Chart', Icon: BarChart3 },
+  { type: 'line', label: 'Line Chart', Icon: LineChart },
+  { type: 'pie', label: 'Pie Chart', Icon: PieChart },
+  { type: 'table', label: 'Table', Icon: Table2 },
+  { type: 'grid', label: 'Grid', Icon: LayoutGrid },
+];
+
+let widgetCounter = 0;
+
+function createWidgetId(): string {
+  widgetCounter += 1;
+  return `widget_${Date.now()}_${widgetCounter}`;
+}
+
+// ============================================================================
+// Widget Card
+// ============================================================================
+
+interface WidgetCardProps {
+  widget: DashboardWidgetSchema;
+  index: number;
+  total: number;
+  selected: boolean;
+  readOnly: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+}
+
+function WidgetCard({
+  widget,
+  index,
+  total,
+  selected,
+  readOnly,
+  onSelect,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+}: WidgetCardProps) {
+  const wType = widget.type || 'metric';
+  const meta = WIDGET_TYPES.find((t) => t.type === wType) || WIDGET_TYPES[0];
+
+  return (
+    <div
+      data-testid={`dashboard-widget-${widget.id}`}
+      onClick={onSelect}
+      className={cn(
+        'group cursor-pointer rounded-lg border-2 p-3 transition-colors',
+        selected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex items-center gap-2">
+          <GripVertical className="h-4 w-4 text-gray-300" />
+          <meta.Icon className="h-4 w-4 text-gray-500" />
+          <span className="text-sm font-medium text-gray-800">
+            {widget.title || `Widget ${index + 1}`}
+          </span>
+        </div>
+
+        {!readOnly && (
+          <div className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onMoveUp(); }}
+              disabled={index === 0}
+              className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+              aria-label="Move up"
+            >
+              <ChevronUp className="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onMoveDown(); }}
+              disabled={index === total - 1}
+              className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+              aria-label="Move down"
+            >
+              <ChevronDown className="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onRemove(); }}
+              className="rounded p-0.5 text-gray-400 hover:text-red-500"
+              aria-label="Remove widget"
+              data-testid={`dashboard-widget-remove-${widget.id}`}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-1.5 flex items-center gap-2">
+        <span className="rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600">
+          {meta.label}
+        </span>
+        {widget.object && (
+          <span className="text-[10px] text-gray-400">
+            {widget.object}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Widget Property Panel
+// ============================================================================
+
+interface WidgetPropertyPanelProps {
+  widget: DashboardWidgetSchema;
+  readOnly: boolean;
+  onChange: (updates: Partial<DashboardWidgetSchema>) => void;
+  onClose: () => void;
+}
+
+function WidgetPropertyPanel({
+  widget,
+  readOnly,
+  onChange,
+  onClose,
+}: WidgetPropertyPanelProps) {
+  return (
+    <div
+      data-testid="widget-property-panel"
+      className="w-72 shrink-0 space-y-4 rounded-lg border border-gray-200 bg-white p-4"
+    >
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold text-gray-800">Widget Properties</h4>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded p-0.5 text-gray-400 hover:text-gray-600"
+          aria-label="Close"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Title */}
+      <div className="space-y-1">
+        <label htmlFor="widget-title" className="text-xs font-medium text-gray-600">Title</label>
+        <input
+          id="widget-title"
+          data-testid="widget-prop-title"
+          type="text"
+          value={widget.title ?? ''}
+          onChange={(e) => onChange({ title: e.target.value })}
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        />
+      </div>
+
+      {/* Type */}
+      <div className="space-y-1">
+        <label htmlFor="widget-type" className="text-xs font-medium text-gray-600">Type</label>
+        <select
+          id="widget-type"
+          data-testid="widget-prop-type"
+          value={widget.type ?? 'metric'}
+          onChange={(e) => onChange({ type: e.target.value })}
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        >
+          {WIDGET_TYPES.map((t) => (
+            <option key={t.type} value={t.type}>{t.label}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Data source */}
+      <div className="space-y-1">
+        <label htmlFor="widget-object" className="text-xs font-medium text-gray-600">Data Source (Object)</label>
+        <input
+          id="widget-object"
+          data-testid="widget-prop-object"
+          type="text"
+          value={widget.object ?? ''}
+          onChange={(e) => onChange({ object: e.target.value })}
+          disabled={readOnly}
+          placeholder="e.g. orders"
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        />
+      </div>
+
+      {/* Value field */}
+      <div className="space-y-1">
+        <label htmlFor="widget-value-field" className="text-xs font-medium text-gray-600">Value Field</label>
+        <input
+          id="widget-value-field"
+          data-testid="widget-prop-value-field"
+          type="text"
+          value={widget.valueField ?? ''}
+          onChange={(e) => onChange({ valueField: e.target.value })}
+          disabled={readOnly}
+          placeholder="e.g. amount"
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        />
+      </div>
+
+      {/* Aggregate */}
+      <div className="space-y-1">
+        <label htmlFor="widget-aggregate" className="text-xs font-medium text-gray-600">Aggregate</label>
+        <select
+          id="widget-aggregate"
+          data-testid="widget-prop-aggregate"
+          value={widget.aggregate ?? 'count'}
+          onChange={(e) => onChange({ aggregate: e.target.value })}
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        >
+          <option value="count">Count</option>
+          <option value="sum">Sum</option>
+          <option value="avg">Average</option>
+          <option value="min">Min</option>
+          <option value="max">Max</option>
+        </select>
+      </div>
+
+      {/* Color variant */}
+      <div className="space-y-1">
+        <label htmlFor="widget-color" className="text-xs font-medium text-gray-600">Color Variant</label>
+        <select
+          id="widget-color"
+          data-testid="widget-prop-color"
+          value={widget.colorVariant ?? 'default'}
+          onChange={(e) => onChange({ colorVariant: e.target.value as DashboardWidgetSchema['colorVariant'] })}
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        >
+          <option value="default">Default</option>
+          <option value="blue">Blue</option>
+          <option value="teal">Teal</option>
+          <option value="orange">Orange</option>
+          <option value="purple">Purple</option>
+          <option value="success">Success</option>
+          <option value="warning">Warning</option>
+          <option value="danger">Danger</option>
+        </select>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function DashboardEditor({
+  schema,
+  onChange,
+  readOnly = false,
+  className,
+}: DashboardEditorProps) {
+  const [selectedWidgetId, setSelectedWidgetId] = useState<string | null>(null);
+
+  const widgets = schema.widgets || [];
+  const selectedWidget = widgets.find((w) => w.id === selectedWidgetId);
+
+  const addWidget = useCallback(
+    (type: string) => {
+      const id = createWidgetId();
+      const newWidget: DashboardWidgetSchema = {
+        id,
+        title: '',
+        type,
+        layout: {
+          x: 0,
+          y: widgets.length,
+          w: schema.columns ?? 2,
+          h: 1,
+        },
+      };
+      onChange({ ...schema, widgets: [...widgets, newWidget] });
+      setSelectedWidgetId(id);
+    },
+    [schema, widgets, onChange]
+  );
+
+  const removeWidget = useCallback(
+    (id: string) => {
+      onChange({ ...schema, widgets: widgets.filter((w) => w.id !== id) });
+      if (selectedWidgetId === id) setSelectedWidgetId(null);
+    },
+    [schema, widgets, selectedWidgetId, onChange]
+  );
+
+  const moveWidget = useCallback(
+    (id: string, direction: 'up' | 'down') => {
+      const idx = widgets.findIndex((w) => w.id === id);
+      if (idx < 0) return;
+      const target = direction === 'up' ? idx - 1 : idx + 1;
+      if (target < 0 || target >= widgets.length) return;
+      const copy = [...widgets];
+      [copy[idx], copy[target]] = [copy[target], copy[idx]];
+      onChange({ ...schema, widgets: copy });
+    },
+    [schema, widgets, onChange]
+  );
+
+  const updateWidget = useCallback(
+    (updates: Partial<DashboardWidgetSchema>) => {
+      if (!selectedWidgetId) return;
+      onChange({
+        ...schema,
+        widgets: widgets.map((w) =>
+          w.id === selectedWidgetId ? { ...w, ...updates } : w
+        ),
+      });
+    },
+    [schema, widgets, selectedWidgetId, onChange]
+  );
+
+  return (
+    <div
+      data-testid="dashboard-editor"
+      className={cn('flex gap-4', className)}
+    >
+      {/* Main area */}
+      <div className="flex-1 space-y-4">
+        {/* Toolbar */}
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium text-gray-700">Add Widget:</span>
+          {WIDGET_TYPES.map(({ type, label, Icon }) => (
+            <button
+              key={type}
+              type="button"
+              data-testid={`dashboard-add-${type}`}
+              onClick={() => addWidget(type)}
+              disabled={readOnly}
+              className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* Widget grid */}
+        {widgets.length === 0 ? (
+          <div className="flex h-48 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm text-gray-400">
+            No widgets. Click a button above to add one.
+          </div>
+        ) : (
+          <div
+            className="grid gap-3"
+            style={{ gridTemplateColumns: `repeat(${schema.columns ?? 2}, 1fr)` }}
+          >
+            {widgets.map((w, i) => (
+              <WidgetCard
+                key={w.id}
+                widget={w}
+                index={i}
+                total={widgets.length}
+                selected={w.id === selectedWidgetId}
+                readOnly={readOnly}
+                onSelect={() => setSelectedWidgetId(w.id ?? null)}
+                onRemove={() => removeWidget(w.id!)}
+                onMoveUp={() => moveWidget(w.id!, 'up')}
+                onMoveDown={() => moveWidget(w.id!, 'down')}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Property panel */}
+      {selectedWidget && (
+        <WidgetPropertyPanel
+          widget={selectedWidget}
+          readOnly={readOnly}
+          onChange={updateWidget}
+          onClose={() => setSelectedWidgetId(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default DashboardEditor;
diff --git a/packages/plugin-designer/src/EditorModeToggle.tsx b/packages/plugin-designer/src/EditorModeToggle.tsx
new file mode 100644
index 0000000000..80890bb5e1
--- /dev/null
+++ b/packages/plugin-designer/src/EditorModeToggle.tsx
@@ -0,0 +1,92 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * EditorModeToggle Component
+ *
+ * Three-way toggle for switching between Edit, Preview, and Code modes.
+ * Used across all designer components for consistent mode switching.
+ */
+
+import React from 'react';
+import type { EditorMode } from '@object-ui/types';
+import { Pencil, Eye, Code } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
+
+export interface EditorModeToggleProps {
+  /** Current mode */
+  mode: EditorMode;
+  /** Callback when mode changes */
+  onChange: (mode: EditorMode) => void;
+  /** Disable mode switching */
+  disabled?: boolean;
+  /** CSS class */
+  className?: string;
+}
+
+const MODES: Array<{ value: EditorMode; label: string; Icon: React.FC<{ className?: string }> }> = [
+  { value: 'edit', label: 'Edit', Icon: Pencil },
+  { value: 'preview', label: 'Preview', Icon: Eye },
+  { value: 'code', label: 'Code', Icon: Code },
+];
+
+/**
+ * Three-way toggle for Edit / Preview / Code modes.
+ *
+ * @example
+ * ```tsx
+ * <EditorModeToggle mode={mode} onChange={setMode} />
+ * ```
+ */
+export function EditorModeToggle({
+  mode,
+  onChange,
+  disabled = false,
+  className,
+}: EditorModeToggleProps) {
+  return (
+    <div
+      data-testid="editor-mode-toggle"
+      className={cn(
+        'inline-flex items-center rounded-lg border border-gray-200 bg-gray-50 p-0.5',
+        className
+      )}
+      role="radiogroup"
+      aria-label="Editor mode"
+    >
+      {MODES.map(({ value, label, Icon }) => (
+        <button
+          key={value}
+          type="button"
+          role="radio"
+          aria-checked={mode === value}
+          data-testid={`editor-mode-${value}`}
+          onClick={() => onChange(value)}
+          disabled={disabled}
+          className={cn(
+            'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
+            mode === value
+              ? 'bg-white text-gray-900 shadow-sm'
+              : 'text-gray-500 hover:text-gray-700',
+            disabled && 'cursor-not-allowed opacity-50'
+          )}
+        >
+          <Icon className="h-3.5 w-3.5" />
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default EditorModeToggle;
diff --git a/packages/plugin-designer/src/NavigationDesigner.tsx b/packages/plugin-designer/src/NavigationDesigner.tsx
new file mode 100644
index 0000000000..ad1428cdea
--- /dev/null
+++ b/packages/plugin-designer/src/NavigationDesigner.tsx
@@ -0,0 +1,521 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * NavigationDesigner Component
+ *
+ * Drag-and-drop tree builder for NavigationItem[] with support for
+ * recursive groups, quick add buttons, type badges, and live preview.
+ * Aligned with @objectstack/spec NavigationItem schema.
+ */
+
+import React, { useState, useCallback } from 'react';
+import type { NavigationItem, NavigationItemType } from '@object-ui/types';
+import {
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  FolderOpen,
+  Globe,
+  GripVertical,
+  LayoutDashboard,
+  Link,
+  Minus,
+  FileText,
+  BarChart3,
+  MousePointerClick,
+  Plus,
+  Trash2,
+  Database,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface NavigationDesignerProps {
+  /** Navigation items to edit */
+  items: NavigationItem[];
+  /** Callback when items change */
+  onChange: (items: NavigationItem[]) => void;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** Show live preview sidebar */
+  showPreview?: boolean;
+  /** CSS class */
+  className?: string;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+let ndCounter = 0;
+
+function createId(prefix: string): string {
+  ndCounter += 1;
+  return `${prefix}_${Date.now()}_${ndCounter}`;
+}
+
+const NAV_TYPE_META: Record<NavigationItemType, { label: string; color: string; Icon: React.FC<{ className?: string }> }> = {
+  object: { label: 'Object', color: 'bg-green-100 text-green-700', Icon: Database },
+  dashboard: { label: 'Dashboard', color: 'bg-amber-100 text-amber-700', Icon: LayoutDashboard },
+  page: { label: 'Page', color: 'bg-teal-100 text-teal-700', Icon: FileText },
+  report: { label: 'Report', color: 'bg-rose-100 text-rose-700', Icon: BarChart3 },
+  url: { label: 'URL', color: 'bg-sky-100 text-sky-700', Icon: Link },
+  group: { label: 'Group', color: 'bg-purple-100 text-purple-700', Icon: FolderOpen },
+  separator: { label: 'Separator', color: 'bg-gray-100 text-gray-600', Icon: Minus },
+  action: { label: 'Action', color: 'bg-orange-100 text-orange-700', Icon: MousePointerClick },
+};
+
+const QUICK_ADD_TYPES: Array<{ type: NavigationItemType; label: string }> = [
+  { type: 'object', label: 'Object Page' },
+  { type: 'dashboard', label: 'Dashboard' },
+  { type: 'page', label: 'Page' },
+  { type: 'report', label: 'Report' },
+  { type: 'group', label: 'Group' },
+  { type: 'url', label: 'URL' },
+  { type: 'separator', label: 'Separator' },
+];
+
+// ============================================================================
+// Navigation Item Row (recursive)
+// ============================================================================
+
+interface NavItemRowProps {
+  item: NavigationItem;
+  depth: number;
+  index: number;
+  total: number;
+  readOnly: boolean;
+  onRemove: (id: string) => void;
+  onMoveUp: (id: string) => void;
+  onMoveDown: (id: string) => void;
+  onToggleExpand: (id: string) => void;
+  onUpdateLabel: (id: string, label: string) => void;
+  onAddChild: (parentId: string, type: NavigationItemType) => void;
+  expandedIds: Set<string>;
+}
+
+function NavItemRow({
+  item,
+  depth,
+  index,
+  total,
+  readOnly,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+  onToggleExpand,
+  onUpdateLabel,
+  onAddChild,
+  expandedIds,
+}: NavItemRowProps) {
+  const [editingLabel, setEditingLabel] = useState(false);
+  const [labelDraft, setLabelDraft] = useState(item.label);
+  const meta = NAV_TYPE_META[item.type];
+  const hasChildren = item.type === 'group' && item.children && item.children.length > 0;
+  const isExpanded = expandedIds.has(item.id);
+
+  const handleLabelCommit = () => {
+    if (labelDraft.trim()) {
+      onUpdateLabel(item.id, labelDraft.trim());
+    } else {
+      setLabelDraft(item.label);
+    }
+    setEditingLabel(false);
+  };
+
+  return (
+    <>
+      <li
+        data-testid={`nav-designer-item-${item.id}`}
+        className={cn(
+          'flex items-center gap-2 rounded-md border border-gray-200 bg-white px-2 py-1.5 transition-colors hover:bg-gray-50',
+        )}
+        style={{ marginLeft: depth * 20 }}
+      >
+        {/* Drag handle */}
+        <GripVertical className="h-3.5 w-3.5 shrink-0 cursor-grab text-gray-300" />
+
+        {/* Expand/collapse for groups */}
+        {item.type === 'group' ? (
+          <button
+            type="button"
+            onClick={() => onToggleExpand(item.id)}
+            className="rounded p-0.5 text-gray-400 hover:text-gray-600"
+            aria-label={isExpanded ? 'Collapse group' : 'Expand group'}
+          >
+            {isExpanded ? (
+              <ChevronDown className="h-3.5 w-3.5" />
+            ) : (
+              <ChevronRight className="h-3.5 w-3.5" />
+            )}
+          </button>
+        ) : (
+          <span className="w-5" />
+        )}
+
+        {/* Icon */}
+        <meta.Icon className="h-3.5 w-3.5 shrink-0 text-gray-500" />
+
+        {/* Label */}
+        {item.type === 'separator' ? (
+          <span className="flex-1 text-xs italic text-gray-400">— Separator —</span>
+        ) : editingLabel && !readOnly ? (
+          <input
+            type="text"
+            value={labelDraft}
+            onChange={(e) => setLabelDraft(e.target.value)}
+            onBlur={handleLabelCommit}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleLabelCommit();
+              if (e.key === 'Escape') {
+                setLabelDraft(item.label);
+                setEditingLabel(false);
+              }
+            }}
+            autoFocus
+            className="flex-1 rounded border border-blue-300 px-1.5 py-0.5 text-sm outline-none focus:ring-1 focus:ring-blue-400"
+          />
+        ) : (
+          <span
+            className={cn(
+              'flex-1 truncate text-sm text-gray-800',
+              !readOnly && 'cursor-text'
+            )}
+            onDoubleClick={() => {
+              if (!readOnly && item.type !== 'separator') {
+                setLabelDraft(item.label);
+                setEditingLabel(true);
+              }
+            }}
+          >
+            {item.label}
+          </span>
+        )}
+
+        {/* Type badge */}
+        <span
+          className={cn(
+            'rounded-full px-2 py-0.5 text-[10px] font-medium',
+            meta.color
+          )}
+        >
+          {meta.label}
+        </span>
+
+        {/* Add child (groups only) */}
+        {item.type === 'group' && !readOnly && (
+          <button
+            type="button"
+            onClick={() => onAddChild(item.id, 'page')}
+            className="rounded p-0.5 text-gray-400 hover:text-blue-500"
+            aria-label="Add child"
+            data-testid={`nav-designer-add-child-${item.id}`}
+          >
+            <Plus className="h-3.5 w-3.5" />
+          </button>
+        )}
+
+        {/* Reorder */}
+        <button
+          type="button"
+          onClick={() => onMoveUp(item.id)}
+          disabled={readOnly || index === 0}
+          className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+          aria-label="Move up"
+        >
+          <ChevronUp className="h-3.5 w-3.5" />
+        </button>
+        <button
+          type="button"
+          onClick={() => onMoveDown(item.id)}
+          disabled={readOnly || index === total - 1}
+          className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+          aria-label="Move down"
+        >
+          <ChevronDown className="h-3.5 w-3.5" />
+        </button>
+
+        {/* Remove */}
+        <button
+          type="button"
+          onClick={() => onRemove(item.id)}
+          disabled={readOnly}
+          className="rounded p-0.5 text-gray-400 hover:text-red-500 disabled:opacity-30"
+          aria-label="Remove"
+          data-testid={`nav-designer-remove-${item.id}`}
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </li>
+
+      {/* Render children recursively */}
+      {item.type === 'group' && isExpanded && item.children && (
+        <>
+          {item.children.map((child, ci) => (
+            <NavItemRow
+              key={child.id}
+              item={child}
+              depth={depth + 1}
+              index={ci}
+              total={item.children!.length}
+              readOnly={readOnly}
+              onRemove={onRemove}
+              onMoveUp={onMoveUp}
+              onMoveDown={onMoveDown}
+              onToggleExpand={onToggleExpand}
+              onUpdateLabel={onUpdateLabel}
+              onAddChild={onAddChild}
+              expandedIds={expandedIds}
+            />
+          ))}
+        </>
+      )}
+    </>
+  );
+}
+
+// ============================================================================
+// Navigation Preview
+// ============================================================================
+
+function NavigationPreview({ items }: { items: NavigationItem[] }) {
+  return (
+    <div
+      data-testid="nav-designer-preview"
+      className="w-56 shrink-0 rounded-lg border border-gray-200 bg-gray-50 p-3"
+    >
+      <h4 className="mb-2 text-xs font-semibold uppercase text-gray-500">Live Preview</h4>
+      {items.length === 0 ? (
+        <p className="text-xs text-gray-400">No items</p>
+      ) : (
+        <ul className="space-y-0.5">
+          {items.map((item) => (
+            <PreviewItem key={item.id} item={item} depth={0} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function PreviewItem({ item, depth }: { item: NavigationItem; depth: number }) {
+  const meta = NAV_TYPE_META[item.type];
+
+  if (item.type === 'separator') {
+    return <li className="my-1 border-t border-gray-200" style={{ marginLeft: depth * 12 }} />;
+  }
+
+  return (
+    <>
+      <li
+        className="flex items-center gap-1.5 rounded px-2 py-1 text-xs text-gray-700 hover:bg-gray-100"
+        style={{ marginLeft: depth * 12 }}
+      >
+        <meta.Icon className="h-3 w-3 text-gray-400" />
+        <span className="truncate">{item.label}</span>
+      </li>
+      {item.type === 'group' && item.children?.map((child) => (
+        <PreviewItem key={child.id} item={child} depth={depth + 1} />
+      ))}
+    </>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function NavigationDesigner({
+  items,
+  onChange,
+  readOnly = false,
+  showPreview = true,
+  className,
+}: NavigationDesignerProps) {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    () => new Set(items.filter((i) => i.type === 'group').map((i) => i.id))
+  );
+
+  // ---- Helpers for deep tree operations ----
+  const removeItem = useCallback(
+    (id: string) => {
+      function filterDeep(list: NavigationItem[]): NavigationItem[] {
+        return list
+          .filter((item) => item.id !== id)
+          .map((item) =>
+            item.children
+              ? { ...item, children: filterDeep(item.children) }
+              : item
+          );
+      }
+      onChange(filterDeep(items));
+    },
+    [items, onChange]
+  );
+
+  const moveItem = useCallback(
+    (id: string, direction: 'up' | 'down') => {
+      function reorder(list: NavigationItem[]): NavigationItem[] {
+        const idx = list.findIndex((item) => item.id === id);
+        if (idx >= 0) {
+          const target = direction === 'up' ? idx - 1 : idx + 1;
+          if (target >= 0 && target < list.length) {
+            const copy = [...list];
+            [copy[idx], copy[target]] = [copy[target], copy[idx]];
+            return copy;
+          }
+          return list;
+        }
+        return list.map((item) =>
+          item.children
+            ? { ...item, children: reorder(item.children) }
+            : item
+        );
+      }
+      onChange(reorder(items));
+    },
+    [items, onChange]
+  );
+
+  const updateLabel = useCallback(
+    (id: string, label: string) => {
+      function update(list: NavigationItem[]): NavigationItem[] {
+        return list.map((item) => {
+          if (item.id === id) return { ...item, label };
+          if (item.children) return { ...item, children: update(item.children) };
+          return item;
+        });
+      }
+      onChange(update(items));
+    },
+    [items, onChange]
+  );
+
+  const addChild = useCallback(
+    (parentId: string, type: NavigationItemType) => {
+      const newItem: NavigationItem = {
+        id: createId(type),
+        type,
+        label: type === 'separator' ? '' : `New ${NAV_TYPE_META[type].label}`,
+        ...(type === 'group' ? { children: [] } : {}),
+        ...(type === 'url' ? { url: '' } : {}),
+      };
+
+      function insertChild(list: NavigationItem[]): NavigationItem[] {
+        return list.map((item) => {
+          if (item.id === parentId && item.type === 'group') {
+            return { ...item, children: [...(item.children || []), newItem] };
+          }
+          if (item.children) {
+            return { ...item, children: insertChild(item.children) };
+          }
+          return item;
+        });
+      }
+      onChange(insertChild(items));
+      setExpandedIds((prev) => new Set(prev).add(parentId));
+    },
+    [items, onChange]
+  );
+
+  const addTopLevel = useCallback(
+    (type: NavigationItemType) => {
+      const newItem: NavigationItem = {
+        id: createId(type),
+        type,
+        label: type === 'separator' ? '' : `New ${NAV_TYPE_META[type].label}`,
+        ...(type === 'group' ? { children: [] } : {}),
+        ...(type === 'url' ? { url: '' } : {}),
+      };
+      onChange([...items, newItem]);
+    },
+    [items, onChange]
+  );
+
+  const toggleExpand = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+
+  return (
+    <div
+      data-testid="navigation-designer"
+      className={cn('flex gap-4', className)}
+    >
+      {/* Editor */}
+      <div className="flex-1 space-y-3">
+        {/* Quick add bar */}
+        <div className="flex flex-wrap gap-1.5">
+          {QUICK_ADD_TYPES.map(({ type, label }) => {
+            const { Icon, color } = NAV_TYPE_META[type];
+            return (
+              <button
+                key={type}
+                type="button"
+                data-testid={`nav-designer-add-${type}`}
+                onClick={() => addTopLevel(type)}
+                disabled={readOnly}
+                className={cn(
+                  'inline-flex items-center gap-1 rounded-md border border-gray-200 px-2.5 py-1 text-xs font-medium transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50'
+                )}
+              >
+                <Plus className="h-3 w-3" />
+                {label}
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Item tree */}
+        {items.length === 0 ? (
+          <div className="py-8 text-center text-sm text-gray-400">
+            No navigation items. Click buttons above to add items.
+          </div>
+        ) : (
+          <ul className="space-y-1" data-testid="nav-designer-tree">
+            {items.map((item, idx) => (
+              <NavItemRow
+                key={item.id}
+                item={item}
+                depth={0}
+                index={idx}
+                total={items.length}
+                readOnly={readOnly}
+                onRemove={removeItem}
+                onMoveUp={(id) => moveItem(id, 'up')}
+                onMoveDown={(id) => moveItem(id, 'down')}
+                onToggleExpand={toggleExpand}
+                onUpdateLabel={updateLabel}
+                onAddChild={addChild}
+                expandedIds={expandedIds}
+              />
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Preview */}
+      {showPreview && <NavigationPreview items={items} />}
+    </div>
+  );
+}
+
+export default NavigationDesigner;
diff --git a/packages/plugin-designer/src/ObjectViewConfigurator.tsx b/packages/plugin-designer/src/ObjectViewConfigurator.tsx
new file mode 100644
index 0000000000..8343891a0f
--- /dev/null
+++ b/packages/plugin-designer/src/ObjectViewConfigurator.tsx
@@ -0,0 +1,380 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * ObjectViewConfigurator Component
+ *
+ * Configuration panel for ListViewSchema/FormViewSchema. Supports
+ * multi-view type switching, column visibility control, quick filters,
+ * and display options. Aligned with @objectstack/spec ListViewSchema.
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import type { NavigationItem } from '@object-ui/types';
+import {
+  LayoutGrid,
+  Kanban,
+  CalendarDays,
+  GalleryHorizontalEnd,
+  Clock,
+  Map,
+  GanttChart,
+  Eye,
+  EyeOff,
+  ChevronDown,
+  ChevronUp,
+  Filter,
+  ArrowUpDown,
+  Columns3,
+  Settings2,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type ViewType = 'grid' | 'kanban' | 'calendar' | 'gallery' | 'timeline' | 'map' | 'gantt';
+
+export interface ViewColumn {
+  name: string;
+  label: string;
+  visible: boolean;
+  width?: number;
+}
+
+export interface ViewConfig {
+  viewType: ViewType;
+  columns: ViewColumn[];
+  showSearch: boolean;
+  showFilters: boolean;
+  showSort: boolean;
+  rowHeight: 'compact' | 'medium' | 'tall';
+  striped: boolean;
+  bordered: boolean;
+  groupBy?: string;
+  sortField?: string;
+  sortDirection?: 'asc' | 'desc';
+}
+
+export interface ObjectViewConfiguratorProps {
+  /** Current view configuration */
+  config: ViewConfig;
+  /** Callback when config changes */
+  onChange: (config: ViewConfig) => void;
+  /** Available view types */
+  availableViewTypes?: ViewType[];
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** CSS class */
+  className?: string;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const VIEW_TYPE_META: Record<ViewType, { label: string; Icon: React.FC<{ className?: string }> }> = {
+  grid: { label: 'Grid', Icon: LayoutGrid },
+  kanban: { label: 'Kanban', Icon: Kanban },
+  calendar: { label: 'Calendar', Icon: CalendarDays },
+  gallery: { label: 'Gallery', Icon: GalleryHorizontalEnd },
+  timeline: { label: 'Timeline', Icon: Clock },
+  map: { label: 'Map', Icon: Map },
+  gantt: { label: 'Gantt', Icon: GanttChart },
+};
+
+const ROW_HEIGHT_OPTIONS: Array<{ value: ViewConfig['rowHeight']; label: string }> = [
+  { value: 'compact', label: 'Compact' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'tall', label: 'Tall' },
+];
+
+// ============================================================================
+// Collapsible Section
+// ============================================================================
+
+interface SectionProps {
+  title: string;
+  icon: React.ReactNode;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+function Section({ title, icon, defaultOpen = true, children }: SectionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="border-b border-gray-100 pb-3">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex w-full items-center gap-2 py-2 text-left"
+      >
+        {icon}
+        <span className="flex-1 text-xs font-semibold uppercase text-gray-500">{title}</span>
+        {open ? (
+          <ChevronUp className="h-3.5 w-3.5 text-gray-400" />
+        ) : (
+          <ChevronDown className="h-3.5 w-3.5 text-gray-400" />
+        )}
+      </button>
+      {open && <div className="space-y-2">{children}</div>}
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function ObjectViewConfigurator({
+  config,
+  onChange,
+  availableViewTypes = ['grid', 'kanban', 'calendar', 'gallery', 'timeline', 'map', 'gantt'],
+  readOnly = false,
+  className,
+}: ObjectViewConfiguratorProps) {
+  const update = useCallback(
+    (partial: Partial<ViewConfig>) => {
+      onChange({ ...config, ...partial });
+    },
+    [config, onChange]
+  );
+
+  const toggleColumn = useCallback(
+    (name: string) => {
+      update({
+        columns: config.columns.map((c) =>
+          c.name === name ? { ...c, visible: !c.visible } : c
+        ),
+      });
+    },
+    [config, update]
+  );
+
+  const moveColumn = useCallback(
+    (name: string, direction: 'up' | 'down') => {
+      const cols = [...config.columns];
+      const idx = cols.findIndex((c) => c.name === name);
+      if (idx < 0) return;
+      const target = direction === 'up' ? idx - 1 : idx + 1;
+      if (target < 0 || target >= cols.length) return;
+      [cols[idx], cols[target]] = [cols[target], cols[idx]];
+      update({ columns: cols });
+    },
+    [config, update]
+  );
+
+  const visibleCount = useMemo(
+    () => config.columns.filter((c) => c.visible).length,
+    [config.columns]
+  );
+
+  return (
+    <div
+      data-testid="object-view-configurator"
+      className={cn('w-72 space-y-3 rounded-lg border border-gray-200 bg-white p-4', className)}
+    >
+      {/* View type switcher */}
+      <Section
+        title="View Type"
+        icon={<LayoutGrid className="h-3.5 w-3.5 text-gray-500" />}
+      >
+        <div className="flex flex-wrap gap-1.5">
+          {availableViewTypes.map((vt) => {
+            const { label, Icon } = VIEW_TYPE_META[vt];
+            return (
+              <button
+                key={vt}
+                type="button"
+                data-testid={`view-type-${vt}`}
+                onClick={() => update({ viewType: vt })}
+                disabled={readOnly}
+                className={cn(
+                  'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors',
+                  config.viewType === vt
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'text-gray-600 hover:bg-gray-100',
+                  readOnly && 'cursor-not-allowed opacity-50'
+                )}
+              >
+                <Icon className="h-3 w-3" />
+                {label}
+              </button>
+            );
+          })}
+        </div>
+      </Section>
+
+      {/* Columns */}
+      <Section
+        title={`Fields (${visibleCount}/${config.columns.length})`}
+        icon={<Columns3 className="h-3.5 w-3.5 text-gray-500" />}
+      >
+        {config.columns.length === 0 ? (
+          <p className="text-xs text-gray-400">No fields configured.</p>
+        ) : (
+          <ul className="space-y-0.5">
+            {config.columns.map((col, idx) => (
+              <li
+                key={col.name}
+                data-testid={`view-column-${col.name}`}
+                className="flex items-center gap-1.5 rounded px-1.5 py-1 text-xs hover:bg-gray-50"
+              >
+                <button
+                  type="button"
+                  onClick={() => toggleColumn(col.name)}
+                  disabled={readOnly}
+                  className={cn(
+                    'rounded p-0.5 transition-colors',
+                    col.visible ? 'text-blue-500' : 'text-gray-300'
+                  )}
+                  aria-label={col.visible ? 'Hide field' : 'Show field'}
+                >
+                  {col.visible ? (
+                    <Eye className="h-3 w-3" />
+                  ) : (
+                    <EyeOff className="h-3 w-3" />
+                  )}
+                </button>
+                <span className="flex-1 truncate text-gray-700">{col.label}</span>
+                <button
+                  type="button"
+                  onClick={() => moveColumn(col.name, 'up')}
+                  disabled={readOnly || idx === 0}
+                  className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+                  aria-label="Move up"
+                >
+                  <ChevronUp className="h-3 w-3" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => moveColumn(col.name, 'down')}
+                  disabled={readOnly || idx === config.columns.length - 1}
+                  className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+                  aria-label="Move down"
+                >
+                  <ChevronDown className="h-3 w-3" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </Section>
+
+      {/* Toolbar Options */}
+      <Section
+        title="Toolbar"
+        icon={<Filter className="h-3.5 w-3.5 text-gray-500" />}
+      >
+        <div className="space-y-2">
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={config.showSearch}
+              onChange={(e) => update({ showSearch: e.target.checked })}
+              disabled={readOnly}
+              data-testid="view-toggle-search"
+              className="h-3.5 w-3.5 rounded border-gray-300"
+            />
+            <span className="text-xs text-gray-700">Show Search</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={config.showFilters}
+              onChange={(e) => update({ showFilters: e.target.checked })}
+              disabled={readOnly}
+              data-testid="view-toggle-filters"
+              className="h-3.5 w-3.5 rounded border-gray-300"
+            />
+            <span className="text-xs text-gray-700">Show Filters</span>
+          </label>
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={config.showSort}
+              onChange={(e) => update({ showSort: e.target.checked })}
+              disabled={readOnly}
+              data-testid="view-toggle-sort"
+              className="h-3.5 w-3.5 rounded border-gray-300"
+            />
+            <span className="text-xs text-gray-700">Show Sort</span>
+          </label>
+        </div>
+      </Section>
+
+      {/* Appearance */}
+      <Section
+        title="Appearance"
+        icon={<Settings2 className="h-3.5 w-3.5 text-gray-500" />}
+        defaultOpen={false}
+      >
+        <div className="space-y-2">
+          {/* Row Height */}
+          <div className="space-y-1">
+            <label className="text-[10px] font-medium text-gray-500">Row Height</label>
+            <div className="flex gap-1">
+              {ROW_HEIGHT_OPTIONS.map(({ value, label }) => (
+                <button
+                  key={value}
+                  type="button"
+                  data-testid={`view-row-height-${value}`}
+                  onClick={() => update({ rowHeight: value })}
+                  disabled={readOnly}
+                  className={cn(
+                    'flex-1 rounded px-2 py-1 text-[10px] font-medium transition-colors',
+                    config.rowHeight === value
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'bg-gray-50 text-gray-500 hover:bg-gray-100'
+                  )}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Striped */}
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={config.striped}
+              onChange={(e) => update({ striped: e.target.checked })}
+              disabled={readOnly}
+              data-testid="view-toggle-striped"
+              className="h-3.5 w-3.5 rounded border-gray-300"
+            />
+            <span className="text-xs text-gray-700">Striped Rows</span>
+          </label>
+
+          {/* Bordered */}
+          <label className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={config.bordered}
+              onChange={(e) => update({ bordered: e.target.checked })}
+              disabled={readOnly}
+              data-testid="view-toggle-bordered"
+              className="h-3.5 w-3.5 rounded border-gray-300"
+            />
+            <span className="text-xs text-gray-700">Bordered</span>
+          </label>
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+export default ObjectViewConfigurator;
diff --git a/packages/plugin-designer/src/PageCanvasEditor.tsx b/packages/plugin-designer/src/PageCanvasEditor.tsx
new file mode 100644
index 0000000000..6e491d04a3
--- /dev/null
+++ b/packages/plugin-designer/src/PageCanvasEditor.tsx
@@ -0,0 +1,382 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * PageCanvasEditor Component
+ *
+ * WYSIWYG canvas editor for PageSchema. Allows adding and arranging
+ * components (Grid, Kanban, Gallery, Calendar, Dashboard, etc.) via
+ * a component palette and property panel.
+ */
+
+import React, { useState, useCallback } from 'react';
+import type { PageSchema } from '@object-ui/types';
+import {
+  Plus,
+  Trash2,
+  GripVertical,
+  ChevronUp,
+  ChevronDown,
+  LayoutGrid,
+  Kanban,
+  CalendarDays,
+  GalleryHorizontalEnd,
+  BarChart3,
+  FileText,
+  Settings2,
+  X,
+  Table2,
+} from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: (string | undefined | false)[]) {
+  return twMerge(clsx(inputs));
+}
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface PageCanvasEditorProps {
+  /** Page schema to edit */
+  schema: PageSchema;
+  /** Callback when schema changes */
+  onChange: (schema: PageSchema) => void;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** CSS class */
+  className?: string;
+}
+
+/** Simplified component entry for the canvas */
+export interface CanvasComponent {
+  id: string;
+  type: string;
+  label: string;
+  props?: Record<string, unknown>;
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const COMPONENT_PALETTE = [
+  { type: 'grid', label: 'Data Grid', Icon: Table2 },
+  { type: 'kanban', label: 'Kanban Board', Icon: Kanban },
+  { type: 'calendar', label: 'Calendar', Icon: CalendarDays },
+  { type: 'gallery', label: 'Gallery', Icon: GalleryHorizontalEnd },
+  { type: 'dashboard', label: 'Dashboard', Icon: BarChart3 },
+  { type: 'form', label: 'Form', Icon: FileText },
+  { type: 'layout-grid', label: 'Grid Layout', Icon: LayoutGrid },
+];
+
+let canvasCounter = 0;
+
+function createComponentId(): string {
+  canvasCounter += 1;
+  return `component_${Date.now()}_${canvasCounter}`;
+}
+
+// ============================================================================
+// Component Card
+// ============================================================================
+
+interface ComponentCardProps {
+  component: CanvasComponent;
+  index: number;
+  total: number;
+  selected: boolean;
+  readOnly: boolean;
+  onSelect: () => void;
+  onRemove: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+}
+
+function ComponentCard({
+  component,
+  index,
+  total,
+  selected,
+  readOnly,
+  onSelect,
+  onRemove,
+  onMoveUp,
+  onMoveDown,
+}: ComponentCardProps) {
+  const meta = COMPONENT_PALETTE.find((p) => p.type === component.type) || COMPONENT_PALETTE[0];
+
+  return (
+    <div
+      data-testid={`canvas-component-${component.id}`}
+      onClick={onSelect}
+      className={cn(
+        'group flex cursor-pointer items-center gap-3 rounded-lg border-2 px-3 py-3 transition-colors',
+        selected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
+      )}
+    >
+      <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-gray-300" />
+      <meta.Icon className="h-5 w-5 shrink-0 text-gray-500" />
+      <div className="flex-1">
+        <span className="text-sm font-medium text-gray-800">{component.label}</span>
+        <span className="ml-2 text-[10px] text-gray-400">{meta.label}</span>
+      </div>
+
+      {!readOnly && (
+        <div className="flex items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); onMoveUp(); }}
+            disabled={index === 0}
+            className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+            aria-label="Move up"
+          >
+            <ChevronUp className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); onMoveDown(); }}
+            disabled={index === total - 1}
+            className="rounded p-0.5 text-gray-400 hover:text-gray-700 disabled:opacity-30"
+            aria-label="Move down"
+          >
+            <ChevronDown className="h-3.5 w-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={(e) => { e.stopPropagation(); onRemove(); }}
+            className="rounded p-0.5 text-gray-400 hover:text-red-500"
+            aria-label="Remove component"
+            data-testid={`canvas-component-remove-${component.id}`}
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Component Property Panel
+// ============================================================================
+
+interface ComponentPropertyPanelProps {
+  component: CanvasComponent;
+  readOnly: boolean;
+  onChange: (updates: Partial<CanvasComponent>) => void;
+  onClose: () => void;
+}
+
+function ComponentPropertyPanel({
+  component,
+  readOnly,
+  onChange,
+  onClose,
+}: ComponentPropertyPanelProps) {
+  return (
+    <div
+      data-testid="component-property-panel"
+      className="w-64 shrink-0 space-y-4 rounded-lg border border-gray-200 bg-white p-4"
+    >
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold text-gray-800">Component Properties</h4>
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded p-0.5 text-gray-400 hover:text-gray-600"
+          aria-label="Close"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* Label */}
+      <div className="space-y-1">
+        <label htmlFor="component-label" className="text-xs font-medium text-gray-600">Label</label>
+        <input
+          id="component-label"
+          data-testid="component-prop-label"
+          type="text"
+          value={component.label}
+          onChange={(e) => onChange({ label: e.target.value })}
+          disabled={readOnly}
+          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
+        />
+      </div>
+
+      {/* Type (read-only) */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-gray-600">Type</label>
+        <div className="rounded-md bg-gray-50 px-2.5 py-1.5 text-sm text-gray-600">
+          {COMPONENT_PALETTE.find((p) => p.type === component.type)?.label ?? component.type}
+        </div>
+      </div>
+
+      {/* ID (read-only) */}
+      <div className="space-y-1">
+        <label className="text-xs font-medium text-gray-600">ID</label>
+        <div className="rounded-md bg-gray-50 px-2.5 py-1.5 text-xs font-mono text-gray-500">
+          {component.id}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function PageCanvasEditor({
+  schema,
+  onChange,
+  readOnly = false,
+  className,
+}: PageCanvasEditorProps) {
+  const [components, setComponents] = useState<CanvasComponent[]>(() => {
+    const children = schema.children
+      ? Array.isArray(schema.children) ? schema.children : [schema.children]
+      : [];
+    return children.map((child: any, i: number) => ({
+      id: child.id || `existing_${i}`,
+      type: child.type || 'grid',
+      label: child.title || child.label || `Component ${i + 1}`,
+      props: child,
+    }));
+  });
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const selectedComponent = components.find((c) => c.id === selectedId);
+
+  const syncSchema = useCallback(
+    (updated: CanvasComponent[]) => {
+      setComponents(updated);
+      onChange({
+        ...schema,
+        children: updated.map((c) => ({
+          type: c.type,
+          id: c.id,
+          title: c.label,
+          ...c.props,
+        })) as any,
+      });
+    },
+    [schema, onChange]
+  );
+
+  const addComponent = useCallback(
+    (type: string) => {
+      const id = createComponentId();
+      const meta = COMPONENT_PALETTE.find((p) => p.type === type);
+      const newComp: CanvasComponent = {
+        id,
+        type,
+        label: meta?.label || type,
+      };
+      const updated = [...components, newComp];
+      syncSchema(updated);
+      setSelectedId(id);
+    },
+    [components, syncSchema]
+  );
+
+  const removeComponent = useCallback(
+    (id: string) => {
+      const updated = components.filter((c) => c.id !== id);
+      syncSchema(updated);
+      if (selectedId === id) setSelectedId(null);
+    },
+    [components, selectedId, syncSchema]
+  );
+
+  const moveComponent = useCallback(
+    (id: string, direction: 'up' | 'down') => {
+      const idx = components.findIndex((c) => c.id === id);
+      if (idx < 0) return;
+      const target = direction === 'up' ? idx - 1 : idx + 1;
+      if (target < 0 || target >= components.length) return;
+      const copy = [...components];
+      [copy[idx], copy[target]] = [copy[target], copy[idx]];
+      syncSchema(copy);
+    },
+    [components, syncSchema]
+  );
+
+  const updateComponent = useCallback(
+    (updates: Partial<CanvasComponent>) => {
+      if (!selectedId) return;
+      const updated = components.map((c) =>
+        c.id === selectedId ? { ...c, ...updates } : c
+      );
+      syncSchema(updated);
+    },
+    [components, selectedId, syncSchema]
+  );
+
+  return (
+    <div data-testid="page-canvas-editor" className={cn('flex gap-4', className)}>
+      {/* Component palette & canvas */}
+      <div className="flex-1 space-y-4">
+        {/* Palette */}
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium text-gray-700">Add:</span>
+          {COMPONENT_PALETTE.map(({ type, label, Icon }) => (
+            <button
+              key={type}
+              type="button"
+              data-testid={`canvas-add-${type}`}
+              onClick={() => addComponent(type)}
+              disabled={readOnly}
+              className="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              <Icon className="h-3.5 w-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+
+        {/* Canvas (component list) */}
+        {components.length === 0 ? (
+          <div className="flex h-48 items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm text-gray-400">
+            Empty page. Click a button above to add a component.
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {components.map((comp, i) => (
+              <ComponentCard
+                key={comp.id}
+                component={comp}
+                index={i}
+                total={components.length}
+                selected={comp.id === selectedId}
+                readOnly={readOnly}
+                onSelect={() => setSelectedId(comp.id)}
+                onRemove={() => removeComponent(comp.id)}
+                onMoveUp={() => moveComponent(comp.id, 'up')}
+                onMoveDown={() => moveComponent(comp.id, 'down')}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Property panel */}
+      {selectedComponent && (
+        <ComponentPropertyPanel
+          component={selectedComponent}
+          readOnly={readOnly}
+          onChange={updateComponent}
+          onClose={() => setSelectedId(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default PageCanvasEditor;
diff --git a/packages/plugin-designer/src/__tests__/AppCreationWizard.test.tsx b/packages/plugin-designer/src/__tests__/AppCreationWizard.test.tsx
new file mode 100644
index 0000000000..3a14d05787
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/AppCreationWizard.test.tsx
@@ -0,0 +1,326 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AppCreationWizard } from '../AppCreationWizard';
+import type { ObjectSelection } from '@object-ui/types';
+
+const MOCK_OBJECTS: ObjectSelection[] = [
+  { name: 'contacts', label: 'Contacts', icon: 'Users', selected: false },
+  { name: 'orders', label: 'Orders', icon: 'ShoppingCart', selected: false },
+  { name: 'products', label: 'Products', icon: 'Package', selected: false },
+];
+
+const MOCK_TEMPLATES = [
+  { id: 'crm', label: 'CRM', description: 'Customer relationship management' },
+  { id: 'erp', label: 'ERP', description: 'Enterprise resource planning' },
+];
+
+describe('AppCreationWizard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ============================
+  // Rendering
+  // ============================
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      render(<AppCreationWizard />);
+      expect(screen.getByTestId('wizard-step-basic')).toBeDefined();
+      expect(screen.getByTestId('wizard-step-objects')).toBeDefined();
+      expect(screen.getByTestId('wizard-step-navigation')).toBeDefined();
+      expect(screen.getByTestId('wizard-step-branding')).toBeDefined();
+    });
+
+    it('should render step 1 content by default', () => {
+      render(<AppCreationWizard />);
+      expect(screen.getByTestId('wizard-step-basic-content')).toBeDefined();
+      expect(screen.getByTestId('app-name-input')).toBeDefined();
+      expect(screen.getByTestId('app-title-input')).toBeDefined();
+    });
+
+    it('should render cancel button', () => {
+      render(<AppCreationWizard />);
+      expect(screen.getByTestId('wizard-cancel')).toBeDefined();
+    });
+
+    it('should render next button on step 1', () => {
+      render(<AppCreationWizard />);
+      expect(screen.getByTestId('wizard-next')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Step 1: Basic Info
+  // ============================
+  describe('Step 1: Basic Info', () => {
+    it('should accept valid snake_case app name', () => {
+      render(<AppCreationWizard />);
+      const nameInput = screen.getByTestId('app-name-input');
+      fireEvent.change(nameInput, { target: { value: 'my_app' } });
+      expect((nameInput as HTMLInputElement).value).toBe('my_app');
+    });
+
+    it('should show error for invalid app name', () => {
+      render(<AppCreationWizard />);
+      const nameInput = screen.getByTestId('app-name-input');
+      fireEvent.change(nameInput, { target: { value: 'My App' } });
+      expect(screen.getByText(/snake_case/)).toBeDefined();
+    });
+
+    it('should accept title input', () => {
+      render(<AppCreationWizard />);
+      const titleInput = screen.getByTestId('app-title-input');
+      fireEvent.change(titleInput, { target: { value: 'My Application' } });
+      expect((titleInput as HTMLInputElement).value).toBe('My Application');
+    });
+
+    it('should render layout options', () => {
+      render(<AppCreationWizard />);
+      expect(screen.getByTestId('app-layout-sidebar')).toBeDefined();
+      expect(screen.getByTestId('app-layout-header')).toBeDefined();
+      expect(screen.getByTestId('app-layout-empty')).toBeDefined();
+    });
+
+    it('should disable next when name is empty', () => {
+      render(<AppCreationWizard />);
+      const nextBtn = screen.getByTestId('wizard-next');
+      expect(nextBtn.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('should disable next when name is invalid', () => {
+      render(<AppCreationWizard />);
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'Bad Name' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'Title' } });
+      const nextBtn = screen.getByTestId('wizard-next');
+      expect(nextBtn.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('should enable next when name and title are valid', () => {
+      render(<AppCreationWizard />);
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'my_app' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'My App' } });
+      const nextBtn = screen.getByTestId('wizard-next');
+      expect(nextBtn.hasAttribute('disabled')).toBe(false);
+    });
+
+    it('should render templates when provided', () => {
+      render(<AppCreationWizard templates={MOCK_TEMPLATES} />);
+      expect(screen.getByText('CRM')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Step Navigation
+  // ============================
+  describe('Step Navigation', () => {
+    function goToStep2() {
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'test_app' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'Test' } });
+      fireEvent.click(screen.getByTestId('wizard-next'));
+    }
+
+    it('should navigate to step 2 on next', () => {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      goToStep2();
+      expect(screen.getByTestId('wizard-step-objects-content')).toBeDefined();
+    });
+
+    it('should show back button on step 2', () => {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      goToStep2();
+      expect(screen.getByTestId('wizard-back')).toBeDefined();
+    });
+
+    it('should navigate back to step 1', () => {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      goToStep2();
+      fireEvent.click(screen.getByTestId('wizard-back'));
+      expect(screen.getByTestId('wizard-step-basic-content')).toBeDefined();
+    });
+
+    it('should navigate to step 3 from step 2', () => {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      goToStep2();
+      fireEvent.click(screen.getByTestId('wizard-next'));
+      expect(screen.getByTestId('wizard-step-navigation-content')).toBeDefined();
+    });
+
+    it('should show complete button on last step', () => {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      goToStep2();
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 3
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 4
+      expect(screen.getByTestId('wizard-complete')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Step 2: Object Selection
+  // ============================
+  describe('Step 2: Object Selection', () => {
+    function renderStep2() {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'test_app' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'Test' } });
+      fireEvent.click(screen.getByTestId('wizard-next'));
+    }
+
+    it('should render object cards', () => {
+      renderStep2();
+      expect(screen.getByTestId('object-card-contacts')).toBeDefined();
+      expect(screen.getByTestId('object-card-orders')).toBeDefined();
+      expect(screen.getByTestId('object-card-products')).toBeDefined();
+    });
+
+    it('should toggle object selection', () => {
+      renderStep2();
+      fireEvent.click(screen.getByTestId('object-card-contacts'));
+      // Card should be selected (visual feedback)
+      expect(screen.getByTestId('object-card-contacts')).toBeDefined();
+    });
+
+    it('should render search input', () => {
+      renderStep2();
+      expect(screen.getByTestId('object-search')).toBeDefined();
+    });
+
+    it('should filter objects by search', () => {
+      renderStep2();
+      fireEvent.change(screen.getByTestId('object-search'), { target: { value: 'contact' } });
+      expect(screen.getByTestId('object-card-contacts')).toBeDefined();
+      expect(screen.queryByTestId('object-card-orders')).toBeNull();
+    });
+  });
+
+  // ============================
+  // Step 3: Navigation Builder
+  // ============================
+  describe('Step 3: Navigation Builder', () => {
+    function renderStep3WithObjects() {
+      render(<AppCreationWizard availableObjects={MOCK_OBJECTS} />);
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'test_app' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'Test' } });
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 2
+      // Select objects
+      fireEvent.click(screen.getByTestId('object-card-contacts'));
+      fireEvent.click(screen.getByTestId('object-card-orders'));
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 3
+    }
+
+    it('should auto-generate nav items from selected objects', () => {
+      renderStep3WithObjects();
+      expect(screen.getByTestId('nav-item-contacts')).toBeDefined();
+      expect(screen.getByTestId('nav-item-orders')).toBeDefined();
+    });
+
+    it('should render add buttons', () => {
+      renderStep3WithObjects();
+      expect(screen.getByTestId('add-group-btn')).toBeDefined();
+      expect(screen.getByTestId('add-url-btn')).toBeDefined();
+      expect(screen.getByTestId('add-separator-btn')).toBeDefined();
+    });
+
+    it('should add a group nav item', () => {
+      renderStep3WithObjects();
+      fireEvent.click(screen.getByTestId('add-group-btn'));
+      expect(screen.getByText('New Group')).toBeDefined();
+    });
+
+    it('should add a URL nav item', () => {
+      renderStep3WithObjects();
+      fireEvent.click(screen.getByTestId('add-url-btn'));
+      expect(screen.getByText('New Link')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Step 4: Branding
+  // ============================
+  describe('Step 4: Branding', () => {
+    function renderStep4() {
+      render(<AppCreationWizard />);
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'test_app' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'Test' } });
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 2
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 3
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 4
+    }
+
+    it('should render branding inputs', () => {
+      renderStep4();
+      expect(screen.getByTestId('branding-logo-input')).toBeDefined();
+      expect(screen.getByTestId('branding-color-input')).toBeDefined();
+      expect(screen.getByTestId('branding-favicon-input')).toBeDefined();
+    });
+
+    it('should accept logo URL', () => {
+      renderStep4();
+      const input = screen.getByTestId('branding-logo-input');
+      fireEvent.change(input, { target: { value: 'https://example.com/logo.svg' } });
+      expect((input as HTMLInputElement).value).toBe('https://example.com/logo.svg');
+    });
+
+    it('should accept primary color', () => {
+      renderStep4();
+      const input = screen.getByTestId('branding-color-input');
+      fireEvent.change(input, { target: { value: '#ff5733' } });
+      expect((input as HTMLInputElement).value).toBe('#ff5733');
+    });
+  });
+
+  // ============================
+  // Callbacks
+  // ============================
+  describe('Callbacks', () => {
+    it('should call onCancel when cancel is clicked', () => {
+      const onCancel = vi.fn();
+      render(<AppCreationWizard onCancel={onCancel} />);
+      fireEvent.click(screen.getByTestId('wizard-cancel'));
+      expect(onCancel).toHaveBeenCalledOnce();
+    });
+
+    it('should call onComplete with draft on complete', () => {
+      const onComplete = vi.fn();
+      render(<AppCreationWizard onComplete={onComplete} />);
+      // Fill step 1
+      fireEvent.change(screen.getByTestId('app-name-input'), { target: { value: 'test_app' } });
+      fireEvent.change(screen.getByTestId('app-title-input'), { target: { value: 'Test App' } });
+      // Navigate to step 4
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 2
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 3
+      fireEvent.click(screen.getByTestId('wizard-next')); // step 4
+      // Complete
+      fireEvent.click(screen.getByTestId('wizard-complete'));
+      expect(onComplete).toHaveBeenCalledOnce();
+      expect(onComplete.mock.calls[0][0]).toMatchObject({
+        name: 'test_app',
+        title: 'Test App',
+      });
+    });
+  });
+
+  // ============================
+  // Read-only Mode
+  // ============================
+  describe('Read-only Mode', () => {
+    it('should disable inputs in read-only mode', () => {
+      render(<AppCreationWizard readOnly />);
+      const nameInput = screen.getByTestId('app-name-input') as HTMLInputElement;
+      expect(nameInput.disabled).toBe(true);
+    });
+
+    it('should disable next button in read-only mode', () => {
+      render(<AppCreationWizard readOnly />);
+      const nextBtn = screen.getByTestId('wizard-next');
+      expect(nextBtn.hasAttribute('disabled')).toBe(true);
+    });
+  });
+});
diff --git a/packages/plugin-designer/src/__tests__/DashboardEditor.test.tsx b/packages/plugin-designer/src/__tests__/DashboardEditor.test.tsx
new file mode 100644
index 0000000000..d59c5f54b1
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/DashboardEditor.test.tsx
@@ -0,0 +1,145 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DashboardEditor } from '../DashboardEditor';
+import type { DashboardSchema } from '@object-ui/types';
+
+const EMPTY_DASHBOARD: DashboardSchema = {
+  type: 'dashboard',
+  title: 'Test Dashboard',
+  columns: 2,
+  widgets: [],
+};
+
+const DASHBOARD_WITH_WIDGETS: DashboardSchema = {
+  type: 'dashboard',
+  title: 'Test Dashboard',
+  columns: 2,
+  widgets: [
+    { id: 'w1', title: 'Revenue', type: 'metric', object: 'orders', valueField: 'amount', aggregate: 'sum' },
+    { id: 'w2', title: 'Sales Chart', type: 'bar', object: 'orders', categoryField: 'month' },
+  ],
+};
+
+describe('DashboardEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ============================
+  // Rendering
+  // ============================
+  describe('Rendering', () => {
+    it('should render with empty dashboard', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={EMPTY_DASHBOARD} onChange={onChange} />);
+      expect(screen.getByTestId('dashboard-editor')).toBeDefined();
+      expect(screen.getByText(/No widgets/)).toBeDefined();
+    });
+
+    it('should render widget add buttons', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={EMPTY_DASHBOARD} onChange={onChange} />);
+      expect(screen.getByTestId('dashboard-add-metric')).toBeDefined();
+      expect(screen.getByTestId('dashboard-add-bar')).toBeDefined();
+      expect(screen.getByTestId('dashboard-add-line')).toBeDefined();
+      expect(screen.getByTestId('dashboard-add-pie')).toBeDefined();
+      expect(screen.getByTestId('dashboard-add-table')).toBeDefined();
+      expect(screen.getByTestId('dashboard-add-grid')).toBeDefined();
+    });
+
+    it('should render existing widgets', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={DASHBOARD_WITH_WIDGETS} onChange={onChange} />);
+      expect(screen.getByTestId('dashboard-widget-w1')).toBeDefined();
+      expect(screen.getByTestId('dashboard-widget-w2')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Adding Widgets
+  // ============================
+  describe('Adding Widgets', () => {
+    it('should add a metric widget', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={EMPTY_DASHBOARD} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('dashboard-add-metric'));
+      expect(onChange).toHaveBeenCalledOnce();
+      const newSchema = onChange.mock.calls[0][0] as DashboardSchema;
+      expect(newSchema.widgets).toHaveLength(1);
+      expect(newSchema.widgets[0].type).toBe('metric');
+    });
+
+    it('should add a bar chart widget', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={EMPTY_DASHBOARD} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('dashboard-add-bar'));
+      const newSchema = onChange.mock.calls[0][0] as DashboardSchema;
+      expect(newSchema.widgets[0].type).toBe('bar');
+    });
+  });
+
+  // ============================
+  // Removing Widgets
+  // ============================
+  describe('Removing Widgets', () => {
+    it('should remove a widget', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={DASHBOARD_WITH_WIDGETS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('dashboard-widget-remove-w1'));
+      expect(onChange).toHaveBeenCalledOnce();
+      const newSchema = onChange.mock.calls[0][0] as DashboardSchema;
+      expect(newSchema.widgets.find((w) => w.id === 'w1')).toBeUndefined();
+    });
+  });
+
+  // ============================
+  // Widget Selection & Property Panel
+  // ============================
+  describe('Widget Property Panel', () => {
+    it('should show property panel when widget is selected', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={DASHBOARD_WITH_WIDGETS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('dashboard-widget-w1'));
+      expect(screen.getByTestId('widget-property-panel')).toBeDefined();
+      expect(screen.getByTestId('widget-prop-title')).toBeDefined();
+      expect(screen.getByTestId('widget-prop-type')).toBeDefined();
+    });
+
+    it('should update widget title via property panel', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={DASHBOARD_WITH_WIDGETS} onChange={onChange} />);
+      // Select widget
+      fireEvent.click(screen.getByTestId('dashboard-widget-w1'));
+      // Edit title
+      fireEvent.change(screen.getByTestId('widget-prop-title'), { target: { value: 'New Title' } });
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should update widget data source', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={DASHBOARD_WITH_WIDGETS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('dashboard-widget-w1'));
+      fireEvent.change(screen.getByTestId('widget-prop-object'), { target: { value: 'products' } });
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  // ============================
+  // Read-only Mode
+  // ============================
+  describe('Read-only Mode', () => {
+    it('should disable add buttons in read-only mode', () => {
+      const onChange = vi.fn();
+      render(<DashboardEditor schema={EMPTY_DASHBOARD} onChange={onChange} readOnly />);
+      expect(screen.getByTestId('dashboard-add-metric').hasAttribute('disabled')).toBe(true);
+    });
+  });
+});
diff --git a/packages/plugin-designer/src/__tests__/EditorModeToggle.test.tsx b/packages/plugin-designer/src/__tests__/EditorModeToggle.test.tsx
new file mode 100644
index 0000000000..03570527ca
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/EditorModeToggle.test.tsx
@@ -0,0 +1,68 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { EditorModeToggle } from '../EditorModeToggle';
+import type { EditorMode } from '@object-ui/types';
+
+describe('EditorModeToggle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render all three modes', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="edit" onChange={onChange} />);
+    expect(screen.getByTestId('editor-mode-edit')).toBeDefined();
+    expect(screen.getByTestId('editor-mode-preview')).toBeDefined();
+    expect(screen.getByTestId('editor-mode-code')).toBeDefined();
+  });
+
+  it('should highlight the active mode', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="preview" onChange={onChange} />);
+    const previewBtn = screen.getByTestId('editor-mode-preview');
+    expect(previewBtn.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('should call onChange when mode is clicked', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="edit" onChange={onChange} />);
+    fireEvent.click(screen.getByTestId('editor-mode-code'));
+    expect(onChange).toHaveBeenCalledWith('code');
+  });
+
+  it('should render mode labels', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="edit" onChange={onChange} />);
+    expect(screen.getByText('Edit')).toBeDefined();
+    expect(screen.getByText('Preview')).toBeDefined();
+    expect(screen.getByText('Code')).toBeDefined();
+  });
+
+  it('should have radiogroup role', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="edit" onChange={onChange} />);
+    expect(screen.getByRole('radiogroup')).toBeDefined();
+  });
+
+  it('should disable all buttons when disabled', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="edit" onChange={onChange} disabled />);
+    expect(screen.getByTestId('editor-mode-edit').hasAttribute('disabled')).toBe(true);
+    expect(screen.getByTestId('editor-mode-preview').hasAttribute('disabled')).toBe(true);
+    expect(screen.getByTestId('editor-mode-code').hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should render with custom className', () => {
+    const onChange = vi.fn();
+    render(<EditorModeToggle mode="edit" onChange={onChange} className="my-class" />);
+    expect(screen.getByTestId('editor-mode-toggle').className).toContain('my-class');
+  });
+});
diff --git a/packages/plugin-designer/src/__tests__/NavigationDesigner.test.tsx b/packages/plugin-designer/src/__tests__/NavigationDesigner.test.tsx
new file mode 100644
index 0000000000..552ef38fec
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/NavigationDesigner.test.tsx
@@ -0,0 +1,174 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { NavigationDesigner } from '../NavigationDesigner';
+import type { NavigationItem } from '@object-ui/types';
+
+const MOCK_ITEMS: NavigationItem[] = [
+  { id: 'nav_1', type: 'object', label: 'Contacts', icon: 'Users', objectName: 'contacts' },
+  { id: 'nav_2', type: 'object', label: 'Orders', icon: 'ShoppingCart', objectName: 'orders' },
+  { id: 'nav_3', type: 'group', label: 'Reports', icon: 'BarChart3', children: [
+    { id: 'nav_4', type: 'report', label: 'Sales Report', reportName: 'sales' },
+  ]},
+];
+
+describe('NavigationDesigner', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ============================
+  // Rendering
+  // ============================
+  describe('Rendering', () => {
+    it('should render with items', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} />);
+      expect(screen.getByTestId('navigation-designer')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-tree')).toBeDefined();
+    });
+
+    it('should render each navigation item', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} />);
+      expect(screen.getByTestId('nav-designer-item-nav_1')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-item-nav_2')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-item-nav_3')).toBeDefined();
+    });
+
+    it('should show empty message when no items', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={[]} onChange={onChange} />);
+      expect(screen.getByText(/No navigation items/)).toBeDefined();
+    });
+
+    it('should render quick add buttons', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={[]} onChange={onChange} />);
+      expect(screen.getByTestId('nav-designer-add-object')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-add-dashboard')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-add-page')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-add-group')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-add-url')).toBeDefined();
+      expect(screen.getByTestId('nav-designer-add-separator')).toBeDefined();
+    });
+
+    it('should show live preview when showPreview=true', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} showPreview />);
+      expect(screen.getByTestId('nav-designer-preview')).toBeDefined();
+    });
+
+    it('should hide live preview when showPreview=false', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} showPreview={false} />);
+      expect(screen.queryByTestId('nav-designer-preview')).toBeNull();
+    });
+  });
+
+  // ============================
+  // Adding Items
+  // ============================
+  describe('Adding Items', () => {
+    it('should add a new object item', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={[]} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('nav-designer-add-object'));
+      expect(onChange).toHaveBeenCalledOnce();
+      const newItems = onChange.mock.calls[0][0] as NavigationItem[];
+      expect(newItems).toHaveLength(1);
+      expect(newItems[0].type).toBe('object');
+    });
+
+    it('should add a new group item', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={[]} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('nav-designer-add-group'));
+      expect(onChange).toHaveBeenCalledOnce();
+      const newItems = onChange.mock.calls[0][0] as NavigationItem[];
+      expect(newItems[0].type).toBe('group');
+      expect(newItems[0].children).toEqual([]);
+    });
+
+    it('should add a separator', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={[]} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('nav-designer-add-separator'));
+      expect(onChange).toHaveBeenCalledOnce();
+      const newItems = onChange.mock.calls[0][0] as NavigationItem[];
+      expect(newItems[0].type).toBe('separator');
+    });
+  });
+
+  // ============================
+  // Removing Items
+  // ============================
+  describe('Removing Items', () => {
+    it('should remove an item when remove button is clicked', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('nav-designer-remove-nav_1'));
+      expect(onChange).toHaveBeenCalledOnce();
+      const newItems = onChange.mock.calls[0][0] as NavigationItem[];
+      expect(newItems.find((i) => i.id === 'nav_1')).toBeUndefined();
+    });
+  });
+
+  // ============================
+  // Group Expansion
+  // ============================
+  describe('Group Expansion', () => {
+    it('should show child items when group is expanded', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} />);
+      // Groups are expanded by default
+      expect(screen.getByTestId('nav-designer-item-nav_4')).toBeDefined();
+    });
+
+    it('should add child to group via add child button', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('nav-designer-add-child-nav_3'));
+      expect(onChange).toHaveBeenCalledOnce();
+    });
+  });
+
+  // ============================
+  // Type Badges
+  // ============================
+  describe('Type Badges', () => {
+    it('should display type badges for items', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} />);
+      expect(screen.getAllByText('Object').length).toBeGreaterThanOrEqual(2);
+      // "Group" text appears in both the add button and the type badge
+      expect(screen.getAllByText('Group').length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ============================
+  // Read-only Mode
+  // ============================
+  describe('Read-only Mode', () => {
+    it('should disable add buttons in read-only mode', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} readOnly />);
+      const addBtn = screen.getByTestId('nav-designer-add-object');
+      expect(addBtn.hasAttribute('disabled')).toBe(true);
+    });
+
+    it('should disable remove buttons in read-only mode', () => {
+      const onChange = vi.fn();
+      render(<NavigationDesigner items={MOCK_ITEMS} onChange={onChange} readOnly />);
+      const removeBtn = screen.getByTestId('nav-designer-remove-nav_1');
+      expect(removeBtn.hasAttribute('disabled')).toBe(true);
+    });
+  });
+});
diff --git a/packages/plugin-designer/src/__tests__/ObjectViewConfigurator.test.tsx b/packages/plugin-designer/src/__tests__/ObjectViewConfigurator.test.tsx
new file mode 100644
index 0000000000..88a15637f8
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/ObjectViewConfigurator.test.tsx
@@ -0,0 +1,144 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ObjectViewConfigurator } from '../ObjectViewConfigurator';
+import type { ViewConfig } from '../ObjectViewConfigurator';
+
+const DEFAULT_CONFIG: ViewConfig = {
+  viewType: 'grid',
+  columns: [
+    { name: 'name', label: 'Name', visible: true },
+    { name: 'email', label: 'Email', visible: true },
+    { name: 'status', label: 'Status', visible: false },
+  ],
+  showSearch: true,
+  showFilters: true,
+  showSort: true,
+  rowHeight: 'medium',
+  striped: false,
+  bordered: false,
+};
+
+describe('ObjectViewConfigurator', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ============================
+  // Rendering
+  // ============================
+  describe('Rendering', () => {
+    it('should render the configurator', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      expect(screen.getByTestId('object-view-configurator')).toBeDefined();
+    });
+
+    it('should render view type buttons', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      expect(screen.getByTestId('view-type-grid')).toBeDefined();
+      expect(screen.getByTestId('view-type-kanban')).toBeDefined();
+      expect(screen.getByTestId('view-type-calendar')).toBeDefined();
+    });
+
+    it('should render column list', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      expect(screen.getByTestId('view-column-name')).toBeDefined();
+      expect(screen.getByTestId('view-column-email')).toBeDefined();
+      expect(screen.getByTestId('view-column-status')).toBeDefined();
+    });
+
+    it('should render toolbar toggles', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      expect(screen.getByTestId('view-toggle-search')).toBeDefined();
+      expect(screen.getByTestId('view-toggle-filters')).toBeDefined();
+      expect(screen.getByTestId('view-toggle-sort')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // View Type Switching
+  // ============================
+  describe('View Type Switching', () => {
+    it('should switch to kanban view', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('view-type-kanban'));
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ viewType: 'kanban' }));
+    });
+
+    it('should switch to calendar view', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('view-type-calendar'));
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ viewType: 'calendar' }));
+    });
+  });
+
+  // ============================
+  // Column Visibility
+  // ============================
+  describe('Column Visibility', () => {
+    it('should toggle column visibility', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      // Toggle "Status" field (currently hidden) by clicking the eye button
+      const colRow = screen.getByTestId('view-column-status');
+      const eyeBtn = colRow.querySelector('button');
+      if (eyeBtn) fireEvent.click(eyeBtn);
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('should display visible count in section header', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      expect(screen.getByText('Fields (2/3)')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Toolbar Toggles
+  // ============================
+  describe('Toolbar Toggles', () => {
+    it('should toggle showSearch', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('view-toggle-search'));
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ showSearch: false }));
+    });
+
+    it('should toggle showFilters', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('view-toggle-filters'));
+      expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ showFilters: false }));
+    });
+  });
+
+  // ============================
+  // Read-only Mode
+  // ============================
+  describe('Read-only Mode', () => {
+    it('should disable view type buttons in read-only mode', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} readOnly />);
+      expect(screen.getByTestId('view-type-kanban').hasAttribute('disabled')).toBe(true);
+    });
+
+    it('should disable toggles in read-only mode', () => {
+      const onChange = vi.fn();
+      render(<ObjectViewConfigurator config={DEFAULT_CONFIG} onChange={onChange} readOnly />);
+      expect((screen.getByTestId('view-toggle-search') as HTMLInputElement).disabled).toBe(true);
+    });
+  });
+});
diff --git a/packages/plugin-designer/src/__tests__/PageCanvasEditor.test.tsx b/packages/plugin-designer/src/__tests__/PageCanvasEditor.test.tsx
new file mode 100644
index 0000000000..57eddcab32
--- /dev/null
+++ b/packages/plugin-designer/src/__tests__/PageCanvasEditor.test.tsx
@@ -0,0 +1,125 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { PageCanvasEditor } from '../PageCanvasEditor';
+import type { PageSchema } from '@object-ui/types';
+
+const EMPTY_PAGE: PageSchema = {
+  type: 'page',
+  title: 'Test Page',
+};
+
+const PAGE_WITH_COMPONENTS: PageSchema = {
+  type: 'page',
+  title: 'Dashboard Page',
+  children: [
+    { type: 'grid', id: 'grid_1', title: 'Data Grid' },
+    { type: 'kanban', id: 'kanban_1', title: 'Board View' },
+  ],
+};
+
+describe('PageCanvasEditor', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ============================
+  // Rendering
+  // ============================
+  describe('Rendering', () => {
+    it('should render with empty page', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={EMPTY_PAGE} onChange={onChange} />);
+      expect(screen.getByTestId('page-canvas-editor')).toBeDefined();
+      expect(screen.getByText(/Empty page/)).toBeDefined();
+    });
+
+    it('should render add component buttons', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={EMPTY_PAGE} onChange={onChange} />);
+      expect(screen.getByTestId('canvas-add-grid')).toBeDefined();
+      expect(screen.getByTestId('canvas-add-kanban')).toBeDefined();
+      expect(screen.getByTestId('canvas-add-calendar')).toBeDefined();
+      expect(screen.getByTestId('canvas-add-gallery')).toBeDefined();
+      expect(screen.getByTestId('canvas-add-dashboard')).toBeDefined();
+      expect(screen.getByTestId('canvas-add-form')).toBeDefined();
+    });
+
+    it('should render existing components', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={PAGE_WITH_COMPONENTS} onChange={onChange} />);
+      expect(screen.getByTestId('canvas-component-grid_1')).toBeDefined();
+      expect(screen.getByTestId('canvas-component-kanban_1')).toBeDefined();
+    });
+  });
+
+  // ============================
+  // Adding Components
+  // ============================
+  describe('Adding Components', () => {
+    it('should add a grid component', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={EMPTY_PAGE} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('canvas-add-grid'));
+      expect(onChange).toHaveBeenCalledOnce();
+    });
+
+    it('should add a kanban component', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={EMPTY_PAGE} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('canvas-add-kanban'));
+      expect(onChange).toHaveBeenCalledOnce();
+    });
+  });
+
+  // ============================
+  // Removing Components
+  // ============================
+  describe('Removing Components', () => {
+    it('should remove a component', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={PAGE_WITH_COMPONENTS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('canvas-component-remove-grid_1'));
+      expect(onChange).toHaveBeenCalledOnce();
+    });
+  });
+
+  // ============================
+  // Component Selection & Property Panel
+  // ============================
+  describe('Component Property Panel', () => {
+    it('should show property panel when component is selected', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={PAGE_WITH_COMPONENTS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('canvas-component-grid_1'));
+      expect(screen.getByTestId('component-property-panel')).toBeDefined();
+      expect(screen.getByTestId('component-prop-label')).toBeDefined();
+    });
+
+    it('should update component label via property panel', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={PAGE_WITH_COMPONENTS} onChange={onChange} />);
+      fireEvent.click(screen.getByTestId('canvas-component-grid_1'));
+      fireEvent.change(screen.getByTestId('component-prop-label'), { target: { value: 'Updated Grid' } });
+      expect(onChange).toHaveBeenCalled();
+    });
+  });
+
+  // ============================
+  // Read-only Mode
+  // ============================
+  describe('Read-only Mode', () => {
+    it('should disable add buttons in read-only mode', () => {
+      const onChange = vi.fn();
+      render(<PageCanvasEditor schema={EMPTY_PAGE} onChange={onChange} readOnly />);
+      expect(screen.getByTestId('canvas-add-grid').hasAttribute('disabled')).toBe(true);
+    });
+  });
+});
diff --git a/packages/plugin-designer/src/index.tsx b/packages/plugin-designer/src/index.tsx
index 56628541d7..954010dc99 100644
--- a/packages/plugin-designer/src/index.tsx
+++ b/packages/plugin-designer/src/index.tsx
@@ -13,6 +13,12 @@ import { ProcessDesigner } from './ProcessDesigner';
 import { ReportDesigner } from './ReportDesigner';
 import { CollaborationProvider, ConnectionStatusIndicator } from './CollaborationProvider';
 import { ViewDesigner } from './ViewDesigner';
+import { AppCreationWizard } from './AppCreationWizard';
+import { NavigationDesigner } from './NavigationDesigner';
+import { EditorModeToggle } from './EditorModeToggle';
+import { DashboardEditor } from './DashboardEditor';
+import { PageCanvasEditor } from './PageCanvasEditor';
+import { ObjectViewConfigurator } from './ObjectViewConfigurator';
 
 export {
   PageDesigner,
@@ -22,9 +28,21 @@ export {
   CollaborationProvider,
   ConnectionStatusIndicator,
   ViewDesigner,
+  AppCreationWizard,
+  NavigationDesigner,
+  EditorModeToggle,
+  DashboardEditor,
+  PageCanvasEditor,
+  ObjectViewConfigurator,
 };
 
 export type { ViewDesignerProps, ViewDesignerConfig } from './ViewDesigner';
+export type { AppCreationWizardProps } from './AppCreationWizard';
+export type { NavigationDesignerProps } from './NavigationDesigner';
+export type { EditorModeToggleProps } from './EditorModeToggle';
+export type { DashboardEditorProps } from './DashboardEditor';
+export type { PageCanvasEditorProps, CanvasComponent } from './PageCanvasEditor';
+export type { ObjectViewConfiguratorProps, ViewConfig, ViewColumn, ViewType } from './ObjectViewConfigurator';
 
 // Shared hooks
 export { useUndoRedo } from './hooks/useUndoRedo';
@@ -125,3 +143,75 @@ ComponentRegistry.register(
     ],
   }
 );
+
+// Register app creation wizard component
+ComponentRegistry.register(
+  'app-creation-wizard',
+  AppCreationWizard,
+  {
+    label: 'App Creation Wizard',
+    category: 'Designer',
+    inputs: [
+      { name: 'availableObjects', type: 'code', label: 'Available Objects' },
+      { name: 'templates', type: 'code', label: 'Templates' },
+      { name: 'readOnly', type: 'boolean', label: 'Read Only', defaultValue: false },
+    ],
+  }
+);
+
+// Register navigation designer component
+ComponentRegistry.register(
+  'navigation-designer',
+  NavigationDesigner,
+  {
+    label: 'Navigation Designer',
+    category: 'Designer',
+    inputs: [
+      { name: 'items', type: 'code', label: 'Navigation Items' },
+      { name: 'showPreview', type: 'boolean', label: 'Show Preview', defaultValue: true },
+      { name: 'readOnly', type: 'boolean', label: 'Read Only', defaultValue: false },
+    ],
+  }
+);
+
+// Register dashboard editor component
+ComponentRegistry.register(
+  'dashboard-editor',
+  DashboardEditor,
+  {
+    label: 'Dashboard Editor',
+    category: 'Designer',
+    inputs: [
+      { name: 'schema', type: 'code', label: 'Dashboard Schema' },
+      { name: 'readOnly', type: 'boolean', label: 'Read Only', defaultValue: false },
+    ],
+  }
+);
+
+// Register page canvas editor component
+ComponentRegistry.register(
+  'page-canvas-editor',
+  PageCanvasEditor,
+  {
+    label: 'Page Canvas Editor',
+    category: 'Designer',
+    inputs: [
+      { name: 'schema', type: 'code', label: 'Page Schema' },
+      { name: 'readOnly', type: 'boolean', label: 'Read Only', defaultValue: false },
+    ],
+  }
+);
+
+// Register object view configurator component
+ComponentRegistry.register(
+  'object-view-configurator',
+  ObjectViewConfigurator,
+  {
+    label: 'Object View Configurator',
+    category: 'Designer',
+    inputs: [
+      { name: 'config', type: 'code', label: 'View Config' },
+      { name: 'readOnly', type: 'boolean', label: 'Read Only', defaultValue: false },
+    ],
+  }
+);
diff --git a/packages/types/src/__tests__/app-creation-types.test.ts b/packages/types/src/__tests__/app-creation-types.test.ts
new file mode 100644
index 0000000000..83affe9c02
--- /dev/null
+++ b/packages/types/src/__tests__/app-creation-types.test.ts
@@ -0,0 +1,130 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { isValidAppName, wizardDraftToAppSchema } from '@object-ui/types';
+import type {
+  AppWizardDraft,
+  AppWizardStep,
+  BrandingConfig,
+  ObjectSelection,
+  EditorMode,
+  AppSchema,
+} from '@object-ui/types';
+
+describe('App Creation Types', () => {
+  describe('isValidAppName', () => {
+    it('should accept simple snake_case names', () => {
+      expect(isValidAppName('my_app')).toBe(true);
+      expect(isValidAppName('crm')).toBe(true);
+      expect(isValidAppName('sales_dashboard')).toBe(true);
+      expect(isValidAppName('app123')).toBe(true);
+    });
+
+    it('should reject invalid names', () => {
+      expect(isValidAppName('')).toBe(false);
+      expect(isValidAppName('My App')).toBe(false);
+      expect(isValidAppName('my-app')).toBe(false);
+      expect(isValidAppName('MyApp')).toBe(false);
+      expect(isValidAppName('123app')).toBe(false);
+      expect(isValidAppName('_app')).toBe(false);
+      expect(isValidAppName('app_')).toBe(false);
+      expect(isValidAppName('app__name')).toBe(false);
+    });
+
+    it('should accept multi-segment snake_case', () => {
+      expect(isValidAppName('my_cool_app')).toBe(true);
+      expect(isValidAppName('a_b_c_d')).toBe(true);
+    });
+  });
+
+  describe('wizardDraftToAppSchema', () => {
+    it('should convert draft to AppSchema', () => {
+      const draft: AppWizardDraft = {
+        name: 'test_app',
+        title: 'Test Application',
+        description: 'A test app',
+        icon: 'LayoutDashboard',
+        layout: 'sidebar',
+        objects: [],
+        navigation: [
+          { id: 'nav_1', type: 'object', label: 'Contacts', objectName: 'contacts' },
+        ],
+        branding: {
+          logo: 'https://example.com/logo.svg',
+          primaryColor: '#3b82f6',
+          favicon: 'https://example.com/favicon.ico',
+        },
+      };
+
+      const schema: AppSchema = wizardDraftToAppSchema(draft);
+      expect(schema.type).toBe('app');
+      expect(schema.name).toBe('test_app');
+      expect(schema.title).toBe('Test Application');
+      expect(schema.description).toBe('A test app');
+      expect(schema.logo).toBe('https://example.com/logo.svg');
+      expect(schema.favicon).toBe('https://example.com/favicon.ico');
+      expect(schema.layout).toBe('sidebar');
+      expect(schema.navigation).toHaveLength(1);
+      expect(schema.navigation![0].id).toBe('nav_1');
+    });
+
+    it('should handle draft with empty navigation', () => {
+      const draft: AppWizardDraft = {
+        name: 'empty_app',
+        title: 'Empty',
+        layout: 'header',
+        objects: [],
+        navigation: [],
+        branding: {},
+      };
+
+      const schema = wizardDraftToAppSchema(draft);
+      expect(schema.navigation).toEqual([]);
+      expect(schema.layout).toBe('header');
+    });
+  });
+
+  describe('Type Shape Verification', () => {
+    it('should accept valid AppWizardStep', () => {
+      const step: AppWizardStep = {
+        id: 'basic',
+        label: 'Basic Info',
+        description: 'Enter app details',
+        icon: 'Settings',
+      };
+      expect(step.id).toBe('basic');
+      expect(step.label).toBe('Basic Info');
+    });
+
+    it('should accept valid BrandingConfig', () => {
+      const config: BrandingConfig = {
+        logo: 'https://example.com/logo.png',
+        primaryColor: '#ff5733',
+        favicon: 'https://example.com/favicon.ico',
+        fontFamily: 'Inter',
+      };
+      expect(config.primaryColor).toBe('#ff5733');
+    });
+
+    it('should accept valid ObjectSelection', () => {
+      const obj: ObjectSelection = {
+        name: 'contacts',
+        label: 'Contacts',
+        icon: 'Users',
+        selected: true,
+      };
+      expect(obj.selected).toBe(true);
+    });
+
+    it('should accept valid EditorMode', () => {
+      const modes: EditorMode[] = ['edit', 'preview', 'code'];
+      expect(modes).toHaveLength(3);
+    });
+  });
+});
diff --git a/packages/types/src/app.ts b/packages/types/src/app.ts
index 16096b1cd9..9f40bdbf34 100644
--- a/packages/types/src/app.ts
+++ b/packages/types/src/app.ts
@@ -343,6 +343,132 @@ export function menuItemToNavigationItem(
   };
 }
 
+// ============================================================================
+// App Creation Wizard Types
+// ============================================================================
+
+/**
+ * Wizard step identifier for app creation flow.
+ */
+export type AppWizardStepId = 'basic' | 'objects' | 'navigation' | 'branding';
+
+/**
+ * App wizard step definition.
+ */
+export interface AppWizardStep {
+  /** Step identifier */
+  id: AppWizardStepId;
+
+  /** Display label */
+  label: string;
+
+  /** Step description */
+  description?: string;
+
+  /** Icon name (Lucide) */
+  icon?: string;
+
+  /** Whether the step is optional */
+  optional?: boolean;
+}
+
+/**
+ * Branding configuration for an application.
+ */
+export interface BrandingConfig {
+  /** Logo URL or base64 data URI */
+  logo?: string;
+
+  /** Primary brand color (hex) */
+  primaryColor?: string;
+
+  /** Favicon URL */
+  favicon?: string;
+
+  /** Font family override */
+  fontFamily?: string;
+}
+
+/**
+ * Object selection entry for the wizard.
+ */
+export interface ObjectSelection {
+  /** Object name (snake_case) */
+  name: string;
+
+  /** Display label */
+  label: string;
+
+  /** Icon name (Lucide) */
+  icon?: string;
+
+  /** Whether this object is selected */
+  selected: boolean;
+}
+
+/**
+ * App creation wizard draft state — represents the in-progress
+ * application configuration before it is finalized into an AppSchema.
+ */
+export interface AppWizardDraft {
+  /** App name (snake_case, validated) */
+  name: string;
+
+  /** Display title */
+  title: string;
+
+  /** Description */
+  description?: string;
+
+  /** App icon name (Lucide) */
+  icon?: string;
+
+  /** Template to start from */
+  template?: string;
+
+  /** Layout strategy */
+  layout: 'sidebar' | 'header' | 'empty';
+
+  /** Selected business objects */
+  objects: ObjectSelection[];
+
+  /** Navigation tree being built */
+  navigation: NavigationItem[];
+
+  /** Branding configuration */
+  branding: BrandingConfig;
+}
+
+/**
+ * Editor mode for the app designer.
+ */
+export type EditorMode = 'edit' | 'preview' | 'code';
+
+/**
+ * Validate an app name is snake_case.
+ * Pattern: starts with lowercase letter, followed by lowercase letters/digits,
+ * with optional underscore-separated segments (no trailing/leading/double underscores).
+ */
+export function isValidAppName(name: string): boolean {
+  return /^[a-z][a-z0-9]*(_[a-z0-9]+)*$/.test(name);
+}
+
+/**
+ * Convert an AppWizardDraft to an AppSchema.
+ */
+export function wizardDraftToAppSchema(draft: AppWizardDraft): AppSchema {
+  return {
+    type: 'app',
+    name: draft.name,
+    title: draft.title,
+    description: draft.description,
+    logo: draft.branding.logo,
+    favicon: draft.branding.favicon,
+    layout: draft.layout,
+    navigation: draft.navigation,
+  };
+}
+
 // ============================================================================
 // Application Actions
 // ============================================================================
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index eeee141fd7..c68e6562c8 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -56,9 +56,15 @@ export type {
   NavigationItem,
   NavigationItemType,
   NavigationArea,
-  MenuItem as AppMenuItem
+  MenuItem as AppMenuItem,
+  AppWizardStepId,
+  AppWizardStep,
+  BrandingConfig,
+  ObjectSelection,
+  AppWizardDraft,
+  EditorMode,
 } from './app';
-export { menuItemToNavigationItem } from './app';
+export { menuItemToNavigationItem, isValidAppName, wizardDraftToAppSchema } from './app';
 
 // ============================================================================
 // Base Types - The Foundation