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

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} />
+      ))}
+    </>
+  );
+}