meno-core 1.0.0

package/lib/client/scripts/formHandler.ts

@@ -0,0 +1,103 @@
+/**
+ * Client-side Form Handler
+ * Handles form submissions via fetch for forms with data-submit-handler="fetch"
+ *
+ * This script is designed to be included inline in SSR output.
+ * It's a self-executing module that attaches to forms automatically.
+ */
+
+export const formHandlerScript = `
+(function() {
+  // Find all forms with fetch handler
+  const forms = document.querySelectorAll('form[data-submit-handler="fetch"]');
+
+  forms.forEach(function(form) {
+    form.addEventListener('submit', async function(e) {
+      e.preventDefault();
+
+      const action = form.getAttribute('action');
+      const method = form.getAttribute('method') || 'POST';
+      const successMessage = form.getAttribute('data-success-message') || 'Form submitted successfully!';
+      const errorMessage = form.getAttribute('data-error-message') || 'Something went wrong. Please try again.';
+
+      // Find or create message element
+      let messageEl = form.querySelector('[data-form-message]');
+      if (!messageEl) {
+        messageEl = document.createElement('div');
+        messageEl.setAttribute('data-form-message', 'true');
+        form.appendChild(messageEl);
+      }
+
+      // Find submit button and disable it
+      const submitBtn = form.querySelector('button[type="submit"], input[type="submit"]');
+      const originalBtnText = submitBtn ? submitBtn.textContent || submitBtn.value : '';
+
+      if (submitBtn) {
+        submitBtn.disabled = true;
+        if (submitBtn.tagName === 'BUTTON') {
+          submitBtn.textContent = 'Sending...';
+        } else {
+          submitBtn.value = 'Sending...';
+        }
+      }
+
+      // Hide any previous message
+      messageEl.style.display = 'none';
+
+      try {
+        const formData = new FormData(form);
+
+        const response = await fetch(action, {
+          method: method.toUpperCase(),
+          body: formData,
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.success) {
+          // Success
+          messageEl.textContent = data.message || successMessage;
+          messageEl.style.display = 'block';
+          messageEl.style.backgroundColor = '#d4edda';
+          messageEl.style.color = '#155724';
+          messageEl.style.border = '1px solid #c3e6cb';
+
+          // Optionally reset form
+          form.reset();
+        } else {
+          // Error from server
+          messageEl.textContent = data.error || errorMessage;
+          messageEl.style.display = 'block';
+          messageEl.style.backgroundColor = '#f8d7da';
+          messageEl.style.color = '#721c24';
+          messageEl.style.border = '1px solid #f5c6cb';
+        }
+      } catch (error) {
+        // Network or other error
+        messageEl.textContent = errorMessage;
+        messageEl.style.display = 'block';
+        messageEl.style.backgroundColor = '#f8d7da';
+        messageEl.style.color = '#721c24';
+        messageEl.style.border = '1px solid #f5c6cb';
+      } finally {
+        // Re-enable submit button
+        if (submitBtn) {
+          submitBtn.disabled = false;
+          if (submitBtn.tagName === 'BUTTON') {
+            submitBtn.textContent = originalBtnText;
+          } else {
+            submitBtn.value = originalBtnText;
+          }
+        }
+      }
+    });
+  });
+})();
+`;
+
+/**
+ * Check if page HTML contains forms that need the fetch handler
+ */
+export function needsFormHandler(html: string): boolean {
+  return html.includes('data-submit-handler="fetch"');
+}

package/lib/client/styleProcessor.test.ts

