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

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'],