meno-core 1.0.21 → 1.0.23

package/lib/server/ssr/ssrRenderer.ts

@@ -27,6 +27,7 @@ import { validateStyleCoverage } from '../validateStyleCoverage';
 import { generateElementClassName, type ElementClassContext } from '../../shared/elementClassName';
 import type { InteractiveStyles } from '../../shared/types/styles';
 import { extractInteractiveStyleMappings, resolveExtractedMappings, hasInteractiveStyleMappings } from '../../shared/interactiveStyleMappings';
+import { isCurrentLink } from '../../shared/linkUtils';
 import type { SlugMap } from '../../shared/slugTranslator';
 import { buildSlugIndex, getLocaleLinks, translatePath } from '../../shared/slugTranslator';
 
@@ -36,7 +37,7 @@ import { extractPageMeta, generateMetaTags } from './metaTagGenerator';
 import { collectComponentCSS } from './cssCollector';
 import { collectComponentJavaScript } from './jsCollector';
 import { CMSContext, processCMSTemplate, processCMSPropsTemplate, createI18nResolver, RAW_HTML_PREFIX } from './cmsSSRProcessor';
-import { ImageMetadataMap, DEFAULT_SIZES, buildImageMetadataMap } from './imageMetadata';
+import { ImageMetadataMap, DEFAULT_SIZES, buildImageMetadataMap, rewriteRichTextImages } from './imageMetadata';
 
 /**
  * Image preload info for generating <link rel="preload"> tags in head
@@ -114,6 +115,28 @@ function getI18nResolver(ctx: SSRContext): ValueResolver | undefined {
   return createI18nResolver(ctx.locale, ctx.i18nConfig);
 }
 
+/**
+ * Process style templates and convert to utility classes.
+ * Handles {{item.field}} patterns within list contexts.
+ */
+function processStyleToClasses(
+  style: StyleObject | ResponsiveStyleObject | undefined,
+  ctx: SSRContext
+): string[] {
+  if (!style) return [];
+
+  let processedStyle = style;
+  const templateCtx = getTemplateContext(ctx);
+  if (templateCtx && !ctx.templateMode) {
+    processedStyle = processItemPropsTemplate(
+      style as Record<string, unknown>,
+      templateCtx,
+      getI18nResolver(ctx)
+    ) as StyleObject | ResponsiveStyleObject;
+  }
+  return responsiveStylesToClasses(processedStyle as ResponsiveStyleObject);
+}
+
 /**
  * Evaluate the if condition on a node with full SSR context.
  * Handles boolean, mapping, and string template values.
@@ -211,6 +234,63 @@ function resolveFilterTemplates(
   return resolved;
 }
 
+/**
+ * Expand Meno component markers in rich text HTML output.
+ * Scans for <div data-meno-component="Name" data-meno-props='{"key":"val"}'></div>
+ * and replaces them with rendered component HTML using the existing SSR component renderer.
+ */
+async function expandRichTextComponents(html: string, ctx: SSRContext): Promise<string> {
+  // Quick check - if no component markers, return as-is
+  if (!html.includes('data-meno-component')) return html;
+
+  // Match component markers
+  const markerRegex = /<div\s+data-meno-component="([^"]+)"\s+data-meno-props="([^"]*)"[^>]*><\/div>/g;
+  const parts: (string | Promise<string>)[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = markerRegex.exec(html)) !== null) {
+    // Add text before this match
+    if (match.index > lastIndex) {
+      parts.push(html.slice(lastIndex, match.index));
+    }
+
+    const componentName = match[1];
+    let props: Record<string, unknown> = {};
+    try {
+      // Unescape HTML entities in the JSON
+      const propsStr = match[2]
+        .replace(/&quot;/g, '"')
+        .replace(/&#039;/g, "'")
+        .replace(/&amp;/g, '&');
+      props = JSON.parse(propsStr);
+    } catch {
+      // ignore parse errors
+    }
+
+    // Render the component using SSR registry
+    if (ssrComponentRegistry.has(componentName)) {
+      parts.push(
+        renderComponent(componentName, props, [], {}, ctx)
+      );
+    } else {
+      // Keep marker for unknown components
+      parts.push(match[0]);
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text
+  if (lastIndex < html.length) {
+    parts.push(html.slice(lastIndex));
+  }
+
+  // Resolve all promises
+  const resolved = await Promise.all(parts);
+  return resolved.join('');
+}
+
 /**
  * Component registry for SSR (shared between requests)
  * Uses the shared SSRRegistry for consistency
@@ -551,6 +631,14 @@ async function processList(node: ListNode, ctx: SSRContext): Promise<string> {
   }
 
   // Use configurable tag (defaults to 'div')
+  // If tag is explicitly false (or string "false" for backwards compatibility),
+  // render children without a container (fragment mode)
+  if (node.tag === false || node.tag === 'false') {
+    // Fragment mode - no container element, just children
+    // Note: emitTemplate requires a container, so templateHtml is not included
+    return childrenHTML;
+  }
+
   const tag = node.tag || 'div';
   return `<${tag}${classAttr}${listStyleAttr}${attrsStr}>${childrenHTML}${templateHtml}</${tag}>`;
 }
@@ -694,7 +782,10 @@ async function renderNode(
       }
       // Check for raw HTML marker (from rich-text fields) - don't escape
       if (text.startsWith(RAW_HTML_PREFIX)) {
-        return text.slice(RAW_HTML_PREFIX.length);
+        let rawHtml = text.slice(RAW_HTML_PREFIX.length);
+        if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap);
+        rawHtml = await expandRichTextComponents(rawHtml, ctx);
+        return rawHtml;
       }
       return escapeHtml(text);
     }
@@ -710,7 +801,10 @@ async function renderNode(
     }
     // Check for raw HTML marker (from rich-text fields) - don't escape
     if (text.startsWith(RAW_HTML_PREFIX)) {
-      return text.slice(RAW_HTML_PREFIX.length);
+      let rawHtml = text.slice(RAW_HTML_PREFIX.length);
+      if (ctx.imageMetadataMap) rawHtml = rewriteRichTextImages(rawHtml, ctx.imageMetadataMap);
+      rawHtml = await expandRichTextComponents(rawHtml, ctx);
+      return rawHtml;
     }
     return escapeHtml(text);
   }
@@ -765,9 +859,12 @@ async function renderNode(
     // Sanitize HTML with allowlist for SVG, rich-text formatting, and common elements (same as client)
     const sanitizedHtml = DOMPurify.sanitize(htmlContent, {
       ALLOWED_TAGS: ['svg', 'path', 'circle', 'rect', 'line', 'polyline', 'polygon', 'g', 'text', 'tspan', 'image', 'defs', 'use', 'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'symbol', 'a', 'div', 'span', 'p', 'br', 'button', 'img', 'iframe', 'video', 'audio', 'source', 'canvas', 'b', 'i', 'u', 'strong', 'em', 'sub', 'sup', 'mark', 's', 'small', 'del', 'ins', 'q', 'abbr', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity'],
+      ALLOWED_ATTR: ['class', 'id', 'style', 'width', 'height', 'viewBox', 'xmlns', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-dasharray', 'stroke-dashoffset', 'd', 'cx', 'cy', 'r', 'x', 'y', 'x1', 'y1', 'x2', 'y2', 'points', 'href', 'src', 'alt', 'target', 'rel', 'data-*', 'aria-*', 'transform', 'opacity', 'fill-opacity', 'stroke-opacity', 'font-size', 'font-family', 'text-anchor', 'dominant-baseline', 'offset', 'stop-color', 'stop-opacity', 'frameborder', 'allowfullscreen', 'allow', 'title'],
       KEEP_CONTENT: true
     });
+    const optimizedHtml = ctx.imageMetadataMap
+      ? rewriteRichTextImages(sanitizedHtml, ctx.imageMetadataMap)
+      : sanitizedHtml;
 
     // Extract attributes from node
     const nodeAttributes = extractAttributesFromNode(node);
@@ -775,9 +872,9 @@ async function renderNode(
     // Build className array
     const classNames: string[] = ['oem'];
 
-    // Convert styles to utility classes
+    // Convert styles to utility classes (process templates in style values)
     if (nodeStyle) {
-      const utilityClasses = responsiveStylesToClasses(nodeStyle as ResponsiveStyleObject);
+      const utilityClasses = processStyleToClasses(nodeStyle, ctx);
       classNames.push(...utilityClasses);
     }
 
@@ -837,7 +934,7 @@ async function renderNode(
       const classAttr = classNames.length > 0 ? ` class="${escapeHtml(classNames.filter(Boolean).join(' '))}"` : '';
 
       // Always use span for embeds - valid inside <p> and other phrasing content
-      return `<span${classAttr}${embedStyleAttr}${attrs}>${sanitizedHtml}</span>`;
+      return `<span${classAttr}${embedStyleAttr}${attrs}>${optimizedHtml}</span>`;
     }
 
     // Add attribute className if present (fallback when no interactive styles)
@@ -852,7 +949,7 @@ async function renderNode(
     const classAttr = classNames.length > 0 ? ` class="${escapeHtml(classNames.filter(Boolean).join(' '))}"` : '';
 
     // Always use span for embeds - valid inside <p> and other phrasing content
-    return `<span${classAttr}${attrs}>${sanitizedHtml}</span>`;
+    return `<span${classAttr}${attrs}>${optimizedHtml}</span>`;
   }
 
   // Handle link nodes (render as <a> tag in SSR)
@@ -894,9 +991,9 @@ async function renderNode(
     // Build className array - start with olink base class
     const classNames: string[] = ['olink'];
 
-    // Convert styles to utility classes
+    // Convert styles to utility classes (process templates in style values)
     if (nodeStyle) {
-      const utilityClasses = responsiveStylesToClasses(nodeStyle as ResponsiveStyleObject);
+      const utilityClasses = processStyleToClasses(nodeStyle, ctx);
       classNames.push(...utilityClasses);
     }
 
@@ -953,6 +1050,11 @@ async function renderNode(
     delete nodeAttributes.className;
     delete nodeAttributes.class;
 
+    // Add is-current class when link href matches current page path
+    if (pagePath && !ctx.templateMode && isCurrentLink(href, pagePath)) {
+      classNames.push('is-current');
+    }
+
     // Add target from link object if present (and not already set in attributes)
     if (targetFromLink && !nodeAttributes.target) {
       nodeAttributes.target = targetFromLink;
@@ -1013,8 +1115,8 @@ async function renderNode(
     // Validate that all styles can generate utility classes (build-time warnings)
     validateStyleCoverage(nodeStyle, `Node: ${nodeType || 'unknown'}`);
 
-    // Convert style object to utility class names
-    utilityClasses = responsiveStylesToClasses(nodeStyle as ResponsiveStyleObject);
+    // Convert style object to utility class names (process templates in style values)
+    utilityClasses = processStyleToClasses(nodeStyle, ctx);
   } else if (nodeProps.style) {
     // If no node.style but props have style, keep it for backward compatibility
     if (isResponsiveStyle(nodeProps.style) && breakpoints && viewportWidth) {
@@ -1101,6 +1203,12 @@ async function renderNode(
     return renderComponent(componentName, propsWithStyleAndAttrs, children, nodeAttributes, ctx);
   }
 
+  // Component not found in registry - warn and return empty
+  if (nodeType === NODE_TYPE.COMPONENT && componentName) {
+    console.warn(`[Meno SSR] Component "${componentName}" not found in registry.`);
+    return '';
+  }
+
   // Handle Link component for navigation (only for HTML nodes)
   if (tag === 'Link') {
     return renderLinkNode(propsWithStyleAndAttrs, children, ctx);
@@ -1273,9 +1381,17 @@ async function renderHtmlElement(
   ctx: SSRContext
 ): Promise<string> {
   // Build class attribute from utility classes
-  const classAttr = propsWithStyleAndAttrs.className
-    ? ` class="${escapeHtml(String(propsWithStyleAndAttrs.className))}"`
-    : '';
+  let classValue = propsWithStyleAndAttrs.className ? String(propsWithStyleAndAttrs.className) : '';
+
+  // Add is-current class for <a> tags when href matches current page path
+  if (tag === 'a' && ctx.pagePath && !ctx.templateMode) {
+    const href = propsWithStyleAndAttrs.href as string | undefined;
+    if (href && isCurrentLink(href, ctx.pagePath)) {
+      classValue = classValue ? `${classValue} is-current` : 'is-current';
+    }
+  }
+
+  const classAttr = classValue ? ` class="${escapeHtml(classValue)}"` : '';
 
   // Build style attribute (for CSS variables and remaining inline styles)
   const styleString = styleToString(propsWithStyleAndAttrs.style as Record<string, string | number> | undefined);

package/lib/shared/constants.ts

@@ -21,6 +21,9 @@ export const API_ROUTES = {
   SAVE_COMPONENT: '/api/save-component',
   SAVE_COMPONENT_JS: '/api/save-component-js', // Save JavaScript to .js file
   SAVE_COMPONENT_CSS: '/api/save-component-css', // Save CSS to .css file
+  COMPONENT_CATEGORY: '/api/component-category', // Move component to category folder
+  COMPONENT_FOLDER: '/api/component-folder', // Create component folder
+  COMPONENT_FOLDERS: '/api/component-folders', // List all component folders
   COMPONENT_JS: '/api/component-js', // Get JavaScript from .js file
   CONFIG: '/api/config', // Get project config
   SAVE_CONFIG: '/api/save-config', // Save project config

package/lib/shared/fontLoader.test.ts

@@ -0,0 +1,335 @@
+import { describe, test, expect } from 'bun:test';
+import { join } from 'path';
+import { mkdirSync, writeFileSync, rmSync } from 'fs';
+import { tmpdir } from 'os';
+import { setProjectRoot } from '../server/projectContext';
+
+// Create a unique temp directory for test configs.
+// setProjectRoot changes where projectPaths.config() points.
+const testDir = join(tmpdir(), `fontLoader-test-${Date.now()}`);
+mkdirSync(testDir, { recursive: true });
+setProjectRoot(testDir);
+
+// Helper to write a project.config.json in the test directory
+function writeConfig(config: Record<string, unknown>): void {
+  writeFileSync(join(testDir, 'project.config.json'), JSON.stringify(config));
+}
+
+function removeConfig(): void {
+  try {
+    rmSync(join(testDir, 'project.config.json'));
+  } catch {
+    // file may not exist
+  }
+}
+
+// Write a rich config BEFORE the import resolves.
+// This config is designed to exercise every code path in fontLoader.ts.
+writeConfig({
+  fonts: [
+    // woff2 format, explicit family, variable weight range, fontDisplay
+    {
+      path: '/fonts/inter-variable.woff2',
+      family: 'Inter',
+      weight: 100,
+      weightMax: 900,
+      style: 'normal',
+      fontDisplay: 'swap',
+    },
+    // woff format, no explicit family (extract from path), single weight
+    {
+      path: '/fonts/geomanist-regular.woff',
+      weight: 400,
+    },
+    // ttf format, explicit family, bold weight, italic style
+    {
+      path: '/fonts/roboto-bold.ttf',
+      family: 'Roboto',
+      weight: 700,
+      style: 'italic',
+    },
+    // otf format, explicit family, default weight, fontDisplay
+    {
+      path: '/fonts/playfair.otf',
+      family: 'Playfair',
+      fontDisplay: 'fallback',
+    },
+    // unknown extension, no explicit family (extract from path)
+    {
+      path: '/fonts/mystery.xyz',
+    },
+    // same family as existing to test weight dedup
+    {
+      path: '/fonts/roboto-regular.woff2',
+      family: 'Roboto',
+      weight: 400,
+    },
+    // variable font for same family as static (tests dedup across variable/static)
+    {
+      path: '/fonts/roboto-variable.woff2',
+      family: 'Roboto',
+      weight: 300,
+      weightMax: 500,
+    },
+    // single-weight variable font (weight === weightMax)
+    {
+      path: '/fonts/mono.woff2',
+      family: 'Mono',
+      weight: 400,
+      weightMax: 400,
+    },
+  ],
+  siteUrl: 'https://example.com',
+});
+
+// Import the module under test. Since setProjectRoot points to our temp dir
+// and the config file is already written, loadProjectConfig will find it.
+import {
+  loadProjectConfig,
+  getProjectConfig,
+  generateFontCSS,
+  generateFontPreloadTags,
+  getFontFamilies,
+} from './fontLoader';
+
+describe('fontLoader', () => {
+  // --- getProjectConfig before loading ---
+
+  test('getProjectConfig returns fallback before any config is loaded', () => {
+    const config = getProjectConfig();
+    expect(config).toEqual({ fonts: [] });
+  });
+
+  // --- loadProjectConfig ---
+
+  test('loadProjectConfig loads config from file', async () => {
+    const config = await loadProjectConfig();
+    expect(config.fonts).toHaveLength(8);
+    expect(config.siteUrl).toBe('https://example.com');
+  });
+
+  test('loadProjectConfig returns cached config on second call', async () => {
+    const config1 = await loadProjectConfig();
+    const config2 = await loadProjectConfig();
+    expect(config1).toBe(config2);
+  });
+
+  // --- getProjectConfig after loading ---
+
+  test('getProjectConfig returns loaded config after loadProjectConfig', () => {
+    const config = getProjectConfig();
+    expect(config.fonts).toHaveLength(8);
+    expect(config.siteUrl).toBe('https://example.com');
+  });
+
+  // --- generateFontCSS: format detection (getFontFormat) ---
+
+  test('generateFontCSS detects woff2 format', () => {
+    const css = generateFontCSS();
+    expect(css).toContain("url('/fonts/inter-variable.woff2') format('woff2')");
+  });
+
+  test('generateFontCSS detects woff format', () => {
+    const css = generateFontCSS();
+    expect(css).toContain("url('/fonts/geomanist-regular.woff') format('woff')");
+  });
+
+  test('generateFontCSS detects truetype format for .ttf', () => {
+    const css = generateFontCSS();
+    expect(css).toContain("url('/fonts/roboto-bold.ttf') format('truetype')");
+  });
+
+  test('generateFontCSS detects opentype format for .otf', () => {
+    const css = generateFontCSS();
+    expect(css).toContain("url('/fonts/playfair.otf') format('opentype')");
+  });
+
+  test('generateFontCSS defaults to truetype for unknown extension', () => {
+    const css = generateFontCSS();
+    expect(css).toContain("url('/fonts/mystery.xyz') format('truetype')");
+  });
+
+  // --- generateFontCSS: family name extraction (extractFamilyName) ---
+
+  test('generateFontCSS extracts family name from path when not provided', () => {
+    const css = generateFontCSS();
+    // /fonts/geomanist-regular.woff -> "Geomanist Regular"
+    expect(css).toContain("font-family: 'Geomanist Regular'");
+  });
+
+  test('generateFontCSS extracts family from path with unrecognized extension', () => {
+    const css = generateFontCSS();
+    // mystery.xyz -> regex /\.(ttf|woff2?|otf)$/i does not match .xyz
+    // so name includes the extension: "Mystery.xyz"
+    expect(css).toContain("font-family: 'Mystery.xyz'");
+  });
+
+  test('generateFontCSS uses explicit family names when provided', () => {
+    const css = generateFontCSS();
+    expect(css).toContain("font-family: 'Inter'");
+    expect(css).toContain("font-family: 'Roboto'");
+    expect(css).toContain("font-family: 'Playfair'");
+    expect(css).toContain("font-family: 'Mono'");
+  });
+
+  // --- generateFontCSS: weight handling ---
+
+  test('generateFontCSS outputs variable weight range syntax', () => {
+    const css = generateFontCSS();
+    expect(css).toContain('font-weight: 100 900');
+    expect(css).toContain('font-weight: 300 500');
+    expect(css).toContain('font-weight: 400 400');
+  });
+
+  test('generateFontCSS outputs single weight values', () => {
+    const css = generateFontCSS();
+    expect(css).toContain('font-weight: 400;');
+    expect(css).toContain('font-weight: 700;');
+  });
+
+  // --- generateFontCSS: style ---
+
+  test('generateFontCSS outputs font-style normal and italic', () => {
+    const css = generateFontCSS();
+    expect(css).toContain('font-style: normal');
+    expect(css).toContain('font-style: italic');
+  });
+
+  // --- generateFontCSS: fontDisplay ---
+
+  test('generateFontCSS includes font-display when specified', () => {
+    const css = generateFontCSS();
+    expect(css).toContain('font-display: swap');
+    expect(css).toContain('font-display: fallback');
+  });
+
+  test('generateFontCSS omits font-display when not specified', () => {
+    const css = generateFontCSS();
+    // The Roboto bold entry has no fontDisplay
+    const robotoBlock = css.split('\n\n').find(b => b.includes('roboto-bold.ttf'))!;
+    expect(robotoBlock).toBeDefined();
+    expect(robotoBlock).not.toContain('font-display');
+  });
+
+  // --- generateFontCSS: full block structure ---
+
+  test('generateFontCSS produces correct block with fontDisplay', () => {
+    const css = generateFontCSS();
+    expect(css).toContain(`@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}`);
+  });
+
+  test('generateFontCSS produces correct block without fontDisplay', () => {
+    const css = generateFontCSS();
+    expect(css).toContain(`@font-face {
+  font-family: 'Roboto';
+  src: url('/fonts/roboto-bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}`);
+  });
+
+  test('generateFontCSS separates blocks with blank lines', () => {
+    const css = generateFontCSS();
+    const blocks = css.split('\n\n');
+    expect(blocks.length).toBe(8);
+  });
+
+  // --- generateFontPreloadTags: MIME types (getFontMimeType) ---
+
+  test('generateFontPreloadTags uses font/woff2 for .woff2', () => {
+    const tags = generateFontPreloadTags();
+    expect(tags).toContain('href="/fonts/inter-variable.woff2"');
+    expect(tags).toContain('type="font/woff2"');
+  });
+
+  test('generateFontPreloadTags uses font/woff for .woff', () => {
+    const tags = generateFontPreloadTags();
+    expect(tags).toContain('href="/fonts/geomanist-regular.woff"');
+    expect(tags).toContain('type="font/woff"');
+  });
+
+  test('generateFontPreloadTags uses font/ttf for .ttf', () => {
+    const tags = generateFontPreloadTags();
+    expect(tags).toContain('href="/fonts/roboto-bold.ttf"');
+    expect(tags).toContain('type="font/ttf"');
+  });
+
+  test('generateFontPreloadTags uses font/otf for .otf', () => {
+    const tags = generateFontPreloadTags();
+    expect(tags).toContain('href="/fonts/playfair.otf"');
+    expect(tags).toContain('type="font/otf"');
+  });
+
+  test('generateFontPreloadTags defaults to font/ttf for unknown extension', () => {
+    const tags = generateFontPreloadTags();
+    const mysteryTag = tags.split('\n  ').find(t => t.includes('mystery.xyz'))!;
+    expect(mysteryTag).toContain('type="font/ttf"');
+  });
+
+  // --- generateFontPreloadTags: structure ---
+
+  test('generateFontPreloadTags includes crossorigin on all tags', () => {
+    const tags = generateFontPreloadTags();
+    const linkTags = tags.split('\n  ');
+    expect(linkTags.length).toBe(8);
+    for (const tag of linkTags) {
+      expect(tag).toContain('crossorigin');
+      expect(tag).toContain('rel="preload"');
+      expect(tag).toContain('as="font"');
+    }
+  });
+
+  test('generateFontPreloadTags produces correct link tag format', () => {
+    const tags = generateFontPreloadTags();
+    expect(tags).toContain(
+      '<link rel="preload" href="/fonts/inter-variable.woff2" as="font" type="font/woff2" crossorigin>'
+    );
+  });
+
+  // --- getFontFamilies ---
+
+  test('getFontFamilies expands variable weight range in 100 increments', () => {
+    const families = getFontFamilies();
+    expect(families['Inter']).toEqual([100, 200, 300, 400, 500, 600, 700, 800, 900]);
+  });
+
+  test('getFontFamilies extracts family name from path', () => {
+    const families = getFontFamilies();
+    expect(families['Geomanist Regular']).toEqual([400]);
+  });
+
+  test('getFontFamilies groups weights and deduplicates across static and variable', () => {
+    const families = getFontFamilies();
+    // Roboto: 700 (bold static), 400 (regular static), 300-500 variable (400 deduped)
+    expect(families['Roboto']).toContain(700);
+    expect(families['Roboto']).toContain(400);
+    expect(families['Roboto']).toContain(300);
+    expect(families['Roboto']).toContain(500);
+    // No duplicates
+    const unique = [...new Set(families['Roboto'])];
+    expect(families['Roboto'].length).toBe(unique.length);
+  });
+
+  test('getFontFamilies uses default weight 400 when not specified', () => {
+    const families = getFontFamilies();
+    expect(families['Playfair']).toEqual([400]);
+  });
+
+  test('getFontFamilies handles single-weight variable font', () => {
+    const families = getFontFamilies();
+    // Mono: weight=400, weightMax=400 -> [400]
+    expect(families['Mono']).toEqual([400]);
+  });
+
+  test('getFontFamilies handles extracted name for unknown extension', () => {
+    const families = getFontFamilies();
+    // mystery.xyz -> "Mystery.xyz"
+    expect(families['Mystery.xyz']).toEqual([400]);
+  });
+});