@vishal_20/basetree 1.0.0

package/dist/ui/mindmap/MindmapControls.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Mindmap Controls for BASETREE V8
+ * Zoom, pan, filter controls
+ */
+import { useState, useEffect } from 'react';
+import { useInput } from 'ink';
+import { Box, Text } from 'ink';
+export function MindmapControls({ onStateChange }) {
+    const [zoom, setZoom] = useState(1);
+    const [panX, setPanX] = useState(0);
+    const [panY, setPanY] = useState(0);
+    const [filterType, setFilterType] = useState(null);
+    useEffect(() => {
+        onStateChange({ zoom, panX, panY, filterType });
+    }, [zoom, panX, panY, filterType, onStateChange]);
+    useInput((input, key) => {
+        if (key.ctrl && input === '=') {
+            // Zoom in
+            setZoom((z) => Math.min(z * 1.2, 5));
+        }
+        else if (key.ctrl && input === '-') {
+            // Zoom out
+            setZoom((z) => Math.max(z / 1.2, 0.2));
+        }
+        else if (key.leftArrow) {
+            setPanX((x) => x - 1);
+        }
+        else if (key.rightArrow) {
+            setPanX((x) => x + 1);
+        }
+        else if (key.upArrow) {
+            setPanY((y) => y - 1);
+        }
+        else if (key.downArrow) {
+            setPanY((y) => y + 1);
+        }
+        else if (input === 'f') {
+            // Cycle filter
+            const types = ['goal', 'task', 'agent', 'decision', 'risk', null];
+            const currentIndex = types.indexOf(filterType);
+            setFilterType(types[(currentIndex + 1) % types.length] || null);
+        }
+        else if (input === 'r') {
+            // Reset
+            setZoom(1);
+            setPanX(0);
+            setPanY(0);
+            setFilterType(null);
+        }
+    });
+    return (_jsx(Box, { children: _jsx(Text, { children: "Controls: [Ctrl+=] Zoom In [Ctrl+-] Zoom Out [Arrows] Pan [f] Filter [r] Reset" }) }));
+}

package/dist/ui/mindmap/NodeRenderer.js

@@ -0,0 +1,53 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+export function NodeRenderer({ node, position, themeEngine, zoom, selected }) {
+    const theme = themeEngine.getTheme();
+    const nodeSymbol = getNodeSymbol(node.type);
+    const nodeColor = getNodeColor(node.type, theme);
+    // Truncate label for terminal
+    const maxLabelLength = Math.floor(20 / zoom);
+    const label = node.label.length > maxLabelLength
+        ? node.label.substring(0, maxLabelLength - 3) + '...'
+        : node.label;
+    return (_jsxs(Text, { children: [nodeSymbol, " ", label] }));
+}
+function getNodeSymbol(type) {
+    switch (type) {
+        case 'goal':
+            return '●';
+        case 'task':
+            return '■';
+        case 'agent':
+            return '◆';
+        case 'decision':
+            return '▲';
+        case 'risk':
+            return '⚠';
+        case 'evidence':
+            return '○';
+        case 'strategy':
+            return '▢';
+        default:
+            return '•';
+    }
+}
+function getNodeColor(type, theme) {
+    switch (type) {
+        case 'goal':
+            return theme.primary;
+        case 'task':
+            return theme.info;
+        case 'agent':
+            return theme.success;
+        case 'decision':
+            return theme.secondary;
+        case 'risk':
+            return theme.error;
+        case 'evidence':
+            return theme.muted;
+        case 'strategy':
+            return theme.warning;
+        default:
+            return theme.foreground;
+    }
+}

