meno-core 1.0.0

package/lib/shared/registry/RegistryManager.test.ts

@@ -0,0 +1,58 @@
+import { describe, test, expect } from 'bun:test';
+import { RegistryManager } from './RegistryManager';
+
+describe('RegistryManager', () => {
+  test('creates client and SSR registries', () => {
+    const manager = new RegistryManager();
+    expect(manager.getClient()).toBeDefined();
+    expect(manager.getSSR()).toBeDefined();
+  });
+
+  test('registerAll adds to both registries', () => {
+    const manager = new RegistryManager();
+    const def = { component: { structure: { type: 'node', tag: 'div' } } };
+
+    manager.registerAll('TestComponent', def);
+
+    expect(manager.getClient().get('TestComponent')).toEqual(def);
+    expect(manager.getSSR().get('TestComponent')).toEqual(def);
+  });
+
+  test('sync copies from client to SSR', () => {
+    const manager = new RegistryManager();
+    const def = { component: { structure: { type: 'node', tag: 'div' } } };
+
+    manager.getClient().register('TestComponent', def);
+    manager.sync('client', 'ssr');
+
+    expect(manager.getSSR().get('TestComponent')).toEqual(def);
+  });
+
+  test('sync copies from SSR to client', () => {
+    const manager = new RegistryManager();
+    const def = { component: { structure: { type: 'node', tag: 'div' } } };
+
+    manager.getSSR().register('TestComponent', def);
+    manager.sync('ssr', 'client');
+
+    expect(manager.getClient().get('TestComponent')).toEqual(def);
+  });
+
+  test('clearAll clears both registries', () => {
+    const manager = new RegistryManager();
+    const def = { component: { structure: { type: 'node', tag: 'div' } } };
+
+    manager.registerAll('TestComponent', def);
+    manager.clearAll();
+
+    expect(manager.getClient().get('TestComponent')).toBeUndefined();
+    expect(manager.getSSR().get('TestComponent')).toBeUndefined();
+  });
+
+  test('returns same registry instances', () => {
+    const manager = new RegistryManager();
+    const client1 = manager.getClient();
+    const client2 = manager.getClient();
+    expect(client1).toBe(client2);
+  });
+});

package/lib/shared/registry/RegistryManager.ts

@@ -0,0 +1,60 @@
+/**
+ * Registry Manager
+ * Manages multiple component registries (client, SSR, etc.)
+ */
+
+import type { ComponentDefinition } from '../types';
+import { ClientRegistry } from './ClientRegistry';
+import { SSRRegistry } from './SSRRegistry';
+
+export class RegistryManager {
+  private clientRegistry: ClientRegistry;
+  private ssrRegistry: SSRRegistry;
+
+  constructor() {
+    this.clientRegistry = new ClientRegistry();
+    this.ssrRegistry = new SSRRegistry();
+  }
+
+  /**
+   * Get the client registry
+   */
+  getClient(): ClientRegistry {
+    return this.clientRegistry;
+  }
+
+  /**
+   * Get the SSR registry
+   */
+  getSSR(): SSRRegistry {
+    return this.ssrRegistry;
+  }
+
+  /**
+   * Sync components from one registry to another
+   */
+  sync(from: 'client' | 'ssr', to: 'client' | 'ssr'): void {
+    const source = from === 'client' ? this.clientRegistry : this.ssrRegistry;
+    const target = to === 'client' ? this.clientRegistry : this.ssrRegistry;
+    
+    const components = source.getAll();
+    target.merge(components);
+  }
+
+  /**
+   * Register a component in all registries
+   */
+  registerAll(name: string, definition: ComponentDefinition): void {
+    this.clientRegistry.register(name, definition);
+    this.ssrRegistry.register(name, definition);
+  }
+
+  /**
+   * Clear all registries
+   */
+  clearAll(): void {
+    this.clientRegistry.clear();
+    this.ssrRegistry.clear();
+  }
+}
+

package/lib/shared/registry/SSRNodeTypeRegistry.ts

