meno-core 1.0.3 → 1.0.5

package/bin/cli.ts

@@ -5,7 +5,7 @@
  */
 
 import { resolve, join } from 'path';
-import { existsSync, mkdirSync, writeFileSync, cpSync } from 'fs';
+import { existsSync, mkdirSync, writeFileSync, cpSync, readFileSync } from 'fs';
 import { setProjectRoot } from '../lib/server/projectContext';
 
 const args = process.argv.slice(2);
@@ -35,10 +35,66 @@ Examples:
 `);
 }
 
+// Parse _headers file (Netlify/Cloudflare format)
+function parseHeadersFile(distPath: string): Map<string, Record<string, string>> {
+  const headersPath = join(distPath, '_headers');
+  const headers = new Map<string, Record<string, string>>();
+
+  if (!existsSync(headersPath)) return headers;
+
+  const content = readFileSync(headersPath, 'utf-8');
+  let currentPath = '';
+
+  for (const line of content.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('#')) continue;
+
+    if (!line.startsWith(' ') && !line.startsWith('\t')) {
+      // Path line
+      currentPath = trimmed;
+      if (!headers.has(currentPath)) {
+        headers.set(currentPath, {});
+      }
+    } else if (currentPath && trimmed.includes(':')) {
+      // Header line
+      const colonIndex = trimmed.indexOf(':');
+      const name = trimmed.substring(0, colonIndex).trim();
+      const value = trimmed.substring(colonIndex + 1).trim();
+      headers.get(currentPath)![name] = value;
+    }
+  }
+
+  return headers;
+}
+
+// Get headers matching a pathname
+function getMatchingHeaders(
+  pathname: string,
+  headersMap: Map<string, Record<string, string>>
+): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  headersMap.forEach((headers, pattern) => {
+    if (pattern === pathname || pattern === '/*') {
+      Object.assign(result, headers);
+    } else if (pattern.endsWith('/*')) {
+      const prefix = pattern.slice(0, -1);
+      if (pathname.startsWith(prefix)) {
+        Object.assign(result, headers);
+      }
+    }
+  });
+
+  return result;
+}
+
 // Start static file server on port 8080 (non-blocking)
 async function startStaticServer(distPath: string) {
   const { SERVE_PORT } = await import('../lib/shared/constants');
 
+  // Parse _headers file once on startup
+  const headersMap = parseHeadersFile(distPath);
+
   const server = Bun.serve({
     port: SERVE_PORT,
     async fetch(req: Request) {
@@ -50,6 +106,9 @@ async function startStaticServer(distPath: string) {
         pathname = '/index.html';
       }
 
+      // Get custom headers for this path
+      const customHeaders = getMatchingHeaders(pathname, headersMap);
+
       // Try to serve the file
       const filePath = join(distPath, pathname);
 
@@ -57,7 +116,7 @@ async function startStaticServer(distPath: string) {
       if (existsSync(filePath)) {
         const file = Bun.file(filePath);
         if (await file.exists()) {
-          return new Response(file);
+          return new Response(file, { headers: customHeaders });
         }
       }
 
@@ -65,14 +124,14 @@ async function startStaticServer(distPath: string) {
       const htmlPath = filePath.endsWith('.html') ? filePath : `${filePath}.html`;
       if (existsSync(htmlPath)) {
         const file = Bun.file(htmlPath);
-        return new Response(file);
+        return new Response(file, { headers: customHeaders });
       }
 
       // Try index.html in directory
       const indexPath = join(filePath, 'index.html');
       if (existsSync(indexPath)) {
         const file = Bun.file(indexPath);
-        return new Response(file);
+        return new Response(file, { headers: customHeaders });
       }
 
       return new Response('Not Found', { status: 404 });

package/build-static.ts

@@ -299,11 +299,27 @@ async function buildStaticPages(): Promise<void> {
   const functionsDir = projectPaths.functions();
   if (existsSync(functionsDir)) {
     copyDirectory(functionsDir, join(distDir, "functions"));
-    console.log("✅ Assets and functions copied\n");
-  } else {
-    console.log("✅ Assets copied\n");
   }
 
+  // Copy _headers and _redirects files for static hosting (Netlify, Cloudflare Pages)
+  const hostingFiles: string[] = [];
+  const headersFile = join(projectPaths.project, '_headers');
+  const redirectsFile = join(projectPaths.project, '_redirects');
+
+  if (existsSync(headersFile)) {
+    copyFileSync(headersFile, join(distDir, '_headers'));
+    hostingFiles.push('_headers');
+  }
+  if (existsSync(redirectsFile)) {
+    copyFileSync(redirectsFile, join(distDir, '_redirects'));
+    hostingFiles.push('_redirects');
+  }
+
+  const parts = ['Assets'];
+  if (existsSync(functionsDir)) parts.push('functions');
+  if (hostingFiles.length > 0) parts.push(hostingFiles.join(', '));
+  console.log(`✅ ${parts.join(', ')} copied\n`);
+
   // Load all global components
   const components = await loadComponentDirectory(projectPaths.components());
   const globalComponents: Record<string, ComponentDefinition> = {};

package/entries/server-router.tsx

@@ -66,7 +66,6 @@ const { server, port } = createServer({
   wsManager,
   cmsService,
   cmsProvider,
-  enableEditor: true, // Full editor mode
 });
 
 console.log(`Server with routing and HMR running at http://localhost:${port}`);