package/dist/ui/modes/CognitiveMode.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Cognitive Mode for BASETREE V8
+ * Full-screen mindmap with live reasoning visualization
+ */
+import { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { CognitiveMindmapRenderer } from '../mindmap/CognitiveMindmapRenderer.js';
+import { BackendAdapter } from '../integration/BackendAdapter.js';
+import { useInput } from 'ink';
+export function CognitiveMode({ modeManager, themeEngine, terminalOS, goalId }) {
+    const [backendAdapter] = useState(() => new BackendAdapter());
+    const [initialized, setInitialized] = useState(false);
+    const [currentGoalId] = useState(goalId || 'default-goal');
+    useEffect(() => {
+        backendAdapter.initialize().then(() => {
+            setInitialized(true);
+        });
+    }, []);
+    useInput((input) => {
+        if (input === 'c') {
+            modeManager.switchMode('command');
+        }
+    });
+    if (!initialized) {
+        return (_jsx(Box, { children: _jsx(Text, { children: "Initializing cognitive mindmap..." }) }));
+    }
+    const graphEngine = backendAdapter.getGraphEngine();
+    const streamBus = backendAdapter.getStreamBus();
+    return (_jsx(Box, { flexDirection: "column", width: "100%", height: "100%", children: _jsx(CognitiveMindmapRenderer, { graphEngine: graphEngine, streamBus: streamBus, goalId: currentGoalId, themeEngine: themeEngine, modeManager: modeManager, terminalOS: terminalOS }) }));
+}

package/dist/ui/modes/CommandMode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function CommandMode({ modeManager, themeEngine, terminalOS }) {
+    const theme = themeEngine.getTheme();
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsxs(Box, { padding: 1, borderStyle: "single", children: [_jsx(Text, { children: "BASETREE V8 - Command Mode" }), _jsx(Text, { children: " Press 'c' for Cognitive Mode, 'm' for Mission Control" })] }), _jsx(Box, { flexGrow: 1, padding: 1, children: _jsx(Text, { children: "Classic CLI mode - Enhanced with live updates" }) })] }));
+}

package/dist/ui/modes/GovernanceMode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function GovernanceMode({ modeManager, themeEngine, terminalOS }) {
+    const theme = themeEngine.getTheme();
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Box, { padding: 1, borderStyle: "single", children: _jsx(Text, { children: "Governance Mode - Policy & Approvals" }) }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { width: "50%", borderStyle: "single", padding: 1, children: [_jsx(Text, { bold: true, children: "Policies" }), _jsx(Text, { children: "Policy rules will be displayed here" })] }), _jsxs(Box, { width: "50%", borderStyle: "single", padding: 1, children: [_jsx(Text, { bold: true, children: "Pending Approvals" }), _jsx(Text, { children: "Pending proposals will be displayed here" })] })] }), _jsxs(Box, { height: 5, borderStyle: "single", padding: 1, children: [_jsx(Text, { bold: true, children: "Risk Assessment" }), _jsx(Text, { children: "Risk visualization will be displayed here" })] })] }));
+}

package/dist/ui/modes/MissionControlMode.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function MissionControlMode({ modeManager, themeEngine, terminalOS }) {
+    const theme = themeEngine.getTheme();
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Box, { padding: 1, borderStyle: "single", children: _jsx(Text, { children: "Mission Control - Multi-Panel Dashboard" }) }), _jsxs(Box, { flexDirection: "row", flexGrow: 1, children: [_jsxs(Box, { width: "50%", borderStyle: "single", padding: 1, children: [_jsx(Text, { bold: true, children: "Agents" }), _jsx(Text, { children: "Agent status will be displayed here" })] }), _jsxs(Box, { width: "50%", borderStyle: "single", padding: 1, children: [_jsx(Text, { bold: true, children: "Goals" }), _jsx(Text, { children: "Active goals will be displayed here" })] })] }), _jsxs(Box, { flexDirection: "row", height: 5, children: [_jsx(Box, { width: "33%", borderStyle: "single", padding: 1, children: _jsx(Text, { bold: true, children: "Metrics" }) }), _jsx(Box, { width: "33%", borderStyle: "single", padding: 1, children: _jsx(Text, { bold: true, children: "Tasks" }) }), _jsx(Box, { width: "34%", borderStyle: "single", padding: 1, children: _jsx(Text, { bold: true, children: "Alerts" }) })] })] }));
+}

package/dist/ui/modes/ModeManager.js