@@ -0,0 +1,126 @@
+import { describe, test, expect } from 'bun:test';
+import { mergeStyles } from './styleProcessor';
+import type { StyleObject } from '../shared/types';
+
+describe('styleProcessor', () => {
+  describe('mergeStyles', () => {
+    test('merges multiple style objects', () => {
+      const style1: StyleObject = { color: 'red', fontSize: '16px' };
+      const style2: StyleObject = { padding: '10px' };
+      const result = mergeStyles(style1, style2);
+      expect(result).toEqual({
+        color: 'red',
+        fontSize: '16px',
+        padding: '10px'
+      });
+    });
+
+    test('later styles override earlier ones', () => {
+      const style1: StyleObject = { color: 'red', fontSize: '16px' };
+      const style2: StyleObject = { color: 'blue', padding: '10px' };
+      const result = mergeStyles(style1, style2);
+      expect(result).toEqual({
+        color: 'blue',
+        fontSize: '16px',
+        padding: '10px'
+      });
+    });
+
+    test('handles undefined styles', () => {
+      const style1: StyleObject = { color: 'red' };
+      const result = mergeStyles(style1, undefined, { fontSize: '16px' });
+      expect(result).toEqual({
+        color: 'red',
+        fontSize: '16px'
+      });
+    });
+
+    test('returns empty object when no styles provided', () => {
+      const result = mergeStyles();
+      expect(result).toEqual({});
+    });
+
+    test('handles all undefined styles', () => {
+      const result = mergeStyles(undefined, undefined, undefined);
+      expect(result).toEqual({});
+    });
+
+    test('merges complex style properties', () => {
+      const style1: StyleObject = {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '20px'
+      };
+      const style2: StyleObject = {
+        backgroundColor: '#f0f0f0',
+        border: '1px solid #ccc'
+      };
+      const style3: StyleObject = {
+        padding: '30px',
+        margin: '10px'
+      };
+      const result = mergeStyles(style1, style2, style3);
+      expect(result).toEqual({
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '30px',
+        backgroundColor: '#f0f0f0',
+        border: '1px solid #ccc',
+        margin: '10px'
+      });
+    });
+
+    test('handles single style object', () => {
+      const style: StyleObject = { color: 'blue' };
+      const result = mergeStyles(style);
+      expect(result).toEqual({ color: 'blue' });
+    });
+
+    test('does not mutate input styles', () => {
+      const style1: StyleObject = { color: 'red' };
+      const style2: StyleObject = { fontSize: '16px' };
+      const original1 = { ...style1 };
+      const original2 = { ...style2 };
+
+      mergeStyles(style1, style2);
+
+      expect(style1).toEqual(original1);
+      expect(style2).toEqual(original2);
+    });
+
+    test('handles empty style objects', () => {
+      const result = mergeStyles({}, {}, {});
+      expect(result).toEqual({});
+    });
+
+    test('merges with mix of empty and non-empty styles', () => {
+      const style1: StyleObject = {};
+      const style2: StyleObject = { color: 'red' };
+      const style3: StyleObject = {};
+      const result = mergeStyles(style1, style2, style3);
+      expect(result).toEqual({ color: 'red' });
+    });
+
+    test('handles numeric values', () => {
+      const style1: StyleObject = { opacity: 0.5, zIndex: 10 };
+      const style2: StyleObject = { zIndex: 20, fontSize: 16 };
+      const result = mergeStyles(style1, style2);
+      expect(result).toEqual({
+        opacity: 0.5,
+        zIndex: 20,
+        fontSize: 16
+      });
+    });
+
+    test('preserves falsy values', () => {
+      const style1: StyleObject = { opacity: 0, margin: '0' };
+      const style2: StyleObject = { padding: '0px' };
+      const result = mergeStyles(style1, style2);
+      expect(result).toEqual({
+        opacity: 0,
+        margin: '0',
+        padding: '0px'
+      });
+    });
+  });
+});

package/lib/client/styleProcessor.ts