package/lib/client/ErrorBoundary.test.tsx

@@ -1,6 +1,6 @@
 import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
 import { ErrorBoundary, withErrorBoundary } from "./ErrorBoundary";
-import { createElement as h, Component, useState } from "react";
+import React, { createElement as h, Component, useState } from "react";
 import { createRoot, Root } from "react-dom/client";
 import { flushPromises, wait } from "../test-utils/helpers/asyncHelpers";
 
@@ -33,7 +33,7 @@ function cleanupContainer(container: HTMLElement) {
 }
 
 // Component that throws an error when rendered
-function ThrowingComponent({ error }: { error: Error }) {
+function ThrowingComponent({ error }: { error: Error }): React.ReactNode {
   throw error;
 }
 
@@ -124,7 +124,7 @@ describe("ErrorBoundary - Error catching", () => {
 
         // Verify onError callback was called with the error
         expect(onErrorMock).toHaveBeenCalled();
-        const callArgs = onErrorMock.mock.calls[0];
+        const callArgs = (onErrorMock.mock.calls as unknown as [Error, unknown][])[0];
         expect(callArgs[0]).toBe(testError);
       } finally {
         root.unmount();

package/lib/client/componentRegistry.test.ts

@@ -1,5 +1,21 @@
 import { test, expect, describe, beforeEach } from "bun:test";
 import { ComponentRegistry } from "./componentRegistry";
+import type { ComponentDefinition, ComponentNode, PropDefinition } from "../shared/types";
+
+/**
+ * Helper function to create a valid ComponentDefinition for tests
+ */
+function createTestComponentDef(
+  structure?: ComponentNode,
+  componentInterface?: Record<string, PropDefinition>
+): ComponentDefinition {
+  return {
+    component: {
+      interface: componentInterface || {},
+      structure: structure || { type: "node" as const, tag: "div", children: [] }
+    }
+  };
+}
 
 describe("ComponentRegistry", () => {
   let registry: ComponentRegistry;
@@ -10,10 +26,9 @@ describe("ComponentRegistry", () => {
 
   describe("register and get", () => {
     test("should register and retrieve a component", () => {
-      const buttonDef = {
-        type: "button",
-        props: { className: "btn" }
-      };
+      const buttonDef = createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [], attributes: { className: "btn" } }
+      );
 
       registry.register("Button", buttonDef);
       const retrieved = registry.get("Button");
@@ -27,17 +42,25 @@ describe("ComponentRegistry", () => {
     });
 
     test("should overwrite existing component with same name", () => {
-      registry.register("Button", { type: "button", props: { color: "red" } });
-      registry.register("Button", { type: "button", props: { color: "blue" } });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [], attributes: { color: "red" } }
+      ));
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [], attributes: { color: "blue" } }
+      ));
 
       const result = registry.get("Button");
-      expect(result?.props.color).toBe("blue");
+      const structure = result?.component?.structure;
+      const attributes = structure && 'attributes' in structure ? structure.attributes as Record<string, unknown> : undefined;
+      expect(attributes?.color).toBe("blue");
     });
   });
 
   describe("has", () => {
     test("should return true for registered component", () => {
-      registry.register("Card", { type: "div" });
+      registry.register("Card", createTestComponentDef(
+        { type: "node" as const, tag: "div", children: [] }
+      ));
       expect(registry.has("Card")).toBe(true);
     });
 
@@ -48,8 +71,12 @@ describe("ComponentRegistry", () => {
 
   describe("clear", () => {
     test("should clear all components", () => {
-      registry.register("Button", { type: "button" });
-      registry.register("Card", { type: "div" });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [] }
+      ));
+      registry.register("Card", createTestComponentDef(
+        { type: "node" as const, tag: "div", children: [] }
+      ));
 
       expect(registry.getNames().length).toBe(2);
 
@@ -63,11 +90,13 @@ describe("ComponentRegistry", () => {
 
   describe("merge", () => {
     test("should merge multiple components", () => {
-      registry.register("Button", { type: "button" });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [] }
+      ));
 
       registry.merge({
-        Card: { type: "div" },
-        Link: { type: "a" }
+        Card: createTestComponentDef({ type: "node" as const, tag: "div", children: [] }),
+        Link: createTestComponentDef({ type: "node" as const, tag: "a", children: [] })
       });
 
       expect(registry.getNames().length).toBe(3);
@@ -77,21 +106,31 @@ describe("ComponentRegistry", () => {
     });
 
     test("should overwrite existing components when merging", () => {
-      registry.register("Button", { type: "button", props: { color: "red" } });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [], attributes: { color: "red" } }
+      ));
 
       registry.merge({
-        Button: { type: "button", props: { color: "blue" } }
+        Button: createTestComponentDef(
+          { type: "node" as const, tag: "button", children: [], attributes: { color: "blue" } }
+        )
       });
 
       const button = registry.get("Button");
-      expect(button?.props.color).toBe("blue");
+      const structure = button?.component?.structure;
+      const attributes = structure && 'attributes' in structure ? structure.attributes as Record<string, unknown> : undefined;
+      expect(attributes?.color).toBe("blue");
     });
   });
 
   describe("getAll", () => {
     test("should return all registered components", () => {
-      registry.register("Button", { type: "button" });
-      registry.register("Card", { type: "div" });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [] }
+      ));
+      registry.register("Card", createTestComponentDef(
+        { type: "node" as const, tag: "div", children: [] }
+      ));
 
       const all = registry.getAll();
 
@@ -101,10 +140,14 @@ describe("ComponentRegistry", () => {
     });
 
     test("should return a copy, not the original registry", () => {
-      registry.register("Button", { type: "button" });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [] }
+      ));
 
       const all = registry.getAll();
-      all.NewComponent = { type: "span" };
+      all.NewComponent = createTestComponentDef(
+        { type: "node" as const, tag: "span", children: [] }
+      );
 
       expect(registry.has("NewComponent")).toBe(false);
     });
@@ -112,8 +155,12 @@ describe("ComponentRegistry", () => {
 
   describe("getNames", () => {
     test("should return list of component names", () => {
-      registry.register("Button", { type: "button" });
-      registry.register("Card", { type: "div" });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [] }
+      ));
+      registry.register("Card", createTestComponentDef(
+        { type: "node" as const, tag: "div", children: [] }
+      ));
 
       const names = registry.getNames();
 
@@ -128,7 +175,9 @@ describe("ComponentRegistry", () => {
 
   describe("remove", () => {
     test("should remove a component and return true", () => {
-      registry.register("Button", { type: "button" });
+      registry.register("Button", createTestComponentDef(
+        { type: "node" as const, tag: "button", children: [] }
+      ));
 
       const result = registry.remove("Button");
 
@@ -142,23 +191,20 @@ describe("ComponentRegistry", () => {
     });
   });
 
-  describe("component with variants", () => {
-    test("should handle components with variant definitions", () => {
-      const buttonDef = {
-        type: "button",
-        variants: {
-          primary: { backgroundColor: "blue", color: "white" },
-          secondary: { backgroundColor: "gray", color: "black" }
-        },
-        defaultVariant: "primary"
+  describe("component with category", () => {
+    test("should handle components with category definitions", () => {
+      const buttonDef: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: "node" as const, tag: "button", children: [] },
+          category: "buttons"
+        }
       };
 
       registry.register("Button", buttonDef);
       const retrieved = registry.get("Button");
 
-      expect(retrieved?.variants?.primary).toBeDefined();
-      expect(retrieved?.variants?.primary?.backgroundColor).toBe("blue");
-      expect(retrieved?.defaultVariant).toBe("primary");
+      expect(retrieved?.component?.category).toBe("buttons");
     });
   });
 });

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

@@ -3,22 +3,19 @@ import { ComponentBuilder } from "./ComponentBuilder";
 import { ComponentRegistry } from "../componentRegistry";
 import { ElementRegistry } from "../elementRegistry";
 import type { ComponentNode, CMSListNode, CMSItem } from "../../shared/types";
-import type { HighlightManager } from "../highlightManager";
 import { NODE_TYPE } from "../../shared/constants";
-import { createMockHighlightManager, createMockElementRegistry } from "../../test-utils/mocks";
+import { createMockElementRegistry } from "../../test-utils/mocks";
 
 // Note: Using typed mocks from test-utils/mocks instead of inline 'as any' casts
 
 describe("ComponentBuilder", () => {
   let componentRegistry: ComponentRegistry;
-  let hoverHighlightManager: HighlightManager;
   let elementRegistry: ElementRegistry;
   let builder: ComponentBuilder;
   let registeredPaths: Array<{ path: string; tag?: string }>;
 
   beforeEach(() => {
     componentRegistry = new ComponentRegistry();
-    hoverHighlightManager = createMockHighlightManager();
     registeredPaths = [];
 
     // Create mock element registry with path tracking
@@ -31,7 +28,6 @@ describe("ComponentBuilder", () => {
 
     builder = new ComponentBuilder({
       componentRegistry,
-      hoverHighlightManager,
       elementRegistry,
     });
   });
@@ -711,7 +707,7 @@ describe("ComponentBuilder", () => {
       ]);
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -730,7 +726,7 @@ describe("ComponentBuilder", () => {
       ]);
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -758,7 +754,7 @@ describe("ComponentBuilder", () => {
       ]);
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -774,7 +770,7 @@ describe("ComponentBuilder", () => {
       ]);
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -791,7 +787,7 @@ describe("ComponentBuilder", () => {
       ]);
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: [] },
       });
 
@@ -808,7 +804,7 @@ describe("ComponentBuilder", () => {
       ]);
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: {}, // No posts collection
       });
 
@@ -823,7 +819,7 @@ describe("ComponentBuilder", () => {
       ], { limit: 2 });
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -840,7 +836,7 @@ describe("ComponentBuilder", () => {
       ], { offset: 2 });
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -857,7 +853,7 @@ describe("ComponentBuilder", () => {
       ], { offset: 1, limit: 2 });
 
       const result = builder.buildComponent({
-        node,
+        node: node as unknown as ComponentNode,
         collectionItemsMap: { posts: items },
       });
 
@@ -924,7 +920,6 @@ describe("ComponentBuilder", () => {
       // Create builder with page name getter
       const pageBuilder = new ComponentBuilder({
         componentRegistry,
-        hoverHighlightManager,
         elementRegistry,
         getCurrentPageName: () => "about",
         getCurrentFileType: () => "page",
@@ -1005,7 +1000,7 @@ describe("ComponentBuilder", () => {
 
       const result1 = builder.buildComponent({
         node: node1,
-        path: [0],
+        elementPath: [0],
       });
 
       expect(result1).not.toBeNull();
@@ -1013,7 +1008,7 @@ describe("ComponentBuilder", () => {
       // Second instance at page path [1, 2, 3]
       const result2 = builder.buildComponent({
         node: node1,
-        path: [1, 2, 3],
+        elementPath: [1, 2, 3],
       });
 
       expect(result2).not.toBeNull();
@@ -1055,7 +1050,6 @@ describe("ComponentBuilder", () => {
       // Page element with same name
       const pageBuilder = new ComponentBuilder({
         componentRegistry,
-        hoverHighlightManager,
         elementRegistry,
         getCurrentPageName: () => "button",
         getCurrentFileType: () => "page",

package/lib/client/core/ComponentBuilder.ts

@@ -244,8 +244,10 @@ export class ComponentBuilder {
       elementRegistry: this.elementRegistry,
       prefetchService: this.prefetchService,
       getCachedStyleClasses: this.getCachedStyleClasses.bind(this),
-      buildChildren: this.buildChildren.bind(this),
+      buildChildren: this.buildChildren.bind(this) as (children: unknown, ctx: BuildChildrenContext) => BuildResult,
       getEffectiveParentComponentName: this.getEffectiveParentComponentName.bind(this),
+      getCurrentPageName: this.getCurrentPageName,
+      getCurrentFileType: this.getCurrentFileType,
     };
 
     // Handle text nodes - process CMS templates and item templates
@@ -482,6 +484,21 @@ export class ComponentBuilder {
       } else {
         InteractiveStylesRegistry.set(elementClass, nodeInteractiveStyles);
       }
+
+      // Apply preview classes when previewProp is set and truthy
+      if (ctx.componentResolvedProps) {
+        const previewClasses: string[] = [];
+        for (const rule of nodeInteractiveStyles) {
+          if (rule.previewProp && ctx.componentResolvedProps[rule.previewProp] === true) {
+            // Convert rule's style to utility classes
+            const styleClasses = this.getCachedStyleClasses(rule.style);
+            previewClasses.push(...styleClasses);
+          }
+        }
+        if (previewClasses.length > 0) {
+          result.className = [result.className, ...previewClasses].filter(Boolean).join(' ');
+        }
+      }
     }
 
     return result;
@@ -501,7 +518,7 @@ export class ComponentBuilder {
       const i18nResolver: ValueResolver | undefined = effectiveLocale
         ? (value: unknown) => resolveI18nValue(value, effectiveLocale, config)
         : undefined;
-      extractedAttributes = processItemPropsTemplate(extractedAttributes, effectiveItemContext, i18nResolver);
+      extractedAttributes = processItemPropsTemplate(extractedAttributes, effectiveItemContext, i18nResolver) as Record<string, string | number | boolean>;
     }
 
     if (Object.keys(extractedAttributes).length === 0) {
@@ -510,9 +527,9 @@ export class ComponentBuilder {
 
     let result = { ...props };
 
-    // Handle class/className specially
-    if (extractedAttributes.class || extractedAttributes.className) {
-      const attrClass = (extractedAttributes.class || extractedAttributes.className || '') as string;
+    // Handle class/className specially - check key existence, not truthiness (empty string is valid)
+    if ('class' in extractedAttributes || 'className' in extractedAttributes) {
+      const attrClass = (extractedAttributes.class ?? extractedAttributes.className ?? '') as string;
       const existingClassName = (result.className || '') as string;
       result.className = [existingClassName, attrClass].filter(Boolean).join(' ');
       delete extractedAttributes.class;
@@ -552,7 +569,7 @@ export class ComponentBuilder {
       let resolvedProps = resolvePropsFromDefinition(
         structuredComponentDef,
         nodeProps,
-        children,
+        children as ComponentNode | string | (ComponentNode | string)[] | null | undefined,
         locale,
         i18nConfig
       );
@@ -573,7 +590,8 @@ export class ComponentBuilder {
       }
 
       // Process structure
-      const markedChildren = children ? markAsSlotContent(children) : undefined;
+      const typedChildren = children as ComponentNode | ComponentNode[] | string | number | null | undefined;
+      const markedChildren = typedChildren ? markAsSlotContent(typedChildren) : undefined;
       const processedStructure = processStructure(
         structuredComponentDef.structure,
         { props: resolvedProps, componentDef: structuredComponentDef },

package/lib/client/core/ComponentRenderer.test.tsx

@@ -19,7 +19,6 @@ describe('ComponentRenderer', () => {
     
     componentBuilder = new ComponentBuilder({
       componentRegistry,
-      hoverHighlightManager: highlightManager,
       elementRegistry,
     });