@@ -0,0 +1,33 @@
+/**
+ * SSR Node Type Registry
+ * Registry specialized for server-side rendering (HTML strings)
+ */
+
+import type { ComponentNode } from '../types/nodes';
+import { BaseNodeTypeRegistry } from './BaseNodeTypeRegistry';
+import type { SSRRenderContext } from './NodeTypeDefinition';
+
+/**
+ * Server-side node type registry
+ * Extends base registry with SSR rendering capabilities
+ */
+export class SSRNodeTypeRegistry extends BaseNodeTypeRegistry {
+  /**
+   * Render a node to HTML string using the registered renderer
+   * Returns empty string if no renderer is found for the node type
+   */
+  renderNode(node: ComponentNode, context: SSRRenderContext): string {
+    const definition = this.findByNode(node);
+    if (!definition) {
+      return '';
+    }
+    return definition.ssrRenderer(node as any, context);
+  }
+
+  /**
+   * Check if a node can be rendered by this registry
+   */
+  canRender(node: ComponentNode): boolean {
+    return this.findByNode(node) !== undefined;
+  }
+}

package/lib/shared/registry/SSRRegistry.test.ts

@@ -0,0 +1,26 @@
+import { describe, test, expect } from 'bun:test';
+import { SSRRegistry } from './SSRRegistry';
+
+describe('SSRRegistry', () => {
+  test('can be instantiated', () => {
+    const registry = new SSRRegistry();
+    expect(registry).toBeDefined();
+  });
+
+  test('inherits from BaseComponentRegistry', () => {
+    const registry = new SSRRegistry();
+    const def = { component: { structure: { type: 'node', tag: 'div' } } };
+
+    registry.register('Test', def);
+    expect(registry.get('Test')).toEqual(def);
+  });
+
+  test('supports all base registry methods', () => {
+    const registry = new SSRRegistry();
+    expect(typeof registry.register).toBe('function');
+    expect(typeof registry.get).toBe('function');
+    expect(typeof registry.has).toBe('function');
+    expect(typeof registry.getAll).toBe('function');
+    expect(typeof registry.clear).toBe('function');
+  });
+});

package/lib/shared/registry/SSRRegistry.ts

@@ -0,0 +1,15 @@
+/**
+ * SSR Component Registry
+ * Extends base registry with SSR-specific functionality
+ */
+
+import { BaseComponentRegistry } from './ComponentRegistry';
+import type { ComponentDefinition } from '../types';
+
+export class SSRRegistry extends BaseComponentRegistry {
+  /**
+   * SSR-specific methods can be added here
+   * For now, it's the same as base registry
+   */
+}
+

package/lib/shared/registry/createNodeType.ts

