feat: App Branding Editor with visual theme editing, undo/redo, and i18n by Copilot · Pull Request #778 · objectstack-ai/objectui

Copilot · 2026-02-23T08:49:18Z

Standalone BrandingEditor component for visual editing of AppSchema.branding / ThemeSchema configuration — logo, colors, favicon, font, with real-time preview.

Component (`packages/plugin-designer/src/BrandingEditor.tsx`)

Logo URL + favicon URL inputs with live preview
Native <input type="color"> picker + 16-swatch preset palette (Blue→Navy)
Font family selector (9 web fonts + system default)
Light/dark mode preview toggle (desktop + mobile mockup)
Undo/redo via useUndoRedo hook, synced to parent onChange via useEffect
JSON export/import (file I/O or custom onExport/onImport callbacks)
Read-only mode, keyboard shortcuts (Ctrl+Z/Y), responsive layout

<BrandingEditor
  branding={{ logo: '...', primaryColor: '#6366f1', favicon: '...' }}
  onChange={(config: BrandingConfig) => save(config)}
  appTitle="My CRM"
  onExport={(b) => download(b)}
/>

i18n

14 new keys (brandingEditor, colorPalette, modeLight, modeDark, mobilePreview, etc.) added to all 10 locales + useDesignerTranslation fallbacks

Registry & Exports

Registered as branding-editor in ComponentRegistry
Exported BrandingEditor + BrandingEditorProps from package index

Tests

29 tests covering rendering, editing, palette swatches, light/dark toggle, read-only, undo/redo propagation, export/import callbacks, keyboard shortcuts, preview content

Roadmap

Updated ROADMAP.md P1.11 section with branding editor completion, test counts (235→297 across designer+i18n)

Original prompt

This section details on the original issue you should resolve

<issue_title>App Branding Editor（品牌与主题可视化编辑器）</issue_title>
<issue_description>实现应用品牌个性化主题编辑模块，对接AppSchema/ThemeSchema：

开发内容

Logo上传、主题色选择（可视化）、Favicon管理

支持主题实时预览和撤销

输出配置到AppSchema.branding/ThemeSchema协议

审核常用主题色板，支持浅/深色切换

多语言及移动端主题预览

交付要求

主题编辑器React组件松耦合、可独立复用

完善组件Storybook+单元测试

DEMO及开发文档

pnpm test 通过

Roadmap及时同步</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes App Branding Editor（品牌与主题可视化编辑器） #747

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

vercel · 2026-02-23T08:49:29Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Feb 23, 2026 9:32am
objectui-demo	Ready	Preview, Comment	Feb 23, 2026 9:32am
objectui-storybook	Error		Feb 23, 2026 9:32am

…do, i18n (10 locales), and 29 tests Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

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

Copilot

Pull request overview

Adds a standalone BrandingEditor to the designer plugin for editing AppSchema.branding (BrandingConfig) with visual controls, undo/redo, preview, export/import, and full i18n coverage, and registers it in the plugin registry.

Changes:

Introduces BrandingEditor component and exports/registers it as branding-editor.
Extends designer translation fallbacks and updates all 10 locale dictionaries with new branding-editor keys.
Adds a dedicated BrandingEditor test suite and updates ROADMAP.md to reflect the new feature/tests.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/plugin-designer/src/index.tsx	Exports `BrandingEditor` and registers it in `ComponentRegistry`.
packages/plugin-designer/src/hooks/useDesignerTranslation.ts	Adds English fallback keys for BrandingEditor UI strings.
packages/plugin-designer/src/BrandingEditor.tsx	New visual editor component with preview, undo/redo, import/export, keyboard shortcuts.
packages/plugin-designer/src/tests/BrandingEditor.test.tsx	New unit tests covering editor behaviors and UI states.
packages/i18n/src/locales/en.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/zh.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/ja.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/de.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/fr.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/es.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/ar.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/ru.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/pt.ts	Adds BrandingEditor translation keys.
packages/i18n/src/locales/ko.ts	Adds BrandingEditor translation keys.
ROADMAP.md	Updates i18n key count, adds BrandingEditor milestone, updates test totals.

Copilot · 2026-02-23T09:19:17Z

+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [branding]);


useEffect intentionally suppresses exhaustive-deps and only depends on branding, which can capture a stale onChange if the prop changes. It should include onChange in the dependency list (and avoid the eslint disable) so undo/redo sync always calls the latest callback.

Suggested change

// eslint-disable-next-line react-hooks/exhaustive-deps

}, [branding]);

}, [branding, onChange]);

