Pre-fetch popular palettes at build time

Add build step that downloads popular palettes from Lospec and bundles
them as static JSON. The app checks bundled palettes first, falling back
to the CORS proxy only for user-entered custom palette names. This makes
the deployed app work even if Lospec or corsproxy are unreachable.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: spencer-scw

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+public/palettes
 dist-ssr
 *.local
 

package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "fetch-palettes": "node scripts/fetch-palettes.js",
+    "build": "npm run fetch-palettes && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

scripts/fetch-palettes.js

@@ -0,0 +1,48 @@
+import { readFileSync, writeFileSync, mkdirSync } from 'fs';
+
+const PALETTES_LIST = JSON.parse(readFileSync('public/lospec-palettes.json', 'utf-8'));
+const OUT_DIR = 'public/palettes';
+const TIMEOUT_MS = 10000;
+
+function parseHexFile(text) {
+  return text
+    .split('\n')
+    .map(line => line.trim())
+    .filter(line => line && !line.startsWith(';'))
+    .map(hex => hex.startsWith('#') ? hex : `#${hex}`);
+}
+
+async function fetchPalette(name) {
+  const url = `https://lospec.com/palette-list/${name}.hex`;
+  const response = await fetch(url, { signal: AbortSignal.timeout(TIMEOUT_MS) });
+  if (!response.ok) throw new Error(`HTTP ${response.status}`);
+  const text = await response.text();
+  return parseHexFile(text);
+}
+
+async function main() {
+  mkdirSync(OUT_DIR, { recursive: true });
+
+  console.log(`Fetching ${PALETTES_LIST.length} palettes from Lospec...`);
+
+  const entries = await Promise.all(
+    PALETTES_LIST.map(async (name) => {
+      try {
+        const colors = await fetchPalette(name);
+        console.log(`  ${name}: ${colors.length} colors`);
+        return [name, colors];
+      } catch (err) {
+        console.error(`  ${name}: FAILED - ${err.message}`);
+        return null;
+      }
+    })
+  );
+
+  const results = Object.fromEntries(entries.filter(Boolean));
+  writeFileSync(`${OUT_DIR}/bundled.json`, JSON.stringify(results, null, 2));
+
+  const failed = PALETTES_LIST.length - Object.keys(results).length;
+  console.log(`\nBundled ${Object.keys(results).length} palettes` + (failed ? ` (${failed} failed)` : ''));
+}
+
+main();

src/utils/palettes.js

@@ -1,10 +1,30 @@
+// Cache for bundled palettes (loaded once)
+let bundledPalettes = null;
+
+const loadBundledPalettes = async () => {
+  if (bundledPalettes) return bundledPalettes;
+  try {
+    const response = await fetch(import.meta.env.BASE_URL + 'palettes/bundled.json');
+    if (!response.ok) throw new Error('Bundled palettes not found');
+    bundledPalettes = await response.json();
+    return bundledPalettes;
+  } catch {
+    bundledPalettes = {};
+    return bundledPalettes;
+  }
+};
+
 export const fetchLospecPalette = async (name) => {
   try {
-    // Try local proxy first if available, otherwise fallback to corsproxy
-    const baseUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
-      ? '/lospec-api' 
+    // Check bundled palettes first
+    const bundled = await loadBundledPalettes();
+    if (bundled[name]) return bundled[name];
+
+    // Fall back to fetching from Lospec
+    const baseUrl = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
+      ? '/lospec-api'
       : 'https://corsproxy.io/?https://lospec.com';
-    
+
     const response = await fetch(`${baseUrl}/palette-list/${name}.hex`);
     if (!response.ok) throw new Error('Palette not found');
     const text = await response.text();