@@ -0,0 +1,67 @@
+/**
+ * Mode Manager for BASETREE V8
+ * Hot-swap between layout modes with transition animations
+ */
+export class ModeManager {
+    currentMode = 'command';
+    modeHistory = ['command'];
+    transitionCallbacks = new Map();
+    /**
+     * Switch to a mode
+     */
+    switchMode(mode, animated = true) {
+        if (mode === this.currentMode) {
+            return;
+        }
+        const previousMode = this.currentMode;
+        this.currentMode = mode;
+        this.modeHistory.push(mode);
+        // Limit history size
+        if (this.modeHistory.length > 10) {
+            this.modeHistory.shift();
+        }
+        // Trigger transition callback
+        const callback = this.transitionCallbacks.get(mode);
+        if (callback) {
+            callback();
+        }
+    }
+    /**
+     * Get current mode
+     */
+    getCurrentMode() {
+        return this.currentMode;
+    }
+    /**
+     * Get previous mode
+     */
+    getPreviousMode() {
+        return this.modeHistory.length > 1
+            ? this.modeHistory[this.modeHistory.length - 2]
+            : null;
+    }
+    /**
+     * Go back to previous mode
+     */
+    goBack() {
+        if (this.modeHistory.length > 1) {
+            this.modeHistory.pop(); // Remove current
+            const previous = this.modeHistory.pop();
+            if (previous) {
+                this.switchMode(previous);
+            }
+        }
+    }
+    /**
+     * Register transition callback
+     */
+    onModeTransition(mode, callback) {
+        this.transitionCallbacks.set(mode, callback);
+    }
+    /**
+     * Get mode history
+     */
+    getModeHistory() {
+        return [...this.modeHistory];
+    }
+}

package/dist/ui/modes/ObservatoryMode.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { PlanetaryMetrics } from '../../observability/planetaryMetrics.js';
+import { PlanetaryDashboard } from '../../observability/planetaryDashboard.js';
+export function ObservatoryMode({ modeManager, themeEngine, terminalOS }) {
+    const theme = themeEngine.getTheme();
+    const metrics = new PlanetaryMetrics();
+    const dashboard = new PlanetaryDashboard(metrics);
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Box, { padding: 1, borderStyle: "single", children: _jsx(Text, { children: "Observatory Mode - Planetary Metrics" }) }), _jsx(Box, { flexGrow: 1, padding: 1, children: _jsx(Text, { children: dashboard.render() }) }), _jsxs(Box, { flexDirection: "row", height: 5, children: [_jsx(Box, { width: "33%", borderStyle: "single", padding: 1, children: _jsx(Text, { bold: true, children: "Compute" }) }), _jsx(Box, { width: "33%", borderStyle: "single", padding: 1, children: _jsx(Text, { bold: true, children: "Economic" }) }), _jsx(Box, { width: "34%", borderStyle: "single", padding: 1, children: _jsx(Text, { bold: true, children: "Risk" }) })] })] }));
+}

package/dist/ui/modes/TimelineMode.js

@@ -0,0 +1,27 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Timeline Mode for BASETREE V8
+ * Execution replay with time-travel navigation
+ */
+import { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+export function TimelineMode({ modeManager, themeEngine, terminalOS, runId }) {
+    const [currentTime, setCurrentTime] = useState(0);
+    const [maxTime, setMaxTime] = useState(100);
+    const [playing, setPlaying] = useState(false);
+    useInput((input, key) => {
+        if (key.leftArrow) {
+            setCurrentTime((t) => Math.max(0, t - 1));
+        }
+        if (key.rightArrow) {
+            setCurrentTime((t) => Math.min(maxTime, t + 1));
+        }
+        if (input === ' ') {
+            setPlaying((p) => !p);
+        }
+        if (input === 'r') {
+            setCurrentTime(0);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsx(Box, { padding: 1, borderStyle: "single", children: _jsxs(Text, { children: ["Timeline Mode - Run: ", runId || 'No run selected'] }) }), _jsxs(Box, { flexGrow: 1, padding: 1, children: [_jsx(Text, { children: "Timeline visualization will be rendered here" }), _jsxs(Text, { children: ["Time: ", currentTime, " / ", maxTime] }), _jsxs(Text, { children: ["Status: ", playing ? 'Playing' : 'Paused'] })] }), _jsx(Box, { padding: 1, children: _jsx(Text, { children: "[\u2190\u2192] Navigate [Space] Play/Pause [r] Reset" }) })] }));
+}

