refactor: rename pastel app to color and update all references

lib/color/api/client.ts

@@ -0,0 +1,175 @@
+import type {
+  ApiResponse,
+  ColorInfoRequest,
+  ColorInfoData,
+  ConvertFormatRequest,
+  ConvertFormatData,
+  ColorManipulationRequest,
+  ColorManipulationData,
+  RandomColorsRequest,
+  RandomColorsData,
+  GradientRequest,
+  GradientData,
+  HealthData,
+  CapabilitiesData,
+  PaletteGenerateRequest,
+  PaletteGenerateData,
+} from './types';
+import { colorWASM } from './wasm-client';
+
+export class ColorAPIClient {
+  private baseURL: string;
+
+  constructor(baseURL?: string) {
+    // Use the Next.js API proxy route for runtime configuration
+    // This allows changing the backend API URL without rebuilding
+    this.baseURL = baseURL || '/api/color';
+  }
+
+  private async request<T>(
+    endpoint: string,
+    options?: RequestInit
+  ): Promise<ApiResponse<T>> {
+    // Endpoint already includes /api/v1 prefix on backend,
+    // but our proxy route expects paths after /api/v1/
+    const url = `${this.baseURL}${endpoint}`;
+
+    try {
+      const response = await fetch(url, {
+        ...options,
+        headers: {
+          'Content-Type': 'application/json',
+          ...options?.headers,
+        },
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        return {
+          success: false,
+          error: data.error || {
+            code: 'INTERNAL_ERROR',
+            message: 'An unknown error occurred',
+          },
+        };
+      }
+
+      return data;
+    } catch (error) {
+      return {
+        success: false,
+        error: {
+          code: 'NETWORK_ERROR',
+          message: error instanceof Error ? error.message : 'Network request failed',
+        },
+      };
+    }
+  }
+
+  // Color Information
+  async getColorInfo(request: ColorInfoRequest): Promise<ApiResponse<ColorInfoData>> {
+    return this.request<ColorInfoData>('/colors/info', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  // Format Conversion
+  async convertFormat(request: ConvertFormatRequest): Promise<ApiResponse<ConvertFormatData>> {
+    return this.request<ConvertFormatData>('/colors/convert', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  // Color Manipulation
+  async lighten(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/lighten', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  async darken(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/darken', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  async saturate(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/saturate', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  async desaturate(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/desaturate', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  async rotate(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/rotate', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  async complement(colors: string[]): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/complement', {
+      method: 'POST',
+      body: JSON.stringify({ colors }),
+    });
+  }
+
+  async grayscale(colors: string[]): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request<ColorManipulationData>('/colors/grayscale', {
+      method: 'POST',
+      body: JSON.stringify({ colors }),
+    });
+  }
+
+  // Color Generation
+  async generateRandom(request: RandomColorsRequest): Promise<ApiResponse<RandomColorsData>> {
+    return this.request<RandomColorsData>('/colors/random', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  async generateGradient(request: GradientRequest): Promise<ApiResponse<GradientData>> {
+    return this.request<GradientData>('/colors/gradient', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+
+  // System
+  async getHealth(): Promise<ApiResponse<HealthData>> {
+    return this.request<HealthData>('/health', {
+      method: 'GET',
+    });
+  }
+
+  async getCapabilities(): Promise<ApiResponse<CapabilitiesData>> {
+    return this.request<CapabilitiesData>('/capabilities', {
+      method: 'GET',
+    });
+  }
+
+  // Palette Generation
+  async generatePalette(request: PaletteGenerateRequest): Promise<ApiResponse<PaletteGenerateData>> {
+    return this.request<PaletteGenerateData>('/palettes/generate', {
+      method: 'POST',
+      body: JSON.stringify(request),
+    });
+  }
+}
+
+// Export singleton instance
+// Now using WASM client for zero-latency, offline-first color operations
+export const colorAPI = colorWASM;

lib/color/api/queries.ts

@@ -0,0 +1,177 @@
+'use client';
+
+import { useQuery, useMutation, UseQueryOptions } from '@tanstack/react-query';
+import { colorAPI } from './client';
+import {
+  ColorInfoRequest,
+  ColorInfoData,
+  ConvertFormatRequest,
+  ConvertFormatData,
+  ColorManipulationRequest,
+  ColorManipulationData,
+  RandomColorsRequest,
+  RandomColorsData,
+  GradientRequest,
+  GradientData,
+  PaletteGenerateRequest,
+  PaletteGenerateData,
+  HealthData,
+} from './types';
+
+// Color Information
+export const useColorInfo = (
+  request: ColorInfoRequest,
+  options?: Omit<UseQueryOptions<ColorInfoData>, 'queryKey' | 'queryFn'>
+) => {
+  return useQuery({
+    queryKey: ['colorInfo', request.colors],
+    queryFn: async () => {
+      const response = await colorAPI.getColorInfo(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+    enabled: request.colors.length > 0 && request.colors.every((c) => c.length > 0),
+    ...options,
+  });
+};
+
+// Format Conversion
+export const useConvertFormat = () => {
+  return useMutation({
+    mutationFn: async (request: ConvertFormatRequest) => {
+      const response = await colorAPI.convertFormat(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+// Color Manipulation
+export const useLighten = () => {
+  return useMutation({
+    mutationFn: async (request: ColorManipulationRequest) => {
+      const response = await colorAPI.lighten(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+export const useDarken = () => {
+  return useMutation({
+    mutationFn: async (request: ColorManipulationRequest) => {
+      const response = await colorAPI.darken(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+export const useSaturate = () => {
+  return useMutation({
+    mutationFn: async (request: ColorManipulationRequest) => {
+      const response = await colorAPI.saturate(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+export const useDesaturate = () => {
+  return useMutation({
+    mutationFn: async (request: ColorManipulationRequest) => {
+      const response = await colorAPI.desaturate(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+export const useRotate = () => {
+  return useMutation({
+    mutationFn: async (request: ColorManipulationRequest) => {
+      const response = await colorAPI.rotate(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+export const useComplement = () => {
+  return useMutation({
+    mutationFn: async (colors: string[]) => {
+      const response = await colorAPI.complement(colors);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+// Color Generation
+export const useGenerateRandom = () => {
+  return useMutation({
+    mutationFn: async (request: RandomColorsRequest) => {
+      const response = await colorAPI.generateRandom(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+export const useGenerateGradient = () => {
+  return useMutation({
+    mutationFn: async (request: GradientRequest) => {
+      const response = await colorAPI.generateGradient(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};
+
+// Health Check
+export const useHealth = () => {
+  return useQuery({
+    queryKey: ['health'],
+    queryFn: async () => {
+      const response = await colorAPI.getHealth();
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+    refetchInterval: 60000, // Check every minute
+  });
+};
+
+// Palette Generation
+export const useGeneratePalette = () => {
+  return useMutation({
+    mutationFn: async (request: PaletteGenerateRequest) => {
+      const response = await colorAPI.generatePalette(request);
+      if (!response.success) {
+        throw new Error(response.error.message);
+      }
+      return response.data;
+    },
+  });
+};

lib/color/api/types.ts

@@ -0,0 +1,169 @@
+// API Response Types
+export interface SuccessResponse<T> {
+  success: true;
+  data: T;
+}
+
+export interface ErrorResponse {
+  success: false;
+  error: {
+    code: string;
+    message: string;
+    details?: string;
+  };
+}
+
+export type ApiResponse<T> = SuccessResponse<T> | ErrorResponse;
+
+// Color Component Types
+export interface RGBColor {
+  r: number;
+  g: number;
+  b: number;
+  a?: number;
+}
+
+export interface HSLColor {
+  h: number;
+  s: number;
+  l: number;
+  a?: number;
+}
+
+export interface HSVColor {
+  h: number;
+  s: number;
+  v: number;
+}
+
+export interface LabColor {
+  l: number;
+  a: number;
+  b: number;
+}
+
+export interface OkLabColor {
+  l: number;
+  a: number;
+  b: number;
+}
+
+export interface LCHColor {
+  l: number;
+  c: number;
+  h: number;
+}
+
+export interface OkLCHColor {
+  l: number;
+  c: number;
+  h: number;
+}
+
+export interface CMYKColor {
+  c: number;
+  m: number;
+  y: number;
+  k: number;
+}
+
+// Color Information
+export interface ColorInfo {
+  input: string;
+  hex: string;
+  rgb: RGBColor;
+  hsl: HSLColor;
+  hsv: HSVColor;
+  lab: LabColor;
+  oklab: OkLabColor;
+  lch: LCHColor;
+  oklch: OkLCHColor;
+  cmyk: CMYKColor;
+  gray?: number;
+  brightness: number;
+  luminance: number;
+  is_light: boolean;
+  name?: string;
+  distance_to_named?: number;
+}
+
+// Request/Response Types for Each Endpoint
+export interface ColorInfoRequest {
+  colors: string[];
+}
+
+export interface ColorInfoData {
+  colors: ColorInfo[];
+}
+
+export interface ConvertFormatRequest {
+  colors: string[];
+  format: 'hex' | 'rgb' | 'hsl' | 'hsv' | 'lab' | 'oklab' | 'lch' | 'oklch' | 'cmyk' | 'gray';
+}
+
+export interface ConvertFormatData {
+  conversions: Array<{
+    input: string;
+    output: string;
+  }>;
+}
+
+export interface ColorManipulationRequest {
+  colors: string[];
+  amount: number;
+}
+
+export interface ColorManipulationData {
+  operation?: string;
+  amount?: number;
+  colors: Array<{
+    input: string;
+    output: string;
+  }>;
+}
+
+export interface RandomColorsRequest {
+  count: number;
+  strategy?: 'vivid' | 'rgb' | 'gray' | 'lch';
+}
+
+export interface RandomColorsData {
+  colors: string[];
+}
+
+export interface GradientRequest {
+  stops: string[];
+  count: number;
+}
+
+export interface GradientData {
+  stops: string[];
+  count: number;
+  gradient: string[];
+}
+
+export interface HealthData {
+  status: string;
+  version: string;
+}
+
+export interface CapabilitiesData {
+  endpoints: string[];
+  formats: string[];
+  distance_metrics: string[];
+  colorblindness_types: string[];
+}
+
+export interface PaletteGenerateRequest {
+  base: string;
+  scheme: 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
+}
+
+export interface PaletteGenerateData {
+  base: string;
+  scheme: string;
+  palette: {
+    primary: string;
+    secondary: string[];
+  };
+}

lib/color/api/wasm-client.ts

@@ -0,0 +1,350 @@
+import {
+  init,
+  parse_color,
+  lighten_color,
+  darken_color,
+  saturate_color,
+  desaturate_color,
+  rotate_hue,
+  complement_color,
+  generate_random_colors,
+  generate_gradient,
+  generate_palette,
+  version,
+} from '@valknarthing/pastel-wasm';
+import type {
+  ApiResponse,
+  ColorInfoRequest,
+  ColorInfoData,
+  ConvertFormatRequest,
+  ConvertFormatData,
+  ColorManipulationRequest,
+  ColorManipulationData,
+  RandomColorsRequest,
+  RandomColorsData,
+  GradientRequest,
+  GradientData,
+  HealthData,
+  CapabilitiesData,
+  PaletteGenerateRequest,
+  PaletteGenerateData,
+} from './types';
+
+// Initialize WASM module
+let wasmInitialized = false;
+
+async function ensureWasmInit() {
+  if (!wasmInitialized) {
+    init(); // Initialize panic hook
+    wasmInitialized = true;
+  }
+}
+
+/**
+ * WASM-based Color client
+ * Provides the same interface as ColorAPIClient but uses WebAssembly
+ * Zero network latency, works offline!
+ */
+export class ColorWASMClient {
+  constructor() {
+    // Initialize WASM eagerly
+    ensureWasmInit().catch(console.error);
+  }
+
+  private async request<T>(fn: () => T): Promise<ApiResponse<T>> {
+    try {
+      await ensureWasmInit();
+      const data = fn();
+      return {
+        success: true,
+        data,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: {
+          code: 'WASM_ERROR',
+          message: error instanceof Error ? error.message : 'Unknown error',
+        },
+      };
+    }
+  }
+
+  // Color Information
+  async getColorInfo(request: ColorInfoRequest): Promise<ApiResponse<ColorInfoData>> {
+    return this.request(() => {
+      const colors = request.colors.map((colorStr) => {
+        const info = parse_color(colorStr) as any;
+        return {
+          input: info.input,
+          hex: info.hex,
+          rgb: {
+            r: info.rgb[0],
+            g: info.rgb[1],
+            b: info.rgb[2],
+          },
+          hsl: {
+            h: info.hsl[0],
+            s: info.hsl[1],
+            l: info.hsl[2],
+          },
+          hsv: {
+            h: info.hsv[0],
+            s: info.hsv[1],
+            v: info.hsv[2],
+          },
+          lab: {
+            l: info.lab[0],
+            a: info.lab[1],
+            b: info.lab[2],
+          },
+          oklab: {
+            l: info.oklab ? info.oklab[0] : info.lab[0] / 100.0,
+            a: info.oklab ? info.oklab[1] : info.lab[1] / 100.0,
+            b: info.oklab ? info.oklab[2] : info.lab[2] / 100.0,
+          },
+          lch: {
+            l: info.lch[0],
+            c: info.lch[1],
+            h: info.lch[2],
+          },
+          oklch: {
+            l: info.oklch ? info.oklch[0] : info.lch[0] / 100.0,
+            c: info.oklch ? info.oklch[1] : info.lch[1] / 100.0,
+            h: info.oklch ? info.oklch[2] : info.lch[2],
+          },
+          cmyk: {
+            c: 0,
+            m: 0,
+            y: 0,
+            k: 0,
+          },
+          brightness: info.brightness,
+          luminance: info.luminance,
+          is_light: info.is_light,
+        };
+      });
+      return { colors };
+    });
+  }
+
+  // Format Conversion
+  async convertFormat(request: ConvertFormatRequest): Promise<ApiResponse<ConvertFormatData>> {
+    return this.request(() => {
+      const conversions = request.colors.map((colorStr) => {
+        const parsed = parse_color(colorStr) as any;
+        let output: string;
+
+        switch (request.format) {
+          case 'hex':
+            output = parsed.hex;
+            break;
+          case 'rgb':
+            output = `rgb(${parsed.rgb[0]}, ${parsed.rgb[1]}, ${parsed.rgb[2]})`;
+            break;
+          case 'hsl':
+            output = `hsl(${parsed.hsl[0].toFixed(1)}, ${(parsed.hsl[1] * 100).toFixed(1)}%, ${(parsed.hsl[2] * 100).toFixed(1)}%)`;
+            break;
+          case 'hsv':
+            output = `hsv(${parsed.hsv[0].toFixed(1)}, ${(parsed.hsv[1] * 100).toFixed(1)}%, ${(parsed.hsv[2] * 100).toFixed(1)}%)`;
+            break;
+          case 'lab':
+            output = `lab(${parsed.lab[0].toFixed(2)}, ${parsed.lab[1].toFixed(2)}, ${parsed.lab[2].toFixed(2)})`;
+            break;
+          case 'lch':
+            output = `lch(${parsed.lch[0].toFixed(2)}, ${parsed.lch[1].toFixed(2)}, ${parsed.lch[2].toFixed(2)})`;
+            break;
+          case 'oklab': {
+            const l = parsed.oklab ? parsed.oklab[0] : parsed.lab[0] / 100.0;
+            const a = parsed.oklab ? parsed.oklab[1] : parsed.lab[1] / 100.0;
+            const b = parsed.oklab ? parsed.oklab[2] : parsed.lab[2] / 100.0;
+            output = `oklab(${(l * 100).toFixed(1)}% ${a.toFixed(3)} ${b.toFixed(3)})`;
+            break;
+          }
+          case 'oklch': {
+            const l = parsed.oklch ? parsed.oklch[0] : parsed.lch[0] / 100.0;
+            const c = parsed.oklch ? parsed.oklch[1] : parsed.lch[1] / 100.0;
+            const h = parsed.oklch ? parsed.oklch[2] : parsed.lch[2];
+            output = `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(3)} ${h.toFixed(2)})`;
+            break;
+          }
+          default:
+            output = parsed.hex;
+        }
+
+        return {
+          input: colorStr,
+          output,
+        };
+      });
+      return { conversions };
+    });
+  }
+
+  // Color Manipulation
+  async lighten(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const colors = request.colors.map((colorStr) => ({
+        input: colorStr,
+        output: lighten_color(colorStr, request.amount),
+      }));
+      return { operation: 'lighten', amount: request.amount, colors };
+    });
+  }
+
+  async darken(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const colors = request.colors.map((colorStr) => ({
+        input: colorStr,
+        output: darken_color(colorStr, request.amount),
+      }));
+      return { operation: 'darken', amount: request.amount, colors };
+    });
+  }
+
+  async saturate(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const colors = request.colors.map((colorStr) => ({
+        input: colorStr,
+        output: saturate_color(colorStr, request.amount),
+      }));
+      return { operation: 'saturate', amount: request.amount, colors };
+    });
+  }
+
+  async desaturate(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const colors = request.colors.map((colorStr) => ({
+        input: colorStr,
+        output: desaturate_color(colorStr, request.amount),
+      }));
+      return { operation: 'desaturate', amount: request.amount, colors };
+    });
+  }
+
+  async rotate(request: ColorManipulationRequest): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const colors = request.colors.map((colorStr) => ({
+        input: colorStr,
+        output: rotate_hue(colorStr, request.amount),
+      }));
+      return { operation: 'rotate', amount: request.amount, colors };
+    });
+  }
+
+  async complement(colors: string[]): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const results = colors.map((colorStr) => ({
+        input: colorStr,
+        output: complement_color(colorStr),
+      }));
+      return { operation: 'complement', colors: results };
+    });
+  }
+
+  async grayscale(colors: string[]): Promise<ApiResponse<ColorManipulationData>> {
+    return this.request(() => {
+      const results = colors.map((colorStr) => ({
+        input: colorStr,
+        output: desaturate_color(colorStr, 1.0),
+      }));
+      return { operation: 'grayscale', colors: results };
+    });
+  }
+
+  // Color Generation
+  async generateRandom(request: RandomColorsRequest): Promise<ApiResponse<RandomColorsData>> {
+    return this.request(() => {
+      const vivid = request.strategy === 'vivid' || request.strategy === 'lch';
+      const colors = generate_random_colors(request.count, vivid);
+      return { colors };
+    });
+  }
+
+  async generateGradient(request: GradientRequest): Promise<ApiResponse<GradientData>> {
+    return this.request(() => {
+      if (request.stops.length < 2) {
+        throw new Error('At least 2 color stops are required');
+      }
+
+      // For 2 stops, use the WASM gradient function
+      if (request.stops.length === 2) {
+        const gradient = generate_gradient(request.stops[0], request.stops[1], request.count);
+        return {
+          stops: request.stops,
+          count: request.count,
+          gradient,
+        };
+      }
+
+      // For multiple stops, interpolate segments
+      const segments = request.stops.length - 1;
+      const colorsPerSegment = Math.floor(request.count / segments);
+      const gradient: string[] = [];
+
+      for (let i = 0; i < segments; i++) {
+        const segmentColors = generate_gradient(
+          request.stops[i],
+          request.stops[i + 1],
+          i === segments - 1 ? request.count - gradient.length : colorsPerSegment
+        );
+        gradient.push(...segmentColors.slice(0, -1)); // Avoid duplicates
+      }
+      gradient.push(request.stops[request.stops.length - 1]);
+
+      return {
+        stops: request.stops,
+        count: request.count,
+        gradient,
+      };
+    });
+  }
+
+  // System
+  async getHealth(): Promise<ApiResponse<HealthData>> {
+    return this.request(() => ({
+      status: 'healthy',
+      version: version(),
+    }));
+  }
+
+  async getCapabilities(): Promise<ApiResponse<CapabilitiesData>> {
+    return this.request(() => ({
+      endpoints: [
+        'colors/info',
+        'colors/convert',
+        'colors/lighten',
+        'colors/darken',
+        'colors/saturate',
+        'colors/desaturate',
+        'colors/rotate',
+        'colors/complement',
+        'colors/grayscale',
+        'colors/random',
+        'colors/gradient',
+        'colors/names',
+      ],
+      formats: ['hex', 'rgb', 'hsl', 'hsv', 'lab', 'lch'],
+      distance_metrics: ['cie76', 'ciede2000'],
+      colorblindness_types: ['protanopia', 'deuteranopia', 'tritanopia'],
+    }));
+  }
+
+  // Palette Generation
+  async generatePalette(request: PaletteGenerateRequest): Promise<ApiResponse<PaletteGenerateData>> {
+    return this.request(() => {
+      const colors = generate_palette(request.base, request.scheme);
+      return {
+        base: request.base,
+        scheme: request.scheme,
+        palette: {
+          primary: colors[0],
+          secondary: colors.slice(1),
+        },
+      };
+    });
+  }
+}
+
+// Export singleton instance
+export const colorWASM = new ColorWASMClient();

lib/color/index.ts

@@ -0,0 +1,3 @@
+export * from './api/queries';
+export * from './utils/color';
+export * from './utils/export';

lib/color/utils/color.ts

@@ -0,0 +1,13 @@
+/**
+ * Parse hex color to RGB
+ */
+export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}

lib/color/utils/export.ts

@@ -0,0 +1,83 @@
+/**
+ * Export utilities for color palettes
+ */
+
+export interface ExportColor {
+  name?: string;
+  value: string;
+}
+
+/**
+ * Export colors as CSS variables
+ */
+export function exportAsCSS(colors: ExportColor[]): string {
+  const variables = colors
+    .map((color, index) => {
+      const name = color.name || `color-${index + 1}`;
+      return `  --${name}: ${color.value};`;
+    })
+    .join('\n');
+
+  return `:root {\n${variables}\n}`;
+}
+
+/**
+ * Export colors as SCSS variables
+ */
+export function exportAsSCSS(colors: ExportColor[]): string {
+  return colors
+    .map((color, index) => {
+      const name = color.name || `color-${index + 1}`;
+      return `$${name}: ${color.value};`;
+    })
+    .join('\n');
+}
+
+/**
+ * Export colors as Tailwind config
+ */
+export function exportAsTailwind(colors: ExportColor[]): string {
+  const colorEntries = colors
+    .map((color, index) => {
+      const name = color.name || `color-${index + 1}`;
+      return `        '${name}': '${color.value}',`;
+    })
+    .join('\n');
+
+  return `module.exports = {\n  theme: {\n    extend: {\n      colors: {\n${colorEntries}\n      },\n    },\n  },\n};`;
+}
+
+/**
+ * Export colors as JSON
+ */
+export function exportAsJSON(colors: ExportColor[]): string {
+  const colorObjects = colors.map((color, index) => ({
+    name: color.name || `color-${index + 1}`,
+    value: color.value,
+  }));
+
+  return JSON.stringify({ colors: colorObjects }, null, 2);
+}
+
+/**
+ * Export colors as JavaScript array
+ */
+export function exportAsJavaScript(colors: ExportColor[]): string {
+  const colorArray = colors.map((c) => `'${c.value}'`).join(', ');
+  return `const colors = [${colorArray}];`;
+}
+
+/**
+ * Download text as file
+ */
+export function downloadAsFile(content: string, filename: string, mimeType: string = 'text/plain') {
+  const blob = new Blob([content], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}