Fix API response format mismatches and implement all remaining features: **API Integration Fixes:** - Fix ManipulationPanel to use `colors` instead of `results` from API responses - Fix gradient endpoint to use `gradient` array from API response - Fix color blindness simulator to use correct field names (`input`/`output` vs `original`/`simulated`) - Fix text color optimizer request field (`backgrounds` vs `background_colors`) - Fix method name casing: `simulateColorBlindness` (capital B) - Add palette generation endpoint integration **Type Definition Updates:** - Update GradientData to match API structure with `gradient` array - Update ColorBlindnessData to use `colors` with `input`/`output`/`difference_percentage` - Update TextColorData to use `colors` with `textcolor`/`wcag_aa`/`wcag_aaa` fields - Add PaletteGenerateRequest and PaletteGenerateData types **Completed Features:** - Harmony Palettes: Now uses dedicated `/palettes/generate` API endpoint - Simplified from 80 lines of manual color theory to single API call - Supports 6 harmony types: monochromatic, analogous, complementary, split-complementary, triadic, tetradic - Text Color Optimizer: Full implementation with WCAG compliance checking - Automatic black/white text color selection - Live preview with contrast ratios - AA/AAA compliance indicators - Color Blindness Simulator: Fixed and working - Shows difference percentage for each simulation - Side-by-side comparison view - Gradient Creator: Fixed to use correct API response structure - Batch Operations: Fixed to extract output colors correctly **UI Improvements:** - Enable all accessibility tool cards (remove "Coming Soon" badges) - Enable harmony palettes card - Add safety check for gradient state to prevent undefined errors All features now fully functional and properly integrated with Pastel API. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
269 lines
4.5 KiB
TypeScript
269 lines
4.5 KiB
TypeScript
// 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 ColorMixRequest {
|
|
colors: string[];
|
|
fraction: number;
|
|
colorspace?: 'rgb' | 'hsl' | 'hsv' | 'lab' | 'oklab' | 'lch' | 'oklch';
|
|
}
|
|
|
|
export interface ColorMixData {
|
|
results: Array<{
|
|
color1: string;
|
|
color2: string;
|
|
mixed: string;
|
|
}>;
|
|
}
|
|
|
|
export interface RandomColorsRequest {
|
|
count: number;
|
|
strategy?: 'vivid' | 'rgb' | 'gray' | 'lch';
|
|
}
|
|
|
|
export interface RandomColorsData {
|
|
colors: string[];
|
|
}
|
|
|
|
export interface DistinctColorsRequest {
|
|
count: number;
|
|
metric?: 'cie76' | 'ciede2000';
|
|
fixed_colors?: string[];
|
|
}
|
|
|
|
export interface DistinctColorsData {
|
|
colors: string[];
|
|
stats: {
|
|
min_distance: number;
|
|
avg_distance: number;
|
|
generation_time_ms: number;
|
|
};
|
|
}
|
|
|
|
export interface GradientRequest {
|
|
stops: string[];
|
|
count: number;
|
|
colorspace?: 'rgb' | 'hsl' | 'hsv' | 'lab' | 'oklab' | 'lch' | 'oklch';
|
|
}
|
|
|
|
export interface GradientData {
|
|
stops: string[];
|
|
count: number;
|
|
colorspace: string;
|
|
gradient: string[];
|
|
}
|
|
|
|
export interface ColorDistanceRequest {
|
|
color1: string;
|
|
color2: string;
|
|
metric: 'cie76' | 'ciede2000';
|
|
}
|
|
|
|
export interface ColorDistanceData {
|
|
color1: string;
|
|
color2: string;
|
|
distance: number;
|
|
metric: string;
|
|
}
|
|
|
|
export interface ColorSortRequest {
|
|
colors: string[];
|
|
order: 'hue' | 'brightness' | 'luminance' | 'chroma';
|
|
}
|
|
|
|
export interface ColorSortData {
|
|
sorted: string[];
|
|
}
|
|
|
|
export interface ColorBlindnessRequest {
|
|
colors: string[];
|
|
type: 'protanopia' | 'deuteranopia' | 'tritanopia';
|
|
}
|
|
|
|
export interface ColorBlindnessData {
|
|
type: string;
|
|
colors: Array<{
|
|
input: string;
|
|
output: string;
|
|
difference_percentage: number;
|
|
}>;
|
|
}
|
|
|
|
export interface TextColorRequest {
|
|
backgrounds: string[];
|
|
}
|
|
|
|
export interface TextColorData {
|
|
colors: Array<{
|
|
background: string;
|
|
textcolor: string;
|
|
contrast_ratio: number;
|
|
wcag_aa: boolean;
|
|
wcag_aaa: boolean;
|
|
}>;
|
|
}
|
|
|
|
export interface NamedColor {
|
|
name: string;
|
|
hex: string;
|
|
}
|
|
|
|
export interface NamedColorsData {
|
|
colors: NamedColor[];
|
|
}
|
|
|
|
export interface NamedColorSearchRequest {
|
|
query: string;
|
|
}
|
|
|
|
export interface NamedColorSearchData {
|
|
results: NamedColor[];
|
|
}
|
|
|
|
export interface HealthData {
|
|
status: string;
|
|
version: string;
|
|
}
|
|
|
|
export interface CapabilitiesData {
|
|
endpoints: string[];
|
|
formats: string[];
|
|
color_spaces: string[];
|
|
distance_metrics: string[];
|
|
colorblindness_types: string[];
|
|
}
|
|
|
|
export interface PaletteGenerateRequest {
|
|
base: string;
|
|
scheme: 'monochromatic' | 'analogous' | 'complementary' | 'split-complementary' | 'triadic' | 'tetradic';
|
|
}
|
|
|
|
export interface PaletteGenerateData {
|
|
base: string;
|
|
scheme: string;
|
|
palette: {
|
|
primary: string;
|
|
secondary: string[];
|
|
};
|
|
}
|