Fix runtime crashes from non-array API responses, 405 on play endpoint, and WGSL reserved keyword

public/shaders/gen-crystalline-chrono-dyson.wgsl

@@ -25,8 +25,8 @@ struct Uniforms {
     ripples: array<vec4<f32>, 50>,
 };
 
-// Custom mod function
-fn mod(x: f32, y: f32) -> f32 {
+// Custom fmod function (avoids reserved keyword 'mod')
+fn fmod(x: f32, y: f32) -> f32 {
     return x - y * floor(x / y);
 }
 

src/App.tsx

@@ -112,6 +112,12 @@ const SHADER_DEFAULTS: Record<string, number[]> = {
     'bloom': [0.50, 0.40, 0.55, 0.35],
     'dynamic-lens-flares': [0.45, 0.50, 0.40, 0.45],
     'chromatic-crawler': [0.40, 0.45, 0.50, 0.35],
+
+    // Image processing effects
+    'digital-haze': [0.50, 0.40, 0.45, 0.35],
+
+    // Generative: Crystalline Chrono-Dyson (Panel Density, Quasar Glow, Flux Speed, Swarm Count)
+    'gen-crystalline-chrono-dyson': [0.40, 0.55, 0.50, 0.45],
 };
 
 // Helper to get shader defaults - tries multiple ID variations for matching
@@ -365,7 +371,7 @@ function MainApp() {
 
                 // Record play event (fire-and-forget)
                 if (ok) {
-                    fetch(`${SHADER_WGSL_URL}/${shaderEntry.id}/play`, { method: 'POST' }).catch(() => {});
+                    fetch(`${SHADER_WGSL_URL}/${shaderEntry.id}/play`, { method: 'GET' }).catch(() => {});
                 }
             } catch (error) {
                 console.error(`❌ Failed to load shader ${shaderEntry.id}:`, error);
@@ -406,6 +412,9 @@ function MainApp() {
                 const response = await fetch(IMAGE_MANIFEST_URL);
                 if (response.ok) {
                     const data = await response.json();
+                    if (!Array.isArray(data)) {
+                        throw new TypeError(`API response is not an array, received: ${typeof data}`);
+                    }
                     manifest = data.map((item: any) => ({
                         url: item.url,
                         tags: item.description ? item.description.toLowerCase().split(/[\s,]+/) : [],

src/services/contentLoader.test.ts

@@ -100,4 +100,37 @@ describe('fetchContentManifest', () => {
         });
         expect(result.videos).toEqual(FALLBACK_VIDEOS);
     });
+
+    it('falls back to the local manifest when the API returns a non-array', async () => {
+        fetchMock.mockImplementation((url: RequestInfo | URL) => {
+            if (url === IMAGE_MANIFEST_URL) {
+                return Promise.resolve({
+                    ok: true,
+                    json: async () => ({ error: 'unexpected object' }),
+                });
+            }
+
+            if (url === LOCAL_MANIFEST_URL) {
+                return Promise.resolve({
+                    ok: true,
+                    json: async () => ({
+                        images: [{ url: 'gallery/fallback.png', tags: ['fallback'] }],
+                        videos: [],
+                    }),
+                });
+            }
+
+            return Promise.reject(new Error(`Unexpected url: ${String(url)}`));
+        });
+
+        const result = await fetchContentManifest();
+
+        expect(result.manifest).toEqual([
+            {
+                url: `${BUCKET_BASE_URL}/gallery/fallback.png`,
+                tags: ['fallback'],
+                description: 'fallback',
+            },
+        ]);
+    });
 });

src/services/contentLoader.ts

@@ -35,6 +35,9 @@ export async function fetchContentManifest(): Promise<LoadedContent> {
         const response = await fetch(IMAGE_MANIFEST_URL);
         if (response.ok) {
             const data = await response.json() as ApiManifestItem[];
+            if (!Array.isArray(data)) {
+                throw new TypeError(`API response is not an array, received: ${typeof data}`);
+            }
             manifest = data.map((item) => ({
                 url: item.url,
                 tags: item.description ? item.description.toLowerCase().split(/[\s,]+/) : [],

src/services/shaderApi.ts

@@ -352,6 +352,9 @@ class ShaderApiService {
       const response = await fetch(url);
       if (!response.ok) throw new Error(`API ${response.status}`);
       const data: ApiShaderEntry[] = await response.json();
+      if (!Array.isArray(data)) {
+        throw new TypeError(`API response is not an array, received: ${typeof data}`);
+      }
 
       console.log(`[ShaderApi] Received ${data.length} shaders from API`);