@@ -0,0 +1,175 @@
+/**
+ * createNodeType Helper
+ * Simplified API for creating node type definitions with auto-generated type guards
+ * and inferred TypeScript types from Zod schemas
+ */
+
+import type { ReactElement } from 'react';
+import type { ZodType, z } from 'zod';
+import type {
+  NodeTypeDefinition,
+  NodeCapabilities,
+  NodeCategory,
+  TreeIcon,
+  ClientRenderContext,
+  SSRRenderContext,
+  EditableField,
+} from './NodeTypeDefinition';
+
+/**
+ * Default capabilities for node types
+ */
+const DEFAULT_CAPABILITIES: NodeCapabilities = {
+  canHaveChildren: true,
+  canHaveStyle: true,
+  canHaveAttributes: true,
+  canBeNested: true,
+  requiresProps: [],
+};
+
+/**
+ * Create a type guard function from a type string value
+ * Automatically generates the type guard based on the node's type field
+ */
+function createTypeGuard<T>(typeValue: string) {
+  return (node: unknown): node is T =>
+    node !== null &&
+    typeof node === 'object' &&
+    'type' in node &&
+    (node as { type: unknown }).type === typeValue;
+}
+
+/**
+ * Input configuration for createNodeType
+ * Schema is the single source of truth - TypeScript types are inferred from it
+ */
+export interface CreateNodeTypeInput<TSchema extends ZodType> {
+  /** The type discriminator value (e.g., 'image', 'video') */
+  type: string;
+
+  /** Human-readable display name (e.g., 'Image', 'Video') */
+  displayName: string;
+
+  /** Category for grouping in command palette */
+  category?: NodeCategory;
+
+  /** Zod schema - single source of truth for validation and type inference */
+  schema: TSchema;
+
+  /** Default values for creating new nodes (type field is auto-added) */
+  defaultValues: Omit<Partial<z.infer<TSchema>>, 'type'>;
+
+  /** Tree display configuration */
+  treeDisplay: {
+    icon: TreeIcon;
+    getLabel?: (node: z.infer<TSchema>) => string;
+  };
+
+  /** Client-side React renderer */
+  clientRenderer: (node: z.infer<TSchema>, context: ClientRenderContext) => ReactElement | null;
+
+  /** Server-side HTML string renderer */
+  ssrRenderer: (node: z.infer<TSchema>, context: SSRRenderContext) => string;
+
+  /** Optional capabilities override */
+  capabilities?: Partial<NodeCapabilities>;
+
+  /** Optional custom props editor component */
+  propsEditor?: React.ComponentType<{
+    node: z.infer<TSchema>;
+    selectedPath: string | null;
+    onPropChange?: (path: string, propName: string, newValue: unknown) => void;
+    themeColors?: Record<string, string>;
+  }>;
+
+  /** Editable fields for auto-generated props editor UI */
+  editableFields?: EditableField[];
+}
+
+/**
+ * Create a complete node type definition from a simplified configuration
+ *
+ * Benefits over defineNodeType:
+ * - Type guards are auto-generated from the type string
+ * - Default factory is auto-generated from defaultValues
+ * - TypeScript types are inferred from the Zod schema
+ * - Less boilerplate, single source of truth
+ *
+ * @example
+ * ```ts
+ * const schema = z.object({
+ *   type: z.literal('image'),
+ *   src: z.string(),
+ *   alt: z.string().optional(),
+ * });
+ *
+ * export type ImageNode = z.infer<typeof schema>;
+ * export const ImageNodeSchema = schema;
+ *
+ * export const ImageNodeType = createNodeType({
+ *   type: 'image',
+ *   displayName: 'Image',
+ *   schema,
+ *   defaultValues: { src: '', alt: '' },
+ *   treeDisplay: { icon: 'IMAGE' },
+ *   clientRenderer: (node, ctx) => h('img', { src: node.src, alt: node.alt }),
+ *   ssrRenderer: (node, ctx) => `<img src="${node.src}" alt="${node.alt || ''}" />`,
+ * });
+ * ```
+ */
+export function createNodeType<TSchema extends ZodType>(
+  input: CreateNodeTypeInput<TSchema>
+): NodeTypeDefinition<z.infer<TSchema>> {
+  type TNode = z.infer<TSchema>;
+
+  // Validate required fields
+  if (!input.type) {
+    throw new Error('Node type definition must have a type');
+  }
+  if (!input.displayName) {
+    throw new Error('Node type definition must have a displayName');
+  }
+  if (!input.schema) {
+    throw new Error('Node type definition must have a schema');
+  }
+  if (!input.clientRenderer) {
+    throw new Error('Node type definition must have a clientRenderer');
+  }
+  if (!input.ssrRenderer) {
+    throw new Error('Node type definition must have an ssrRenderer');
+  }
+  if (!input.treeDisplay) {
+    throw new Error('Node type definition must have treeDisplay');
+  }
+
+  return {
+    type: input.type,
+    displayName: input.displayName,
+    category: input.category ?? 'core',
+    schema: input.schema as ZodType<TNode>,
+
+    // Auto-generated type guard
+    typeGuard: createTypeGuard<TNode>(input.type),
+
+    // Auto-generated default factory
+    defaultFactory: (): TNode => ({
+      type: input.type,
+      ...input.defaultValues,
+    } as TNode),
+
+    treeDisplay: {
+      icon: input.treeDisplay.icon,
+      getLabel: input.treeDisplay.getLabel ?? (() => input.displayName),
+    },
+
+    clientRenderer: input.clientRenderer,
+    ssrRenderer: input.ssrRenderer,
+    propsEditor: input.propsEditor,
+    editableFields: input.editableFields,
+
+    capabilities: {
+      ...DEFAULT_CAPABILITIES,
+      ...input.capabilities,
+    },
+  };
+}

package/lib/shared/registry/defineNodeType.ts

