meno-core 1.0.49 → 1.0.50

package/dist/lib/shared/index.js

@@ -45,7 +45,7 @@ import {
   logNetworkError,
   logRuntimeError,
   setErrorHandler
-} from "../../chunks/chunk-6IVUG7FY.js";
+} from "../../chunks/chunk-LPVETICS.js";
 import {
   BaseComponentRegistry,
   BaseNodeTypeRegistry,
@@ -218,7 +218,7 @@ import {
   validatePath,
   validatePropDefinition,
   validateStructuredComponentDefinition
-} from "../../chunks/chunk-S2CX6HFM.js";
+} from "../../chunks/chunk-7NIC4I3V.js";
 import {
   DEFAULT_BREAKPOINTS,
   DEFAULT_FLUID_RANGE,

package/lib/client/core/ComponentBuilder.test.ts

@@ -87,6 +87,40 @@ describe("ComponentBuilder", () => {
       expect(result).not.toBeNull();
       expect(typeof result).toBe("object");
     });
+
+    test("resolves an _i18n value object as the node to the default locale string", () => {
+      // Mirrors the SSR behavior: authors can pass localized strings anywhere
+      // `children` is accepted. The client resolves _i18n at the buildComponent
+      // entry point so all downstream code sees a plain string.
+      const i18nConfig = {
+        defaultLocale: "en",
+        locales: [
+          { code: "en", name: "EN", nativeName: "English", langTag: "en-US" },
+          { code: "pl", name: "PL", nativeName: "Polski", langTag: "pl-PL" },
+        ],
+      };
+      const result = builder.buildComponent({
+        node: { _i18n: true, en: "Hello", pl: "Cześć" } as any,
+        i18nConfig,
+      });
+      expect(result).toBe("Hello");
+    });
+
+    test("resolves an _i18n value object to the active locale", () => {
+      const i18nConfig = {
+        defaultLocale: "en",
+        locales: [
+          { code: "en", name: "EN", nativeName: "English", langTag: "en-US" },
+          { code: "pl", name: "PL", nativeName: "Polski", langTag: "pl-PL" },
+        ],
+      };
+      const result = builder.buildComponent({
+        node: { _i18n: true, en: "Hello", pl: "Cześć" } as any,
+        i18nConfig,
+        locale: "pl",
+      });
+      expect(result).toBe("Cześć");
+    });
   });
 
   describe("buildComponent - Component Instances", () => {

package/lib/client/core/ComponentBuilder.ts

@@ -24,7 +24,7 @@ import type { Path } from "../../shared/pathArrayUtils";
 import type { I18nConfig } from "../../shared/types/components";
 import type { ItemContext, TemplateContext } from "../../shared/types/cms";
 import { processItemTemplate, processItemPropsTemplate, hasItemTemplates, type ValueResolver } from "../../shared/itemTemplateUtils";
-import { DEFAULT_I18N_CONFIG, resolveI18nValue } from "../../shared/i18n";
+import { DEFAULT_I18N_CONFIG, isI18nValue, resolveI18nValue } from "../../shared/i18n";
 import { getChildPath, pathToString } from "../../shared/pathArrayUtils";
 import { responsiveStylesToClasses } from "../../shared/utilityClassMapper";
 import { getCachedResponsiveScalesConfig } from "../responsiveStyleResolver";
@@ -318,6 +318,18 @@ export class ComponentBuilder {
 
     if (!node) return null;
 
+    // Resolve `_i18n` value objects to a single string before node-shape
+    // dispatch. Authors can write a localized string anywhere `children` is
+    // accepted — on raw `type: "node"` elements as well as component props.
+    // Precedence rule: an object with both `_i18n: true` and `type`/`tag`
+    // resolves as i18n.
+    if (isI18nValue(node)) {
+      const i18nResolveConfig = i18nConfig ?? DEFAULT_I18N_CONFIG;
+      const i18nEffectiveLocale = locale || i18nResolveConfig.defaultLocale;
+      const resolved = resolveI18nValue(node, i18nEffectiveLocale, i18nResolveConfig);
+      return this.buildComponent({ ...options, node: resolved as unknown as BuildComponentOptions['node'] });
+    }
+
     // Build context for specialized builders (needed for if condition evaluation)
     const ctx: BuilderContext = {
       key, elementPath, parentComponentName, viewportWidth, componentContext, componentRootPath,
@@ -731,10 +743,20 @@ export class ComponentBuilder {
   }
 
   /**
-   * Extract and merge attributes from node
+   * Extract and merge attributes from node. Resolves any `_i18n` value
+   * objects on attribute values to the active locale's string before
+   * downstream template / CMS processing, mirroring the SSR path.
    */
   private mergeAttributes(props: Record<string, unknown>, node: ComponentNode, ctx: BuilderContext): Record<string, unknown> {
-    let extractedAttributes = extractAttributesFromNode(node);
+    let extractedAttributes = extractAttributesFromNode(node) as Record<string, unknown>;
+    const attrI18nConfig = ctx.i18nConfig ?? DEFAULT_I18N_CONFIG;
+    const attrEffectiveLocale = ctx.locale || attrI18nConfig.defaultLocale;
+    for (const [key, value] of Object.entries(extractedAttributes)) {
+      if (isI18nValue(value)) {
+        extractedAttributes = { ...extractedAttributes };
+        extractedAttributes[key] = resolveI18nValue(value, attrEffectiveLocale, attrI18nConfig);
+      }
+    }
     const originalAttributes = { ...extractedAttributes };
 
     // Process CMS templates in attributes (e.g., src="{{cms.image}}", href="{{cms.link}}")

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

@@ -199,11 +199,19 @@ export function buildEmbed(
     }
   }
 
-  // Add extracted attributes className if present
-  if (extractedAttributes.className) {
-    const attrClasses = (extractedAttributes.className as string).split(/\s+/);
-    classNames.push(...attrClasses);
-    delete extractedAttributes.className;
+  // Add extracted attributes class/className if present
+  // JSON uses "class"; React uses "className". Without merging, the raw "class"
+  // 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;
+    if (attrClass) {
+      classNames.push(...attrClass.split(/\s+/));
+    }
+    delete (extractedAttributes as Record<string, unknown>).class;
+    delete (extractedAttributes as Record<string, unknown>).className;
   }
 
   // Set final className

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

@@ -174,11 +174,19 @@ export function buildLinkNode(
     }
   }
 
-  // Add extracted attributes className if present
-  if (extractedAttributes.className) {
-    const attrClasses = (extractedAttributes.className as string).split(/\s+/);
-    classNames.push(...attrClasses);
-    delete extractedAttributes.className;
+  // Add extracted attributes class/className if present
+  // JSON uses "class"; React uses "className". Without merging, the raw "class"
+  // 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;
+    if (attrClass) {
+      classNames.push(...attrClass.split(/\s+/));
+    }
+    delete (extractedAttributes as Record<string, unknown>).class;
+    delete (extractedAttributes as Record<string, unknown>).className;
   }
 
   // Add is-current class when link href matches current page path

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

@@ -146,11 +146,19 @@ export function buildLocaleList(
     }
   }
 
-  // Add extracted attributes className if present
-  if (extractedAttributes.className) {
-    const attrClasses = (extractedAttributes.className as string).split(/\s+/);
-    classNames.push(...attrClasses);
-    delete extractedAttributes.className;
+  // Add extracted attributes class/className if present
+  // JSON uses "class"; React uses "className". Without merging, the raw "class"
+  // 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;
+    if (attrClass) {
+      classNames.push(...attrClass.split(/\s+/));
+    }
+    delete (extractedAttributes as Record<string, unknown>).class;
+    delete (extractedAttributes as Record<string, unknown>).className;
   }
 
   // Set final className

package/lib/client/templateEngine.ts

@@ -797,6 +797,30 @@ export function processStructure(
             // Special handling for interactiveStyles - preserve as-is without mangling
             // Interactive styles contain StyleMapping objects that shouldn't be converted to nodes
             (processed as unknown as Record<string, unknown>).interactiveStyles = value;
+          } else if (key === 'source' && preservedType === NODE_TYPE.LIST) {
+            // Pre-resolve a bare prop-name source against the current component's
+            // props. Without this, a list with `sourceType: "prop"` placed inside
+            // another component's slot would fail to resolve at SSR time, because
+            // by then `ctx.componentResolvedProps` belongs to the slot host (not
+            // the component whose prop this references). The {{template}} form is
+            // already handled by the default-recursion branch below.
+            const structureRec = structure as Record<string, unknown>;
+            const sourceType = (structureRec.sourceType as string | undefined) ?? 'prop';
+            if (
+              sourceType === 'prop' &&
+              typeof value === 'string' &&
+              value !== '' &&
+              !hasTemplates(value) &&
+              context.props &&
+              Array.isArray((context.props as Record<string, unknown>)[value])
+            ) {
+              (processed as unknown as Record<string, unknown>).source = (context.props as Record<string, unknown>)[value];
+            } else {
+              const processedValue = processStructure(value as ComponentNode | ComponentNode[] | string | number | null | undefined, context, viewportWidth, instanceChildren, preserveResponsiveStyles, depth + 1);
+              if (processedValue !== null && processedValue !== undefined) {
+                (processed as unknown as Record<string, unknown>).source = processedValue;
+              }
+            }
           } else if (key !== 'type' && key !== 'children' && key !== 'style' && key !== 'props') {
             const processedValue = processStructure(value as ComponentNode | ComponentNode[] | string | number | null | undefined, context, viewportWidth, instanceChildren, preserveResponsiveStyles, depth + 1);
             // Only assign if it's a valid value

package/lib/server/fileWatcher.test.ts

@@ -0,0 +1,134 @@
+import { describe, test, expect, afterEach, beforeEach } from 'bun:test';
+import { mkdirSync, rmSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import { FileWatcher } from './fileWatcher';
+import { setProjectRoot, getProjectRoot } from './projectContext';
+
+/**
+ * Regression test for the "blank project" case: when `templates/` (or `cms/`)
+ * doesn't exist when the dev server starts, the watcher used to silently
+ * early-out and never fire onPageChange / onCMSChange even after the
+ * directory was created by an external tool. The deferred-attach path in
+ * fileWatcher.ts fixes this — the test asserts that callbacks now fire after
+ * a target directory is created post-startup.
+ *
+ * fs.watch on different OSes coalesces events differently, so the test waits
+ * generously and only asserts that the callback fires at least once.
+ */
+async function settle(ms = 300): Promise<void> {
+  await new Promise(r => setTimeout(r, ms));
+}
+
+describe('FileWatcher deferred attach', () => {
+  let projectRoot: string;
+
+  beforeEach(() => {
+    projectRoot = join(tmpdir(), `meno-fw-test-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    mkdirSync(projectRoot, { recursive: true });
+  });
+
+  afterEach(() => {
+    try { rmSync(projectRoot, { recursive: true, force: true }); } catch { /* ignore */ }
+  });
+
+  test('watchTemplates fires onPageChange after templates/ is created post-startup', async () => {
+    const seen: string[] = [];
+    const watcher = new FileWatcher({
+      onPageChange: async (p) => { seen.push(p); },
+    });
+
+    // templates/ does NOT exist yet — pre-fix this returned silently.
+    const templatesDir = join(projectRoot, 'templates');
+    watcher.watchTemplates(templatesDir);
+
+    // Simulate the external write that triggers the bug: create templates/
+    // and drop a JSON file into it.
+    await settle(50);
+    mkdirSync(templatesDir);
+    await settle(100);
+    writeFileSync(join(templatesDir, 'blog.json'), '{}');
+    await settle(300);
+
+    watcher.stopAll();
+    expect(seen.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('watchCMS fires onCMSChange after cms/ is created post-startup', async () => {
+    const seen: string[] = [];
+    const watcher = new FileWatcher({
+      onCMSChange: async (collection) => { seen.push(collection); },
+    });
+
+    const cmsDir = join(projectRoot, 'cms');
+    watcher.watchCMS(cmsDir);
+
+    await settle(50);
+    mkdirSync(join(cmsDir, 'blog'), { recursive: true });
+    await settle(100);
+    writeFileSync(join(cmsDir, 'blog', 'post.json'), '{}');
+    await settle(300);
+
+    watcher.stopAll();
+    expect(seen.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('returns silently when parent dir also does not exist', () => {
+    const watcher = new FileWatcher({});
+    expect(() => watcher.watchTemplates(join(projectRoot, 'nonexistent-parent', 'templates'))).not.toThrow();
+    watcher.stopAll();
+  });
+});
+
+describe('FileWatcher project.config.json', () => {
+  let projectRoot: string;
+  let prevRoot: string;
+
+  beforeEach(() => {
+    prevRoot = getProjectRoot();
+    projectRoot = join(tmpdir(), `meno-fw-cfg-${Date.now()}-${Math.random().toString(36).slice(2)}`);
+    mkdirSync(projectRoot, { recursive: true });
+    // watchProjectConfig reads getProjectRoot() — point it at the temp dir.
+    setProjectRoot(projectRoot);
+  });
+
+  afterEach(() => {
+    setProjectRoot(prevRoot);
+    try { rmSync(projectRoot, { recursive: true, force: true }); } catch { /* ignore */ }
+  });
+
+  test('fires onProjectConfigChange when project.config.json is written', async () => {
+    let fired = 0;
+    const watcher = new FileWatcher({
+      onProjectConfigChange: async () => { fired++; },
+    });
+
+    watcher.watchProjectConfig();
+    await settle(50);
+
+    // Simulate AI / external tool editing project.config.json to add a locale.
+    writeFileSync(join(projectRoot, 'project.config.json'), JSON.stringify({
+      i18n: { defaultLocale: 'en', locales: [{ code: 'en' }, { code: 'fr' }] }
+    }));
+    await settle(300);
+
+    watcher.stopAll();
+    expect(fired).toBeGreaterThanOrEqual(1);
+  });
+
+  test('ignores writes to unrelated files at the project root', async () => {
+    let fired = 0;
+    const watcher = new FileWatcher({
+      onProjectConfigChange: async () => { fired++; },
+    });
+
+    watcher.watchProjectConfig();
+    await settle(50);
+
+    writeFileSync(join(projectRoot, 'README.md'), 'hello');
+    await settle(200);
+
+    watcher.stopAll();
+    expect(fired).toBe(0);
+  });
+});

package/lib/server/fileWatcher.ts

@@ -4,11 +4,49 @@
  */
 
 import { watch, existsSync } from 'fs';
-import { dirname } from 'path';
+import { basename, dirname } from 'path';
 import type { FSWatcher } from 'fs';
 import { mapPageNameToPath } from './jsonLoader';
 import { projectPaths, getProjectRoot } from './projectContext';
 
+/**
+ * Attach a recursive watcher to `dirPath`. If the directory doesn't exist
+ * yet, watch the parent directory and defer the attach until the target is
+ * created (e.g. a blank project that doesn't ship with `templates/` or `cms/`
+ * gets one added later by an external tool).
+ *
+ * Returns the currently active FSWatcher (which may be the deferred parent
+ * watcher until the target appears, then the proper recursive watcher).
+ */
+function attachWhenDirExists(
+  dirPath: string,
+  attach: () => FSWatcher | null,
+  setWatcher: (w: FSWatcher | null) => void
+): void {
+  if (existsSync(dirPath)) {
+    setWatcher(attach());
+    return;
+  }
+
+  const parentDir = dirname(dirPath);
+  const targetName = basename(dirPath);
+  if (!existsSync(parentDir)) {
+    // Parent doesn't exist either — give up; nothing reasonable to watch.
+    return;
+  }
+
+  let parentWatcher: FSWatcher | null = null;
+  parentWatcher = watch(parentDir, (_event, filename) => {
+    if (filename !== targetName) return;
+    if (!existsSync(dirPath)) return;
+    // Target exists now — tear down the parent watcher and attach the real one.
+    parentWatcher?.close();
+    parentWatcher = null;
+    setWatcher(attach());
+  });
+  setWatcher(parentWatcher);
+}
+
 export interface FileWatchCallbacks {
   onComponentChange?: () => Promise<void>;
   onPageChange?: (pagePath: string) => Promise<void>;
@@ -18,6 +56,7 @@ export interface FileWatchCallbacks {
   onCMSChange?: (collection: string) => Promise<void>;
   onImageAdded?: (filename: string) => Promise<void>;
   onLibraryChange?: () => Promise<void>;
+  onProjectConfigChange?: () => Promise<void>;
 }
 
 export class FileWatcher {
@@ -30,6 +69,7 @@ export class FileWatcher {
   private cmsWatcher: FSWatcher | null = null;
   private imagesWatcher: FSWatcher | null = null;
   private librariesWatcher: FSWatcher | null = null;
+  private projectConfigWatcher: FSWatcher | null = null;
 
   constructor(private callbacks: FileWatchCallbacks) {}
   
@@ -85,29 +125,31 @@ export class FileWatcher {
   }
 
   /**
-   * Start watching root templates directory for CMS template changes
+   * Start watching root templates directory for CMS template changes.
+   * Falls back to a deferred-attach watcher on the project root when
+   * `templates/` doesn't exist yet (blank projects, projects that have never
+   * had a CMS collection).
    */
   watchTemplates(dirPath: string = projectPaths.templates()): void {
-    if (!existsSync(dirPath)) {
-      return;
-    }
-
-    this.templatesWatcher = watch(
+    attachWhenDirExists(
       dirPath,
-      { recursive: true },
-      async (event, filename) => {
-        if (filename && filename.endsWith('.json')) {
-          // Prefix with templates/ so the path is /templates/...
-          const pageName = `templates/${filename.replace('.json', '')}`;
-          const pagePath = mapPageNameToPath(pageName);
+      () => watch(
+        dirPath,
+        { recursive: true },
+        async (event, filename) => {
+          if (filename && filename.endsWith('.json')) {
+            // Prefix with templates/ so the path is /templates/...
+            const pageName = `templates/${filename.replace('.json', '')}`;
+            const pagePath = mapPageNameToPath(pageName);
 
-          if (this.callbacks.onPageChange) {
-            await this.callbacks.onPageChange(pagePath);
+            if (this.callbacks.onPageChange) {
+              await this.callbacks.onPageChange(pagePath);
+            }
           }
         }
-      }
+      ),
+      (w) => { this.templatesWatcher = w; }
     );
-
   }
   
   /**
@@ -164,26 +206,27 @@ export class FileWatcher {
   }
 
   /**
-   * Start watching CMS directory
-   * Watches for changes in CMS content files (cms/{collection}/*.json)
+   * Start watching CMS directory.
+   * Watches for changes in CMS content files (cms/{collection}/*.json).
+   * Falls back to a deferred-attach watcher when `cms/` doesn't exist yet.
    */
   watchCMS(dirPath: string = projectPaths.cms()): void {
-    if (!existsSync(dirPath)) {
-      return;
-    }
-
-    this.cmsWatcher = watch(
+    attachWhenDirExists(
       dirPath,
-      { recursive: true },
-      async (event, filename) => {
-        if (filename && filename.endsWith('.json')) {
-          // Extract collection from path: "blog/my-post.json" -> "blog"
-          const collection = filename.split('/')[0];
-          if (this.callbacks.onCMSChange) {
-            await this.callbacks.onCMSChange(collection);
+      () => watch(
+        dirPath,
+        { recursive: true },
+        async (event, filename) => {
+          if (filename && filename.endsWith('.json')) {
+            // Extract collection from path: "blog/my-post.json" -> "blog"
+            const collection = filename.split('/')[0];
+            if (this.callbacks.onCMSChange) {
+              await this.callbacks.onCMSChange(collection);
+            }
           }
         }
-      }
+      ),
+      (w) => { this.cmsWatcher = w; }
     );
   }
 
@@ -206,6 +249,25 @@ export class FileWatcher {
     );
   }
 
+  /**
+   * Start watching project.config.json for changes.
+   * Picks up edits to i18n locales, breakpoints, libraries, icons, etc. so the
+   * studio reflects external writes (e.g. an AI tool adding a new locale) without
+   * a dev-server restart.
+   */
+  watchProjectConfig(): void {
+    const dirPath = getProjectRoot();
+    this.projectConfigWatcher = watch(
+      dirPath,
+      { recursive: false },
+      async (_event, filename) => {
+        if (filename === 'project.config.json' && this.callbacks.onProjectConfigChange) {
+          await this.callbacks.onProjectConfigChange();
+        }
+      }
+    );
+  }
+
   /**
    * Start watching libraries directory for CSS/JS changes
    */
@@ -240,6 +302,7 @@ export class FileWatcher {
     this.watchCMS();
     this.watchImages();
     this.watchLibraries();
+    this.watchProjectConfig();
   }
   
   /**
@@ -290,6 +353,11 @@ export class FileWatcher {
       this.librariesWatcher.close();
       this.librariesWatcher = null;
     }
+
+    if (this.projectConfigWatcher) {
+      this.projectConfigWatcher.close();
+      this.projectConfigWatcher = null;
+    }
   }
   
   /**

package/lib/server/jsonLoader.ts

@@ -423,6 +423,7 @@ export function setI18nConfig(config: I18nConfig): void {
  */
 export interface IconsConfig {
   favicon?: string;
+  faviconDark?: string;
   appleTouchIcon?: string;
 }