@@ -0,0 +1,92 @@
+/**
+ * Style Processor
+ * Handles component style merging from structured component definitions
+ */
+
+import type { ComponentDefinition, StyleObject, StyleValue } from '../shared/types';
+import { processStructure, normalizeStyle } from './templateEngine';
+
+type ComponentProps = Record<string, unknown>;
+
+/**
+ * Merge component styles from structured component definition
+ * Returns merged props with all applicable styles
+ */
+export function mergeComponentStyles(
+  componentDef: ComponentDefinition,
+  props: ComponentProps
+): ComponentProps {
+  try {
+    // Start with base props from component definition
+    let mergedProps: ComponentProps = { ...(componentDef.props || {}) };
+
+    const structuredComponentDef = componentDef.component;
+    if (!structuredComponentDef) {
+      return props || {};
+    }
+
+    // Build default props from structured component prop definitions (from interface)
+    const defaultProps: ComponentProps = {};
+    if (structuredComponentDef.interface) {
+      for (const [key, def] of Object.entries(structuredComponentDef.interface)) {
+        if (def && typeof def === 'object' && 'default' in def) {
+          defaultProps[key] = def.default;
+        }
+      }
+    }
+    const effectiveInputProps = { ...defaultProps, ...(props || {}) };
+
+    // Merge resolved props (with defaults) into mergedProps so they're available in PropsPanel
+    mergedProps = { ...mergedProps, ...effectiveInputProps };
+
+    // Compute base style from structure with templates evaluated
+    // processStructure now reads from structure.style and merges into props.style
+    try {
+      if (structuredComponentDef.structure) {
+        const processed = processStructure(structuredComponentDef.structure, { props: effectiveInputProps, componentDef: structuredComponentDef });
+        // Type guard: ensure processed is a ComponentNode
+        if (processed && typeof processed === 'object' && !Array.isArray(processed) && 'props' in processed) {
+          const structureStyle = (processed.props?.style && typeof processed.props.style === 'object' && processed.props.style !== null && !Array.isArray(processed.props.style))
+            ? processed.props.style as Record<string, unknown>
+            : {};
+          const currentStyle = typeof mergedProps.style === 'object' && mergedProps.style !== null && !Array.isArray(mergedProps.style)
+            ? { ...mergedProps.style as Record<string, unknown> }
+            : {};
+          mergedProps.style = { ...currentStyle, ...structureStyle };
+        }
+      }
+    } catch (e) {
+    }
+
+    // Merge with instance props (allows overrides)
+    // Normalize responsive styles to flat StyleObject
+    const restProps = props || {};
+    const normalizedMergedStyle = normalizeStyle(mergedProps.style as StyleValue) || {};
+    const normalizedRestStyle = normalizeStyle(restProps?.style as StyleValue) || {};
+    
+    mergedProps = {
+      ...mergedProps,
+      ...restProps,
+      style: {
+        ...normalizedMergedStyle,
+        ...normalizedRestStyle,
+      },
+    };
+
+    return mergedProps;
+  } catch (error) {
+    // Return props as-is if merging fails
+    return props || {};
+  }
+}
+
+/**
+ * Merge styles from multiple sources
+ */
+export function mergeStyles(...styles: (StyleObject | undefined)[]): StyleObject {
+  return styles.reduce<StyleObject>((acc, style) => {
+    if (!style) return acc;
+    return { ...acc, ...style };
+  }, {});
+}
+

package/lib/client/styles/StyleInjector.test.ts