package/dist/ui/terminalOS.js

@@ -0,0 +1,180 @@
+/**
+ * Terminal OS Layer for BASETREE V8
+ * Virtual screen manager with viewport abstraction, panels, overlays, modals, tabs
+ */
+export class TerminalOS {
+    panels = new Map();
+    overlays = new Map();
+    activeTab = 'default';
+    tabs = new Map();
+    screenWidth = 80;
+    screenHeight = 24;
+    focusedPanelId = null;
+    constructor() {
+        this.tabs.set('default', new Set());
+    }
+    /**
+     * Set screen dimensions
+     */
+    setScreenSize(width, height) {
+        this.screenWidth = width;
+        this.screenHeight = height;
+        this.recalculateLayouts();
+    }
+    /**
+     * Get screen dimensions
+     */
+    getScreenSize() {
+        return { width: this.screenWidth, height: this.screenHeight };
+    }
+    /**
+     * Create a new panel
+     */
+    createPanel(id, viewport, zIndex = 0) {
+        const panel = {
+            id,
+            viewport: { ...viewport },
+            zIndex,
+            visible: true,
+            focused: false,
+        };
+        this.panels.set(id, panel);
+        const currentTab = this.tabs.get(this.activeTab);
+        if (currentTab) {
+            currentTab.add(id);
+        }
+        return panel;
+    }
+    /**
+     * Get panel by ID
+     */
+    getPanel(id) {
+        return this.panels.get(id);
+    }
+    /**
+     * Update panel viewport
+     */
+    updatePanel(id, viewport) {
+        const panel = this.panels.get(id);
+        if (!panel) {
+            return;
+        }
+        panel.viewport = { ...panel.viewport, ...viewport };
+    }
+    /**
+     * Show/hide panel
+     */
+    setPanelVisible(id, visible) {
+        const panel = this.panels.get(id);
+        if (panel) {
+            panel.visible = visible;
+        }
+    }
+    /**
+     * Focus a panel
+     */
+    focusPanel(id) {
+        // Unfocus all panels
+        for (const panel of this.panels.values()) {
+            panel.focused = false;
+        }
+        const panel = this.panels.get(id);
+        if (panel) {
+            panel.focused = true;
+            panel.zIndex = Math.max(...Array.from(this.panels.values()).map((p) => p.zIndex)) + 1;
+            this.focusedPanelId = id;
+        }
+    }
+    /**
+     * Get focused panel
+     */
+    getFocusedPanel() {
+        return this.focusedPanelId ? this.panels.get(this.focusedPanelId) || null : null;
+    }
+    /**
+     * Create overlay
+     */
+    createOverlay(id, viewport, modal = false) {
+        const overlay = {
+            id,
+            viewport: { ...viewport },
+            zIndex: 1000 + this.overlays.size,
+            modal,
+        };
+        this.overlays.set(id, overlay);
+        return overlay;
+    }
+    /**
+     * Remove overlay
+     */
+    removeOverlay(id) {
+        this.overlays.delete(id);
+    }
+    /**
+     * Get all visible panels (sorted by z-index)
+     */
+    getVisiblePanels() {
+        return Array.from(this.panels.values())
+            .filter((p) => p.visible)
+            .sort((a, b) => a.zIndex - b.zIndex);
+    }
+    /**
+     * Get all overlays (sorted by z-index)
+     */
+    getOverlays() {
+        return Array.from(this.overlays.values()).sort((a, b) => a.zIndex - b.zIndex);
+    }
+    /**
+     * Create a new tab
+     */
+    createTab(tabId) {
+        if (!this.tabs.has(tabId)) {
+            this.tabs.set(tabId, new Set());
+        }
+    }
+    /**
+     * Switch to a tab
+     */
+    switchTab(tabId) {
+        if (this.tabs.has(tabId)) {
+            this.activeTab = tabId;
+            // Hide panels not in this tab
+            for (const [panelId, panel] of this.panels.entries()) {
+                const tabPanels = this.tabs.get(tabId);
+                panel.visible = tabPanels?.has(panelId) || false;
+            }
+        }
+    }
+    /**
+     * Add panel to tab
+     */
+    addPanelToTab(panelId, tabId) {
+        const tab = this.tabs.get(tabId);
+        if (tab) {
+            tab.add(panelId);
+        }
+    }
+    /**
+     * Remove panel
+     */
+    removePanel(id) {
+        this.panels.delete(id);
+        for (const tab of this.tabs.values()) {
+            tab.delete(id);
+        }
+        if (this.focusedPanelId === id) {
+            this.focusedPanelId = null;
+        }
+    }
+    /**
+     * Recalculate layouts after screen size change
+     */
+    recalculateLayouts() {
+        // In production, would trigger layout recalculation
+        // For now, just ensure viewports are within bounds
+        for (const panel of this.panels.values()) {
+            panel.viewport.width = Math.min(panel.viewport.width, this.screenWidth - panel.viewport.x);
+            panel.viewport.height = Math.min(panel.viewport.height, this.screenHeight - panel.viewport.y);
+        }
+    }
+}

