meno-core 1.0.53 → 1.0.54

package/lib/client/core/builders/localeListBuilder.ts

@@ -3,25 +3,29 @@
  * Handles rendering of locale/language switcher nodes
  */
 
-import { createElement as h } from "react";
-import type { ReactElement } from "react";
-import type { LocaleListNode, StyleObject, ResponsiveStyleObject, InteractiveStyles } from "../../../shared/types";
-import { extractAttributesFromNode } from "../../../shared/attributeNodeUtils";
-import { responsiveStylesToClasses } from "../../../shared/utilityClassMapper";
-import { getCachedResponsiveScalesConfig } from "../../responsiveStyleResolver";
-import { pathToString } from "../../../shared/pathArrayUtils";
-import { generateElementClassName, type ElementClassContext } from "../../../shared/elementClassName";
-import { InteractiveStylesRegistry } from "../../InteractiveStylesRegistry";
-import { hasInteractiveStyleMappings, extractInteractiveStyleMappings, resolveExtractedMappings } from "../../../shared/interactiveStyleMappings";
-import { UtilityClassCollector } from "../../styles/UtilityClassCollector";
-import type { ElementRegistry } from "../../elementRegistry";
-import type { BuilderContext } from "./types";
+import { createElement as h } from 'react';
+import type { ReactElement } from 'react';
+import type { LocaleListNode, StyleObject, ResponsiveStyleObject, InteractiveStyles } from '../../../shared/types';
+import { extractAttributesFromNode } from '../../../shared/attributeNodeUtils';
+import { responsiveStylesToClasses } from '../../../shared/utilityClassMapper';
+import { getCachedResponsiveScalesConfig } from '../../responsiveStyleResolver';
+import { pathToString } from '../../../shared/pathArrayUtils';
+import { generateElementClassName, type ElementClassContext } from '../../../shared/elementClassName';
+import { InteractiveStylesRegistry } from '../../InteractiveStylesRegistry';
+import {
+  hasInteractiveStyleMappings,
+  extractInteractiveStyleMappings,
+  resolveExtractedMappings,
+} from '../../../shared/interactiveStyleMappings';
+import { UtilityClassCollector } from '../../styles/UtilityClassCollector';
+import type { ElementRegistry } from '../../elementRegistry';
+import type { BuilderContext } from './types';
 
 export interface LocaleListBuilderDeps {
   elementRegistry: ElementRegistry;
   getEffectiveParentComponentName: (
     componentContext: string | null,
-    parentComponentName: string | null
+    parentComponentName: string | null,
   ) => string | null;
   /** Optional getter for current page name (for interactive styles class generation) */
   getCurrentPageName?: () => string;
@@ -32,14 +36,16 @@ export interface LocaleListBuilderDeps {
 /**
  * Build a locale list node (language switcher)
  */
-export function buildLocaleList(
-  node: LocaleListNode,
-  ctx: BuilderContext,
-  deps: LocaleListBuilderDeps
-): ReactElement {
+export function buildLocaleList(node: LocaleListNode, ctx: BuilderContext, deps: LocaleListBuilderDeps): ReactElement {
   const {
-    key, elementPath, parentComponentName, componentContext, componentRootPath,
-    locale, i18nConfig, cmsItemIndexPath
+    key,
+    elementPath,
+    parentComponentName,
+    componentContext,
+    componentRootPath,
+    locale,
+    i18nConfig,
+    cmsItemIndexPath,
   } = ctx;
 
   const effectiveParentComponentName = deps.getEffectiveParentComponentName(componentContext, parentComponentName);
@@ -63,7 +69,7 @@ export function buildLocaleList(
           }
         }
       }
-    }
+    },
   };
 
   // Add CMS item index path for elements inside CMS lists
@@ -72,7 +78,7 @@ export function buildLocaleList(
   }
 
   // Start building className
-  let classNames: string[] = [];
+  const classNames: string[] = [];
 
   // Resolve fluid mode once for all conversions in this builder
   const scales = getCachedResponsiveScalesConfig();
