meno-core 1.0.53 → 1.1.0

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);
@@ -48,7 +54,7 @@ export function buildLocaleList(
   const extractedAttributes = extractAttributesFromNode(node as any);
 
   // Build locale list props
-  const localeListProps: Record<string, any> = {
+  const localeListProps: Record<string, unknown> = {
     key,
     'data-element-path': pathToString(elementPath),
     'data-locale-list': 'true',
@@ -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);
@@ -201,26 +226,31 @@ export function buildLocaleList(
   const linkElements: ReactElement[] = [];
   for (let i = 0; i < configLocales.length; i++) {
     const localeConfig = configLocales[i];
+    if (!localeConfig) continue;
     const isCurrent = localeConfig.code === currentLocaleCode;
     if (!showCurrent && isCurrent) continue;
 
     // 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';
@@ -232,7 +262,6 @@ export function buildLocaleList(
       case 'name':
         displayText = localeConfig.name;
         break;
-      case 'nativeName':
       default:
         displayText = localeConfig.nativeName;
         break;
@@ -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

@@ -7,7 +7,6 @@
 
 import type { I18nValue, I18nConfig } from '../../shared/types';
 import { getI18nConfig } from '../i18nConfigService';
-import { isRichTextMarker, richTextMarkerToHtml } from '../../shared/propResolver';
 import { tiptapToHtml } from '../../shared/richtext/tiptapToHtml';
 import { isTiptapDocument } from '../../shared/richtext/types';
 import { RAW_HTML_PREFIX } from '../../shared/constants';
@@ -60,15 +59,11 @@ 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;
 
-  return template.replace(/\{\{cms\.([^}]+)\}\}/g, (match, fieldPath) => {
+  return template.replace(/\{\{cms\.([^}]+)\}\}/g, (_match, fieldPath) => {
     // Support nested paths like cms.author.name
     const parts = fieldPath.trim().split('.');
     let value: unknown = cmsItem;
@@ -94,7 +89,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 +117,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

@@ -3,9 +3,9 @@
  * Manages Hot Module Replacement WebSocket connection, status tracking, and visual indicators.
  */
 
-import { createElement as h, useState, useEffect, useRef } from "react";
-import type { ReactElement } from "react";
-import { HMRWebSocket } from "../hmrWebSocket";
+import { createElement as h, useState, useEffect, useRef } from 'react';
+import type { ReactElement } from 'react';
+import { HMRWebSocket } from '../hmrWebSocket';
 
 export interface HMRManagerProps {
   /**
@@ -46,7 +46,7 @@ export function HMRManager({
   onStatusChange,
   currentPath = typeof window !== 'undefined' ? window.location.pathname : '/',
   onReload,
-  onCMSUpdate
+  onCMSUpdate,
 }: HMRManagerProps): ReactElement | null {
   const [status, setStatus] = useState<'connecting' | 'connected' | 'disconnected' | 'error'>('connecting');
 
@@ -63,7 +63,9 @@ export function HMRManager({
     onCMSUpdateRef.current = onCMSUpdate;
   }, [onCMSUpdate]);
 
-  useEffect(() => { onReloadRef.current = onReload; }, [onReload]);
+  useEffect(() => {
+    onReloadRef.current = onReload;
+  }, [onReload]);
 
   // Define message handler - reads from refs to always get latest values
   const createMessageHandler = () => (data: any) => {
@@ -95,6 +97,19 @@ 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'));
+    } else if (data.type === 'hmr:stylesheet-update') {
+      // An external project stylesheet changed (e.g. a mirror-import class edit
+      // via /api/element-styles/update — outside the file watcher's categories).
+      // Dispatch so the canvas cache-busts its <link> stylesheets and repaints.
+      document.dispatchEvent(new CustomEvent('hmr-stylesheet-update'));
     }
   };
 
@@ -150,17 +165,16 @@ export function HMRManager({
   useEffect(() => {
     if (import.meta.hot) {
       import.meta.hot.accept();
-      
+
       import.meta.hot.on('bun:beforeUpdate', () => {
         // HMR update starting
       });
-      
+
       import.meta.hot.on('bun:afterUpdate', () => {
         // HMR update complete
       });
-      
-      import.meta.hot.on('bun:error', () => {
-      });
+
+      import.meta.hot.on('bun:error', () => {});
     }
   }, []);
 
@@ -182,24 +196,27 @@ export function HMRIndicator({ status }: { status: 'connecting' | 'connected' |
 
   const config = statusConfig[status];
 
-  return h('div', {
-    id: 'hmr-indicator',
-    style: {
-      position: 'fixed',
-      top: '20px',
-      right: '20px',
-      background: config.bg,
-      color: 'white',
-      padding: '12px 20px',
-      borderRadius: '8px',
-      fontSize: '14px',
-      fontWeight: '600',
-      display: config.show ? 'block' : 'none',
-      boxShadow: `0 4px 12px ${config.bg}40`,
-      animation: 'slideIn 0.3s ease-out',
-      zIndex: 9999,
-      transition: 'all 0.3s ease',
-    }
-  }, config.text);
+  return h(
+    'div',
+    {
+      id: 'hmr-indicator',
+      style: {
+        position: 'fixed',
+        top: '20px',
+        right: '20px',
+        background: config.bg,
+        color: 'white',
+        padding: '12px 20px',
+        borderRadius: '8px',
+        fontSize: '14px',
+        fontWeight: '600',
+        display: config.show ? 'block' : 'none',
+        boxShadow: `0 4px 12px ${config.bg}40`,
+        animation: 'slideIn 0.3s ease-out',
+        zIndex: 9999,
+        transition: 'all 0.3s ease',
+      },
+    },
+    config.text,
+  );
 }
-

package/lib/client/hmrCssReload.ts

@@ -23,6 +23,27 @@ declare global {
     __hmrVariablesCSSInitialized?: boolean;
     __hmrFontsCSSInitialized?: boolean;
     __hmrLibrariesInitialized?: boolean;
+    __hmrStylesheetInitialized?: boolean;
+  }
+}
+
+// Cache-bust same-origin `<link rel="stylesheet">` hrefs so the canvas repaints
+// after a project CSS file changes (e.g. a mirror-import class edit). The old
+// stylesheet stays applied until the new one loads, so there's no flash. Skips
+// cross-origin (CDN) links and data: URIs.
+function reloadExternalStylesheets(): void {
+  const links = document.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]');
+  for (const link of links) {
+    const href = link.getAttribute('href');
+    if (!href || href.startsWith('data:')) continue;
+    try {
+      const url = new URL(href, location.href);
+      if (url.origin !== location.origin) continue;
+      url.searchParams.set('hmr', String(Date.now()));
+      link.href = url.href;
+    } catch {
+      // ignore unparseable href
+    }
   }
 }
 
@@ -32,17 +53,15 @@ 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;
     };
 
     // Fetch colors for each theme
-    const themeColors: Record<string, any> = {};
+    const themeColors: Record<string, Record<string, string>> = {};
     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;
       }
@@ -51,20 +70,21 @@ async function injectUpdatedThemeCSS(): Promise<void> {
     // 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 — default theme in :root, each named theme in [theme="..."]
     let css = '';
-    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`;
     }
     for (const theme of themesData.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`;
@@ -140,21 +160,36 @@ 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();
+    });
+  }
+
+  if (!window.__hmrStylesheetInitialized) {
+    window.__hmrStylesheetInitialized = true;
+    document.addEventListener('hmr-stylesheet-update', () => {
+      reloadExternalStylesheets();
+    });
   }
 }