@@ -0,0 +1,73 @@
+/**
+ * defineNodeType Helper
+ * Type-safe helper function to create node type definitions
+ */
+
+import type { ComponentNode } from '../types/nodes';
+import type {
+  NodeTypeDefinition,
+  NodeTypeDefinitionInput,
+  NodeCapabilities,
+} from './NodeTypeDefinition';
+
+/**
+ * Default capabilities for node types
+ */
+const DEFAULT_CAPABILITIES: NodeCapabilities = {
+  canHaveChildren: true,
+  canHaveStyle: true,
+  canHaveAttributes: true,
+  canBeNested: true,
+  requiresProps: [],
+};
+
+/**
+ * Create a node type definition with sensible defaults
+ * Provides type safety and validation at definition time
+ */
+export function defineNodeType<TNode extends ComponentNode>(
+  input: NodeTypeDefinitionInput<TNode>
+): NodeTypeDefinition<TNode> {
+  // Validate required fields
+  if (!input.type) {
+    throw new Error('Node type definition must have a type');
+  }
+  if (!input.displayName) {
+    throw new Error('Node type definition must have a displayName');
+  }
+  if (!input.schema) {
+    throw new Error('Node type definition must have a schema');
+  }
+  if (!input.typeGuard) {
+    throw new Error('Node type definition must have a typeGuard');
+  }
+  if (!input.clientRenderer) {
+    throw new Error('Node type definition must have a clientRenderer');
+  }
+  if (!input.ssrRenderer) {
+    throw new Error('Node type definition must have an ssrRenderer');
+  }
+  if (!input.treeDisplay) {
+    throw new Error('Node type definition must have treeDisplay');
+  }
+  if (!input.defaultFactory) {
+    throw new Error('Node type definition must have a defaultFactory');
+  }
+
+  return {
+    type: input.type,
+    displayName: input.displayName,
+    category: input.category ?? 'core',
+    schema: input.schema,
+    typeGuard: input.typeGuard,
+    clientRenderer: input.clientRenderer,
+    ssrRenderer: input.ssrRenderer,
+    treeDisplay: input.treeDisplay,
+    propsEditor: input.propsEditor,
+    defaultFactory: input.defaultFactory,
+    capabilities: {
+      ...DEFAULT_CAPABILITIES,
+      ...input.capabilities,
+    },
+  };
+}

package/lib/shared/registry/fieldPresets.ts

@@ -0,0 +1,109 @@
+/**
+ * Generic Field Type Factories for Node Types
+ *
+ * Configurable field factories that can be used for any property.
+ * Each factory creates an EditableField with the specified configuration.
+ *
+ * @example
+ * import { textField, urlField, imageField, booleanField, selectField } from '../fieldPresets';
+ *
+ * editableFields: [
+ *   urlField({ name: 'src', label: 'Video Source', required: true }),
+ *   imageField({ name: 'poster', label: 'Poster Image' }),
+ *   selectField({ name: 'preload', label: 'Preload', options: ['auto', 'metadata', 'none'] }),
+ *   booleanField({ name: 'controls', label: 'Show Controls', group: 'Playback' }),
+ * ],
+ */
+
+import type { EditableField } from './NodeTypeDefinition';
+
+// ============================================
+// Field Configuration Types
+// ============================================
+
+interface BaseFieldConfig {
+  name: string;
+  label: string;
+  required?: boolean;
+  group?: string;
+}
+
+interface TextFieldConfig extends BaseFieldConfig {
+  placeholder?: string;
+}
+
+interface SelectFieldConfig extends BaseFieldConfig {
+  options: string[];
+}
+
+// ============================================
+// Generic Field Type Factories
+// ============================================
+
+/** Text input field */
+export const textField = (config: TextFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'string',
+  required: config.required,
+  placeholder: config.placeholder,
+  group: config.group,
+});
+
+/** URL input field */
+export const urlField = (config: TextFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'url',
+  required: config.required,
+  placeholder: config.placeholder ?? 'https://...',
+  group: config.group,
+});
+
+/** Image URL field (can add picker UI later) */
+export const imageField = (config: BaseFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'url',
+  required: config.required,
+  placeholder: 'https://example.com/image.jpg',
+  group: config.group,
+});
+
+/** Number input field */
+export const numberField = (config: TextFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'number',
+  required: config.required,
+  placeholder: config.placeholder,
+  group: config.group,
+});
+
+/** Boolean toggle field */
+export const booleanField = (config: BaseFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'boolean',
+  group: config.group,
+});
+
+/** Select dropdown field */
+export const selectField = (config: SelectFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'select',
+  options: config.options,
+  required: config.required,
+  group: config.group,
+});
+
+/** Textarea field (multiline text) */
+export const textareaField = (config: TextFieldConfig): EditableField => ({
+  name: config.name,
+  label: config.label,
+  type: 'text',
+  required: config.required,
+  placeholder: config.placeholder,
+  group: config.group,
+});

