meno-core 1.0.53 → 1.1.0

package/lib/client/navigation.test.ts

@@ -1,5 +1,5 @@
-import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
-import { navigateTo, createNavigationHandler } from "./navigation";
+import { test, expect, describe, beforeEach, afterEach, mock } from 'bun:test';
+import { navigateTo, createNavigationHandler } from './navigation';
 
 // Setup browser-like environment
 function setupWindowMock() {
@@ -13,15 +13,11 @@ function setupWindowMock() {
   }
   // Add PopStateEvent if not defined
   if (typeof globalThis.PopStateEvent === 'undefined') {
-    globalThis.PopStateEvent = class PopStateEvent extends Event {
-      constructor(type: string, eventInitDict?: PopStateEventInit) {
-        super(type, eventInitDict);
-      }
-    } as any;
+    globalThis.PopStateEvent = class PopStateEvent extends Event {} as any;
   }
 }
 
-describe("Navigation - navigateTo", () => {
+describe('Navigation - navigateTo', () => {
   let originalPushState: any;
   let originalDispatchEvent: any;
   let pushStateCalls: Array<{ state: any; title: string; url: string }>;
@@ -29,20 +25,20 @@ describe("Navigation - navigateTo", () => {
 
   beforeEach(() => {
     setupWindowMock();
-    
+
     // Save originals
     originalPushState = (globalThis as any).window.history.pushState;
     originalDispatchEvent = (globalThis as any).window.dispatchEvent;
-    
+
     // Track calls
     pushStateCalls = [];
     dispatchedEvents = [];
-    
+
     // Mock pushState
     (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
       pushStateCalls.push({ state, title, url });
     }) as any;
-    
+
     // Mock dispatchEvent
     (globalThis as any).window.dispatchEvent = mock((event: Event) => {
       dispatchedEvents.push(event);
@@ -58,57 +54,57 @@ describe("Navigation - navigateTo", () => {
     }
   });
 
-  test("should navigate to root path", () => {
-    navigateTo("/");
-    
+  test('should navigate to root path', () => {
+    navigateTo('/');
+
     expect(pushStateCalls.length).toBe(1);
-    expect(pushStateCalls[0].url).toBe("/");
+    expect(pushStateCalls[0]!.url).toBe('/');
     expect(dispatchedEvents.length).toBe(1);
-    expect(dispatchedEvents[0].type).toBe("popstate");
+    expect(dispatchedEvents[0]!.type).toBe('popstate');
   });
 
-  test("should navigate to nested path", () => {
-    navigateTo("/about");
-    
+  test('should navigate to nested path', () => {
+    navigateTo('/about');
+
     expect(pushStateCalls.length).toBe(1);
-    expect(pushStateCalls[0].url).toBe("/about");
-    expect(dispatchedEvents[0].type).toBe("popstate");
+    expect(pushStateCalls[0]!.url).toBe('/about');
+    expect(dispatchedEvents[0]!.type).toBe('popstate');
   });
 
-  test("should navigate to deeply nested path", () => {
-    navigateTo("/blog/post-1");
-    
-    expect(pushStateCalls[0].url).toBe("/blog/post-1");
+  test('should navigate to deeply nested path', () => {
+    navigateTo('/blog/post-1');
+
+    expect(pushStateCalls[0]!.url).toBe('/blog/post-1');
   });
 
-  test("should call pushState with empty state object", () => {
-    navigateTo("/test");
-    
-    expect(pushStateCalls[0].state).toEqual({});
-    expect(pushStateCalls[0].title).toBe("");
+  test('should call pushState with empty state object', () => {
+    navigateTo('/test');
+
+    expect(pushStateCalls[0]!.state).toEqual({});
+    expect(pushStateCalls[0]!.title).toBe('');
   });
 
-  test("should dispatch PopStateEvent", () => {
-    navigateTo("/test");
-    
+  test('should dispatch PopStateEvent', () => {
+    navigateTo('/test');
+
     expect(dispatchedEvents.length).toBe(1);
     expect(dispatchedEvents[0]).toBeInstanceOf(PopStateEvent);
   });
 
-  test("should handle path with query string", () => {
-    navigateTo("/search?q=test");
-    
-    expect(pushStateCalls[0].url).toBe("/search?q=test");
+  test('should handle path with query string', () => {
+    navigateTo('/search?q=test');
+
+    expect(pushStateCalls[0]!.url).toBe('/search?q=test');
   });
 
-  test("should handle path with hash", () => {
-    navigateTo("/page#section");
-    
-    expect(pushStateCalls[0].url).toBe("/page#section");
+  test('should handle path with hash', () => {
+    navigateTo('/page#section');
+
+    expect(pushStateCalls[0]!.url).toBe('/page#section');
   });
 });
 
-describe("Navigation - createNavigationHandler", () => {
+describe('Navigation - createNavigationHandler', () => {
   let originalPushState: any;
   let originalDispatchEvent: any;
   let pushStateCalls: Array<{ url: string }>;
@@ -118,14 +114,14 @@ describe("Navigation - createNavigationHandler", () => {
     setupWindowMock();
     originalPushState = (globalThis as any).window.history.pushState;
     originalDispatchEvent = (globalThis as any).window.dispatchEvent;
-    
+
     pushStateCalls = [];
     preventDefaultCalled = false;
-    
-    (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+
+    (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
       pushStateCalls.push({ url });
     }) as any;
-    
+
     (globalThis as any).window.dispatchEvent = mock(() => true);
   });
 
@@ -136,78 +132,78 @@ describe("Navigation - createNavigationHandler", () => {
     }
   });
 
-  test("should create handler that prevents default", () => {
-    const handler = createNavigationHandler("/test");
+  test('should create handler that prevents default', () => {
+    const handler = createNavigationHandler('/test');
     const mockEvent = {
       preventDefault: mock(() => {
         preventDefaultCalled = true;
-      })
+      }),
     } as any;
-    
+
     handler(mockEvent);
-    
+
     expect(preventDefaultCalled).toBe(true);
     expect(mockEvent.preventDefault).toHaveBeenCalled();
   });
 
-  test("should create handler that navigates to path", () => {
-    const handler = createNavigationHandler("/about");
+  test('should create handler that navigates to path', () => {
+    const handler = createNavigationHandler('/about');
     const mockEvent = {
-      preventDefault: mock(() => {})
+      preventDefault: mock(() => {}),
     } as any;
-    
+
     handler(mockEvent);
-    
+
     expect(pushStateCalls.length).toBe(1);
-    expect(pushStateCalls[0].url).toBe("/about");
+    expect(pushStateCalls[0]!.url).toBe('/about');
   });
 
-  test("should prevent default before navigating", () => {
-    const handler = createNavigationHandler("/test");
+  test('should prevent default before navigating', () => {
+    const handler = createNavigationHandler('/test');
     let preventDefaultCalledFirst = false;
     let navigationCalledFirst = false;
-    
+
     const mockEvent = {
       preventDefault: mock(() => {
         preventDefaultCalledFirst = !navigationCalledFirst;
-      })
+      }),
     } as any;
-    
-    const originalPushState = (globalThis as any).window.history.pushState;
+
+    const _originalPushState = (globalThis as any).window.history.pushState;
     (globalThis as any).window.history.pushState = mock(() => {
       navigationCalledFirst = !preventDefaultCalledFirst;
     }) as any;
-    
+
     handler(mockEvent);
-    
+
     // preventDefault should be called before navigation
     expect(preventDefaultCalledFirst).toBe(true);
   });
 
-  test("should handle root path in handler", () => {
-    const handler = createNavigationHandler("/");
+  test('should handle root path in handler', () => {
+    const handler = createNavigationHandler('/');
     const mockEvent = {
-      preventDefault: mock(() => {})
+      preventDefault: mock(() => {}),
     } as any;
-    
+
     handler(mockEvent);
-    
-    expect(pushStateCalls[0].url).toBe("/");
+
+    expect(pushStateCalls[0]!.url).toBe('/');
   });
 
-  test("should handle nested paths in handler", () => {
-    const handler = createNavigationHandler("/blog/post-1");
+  test('should handle nested paths in handler', () => {
+    const handler = createNavigationHandler('/blog/post-1');
     const mockEvent = {
-      preventDefault: mock(() => {})
+      preventDefault: mock(() => {}),
     } as any;
-    
+
     handler(mockEvent);
-    
-    expect(pushStateCalls[0].url).toBe("/blog/post-1");
+
+    expect(pushStateCalls[0]!.url).toBe('/blog/post-1');
   });
 });
 
-describe("Navigation - Path handling", () => {
+describe('Navigation - Path handling', () => {
   let originalPushState: any;
   let originalDispatchEvent: any;
 
@@ -215,7 +211,7 @@ describe("Navigation - Path handling", () => {
     setupWindowMock();
     originalPushState = (globalThis as any).window.history.pushState;
     originalDispatchEvent = (globalThis as any).window.dispatchEvent;
-    
+
     (globalThis as any).window.history.pushState = mock(() => {}) as any;
     (globalThis as any).window.dispatchEvent = mock(() => true);
   });
@@ -227,151 +223,151 @@ describe("Navigation - Path handling", () => {
     }
   });
 
-  describe("Root path handling", () => {
-    test("should navigate to root path correctly", () => {
+  describe('Root path handling', () => {
+    test('should navigate to root path correctly', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/");
-      
-      expect(pushStateCalls[0].url).toBe("/");
+
+      navigateTo('/');
+
+      expect(pushStateCalls[0]!.url).toBe('/');
     });
 
-    test("should handle root path with handler", () => {
-      const handler = createNavigationHandler("/");
+    test('should handle root path with handler', () => {
+      const handler = createNavigationHandler('/');
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
+
       const mockEvent = {
-        preventDefault: mock(() => {})
+        preventDefault: mock(() => {}),
       } as any;
-      
+
       handler(mockEvent);
-      
-      expect(pushStateCalls[0].url).toBe("/");
+
+      expect(pushStateCalls[0]!.url).toBe('/');
     });
   });
 
-  describe("Nested paths handling", () => {
-    test("should handle single level nested path", () => {
+  describe('Nested paths handling', () => {
+    test('should handle single level nested path', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/about");
-      
-      expect(pushStateCalls[0].url).toBe("/about");
+
+      navigateTo('/about');
+
+      expect(pushStateCalls[0]!.url).toBe('/about');
     });
 
-    test("should handle multi-level nested paths", () => {
+    test('should handle multi-level nested paths', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/blog/category/post-1");
-      
-      expect(pushStateCalls[0].url).toBe("/blog/category/post-1");
+
+      navigateTo('/blog/category/post-1');
+
+      expect(pushStateCalls[0]!.url).toBe('/blog/category/post-1');
     });
 
-    test("should handle paths with trailing slash", () => {
+    test('should handle paths with trailing slash', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/about/");
-      
-      expect(pushStateCalls[0].url).toBe("/about/");
+
+      navigateTo('/about/');
+
+      expect(pushStateCalls[0]!.url).toBe('/about/');
     });
   });
 
-  describe("Special path handling", () => {
-    test("should handle paths with query parameters", () => {
+  describe('Special path handling', () => {
+    test('should handle paths with query parameters', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/search?q=test&page=1");
-      
-      expect(pushStateCalls[0].url).toBe("/search?q=test&page=1");
+
+      navigateTo('/search?q=test&page=1');
+
+      expect(pushStateCalls[0]!.url).toBe('/search?q=test&page=1');
     });
 
-    test("should handle paths with hash fragments", () => {
+    test('should handle paths with hash fragments', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/page#section");
-      
-      expect(pushStateCalls[0].url).toBe("/page#section");
+
+      navigateTo('/page#section');
+
+      expect(pushStateCalls[0]!.url).toBe('/page#section');
     });
 
-    test("should handle paths with both query and hash", () => {
+    test('should handle paths with both query and hash', () => {
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
-      navigateTo("/page?param=value#section");
-      
-      expect(pushStateCalls[0].url).toBe("/page?param=value#section");
+
+      navigateTo('/page?param=value#section');
+
+      expect(pushStateCalls[0]!.url).toBe('/page?param=value#section');
     });
   });
 
-  describe("Link component behavior simulation", () => {
-    test("should simulate Link component click behavior", () => {
-      const handler = createNavigationHandler("/link-target");
+  describe('Link component behavior simulation', () => {
+    test('should simulate Link component click behavior', () => {
+      const handler = createNavigationHandler('/link-target');
       const mockEvent = {
         preventDefault: mock(() => {}),
-        type: "click",
-        target: {}
+        type: 'click',
+        target: {},
       } as any;
-      
+
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
+
       handler(mockEvent);
-      
+
       // Should prevent default (no page reload)
       expect(mockEvent.preventDefault).toHaveBeenCalled();
       // Should navigate using history API
       expect(pushStateCalls.length).toBe(1);
-      expect(pushStateCalls[0].url).toBe("/link-target");
+      expect(pushStateCalls[0]!.url).toBe('/link-target');
     });
 
-    test("should handle multiple Link clicks", () => {
-      const handler1 = createNavigationHandler("/page1");
-      const handler2 = createNavigationHandler("/page2");
-      
+    test('should handle multiple Link clicks', () => {
+      const handler1 = createNavigationHandler('/page1');
+      const handler2 = createNavigationHandler('/page2');
+
       const pushStateCalls: Array<{ url: string }> = [];
-      (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+      (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
         pushStateCalls.push({ url });
       }) as any;
-      
+
       const mockEvent1 = { preventDefault: mock(() => {}) } as any;
       const mockEvent2 = { preventDefault: mock(() => {}) } as any;
-      
+
       handler1(mockEvent1);
       handler2(mockEvent2);
-      
+
       expect(pushStateCalls.length).toBe(2);
-      expect(pushStateCalls[0].url).toBe("/page1");
-      expect(pushStateCalls[1].url).toBe("/page2");
+      expect(pushStateCalls[0]!.url).toBe('/page1');
+      expect(pushStateCalls[1]!.url).toBe('/page2');
     });
   });
 });
 
-describe("Navigation - Integration scenarios", () => {
+describe('Navigation - Integration scenarios', () => {
   let originalPushState: any;
   let originalDispatchEvent: any;
   let pushStateCalls: Array<{ url: string }>;
@@ -381,14 +377,14 @@ describe("Navigation - Integration scenarios", () => {
     setupWindowMock();
     originalPushState = (globalThis as any).window.history.pushState;
     originalDispatchEvent = (globalThis as any).window.dispatchEvent;
-    
+
     pushStateCalls = [];
     dispatchedEvents = [];
-    
-    (globalThis as any).window.history.pushState = mock((state: any, title: string, url: string) => {
+
+    (globalThis as any).window.history.pushState = mock((_state: any, _title: string, url: string) => {
       pushStateCalls.push({ url });
     }) as any;
-    
+
     (globalThis as any).window.dispatchEvent = mock((event: Event) => {
       dispatchedEvents.push(event);
       return true;
@@ -402,38 +398,38 @@ describe("Navigation - Integration scenarios", () => {
     }
   });
 
-  test("should handle navigation sequence", () => {
-    navigateTo("/");
-    navigateTo("/about");
-    navigateTo("/contact");
-    
+  test('should handle navigation sequence', () => {
+    navigateTo('/');
+    navigateTo('/about');
+    navigateTo('/contact');
+
     expect(pushStateCalls.length).toBe(3);
-    expect(pushStateCalls[0].url).toBe("/");
-    expect(pushStateCalls[1].url).toBe("/about");
-    expect(pushStateCalls[2].url).toBe("/contact");
+    expect(pushStateCalls[0]!.url).toBe('/');
+    expect(pushStateCalls[1]!.url).toBe('/about');
+    expect(pushStateCalls[2]!.url).toBe('/contact');
     expect(dispatchedEvents.length).toBe(3);
   });
 
-  test("should work with navigation handler in sequence", () => {
-    const handler1 = createNavigationHandler("/page1");
-    const handler2 = createNavigationHandler("/page2");
-    
+  test('should work with navigation handler in sequence', () => {
+    const handler1 = createNavigationHandler('/page1');
+    const handler2 = createNavigationHandler('/page2');
+
     const mockEvent = {
-      preventDefault: mock(() => {})
+      preventDefault: mock(() => {}),
     } as any;
-    
+
     handler1(mockEvent);
     handler2(mockEvent);
-    
+
     expect(pushStateCalls.length).toBe(2);
   });
 
-  test("should handle back/forward navigation simulation", () => {
+  test('should handle back/forward navigation simulation', () => {
     // Navigate forward
-    navigateTo("/page1");
-    navigateTo("/page2");
-    navigateTo("/page3");
-    
+    navigateTo('/page1');
+    navigateTo('/page2');
+    navigateTo('/page3');
+
     // Simulate back button (this would normally be handled by popstate listener)
     // The navigateTo function doesn't handle back/forward, but the router does
     expect(pushStateCalls.length).toBe(3);

package/lib/client/navigation.ts

@@ -20,4 +20,3 @@ export function createNavigationHandler(path: string): (e: Event) => void {
     navigateTo(path);
   };
 }
-

package/lib/client/responsiveStyleResolver.knownTokens.test.ts

@@ -0,0 +1,71 @@
+import { describe, test, expect, afterEach } from 'bun:test';
+import { loadKnownTokens, getCachedKnownTokens, clearKnownTokensCache } from './responsiveStyleResolver';
+
+/**
+ * The design-canvas token cache: it feeds `knownTokens` into the utility-CSS generator so bare
+ * color-token classes (`bg-muted`) expand to `background-color: var(--muted)` in select/design mode.
+ * Mirrors meno-astro's `readKnownTokensSync` — color names across every theme + variable cssVars.
+ */
+
+const realFetch = globalThis.fetch;
+
+function stubFetch(routes: Record<string, unknown>) {
+  globalThis.fetch = (async (input: RequestInfo | URL) => {
+    const url = String(input);
+    const path = url.startsWith('/') ? url : new URL(url).pathname;
+    if (path in routes) {
+      return new Response(JSON.stringify(routes[path]), { status: 200 });
+    }
+    return new Response('not found', { status: 404 });
+  }) as typeof fetch;
+}
+
+afterEach(() => {
+  globalThis.fetch = realFetch;
+  clearKnownTokensCache();
+});
+
+describe('loadKnownTokens (design-canvas token cache)', () => {
+  test('collects color names across every theme + variable cssVars (minus --)', async () => {
+    stubFetch({
+      '/api/colors-config': {
+        themes: {
+          light: { colors: { text: '#1f2937', bg: '#ffffff', muted: '#6b7280', border: '#e5e7eb' } },
+          dark: { colors: { text: '#fff', accentDark: '#111' } }, // a name only in another theme
+        },
+      },
+      '/api/variables-status': { config: { variables: [{ cssVar: '--bs' }, { cssVar: '--fs-fs' }] } },
+    });
+
+    const tokens = await loadKnownTokens();
+    for (const name of ['text', 'bg', 'muted', 'border', 'accentDark', 'bs', 'fs-fs']) {
+      expect(tokens.has(name)).toBe(true);
+    }
+    expect(tokens.has('colors')).toBe(false); // not the wrapper key
+    // Cached synchronously after load.
+    expect(getCachedKnownTokens()?.has('muted')).toBe(true);
+  });
+
+  test('is null before load, deduped across concurrent calls', async () => {
+    let colorsHits = 0;
+    globalThis.fetch = (async (input: RequestInfo | URL) => {
+      const path = String(input);
+      if (path === '/api/colors-config') {
+        colorsHits++;
+        return new Response(JSON.stringify({ themes: { light: { colors: { muted: '#6b7280' } } } }), { status: 200 });
+      }
+      return new Response(JSON.stringify({ config: { variables: [] } }), { status: 200 });
+    }) as typeof fetch;
+
+    expect(getCachedKnownTokens()).toBeNull();
+    const [a, b] = await Promise.all([loadKnownTokens(), loadKnownTokens()]);
+    expect(a).toBe(b); // same cached set
+    expect(colorsHits).toBe(1); // deduped — only fetched once
+  });
+
+  test('survives a failed fetch (empty set, no throw)', async () => {
+    globalThis.fetch = (async () => new Response('boom', { status: 500 })) as typeof fetch;
+    const tokens = await loadKnownTokens();
+    expect(tokens.size).toBe(0);
+  });
+});