@@ -80,10 +86,10 @@ export function buildLocaleList(
 
   // Convert container styles to utility classes
   if (node.style) {
-    const utilityClasses = responsiveStylesToClasses(
-      node.style as StyleObject | ResponsiveStyleObject,
-      { fluidActive, responsiveScales: scales ?? undefined }
-    );
+    const utilityClasses = responsiveStylesToClasses(node.style as StyleObject | ResponsiveStyleObject, {
+      fluidActive,
+      responsiveScales: scales ?? undefined,
+    });
     UtilityClassCollector.collect(utilityClasses);
     classNames.push(...utilityClasses);
   }
@@ -96,11 +102,10 @@ export function buildLocaleList(
   if ((nodeInteractiveStyles && nodeInteractiveStyles.length > 0) || nodeGenerateElementClass) {
     // Determine file type and name for element class generation
     const useComponentContext = Boolean(componentContext);
-    const fileType = useComponentContext ? 'component' : (deps.getCurrentFileType?.() || 'page');
-    const fileName = useComponentContext ? componentContext! : (deps.getCurrentPageName?.() || 'page');
-    const pathForClass = useComponentContext && componentRootPath
-      ? elementPath.slice(componentRootPath.length)
-      : elementPath;
+    const fileType = useComponentContext ? 'component' : deps.getCurrentFileType?.() || 'page';
+    const fileName = useComponentContext ? componentContext! : deps.getCurrentPageName?.() || 'page';
+    const pathForClass =
+      useComponentContext && componentRootPath ? elementPath.slice(componentRootPath.length) : elementPath;
 
     const elementClassCtx: ElementClassContext = {
       fileType,
@@ -131,10 +136,10 @@ export function buildLocaleList(
         const previewClasses: string[] = [];
         for (const rule of nodeInteractiveStyles) {
           if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
-            const styleClasses = responsiveStylesToClasses(
-              rule.style as StyleObject | ResponsiveStyleObject,
-              { fluidActive, responsiveScales: scales ?? undefined }
-            );
+            const styleClasses = responsiveStylesToClasses(rule.style as StyleObject | ResponsiveStyleObject, {
+              fluidActive,
+              responsiveScales: scales ?? undefined,
+            });
             UtilityClassCollector.collect(styleClasses);
             previewClasses.push(...styleClasses);
           }
@@ -151,9 +156,9 @@ export function buildLocaleList(
   // would be spread onto the React element below and override the className that
   // holds the utility classes derived from node.style.
   if ('class' in extractedAttributes || 'className' in extractedAttributes) {
-    const attrClass = ((extractedAttributes as Record<string, unknown>).class
-      ?? (extractedAttributes as Record<string, unknown>).className
-      ?? '') as string;
+    const attrClass = ((extractedAttributes as Record<string, unknown>).class ??
+      (extractedAttributes as Record<string, unknown>).className ??
+      '') as string;
     if (attrClass) {
       classNames.push(...attrClass.split(/\s+/));
     }
@@ -188,10 +193,30 @@ export function buildLocaleList(
   const currentLocaleCode = locale || i18nConfig?.defaultLocale || 'en';
 
   // Convert item styles, active item styles, separator styles, and flag styles to utility classes
-  const itemClasses = node.itemStyle ? responsiveStylesToClasses(node.itemStyle as StyleObject | ResponsiveStyleObject, { fluidActive, responsiveScales: scales ?? undefined }) : [];
-  const activeItemClasses = node.activeItemStyle ? responsiveStylesToClasses(node.activeItemStyle as StyleObject | ResponsiveStyleObject, { fluidActive, responsiveScales: scales ?? undefined }) : [];
-  const separatorClasses = node.separatorStyle ? responsiveStylesToClasses(node.separatorStyle as StyleObject | ResponsiveStyleObject, { fluidActive, responsiveScales: scales ?? undefined }) : [];
-  const flagClasses = node.flagStyle ? responsiveStylesToClasses(node.flagStyle as StyleObject | ResponsiveStyleObject, { fluidActive, responsiveScales: scales ?? undefined }) : [];
+  const itemClasses = node.itemStyle
+    ? responsiveStylesToClasses(node.itemStyle as StyleObject | ResponsiveStyleObject, {
+        fluidActive,
+        responsiveScales: scales ?? undefined,
+      })
+    : [];
+  const activeItemClasses = node.activeItemStyle
+    ? responsiveStylesToClasses(node.activeItemStyle as StyleObject | ResponsiveStyleObject, {
+        fluidActive,
+        responsiveScales: scales ?? undefined,
+      })
+    : [];
+  const separatorClasses = node.separatorStyle
+    ? responsiveStylesToClasses(node.separatorStyle as StyleObject | ResponsiveStyleObject, {
+        fluidActive,
+        responsiveScales: scales ?? undefined,
+      })
+    : [];
+  const flagClasses = node.flagStyle
+    ? responsiveStylesToClasses(node.flagStyle as StyleObject | ResponsiveStyleObject, {
+        fluidActive,
+        responsiveScales: scales ?? undefined,
+      })
+    : [];
   UtilityClassCollector.collect(itemClasses);
   UtilityClassCollector.collect(activeItemClasses);
   UtilityClassCollector.collect(separatorClasses);
@@ -206,21 +231,25 @@ export function buildLocaleList(
 
     // Add separator between links (empty span styled via separatorStyle)
     if (showSeparator && linkElements.length > 0) {
-      linkElements.push(h('span', {
-        key: `sep-${i}`,
-        className: separatorClasses.length > 0 ? separatorClasses.join(' ') : undefined
-      }));
+      linkElements.push(
+        h('span', {
+          key: `sep-${i}`,
+          className: separatorClasses.length > 0 ? separatorClasses.join(' ') : undefined,
+        }),
+      );
     }
 
     // Build link element content - flag icon (if enabled and exists) + nativeName in span
     const linkContent: (ReactElement | string)[] = [];
     if (showFlag && localeConfig.icon) {
-      linkContent.push(h('img', {
-        key: 'flag',
-        src: localeConfig.icon,
-        alt: `${localeConfig.name} flag`,
-        className: flagClasses.length > 0 ? flagClasses.join(' ') : undefined
-      }));
+      linkContent.push(
+        h('img', {
+          key: 'flag',
+          src: localeConfig.icon,
+          alt: `${localeConfig.name} flag`,
+          className: flagClasses.length > 0 ? flagClasses.join(' ') : undefined,
+        }),
+      );
     }
     // Get display text based on displayType (mirrors SSR logic)
     const displayType = node.displayType || 'nativeName';
@@ -241,13 +270,19 @@ export function buildLocaleList(
 
     // Current item gets both itemClasses + activeItemClasses (additive/override)
     const linkClasses = isCurrent ? [...itemClasses, ...activeItemClasses] : itemClasses;
-    linkElements.push(h('div', {
-      key: `locale-${localeConfig.code}`,
-      'data-current': isCurrent ? 'true' : 'false',
-      'data-locale': localeConfig.code,
-      className: linkClasses.length > 0 ? linkClasses.join(' ') : undefined,
-      style: { cursor: 'pointer' }
-    }, ...linkContent));
+    linkElements.push(
+      h(
+        'div',
+        {
+          key: `locale-${localeConfig.code}`,
+          'data-current': isCurrent ? 'true' : 'false',
+          'data-locale': localeConfig.code,
+          className: linkClasses.length > 0 ? linkClasses.join(' ') : undefined,
+          style: { cursor: 'pointer' },
+        },
+        ...linkContent,
+      ),
+    );
   }
 
   return h('div', localeListProps, linkElements);

package/lib/client/core/builders/types.ts

@@ -2,11 +2,11 @@
  * Shared types for ComponentBuilder modules
  */
 
-import type { ReactElement } from "react";
-import type { ComponentNode } from "../../../shared/types";
-import type { Path } from "../../../shared/pathArrayUtils";
-import type { I18nConfig } from "../../../shared/types/components";
-import type { CMSItem, ItemContext, TemplateContext } from "../../../shared/types/cms";
+import type { ReactElement } from 'react';
+import type { ComponentNode } from '../../../shared/types';
+import type { Path } from '../../../shared/pathArrayUtils';
+import type { I18nConfig } from '../../../shared/types/components';
+import type { CMSItem, ItemContext, TemplateContext } from '../../../shared/types/cms';
 
 export type ComponentProps = Record<string, unknown>;
 

package/lib/client/core/cmsTemplateProcessor.ts

@@ -60,11 +60,7 @@ function resolveI18nValue(value: I18nValue, locale: string, config: I18nConfig):
  * @param locale - Optional locale for i18n resolution (defaults to config's defaultLocale)
  * @returns Processed string with values filled in
  */
-export function processCMSTemplate(
-  template: string,
-  cmsItem: Record<string, unknown>,
-  locale?: string
-): string {
+export function processCMSTemplate(template: string, cmsItem: Record<string, unknown>, locale?: string): string {
   const config = getI18nConfig();
   const effectiveLocale = locale || config.defaultLocale;
 
@@ -94,7 +90,11 @@ export function processCMSTemplate(
     }
     // Handle rich-text markers - extract HTML content for interpolation
     // Mark with RAW_HTML_PREFIX so renderer knows not to escape
-    if (typeof value === 'object' && '__richtext__' in value && typeof (value as unknown as { html: string }).html === 'string') {
+    if (
+      typeof value === 'object' &&
+      '__richtext__' in value &&
+      typeof (value as unknown as { html: string }).html === 'string'
+    ) {
       return RAW_HTML_PREFIX + (value as unknown as { html: string }).html;
     }
     // Handle raw TipTap documents (fallback if not preprocessed)
@@ -118,7 +118,7 @@ export function processCMSTemplate(
 export function processCMSPropsTemplate(
   props: Record<string, unknown>,
   cmsItem: Record<string, unknown>,
-  locale?: string
+  locale?: string,
 ): Record<string, unknown> {
   const result: Record<string, unknown> = {};
 

package/lib/client/elementRegistry.ts

@@ -27,7 +27,7 @@ export class ElementRegistry {
     _componentName?: string | null,
     _isComponentRoot?: boolean,
     _props?: Record<string, unknown>,
-    _metadata?: Partial<ElementMetadata>
+    _metadata?: Partial<ElementMetadata>,
   ): void {
     // No-op in core - element tracking is editor-only
   }
@@ -81,7 +81,7 @@ export class ElementRegistry {
     _path: Path | string,
     _itemIndex: number,
     _element: HTMLElement | null,
-    _metadata?: Partial<ElementMetadata>
+    _metadata?: Partial<ElementMetadata>,
   ): void {
     // No-op in core - element tracking is editor-only
   }
@@ -105,7 +105,7 @@ let _elementRegistry: ElementRegistry = new ElementRegistry();
 export const elementRegistry: ElementRegistry = new Proxy({} as ElementRegistry, {
   get(_target, prop) {
     return (_elementRegistry as any)[prop];
-  }
+  },
 });
 
 /**

package/lib/client/fontFamiliesService.test.ts

@@ -1,9 +1,5 @@
 import { describe, test, expect, beforeEach, afterEach, mock } from 'bun:test';
-import {
-  fetchFontFamilies,
-  getCachedFontFamilies,
-  invalidateFontFamilies,
-} from './fontFamiliesService';
+import { fetchFontFamilies, getCachedFontFamilies, invalidateFontFamilies } from './fontFamiliesService';
 
 const realFetch = globalThis.fetch;
 
@@ -36,11 +32,7 @@ describe('fontFamiliesService', () => {
 
   test('fetchFontFamilies dedupes families that repeat across weights/unicode-ranges', async () => {
     mockFetchOnce({
-      fonts: [
-        { family: 'Fraunces', weight: 400 },
-        { family: 'Fraunces', weight: 700 },
-        { family: 'Inter' },
-      ],
+      fonts: [{ family: 'Fraunces', weight: 400 }, { family: 'Fraunces', weight: 700 }, { family: 'Inter' }],
     });
     const families = await fetchFontFamilies();
     expect(families).toEqual(['Fraunces', 'Inter']);

package/lib/client/fontFamiliesService.ts

@@ -15,7 +15,7 @@ function extractFamilyFromPath(path: string): string {
   const name = filename.replace(/\.(ttf|woff2?|otf)$/i, '');
   return name
     .split('-')
-    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
     .join(' ');
 }
 
@@ -38,8 +38,8 @@ export async function fetchFontFamilies(): Promise<string[]> {
   if (inFlight) return inFlight;
 
   inFlight = fetch('/api/config')
-    .then(res => (res.ok ? res.json() : { fonts: [] }))
-    .then(config => {
+    .then((res) => (res.ok ? res.json() : { fonts: [] }))
+    .then((config) => {
       cachedFamilies = extractFamilies(config.fonts);
       return cachedFamilies;
     })

package/lib/client/hmr/HMRManager.tsx

@@ -95,6 +95,14 @@ export function HMRManager({
     } else if (data.type === 'hmr:libraries-update') {
       // Dispatch custom event to trigger full page reload for library changes
       document.dispatchEvent(new CustomEvent('hmr-libraries-update'));
+    } else if (data.type === 'hmr:config-update') {
+      // project.config.json changed (e.g. a locale was added in the editor).
+      // Dispatch custom event so the Router refetches the i18n config and
+      // re-resolves the current route — without this, the canvas keeps the
+      // stale locale set and a freshly added locale's paths (/pl) 404 with
+      // "Page not found" until a full canvas reload. The studio frame has its
+      // own handler for the same WS message (editor.tsx); this is the canvas's.
+      document.dispatchEvent(new CustomEvent('hmr-config-update'));
     }
   };
 

package/lib/client/hmrCssReload.ts

@@ -32,7 +32,7 @@ async function injectUpdatedThemeCSS(): Promise<void> {
     const themesResponse = await fetch('/api/themes');
     if (!themesResponse.ok) return;
 
-    const themesData = await themesResponse.json() as {
+    const themesData = (await themesResponse.json()) as {
       themes: Array<{ name: string; label: string }>;
       default: string;
     };
@@ -40,9 +40,7 @@ async function injectUpdatedThemeCSS(): Promise<void> {
     // Fetch colors for each theme
     const themeColors: Record<string, any> = {};
     for (const theme of themesData.themes) {
-      const colorResponse = await fetch(
-        `/api/colors?theme=${encodeURIComponent(theme.name)}`
-      );
+      const colorResponse = await fetch(`/api/colors?theme=${encodeURIComponent(theme.name)}`);
       if (colorResponse.ok) {
         themeColors[theme.name] = (await colorResponse.json()).colors;
       }
@@ -140,21 +138,29 @@ export function setupCssHmrListeners(): void {
 
   if (!window.__hmrColorsInitialized) {
     window.__hmrColorsInitialized = true;
-    document.addEventListener('hmr-colors-update', () => { void injectUpdatedThemeCSS(); });
+    document.addEventListener('hmr-colors-update', () => {
+      void injectUpdatedThemeCSS();
+    });
   }
 
   if (!window.__hmrVariablesCSSInitialized) {
     window.__hmrVariablesCSSInitialized = true;
-    document.addEventListener('hmr-variables-update', () => { void injectUpdatedVariablesCSS(); });
+    document.addEventListener('hmr-variables-update', () => {
+      void injectUpdatedVariablesCSS();
+    });
   }
 
   if (!window.__hmrFontsCSSInitialized) {
     window.__hmrFontsCSSInitialized = true;
-    document.addEventListener('hmr-fonts-update', () => { void injectUpdatedFontsCSS(); });
+    document.addEventListener('hmr-fonts-update', () => {
+      void injectUpdatedFontsCSS();
+    });
   }
 
   if (!window.__hmrLibrariesInitialized) {
     window.__hmrLibrariesInitialized = true;
-    document.addEventListener('hmr-libraries-update', () => { location.reload(); });
+    document.addEventListener('hmr-libraries-update', () => {
+      location.reload();
+    });
   }
 }

package/lib/client/hmrWebSocket.ts

@@ -56,16 +56,14 @@ 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) {
       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();
   }
@@ -102,9 +100,8 @@ export class HMRWebSocket {
   }
 
   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();
@@ -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');