拆分图片画布顶部栏视图

新增 ImageCanvasTopbarView 承载返回项目入口和项目标题区域新增顶栏视图测试覆盖重命名和导出入口精简 ImageCanvasEditorView 的顶部栏 JSX 更新图片画布拆分计划和 TRACKING 验证记录
2026-06-17 13:48:48 +08:00
parent 1c92db19c1
commit a319d2ae0d
6 changed files with 325 additions and 108 deletions
--- a/TRACKING.md
+++ b/TRACKING.md
@@ -141,3 +141,4 @@
 - 2026-06-17 前端拆分第二十三阶段：新增 `ImageCanvasOverlayModel`，把生成输入框锚定、图标素材生成面板宽度、选中图片工具栏边界、快速编辑面板和角色动画面板定位从主视图抽出为纯模型；主视图继续保留生成 / quick edit / 角色动画状态机和舞台编排。新增模型单测覆盖锚定优先级、生成中隐藏、icon 宽度、工具栏 clamp、quick edit / 角色动画边界和生成 dialog 模式识别；主视图从 1182 行降至 1133 行。验证命令：`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 未登录打开显示 `账号入口`，登录后 `画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，点击 `生成工具` 后 `Image Generator`、`生成图片` 对话框和 `AI画布工具栏` 均可见；素材库已有素材真实 pointer 拖入画布后图层数从 0 到 1，工具栏保持可见，截图留存于 `output/playwright/editor-overlay-model-regression-20260617.png`。
 - 2026-06-17 前端拆分第二十四阶段：新增 `useImageCanvasAssetCanvasBridge`，把删除素材清理画布图层、素材加入画布、素材 pointer 拖入画布 / 文件夹、画布 drag/drop 分流和文件拖入画布参数组装从主视图抽成素材到画布桥接 hook；主视图继续保留素材库事实、上传读取、工程资源持久化和历史触发。新增 hook 单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态；主视图从 1133 行降至 1086 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`；登录临时开发账号后 `画布背景设置` 是完整设置面板，包含当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，HEX 输入 `#ffffff` 后变为白色，按 Escape 关闭面板；登录后上传图片请求 `/api/editor/assets` 返回 200，素材库出现上传素材，`AI画布工具栏` 保持可见。
 - 2026-06-17 前端拆分第二十五阶段：新增 `ImageCanvasStageControllerModel` 和 `useImageCanvasStageController`，把舞台派生状态、生成 / 选中浮层位置、右键菜单目标、空白画布右键、图层右键和清空画布焦点从主视图抽出；主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机。新增模型和 hook 单测覆盖选中 / 生成锚定、右键菜单位置、显示 / 解锁判断、清空焦点和空白 / 图层右键菜单；主视图从 1086 行降至 993 行。验证命令：`npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx`、`npm run test -- src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts`、`npm run typecheck`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`，关闭登录后 `画布背景色` 打开完整 `画布背景设置` dialog，包含色相、自定义颜色、预设、HEX 和恢复默认；点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，`AI画布工具栏` 保持可见，截图留存于 `output/playwright/editor-stage-controller-smoke-20260617.png`。
+- 2026-06-17 前端拆分第二十六阶段：新增 `ImageCanvasTopbarView`，把返回项目入口、项目标题展示 / 重命名表单、下载画布素材按钮和导出状态提示从主视图抽出；主视图继续保留 chrome hook、项目持久化、导出工作流和实际导出副作用。新增组件单测覆盖返回入口、标题编辑入口、重命名提交 / 取消、导出按钮禁用 / 启用和导出状态提示；主视图从 993 行降至 905 行。验证命令：`npm run test -- src/components/image-editor/ImageCanvasTopbarView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 未登录直接显示 `账号入口`，顶栏返回项目入口、项目名、`画布` 标签和下载按钮均可见；关闭登录后打开 `画布背景设置`，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，`AI画布工具栏` 保持可见，截图留存于 `output/playwright/editor-topbar-smoke-20260617.png`。
--- a/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
+++ b/docs/technical/【前端架构】图片画布编辑器前端拆分计划-2026-06-17.md
@@ -219,6 +219,14 @@
  - 主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机，避免把跨工作流动作塞进单个 hook。
  - 本阶段主视图从 1086 行降至 993 行；后续若继续拆分，应优先考虑顶栏 / 项目标题区域或把侧栏图层右键入口并入同一舞台菜单控制层。

