@specverse/engines 4.1.5 → 4.1.7

package/dist/libs/instance-factories/applications/templates/react/tailwind-adapter-wrapper-generator.js

@@ -0,0 +1,65 @@
+import { readFileSync, existsSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+async function generate(context) {
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  const possiblePaths = [
+    // PRIORITY 1: Bundled with package (in libs/ directory)
+    join(__dirname, "../../../../../../libs/instance-factories/applications/templates/react/tailwind-adapter-generator.ts"),
+    // PRIORITY 2: Development environment (local)
+    join(__dirname, "./tailwind-adapter-generator.ts"),
+    join(__dirname, "../tailwind-adapter-generator.ts")
+  ];
+  let adapterSource = null;
+  let foundPath = null;
+  for (const path of possiblePaths) {
+    if (existsSync(path)) {
+      try {
+        adapterSource = readFileSync(path, "utf-8");
+        foundPath = path;
+        break;
+      } catch (error) {
+      }
+    }
+  }
+  if (adapterSource) {
+    return `/**
+ * Universal Tailwind Adapter Generator
+ *
+ * AUTO-GENERATED: Copied from @specverse/lang
+ * Source: ${foundPath}
+ *
+ * This file provides Tailwind CSS rendering for all atomic component types.
+ * It is imported by react-pattern-adapter.tsx.
+ *
+ * DO NOT EDIT: Changes will be overwritten on next generation.
+ */
+
+${adapterSource}
+`;
+  }
+  return `/**
+ * Tailwind Adapter Generator (STUB)
+ *
+ * \u26A0\uFE0F WARNING: Could not locate tailwind-adapter-generator.ts source file.
+ */
+
+import type { ComponentAdapter } from '@specverse/lang';
+
+export function createUniversalTailwindAdapter(): ComponentAdapter {
+  return {
+    renderComponent(type: string, properties: Record<string, any> = {}, children?: string): string {
+      return \`<div class="p-4 border border-gray-300 rounded bg-gray-50">
+        <span class="text-gray-700">\${type}</span>
+      </div>\`;
+    }
+  };
+}
+
+console.warn('\u26A0\uFE0F Using stub Tailwind adapter - full source file not found during generation');
+`;
+}
+export {
+  generate
+};

package/dist/libs/instance-factories/applications/templates/react/tsconfig-generator.js

@@ -0,0 +1,28 @@
+function generateTsConfig(context) {
+  return JSON.stringify({
+    compilerOptions: {
+      target: "ES2020",
+      useDefineForClassFields: true,
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      skipLibCheck: true,
+      types: ["vite/client"],
+      /* Bundler mode */
+      moduleResolution: "bundler",
+      allowImportingTsExtensions: true,
+      resolveJsonModule: true,
+      isolatedModules: true,
+      noEmit: true,
+      jsx: "react-jsx",
+      /* Linting */
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      noFallthroughCasesInSwitch: true
+    },
+    include: ["src"]
+  }, null, 2);
+}
+export {
+  generateTsConfig as default
+};

package/dist/libs/instance-factories/applications/templates/react/use-api-hooks-generator.js

@@ -0,0 +1,132 @@
+async function generate(context) {
+  return `/**
+ * useApi - React Query Hooks
+ *
+ * Hooks match the @specverse/runtime RuntimeViewProviderValue contract.
+ * These are passed to RuntimeViewProvider and called by runtime components.
+ */
+
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  getModelSchema,
+  listEntities,
+  executeOperation,
+  transitionState
+} from '../lib/apiClient';
+import type { ModelSchema, Entity, ApiResponse } from '../types/api';
+
+/**
+ * Query hook for model schema
+ */
+export function useModelSchemaQuery(modelName: string | null) {
+  return useQuery({
+    queryKey: ['modelSchema', modelName],
+    queryFn: async (): Promise<ModelSchema> => {
+      if (!modelName) throw new Error('Model name is required');
+      return await getModelSchema(modelName);
+    },
+    enabled: !!modelName,
+    staleTime: 5 * 60 * 1000,
+    refetchOnWindowFocus: false
+  });
+}
+
+/**
+ * Query hook for entities
+ */
+export function useEntitiesQuery(controllerName: string | null, modelName: string | null) {
+  return useQuery({
+    queryKey: ['entities', modelName],
+    queryFn: async (): Promise<Entity[]> => {
+      if (!controllerName || !modelName) {
+        throw new Error('Controller and model names are required');
+      }
+      return await listEntities(controllerName);
+    },
+    enabled: !!controllerName && !!modelName,
+    refetchInterval: 5000
+  });
+}
+
+/**
+ * Mutation hook for executing operations
+ * Matches RuntimeViewProviderValue.useExecuteOperationMutation contract:
+ *   { controllerName, operationName, data, entityId? }
+ */
+export function useExecuteOperationMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      controllerName,
+      operationName,
+      data,
+      params,
+      entityId
+    }: {
+      controllerName: string;
+      operationName: string;
+      data?: Record<string, any>;
+      params?: Record<string, any>;
+      entityId?: string;
+    }): Promise<ApiResponse> => {
+      // Merge: accept both 'data' and 'params' for compatibility
+      const mergedParams = { ...(data || params || {}) };
+      if (entityId) mergedParams.id = entityId;
+      return executeOperation(controllerName, operationName, mergedParams);
+    },
+    onSuccess: (_data, variables) => {
+      const modelName = variables.controllerName.replace(/Controller$/, '');
+      queryClient.invalidateQueries({ queryKey: ['entities', modelName] });
+    }
+  });
+}
+
+/**
+ * Mutation hook for lifecycle transitions
+ * Matches RuntimeViewProviderValue.useTransitionStateMutation contract:
+ *   { controllerName, entityId, targetState }
+ */
+export function useTransitionStateMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      controllerName,
+      modelName,
+      entityId,
+      targetState,
+      toState,
+      lifecycleName
+    }: {
+      controllerName?: string;
+      modelName?: string;
+      entityId: string;
+      targetState?: string;
+      toState?: string;
+      lifecycleName?: string;
+    }): Promise<ApiResponse> => {
+      // Accept both field names for compatibility
+      const model = modelName || controllerName?.replace(/Controller$/, '') || '';
+      const state = targetState || toState || '';
+      return transitionState(model, entityId, state, lifecycleName);
+    },
+    onSuccess: (_data, variables) => {
+      const model = variables.modelName || variables.controllerName?.replace(/Controller$/, '') || '';
+      queryClient.invalidateQueries({ queryKey: ['entities', model] });
+    }
+  });
+}
+
+/**
+ * Hook for invalidating all queries
+ */
+export function useInvalidateAll() {
+  const queryClient = useQueryClient();
+  return () => queryClient.invalidateQueries();
+}
+`;
+}
+export {
+  generate
+};

package/dist/libs/instance-factories/applications/templates/react/view-dashboard-generator.js

@@ -0,0 +1,143 @@
+async function generate(context) {
+  return `/**
+ * DashboardView - Pattern-Based Dashboard View Component
+ *
+ * Uses pattern-based rendering with ReactPatternAdapter.
+ * Supports multi-component dashboard layouts with entity selection.
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { useEntitiesQuery, useModelSchemaQuery } from '../../hooks/useApi';
+import { usePatternAdapter, REACT_PROTOCOL_MAPPING } from '../../lib/react-pattern-adapter';
+import type { View } from '../../types/api';
+
+interface DashboardViewProps {
+  view: View;
+  spec?: any;
+}
+
+export function DashboardView({ view, spec }: DashboardViewProps) {
+  const patternAdapter = usePatternAdapter();
+
+  // Determine controller and model
+  let controllerName: string;
+  let modelName: string;
+
+  if (view.controller && spec) {
+    controllerName = view.controller;
+    const controller = spec.controllers[view.controller];
+    modelName = controller.model;
+  } else {
+    modelName = view.model as string;
+    controllerName = \`\${modelName}Controller\`;
+  }
+
+  // Fetch data and schema
+  const { data: entities = [] } = useEntitiesQuery(controllerName, modelName);
+  const { data: schema } = useModelSchemaQuery(modelName);
+
+  // Track selected entity
+  const [selectedEntityId, setSelectedEntityId] = useState<string | null>(
+    entities.length > 0 ? entities[0].id : null
+  );
+
+  // Update selected entity when entities change
+  useEffect(() => {
+    if (entities.length > 0 && !selectedEntityId) {
+      setSelectedEntityId(entities[0].id);
+    }
+  }, [entities, selectedEntityId]);
+
+  // Get selected entity
+  const selectedEntity = useMemo(
+    () => entities.find((e: any) => e.id === selectedEntityId) || null,
+    [entities, selectedEntityId]
+  );
+
+  // Build model data and schemas
+  const modelData = useMemo(() => ({
+    [modelName]: entities
+  }), [modelName, entities]);
+
+  const modelSchemas = useMemo(() =>
+    schema ? { [modelName]: schema } : {}
+  , [modelName, schema]);
+
+  if (entities.length === 0) {
+    return <div className="p-4">No entities found</div>;
+  }
+
+  // Detect pattern
+  const pattern = patternAdapter.detectPattern({ ...view, type: 'dashboard' });
+
+  if (!pattern) {
+    return (
+      <div className="p-4 text-red-600">
+        Pattern not found for dashboard view
+      </div>
+    );
+  }
+
+  // Build render context
+  const context = {
+    pattern,
+    viewSpec: { ...view, type: 'dashboard', model: modelName },
+    modelData,
+    modelSchemas,
+    primaryModel: modelName,
+    selectedEntity,
+    primaryEntities: entities,
+    protocolMapping: REACT_PROTOCOL_MAPPING,
+    tailwindAdapter: patternAdapter['tailwindAdapter']
+  };
+
+  // Render entity selector
+  let html = '';
+  if (entities.length > 0) {
+    html += \`
+      <div class="mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
+        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
+          Select \${modelName}:
+        </label>
+        <select
+          id="entity-selector"
+          class="w-full max-w-md px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          \${entities.map((entity: any) => {
+            const displayName = entity.data?.name || entity.data?.title || entity.id;
+            return \`<option value="\${entity.id}" \${entity.id === selectedEntityId ? 'selected' : ''}>\${displayName}</option>\`;
+          }).join('')}
+        </select>
+      </div>
+    \`;
+  }
+
+  // Render pattern
+  html += patternAdapter.renderPattern(context);
+
+  // Add event handler for selector
+  useEffect(() => {
+    const selector = document.getElementById('entity-selector') as HTMLSelectElement;
+    if (selector) {
+      const handler = (e: Event) => {
+        const newId = (e.target as HTMLSelectElement).value;
+        setSelectedEntityId(newId);
+      };
+      selector.addEventListener('change', handler);
+      return () => selector.removeEventListener('change', handler);
+    }
+  }, [html]);
+
+  return (
+    <div className="runtime-view-container p-4 h-full overflow-auto">
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
+
+export default DashboardView;
+`;
+}
+export {
+  generate
+};

package/dist/libs/instance-factories/applications/templates/react/view-detail-generator.js

@@ -0,0 +1,143 @@
+async function generate(context) {
+  return `/**
+ * DetailView - Pattern-Based Detail View Component
+ *
+ * Uses pattern-based rendering with ReactPatternAdapter.
+ * Supports entity selection and relationship display.
+ */
+
+import { useState, useEffect, useMemo } from 'react';
+import { useEntitiesQuery, useModelSchemaQuery } from '../../hooks/useApi';
+import { usePatternAdapter, REACT_PROTOCOL_MAPPING } from '../../lib/react-pattern-adapter';
+import type { View } from '../../types/api';
+
+interface DetailViewProps {
+  view: View;
+  spec?: any;
+}
+
+export function DetailView({ view, spec }: DetailViewProps) {
+  const patternAdapter = usePatternAdapter();
+
+  // Determine controller and model
+  let controllerName: string;
+  let modelName: string;
+
+  if (view.controller && spec) {
+    controllerName = view.controller;
+    const controller = spec.controllers[view.controller];
+    modelName = controller.model;
+  } else {
+    modelName = view.model as string;
+    controllerName = \`\${modelName}Controller\`;
+  }
+
+  // Fetch data and schema
+  const { data: entities = [] } = useEntitiesQuery(controllerName, modelName);
+  const { data: schema } = useModelSchemaQuery(modelName);
+
+  // Track selected entity
+  const [selectedEntityId, setSelectedEntityId] = useState<string | null>(
+    entities.length > 0 ? entities[0].id : null
+  );
+
+  // Update selected entity when entities change
+  useEffect(() => {
+    if (entities.length > 0 && !selectedEntityId) {
+      setSelectedEntityId(entities[0].id);
+    }
+  }, [entities, selectedEntityId]);
+
+  // Get selected entity
+  const selectedEntity = useMemo(
+    () => entities.find((e: any) => e.id === selectedEntityId) || null,
+    [entities, selectedEntityId]
+  );
+
+  // Build model data and schemas
+  const modelData = useMemo(() => ({
+    [modelName]: entities
+  }), [modelName, entities]);
+
+  const modelSchemas = useMemo(() =>
+    schema ? { [modelName]: schema } : {}
+  , [modelName, schema]);
+
+  if (entities.length === 0) {
+    return <div className="p-4">No entities found</div>;
+  }
+
+  // Detect pattern
+  const pattern = patternAdapter.detectPattern({ ...view, type: 'detail' });
+
+  if (!pattern) {
+    return (
+      <div className="p-4 text-red-600">
+        Pattern not found for detail view
+      </div>
+    );
+  }
+
+  // Build render context
+  const context = {
+    pattern,
+    viewSpec: { ...view, type: 'detail', model: modelName },
+    modelData,
+    modelSchemas,
+    primaryModel: modelName,
+    selectedEntity,
+    primaryEntities: entities,
+    protocolMapping: REACT_PROTOCOL_MAPPING,
+    tailwindAdapter: patternAdapter['tailwindAdapter']
+  };
+
+  // Render entity selector
+  let html = '';
+  if (entities.length > 0) {
+    html += \`
+      <div class="mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
+        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
+          Select \${modelName}:
+        </label>
+        <select
+          id="entity-selector"
+          class="w-full max-w-md px-3 py-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        >
+          \${entities.map((entity: any) => {
+            const displayName = entity.data?.name || entity.data?.title || entity.id;
+            return \`<option value="\${entity.id}" \${entity.id === selectedEntityId ? 'selected' : ''}>\${displayName}</option>\`;
+          }).join('')}
+        </select>
+      </div>
+    \`;
+  }
+
+  // Render pattern
+  html += patternAdapter.renderPattern(context);
+
+  // Add event handler for selector
+  useEffect(() => {
+    const selector = document.getElementById('entity-selector') as HTMLSelectElement;
+    if (selector) {
+      const handler = (e: Event) => {
+        const newId = (e.target as HTMLSelectElement).value;
+        setSelectedEntityId(newId);
+      };
+      selector.addEventListener('change', handler);
+      return () => selector.removeEventListener('change', handler);
+    }
+  }, [html]);
+
+  return (
+    <div className="runtime-view-container p-4 h-full overflow-auto">
+      <div dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
+
+export default DetailView;
+`;
+}
+export {
+  generate
+};