@@ -0,0 +1,354 @@
+import { test, expect, describe, beforeEach, afterEach, mock } from "bun:test";
+import { StyleInjector } from "./StyleInjector";
+import { ComponentRegistry } from "../componentRegistry";
+import { ElementRegistry } from "../elementRegistry";
+import type { ComponentDefinition } from "../../shared/types";
+import {
+  createTypedMockHTMLElement,
+  createTypedMockDocument,
+  type TypedMockDocument,
+  type TypedMockHTMLElement,
+} from "../../test-utils/factories/DomMockFactory";
+
+describe("StyleInjector", () => {
+  let componentRegistry: ComponentRegistry;
+  let elementRegistry: ElementRegistry;
+  let styleInjector: StyleInjector;
+  let mockDocument: TypedMockDocument;
+  let mockStyleTag: TypedMockHTMLElement;
+  let originalDocument: typeof document;
+
+  beforeEach(() => {
+    // Save original document
+    originalDocument = global.document;
+
+    componentRegistry = new ComponentRegistry();
+    elementRegistry = new ElementRegistry();
+    styleInjector = new StyleInjector({
+      componentRegistry,
+      elementRegistry,
+      styleId: "component-css",
+    });
+
+    // Create typed mock style tag
+    mockStyleTag = createTypedMockHTMLElement({
+      tagName: "STYLE",
+      id: "component-css",
+    });
+
+    // Create typed mock document
+    mockDocument = createTypedMockDocument();
+
+    // Configure createElement to return our mock style tag
+    mockDocument.createElement.mockImplementation((tag: string) => {
+      if (tag === "style") {
+        return mockStyleTag;
+      }
+      return createTypedMockHTMLElement({ tagName: tag });
+    });
+
+    // Setup global document with typed mock
+    global.document = mockDocument as unknown as Document;
+  });
+
+  afterEach(() => {
+    // Clean up any style tags
+    styleInjector.clear();
+    // Restore original document
+    global.document = originalDocument;
+  });
+
+  describe("constructor", () => {
+    test("should create instance with default styleId", () => {
+      const injector = new StyleInjector({
+        componentRegistry,
+        elementRegistry,
+      });
+      expect(injector).toBeInstanceOf(StyleInjector);
+    });
+
+    test("should create instance with custom styleId", () => {
+      const injector = new StyleInjector({
+        componentRegistry,
+        elementRegistry,
+        styleId: "custom-style-id",
+      });
+      expect(injector).toBeInstanceOf(StyleInjector);
+    });
+  });
+
+  describe("inject", () => {
+    test("should inject CSS without templates", () => {
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test { color: red; }",
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      styleInjector.inject();
+
+      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+      expect(mockDocument.head.appendChild).toHaveBeenCalled();
+      expect(mockStyleTag.textContent).toContain(".test { color: red; }");
+      expect(mockStyleTag.textContent).toContain("Component: TestComponent");
+    });
+
+    // Template-based tests require full ElementRegistry from @meno/studio
+    // These are integration tests that should be run in the studio package
+    test.skip("should inject CSS with templates per instance (requires @meno/studio ElementRegistry)", () => {
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test { color: {{color}}; }",
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      // Register component instances with props using typed mocks
+      const mockElement1 = createTypedMockHTMLElement({ tagName: "DIV" });
+      const mockElement2 = createTypedMockHTMLElement({ tagName: "DIV" });
+      elementRegistry.register([0], mockElement1 as unknown as HTMLElement, "TestComponent", true, {
+        color: "red",
+      });
+      elementRegistry.register([1], mockElement2 as unknown as HTMLElement, "TestComponent", true, {
+        color: "blue",
+      });
+
+      styleInjector.inject();
+
+      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+      expect(mockDocument.head.appendChild).toHaveBeenCalled();
+      expect(mockStyleTag.textContent).toContain("color: red");
+      expect(mockStyleTag.textContent).toContain("color: blue");
+      expect(mockStyleTag.textContent).toContain("(instance)");
+    });
+
+    test.skip("should handle multiple components with mixed template/non-template CSS (requires @meno/studio ElementRegistry)", () => {
+      const componentDef1: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test1 { color: red; }",
+        },
+      };
+
+      const componentDef2: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test2 { color: {{color}}; }",
+        },
+      };
+
+      componentRegistry.register("Component1", componentDef1);
+      componentRegistry.register("Component2", componentDef2);
+
+      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, "Component2", true, {
+        color: "blue",
+      });
+
+      styleInjector.inject();
+
+      expect(mockStyleTag.textContent).toContain("Component: Component1");
+      expect(mockStyleTag.textContent).toContain("Component: Component2");
+      expect(mockStyleTag.textContent).toContain(".test1 { color: red; }");
+      expect(mockStyleTag.textContent).toContain("color: blue");
+    });
+
+    test("should handle existing style tag before injecting new one", () => {
+      const existingStyle = createTypedMockHTMLElement({
+        tagName: "STYLE",
+        id: "component-css",
+      });
+
+      mockDocument.getElementById.mockReturnValue(existingStyle);
+
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test { color: red; }",
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      styleInjector.inject();
+
+      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
+      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+    });
+
+    test("should not inject CSS if no components have CSS", () => {
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      styleInjector.inject();
+
+      expect(mockDocument.createElement).not.toHaveBeenCalled();
+      expect(mockDocument.head.appendChild).not.toHaveBeenCalled();
+    });
+
+    test.skip("should handle template processing errors gracefully (requires @meno/studio ElementRegistry)", () => {
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test { color: {{invalid.prop}}; }",
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, "TestComponent", true, {
+        color: "red",
+      });
+
+      // Should not throw, should fallback to original CSS
+      expect(() => styleInjector.inject()).not.toThrow();
+      expect(mockStyleTag.textContent).toContain("Component: TestComponent");
+    });
+
+    test("should handle missing component props gracefully", () => {
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test { color: {{color}}; }",
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      // Register element without props
+      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, "TestComponent", true);
+
+      // Should not throw
+      expect(() => styleInjector.inject()).not.toThrow();
+    });
+
+    test("should handle errors during injection gracefully", () => {
+      // Force an error by making getAll throw
+      const originalGetAll = componentRegistry.getAll.bind(componentRegistry);
+      componentRegistry.getAll = mock(() => {
+        throw new Error("Test error");
+      });
+
+      // Should not throw - should handle error gracefully
+      expect(() => styleInjector.inject()).not.toThrow();
+
+      // Restore
+      componentRegistry.getAll = originalGetAll;
+    });
+  });
+
+  describe("clear", () => {
+    test("should remove style tag if it exists", () => {
+      const existingStyle = createTypedMockHTMLElement({
+        tagName: "STYLE",
+        id: "component-css",
+      });
+
+      mockDocument.getElementById.mockReturnValueOnce(existingStyle);
+
+      styleInjector.clear();
+
+      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
+      expect(existingStyle.remove).toHaveBeenCalled();
+    });
+
+    test("should not throw if style tag does not exist", () => {
+      mockDocument.getElementById.mockReturnValueOnce(null);
+
+      expect(() => styleInjector.clear()).not.toThrow();
+    });
+  });
+
+  describe("exists", () => {
+    test("should return true if style tag exists", () => {
+      const existingStyle = createTypedMockHTMLElement({
+        tagName: "STYLE",
+        id: "component-css",
+      });
+
+      mockDocument.getElementById.mockReturnValueOnce(existingStyle);
+
+      expect(styleInjector.exists()).toBe(true);
+      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
+    });
+
+    test("should return false if style tag does not exist", () => {
+      mockDocument.getElementById.mockReturnValueOnce(null);
+
+      expect(styleInjector.exists()).toBe(false);
+      expect(mockDocument.getElementById).toHaveBeenCalledWith("component-css");
+    });
+  });
+
+  describe("integration", () => {
+    test.skip("should handle full injection cycle (requires @meno/studio ElementRegistry)", () => {
+      const componentDef: ComponentDefinition = {
+        type: "component",
+        component: {
+          interface: {},
+          structure: { type: "node", tag: "div" },
+          css: ".test { color: {{color}}; }",
+        },
+      };
+
+      componentRegistry.register("TestComponent", componentDef);
+
+      const mockElement = createTypedMockHTMLElement({ tagName: "DIV" });
+      elementRegistry.register([0], mockElement as unknown as HTMLElement, "TestComponent", true, {
+        color: "green",
+      });
+
+      // Inject - should create style tag
+      mockDocument.getElementById.mockReturnValueOnce(null); // No existing tag
+      styleInjector.inject();
+      expect(mockDocument.createElement).toHaveBeenCalledWith("style");
+      expect(mockDocument.head.appendChild).toHaveBeenCalled();
+
+      // Verify exists() works after injection
+      mockDocument.getElementById.mockReturnValueOnce(mockStyleTag);
+      expect(styleInjector.exists()).toBe(true);
+
+      // Clear - should remove style tag
+      const styleTagWithRemove = createTypedMockHTMLElement({
+        tagName: "STYLE",
+        id: "component-css",
+      });
+      mockDocument.getElementById.mockReturnValueOnce(styleTagWithRemove);
+      styleInjector.clear();
+      expect(styleTagWithRemove.remove).toHaveBeenCalled();
+
+      // Verify it's gone
+      mockDocument.getElementById.mockReturnValueOnce(null);
+      expect(styleInjector.exists()).toBe(false);
+    });
+  });
+});
+