Files
pastel-ui/lib/api/types.ts

269 lines
4.5 KiB
TypeScript
Raw Normal View History

feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
// 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 {
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
operation?: string;
amount?: number;
colors: Array<{
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
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 {
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
stops: string[];
count: number;
colorspace: string;
gradient: string[];
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
}
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 {
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
type: string;
colors: Array<{
input: string;
output: string;
difference_percentage: number;
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
}>;
}
export interface TextColorRequest {
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
backgrounds: string[];
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
}
export interface TextColorData {
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
colors: Array<{
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
background: string;
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
textcolor: string;
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
contrast_ratio: number;
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
wcag_aa: boolean;
wcag_aaa: boolean;
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
}>;
}
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[];
}
fix: correct API integration and complete missing features 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>
2025-11-07 14:33:38 +01:00
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[];
};
}