meno-core 1.0.53 → 1.1.0

package/lib/client/hmrWebSocket.ts

@@ -23,7 +23,7 @@ export class HMRWebSocket {
   private heartbeatInterval: ReturnType<typeof setInterval> | null = null;
   private lastPongTime = 0;
   private isIntentionallyClosed = false;
-  private messageQueue: any[] = [];
+  private messageQueue: unknown[] = [];
 
   constructor(config: HMRWebSocketConfig) {
     this.config = {
@@ -56,17 +56,15 @@ export class HMRWebSocket {
 
     this.isIntentionallyClosed = false;
     this.config.onStatusChange('connecting');
-    
 
     try {
       this.ws = new WebSocket(this.config.url);
-      
+
       this.ws.onopen = () => this.handleOpen();
       this.ws.onmessage = (event) => this.handleMessage(event);
       this.ws.onerror = (error) => this.handleError(error);
       this.ws.onclose = (event) => this.handleClose(event);
-      
-    } catch (error) {
+    } catch (_error) {
       this.scheduleReconnect();
     }
   }
@@ -74,10 +72,10 @@ export class HMRWebSocket {
   private handleOpen(): void {
     this.reconnectAttempts = 0;
     this.config.onStatusChange('connected');
-    
+
     // Start heartbeat
     this.startHeartbeat();
-    
+
     // Flush queued messages
     this.flushMessageQueue();
   }
@@ -97,14 +95,13 @@ export class HMRWebSocket {
     }
   }
 
-  private handleError(error: Event): void {
+  private handleError(_error: Event): void {
     this.config.onStatusChange('error');
   }
 
-  private handleClose(event: CloseEvent): void {
-    
+  private handleClose(_event: CloseEvent): void {
     this.stopHeartbeat();
-    
+
     if (!this.isIntentionallyClosed) {
       this.config.onStatusChange('disconnected');
       this.scheduleReconnect();
@@ -134,15 +131,14 @@ export class HMRWebSocket {
 
     // Exponential backoff with jitter
     const delay = Math.min(
-      this.config.initialReconnectDelay * Math.pow(2, this.reconnectAttempts),
-      this.config.maxReconnectDelay
+      this.config.initialReconnectDelay * 2 ** this.reconnectAttempts,
+      this.config.maxReconnectDelay,
     );
-    
+
     // Add jitter (±25%)
     const jitter = delay * 0.25 * (Math.random() - 0.5);
     const finalDelay = Math.max(delay + jitter, 100);
 
-    
     this.reconnectTimeout = setTimeout(() => {
       this.reconnectAttempts++;
       this.connect();
@@ -192,7 +188,7 @@ export class HMRWebSocket {
   /**
    * Send a message (queues if disconnected)
    */
-  send(data: any): void {
+  send(data: unknown): void {
     if (this.ws?.readyState === WebSocket.OPEN) {
       this.ws.send(typeof data === 'string' ? data : JSON.stringify(data));
     } else {
@@ -205,7 +201,7 @@ export class HMRWebSocket {
    */
   getStatus(): 'connecting' | 'connected' | 'disconnected' | 'closed' {
     if (!this.ws) return 'disconnected';
-    
+
     switch (this.ws.readyState) {
       case WebSocket.CONNECTING:
         return 'connecting';
@@ -225,7 +221,7 @@ export class HMRWebSocket {
   close(): void {
     this.isIntentionallyClosed = true;
     this.stopHeartbeat();
-    
+
     if (this.reconnectTimeout) {
       clearTimeout(this.reconnectTimeout);
       this.reconnectTimeout = null;
@@ -266,4 +262,3 @@ export class HMRWebSocket {
     this.config.onStatusChange = handler;
   }
 }
-

package/lib/client/hooks/useColorVariables.test.ts

@@ -12,10 +12,10 @@ describe('useColorVariables utilities', () => {
     test('returns all color variables when input is empty', () => {
       const colors: ColorVariables = {
         colors: {
-          'primary': '#007acc',
-          'secondary': '#6b7280',
-          'background': '#ffffff'
-        }
+          primary: '#007acc',
+          secondary: '#6b7280',
+          background: '#ffffff',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, '');
@@ -28,11 +28,11 @@ describe('useColorVariables utilities', () => {
     test('filters color variables by input', () => {
       const colors: ColorVariables = {
         colors: {
-          'primary': '#007acc',
+          primary: '#007acc',
           'primary-light': '#0098ff',
-          'secondary': '#6b7280',
-          'background': '#ffffff'
-        }
+          secondary: '#6b7280',
+          background: '#ffffff',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, 'primary');
@@ -44,9 +44,9 @@ describe('useColorVariables utilities', () => {
     test('is case insensitive', () => {
       const colors: ColorVariables = {
         colors: {
-          'Primary': '#007acc',
-          'SECONDARY': '#6b7280'
-        }
+          Primary: '#007acc',
+          SECONDARY: '#6b7280',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, 'primary');
@@ -57,9 +57,9 @@ describe('useColorVariables utilities', () => {
     test('handles whitespace in input', () => {
       const colors: ColorVariables = {
         colors: {
-          'primary': '#007acc',
-          'secondary': '#6b7280'
-        }
+          primary: '#007acc',
+          secondary: '#6b7280',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, '  primary  ');
@@ -72,8 +72,8 @@ describe('useColorVariables utilities', () => {
         colors: {
           'text-primary': '#000000',
           'text-secondary': '#6b7280',
-          'background': '#ffffff'
-        }
+          background: '#ffffff',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, 'text');
@@ -85,8 +85,8 @@ describe('useColorVariables utilities', () => {
     test('formats variables correctly', () => {
       const colors: ColorVariables = {
         colors: {
-          'my-color': '#ff0000'
-        }
+          'my-color': '#ff0000',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, 'my');
@@ -96,9 +96,9 @@ describe('useColorVariables utilities', () => {
     test('returns empty array when no matches', () => {
       const colors: ColorVariables = {
         colors: {
-          'primary': '#007acc',
-          'secondary': '#6b7280'
-        }
+          primary: '#007acc',
+          secondary: '#6b7280',
+        },
       };
 
       const result = getColorVariableSuggestions(colors, 'nonexistent');

package/lib/client/hooks/useColorVariables.ts

@@ -3,13 +3,13 @@
  */
 
 import { useState, useEffect, useRef } from 'react';
-import type { ColorVariables, ThemeEntry, HMRMessage } from '../../shared/types';
+import type { ColorVariables, ThemeEntry } from '../../shared/types';
 import { applyNonce } from '../styles/cspNonce';
 
 let cachedColors: Record<string, ColorVariables> = {};
 let cachedThemes: ThemeEntry[] | null = null;
 let cachedDefaultTheme: string | null = null;
-let hmrCallbacks: Set<() => void> = new Set();
+const hmrCallbacks: Set<() => void> = new Set();
 
 // Setup HMR listener immediately when module loads
 function initializeHMRListener() {
@@ -30,7 +30,9 @@ function initializeHMRListener() {
     await injectUpdatedThemeCSS();
 
     // Notify all listeners to refresh their data
-    hmrCallbacks.forEach(callback => callback());
+    hmrCallbacks.forEach((callback) => {
+      callback();
+    });
   });
 }
 
@@ -48,10 +50,10 @@ async function injectUpdatedThemeCSS() {
     const response = await fetch('/api/themes');
     if (!response.ok) return;
 
-    const data = await response.json() as { themes: Array<{ name: string; label: string }>; default: string };
+    const data = (await response.json()) as { themes: Array<{ name: string; label: string }>; default: string };
 
     // Fetch all theme colors
-    const themeColors: Record<string, any> = {};
+    const themeColors: Record<string, Record<string, string>> = {};
     for (const theme of data.themes) {
       const colorResponse = await fetch(`/api/colors?theme=${encodeURIComponent(theme.name)}`);
       if (colorResponse.ok) {
@@ -62,15 +64,15 @@ async function injectUpdatedThemeCSS() {
     // Also get default theme colors
     const defaultResponse = await fetch('/api/colors');
     if (defaultResponse.ok) {
-      themeColors['default'] = (await defaultResponse.json()).colors;
+      themeColors.default = (await defaultResponse.json()).colors;
     }
 
     // Generate CSS
     let css = '';
 
     // Default theme in :root
-    if (themeColors['default']) {
-      const vars = Object.entries(themeColors['default'])
+    if (themeColors.default) {
+      const vars = Object.entries(themeColors.default)
         .map(([name, value]) => `  --${name}: ${value};`)
         .join('\n');
       css += `:root {\n${vars}\n}\n\n`;
@@ -78,8 +80,9 @@ async function injectUpdatedThemeCSS() {
 
     // Each theme in [theme="..."]
     for (const theme of data.themes) {
-      if (themeColors[theme.name]) {
-        const vars = Object.entries(themeColors[theme.name])
+      const themeVars = themeColors[theme.name];
+      if (themeVars) {
+        const vars = Object.entries(themeVars)
           .map(([name, value]) => `  --${name}: ${value};`)
           .join('\n');
         css += `[theme="${theme.name}"] {\n${vars}\n}\n\n`;
@@ -94,7 +97,7 @@ async function injectUpdatedThemeCSS() {
       applyNonce(themeStyleTag);
       // Insert after the main style tag
       const mainStyle = document.querySelector('style');
-      if (mainStyle && mainStyle.nextSibling) {
+      if (mainStyle?.nextSibling) {
         document.head.insertBefore(themeStyleTag, mainStyle.nextSibling);
       } else {
         document.head.appendChild(themeStyleTag);
@@ -109,7 +112,9 @@ async function injectUpdatedThemeCSS() {
 }
 
 export function useColorVariables(themeName?: string) {
-  const [colors, setColors] = useState<ColorVariables | null>(themeName && cachedColors[themeName] ? cachedColors[themeName] : null);
+  const [colors, setColors] = useState<ColorVariables | null>(
+    themeName && cachedColors[themeName] ? cachedColors[themeName] : null,
+  );
   const [loading, setLoading] = useState(!cachedColors[themeName || 'default']);
   const [error, setError] = useState<Error | null>(null);
   const callbackRef = useRef<(() => void) | null>(null);
@@ -125,7 +130,7 @@ export function useColorVariables(themeName?: string) {
         if (!response.ok) {
           throw new Error('Failed to fetch colors');
         }
-        const data = await response.json() as ColorVariables;
+        const data = (await response.json()) as ColorVariables;
         cachedColors[theme] = data;
         setColors(data);
         setError(null);
@@ -157,7 +162,7 @@ export function useColorVariables(themeName?: string) {
         if (!response.ok) {
           throw new Error('Failed to fetch colors');
         }
-        const data = await response.json() as ColorVariables;
+        const data = (await response.json()) as ColorVariables;
         cachedColors[theme] = data;
         setColors(data);
         setError(null);
@@ -206,7 +211,7 @@ export function useThemes() {
         if (!response.ok) {
           throw new Error('Failed to fetch themes');
         }
-        const data = await response.json() as { themes: ThemeEntry[]; default: string };
+        const data = (await response.json()) as { themes: ThemeEntry[]; default: string };
         cachedThemes = data.themes;
         cachedDefaultTheme = data.default;
         setThemes(data.themes);
@@ -234,13 +239,13 @@ export function getColorVariableSuggestions(colors: ColorVariables | null, input
 
   const normalizedInput = input.trim().toLowerCase();
   if (!normalizedInput) {
-    return Object.keys(colors.colors).map(name => `var(--${name})`);
+    return Object.keys(colors.colors).map((name) => `var(--${name})`);
   }
 
   // Filter color variable names that match the input
   return Object.keys(colors.colors)
-    .filter(name => name.toLowerCase().includes(normalizedInput) || normalizedInput.includes(name.toLowerCase()))
-    .map(name => `var(--${name})`);
+    .filter((name) => name.toLowerCase().includes(normalizedInput) || normalizedInput.includes(name.toLowerCase()))
+    .map((name) => `var(--${name})`);
 }
 
 /**

package/lib/client/hooks/usePropertyAutocomplete.ts

@@ -3,7 +3,7 @@
  * Handles property input, suggestions, and keyboard navigation
  */
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { filterCSSProperties } from '../../shared/cssProperties';
 
 export function usePropertyAutocomplete(initialProperty: string = '') {
@@ -17,12 +17,10 @@ export function usePropertyAutocomplete(initialProperty: string = '') {
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'ArrowDown') {
       e.preventDefault();
-      setSelectedIndex(prev =>
-        prev < suggestions.length - 1 ? prev + 1 : prev
-      );
+      setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : prev));
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
-      setSelectedIndex(prev => prev > 0 ? prev - 1 : -1);
+      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1));
     }
   };
 
@@ -35,6 +33,6 @@ export function usePropertyAutocomplete(initialProperty: string = '') {
     setSelectedIndex,
     suggestions,
     inputRef,
-    handleKeyDown
+    handleKeyDown,
   };
 }

package/lib/client/hooks/useVariables.ts

@@ -6,7 +6,7 @@ import { useState, useEffect, useRef } from 'react';
 import type { CSSVariable } from '../../shared/types/variables';
 
 let cachedVariables: CSSVariable[] | null = null;
-let hmrCallbacks: Set<() => void> = new Set();
+const hmrCallbacks: Set<() => void> = new Set();
 
 // Setup HMR listener immediately when module loads
 function initializeHMRListener() {
@@ -22,7 +22,9 @@ function initializeHMRListener() {
     cachedVariables = null;
 
     // Notify all listeners to refresh their data
-    hmrCallbacks.forEach(callback => callback());
+    hmrCallbacks.forEach((callback) => {
+      callback();
+    });
   });
 }
 
@@ -45,7 +47,7 @@ export function useVariables() {
         if (!response.ok) {
           throw new Error('Failed to fetch variables');
         }
-        const data = await response.json() as { status: string; config: { variables: CSSVariable[] } };
+        const data = (await response.json()) as { status: string; config: { variables: CSSVariable[] } };
         cachedVariables = data.config.variables;
         setVariables(cachedVariables);
         setError(null);
@@ -76,7 +78,7 @@ export function useVariables() {
         if (!response.ok) {
           throw new Error('Failed to fetch variables');
         }
-        const data = await response.json() as { status: string; config: { variables: CSSVariable[] } };
+        const data = (await response.json()) as { status: string; config: { variables: CSSVariable[] } };
         cachedVariables = data.config.variables;
         setVariables(cachedVariables);
         setError(null);

package/lib/client/hydration/HydrationUtils.test.ts

@@ -1,7 +1,7 @@
-import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
-import { detectSSRContent, getInitialLoadingState } from "./HydrationUtils";
+import { test, expect, describe, beforeEach, afterEach, mock } from 'bun:test';
+import { detectSSRContent, getInitialLoadingState } from './HydrationUtils';
 
-describe("HydrationUtils", () => {
+describe('HydrationUtils', () => {
   let originalDocument: Document | undefined;
   let originalWindow: (Window & typeof globalThis) | undefined;
   let mockGetElementById: ReturnType<typeof mock>;
@@ -22,11 +22,11 @@ describe("HydrationUtils", () => {
     }
   });
 
-  describe("detectSSRContent", () => {
-    test("should return true when root element exists with children", () => {
+  describe('detectSSRContent', () => {
+    test('should return true when root element exists with children', () => {
       // Create a mock root element with children
       const mockRoot = {
-        id: "root",
+        id: 'root',
         children: {
           length: 1,
         },
@@ -40,13 +40,13 @@ describe("HydrationUtils", () => {
 
       const result = detectSSRContent();
       expect(result).toBe(true);
-      expect(mockGetElementById).toHaveBeenCalledWith("root");
+      expect(mockGetElementById).toHaveBeenCalledWith('root');
     });
 
-    test("should return false when root element exists without children", () => {
+    test('should return false when root element exists without children', () => {
       // Create a mock root element without children
       const mockRoot = {
-        id: "root",
+        id: 'root',
         children: {
           length: 0,
         },
@@ -60,10 +60,10 @@ describe("HydrationUtils", () => {
 
       const result = detectSSRContent();
       expect(result).toBe(false);
-      expect(mockGetElementById).toHaveBeenCalledWith("root");
+      expect(mockGetElementById).toHaveBeenCalledWith('root');
     });
 
-    test("should return false when root element does not exist", () => {
+    test('should return false when root element does not exist', () => {
       // Mock getElementById to return null
       mockGetElementById = mock(() => null);
       global.window = {} as any;
@@ -73,14 +73,14 @@ describe("HydrationUtils", () => {
 
       const result = detectSSRContent();
       expect(result).toBe(false);
-      expect(mockGetElementById).toHaveBeenCalledWith("root");
+      expect(mockGetElementById).toHaveBeenCalledWith('root');
     });
 
-    test("should return false when window is undefined (SSR environment)", () => {
+    test('should return false when window is undefined (SSR environment)', () => {
       // Mock SSR environment
       const originalWindow = globalThis.window;
       const originalDocument = globalThis.document;
-      
+
       // @ts-expect-error - intentionally removing window for SSR test
       delete globalThis.window;
       // @ts-expect-error - intentionally removing document for SSR test
@@ -94,10 +94,10 @@ describe("HydrationUtils", () => {
       globalThis.document = originalDocument;
     });
 
-    test("should return false when document is undefined", () => {
+    test('should return false when document is undefined', () => {
       // Mock environment without document
       const originalDocument = globalThis.document;
-      
+
       // @ts-expect-error - intentionally removing document for test
       delete globalThis.document;
 
@@ -108,10 +108,10 @@ describe("HydrationUtils", () => {
       globalThis.document = originalDocument;
     });
 
-    test("should handle root element with multiple children", () => {
+    test('should handle root element with multiple children', () => {
       // Create a mock root element with multiple children
       const mockRoot = {
-        id: "root",
+        id: 'root',
         children: {
           length: 3,
         },
@@ -125,30 +125,29 @@ describe("HydrationUtils", () => {
 
       const result = detectSSRContent();
       expect(result).toBe(true);
-      expect(mockGetElementById).toHaveBeenCalledWith("root");
+      expect(mockGetElementById).toHaveBeenCalledWith('root');
     });
   });
 
-  describe("getInitialLoadingState", () => {
-    test("should return false when SSR content exists (smooth hydration)", () => {
+  describe('getInitialLoadingState', () => {
+    test('should return false when SSR content exists (smooth hydration)', () => {
       const result = getInitialLoadingState(true);
       expect(result).toBe(false);
     });
 
-    test("should return true when no SSR content exists (show loading)", () => {
+    test('should return true when no SSR content exists (show loading)', () => {
       const result = getInitialLoadingState(false);
       expect(result).toBe(true);
     });
 
-    test("should handle edge case with explicit false", () => {
+    test('should handle edge case with explicit false', () => {
       const result = getInitialLoadingState(false);
       expect(result).toBe(true);
     });
 
-    test("should handle edge case with explicit true", () => {
+    test('should handle edge case with explicit true', () => {
       const result = getInitialLoadingState(true);
       expect(result).toBe(false);
     });
   });
 });
-

package/lib/client/hydration/HydrationUtils.ts

@@ -6,7 +6,7 @@
 /**
  * Detects if server-side rendered content exists in the DOM.
  * Checks if the root element has children, which indicates SSR rendered content.
- * 
+ *
  * @returns true if SSR content is detected, false otherwise
  */
 export function detectSSRContent(): boolean {
@@ -16,14 +16,14 @@ export function detectSSRContent(): boolean {
   }
 
   const rootElement = document.getElementById('root');
-  
+
   // SSR content exists if root element has children
   return rootElement !== null && rootElement.children.length > 0;
 }
 
 /**
  * Determines the initial loading state based on SSR content presence.
- * 
+ *
  * @param hasSSRContent - Whether SSR content was detected
  * @returns false if SSR content exists (for smooth hydration), true otherwise
  */
@@ -32,4 +32,3 @@ export function getInitialLoadingState(hasSSRContent: boolean): boolean {
   // If no SSR content, start with loading=true to show loading state
   return !hasSSRContent;
 }
-

package/lib/client/i18nConfigService.test.ts

@@ -1,10 +1,5 @@
 import { describe, test, expect, beforeEach } from 'bun:test';
-import {
-  getI18nConfig,
-  isI18nConfigLoaded,
-  invalidateI18nConfig,
-  setI18nConfig,
-} from './i18nConfigService';
+import { getI18nConfig, isI18nConfigLoaded, invalidateI18nConfig, setI18nConfig } from './i18nConfigService';
 import { DEFAULT_I18N_CONFIG } from '../shared/i18n';
 
 describe('i18nConfigService', () => {
@@ -51,7 +46,7 @@ describe('i18nConfigService', () => {
     test('sets config that can be retrieved', () => {
       const customConfig = {
         defaultLocale: 'de',
-        locales: [{ code: 'de', name: 'German', nativeName: 'Deutsch', langTag: 'de-DE' }]
+        locales: [{ code: 'de', name: 'German', nativeName: 'Deutsch', langTag: 'de-DE' }],
       };
       setI18nConfig(customConfig);
       const config = getI18nConfig();

package/lib/client/i18nConfigService.ts

@@ -26,13 +26,13 @@ export async function fetchI18nConfig(): Promise<I18nConfig> {
 
   // Create new request
   configPromise = fetch('/api/config')
-    .then(response => {
+    .then((response) => {
       if (!response.ok) {
         throw new Error('Failed to fetch config');
       }
       return response.json();
     })
-    .then(config => {
+    .then((config) => {
       cachedConfig = migrateI18nConfig(config.i18n);
       return cachedConfig;
     })