valknar/kit-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify pastel application into single playground and remove standalone pages

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-26 12:07:21 +01:00
parent 225a9ad7fb
commit 061ea1d806
21 changed files with 519 additions and 2127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
lib/pastel/api/client.ts
View File

@@ -6,25 +6,10 @@ import type {
ConvertFormatData,
ColorManipulationRequest,
ColorManipulationData,
ColorMixRequest,
ColorMixData,
RandomColorsRequest,
RandomColorsData,
DistinctColorsRequest,
DistinctColorsData,
GradientRequest,
GradientData,
ColorDistanceRequest,
ColorDistanceData,
ColorSortRequest,
ColorSortData,
ColorBlindnessRequest,
ColorBlindnessData,
TextColorRequest,
TextColorData,
NamedColorsData,
NamedColorSearchRequest,
NamedColorSearchData,
HealthData,
CapabilitiesData,
PaletteGenerateRequest,
@@ -148,13 +133,6 @@ export class PastelAPIClient {
});
}
async mix(request: ColorMixRequest): Promise<ApiResponse<ColorMixData>> {
return this.request<ColorMixData>('/colors/mix', {
method: 'POST',
body: JSON.stringify(request),
});
}
// Color Generation
async generateRandom(request: RandomColorsRequest): Promise<ApiResponse<RandomColorsData>> {
return this.request<RandomColorsData>('/colors/random', {
@@ -163,13 +141,6 @@ export class PastelAPIClient {
});
}
async generateDistinct(request: DistinctColorsRequest): Promise<ApiResponse<DistinctColorsData>> {
return this.request<DistinctColorsData>('/colors/distinct', {
method: 'POST',
body: JSON.stringify(request),
});
}
async generateGradient(request: GradientRequest): Promise<ApiResponse<GradientData>> {
return this.request<GradientData>('/colors/gradient', {
method: 'POST',
@@ -177,50 +148,6 @@ export class PastelAPIClient {
});
}
// Color Analysis
async calculateDistance(request: ColorDistanceRequest): Promise<ApiResponse<ColorDistanceData>> {
return this.request<ColorDistanceData>('/colors/distance', {
method: 'POST',
body: JSON.stringify(request),
});
}
async sortColors(request: ColorSortRequest): Promise<ApiResponse<ColorSortData>> {
return this.request<ColorSortData>('/colors/sort', {
method: 'POST',
body: JSON.stringify(request),
});
}
// Accessibility
async simulateColorBlindness(request: ColorBlindnessRequest): Promise<ApiResponse<ColorBlindnessData>> {
return this.request<ColorBlindnessData>('/colors/colorblind', {
method: 'POST',
body: JSON.stringify(request),
});
}
async getTextColor(request: TextColorRequest): Promise<ApiResponse<TextColorData>> {
return this.request<TextColorData>('/colors/textcolor', {
method: 'POST',
body: JSON.stringify(request),
});
}
// Named Colors
async getNamedColors(): Promise<ApiResponse<NamedColorsData>> {
return this.request<NamedColorsData>('/colors/names', {
method: 'GET',
});
}
async searchNamedColors(request: NamedColorSearchRequest): Promise<ApiResponse<NamedColorSearchData>> {
return this.request<NamedColorSearchData>('/colors/names/search', {
method: 'POST',
body: JSON.stringify(request),
});
}
// System
async getHealth(): Promise<ApiResponse<HealthData>> {
return this.request<HealthData>('/health', {

76
lib/pastel/api/queries.ts
View File

@@ -2,28 +2,19 @@
import { useQuery, useMutation, UseQueryOptions } from '@tanstack/react-query';
import { pastelAPI } from './client';
import type {
import {
ColorInfoRequest,
ColorInfoData,
ConvertFormatRequest,
ConvertFormatData,
ColorManipulationRequest,
ColorManipulationData,
ColorMixRequest,
ColorMixData,
RandomColorsRequest,
RandomColorsData,
DistinctColorsRequest,
DistinctColorsData,
GradientRequest,
GradientData,
ColorBlindnessRequest,
PaletteGenerateRequest,
PaletteGenerateData,
ColorBlindnessData,
TextColorRequest,
TextColorData,
NamedColorsData,
HealthData,
} from './types';
@@ -132,18 +123,6 @@ export const useComplement = () => {
});
};
export const useMixColors = () => {
return useMutation({
mutationFn: async (request: ColorMixRequest) => {
const response = await pastelAPI.mix(request);
if (!response.success) {
throw new Error(response.error.message);
}
return response.data;
},
});
};
// Color Generation
export const useGenerateRandom = () => {
return useMutation({
@@ -157,18 +136,6 @@ export const useGenerateRandom = () => {
});
};
export const useGenerateDistinct = () => {
return useMutation({
mutationFn: async (request: DistinctColorsRequest) => {
const response = await pastelAPI.generateDistinct(request);
if (!response.success) {
throw new Error(response.error.message);
}
return response.data;
},
});
};
export const useGenerateGradient = () => {
return useMutation({
mutationFn: async (request: GradientRequest) => {
@@ -181,47 +148,6 @@ export const useGenerateGradient = () => {
});
};
// Color Blindness Simulation
export const useSimulateColorBlindness = () => {
return useMutation({
mutationFn: async (request: ColorBlindnessRequest) => {
const response = await pastelAPI.simulateColorBlindness(request);
if (!response.success) {
throw new Error(response.error.message);
}
return response.data;
},
});
};
// Text Color Optimizer
export const useTextColor = () => {
return useMutation({
mutationFn: async (request: TextColorRequest) => {
const response = await pastelAPI.getTextColor(request);
if (!response.success) {
throw new Error(response.error.message);
}
return response.data;
},
});
};
// Named Colors
export const useNamedColors = () => {
return useQuery({
queryKey: ['namedColors'],
queryFn: async () => {
const response = await pastelAPI.getNamedColors();
if (!response.success) {
throw new Error(response.error.message);
}
return response.data;
},
staleTime: Infinity, // Named colors never change
});
};
// Health Check
export const useHealth = () => {
return useQuery({

92
lib/pastel/api/types.ts
View File

@@ -122,19 +122,6 @@ export interface ColorManipulationData {
}>;
}
export interface ColorMixRequest {
colors: string[];
fraction: number;
}
export interface ColorMixData {
results: Array<{
color1: string;
color2: string;
mixed: string;
}>;
}
export interface RandomColorsRequest {
count: number;
strategy?: 'vivid' | 'rgb' | 'gray' | 'lch';
@@ -144,16 +131,6 @@ export interface RandomColorsData {
colors: string[];
}
export interface DistinctColorsRequest {
count: number;
metric?: 'cie76' | 'ciede2000';
fixed_colors?: string[];
}
export interface DistinctColorsData {
colors: string[];
}
export interface GradientRequest {
stops: string[];
count: number;
@@ -165,73 +142,6 @@ export interface GradientData {
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;
@@ -246,7 +156,7 @@ export interface CapabilitiesData {
export interface PaletteGenerateRequest {
base: string;
scheme: 'monochromatic' | 'analogous' | 'complementary' | 'split-complementary' | 'triadic' | 'tetradic';
scheme: 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
}
export interface PaletteGenerateData {

170
lib/pastel/api/wasm-client.ts
View File

@@ -7,18 +7,9 @@ import {
desaturate_color,
rotate_hue,
complement_color,
mix_colors,
get_text_color,
calculate_contrast,
simulate_protanopia,
simulate_deuteranopia,
simulate_tritanopia,
color_distance,
generate_random_colors,
generate_gradient,
generate_palette,
get_all_named_colors,
search_named_colors,
version,
} from '@valknarthing/pastel-wasm';
import type {
@@ -29,25 +20,10 @@ import type {
ConvertFormatData,
ColorManipulationRequest,
ColorManipulationData,
ColorMixRequest,
ColorMixData,
RandomColorsRequest,
RandomColorsData,
DistinctColorsRequest,
DistinctColorsData,
GradientRequest,
GradientData,
ColorDistanceRequest,
ColorDistanceData,
ColorSortRequest,
ColorSortData,
ColorBlindnessRequest,
ColorBlindnessData,
TextColorRequest,
TextColorData,
NamedColorsData,
NamedColorSearchRequest,
NamedColorSearchData,
HealthData,
CapabilitiesData,
PaletteGenerateRequest,
@@ -98,7 +74,7 @@ export class PastelWASMClient {
async getColorInfo(request: ColorInfoRequest): Promise<ApiResponse<ColorInfoData>> {
return this.request(() => {
const colors = request.colors.map((colorStr) => {
const info = parse_color(colorStr);
const info = parse_color(colorStr) as any;
return {
input: info.input,
hex: info.hex,
@@ -123,9 +99,9 @@ export class PastelWASMClient {
b: info.lab[2],
},
oklab: {
l: info.lab[0] / 100.0,
a: info.lab[1] / 100.0,
b: info.lab[2] / 100.0,
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],
@@ -133,9 +109,9 @@ export class PastelWASMClient {
h: info.lch[2],
},
oklch: {
l: info.lch[0] / 100.0,
c: info.lch[1] / 100.0,
h: info.lch[2],
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,
@@ -156,7 +132,7 @@ export class PastelWASMClient {
async convertFormat(request: ConvertFormatRequest): Promise<ApiResponse<ConvertFormatData>> {
return this.request(() => {
const conversions = request.colors.map((colorStr) => {
const parsed = parse_color(colorStr);
const parsed = parse_color(colorStr) as any;
let output: string;
switch (request.format) {
@@ -178,6 +154,20 @@ export class PastelWASMClient {
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;
}
@@ -262,20 +252,6 @@ export class PastelWASMClient {
});
}
async mix(request: ColorMixRequest): Promise<ApiResponse<ColorMixData>> {
return this.request(() => {
// Mix pairs of colors
const results = [];
for (let i = 0; i < request.colors.length - 1; i += 2) {
const color1 = request.colors[i];
const color2 = request.colors[i + 1];
const mixed = mix_colors(color1, color2, request.fraction);
results.push({ color1, color2, mixed });
}
return { results };
});
}
// Color Generation
async generateRandom(request: RandomColorsRequest): Promise<ApiResponse<RandomColorsData>> {
return this.request(() => {
@@ -285,17 +261,6 @@ export class PastelWASMClient {
});
}
async generateDistinct(request: DistinctColorsRequest): Promise<ApiResponse<DistinctColorsData>> {
return this.request(() => {
// Note: WASM version doesn't support distinct colors with simulated annealing yet
// Fall back to vivid random colors
const colors = generate_random_colors(request.count, true);
return {
colors,
};
});
}
async generateGradient(request: GradientRequest): Promise<ApiResponse<GradientData>> {
return this.request(() => {
if (request.stops.length < 2) {
@@ -335,93 +300,6 @@ export class PastelWASMClient {
});
}
// Color Analysis
async calculateDistance(request: ColorDistanceRequest): Promise<ApiResponse<ColorDistanceData>> {
return this.request(() => {
const useCiede2000 = request.metric === 'ciede2000';
const distance = color_distance(request.color1, request.color2, useCiede2000);
return {
color1: request.color1,
color2: request.color2,
distance,
metric: request.metric,
};
});
}
async sortColors(request: ColorSortRequest): Promise<ApiResponse<ColorSortData>> {
return this.request(() => {
// Note: WASM version doesn't support sorting yet
// Return colors as-is for now
return { sorted: request.colors };
});
}
// Accessibility
async simulateColorBlindness(request: ColorBlindnessRequest): Promise<ApiResponse<ColorBlindnessData>> {
return this.request(() => {
const colors = request.colors.map((colorStr) => {
let output: string;
switch (request.type) {
case 'protanopia':
output = simulate_protanopia(colorStr);
break;
case 'deuteranopia':
output = simulate_deuteranopia(colorStr);
break;
case 'tritanopia':
output = simulate_tritanopia(colorStr);
break;
default:
output = colorStr;
}
const distance = color_distance(colorStr, output, true);
return {
input: colorStr,
output,
difference_percentage: (distance / 100.0) * 100.0,
};
});
return { type: request.type, colors };
});
}
async getTextColor(request: TextColorRequest): Promise<ApiResponse<TextColorData>> {
return this.request(() => {
const colors = request.backgrounds.map((bg) => {
const textColor = get_text_color(bg);
const contrastRatio = calculate_contrast(bg, textColor);
return {
background: bg,
textcolor: textColor,
contrast_ratio: contrastRatio,
wcag_aa: contrastRatio >= 4.5,
wcag_aaa: contrastRatio >= 7.0,
};
});
return { colors };
});
}
// Named Colors
async getNamedColors(): Promise<ApiResponse<NamedColorsData>> {
return this.request(() => {
const colors = get_all_named_colors();
return { colors };
});
}
async searchNamedColors(request: NamedColorSearchRequest): Promise<ApiResponse<NamedColorSearchData>> {
return this.request(() => {
const results = search_named_colors(request.query);
return { results };
});
}
// System
async getHealth(): Promise<ApiResponse<HealthData>> {
return this.request(() => ({
@@ -442,12 +320,8 @@ export class PastelWASMClient {
'colors/rotate',
'colors/complement',
'colors/grayscale',
'colors/mix',
'colors/random',
'colors/gradient',
'colors/colorblind',
'colors/textcolor',
'colors/distance',
'colors/names',
],
formats: ['hex', 'rgb', 'hsl', 'hsv', 'lab', 'lch'],

1
lib/pastel/index.ts
View File

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

68
lib/pastel/stores/historyStore.ts
View File

@@ -1,68 +0,0 @@
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
export interface ColorHistoryEntry {
color: string;
timestamp: number;
}
interface ColorHistoryState {
history: ColorHistoryEntry[];
addColor: (color: string) => void;
removeColor: (color: string) => void;
clearHistory: () => void;
getRecent: (limit?: number) => ColorHistoryEntry[];
}
/**
* Color history store with localStorage persistence
*
* Tracks up to 50 most recent colors with timestamps
* Automatically removes duplicates (keeps most recent)
* Persists across browser sessions
*/
export const useColorHistory = create<ColorHistoryState>()(
persist(
(set, get) => ({
history: [],
addColor: (color) => {
const normalizedColor = color.toLowerCase();
set((state) => {
// Remove existing entry if present
const filtered = state.history.filter(
(entry) => entry.color.toLowerCase() !== normalizedColor
);
// Add new entry at the beginning
const newHistory = [
{ color: normalizedColor, timestamp: Date.now() },
...filtered,
].slice(0, 50); // Keep only 50 most recent
return { history: newHistory };
});
},
removeColor: (color) => {
const normalizedColor = color.toLowerCase();
set((state) => ({
history: state.history.filter(
(entry) => entry.color.toLowerCase() !== normalizedColor
),
}));
},
clearHistory: () => set({ history: [] }),
getRecent: (limit = 10) => {
const { history } = get();
return history.slice(0, limit);
},
}),
{
name: 'pastel-color-history',
storage: createJSONStorage(() => localStorage),
}
)
);

44
lib/pastel/utils/color.ts
View File

@@ -1,30 +1,3 @@
/**
* Calculate relative luminance of a color
* Based on WCAG 2.1 specification
*/
export function getRelativeLuminance(r: number, g: number, b: number): number {
const [rs, gs, bs] = [r, g, b].map((c) => {
const sRGB = c / 255;
return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
});
return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}
/**
* Calculate contrast ratio between two colors
* Returns ratio from 1 to 21
*/
export function getContrastRatio(
fg: { r: number; g: number; b: number },
bg: { r: number; g: number; b: number }
): number {
const l1 = getRelativeLuminance(fg.r, fg.g, fg.b);
const l2 = getRelativeLuminance(bg.r, bg.g, bg.b);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}
/**
* Parse hex color to RGB
*/
@@ -38,20 +11,3 @@ export function hexToRgb(hex: string): { r: number; g: number; b: number } | nul
}
: null;
}
/**
* Check if a contrast ratio meets WCAG standards
*/
export function checkWCAGCompliance(ratio: number) {
return {
aa: {
normalText: ratio >= 4.5,
largeText: ratio >= 3,
ui: ratio >= 3,
},
aaa: {
normalText: ratio >= 7,
largeText: ratio >= 4.5,
},
};
}

12
lib/pastel/utils/export.ts
View File

@@ -4,7 +4,7 @@
export interface ExportColor {
name?: string;
hex: string;
value: string;
}
/**
@@ -14,7 +14,7 @@ export function exportAsCSS(colors: ExportColor[]): string {
const variables = colors
.map((color, index) => {
const name = color.name || `color-${index + 1}`;
return ` --${name}: ${color.hex};`;
return ` --${name}: ${color.value};`;
})
.join('\n');
@@ -28,7 +28,7 @@ export function exportAsSCSS(colors: ExportColor[]): string {
return colors
.map((color, index) => {
const name = color.name || `color-${index + 1}`;
return `$${name}: ${color.hex};`;
return `$${name}: ${color.value};`;
})
.join('\n');
}
@@ -40,7 +40,7 @@ export function exportAsTailwind(colors: ExportColor[]): string {
const colorEntries = colors
.map((color, index) => {
const name = color.name || `color-${index + 1}`;
return ` '${name}': '${color.hex}',`;
return ` '${name}': '${color.value}',`;
})
.join('\n');
@@ -53,7 +53,7 @@ export function exportAsTailwind(colors: ExportColor[]): string {
export function exportAsJSON(colors: ExportColor[]): string {
const colorObjects = colors.map((color, index) => ({
name: color.name || `color-${index + 1}`,
hex: color.hex,
value: color.value,
}));
return JSON.stringify({ colors: colorObjects }, null, 2);
@@ -63,7 +63,7 @@ export function exportAsJSON(colors: ExportColor[]): string {
* Export colors as JavaScript array
*/
export function exportAsJavaScript(colors: ExportColor[]): string {
const colorArray = colors.map((c) => `'${c.hex}'`).join(', ');
const colorArray = colors.map((c) => `'${c.value}'`).join(', ');
return `const colors = [${colorArray}];`;
}