meno-core 1.0.39 → 1.0.41

package/lib/server/astro/pageEmitter.ts

@@ -3,10 +3,12 @@
  * Generates .astro page files that import and compose components
  */
 
-import type { JSONPage, ComponentDefinition } from '../../shared/types';
+import type { JSONPage, ComponentDefinition, I18nConfig } from '../../shared/types';
 import type { BreakpointConfig } from '../../shared/breakpoints';
 import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
 import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+import type { ImageMetadataMap } from '../ssr/imageMetadata';
+import type { SlugMap } from '../../shared/slugTranslator';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -41,6 +43,16 @@ export interface PageEmitOptions {
   pageName: string;
   /** Breakpoint config for responsive Tailwind classes */
   breakpoints?: BreakpointConfig;
+  /** Image metadata map for responsive image generation */
+  imageMetadataMap?: ImageMetadataMap;
+  /** I18n config for locale list rendering */
+  i18nConfig?: I18nConfig;
+  /** Locale→slug map for current page (for locale list links) */
+  currentPageSlugMap?: Record<string, string>;
+  /** Slug mappings for translating internal link hrefs */
+  slugMappings?: SlugMap[];
+  /** Image format: 'webp' uses plain <img>, 'avif' uses <picture> */
+  imageFormat?: 'webp' | 'avif';
 }
 
 // ---------------------------------------------------------------------------
@@ -88,6 +100,11 @@ export function emitAstroPage(options: PageEmitOptions): string {
     ssrFallbacks,
     pageName,
     breakpoints: breakpointsOpt,
+    imageMetadataMap,
+    i18nConfig,
+    currentPageSlugMap,
+    slugMappings,
+    imageFormat,
   } = options;
 
   const breakpoints = breakpointsOpt ?? DEFAULT_BREAKPOINTS;
@@ -110,6 +127,15 @@ export function emitAstroPage(options: PageEmitOptions): string {
     fileType: 'page',
     fileName: pageName,
     breakpoints,
+    imageMetadataMap,
+    locale,
+    i18nConfig,
+    currentPageSlugMap,
+    frontmatterLines: [],
+    astroImports: new Set<string>(),
+    slugMappings,
+    i18nDefaultLocale: i18nConfig?.defaultLocale,
+    imageFormat,
   };
 
   // Emit the template body