+## 第二十六阶段模块
+
+- `ImageCanvasTopbarView.tsx`
+  - 承载编辑器顶部栏视觉结构：返回项目入口、项目标题展示、项目标题重命名表单、下载画布素材按钮和导出状态提示。
+  - 主视图继续保留项目标题 / 重命名状态所属的 chrome hook、项目持久化、导出工作流和实际导出副作用；顶栏只负责表单事件和显示，不接管业务状态。
+  - 新增组件单测覆盖返回入口、标题编辑入口、重命名提交 / 取消、导出按钮禁用 / 启用和导出状态提示。
+  - 本阶段主视图从 993 行降至 905 行；后续可继续评估隐藏上传 input / 侧栏拖拽预览这类根级浮层是否值得抽为编辑器 shell 视图。
+
 ## 后续阶段

 - 后续可继续选择更高内聚的交互 workflow 或持久化边界，不再把生成链路继续拆成浅层 wrapper。
@@ -226,7 +234,7 @@

 ## 验证计划

- `npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts`
+- `npm run test -- src/components/image-editor/ImageCanvasTopbarView.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasAssetExportWorkflow.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx`
 - `npm run typecheck`
 - `npm run check:encoding`
 - `git diff --check`
--- a/src/components/image-editor/ImageCanvasEditorView.tsx
+++ b/src/components/image-editor/ImageCanvasEditorView.tsx
@@ -1,14 +1,11 @@
-import { Check, ChevronLeft, Download, Pencil, X } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

-import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
-import { PlatformTextField } from '../common/PlatformTextField';
 import { useAuthUi } from '../auth/AuthUiContext';
-import { EditorIconButton } from './ImageCanvasEditorPrimitives';
 import { ImageCanvasGenerationComposerView } from './ImageCanvasGenerationComposerView';
 import { ImageCanvasMetadataModalView } from './ImageCanvasMetadataModalView';
 import { ImageCanvasSidebarView } from './ImageCanvasSidebarView';
 import { ImageCanvasStageView } from './ImageCanvasStageView';