package/dist/ui/theme/ThemeEngine.js

@@ -0,0 +1,164 @@
+/**
+ * Theme Engine for BASETREE V8
+ * 24-bit color support, theme system, adaptive typography
+ */
+export class ThemeEngine {
+    currentTheme = 'dark';
+    themes = new Map();
+    constructor() {
+        this.initializeThemes();
+    }
+    /**
+     * Initialize built-in themes
+     */
+    initializeThemes() {
+        // Dark theme
+        this.themes.set('dark', {
+            name: 'dark',
+            background: { r: 10, g: 10, b: 10 },
+            foreground: { r: 224, g: 224, b: 224 },
+            primary: { r: 33, g: 150, b: 243 },
+            secondary: { r: 156, g: 39, b: 176 },
+            success: { r: 76, g: 175, b: 80 },
+            warning: { r: 255, g: 152, b: 0 },
+            error: { r: 244, g: 67, b: 54 },
+            info: { r: 3, g: 169, b: 244 },
+            border: { r: 51, g: 51, b: 51 },
+            muted: { r: 136, g: 136, b: 136 },
+        });
+        // Neon theme
+        this.themes.set('neon', {
+            name: 'neon',
+            background: { r: 0, g: 0, b: 0 },
+            foreground: { r: 0, g: 255, b: 255 },
+            primary: { r: 255, g: 0, b: 255 },
+            secondary: { r: 0, g: 255, b: 0 },
+            success: { r: 0, g: 255, b: 128 },
+            warning: { r: 255, g: 255, b: 0 },
+            error: { r: 255, g: 0, b: 0 },
+            info: { r: 0, g: 128, b: 255 },
+            border: { r: 128, g: 0, b: 255 },
+            muted: { r: 128, g: 128, b: 128 },
+        });
+        // Minimal theme
+        this.themes.set('minimal', {
+            name: 'minimal',
+            background: { r: 255, g: 255, b: 255 },
+            foreground: { r: 0, g: 0, b: 0 },
+            primary: { r: 0, g: 0, b: 0 },
+            secondary: { r: 128, g: 128, b: 128 },
+            success: { r: 0, g: 128, b: 0 },
+            warning: { r: 255, g: 165, b: 0 },
+            error: { r: 255, g: 0, b: 0 },
+            info: { r: 0, g: 0, b: 255 },
+            border: { r: 200, g: 200, b: 200 },
+            muted: { r: 160, g: 160, b: 160 },
+        });
+        // Cinematic theme
+        this.themes.set('cinematic', {
+            name: 'cinematic',
+            background: { r: 18, g: 18, b: 18 },
+            foreground: { r: 245, g: 245, b: 245 },
+            primary: { r: 255, g: 215, b: 0 },
+            secondary: { r: 192, g: 192, b: 192 },
+            success: { r: 34, g: 139, b: 34 },
+            warning: { r: 255, g: 140, b: 0 },
+            error: { r: 220, g: 20, b: 60 },
+            info: { r: 135, g: 206, b: 250 },
+            border: { r: 64, g: 64, b: 64 },
+            muted: { r: 128, g: 128, b: 128 },
+        });
+        // Matrix theme
+        this.themes.set('matrix', {
+            name: 'matrix',
+            background: { r: 0, g: 0, b: 0 },
+            foreground: { r: 0, g: 255, b: 0 },
+            primary: { r: 0, g: 255, b: 0 },
+            secondary: { r: 0, g: 200, b: 0 },
+            success: { r: 0, g: 255, b: 0 },
+            warning: { r: 255, g: 255, b: 0 },
+            error: { r: 255, g: 0, b: 0 },
+            info: { r: 0, g: 200, b: 255 },
+            border: { r: 0, g: 128, b: 0 },
+            muted: { r: 0, g: 100, b: 0 },
+        });
+        // Blueprint theme
+        this.themes.set('blueprint', {
+            name: 'blueprint',
+            background: { r: 25, g: 25, b: 112 },
+            foreground: { r: 135, g: 206, b: 250 },
+            primary: { r: 0, g: 191, b: 255 },
+            secondary: { r: 70, g: 130, b: 180 },
+            success: { r: 0, g: 255, b: 127 },
+            warning: { r: 255, g: 215, b: 0 },
+            error: { r: 255, g: 99, b: 71 },
+            info: { r: 135, g: 206, b: 250 },
+            border: { r: 65, g: 105, b: 225 },
+            muted: { r: 100, g: 149, b: 237 },
+        });
+        // Paper theme
+        this.themes.set('paper', {
+            name: 'paper',
+            background: { r: 250, g: 250, b: 245 },
+            foreground: { r: 30, g: 30, b: 30 },
+            primary: { r: 33, g: 33, b: 33 },
+            secondary: { r: 100, g: 100, b: 100 },
+            success: { r: 46, g: 125, b: 50 },
+            warning: { r: 237, g: 108, b: 2 },
+            error: { r: 198, g: 40, b: 40 },
+            info: { r: 25, g: 118, b: 210 },
+            border: { r: 224, g: 224, b: 224 },
+            muted: { r: 158, g: 158, b: 158 },
+        });
+    }
+    /**
+     * Set current theme
+     */
+    setTheme(themeName) {
+        if (this.themes.has(themeName)) {
+            this.currentTheme = themeName;
+        }
+    }
+    /**
+     * Get current theme
+     */
+    getTheme() {
+        return this.themes.get(this.currentTheme) || this.themes.get('dark');
+    }
+    /**
+     * Get color as ANSI 24-bit color code
+     */
+    colorToAnsi(color, foreground = true) {
+        const code = foreground ? 38 : 48;
+        return `\x1b[${code};2;${color.r};${color.g};${color.b}m`;
+    }
+    /**
+     * Reset ANSI color
+     */
+    resetColor() {
+        return '\x1b[0m';
+    }
+    /**
+     * Get theme color as ANSI
+     */
+    getColor(key, foreground = true) {
+        const theme = this.getTheme();
+        const color = theme[key];
+        return this.colorToAnsi(color, foreground);
+    }
+    /**
+     * Create gradient between two colors
+     */
+    createGradient(color1, color2, steps) {
+        const gradient = [];
+        for (let i = 0; i < steps; i++) {
+            const t = i / (steps - 1);
+            gradient.push({
+                r: Math.round(color1.r + (color2.r - color1.r) * t),
+                g: Math.round(color1.g + (color2.g - color1.g) * t),
+                b: Math.round(color1.b + (color2.b - color1.b) * t),
+            });
+        }
+        return gradient;
+    }
+}