基本完成M3 Scheme的生成功能。

src/material-3-scheme.ts

@@ -35,7 +35,7 @@ export type Baseline = {
   outline_variant: string;
   scrim: string;
   shadow: string;
-  customs: Map<string, ColorSet>;
+  customs: Record<string, ColorSet>;
 };
 
 export type MaterialDesign3Scheme = {

src/page-components/scheme/M3Scheme.tsx

@@ -3,6 +3,8 @@ import { useState } from 'react';
 import { Tab } from '../../components/Tab';
 import { MaterialDesign3SchemeStorage } from '../../material-3-scheme';
 import { SchemeExport } from './Export';
+import { M3SchemeBuilder } from './m3-scheme/Builder';
+import { M3SchemePreview } from './m3-scheme/Preview';
 
 const tabOptions = [
   { title: 'Overview', id: 'overview' },
@@ -22,8 +24,10 @@ export function M3Scheme({ scheme }: M3SchemeProps) {
   return (
     <>
       <Tab tabs={tabOptions} activeTab={activeTab} onActive={setActiveTab} />
-      {isEqual(activeTab, 'overview') && <div>Preview</div>}
-      {isEqual(activeTab, 'builder') && <div>Builder</div>}
+      {isEqual(activeTab, 'overview') && <M3SchemePreview scheme={scheme} />}
+      {isEqual(activeTab, 'builder') && (
+        <M3SchemeBuilder scheme={scheme} onBuildCompleted={() => setActiveTab('overview')} />
+      )}
       {isEqual(activeTab, 'export') && <SchemeExport scheme={scheme} />}
     </>
   );

src/page-components/scheme/m3-scheme/Builder.tsx

@@ -3,9 +3,10 @@ import { useActionState, useCallback, useMemo, useState } from 'react';
 import { useColorFunction } from '../../../ColorFunctionContext';
 import { FloatColorPicker } from '../../../components/FloatcolorPicker';
 import { ScrollArea } from '../../../components/ScrollArea';
-import { MaterialDesign3SchemeStorage } from '../../../material-3-scheme';
+import { MaterialDesign3Scheme, MaterialDesign3SchemeStorage } from '../../../material-3-scheme';
 import { SchemeContent } from '../../../models';
 import { useUpdateScheme } from '../../../stores/schemes';
+import { mapToObject } from '../../../utls';
 import { ColorEntry, IdenticalColorEntry } from '../ColorEntry';
 import styles from './Builder.module.css';
 
@@ -68,7 +69,18 @@ export function M3SchemeBuilder({ scheme, onBuildCompleted }: M3SchemeBuilderPro
           error: errorColor as string,
           custom_colors: customColors,
         };
-        prev.schemeStorage.scheme = generatedScheme[0];
+        prev.schemeStorage.scheme = {
+          white: generatedScheme[0].white,
+          black: generatedScheme[0].black,
+          light_baseline: {
+            ...generatedScheme[0].light_baseline,
+            customs: mapToObject(generatedScheme[0].light_baseline.customs),
+          },
+          dark_baseline: {
+            ...generatedScheme[0].dark_baseline,
+            customs: mapToObject(generatedScheme[0].dark_baseline.customs),
+          },
+        } as MaterialDesign3Scheme;
         prev.schemeStorage.cssVariables = generatedScheme[1];
         prev.schemeStorage.scssVariables = generatedScheme[2];
         prev.schemeStorage.jsVariables = generatedScheme[3];