Merge pull request #776 from objectstack-ai/copilot/add-page-dashboard-editor

Author: hotlong

ROADMAP.md

@@ -444,13 +444,27 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Property panel for selected component (label, type, ID)
 - [x] Add/remove/reorder components
 - [x] Syncs PageSchema children on every change
+- [x] Undo/Redo integration via `useUndoRedo` hook (Ctrl+Z / Ctrl+Y keyboard shortcuts)
+- [x] JSON Schema export/import (Download/Upload toolbar buttons with `onExport`/`onImport` callbacks)
+- [x] Preview mode toggle (Eye icon, renders PagePreview panel)
+- [x] Page/Dashboard mode tab switching (role="tablist" with aria-selected)
+- [x] i18n integration via `useDesignerTranslation` (all labels use translation keys)
+- [x] Keyboard shortcuts (Delete/Backspace to remove selected component)
+- [x] Mobile responsive layout (flex-col on mobile, sm:flex-row on desktop)
 
 **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
+- [x] Undo/Redo integration via `useUndoRedo` hook (Ctrl+Z / Ctrl+Y keyboard shortcuts)
+- [x] JSON Schema export/import (Download/Upload toolbar buttons with `onExport`/`onImport` callbacks)
+- [x] Preview mode toggle (Eye icon, renders DashboardPreview panel)
+- [x] Widget layout size editing (width/height inputs in property panel)
+- [x] i18n integration via `useDesignerTranslation` (all labels use translation keys)
+- [x] Keyboard shortcuts (Delete/Backspace to remove selected widget)
+- [x] Mobile responsive layout (flex-col on mobile, sm:flex-row on desktop)
 
 **Object View Configurator:**
 - [x] 7 view type switcher (Grid, Kanban, Calendar, Gallery, Timeline, Map, Gantt)
@@ -466,10 +480,12 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Disabled state support
 
 **i18n:**
-- [x] `appDesigner` section with 103 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
+- [x] `appDesigner` section with 119 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
 - [x] `useDesignerTranslation` safe wrapper hook with English fallback (no I18nProvider required)
 - [x] AppCreationWizard fully i18n-integrated (all labels, buttons, step names, validation messages)
 - [x] NavigationDesigner fully i18n-integrated (type badges, quick-add labels, aria-labels, preview, icon editing, visibility, export/import)
+- [x] DashboardEditor fully i18n-integrated (toolbar labels, preview text)
+- [x] PageCanvasEditor fully i18n-integrated (toolbar labels, mode tabs, preview text)
 
 **UX Enhancements:**
 - [x] Cancel confirmation dialog with unsaved-changes detection
@@ -481,10 +497,10 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] 41 AppCreationWizard tests (rendering, steps 1-4, navigation, callbacks, cancel confirm, save draft, i18n, read-only)
 - [x] 33 NavigationDesigner tests (rendering, add, remove, groups, badges, i18n, read-only, icon editing, visibility toggle, export/import, responsive)
 - [x] 7 EditorModeToggle tests (render, active mode, onChange, accessibility, disabled)
-- [x] 10 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only)
-- [x] 9 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only)
+- [x] 22 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only, undo/redo, export/import, preview mode, widget layout)
+- [x] 23 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only, mode tabs, undo/redo, export/import, preview mode)
 - [x] 12 ObjectViewConfigurator tests (rendering, view type switch, column visibility, toggles, read-only)
