Merge pull request #778 from objectstack-ai/copilot/add-branding-editor-component

Author: hotlong

ROADMAP.md

@@ -480,12 +480,13 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Disabled state support
 
 **i18n:**
-- [x] `appDesigner` section with 119 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
+- [x] `appDesigner` section with 133 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)
+- [x] BrandingEditor fully i18n-integrated (14 new keys: editor title, export/import, preview, palette, font, light/dark, mobile preview, sample text)
 
 **UX Enhancements:**
 - [x] Cancel confirmation dialog with unsaved-changes detection
@@ -500,10 +501,27 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [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: 206 tests across 9 files, all passing**
+- [x] 29 BrandingEditor tests (rendering, editing, light/dark preview, read-only, undo/redo, export/import, keyboard shortcuts, preview content)
+- [x] **Total: 235 tests across 10 files, all passing**
 
 **ComponentRegistry:**
-- [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`
+- [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`, `branding-editor`
+
+**Branding Editor:**
+- [x] Logo URL input with live preview (light/dark logo placeholders)
+- [x] Visual color picker with native `<input type="color">` and text hex input
+- [x] 16-color preset palette swatches (Blue, Indigo, Violet, Purple, Pink, Red, Orange, Amber, Yellow, Green, Teal, Cyan, Sky, Slate, Dark, Navy)
+- [x] Favicon URL input with preview
+- [x] Font family selector (9 common web fonts + system default)
+- [x] Light/Dark mode preview toggle
+- [x] Real-time preview panel (desktop + mobile)
+- [x] Undo/Redo via `useUndoRedo` hook (Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y keyboard shortcuts)
+- [x] JSON Schema export/import (Download/Upload toolbar buttons with `onExport`/`onImport` callbacks)
+- [x] Read-only mode support (disables all inputs, palette clicks, undo/redo, import)
+- [x] Mobile responsive layout (flex-col on mobile, sm:flex-row on desktop)
+- [x] i18n integration via `useDesignerTranslation` (14 new translation keys in all 10 locales)
+- [x] Outputs to `BrandingConfig` type (AppSchema.branding protocol)
+- [x] 29 unit tests (rendering, editing, light/dark preview, read-only, undo/redo, export/import, keyboard shortcuts, preview content)
 
 **Console Integration:**
 - [x] `CreateAppPage` — renders `AppCreationWizard` with `useMetadata()` objects, `onComplete`/`onCancel`/`onSaveDraft` callbacks

packages/i18n/src/locales/ar.ts

@@ -254,6 +254,18 @@ const ar = {
     modeDashboard: 'لوحة المعلومات',
     undo: 'تراجع',
     redo: 'إعادة',
+    brandingEditor: 'محرر العلامة التجارية',
+    brandingExport: 'تصدير JSON',
+    brandingImport: 'استيراد JSON',
+    brandingPreview: 'معاينة',
+    brandingSampleButton: 'زر نموذجي',
+    brandingSampleText: 'هكذا سيبدو موضوع علامتك التجارية.',
+    colorPalette: 'لوحة الألوان',
+    fontFamily: 'الخط',
+    fontDefault: 'افتراضي (النظام)',
+    modeLight: 'فاتح',
+    modeDark: 'داكن',
+    mobilePreview: 'معاينة الجوال',
   },
   console: {
     title: 'وحدة تحكم ObjectStack',

packages/i18n/src/locales/de.ts

@@ -253,6 +253,18 @@ const de = {
     modeDashboard: 'Dashboard',
     undo: 'Rückgängig',
     redo: 'Wiederholen',
+    brandingEditor: 'Branding-Editor',
+    brandingExport: 'JSON exportieren',
+    brandingImport: 'JSON importieren',
+    brandingPreview: 'Vorschau',
+    brandingSampleButton: 'Beispiel-Schaltfläche',
+    brandingSampleText: 'So wird Ihr Markenthema aussehen.',
+    colorPalette: 'Farbpalette',
+    fontFamily: 'Schriftart',
+    fontDefault: 'Standard (System)',
+    modeLight: 'Hell',
+    modeDark: 'Dunkel',
+    mobilePreview: 'Mobile Vorschau',
   },
   console: {
     title: 'ObjectStack Konsole',

packages/i18n/src/locales/en.ts

@@ -253,6 +253,18 @@ const en = {
     modeDashboard: 'Dashboard',
     undo: 'Undo',
     redo: 'Redo',
+    brandingEditor: 'Branding Editor',
+    brandingExport: 'Export JSON',
+    brandingImport: 'Import JSON',
+    brandingPreview: 'Preview',
+    brandingSampleButton: 'Sample Button',
+    brandingSampleText: 'This is how your brand theme will look.',
+    colorPalette: 'Color Palette',
+    fontFamily: 'Font Family',
+    fontDefault: 'Default (System)',
+    modeLight: 'Light',
+    modeDark: 'Dark',
+    mobilePreview: 'Mobile Preview',
   },
   console: {
     title: 'ObjectStack Console',

packages/i18n/src/locales/es.ts

@@ -253,6 +253,18 @@ const es = {
     modeDashboard: 'Panel',
     undo: 'Deshacer',
     redo: 'Rehacer',
+    brandingEditor: 'Editor de marca',
+    brandingExport: 'Exportar JSON',
+    brandingImport: 'Importar JSON',
+    brandingPreview: 'Vista previa',
+    brandingSampleButton: 'Botón de ejemplo',
+    brandingSampleText: 'Así se verá el tema de su marca.',
+    colorPalette: 'Paleta de colores',
+    fontFamily: 'Fuente',
+    fontDefault: 'Predeterminada (Sistema)',
+    modeLight: 'Claro',
+    modeDark: 'Oscuro',
+    mobilePreview: 'Vista previa móvil',
   },
   console: {
     title: 'Consola ObjectStack',

packages/i18n/src/locales/fr.ts

@@ -253,6 +253,18 @@ const fr = {
     modeDashboard: 'Tableau de bord',
     undo: 'Annuler',
     redo: 'Rétablir',
+    brandingEditor: 'Éditeur de marque',
+    brandingExport: 'Exporter JSON',
+    brandingImport: 'Importer JSON',
+    brandingPreview: 'Aperçu',
+    brandingSampleButton: 'Bouton exemple',
+    brandingSampleText: 'Voici à quoi ressemblera votre thème de marque.',
+    colorPalette: 'Palette de couleurs',
+    fontFamily: 'Police',
+    fontDefault: 'Par défaut (Système)',
+    modeLight: 'Clair',
+    modeDark: 'Sombre',
+    mobilePreview: 'Aperçu mobile',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ja.ts

@@ -253,6 +253,18 @@ const ja = {
     modeDashboard: 'ダッシュボード',
     undo: '元に戻す',
     redo: 'やり直し',
+    brandingEditor: 'ブランドエディター',
+    brandingExport: 'JSON エクスポート',
+    brandingImport: 'JSON インポート',
+    brandingPreview: 'プレビュー',
+    brandingSampleButton: 'サンプルボタン',
+    brandingSampleText: 'ブランドテーマの表示イメージです。',
+    colorPalette: 'カラーパレット',
+    fontFamily: 'フォント',
+    fontDefault: 'デフォルト（システム）',
+    modeLight: 'ライト',
+    modeDark: 'ダーク',
+    mobilePreview: 'モバイルプレビュー',
   },
   console: {
     title: 'ObjectStack コンソール',

packages/i18n/src/locales/ko.ts

@@ -253,6 +253,18 @@ const ko = {
     modeDashboard: '대시보드',
     undo: '실행 취소',
     redo: '다시 실행',
+    brandingEditor: '브랜딩 편집기',
+    brandingExport: 'JSON 내보내기',
+    brandingImport: 'JSON 가져오기',
+    brandingPreview: '미리보기',
+    brandingSampleButton: '샘플 버튼',
+    brandingSampleText: '브랜드 테마가 이렇게 보입니다.',
+    colorPalette: '색상 팔레트',
+    fontFamily: '글꼴',
+    fontDefault: '기본 (시스템)',
+    modeLight: '라이트',
+    modeDark: '다크',
+    mobilePreview: '모바일 미리보기',
   },
   console: {
     title: 'ObjectStack 콘솔',

packages/i18n/src/locales/pt.ts

@@ -253,6 +253,18 @@ const pt = {
     modeDashboard: 'Painel',
     undo: 'Desfazer',
     redo: 'Refazer',
+    brandingEditor: 'Editor de marca',
+    brandingExport: 'Exportar JSON',
+    brandingImport: 'Importar JSON',
+    brandingPreview: 'Pré-visualização',
+    brandingSampleButton: 'Botão de exemplo',
+    brandingSampleText: 'É assim que o tema da sua marca vai ficar.',
+    colorPalette: 'Paleta de cores',
+    fontFamily: 'Fonte',
+    fontDefault: 'Padrão (Sistema)',
+    modeLight: 'Claro',
+    modeDark: 'Escuro',
+    mobilePreview: 'Pré-visualização móvel',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ru.ts

@@ -253,6 +253,18 @@ const ru = {
     modeDashboard: 'Панель',
     undo: 'Отменить',
     redo: 'Повторить',
+    brandingEditor: 'Редактор бренда',
+    brandingExport: 'Экспорт JSON',
+    brandingImport: 'Импорт JSON',
+    brandingPreview: 'Предпросмотр',
+    brandingSampleButton: 'Пример кнопки',
+    brandingSampleText: 'Так будет выглядеть тема вашего бренда.',
+    colorPalette: 'Палитра цветов',
+    fontFamily: 'Шрифт',
+    fontDefault: 'По умолчанию (Системный)',
+    modeLight: 'Светлая',
+    modeDark: 'Тёмная',
+    mobilePreview: 'Мобильный предпросмотр',
   },
   console: {
     title: 'Консоль ObjectStack',