基本完成自动色板生成功能。

src/page-components/auto-palette/PaletteColors.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useColorFunction } from '../../ColorFunctionContext';
+import { FlexColorStand } from '../../components/FlexColorStand';
+
+type PaletteColorsProps = {
+  color: string;
+  swatchAmount: number;
+  referenceBias: number;
+  useReference: boolean;
+  min: number;
+  max: number;
+  copyMode: 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
+};
+
+export function PaletteColors({
+  color = '000000',
+  swatchAmount,
+  referenceBias,
+  useReference,
+  min,
+  max,
+  copyMode,
+}: PaletteColorsProps) {
+  const { colorFn } = useColorFunction();
+  const colors = useMemo(() => {
+    if (!colorFn) {
+      return Array.from({ length: swatchAmount }, () => color);
+    }
+    try {
+      if (!useReference) {
+        return colorFn.generate_palette_from_color(color, swatchAmount, min, max);
+      } else {
+        return colorFn.generate_palette_from_color(
+          color,
+          swatchAmount,
+          min,
+          max,
+          useReference,
+          referenceBias,
+        );
+      }
+    } catch (e) {
+      console.error('[Generate Auto Palette]', e);
+    }
+    return Array.from({ length: swatchAmount }, () => color);
+  }, [color, swatchAmount, referenceBias, useReference, min, max]);
+
+  return (
+    <>
+      {colors.map((c, index) => (
+        <FlexColorStand key={`${c}-${index}`} color={c} valueMode={copyMode} />
+      ))}
+    </>
+  );
+}

src/pages/Palette.module.css

@@ -43,5 +43,13 @@
       gap: var(--spacing-s);
       font-size: var(--font-size-s);
     }
+    .colors_booth {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: stretch;
+      gap: var(--spacing-xs);
+      min-height: 12em;
+    }
   }
 }

src/pages/Palette.tsx

@@ -7,6 +7,7 @@ import { Labeled } from '../components/Labeled';
 import { LabeledPicker } from '../components/LabeledPicker';
 import { ScrollArea } from '../components/ScrollArea';
 import { Switch } from '../components/Switch';
+import { PaletteColors } from '../page-components/auto-palette/PaletteColors';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Palette.module.css';
 
@@ -53,14 +54,14 @@ export function AutomaticPalette() {
               <LabeledPicker
                 title="Swatch Amount"
                 min={3}
-                max={15}
+                max={12}
                 step={1}
                 value={swatchAmount}
                 onChange={(value) => setSwatchAmount(value)}
               />
               <LabeledPicker
                 title="Reference Bias"
-                min={0}
+                min={-maxBias}
                 max={maxBias}
                 step={1}
                 value={referenceBias}
@@ -89,6 +90,17 @@ export function AutomaticPalette() {
           </aside>
           <div className={styles.palette_content}>
             <h5>Generated Palette</h5>
+            <div className={styles.colors_booth}>
+              <PaletteColors
+                color={selectedColor}
+                swatchAmount={swatchAmount}
+                min={minLightness / 100}
+                max={maxLightness / 100}
+                useReference={useReferenceColor}
+                referenceBias={referenceBias}
+                copyMode={mode}
+              />
+            </div>
             <div className={styles.color_value_mode}>
               <label>Copy color value in</label>
               <HSegmentedControl