Fetches palette from API and sets CSS variables + global PALETTE object

/* init-palette.js - Fetch palette and set CSS variables * Day 00202 - Palette integration * Loads before other chips to provide color variables */

var PALETTE = { swatches: {}, colors: {} };

(async function initPalette() { try { var res = await fetch("/api/palette"); if (!res.ok) { console.warn("⚠️ Palette API unavailable, using fallbacks"); return; } var data = await res.json(); var root = document.documentElement; // Set CSS variables for all swatches if (data.all) { data.all.forEach(function(swatch) { var name = swatch.name; var hex = swatch.hex; var rgb = swatch.rgb || [0, 0, 0]; // CSS variable: --palette-{name} root.style.setProperty("--palette-" + name, hex); root.style.setProperty("--palette-" + name + "-rgb", rgb.join(", ")); // Store in global object PALETTE.swatches[name] = { hex: hex, rgb: rgb, ache: swatch.ache, linkedColor: swatch.linkedColor }; }); } // Store raw colors too if (data.colors) { data.colors.forEach(function(color) { PALETTE.colors[color.name] = { hex: color.hex, rgb: color.rgb }; }); } // Map common CSS variable names to palette swatches var cssMap = { "sacred-accent": "sacred-accent", "sacred-red": "error", "sacred-green": "success", "sacred-gold": "muse-user", "bg-dark": "terminal-background", "term-bg": "terminal-background", "term-fg": "terminal-foreground", "term-cursor": "terminal-cursor", "term-red": "terminal-red", "term-green": "terminal-green", "term-yellow": "terminal-yellow", "term-blue": "terminal-blue", "term-magenta": "terminal-magenta", "term-cyan": "terminal-cyan" }; Object.keys(cssMap).forEach(function(varName) { var swatchName = cssMap[varName]; if (PALETTE.swatches[swatchName]) { root.style.setProperty("--" + varName, PALETTE.swatches[swatchName].hex); } }); console.log("🎨 Palette loaded: " + Object.keys(PALETTE.swatches).length + " swatches"); } catch (err) { console.warn("⚠️ Palette load failed:", err.message); } })();

// Helper to get swatch by name function getPaletteSwatch(name) { return PALETTE.swatches[name] || null; }

// Helper to get Terminal theme from palette function getTerminalTheme() { var s = PALETTE.swatches; return { background: (s["terminal-background"] || {}).hex || "#000000", foreground: (s["terminal-foreground"] || {}).hex || "#ffffff", cursor: (s["terminal-cursor"] || {}).hex || "#ffffff", red: (s["terminal-red"] || {}).hex || "#8B8B8B", green: (s["terminal-green"] || {}).hex || "#E1E1E1", yellow: (s["terminal-yellow"] || {}).hex || "#FFFFFF", blue: (s["terminal-blue"] || {}).hex || "#707070", magenta: (s["terminal-magenta"] || {}).hex || "#A7A7A7", cyan: (s["terminal-cyan"] || {}).hex || "#E1E1E1" }; }

console.log("🔌 init-palette.js loaded");