@@ -117,6 +143,13 @@ export function emitAstroPage(options: PageEmitOptions): string {
 
   // Build frontmatter with imports
   const importLines: string[] = [];
+
+  // Add Astro API imports (e.g., getCollection) if collected during emission
+  if (ctx.astroImports && ctx.astroImports.size > 0) {
+    const astroImports = Array.from(ctx.astroImports);
+    importLines.push(`import { ${astroImports.join(', ')} } from 'astro:content';`);
+  }
+
   importLines.push(`import BaseLayout from '${layoutImportPath}';`);
 
   // Sort component imports alphabetically
@@ -137,8 +170,13 @@ export function emitAstroPage(options: PageEmitOptions): string {
   const escapedMeta = escapeTemplateLiteral(meta);
   const escapedFontPreloads = escapeTemplateLiteral(fontPreloads);
 
+  // Collect frontmatter lines from list emission (e.g., getCollection calls)
+  const extraFrontmatter = ctx.frontmatterLines && ctx.frontmatterLines.length > 0
+    ? '\n' + ctx.frontmatterLines.join('\n')
+    : '';
+
   return `---
-${importLines.join('\n')}
+${importLines.join('\n')}${extraFrontmatter}
 ---
 <BaseLayout
   title="${escapeJSX(title)}"
@@ -149,7 +187,9 @@ ${importLines.join('\n')}
   fontPreloads={\`${escapedFontPreloads}\`}
   libraryTags={${libraryTagsLiteral}}
 >
-${templateBody}</BaseLayout>
+  <div id="root">
+${templateBody}  </div>
+</BaseLayout>
 `;
 }
 

package/lib/server/astro/tailwindMapper.ts

@@ -263,6 +263,10 @@ const singleValueMatches: Record<string, string> = {
   'right:0': 'right-0',
   'bottom:0': 'bottom-0',
   'left:0': 'left-0',
+  'outline:none': '[outline:none]',
+  'background:none': '[background:none]',
+  'background:transparent': '[background:transparent]',
+  'backgroundColor:transparent': 'bg-transparent',
 };
 
 // ---------------------------------------------------------------------------
@@ -331,7 +335,7 @@ const arbitraryPrefixMap: Record<string, string> = {
   backdropFilter: 'backdrop',
   transform: '[transform]',
   transformOrigin: 'origin',
-  transition: 'transition',
+  transition: '[transition]',
   mixBlendMode: 'mix-blend',
   clipPath: '[clip-path]',
 
@@ -408,16 +412,44 @@ export function propertyToTailwind(
   }
 
   // Color variable handling:
-  // "var(--text)" → "text-[var(--text)]"
-  // Bare color name like "text" → "text-[var(--text)]"
+  // "var(--text)" → "text-[color:var(--text)]" (type hint avoids ambiguity with font-size)
+  // Bare color name like "text" → "text-[color:var(--text)]"
   if (property === 'color' || property === 'backgroundColor' || property === 'borderColor') {
     const prefix = property === 'color' ? 'text' : property === 'backgroundColor' ? 'bg' : 'border';
     if (strValue.includes('var(')) {
-      return `${prefix}-[${strValue}]`;
+      return `${prefix}-[color:${strValue}]`;
     }
     // Bare name (not a hex, rgb, or number-starting value)
     if (!strValue.match(/^[#\d]/) && !strValue.includes('rgb') && !strValue.includes('hsl')) {
-      return `${prefix}-[var(--${strValue})]`;
+      return `${prefix}-[color:var(--${strValue})]`;
+    }
+  }
+
+  // Color properties with actual color values need type hints to avoid ambiguity
+  if (property === 'borderColor' || property === 'color') {
+    const prefix = property === 'color' ? 'text' : 'border';
+    const sanitized = strValue.replace(/\s+/g, '_');
+    return `${prefix}-[color:${sanitized}]`;
+  }
+
+  // Border shorthand (e.g., "1px solid", "2px solid var(--border)") needs arbitrary property syntax
+  // because Tailwind's border-[...] only accepts width values, not compound shorthands
+  if (property === 'border' || property === 'borderTop' || property === 'borderRight' ||
+      property === 'borderBottom' || property === 'borderLeft') {
+    if (strValue.includes('solid') || strValue.includes('dashed') || strValue.includes('dotted') || strValue.includes('none')) {
+      const cssProp = property.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const sanitized = strValue.replace(/\s+/g, '_');
+      return `[${cssProp}:${sanitized}]`;
+    }
+  }
+
+  // `background` is a CSS shorthand — Tailwind's bg-[...] maps to background-color, not background.
+  // For non-color values (none, transparent, gradients, etc.), use arbitrary property syntax.
+  if (property === 'background') {
+    const isSimpleColor = /^(#[0-9a-fA-F]{3,8}|rgb|hsl|var\()/.test(strValue);
+    if (!isSimpleColor) {
+      const sanitized = strValue.replace(/\s+/g, '_');
+      return `[background:${sanitized}]`;
     }
   }
 
@@ -439,9 +471,16 @@ export function propertyToTailwind(
   // Standard arbitrary value: prefix-[value]
   const sanitized = strValue.replace(/\s+/g, '_');
 
-  // Font family names need quotes in arbitrary syntax for Tailwind to parse correctly
-  if (property === 'fontFamily' && !sanitized.includes(',') && !sanitized.startsWith("'")) {
-    return `${twPrefix}-['${sanitized}']`;
+  // Disambiguate properties that share a Tailwind prefix with another CSS property.
+  // Without type hints, Tailwind guesses wrong (e.g., text-[var(--x)] → color instead of font-size).
+  if (property === 'fontSize') {
+    return `text-[length:${sanitized}]`;
+  }
+  if (property === 'fontFamily') {
+    return `font-[family-name:${sanitized}]`;
+  }
+  if (property === 'fontWeight') {
+    return `font-[number:${sanitized}]`;
   }
 
   return `${twPrefix}-[${sanitized}]`;
@@ -459,6 +498,16 @@ export function stylesToTailwind(
   const classes: string[] = [];
   const dynamicStyles: Record<string, string> = {};
 
+  // When borderColor is present alongside a border shorthand, Tailwind's CSS
+  // ordering can cause the shorthand's arbitrary property `[border:...]` to
+  // override the longhand `border-[color:...]`. To avoid this, decompose
+  // border shorthands into width + style only (dropping the color part) so
+  // borderColor can take effect without conflicts.
+  const hasBorderColor = 'borderColor' in style && !isStyleMapping(style.borderColor);
+  const borderShorthands = new Set([
+    'border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft',
+  ]);
+
   for (const [prop, value] of Object.entries(style)) {
     if (isStyleMapping(value)) continue;
 
@@ -471,6 +520,18 @@ export function stylesToTailwind(
       continue;
     }
 
+    // Decompose border shorthands when borderColor is separately specified
+    if (hasBorderColor && borderShorthands.has(prop)) {
+      const parts = strValue.split(/\s+/);
+      // Parse width and style from shorthand (e.g. "1px solid #ccc" → "1px", "solid")
+      const width = parts.find(p => /^\d/.test(p) || p === '0');
+      const borderStyle = parts.find(p => /^(solid|dashed|dotted|double|groove|ridge|inset|outset|none|hidden)$/.test(p));
+      const cssProp = prop.replace(/([A-Z])/g, '-$1').toLowerCase();
+      if (width) classes.push(`[${cssProp}-width:${width}]`);
+      if (borderStyle) classes.push(`[${cssProp}-style:${borderStyle}]`);
+      continue;
+    }
+
     const twClass = propertyToTailwind(prop, value);
     if (twClass) {
       classes.push(twClass);

package/lib/server/astro/templateTransformer.ts

@@ -0,0 +1,107 @@
+/**
+ * CMS Template Expression Transformer for Astro Export
+ * Converts {{cms.field}} and {{item.field}} template expressions to Astro expressions
+ */
+
+// CMS template pattern (from cmsSSRProcessor.ts)
+const CMS_TEMPLATE_PATTERN = /\{\{cms\.([^}]+)\}\}/g;
+// Item template pattern for list iteration
+const ITEM_TEMPLATE_PATTERN = /\{\{([^}]+)\}\}/g;
+
+export function isTemplateExpression(text: string): boolean {
+  return /\{\{.+?\}\}/.test(text);
+}
+
+export function transformCMSTemplate(
+  text: string,
+  binding: string = 'entry',
+  richTextFields?: Set<string>,
+  wrapFn?: string
+): string {
+  const w = (expr: string) => wrapFn ? `${wrapFn}(${expr})` : expr;
+
+  // Check if entire text is a single {{cms.field}} expression
+  const fullMatch = text.match(/^\{\{cms\.([^}]+)\}\}$/);
+  if (fullMatch) {
+    const fieldPath = fullMatch[1].trim();
+    const topLevelField = fieldPath.split('.')[0];
+
+    // Rich-text fields use Fragment set:html
+    if (richTextFields?.has(topLevelField)) {
+      return `<Fragment set:html={${w(`${binding}.data.${fieldPath}`)}} />`;
+    }
+
+    return `{${w(`${binding}.data.${fieldPath}`)}}`;
+  }
+
+  // Mixed content: "Hello {{cms.name}}" → {`Hello ${entry.data.name}`}
+  if (CMS_TEMPLATE_PATTERN.test(text)) {
+    CMS_TEMPLATE_PATTERN.lastIndex = 0;
+    const replaced = text.replace(CMS_TEMPLATE_PATTERN, (_, fieldPath) => {
+      return `\${${w(`${binding}.data.${fieldPath.trim()}`)}}`;
+    });
+    return `{\`${replaced}\`}`;
+  }
+
+  return text;
+}
+
+/**
+ * Replace legacy itemIndex/itemFirst/itemLast meta-variables with
+ * the actual .map() callback index parameter name.
+ */
+/**
+ * Rewrite the default `item.` prefix to the actual .map() parameter name
+ * when itemAs differs from 'item' (e.g., itemAs='link' → item.text → link.text).
+ */
+export function rewriteItemVar(expr: string, itemVar: string): string {
+  if (itemVar === 'item') return expr;
+  return expr.replace(/\bitem\./g, `${itemVar}.`);
+}
+
+export function replaceItemMetaVars(expr: string, indexVar: string, sourceVar?: string, itemVar?: string): string {
+  const lastExpr = sourceVar
+    ? `(${indexVar} === ${sourceVar}.length - 1)`
+    : `false /* itemLast not supported */`;
+  let result = expr
+    .replace(/\bitemIndex\b/g, indexVar)
+    .replace(/\bitemFirst\b/g, `(${indexVar} === 0)`)
+    .replace(/\bitemLast\b/g, lastExpr);
+  if (itemVar) result = rewriteItemVar(result, itemVar);
+  return result;
+}
+
+export function transformItemTemplate(
+  text: string,
+  itemVar: string = 'item',
+  indexVar?: string,
+  sourceVar?: string
+): string {
+  // Check if entire text is a single {{expression}}
+  const fullMatch = text.match(/^\{\{(.+)\}\}$/);
+  if (fullMatch) {
+    let expr = fullMatch[1].trim();
+    expr = rewriteItemVar(expr, itemVar);
+    if (indexVar) expr = replaceItemMetaVars(expr, indexVar, sourceVar);
+    // If it contains a dot, it's item.field
+    if (expr.startsWith(`${itemVar}.`)) {
+      return `{${expr}}`;
+    }
+    // Bare expression like {{features}} - keep as prop reference
+    return `{${expr}}`;
+  }
+
+  // Mixed content: replace each {{expr}}
+  if (ITEM_TEMPLATE_PATTERN.test(text)) {
+    ITEM_TEMPLATE_PATTERN.lastIndex = 0;
+    const replaced = text.replace(ITEM_TEMPLATE_PATTERN, (_, expr) => {
+      let trimmed = expr.trim();
+      trimmed = rewriteItemVar(trimmed, itemVar);
+      if (indexVar) trimmed = replaceItemMetaVars(trimmed, indexVar, sourceVar);
+      return `\${${trimmed}}`;
+    });
+    return `{\`${replaced}\`}`;
+  }
+
+  return text;
+}

package/lib/server/index.ts

@@ -17,7 +17,7 @@ export { generateBuildErrorPage, type BuildError, type BuildErrorsData } from '.
 export { PageService } from './services/pageService';
 export { ComponentService, type ComponentInfo } from './services/componentService';
 export { CMSService, type ReferenceLocation } from './services/cmsService';
-export { configService, ConfigService } from './services/configService';
+export { configService, ConfigService, type ImageFormat } from './services/configService';
 export { ColorService, colorService } from './services/ColorService';
 export { VariableService, variableService } from './services/VariableService';
 export { EnumService, enumService } from './services/EnumService';
@@ -62,8 +62,31 @@ export { migrateTemplatesDirectory } from './migrateTemplates';
 // Static build
 export { buildStaticPages } from '../../build-static';
 
-// Astro export
-export { buildAstroProject } from '../../build-astro';
+// Webflow export
+export { buildWebflowPayload } from './webflow';
+export type {
+  WebflowExportPayload,
+  WebflowPage,
+  WebflowElement,
+  WebflowStyleClass,
+} from './webflow';
+
+// JSON loaders
+export {
+  loadJSONFile,
+  loadComponentDirectory,
+  mapPageNameToPath,
+  parseJSON,
+  loadI18nConfig,
+  loadBreakpointConfig,
+  loadResponsiveScalesConfig,
+} from './jsonLoader';
+
+// CSS generation
+export { generateThemeColorVariablesCSS, generateVariablesCSS } from './cssGenerator';
+
+// Font utilities
+export { generateFontCSS, generateFontPreloadTags } from '../shared/fontLoader';
 
 // Utilities
 export * from './utils';

package/lib/server/routes/api/components.ts

@@ -4,6 +4,8 @@
  */
 
 import type { ComponentService } from '../../services/componentService';
+import type { PageService } from '../../services/pageService';
+import type { ComponentNode } from '../../../shared/types';
 import { createCorsHeaders } from '../../middleware/cors';
 import { jsonResponse } from './shared';
 import { formatJsonErrorMessage } from '../../../shared/jsonRepair';
@@ -96,6 +98,66 @@ export async function handleComponentJavaScriptRoute(
   });
 }
 
+/**
+ * Handle component usage API endpoint - GET /api/component-usage
+ * Returns how many times each component is used across all pages and other components
+ */
+export function handleComponentUsageRoute(
+  pageService: PageService,
+  componentService: ComponentService
+): Response {
+  const usageMap = new Map<string, { count: number; files: Map<string, { name: string; path: string; type: 'page' | 'component' }> }>();
+
+  function walkTree(node: ComponentNode | undefined | null, fileName: string, filePath: string, fileType: 'page' | 'component') {
+    if (!node || typeof node !== 'object') return;
+    if (node.type === 'component' && 'component' in node && (node as any).component) {
+      const compName = (node as any).component as string;
+      if (!usageMap.has(compName)) {
+        usageMap.set(compName, { count: 0, files: new Map() });
+      }
+      const entry = usageMap.get(compName)!;
+      entry.count++;
+      entry.files.set(filePath, { name: fileName, path: filePath, type: fileType });
+    }
+    if ('children' in node && Array.isArray((node as any).children)) {
+      for (const child of (node as any).children) {
+        if (child && typeof child === 'object') {
+          walkTree(child as ComponentNode, fileName, filePath, fileType);
+        }
+      }
+    }
+  }
+
+  // Walk all pages
+  const pagePaths = pageService.getAllPagePaths();
+  for (const path of pagePaths) {
+    const pageData = pageService.getPageData(path);
+    if (pageData && 'root' in pageData && pageData.root) {
+      const name = path === '/' ? 'index' : path.replace(/^\//, '').replace(/\//g, '-');
+      walkTree(pageData.root, name, path, 'page');
+    }
+  }
+
+  // Walk all component structures
+  const allComponents = componentService.getAllComponents();
+  for (const [compName, compDef] of Object.entries(allComponents)) {
+    if (compDef.component?.structure) {
+      walkTree(compDef.component.structure, compName, compName, 'component');
+    }
+  }
+
+  // Convert to plain object
+  const result: Record<string, { count: number; files: Array<{ name: string; path: string; type: 'page' | 'component' }> }> = {};
+  for (const [name, data] of usageMap) {
+    result[name] = {
+      count: data.count,
+      files: Array.from(data.files.values()),
+    };
+  }
+
+  return jsonResponse(result);
+}
+
 // Note: Write handlers (handleSaveComponentRoute, handleSaveComponentJavaScriptRoute,
 // handleSaveComponentCSSRoute, handleComponentCategoryRoute) moved to @meno/studio
 

package/lib/server/routes/api/core-routes.ts

@@ -201,6 +201,14 @@ export async function handleCoreApiRoutes(
     );
   }
 
+  // Component usage API route (read-only)
+  if (url.pathname === API_ROUTES.COMPONENT_USAGE && req.method === 'GET') {
+    return await handleRouteError(
+      () => Promise.resolve(componentsRoutes.handleComponentUsageRoute(pageService, componentService)),
+      'Failed to fetch component usage'
+    );
+  }
+
   // Slug mappings API route (read-only)
   if (url.pathname === '/api/slug-mappings' && req.method === 'GET') {
     return await handleRouteError(

package/lib/server/services/configService.ts

@@ -28,6 +28,8 @@ export interface IconsConfig {
 /**
  * Raw project config structure from project.config.json
  */
+export type ImageFormat = 'webp' | 'avif';
+
 interface RawProjectConfig {
   breakpoints?: BreakpointConfigInput;
   responsiveScales?: Partial<ResponsiveScales>;
@@ -36,6 +38,7 @@ interface RawProjectConfig {
   libraries?: LibrariesConfig;
   csp?: CSPConfig;
   baseComponent?: string;
+  imageFormat?: ImageFormat;
 }
 
 /**
@@ -253,6 +256,15 @@ export class ConfigService {
     return this.config.baseComponent;
   }
 
+  /**
+   * Get image format setting
+   * Returns 'webp' (default) or 'avif'
+   */
+  getImageFormat(): ImageFormat {
+    if (this.config?.imageFormat === 'avif') return 'avif';
+    return 'webp';
+  }
+
   /**
    * Get raw config value by key (for extension)
    */

package/lib/server/ssr/htmlGenerator.ts

@@ -396,11 +396,6 @@ button {
   cursor: pointer;
   outline: inherit;
 }
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
 picture {
   display: block;
 }

package/lib/server/ssr/imageMetadata.ts

@@ -135,7 +135,7 @@ export function extractImgSrc(imgTag: string): string | null {
  * Only rewrites images that exist in the metadata map (project images with generated variants).
  * External/unrecognized images are left unchanged.
  */
-export function rewriteRichTextImages(html: string, metadataMap: ImageMetadataMap): string {
+export function rewriteRichTextImages(html: string, metadataMap: ImageMetadataMap, imageFormat?: 'webp' | 'avif'): string {
   return html.replace(/<img\b([^>]*)\/?>/gi, (fullMatch, innerAttrs: string) => {
     const src = extractImgSrc(fullMatch);
     if (!src) return fullMatch;
@@ -158,8 +158,8 @@ export function rewriteRichTextImages(html: string, metadataMap: ImageMetadataMa
 
     const sizes = DEFAULT_SIZES;
 
-    // Render as <picture> with AVIF + WebP sources when AVIF is available
-    if (metadata.avifSrcset) {
+    // Render as <picture> with AVIF + WebP sources when AVIF is available and format allows
+    if (metadata.avifSrcset && imageFormat !== 'webp') {
       return `<picture>` +
         `<source type="image/avif" srcset="${escapeHtml(metadata.avifSrcset)}" sizes="${escapeHtml(sizes)}" />` +
         `<source type="image/webp" srcset="${escapeHtml(metadata.srcset)}" sizes="${escapeHtml(sizes)}" />` +