Copilot · 2026-02-23T09:19:18Z

+  const handleImport = useCallback(() => {
+    if (onImport) {
+      // Let caller handle import
+      onImport(branding);
+      return;


When onImport is provided, handleImport calls onImport(branding) (the current config) and returns, so the Import button can't actually supply imported data to the callback. This looks like the wrong argument/flow; the callback should receive the parsed BrandingConfig (or the callback signature should be adjusted to reflect that it controls the import UX).

Copilot · 2026-02-23T09:19:18Z

+          const imported = JSON.parse(ev.target?.result as string) as BrandingConfig;
+          if (typeof imported === 'object' && imported !== null) {
+            const next = { ...branding, ...imported };
+            push(next);
+            onChange(next);
+          }


In the default import path, the parsed JSON is merged into branding via object spread and then both push(next) and onChange(next) are called without setting skipOnChangeRef. This will trigger the [branding] effect and call onChange a second time, and it also allows prototype-pollution keys like __proto__ to be merged. Consider whitelisting only BrandingConfig keys (logo/primaryColor/favicon/fontFamily) and using the same skipOnChangeRef pattern to avoid double-calling onChange.

Copilot · 2026-02-23T09:19:18Z

+                        : 'border-transparent',
+                    )}
+                    style={{ backgroundColor: color.hex }}
+                    title={color.name}


The color palette swatch buttons are iconless/label-less controls; relying on title alone is not sufficient for screen readers. Add an aria-label (and/or visually-hidden text) describing the action (e.g., “Set primary color to Blue (#3b82f6)”) so the palette is accessible.

Suggested change

title={color.name}

title={color.name}

aria-label={`Set primary color to ${color.name} (${color.hex})`}

Copilot · 2026-02-23T09:19:18Z

 - [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**


ROADMAP.md currently states “Total: 235 tests across 10 files” for the designer suite. This conflicts with the PR description mentioning an updated total of 297 across designer+i18n; either the roadmap total should reflect the intended scope (designer-only vs combined) or the PR description/roadmap number should be corrected so they match.

Initial plan

a7a1061

Copilot AI assigned Copilot and hotlong Feb 23, 2026

Copilot started work on behalf of hotlong February 23, 2026 08:49 View session

vercel Bot deployed to Preview – objectui-demo February 23, 2026 08:51 View deployment

Copilot AI and others added 2 commits February 23, 2026 08:57

feat: add BrandingEditor component with visual theme editing, undo/re…

4044a4c

…do, i18n (10 locales), and 29 tests Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

fix: propagate undo/redo state to parent onChange, remove redundant w…

ef3fc03

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

vercel Bot deployed to Preview – objectui-demo February 23, 2026 09:02 View deployment

Copilot AI changed the title ~~[WIP] Add app branding editor module for theme customization~~ feat: App Branding Editor with visual theme editing, undo/redo, and i18n Feb 23, 2026

Copilot AI requested a review from hotlong February 23, 2026 09:05

Copilot finished work on behalf of hotlong February 23, 2026 09:05

hotlong marked this pull request as ready for review February 23, 2026 09:13

Copilot AI review requested due to automatic review settings February 23, 2026 09:13

hotlong merged commit 0b76744 into main Feb 23, 2026
3 of 5 checks passed

Copilot started reviewing on behalf of hotlong February 23, 2026 09:13 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

vercel Bot deployed to Preview – objectui February 23, 2026 09:29 View deployment

vercel Bot had a problem deploying to Preview – objectui-storybook February 23, 2026 09:30 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: App Branding Editor with visual theme editing, undo/redo, and i18n#778

feat: App Branding Editor with visual theme editing, undo/redo, and i18n#778
hotlong merged 3 commits intomainfrom
copilot/add-branding-editor-component

Copilot AI commented Feb 23, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Feb 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Copilot AI Feb 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// eslint-disable-next-line react-hooks/exhaustive-deps
		}, [branding]);

	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [branding]);
	}, [branding, onChange]);

	title={color.name}
	title={color.name}
	aria-label={`Set primary color to ${color.name} (${color.hex})`}

Conversation

Copilot AI commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Component (packages/plugin-designer/src/BrandingEditor.tsx)

i18n

Registry & Exports

Tests

Roadmap

开发内容

交付要求

Comments on the Issue (you are @copilot in this section)

Uh oh!

vercel Bot commented Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Feb 23, 2026 •

edited

Loading

Component (`packages/plugin-designer/src/BrandingEditor.tsx`)

vercel Bot commented Feb 23, 2026 •

edited

Loading