feat: Add script to generate PWA cache file list and improve SVG circle rendering

generate-pwa-cache-list.js

@@ -0,0 +1,34 @@
+// Node.js script to generate a list of all files in public, logos, and logos_gen for PWA caching
+const fs = require('fs');
+const path = require('path');
+
+const publicDir = path.join(__dirname, 'public');
+const logosDir = path.join(__dirname, 'logos');
+const logosGenDir = path.join(__dirname, 'logos_gen');
+
+function walkDir(dir, baseUrl = '') {
+  let results = [];
+  fs.readdirSync(dir).forEach(file => {
+    const filePath = path.join(dir, file);
+    const relPath = path.join(baseUrl, file).replace(/\\/g, '/');
+    if (fs.statSync(filePath).isDirectory()) {
+      results = results.concat(walkDir(filePath, relPath));
+    } else {
+      results.push('/' + relPath);
+    }
+  });
+  return results;
+}
+
+const publicFiles = walkDir(publicDir, '').filter(f => !f.endsWith('sw.js'));
+const logosFiles = walkDir(logosDir, 'logos');
+const logosGenFiles = walkDir(logosGenDir, 'logos_gen');
+
+const allFiles = Array.from(new Set([...publicFiles, ...logosFiles, ...logosGenFiles]));
+
+fs.writeFileSync(
+  path.join(publicDir, 'pwa-files-to-cache.json'),
+  JSON.stringify(allFiles, null, 2)
+);
+
+console.log('PWA files-to-cache list generated with', allFiles.length, 'files.');

src/components/InlineSvg.svelte

@@ -125,7 +125,6 @@
   }
 
   $: path, color, colorConfig, targets, sets, activeSet, colors, fetchAndColorSvg();
-
 </script>
 
 <div class="svg-wrapper" role="img" aria-label={alt || "SVG image"}>

src/utils/colorCircles.js

@@ -16,7 +16,7 @@ export function generateColorSetCircle(colors, setConfig, size = 24) {
   if (limitedColorNames.length === 1) {
     const colorValue = colors[limitedColorNames[0]];
     return `<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-      <circle cx="${size/2}" cy="${size/2}" r="${size/2}" fill="${colorValue}" />
+      <circle cx="${size / 2}" cy="${size / 2}" r="${size / 2}" fill="${colorValue}" />
     </svg>`;
   }
 
@@ -49,3 +49,16 @@ export function generateColorSetCircle(colors, setConfig, size = 24) {
     ${segments.join('\n    ')}
   </svg>`;
 }
+
+/**
+ * Returns SVG markup for the default (no-color/reset) circle
+ * @returns {string} SVG markup
+ */
+export function getNoColorCircle() {
+  return `<svg width="100%" height="100%" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M400,0c220.766,0 400,179.234 400,400c0,220.766 -179.234,400 -400,400c-220.766,0 -400,-179.234 -400,-400c0,-220.766 179.234,-400 400,-400Zm-251.006,583.082l434.088,-434.088c-51.359,-37.541 -114.652,-59.71 -183.082,-59.71c-171.489,0 -310.716,139.227 -310.716,310.716c0,68.43 22.169,131.723 59.71,183.082Zm502.495,-365.501l-433.908,433.908c51.241,37.248 114.283,59.227 182.419,59.227c171.489,-0 310.716,-139.227 310.716,-310.716c-0,-68.136 -21.979,-131.178 -59.227,-182.419Z"
+              fill="#33363f"
+            />
+          </svg>`;
+}