+import { ImageCanvasTopbarView } from './ImageCanvasTopbarView';
 import { resolveContextMenuPosition } from './ImageCanvasEditorModel';
 import {
  isCanvasGenerationComposerVisible,
@@ -731,108 +728,23 @@ export function ImageCanvasEditorView() {
      />

      <div className="image-canvas-editor__main">
-        <div className="image-canvas-editor__topbar">
-          <a
-            className="image-canvas-editor__project-back-button"
-            href="/project"
-            aria-label="返回项目页面"
-            title="返回项目"
-          >
-            <ChevronLeft className="h-4 w-4" aria-hidden="true" />
-          </a>
-          <div className="image-canvas-editor__title-block">
-            {isRenamingProject ? (
-              <form
-                className="image-canvas-editor__project-title-form"
-                onSubmit={(event) => {
-                  event.preventDefault();
-                  submitProjectRename(projectId);
-                }}
-              >
-                <PlatformTextField
-                  aria-label="项目名称"
-                  value={projectRenameValue}
-                  autoFocus
-                  disabled={isProjectRenameSaving}
-                  className="image-canvas-editor__project-title-input"
-                  onChange={(event) => {
-                    setProjectRenameValue(event.target.value);
-                    resetProjectRenameError();
-                  }}
-                  onKeyDown={(event) => {
-                    if (event.key === 'Escape') {
-                      event.preventDefault();
-                      cancelProjectRename();
-                    }
-                  }}
-                />
-                <EditorIconButton
-                  type="submit"
-                  label="保存项目名称"
-                  title="保存"
-                  icon={Check}
-                  disabled={isProjectRenameSaving}
-                />
-                <EditorIconButton
-                  label="取消修改项目名称"
-                  title="取消"
-                  icon={X}
-                  disabled={isProjectRenameSaving}
-                  onClick={cancelProjectRename}
-                />
-                {projectRenameError ? (
-                  <span
-                    className="image-canvas-editor__project-title-error"
-                    role="alert"
-                  >
-                    {projectRenameError}
-                  </span>
-                ) : null}
-              </form>
-            ) : (
-              <div className="image-canvas-editor__project-title-row">
-                <button
-                  type="button"
-                  className="image-canvas-editor__project-title-button"
-                  onDoubleClick={startProjectRename}
-                  aria-label={`编辑项目名称${projectTitle}`}
-                >
-                  <h1>{projectTitle}</h1>
-                </button>
-                <EditorIconButton
-                  className="image-canvas-editor__project-rename-button"
-                  label="编辑项目名称"
-                  title="编辑项目名称"
-                  icon={Pencil}
-                  onClick={startProjectRename}
-                />
-              </div>
-            )}
-            <span>画布</span>
-          </div>
-          <div className="image-canvas-editor__topbar-actions">
-            <EditorIconButton
-              label="下载画布素材"
-              title="下载画布素材"
-              icon={Download}
-              disabled={
-                isExportingAssets ||
-                !layers.some((layer) => layer.src.trim().length > 0)
-              }
-              onClick={() => void exportCanvasAssets()}
-            />
-            {assetExportStatus ? (
-              <PlatformStatusMessage
-                tone={assetExportStatus.tone}
-                surface="platform"
-                size="xs"
-                role={assetExportStatus.tone === 'error' ? 'alert' : 'status'}
-              >
-                {assetExportStatus.message}
-              </PlatformStatusMessage>
-            ) : null}
-          </div>
-        </div>
+        <ImageCanvasTopbarView
+          projectId={projectId}
+          projectTitle={projectTitle}
+          projectRenameValue={projectRenameValue}
+          isRenamingProject={isRenamingProject}
+          isProjectRenameSaving={isProjectRenameSaving}
+          projectRenameError={projectRenameError}
+          layers={layers}
+          assetExportStatus={assetExportStatus}
+          isExportingAssets={isExportingAssets}
+          setProjectRenameValue={setProjectRenameValue}
+          startProjectRename={startProjectRename}
+          cancelProjectRename={cancelProjectRename}
+          submitProjectRename={submitProjectRename}
+          resetProjectRenameError={resetProjectRenameError}
+          exportCanvasAssets={exportCanvasAssets}
+        />

        <ImageCanvasStageView
          canvasViewportRef={canvasViewportRef}
--- a/src/components/image-editor/ImageCanvasTopbarView.test.tsx
+++ b/src/components/image-editor/ImageCanvasTopbarView.test.tsx
@@ -0,0 +1,147 @@
+/* @vitest-environment jsdom */
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import { ImageCanvasTopbarView } from './ImageCanvasTopbarView';
+
+function createLayer(overrides: Partial<CanvasLayer> = {}): CanvasLayer {
+  const id = overrides.id ?? 'layer-a';
+  return {
+    id,
+    resourceId: `resource-${id}`,
+    title: id,
+    src: `data:image/png;base64,${id}`,
+    x: 0,
+    y: 0,
+    width: 320,
+    height: 180,
+    originalWidth: 320,
+    originalHeight: 180,
+    zIndex: 1,
+    sourceType: 'uploaded',
+    ...overrides,
+  };
+}
+
+function renderTopbar(
+  overrides: Partial<
+    Parameters<typeof ImageCanvasTopbarView>[0]
+  > = {},
+) {
+  const props: Parameters<typeof ImageCanvasTopbarView>[0] = {
+    projectId: 'project-a',
+    projectTitle: '默认项目',
+    projectRenameValue: '默认项目',
+    isRenamingProject: false,
+    isProjectRenameSaving: false,
+    projectRenameError: null,
+    layers: [],
+    assetExportStatus: null,
+    isExportingAssets: false,
+    setProjectRenameValue: vi.fn(),
+    startProjectRename: vi.fn(),
+    cancelProjectRename: vi.fn(),
+    submitProjectRename: vi.fn(),
+    resetProjectRenameError: vi.fn(),
+    exportCanvasAssets: vi.fn(),
+    ...overrides,
+  };
+
+  render(<ImageCanvasTopbarView {...props} />);
+
+  return props;
+}
+
+describe('ImageCanvasTopbarView', () => {
+  it('shows the project title and project gallery link', () => {
+    const props = renderTopbar();
+
+    expect(screen.getByRole('heading', { name: '默认项目' })).toBeTruthy();
+    expect(
+      screen.getByRole('link', { name: '返回项目页面' }).getAttribute('href'),
+    ).toBe('/project');
+
+    fireEvent.click(screen.getByRole('button', { name: '编辑项目名称' }));
+
+    expect(props.startProjectRename).toHaveBeenCalledTimes(1);
+  });
+
+  it('submits, resets, and cancels project rename edits', () => {
+    const props = renderTopbar({
+      isRenamingProject: true,
+      projectRenameValue: '草稿项目',
+      projectRenameError: '项目名称不能为空',
+    });
+
+    const input = screen.getByLabelText('项目名称');
+    fireEvent.change(input, { target: { value: '新项目' } });
+    fireEvent.click(screen.getByRole('button', { name: '保存项目名称' }));
+
+    expect(props.setProjectRenameValue).toHaveBeenCalledWith('新项目');
+    expect(props.resetProjectRenameError).toHaveBeenCalledTimes(1);
+    expect(props.submitProjectRename).toHaveBeenCalledWith('project-a');
+    expect(screen.getByRole('alert').textContent).toBe('项目名称不能为空');
+
+    fireEvent.keyDown(input, { key: 'Escape' });
+
+    expect(props.cancelProjectRename).toHaveBeenCalledTimes(1);
+  });
+
+  it('exports only when canvas has exportable layers and shows export status', () => {
+    const exportCanvasAssets = vi.fn();
+    const { rerender } = render(
+      <ImageCanvasTopbarView
+        projectId="project-a"
+        projectTitle="默认项目"
+        projectRenameValue="默认项目"
+        isRenamingProject={false}
+        isProjectRenameSaving={false}
+        projectRenameError={null}
+        layers={[]}
+        assetExportStatus={null}
+        isExportingAssets={false}
+        setProjectRenameValue={vi.fn()}
+        startProjectRename={vi.fn()}
+        cancelProjectRename={vi.fn()}
+        submitProjectRename={vi.fn()}
+        resetProjectRenameError={vi.fn()}
+        exportCanvasAssets={exportCanvasAssets}
+      />,
+    );
+
+    expect(
+      (screen.getByRole('button', { name: '下载画布素材' }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(true);
+
+    rerender(
+      <ImageCanvasTopbarView
+        projectId="project-a"
+        projectTitle="默认项目"
+        projectRenameValue="默认项目"
+        isRenamingProject={false}
+        isProjectRenameSaving={false}
+        projectRenameError={null}
+        layers={[createLayer()]}
+        assetExportStatus={{
+          tone: 'success',
+          message: '画布素材已导出',
+        }}
+        isExportingAssets={false}
+        setProjectRenameValue={vi.fn()}
+        startProjectRename={vi.fn()}
+        cancelProjectRename={vi.fn()}
+        submitProjectRename={vi.fn()}
+        resetProjectRenameError={vi.fn()}
+        exportCanvasAssets={exportCanvasAssets}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '下载画布素材' }));
+
+    expect(exportCanvasAssets).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole('status').textContent).toBe('画布素材已导出');
+  });
+});
--- a/src/components/image-editor/ImageCanvasTopbarView.tsx
+++ b/src/components/image-editor/ImageCanvasTopbarView.tsx
@@ -0,0 +1,149 @@
+import { Check, ChevronLeft, Download, Pencil, X } from 'lucide-react';
+
+import { PlatformStatusMessage } from '../common/PlatformStatusMessage';
+import { PlatformTextField } from '../common/PlatformTextField';
+import { EditorIconButton } from './ImageCanvasEditorPrimitives';
+import type { CanvasLayer } from './ImageCanvasEditorTypes';
+import type { AssetExportStatus } from './useImageCanvasAssetExportWorkflow';
+
+type ImageCanvasTopbarViewProps = {
+  projectId: string | null;
+  projectTitle: string;
+  projectRenameValue: string;
+  isRenamingProject: boolean;
+  isProjectRenameSaving: boolean;
+  projectRenameError: string | null;
+  layers: CanvasLayer[];
+  assetExportStatus: AssetExportStatus | null;
+  isExportingAssets: boolean;
+  setProjectRenameValue: (value: string) => void;
+  startProjectRename: () => void;
+  cancelProjectRename: () => void;
+  submitProjectRename: (projectId: string | null) => void;
+  resetProjectRenameError: () => void;
+  exportCanvasAssets: () => void | Promise<void>;
+};
+
+export function ImageCanvasTopbarView({
+  projectId,
+  projectTitle,
+  projectRenameValue,
+  isRenamingProject,
+  isProjectRenameSaving,
+  projectRenameError,
+  layers,
+  assetExportStatus,
+  isExportingAssets,
+  setProjectRenameValue,
+  startProjectRename,
+  cancelProjectRename,
+  submitProjectRename,
+  resetProjectRenameError,
+  exportCanvasAssets,
+}: ImageCanvasTopbarViewProps) {
+  const hasExportableLayer = layers.some(
+    (layer) => layer.src.trim().length > 0,
+  );
+
+  return (
+    <div className="image-canvas-editor__topbar">
+      <a
+        className="image-canvas-editor__project-back-button"
+        href="/project"
+        aria-label="返回项目页面"
+        title="返回项目"
+      >
+        <ChevronLeft className="h-4 w-4" aria-hidden="true" />
+      </a>
+      <div className="image-canvas-editor__title-block">
+        {isRenamingProject ? (
+          <form
+            className="image-canvas-editor__project-title-form"
+            onSubmit={(event) => {
+              event.preventDefault();
+              submitProjectRename(projectId);
+            }}
+          >
+            <PlatformTextField
+              aria-label="项目名称"
+              value={projectRenameValue}
+              autoFocus
+              disabled={isProjectRenameSaving}
+              className="image-canvas-editor__project-title-input"
+              onChange={(event) => {
+                setProjectRenameValue(event.target.value);
+                resetProjectRenameError();
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Escape') {
+                  event.preventDefault();
+                  cancelProjectRename();
+                }
+              }}
+            />
+            <EditorIconButton
+              type="submit"
+              label="保存项目名称"
+              title="保存"
+              icon={Check}
+              disabled={isProjectRenameSaving}
+            />
+            <EditorIconButton
+              label="取消修改项目名称"
+              title="取消"
+              icon={X}
+              disabled={isProjectRenameSaving}
+              onClick={cancelProjectRename}
+            />
+            {projectRenameError ? (
+              <span
+                className="image-canvas-editor__project-title-error"
+                role="alert"
+              >
+                {projectRenameError}
+              </span>
+            ) : null}
+          </form>
+        ) : (
+          <div className="image-canvas-editor__project-title-row">
+            <button
+              type="button"
+              className="image-canvas-editor__project-title-button"
+              onDoubleClick={startProjectRename}
+              aria-label={`编辑项目名称${projectTitle}`}
+            >
+              <h1>{projectTitle}</h1>
+            </button>
+            <EditorIconButton
+              className="image-canvas-editor__project-rename-button"
+              label="编辑项目名称"
+              title="编辑项目名称"
+              icon={Pencil}
+              onClick={startProjectRename}
+            />
+          </div>
+        )}
+        <span>画布</span>
+      </div>
+      <div className="image-canvas-editor__topbar-actions">
+        <EditorIconButton
+          label="下载画布素材"
+          title="下载画布素材"
+          icon={Download}
+          disabled={isExportingAssets || !hasExportableLayer}
+          onClick={() => void exportCanvasAssets()}
+        />
+        {assetExportStatus ? (
+          <PlatformStatusMessage
+            tone={assetExportStatus.tone}
+            surface="platform"
+            size="xs"
+            role={assetExportStatus.tone === 'error' ? 'alert' : 'status'}
+          >
+            {assetExportStatus.message}
+          </PlatformStatusMessage>
+        ) : null}
+      </div>
+    </div>
+  );
+}
--- a/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
+++ b/src/components/image-editor/useImageCanvasAssetExportWorkflow.ts
@@ -16,7 +16,7 @@ import {
  sanitizeExportFilePart,
 } from './ImageCanvasExportModel';

-type AssetExportStatus = {
+export type AssetExportStatus = {
  tone: 'info' | 'success' | 'error';
  message: string;
 };