meno-core 1.0.52 → 1.0.53

package/lib/shared/cssProperties.ts

@@ -85,6 +85,35 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['repeat', 'repeat-x', 'repeat-y', 'no-repeat'],
     type: 'select',
   },
+  backgroundAttachment: {
+    values: ['scroll', 'fixed', 'local'],
+    type: 'select',
+  },
+  backgroundOrigin: {
+    values: ['border-box', 'padding-box', 'content-box'],
+    type: 'select',
+  },
+  backgroundBlendMode: {
+    values: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
+    type: 'select',
+  },
+  // Gradient-text recipe (`background: linear-gradient(...); background-clip:
+  // text; -webkit-background-clip: text; -webkit-text-fill-color: transparent`).
+  // The `Webkit*` capitalization is intentional — utilityClassMapper's
+  // camel→kebab emitter only prepends `-` when the first letter is uppercase,
+  // so `WebkitBackgroundClip` round-trips back to `-webkit-background-clip`.
+  backgroundClip: {
+    values: ['border-box', 'padding-box', 'content-box', 'text'],
+    type: 'select',
+  },
+  WebkitBackgroundClip: {
+    values: ['border-box', 'padding-box', 'content-box', 'text'],
+    type: 'select',
+  },
+  WebkitTextFillColor: { type: 'string' },
+  WebkitTextStroke: { type: 'string' },
+  WebkitTextStrokeWidth: { type: 'string' },
+  WebkitTextStrokeColor: { type: 'string' },
   color: { type: 'string' },
   opacity: { type: 'number' },
 
@@ -167,10 +196,63 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['none', 'underline', 'overline', 'line-through'],
     type: 'select',
   },
+  textDecorationLine: {
+    values: ['none', 'underline', 'overline', 'line-through'],
+    type: 'select',
+  },
+  textDecorationStyle: {
+    values: ['solid', 'double', 'dotted', 'dashed', 'wavy'],
+    type: 'select',
+  },
+  textDecorationColor: { type: 'string' },
+  textDecorationThickness: { type: 'string' },
+  textUnderlineOffset: { type: 'string' },
+  textUnderlinePosition: { type: 'string' },
   textTransform: {
     values: ['none', 'capitalize', 'uppercase', 'lowercase'],
     type: 'select',
   },
+  textRendering: {
+    values: ['auto', 'optimizeSpeed', 'optimizeLegibility', 'geometricPrecision'],
+    type: 'select',
+  },
+  fontVariant: { type: 'string' },
+  fontStretch: { type: 'string' },
+  fontFeatureSettings: { type: 'string' },
+  fontVariationSettings: { type: 'string' },
+  fontKerning: {
+    values: ['auto', 'normal', 'none'],
+    type: 'select',
+  },
+  WebkitFontSmoothing: {
+    values: ['auto', 'none', 'antialiased', 'subpixel-antialiased'],
+    type: 'select',
+  },
+  MozOsxFontSmoothing: {
+    values: ['auto', 'grayscale'],
+    type: 'select',
+  },
+  hyphens: {
+    values: ['none', 'manual', 'auto'],
+    type: 'select',
+  },
+  WebkitHyphens: {
+    values: ['none', 'manual', 'auto'],
+    type: 'select',
+  },
+  writingMode: {
+    values: ['horizontal-tb', 'vertical-rl', 'vertical-lr'],
+    type: 'select',
+  },
+  direction: {
+    values: ['ltr', 'rtl'],
+    type: 'select',
+  },
+  tabSize: { type: 'string' },
+  wordWrap: {
+    values: ['normal', 'break-word'],
+    type: 'select',
+  },
   letterSpacing: { type: 'string' },
   wordSpacing: { type: 'string' },
   wordBreak: {
@@ -181,6 +263,10 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['normal', 'break-word', 'anywhere'],
     type: 'select',
   },