package/lib/shared/registry/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Component Registry System
+ * Unified registry system for client and SSR
+ */
+
+// Component registries
+export { BaseComponentRegistry } from './ComponentRegistry';
+export { ClientRegistry } from './ClientRegistry';
+export { SSRRegistry } from './SSRRegistry';
+export { RegistryManager } from './RegistryManager';
+
+// Node type registries
+export { BaseNodeTypeRegistry } from './BaseNodeTypeRegistry';
+export type { NodeLabelInfo } from './BaseNodeTypeRegistry';
+export { ClientNodeTypeRegistry } from './ClientNodeTypeRegistry';
+export { SSRNodeTypeRegistry } from './SSRNodeTypeRegistry';
+export { NodeTypeManager, globalNodeTypeManager } from './NodeTypeManager';
+export { defineNodeType } from './defineNodeType';
+export { createNodeType } from './createNodeType';
+export type { CreateNodeTypeInput } from './createNodeType';
+export type {
+  NodeTypeDefinition,
+  NodeTypeDefinitionInput,
+  TreeIcon,
+  NodeCategory,
+  TreeDisplayConfig,
+  NodeCapabilities,
+  ClientRenderContext,
+  SSRRenderContext,
+  ClientNodeRenderer,
+  SSRNodeRenderer,
+  PropsEditorProps,
+} from './NodeTypeDefinition';
+
+// Field presets for node types
+export * from './fieldPresets';
+
+// Built-in node types
+export {
+  registerBuiltInNodeTypes,
+  builtInNodeTypes,
+  HtmlNodeType,
+  ComponentInstanceNodeType,
+  SlotMarkerType,
+  EmbedNodeType,
+  ObjectLinkNodeType,
+  LocaleListNodeType,
+  TextNodeType,
+} from './nodeTypes';
+

package/lib/shared/registry/nodeTypes/ComponentInstanceNodeType.ts

@@ -0,0 +1,71 @@
+/**
+ * Component Instance Node Type Definition
+ * Instances of registered components
+ */
+
+import { z } from 'zod';
+import { createElement as h } from 'react';
+import { StyleValueSchema } from '../../validation/schemas';
+import { createNodeType } from '../createNodeType';
+
+// Forward reference for ComponentNode schema (recursive)
+const ComponentNodeSchemaRef: z.ZodType<any> = z.lazy(() => z.any());
+
+// Schema is the SINGLE source of truth
+const ComponentInstanceNodeSchemaInternal = z.object({
+  type: z.literal('component'),
+  component: z.string(),
+  props: z.record(z.string(), z.any()).optional(),
+  style: StyleValueSchema.optional(),
+  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  children: z.union([
+    z.array(z.union([ComponentNodeSchemaRef, z.string()])),
+    z.string(),
+  ]).optional(),
+}).passthrough();
+
+// TypeScript type inferred from schema
+export type ComponentInstanceNode = z.infer<typeof ComponentInstanceNodeSchemaInternal>;
+
+// Export schema for validation/schemas.ts
+export const ComponentInstanceNodeSchema = ComponentInstanceNodeSchemaInternal;
+
+export const ComponentInstanceNodeType = createNodeType({
+  type: 'component',
+  displayName: 'Component',
+  category: 'core',
+  schema: ComponentInstanceNodeSchemaInternal,
+
+  defaultValues: {
+    component: '',
+    props: {},
+    style: { base: {} },
+    children: [],
+  },
+
+  treeDisplay: {
+    icon: 'COMPONENT',
+    getLabel: (node) => node.component,
+  },
+
+  clientRenderer: (node, context) => {
+    const definition = context.getComponentDefinition(node.component);
+    if (!definition) {
+      return h('div', { key: context.key }, `[Unknown component: ${node.component}]`);
+    }
+    return h('div', { key: context.key }, `[Component: ${node.component}]`);
+  },
+
+  ssrRenderer: (node, context) => {
+    const definition = context.getComponentDefinition(node.component);
+    if (!definition) {
+      return `<!-- Unknown component: ${context.escapeHtml(node.component)} -->`;
+    }
+    return `<!-- Component: ${context.escapeHtml(node.component)} -->`;
+  },
+
+  capabilities: {
+    canHaveChildren: true,
+    requiresProps: ['component'],
+  },
+});