From 7bfe9a762049f974604018e812a303bc49b9fea6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Sat, 8 Feb 2025 15:17:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90M3=20Scheme?=
 =?UTF-8?q?=E7=9A=84=E7=94=9F=E6=88=90=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/material-3-scheme.ts                         |  2 +-
 src/page-components/scheme/M3Scheme.tsx          |  8 ++++++--
 src/page-components/scheme/m3-scheme/Builder.tsx | 16 ++++++++++++++--
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/material-3-scheme.ts b/src/material-3-scheme.ts
index a2ba7b3..0d33e03 100644
--- a/src/material-3-scheme.ts
+++ b/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 = {
diff --git a/src/page-components/scheme/M3Scheme.tsx b/src/page-components/scheme/M3Scheme.tsx
index 6dc9485..820c7dd 100644
--- a/src/page-components/scheme/M3Scheme.tsx
+++ b/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} />}
     </>
   );
diff --git a/src/page-components/scheme/m3-scheme/Builder.tsx b/src/page-components/scheme/m3-scheme/Builder.tsx
index fbbd462..83b1145 100644
--- a/src/page-components/scheme/m3-scheme/Builder.tsx
+++ b/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];