+  textWrap: {
+    values: ['wrap', 'nowrap', 'balance', 'pretty', 'stable'],
+    type: 'select',
+  },
   textIndent: { type: 'string' },
   verticalAlign: {
     values: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'],
@@ -192,9 +278,20 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
   textShadow: { type: 'string' },
   filter: { type: 'string' },
   backdropFilter: { type: 'string' },
+  WebkitBackdropFilter: { type: 'string' },
   transform: { type: 'string' },
   transformOrigin: { type: 'string' },
+  transformStyle: {
+    values: ['flat', 'preserve-3d'],
+    type: 'select',
+  },
+  perspective: { type: 'string' },
+  perspectiveOrigin: { type: 'string' },
   transition: { type: 'string' },
+  transitionProperty: { type: 'string' },
+  transitionDuration: { type: 'string' },
+  transitionTimingFunction: { type: 'string' },
+  transitionDelay: { type: 'string' },
   animation: { type: 'string' },
   backfaceVisibility: {
     values: ['visible', 'hidden'],
@@ -204,7 +301,38 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'],
     type: 'select',
   },
+  isolation: {
+    values: ['auto', 'isolate'],
+    type: 'select',
+  },
+  willChange: { type: 'string' },
+  imageRendering: {
+    values: ['auto', 'crisp-edges', 'pixelated', 'smooth'],
+    type: 'select',
+  },
   clipPath: { type: 'string' },
+  WebkitClipPath: { type: 'string' },
+  // Mask family — gradient/SVG masks. Emit both the standard and `-webkit-`
+  // form because Safari still needs the prefix.
+  maskImage: { type: 'string' },
+  WebkitMaskImage: { type: 'string' },
+  maskSize: { type: 'string' },
+  WebkitMaskSize: { type: 'string' },
+  maskPosition: { type: 'string' },
+  WebkitMaskPosition: { type: 'string' },
+  maskRepeat: { type: 'string' },
+  WebkitMaskRepeat: { type: 'string' },
+  maskOrigin: { type: 'string' },
+  WebkitMaskOrigin: { type: 'string' },
+  maskClip: { type: 'string' },
+  WebkitMaskClip: { type: 'string' },
+  maskComposite: { type: 'string' },
+  WebkitMaskComposite: { type: 'string' },
+  maskMode: { type: 'string' },
+  maskType: {
+    values: ['luminance', 'alpha'],
+    type: 'select',
+  },
 
   // Overflow & Content
   overflow: {
@@ -246,6 +374,27 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['auto', 'none', 'text', 'all'],
     type: 'select',
   },
+  WebkitUserSelect: {
+    values: ['auto', 'none', 'text', 'all'],
+    type: 'select',
+  },
+  MozUserSelect: {
+    values: ['auto', 'none', 'text', 'all'],
+    type: 'select',
+  },
+  caretColor: { type: 'string' },
+  appearance: {
+    values: ['none', 'auto', 'menulist-button', 'textfield'],
+    type: 'select',
+  },
+  WebkitAppearance: {
+    values: ['none', 'auto', 'menulist-button', 'textfield'],
+    type: 'select',
+  },
+  MozAppearance: {
+    values: ['none', 'auto', 'menulist-button', 'textfield'],
+    type: 'select',
+  },
 
   // Outline
   outline: { type: 'string' },
@@ -297,6 +446,41 @@ export const CSS_PROPERTIES_DEFINITION: Record<string, CSSPropertyDefinition> =
     values: ['auto', 'smooth'],
     type: 'select',
   },
+  scrollSnapType: { type: 'string' },
+  scrollSnapAlign: {
+    values: ['none', 'start', 'end', 'center'],
+    type: 'select',
+  },
+  scrollSnapStop: {
+    values: ['normal', 'always'],
+    type: 'select',
+  },
+  scrollMarginTop: { type: 'string' },
+  scrollMarginRight: { type: 'string' },
+  scrollMarginBottom: { type: 'string' },
+  scrollMarginLeft: { type: 'string' },
+  scrollPaddingTop: { type: 'string' },
+  scrollPaddingRight: { type: 'string' },
+  scrollPaddingBottom: { type: 'string' },
+  scrollPaddingLeft: { type: 'string' },
+  overscrollBehavior: {
+    values: ['auto', 'contain', 'none'],
+    type: 'select',
+  },
+  overscrollBehaviorX: {
+    values: ['auto', 'contain', 'none'],
+    type: 'select',
+  },
+  overscrollBehaviorY: {
+    values: ['auto', 'contain', 'none'],
+    type: 'select',
+  },
+  // CSS Containment — container queries depend on these.
+  containerType: {
+    values: ['normal', 'size', 'inline-size'],
+    type: 'select',
+  },
+  containerName: { type: 'string' },
   accentColor: { type: 'string' },
 
   // SVG

package/lib/shared/expressionEvaluator.ts

@@ -159,3 +159,57 @@ export function isComplexExpression(expression: string): boolean {
   // Excludes dots (.) which are used for simple field access
   return /[?:+\-*/%<>=!&|]/.test(expression);
 }
