@kya-os/cli
Version:
CLI for MCP-I setup and management
236 lines • 8.12 kB
JavaScript
/**
* Gradient System for Terminal Effects
* Provides comprehensive gradient color mapping capabilities
*/
/**
* Gradient direction options
*/
export var GradientDirection;
(function (GradientDirection) {
GradientDirection["HORIZONTAL"] = "horizontal";
GradientDirection["VERTICAL"] = "vertical";
GradientDirection["DIAGONAL"] = "diagonal";
GradientDirection["RADIAL"] = "radial";
GradientDirection["DIAGONAL_REVERSE"] = "diagonal_reverse";
})(GradientDirection || (GradientDirection = {}));
/**
* Gradient class for creating color transitions
*/
export class Gradient {
constructor(config) {
this.spectrum = [];
this.colorStops = config.stops;
this.steps = config.steps || 10;
this.direction = config.direction || GradientDirection.VERTICAL;
this.easingFn = config.easingFn || ((t) => t); // Linear by default
this.generateSpectrum();
}
/**
* Generate the full color spectrum
*/
generateSpectrum() {
this.spectrum = [];
if (this.colorStops.length === 1) {
// Single color - no gradient
this.spectrum = [this.colorStops[0]];
return;
}
// Generate colors between each pair of stops
for (let i = 0; i < this.colorStops.length - 1; i++) {
const startColor = this.colorStops[i];
const endColor = this.colorStops[i + 1];
const segmentColors = this.interpolateColors(startColor, endColor, this.steps);
// Add all colors except the last (to avoid duplicates)
if (i < this.colorStops.length - 2) {
this.spectrum.push(...segmentColors.slice(0, -1));
}
else {
// For the last segment, include all colors
this.spectrum.push(...segmentColors);
}
}
}
/**
* Interpolate between two colors
*/
interpolateColors(color1, color2, steps) {
const colors = [];
const r1 = parseInt(color1.substring(0, 2), 16);
const g1 = parseInt(color1.substring(2, 4), 16);
const b1 = parseInt(color1.substring(4, 6), 16);
const r2 = parseInt(color2.substring(0, 2), 16);
const g2 = parseInt(color2.substring(2, 4), 16);
const b2 = parseInt(color2.substring(4, 6), 16);
for (let i = 0; i < steps; i++) {
const t = i / (steps - 1);
const easedT = this.easingFn(t);
const r = Math.round(r1 + (r2 - r1) * easedT);
const g = Math.round(g1 + (g2 - g1) * easedT);
const b = Math.round(b1 + (b2 - b1) * easedT);
const hex = [r, g, b]
.map((c) => Math.max(0, Math.min(255, c)).toString(16).padStart(2, "0"))
.join("");
colors.push(hex);
}
return colors;
}
/**
* Build coordinate-to-color mapping for a canvas area
*/
buildCoordinateColorMapping(dimensions, bounds) {
const mapping = new Map();
// Use provided bounds or default to full canvas
const top = bounds?.top ?? 0;
const bottom = bounds?.bottom ?? dimensions.height - 1;
const left = bounds?.left ?? 0;
const right = bounds?.right ?? dimensions.width - 1;
const width = right - left + 1;
const height = bottom - top + 1;
for (let y = top; y <= bottom; y++) {
for (let x = left; x <= right; x++) {
const key = `${x},${y}`;
const color = this.getColorAtPosition(x - left, y - top, width, height);
mapping.set(key, color);
}
}
return mapping;
}
/**
* Get color at a specific position based on gradient direction
*/
getColorAtPosition(x, y, width, height) {
let factor = 0;
switch (this.direction) {
case GradientDirection.HORIZONTAL:
factor = x / (width - 1);
break;
case GradientDirection.VERTICAL:
factor = y / (height - 1);
break;
case GradientDirection.DIAGONAL:
factor = (x + y) / (width + height - 2);
break;
case GradientDirection.DIAGONAL_REVERSE:
factor = (x + (height - 1 - y)) / (width + height - 2);
break;
case GradientDirection.RADIAL:
const centerX = width / 2;
const centerY = height / 2;
const maxDist = Math.sqrt(centerX * centerX + centerY * centerY);
const dist = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
factor = dist / maxDist;
break;
}
// Clamp factor to [0, 1]
factor = Math.max(0, Math.min(1, factor));
// Get color from spectrum
const index = Math.floor(factor * (this.spectrum.length - 1));
return this.spectrum[index];
}
/**
* Get color for a specific coordinate
*/
getColorForCoordinate(coord, dimensions) {
return this.getColorAtPosition(coord.x, coord.y, dimensions.width, dimensions.height);
}
/**
* Get the generated color spectrum
*/
getSpectrum() {
return [...this.spectrum];
}
/**
* Apply gradient to a string (character by character)
*/
applyToString(text) {
const result = [];
const chars = [...text]; // Handle Unicode properly
for (let i = 0; i < chars.length; i++) {
const factor = i / (chars.length - 1);
const colorIndex = Math.floor(factor * (this.spectrum.length - 1));
result.push({
char: chars[i],
color: this.spectrum[colorIndex],
});
}
return result;
}
}
/**
* Predefined gradients
*/
export const GRADIENTS = {
// Fire gradient (red to yellow)
FIRE: {
stops: ["ff0000", "ff4500", "ff8c00", "ffa500", "ffff00"],
steps: 10,
},
// Ocean gradient (dark blue to cyan)
OCEAN: {
stops: ["000080", "0000ff", "0080ff", "00ffff"],
steps: 12,
},
// Matrix gradient (dark green to bright green)
MATRIX: {
stops: ["003300", "006600", "009900", "00cc00", "00ff00"],
steps: 8,
},
// Sunset gradient
SUNSET: {
stops: ["ff1493", "ff69b4", "ffa500", "ffff00", "fffacd"],
steps: 15,
},
// Cool gradient (purple to cyan)
COOL: {
stops: ["8b008b", "9932cc", "6a0dad", "0000ff", "00ffff"],
steps: 12,
},
// Monochrome gradient (black to white)
MONOCHROME: {
stops: ["000000", "404040", "808080", "c0c0c0", "ffffff"],
steps: 10,
},
// Rainbow gradient
RAINBOW: {
stops: ["ff0000", "ff7f00", "ffff00", "00ff00", "0000ff", "4b0082", "9400d3"],
steps: 8,
},
};
/**
* Easing functions for gradient interpolation
*/
export const EASING = {
linear: (t) => t,
inQuad: (t) => t * t,
outQuad: (t) => t * (2 - t),
inOutQuad: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
inCubic: (t) => t * t * t,
outCubic: (t) => (--t) * t * t + 1,
inOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
inExpo: (t) => (t === 0 ? 0 : Math.pow(2, 10 * t - 10)),
outExpo: (t) => (t === 1 ? 1 : 1 - Math.pow(2, -10 * t)),
inOutExpo: (t) => {
if (t === 0)
return 0;
if (t === 1)
return 1;
if (t < 0.5)
return Math.pow(2, 20 * t - 10) / 2;
return (2 - Math.pow(2, -20 * t + 10)) / 2;
},
inSine: (t) => 1 - Math.cos((t * Math.PI) / 2),
outSine: (t) => Math.sin((t * Math.PI) / 2),
inOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
};
/**
* Helper function to create a gradient from preset
*/
export function createGradient(preset, direction, easingFn) {
const config = GRADIENTS[preset];
return new Gradient({
...config,
direction,
easingFn,
});
}
//# sourceMappingURL=gradient.js.map