src/App.tsx

@@ -51,6 +51,7 @@ const AvatarConsolePage = lazy(() => import("./features/digital-human/AvatarCons
 const DigitalHumanPage = lazy(() => import("./features/digital-human/DigitalHumanPage"));
 const DialogGeneratorPage = lazy(() => import("./features/dialog-generator/DialogGeneratorPage"));
 const EcommercePage = lazy(() => import("./features/ecommerce/EcommercePage"));
+const EcommerceTemplatesPage = lazy(() => import("./features/ecommerce/EcommerceTemplatesPage"));
 const HomePage = lazy(() => import("./features/home/HomePage"));
 const ImageWorkbenchPage = lazy(() => import("./features/image-workbench/ImageWorkbenchPage"));
 const MorePage = lazy(() => import("./features/more/MorePage"));
@@ -61,6 +62,7 @@ const ResolutionUpscalePage = lazy(() => import("./features/resolution-upscale/R
 const WatermarkRemovalPage = lazy(() => import("./features/watermark-removal/WatermarkRemovalPage"));
 const SubtitleRemovalPage = lazy(() => import("./features/subtitle-removal/SubtitleRemovalPage"));
 const ScriptTokensPage = lazy(() => import("./features/script-tokens/ScriptTokensPage"));
+const SizeTemplatePage = lazy(() => import("./features/size-template/SizeTemplatePage"));
 const TokenUsagePage = lazy(() => import("./features/script-tokens/TokenUsagePage"));
 const WorkbenchPage = lazy(() => import("./features/workbench/WorkbenchPage"));
 import type { WorkbenchResultActionPayload } from "./features/workbench/WorkbenchPage";
@@ -106,6 +108,8 @@ const VIEW_KEYS = new Set<WebViewKey>([
   "assets",
   "ecommerceHub",
   "ecommerce",
+  "ecommerceTemplates",
+  "sizeTemplate",
   "scriptTokens",
   "tokenUsage",
   "imageWorkbench",
@@ -137,6 +141,8 @@ const LEGACY_PAGE_STYLE_VIEWS = new Set<WebViewKey>([
   "assets",
   "ecommerce",
   "ecommerceHub",
+  "ecommerceTemplates",
+  "sizeTemplate",
   "digitalHuman",
   "characterMix",
   "more",
@@ -1176,6 +1182,30 @@ function App() {
       case "ecommerce":
       case "ecommerceHub":
         return null;
+      case "ecommerceTemplates":
+        return (
+          <EcommerceTemplatesPage
+            projects={projects}
+            onOpenMore={() => handleSetView("more")}
+            onOpenEcommerce={() => handleSetView("ecommerce")}
+            onSelectTemplate={(template) => {
+              setPendingEcommerceTemplate(template);
+              handleSetView("ecommerce");
+            }}
+            onStartCreate={handleStartTemplateCanvasCreate}
+            onOpenProject={handleOpenProject}
+            onDeleteProject={handleDeleteProject}
+          />
+        );
+      case "sizeTemplate":
+        return (
+          <SizeTemplatePage
+            isAuthenticated={Boolean(session)}
+            onOpenMore={() => handleSetView("more")}
+            onOpenEcommerce={() => handleSetView("ecommerce")}
+            onSelectView={handleSetView}
+          />
+        );
       case "digitalHuman":
         return (
           <DigitalHumanPage

src/features/ecommerce/EcommercePage.tsx

@@ -14,6 +14,7 @@ import {
 } from "@ant-design/icons";
 import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
 import "../../styles/pages/ecommerce.css";
+import "../../styles/pages/local-theme-parity.css";
 import { ossAssets } from "../../data/ossAssets";
 import { EcommerceProgressBar } from "./EcommerceProgressBar";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";

src/features/ecommerce/EcommerceTemplatesPage.tsx

@@ -10,6 +10,7 @@ import {
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import "../../styles/pages/image-workbench.css";
 import "../../styles/pages/ecommerce.css";
+import "../../styles/pages/local-theme-parity.css";
 import type { WebProjectSummary } from "../../types";
 import { useDebounce } from "../../hooks/useDebounce";
 import { templateCarouselCases, templateCases, templateCategories, type TemplateCase } from "./ecommerceTemplates";

src/features/size-template/SizeTemplatePage.tsx

@@ -9,7 +9,9 @@ import {
 import { useEffect, useMemo, useRef, useState, type ChangeEvent, type DragEvent } from "react";
 import type { WebViewKey } from "../../types";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "../ecommerce/ImageMentionMenu";
+import "../../styles/pages/ecommerce.css";
 import "../../styles/pages/size-template.css";
+import "../../styles/pages/local-theme-parity.css";
 
 interface SizeTemplatePageProps {
   isAuthenticated?: boolean;

src/styles/index.css

@@ -9,4 +9,3 @@
 @import "./components/page-transition.css";
 @import "./components/motion.css";
 @import "./themes/dark-green.css";
-@import "./pages/local-theme-parity.css";