+
+/** jsep node types `evaluateNode` (above) can evaluate — the rest throw at runtime. */
+const SUPPORTED_NODE_TYPES = new Set([
+  'Identifier',
+  'Literal',
+  'MemberExpression',
+  'BinaryExpression',
+  'LogicalExpression',
+  'ConditionalExpression',
+  'UnaryExpression',
+  'ArrayExpression',
+]);
+
+/** Child-expression slots jsep produces on the supported node types. */
+const CHILD_KEYS = ['object', 'property', 'left', 'right', 'test', 'consequent', 'alternate', 'argument'];
+
+/** Recursively verify every node in a jsep AST is a type this evaluator supports. */
+function isSupportedNode(node: Expression | null | undefined): boolean {
+  if (!node) return true;
+  if (!SUPPORTED_NODE_TYPES.has(node.type)) return false; // CallExpression, Compound, …
+  const n = node as unknown as Record<string, unknown>;
+  for (const key of CHILD_KEYS) {
+    const child = n[key];
+    if (child && typeof child === 'object' && 'type' in child) {
+      if (!isSupportedNode(child as Expression)) return false;
+    }
+  }
+  if (Array.isArray(n.elements)) {
+    for (const el of n.elements) {
+      if (el && !isSupportedNode(el as Expression)) return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * True when `expression` is one the template engine can actually evaluate (see
+ * {@link safeEvaluate}): jsep parses it and every node is a whitelisted type —
+ * identifier, member access, literal, the supported operators, ternary, or array.
+ *
+ * Returns false for anything with a function/method call (`x.toFixed(2)`), a compound
+ * (`a, b`), or a syntax error. Those are arbitrary JS that the Meno model cannot
+ * represent as a `{{template}}` binding — the meno-astro codec preserves them verbatim
+ * instead of coercing them into a fake binding.
+ */
+export function isSupportedTemplateExpression(expression: string): boolean {
+  const expr = expression.trim();
+  if (!expr) return false;
+  try {
+    return isSupportedNode(jsep(expr));
+  } catch {
+    return false;
+  }
+}

package/lib/shared/fontCss.ts

@@ -0,0 +1,101 @@
+/**
+ * Pure `@font-face` / preload generation from a list of font configs.
+ *
+ * No filesystem or project-context coupling — the caller passes the `fonts`
+ * array (read however it likes). This is the single source of truth for font
+ * CSS formatting, shared by every renderer:
+ *   - meno-core SSR            → via {@link ../shared/fontLoader} (cached config)
+ *   - meno-core JSON→Astro      → build-astro.ts
+ *   - meno-astro dialect twin   → meno-astro/server `loadFontCss` → BaseLayout.astro
+ *
+ * Keeping it server-free means the Astro `BaseLayout` can import it without
+ * dragging meno-core's server runtime into the build.
+ */
+
+export interface FontConfig {
+  path: string;
+  family?: string;
+  weight?: number;
+  weightMax?: number; // If set, font is variable with weight range [weight, weightMax]
+  style?: 'normal' | 'italic';
+  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+  unicodeRange?: string;
+  /** Legacy alias for `path` (emitted by the website-import flow). */
+  src?: string;
+}
+
+/** Detect the `@font-face` `format()` value from a file extension. */
+function getFontFormat(path: string): string {
+  if (path.endsWith('.woff2')) return 'woff2';
+  if (path.endsWith('.woff')) return 'woff';
+  if (path.endsWith('.ttf')) return 'truetype';
+  if (path.endsWith('.otf')) return 'opentype';
+  return 'truetype';
+}
+
+/** Font `type` attribute for a `<link rel="preload">`. */
+function getFontMimeType(path: string): string {
+  if (path.endsWith('.woff2')) return 'font/woff2';
+  if (path.endsWith('.woff')) return 'font/woff';
+  if (path.endsWith('.ttf')) return 'font/ttf';
+  if (path.endsWith('.otf')) return 'font/otf';
+  return 'font/ttf';
+}
+
+/**
+ * Derive a family name from a path when none is configured.
+ * Example: "/fonts/geomanist-regular.ttf" -> "Geomanist Regular".
+ */
+export function extractFamilyName(path: string): string {
+  const filename = path.split('/').pop() || 'Font';
+  const name = filename.replace(/\.(ttf|woff2?|otf)$/i, '');
+  return name
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+/** Build the `@font-face` rules for the given fonts (empty string for none). */
+export function fontFaceCss(fonts: FontConfig[]): string {
+  return (fonts || [])
+    .filter((font) => font.path || font.src)
+    .map((font) => {
+      // Support both "path" (standard) and "src" (legacy from website import)
+      const fontPath = (font.path || font.src) as string;
+      const format = getFontFormat(fontPath);
+      const family = font.family || extractFamilyName(fontPath);
+      const weight = font.weight ?? 400;
+      const weightMax = font.weightMax;
+      const style = font.style ?? 'normal';
+      const fontDisplay = font.fontDisplay;
+
+      // Variable fonts use weight range syntax: "100 900"
+      const fontWeight = weightMax != null ? `${weight} ${weightMax}` : weight;
+      const unicodeRange = font.unicodeRange;
+
+      return `@font-face {
+  font-family: '${family}';
+  src: url('${fontPath}') format('${format}');
+  font-weight: ${fontWeight};
+  font-style: ${style};${fontDisplay ? `\n  font-display: ${fontDisplay};` : ''}${unicodeRange ? `\n  unicode-range: ${unicodeRange};` : ''}
+}`;
+    })
+    .join('\n\n');
+}
+
+/**
+ * Build `<link rel="preload">` tags for the given fonts (empty string for none).
+ * `crossorigin` is required for the preloaded font to be reused by the CSS.
+ */
+export function fontPreloadLinks(fonts: FontConfig[]): string {
+  if (!fonts || fonts.length === 0) return '';
+
+  return fonts
+    .filter((font) => font.path || font.src)
+    .map((font) => {
+      const fontPath = (font.path || font.src) as string;
+      const mimeType = getFontMimeType(fontPath);
+      return `<link rel="preload" href="${fontPath}" as="font" type="${mimeType}" crossorigin>`;
+    })
+    .join('\n  ');
+}

package/lib/shared/fontLoader.ts

@@ -1,15 +1,8 @@
 import { projectPaths } from '../server/projectContext';
 import { readJsonFile, fileExists } from '../server/runtime';
+import { fontFaceCss, fontPreloadLinks, extractFamilyName, type FontConfig } from './fontCss';
 
-export interface FontConfig {
-  path: string;
-  family?: string;
-  weight?: number;
-  weightMax?: number;  // If set, font is variable with weight range [weight, weightMax]
-  style?: 'normal' | 'italic';
-  fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
-  unicodeRange?: string;
-}
+export type { FontConfig };
 
 interface ProjectConfig {
   fonts?: FontConfig[];
@@ -39,92 +32,21 @@ export function getProjectConfig(): ProjectConfig {
 }
 
 /**
- * Detect font format from file extension
- */
-function getFontFormat(path: string): string {
-  if (path.endsWith('.woff2')) return 'woff2';
-  if (path.endsWith('.woff')) return 'woff';
-  if (path.endsWith('.ttf')) return 'truetype';
-  if (path.endsWith('.otf')) return 'opentype';
-  return 'truetype';
-}
-
-/**
- * Extract font family name from path if not provided
- * Example: "/fonts/geomanist-regular.ttf" -> "Geomanist"
+ * Generate `@font-face` CSS for the project's configured fonts.
+ * Thin wrapper over the pure {@link fontFaceCss} (formatting lives in `./fontCss`
+ * so renderers without a project-context cache — e.g. the Astro twin — can reuse it).
  */
-function extractFamilyName(path: string): string {
-  const filename = path.split('/').pop() || 'Font';
-  const name = filename.replace(/\.(ttf|woff2?|otf)$/i, '');
-  // Capitalize and replace hyphens with spaces
-  return name
-    .split('-')
-    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ');
-}
-
 export function generateFontCSS(): string {
-  const config = getProjectConfig();
-  const fonts = config.fonts || [];
-
-  return fonts
-    .filter((font: any) => font.path || font.src)
-    .map((font: any) => {
-      // Support both "path" (standard) and "src" (legacy from website import)
-      const fontPath: string = font.path || font.src;
-      const format = getFontFormat(fontPath);
-      const family = font.family || extractFamilyName(fontPath);
-      const weight = font.weight ?? 400;
-      const weightMax = font.weightMax;
-      const style = font.style ?? 'normal';
-      const fontDisplay = font.fontDisplay;
-
-      // Variable fonts use weight range syntax: "100 900"
-      const fontWeight = weightMax != null ? `${weight} ${weightMax}` : weight;
-
-      const unicodeRange = font.unicodeRange;
-
-      return `@font-face {
-  font-family: '${family}';
-  src: url('${fontPath}') format('${format}');
-  font-weight: ${fontWeight};
-  font-style: ${style};${fontDisplay ? `\n  font-display: ${fontDisplay};` : ''}${unicodeRange ? `\n  unicode-range: ${unicodeRange};` : ''}
-}`;
-    })
-    .join('\n\n');
-}
-
-/**
- * Get font MIME type for preload "type" attribute
- */
-function getFontMimeType(path: string): string {
-  if (path.endsWith('.woff2')) return 'font/woff2';
-  if (path.endsWith('.woff')) return 'font/woff';
-  if (path.endsWith('.ttf')) return 'font/ttf';
-  if (path.endsWith('.otf')) return 'font/otf';
-  return 'font/ttf';
+  return fontFaceCss(getProjectConfig().fonts || []);
 }
 
 /**
- * Generate font preload link tags for early font loading
+ * Generate font preload link tags for early font loading.
  * This prevents font swap flash on SPA navigation by ensuring fonts are
  * loaded and cached before they're needed.
  */
 export function generateFontPreloadTags(): string {
-  const config = getProjectConfig();
-  const fonts = config.fonts || [];
-
-  if (fonts.length === 0) return '';
-
-  return fonts
-    .filter((font: any) => font.path || font.src)
-    .map((font: any) => {
-      const fontPath: string = font.path || font.src;
-      const mimeType = getFontMimeType(fontPath);
-      // crossorigin is required for fonts to be cached properly
-      return `<link rel="preload" href="${fontPath}" as="font" type="${mimeType}" crossorigin>`;
-    })
-    .join('\n  ');
+  return fontPreloadLinks(getProjectConfig().fonts || []);
 }
 
 export function getFontFamilies(): Record<string, number[]> {

package/lib/shared/friendlyError.test.ts

@@ -0,0 +1,87 @@
+/**
+ * Tests for the friendly-error mapper.
+ */
+
+import { describe, it, expect } from 'bun:test';
+import { toFriendlyError } from './friendlyError';
+
+describe('toFriendlyError', () => {
+  const cases: Array<{ name: string; input: string; expectTitle: string; expectHint?: boolean }> = [
+    {
+      name: 'null property read (the reported crash)',
+      input: "Cannot read properties of null (reading 'length')",
+      expectTitle: "A section couldn't load its content",
+      expectHint: true,
+    },
+    {
+      name: 'undefined property read (older phrasing)',
+      input: "Cannot read property 'map' of undefined",
+      expectTitle: "A section couldn't load its content",
+      expectHint: true,
+    },
+    {
+      name: 'not a function',
+      input: 'foo.bar is not a function',
+      expectTitle: "A piece of code didn't run as expected",
+      expectHint: true,
+    },
+    {
+      name: 'not defined',
+      input: 'myVar is not defined',
+      expectTitle: 'A piece of code referenced something missing',
+      expectHint: true,
+    },
+    {
+      name: 'network failure',
+      input: 'Failed to fetch',
+      expectTitle: "Couldn't reach the network",
+      expectHint: true,
+    },
+    {
+      name: 'module load failure',
+      input: 'Cannot find module ./missing',
+      expectTitle: "A required file couldn't be loaded",
+      expectHint: true,
+    },
+    {
+      name: 'malformed JSON',
+      input: 'Unexpected token < in JSON at position 0',
+      expectTitle: 'Some data was malformed',
+      expectHint: true,
+    },
+  ];
+
+  for (const c of cases) {
+    it(`maps ${c.name}`, () => {
+      const friendly = toFriendlyError(c.input);
+      expect(friendly.title).toBe(c.expectTitle);
+      expect(friendly.friendlyMessage.length).toBeGreaterThan(0);
+      expect(friendly.raw).toBe(c.input);
+      if (c.expectHint) expect(friendly.hint).toBeTruthy();
+    });
+  }
+
+  it('includes the offending property name when present', () => {
+    const friendly = toFriendlyError("Cannot read properties of null (reading 'length')");
+    expect(friendly.friendlyMessage).toContain('length');
+  });
+
+  it('falls back reassuringly for unknown errors but keeps the raw text', () => {
+    const friendly = toFriendlyError('Some totally unexpected gibberish');
+    expect(friendly.title).toBe('This section ran into a problem');
+    expect(friendly.raw).toBe('Some totally unexpected gibberish');
+    expect(friendly.hint).toBeUndefined();
+  });
+
+  it('accepts an Error instance', () => {
+    const friendly = toFriendlyError(new Error('boom is not a function'));
+    expect(friendly.title).toBe("A piece of code didn't run as expected");
+    expect(friendly.raw).toBe('boom is not a function');
+  });
+
+  it('accepts non-error values without throwing', () => {
+    const friendly = toFriendlyError({ weird: true });
+    expect(friendly.raw).toBe('[object Object]');
+    expect(friendly.title.length).toBeGreaterThan(0);
+  });
+});