-- [x] **Total: 180 tests across 9 files, all passing**
+- [x] **Total: 206 tests across 9 files, all passing**
 
 **ComponentRegistry:**
 - [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`

packages/i18n/src/locales/ar.ts

@@ -239,6 +239,21 @@ const ar = {
     navImportSuccess: 'تم استيراد هيكل التنقل',
     navImportError: 'ملف JSON تنقل غير صالح',
     navIconPlaceholder: 'اسم الأيقونة (مثل Users)',
+    dashboardEditor: 'محرر لوحة المعلومات',
+    noWidgets: 'لا توجد عناصر. انقر على زر أعلاه لإضافة واحد.',
+    widgetLayoutSize: 'حجم التخطيط',
+    widgetWidth: 'العرض',
+    widgetHeight: 'الارتفاع',
+    dashboardPreview: 'معاينة لوحة المعلومات',
+    noWidgetsPreview: 'لا توجد عناصر للمعاينة',
+    pageCanvasEditor: 'محرر لوحة الصفحة',
+    emptyPage: 'صفحة فارغة. انقر على زر أعلاه لإضافة مكون.',
+    pagePreview: 'معاينة الصفحة',
+    noComponentsPreview: 'لا توجد مكونات للمعاينة',
+    modePage: 'صفحة',
+    modeDashboard: 'لوحة المعلومات',
+    undo: 'تراجع',
+    redo: 'إعادة',
   },
   console: {
     title: 'وحدة تحكم ObjectStack',

packages/i18n/src/locales/de.ts

@@ -238,6 +238,21 @@ const de = {
     navImportSuccess: 'Navigationsstruktur importiert',
     navImportError: 'Ungültiges Navigations-JSON',
     navIconPlaceholder: 'Symbolname (z.B. Users)',
+    dashboardEditor: 'Dashboard-Editor',
+    noWidgets: 'Keine Widgets. Klicken Sie oben auf eine Schaltfläche, um eines hinzuzufügen.',
+    widgetLayoutSize: 'Layoutgröße',
+    widgetWidth: 'Breite',
+    widgetHeight: 'Höhe',
+    dashboardPreview: 'Dashboard-Vorschau',
+    noWidgetsPreview: 'Keine Widgets zur Vorschau',
+    pageCanvasEditor: 'Seiten-Canvas-Editor',
+    emptyPage: 'Leere Seite. Klicken Sie oben auf eine Schaltfläche, um eine Komponente hinzuzufügen.',
+    pagePreview: 'Seitenvorschau',
+    noComponentsPreview: 'Keine Komponenten zur Vorschau',
+    modePage: 'Seite',
+    modeDashboard: 'Dashboard',
+    undo: 'Rückgängig',
+    redo: 'Wiederholen',
   },
   console: {
     title: 'ObjectStack Konsole',

packages/i18n/src/locales/en.ts

@@ -238,6 +238,21 @@ const en = {
     navImportSuccess: 'Navigation schema imported',
     navImportError: 'Invalid navigation JSON',
     navIconPlaceholder: 'Icon name (e.g. Users)',
+    dashboardEditor: 'Dashboard Editor',
+    noWidgets: 'No widgets. Click a button above to add one.',
+    widgetLayoutSize: 'Layout Size',
+    widgetWidth: 'Width',
+    widgetHeight: 'Height',
+    dashboardPreview: 'Dashboard Preview',
+    noWidgetsPreview: 'No widgets to preview',
+    pageCanvasEditor: 'Page Canvas Editor',
+    emptyPage: 'Empty page. Click a button above to add a component.',
+    pagePreview: 'Page Preview',
+    noComponentsPreview: 'No components to preview',
+    modePage: 'Page',
+    modeDashboard: 'Dashboard',
+    undo: 'Undo',
+    redo: 'Redo',
   },
   console: {
     title: 'ObjectStack Console',

packages/i18n/src/locales/es.ts

@@ -238,6 +238,21 @@ const es = {
     navImportSuccess: 'Estructura de navegación importada',
     navImportError: 'JSON de navegación inválido',
     navIconPlaceholder: 'Nombre del icono (ej: Users)',
+    dashboardEditor: 'Editor de panel',
+    noWidgets: 'Sin widgets. Haz clic en un botón arriba para agregar uno.',
+    widgetLayoutSize: 'Tamaño de diseño',
+    widgetWidth: 'Ancho',
+    widgetHeight: 'Alto',
+    dashboardPreview: 'Vista previa del panel',
+    noWidgetsPreview: 'Sin widgets para previsualizar',
+    pageCanvasEditor: 'Editor de lienzo de página',
+    emptyPage: 'Página vacía. Haz clic en un botón arriba para agregar un componente.',
+    pagePreview: 'Vista previa de página',
+    noComponentsPreview: 'Sin componentes para previsualizar',
+    modePage: 'Página',
+    modeDashboard: 'Panel',
+    undo: 'Deshacer',
+    redo: 'Rehacer',
   },
   console: {
     title: 'Consola ObjectStack',

packages/i18n/src/locales/fr.ts

@@ -238,6 +238,21 @@ const fr = {
     navImportSuccess: 'Structure de navigation importée',
     navImportError: 'JSON de navigation invalide',
     navIconPlaceholder: 'Nom d\'icône (ex: Users)',
+    dashboardEditor: 'Éditeur de tableau de bord',
+    noWidgets: 'Aucun widget. Cliquez sur un bouton ci-dessus pour en ajouter un.',
+    widgetLayoutSize: 'Taille de mise en page',
+    widgetWidth: 'Largeur',
+    widgetHeight: 'Hauteur',
+    dashboardPreview: 'Aperçu du tableau de bord',
+    noWidgetsPreview: 'Aucun widget à prévisualiser',
+    pageCanvasEditor: 'Éditeur de canevas de page',
+    emptyPage: 'Page vide. Cliquez sur un bouton ci-dessus pour ajouter un composant.',
+    pagePreview: 'Aperçu de la page',
+    noComponentsPreview: 'Aucun composant à prévisualiser',
+    modePage: 'Page',
+    modeDashboard: 'Tableau de bord',
+    undo: 'Annuler',
+    redo: 'Rétablir',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ja.ts

@@ -238,6 +238,21 @@ const ja = {
     navImportSuccess: 'ナビゲーション構造をインポートしました',
     navImportError: '無効なナビゲーション JSON',
     navIconPlaceholder: 'アイコン名（例: Users）',
+    dashboardEditor: 'ダッシュボードエディター',
+    noWidgets: 'ウィジェットがありません。上のボタンをクリックして追加してください。',
+    widgetLayoutSize: 'レイアウトサイズ',
+    widgetWidth: '幅',
+    widgetHeight: '高さ',
+    dashboardPreview: 'ダッシュボードプレビュー',
+    noWidgetsPreview: 'プレビューするウィジェットがありません',
+    pageCanvasEditor: 'ページキャンバスエディター',
+    emptyPage: '空のページです。上のボタンをクリックしてコンポーネントを追加してください。',
+    pagePreview: 'ページプレビュー',
+    noComponentsPreview: 'プレビューするコンポーネントがありません',
+    modePage: 'ページ',
+    modeDashboard: 'ダッシュボード',
+    undo: '元に戻す',
+    redo: 'やり直し',
   },
   console: {
     title: 'ObjectStack コンソール',

packages/i18n/src/locales/ko.ts

@@ -238,6 +238,21 @@ const ko = {
     navImportSuccess: '내비게이션 구조를 가져왔습니다',
     navImportError: '잘못된 내비게이션 JSON',
     navIconPlaceholder: '아이콘 이름 (예: Users)',
+    dashboardEditor: '대시보드 편집기',
+    noWidgets: '위젯이 없습니다. 위의 버튼을 클릭하여 추가하세요.',
+    widgetLayoutSize: '레이아웃 크기',
+    widgetWidth: '너비',
+    widgetHeight: '높이',
+    dashboardPreview: '대시보드 미리보기',
+    noWidgetsPreview: '미리볼 위젯이 없습니다',
+    pageCanvasEditor: '페이지 캔버스 편집기',
+    emptyPage: '빈 페이지입니다. 위의 버튼을 클릭하여 컴포넌트를 추가하세요.',
+    pagePreview: '페이지 미리보기',
+    noComponentsPreview: '미리볼 컴포넌트가 없습니다',
+    modePage: '페이지',
+    modeDashboard: '대시보드',
+    undo: '실행 취소',
+    redo: '다시 실행',
   },
   console: {
     title: 'ObjectStack 콘솔',

packages/i18n/src/locales/pt.ts

@@ -238,6 +238,21 @@ const pt = {
     navImportSuccess: 'Estrutura de navegação importada',
     navImportError: 'JSON de navegação inválido',
     navIconPlaceholder: 'Nome do ícone (ex: Users)',
+    dashboardEditor: 'Editor de painel',
+    noWidgets: 'Sem widgets. Clique em um botão acima para adicionar.',
+    widgetLayoutSize: 'Tamanho do layout',
+    widgetWidth: 'Largura',
+    widgetHeight: 'Altura',
+    dashboardPreview: 'Pré-visualização do painel',
+    noWidgetsPreview: 'Sem widgets para pré-visualizar',
+    pageCanvasEditor: 'Editor de tela de página',
+    emptyPage: 'Página vazia. Clique em um botão acima para adicionar um componente.',
+    pagePreview: 'Pré-visualização da página',
+    noComponentsPreview: 'Sem componentes para pré-visualizar',
+    modePage: 'Página',
+    modeDashboard: 'Painel',
+    undo: 'Desfazer',
+    redo: 'Refazer',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ru.ts

@@ -238,6 +238,21 @@ const ru = {
     navImportSuccess: 'Структура навигации импортирована',
     navImportError: 'Недопустимый JSON навигации',
     navIconPlaceholder: 'Имя иконки (напр. Users)',
+    dashboardEditor: 'Редактор панели',
+    noWidgets: 'Нет виджетов. Нажмите кнопку выше, чтобы добавить.',
+    widgetLayoutSize: 'Размер макета',
+    widgetWidth: 'Ширина',
+    widgetHeight: 'Высота',
+    dashboardPreview: 'Предпросмотр панели',
+    noWidgetsPreview: 'Нет виджетов для предпросмотра',
+    pageCanvasEditor: 'Редактор холста страницы',
+    emptyPage: 'Пустая страница. Нажмите кнопку выше, чтобы добавить компонент.',
+    pagePreview: 'Предпросмотр страницы',
+    noComponentsPreview: 'Нет компонентов для предпросмотра',
+    modePage: 'Страница',
+    modeDashboard: 'Панель',
+    undo: 'Отменить',
+    redo: 'Повторить',
   },
   console: {
     title: 'Консоль ObjectStack',