@specverse/runtime 4.1.0 → 4.1.2

package/dist/runtime/views/react/react-pattern-adapter.js

@@ -0,0 +1,1450 @@
+/**
+ * React Pattern Adapter
+ *
+ * Maps tech-independent composite view patterns from @specverse/lang
+ * to React-specific implementations with hooks and Tailwind styling.
+ *
+ * This adapter implements the unified view architecture by:
+ * 1. Using COMPOSITE_VIEW_PATTERNS as the single source of truth
+ * 2. Mapping semantic CURVED operations to React hooks/API calls
+ * 3. Rendering using ATOMIC_COMPONENTS_REGISTRY via Tailwind
+ *
+ * Stage 2: React Adapter Refactor
+ */
+import { useMemo } from 'react';
+import { COMPOSITE_VIEW_PATTERNS, ATOMIC_COMPONENTS_REGISTRY, } from '../core/index.js';
+import { createUniversalTailwindAdapter } from '../tailwind/universal-adapter.js';
+import { getEntityDisplayName } from '../core/entity-display.js';
+/**
+ * React-specific protocol mapping for CURVED operations
+ *
+ * Maps semantic operations to HTTP methods and endpoints.
+ * This is what lives in instance factories for code generation,
+ * but for runtime we need it here.
+ */
+export const REACT_PROTOCOL_MAPPING = {
+    create: {
+        method: 'POST',
+        pathPattern: '/api/{resource}'
+    },
+    update: {
+        method: 'PUT',
+        pathPattern: '/api/{resource}/{id}'
+    },
+    retrieve: {
+        method: 'GET',
+        pathPattern: '/api/{resource}/{id}'
+    },
+    retrieve_many: {
+        method: 'GET',
+        pathPattern: '/api/{resource}'
+    },
+    validate: {
+        method: 'POST',
+        pathPattern: '/api/{resource}/validate'
+    },
+    evolve: {
+        method: 'POST',
+        pathPattern: '/api/{resource}/{id}/evolve'
+    },
+    delete: {
+        method: 'DELETE',
+        pathPattern: '/api/{resource}/{id}'
+    }
+};
+/**
+ * React Pattern Adapter
+ *
+ * Provides React-specific rendering of tech-independent composite patterns.
+ */
+export class ReactPatternAdapter {
+    tailwindAdapter;
+    constructor(config = {}) {
+        this.tailwindAdapter = config.tailwindAdapter || createUniversalTailwindAdapter();
+        // Store for future use
+        // this._config = config;
+        // this._protocolMapping = { ...REACT_PROTOCOL_MAPPING, ...config.protocolMapping };
+    }
+    /**
+     * Detect pattern type from view spec
+     */
+    detectPattern(viewSpec) {
+        const viewType = viewSpec.type?.toLowerCase();
+        // Map view type to pattern ID
+        const typeToPattern = {
+            'form': 'form-view',
+            'list': 'list-view',
+            'detail': 'detail-view',
+            'dashboard': 'dashboard-view'
+        };
+        const patternId = typeToPattern[viewType];
+        if (!patternId)
+            return null;
+        return COMPOSITE_VIEW_PATTERNS[patternId];
+    }
+    /**
+     * Render a pattern to HTML
+     */
+    renderPattern(context, options) {
+        const { pattern } = context;
+        // Store navigation option for use in child methods
+        this.navigationOptions = options;
+        // Render based on pattern category
+        switch (pattern.category) {
+            case 'data-entry':
+                return this.renderFormView(context);
+            case 'data-display':
+                if (pattern.id === 'list-view') {
+                    return this.renderListView(context);
+                }
+                else if (pattern.id === 'detail-view') {
+                    return this.renderDetailView(context);
+                }
+                return this.renderGenericDataDisplay(context);
+            case 'dashboard':
+                return this.renderDashboardView(context);
+            default:
+                return this.renderFallback(context);
+        }
+    }
+    /**
+     * Render FormView pattern
+     */
+    renderFormView(context) {
+        const { viewSpec, modelData, modelSchemas, primaryModel } = context;
+        let components = viewSpec.uiComponents || {};
+        // FALLBACK: Generate default form component if none defined
+        if (Object.keys(components).length === 0 && primaryModel) {
+            components = {
+                [`${primaryModel}Form`]: {
+                    type: 'form',
+                    properties: {
+                        model: primaryModel,
+                        sections: [
+                            {
+                                title: `${primaryModel} Details`,
+                                fields: this.inferFieldsFromSchema(modelSchemas, primaryModel)
+                            }
+                        ]
+                    }
+                }
+            };
+        }
+        let html = '<div class="space-y-4">';
+        // Render form components
+        for (const [componentName, componentDef] of Object.entries(components)) {
+            const def = componentDef;
+            const type = def.type?.toLowerCase();
+            const properties = def.properties || def;
+            if (type === 'form') {
+                html += this.renderFormComponent(componentName, def, modelData, modelSchemas, primaryModel, this.tailwindAdapter);
+            }
+            else if (this.tailwindAdapter.components[type]) {
+                html += this.renderAtomicComponent(componentName, type, properties, this.tailwindAdapter);
+            }
+        }
+        html += '</div>';
+        return html;
+    }
+    /**
+     * Render ListView pattern
+     */
+    renderListView(context) {
+        const { viewSpec, modelData, primaryModel, modelSchemas } = context;
+        let components = viewSpec.uiComponents || {};
+        // FALLBACK: Generate default table component if none defined
+        if (Object.keys(components).length === 0 && primaryModel) {
+            // Prefer schema-based inference (includes relationships) over data-based
+            const columns = modelSchemas && modelSchemas[primaryModel]
+                ? this.inferFieldsFromSchema(modelSchemas, primaryModel)
+                : this.inferFieldsFromModel(modelData, primaryModel);
+            components = {
+                [`${primaryModel}Table`]: {
+                    type: 'table',
+                    properties: {
+                        model: primaryModel,
+                        columns: columns
+                    }
+                }
+            };
+        }
+        let html = '<div class="space-y-4">';
+        // Render list components (filters, table/list, pagination)
+        for (const [componentName, componentDef] of Object.entries(components)) {
+            const def = componentDef;
+            const type = def.type?.toLowerCase();
+            const properties = def.properties || def;
+            if (type === 'table') {
+                html += this.renderTableComponent(componentName, def, modelData, primaryModel, context.modelSchemas, this.tailwindAdapter);
+            }
+            else if (type === 'list') {
+                html += this.renderListComponent(componentName, def, modelData, primaryModel, context.modelSchemas, this.tailwindAdapter);
+            }
+            else if (this.tailwindAdapter.components[type]) {
+                html += this.renderAtomicComponent(componentName, type, properties, this.tailwindAdapter);
+            }
+        }
+        html += '</div>';
+        return html;
+    }
+    /**
+     * Render DetailView pattern
+     */
+    renderDetailView(context) {
+        const { viewSpec, selectedEntity, primaryModel, modelData, modelSchemas } = context;
+        let components = viewSpec.uiComponents || {};
+        if (!selectedEntity) {
+            return '<div class="p-4 text-gray-500 dark:text-gray-400">No entity selected</div>';
+        }
+        // FALLBACK: Generate default components if none defined
+        if (Object.keys(components).length === 0 && primaryModel) {
+            // Get fields from schema or fall back to data inference
+            const fields = this.inferFieldsFromSchema(modelSchemas, primaryModel);
+            // Start with content component
+            components = {
+                [`${primaryModel}Content`]: {
+                    type: 'content',
+                    fields: fields,
+                    properties: {
+                        model: primaryModel
+                    }
+                }
+            };
+            // Add list components for hasMany relationships (from schema)
+            if (modelSchemas && modelSchemas[primaryModel]?.relationships) {
+                const schemaRelationships = modelSchemas[primaryModel].relationships;
+                for (const [relName, relDef] of Object.entries(schemaRelationships)) {
+                    const relDefObj = relDef;
+                    // Only include hasMany relationships (these show as lists in detail view)
+                    if (relDefObj.type === 'hasMany') {
+                        const targetModel = relDefObj.targetModel || relDefObj.model || relName.charAt(0).toUpperCase() + relName.slice(1);
+                        // Infer fields for the related model
+                        const relatedFields = this.inferFieldsFromSchema(modelSchemas, targetModel);
+                        components[`${relName}List`] = {
+                            type: 'list',
+                            fields: relatedFields.slice(0, 5), // Limit to first 5 fields for table
+                            properties: {
+                                model: targetModel,
+                                relationship: relName
+                            }
+                        };
+                    }
+                }
+            }
+        }
+        // Separate content and list components
+        const contentComponents = [];
+        const listComponents = [];
+        const otherComponents = [];
+        for (const [componentName, componentDef] of Object.entries(components)) {
+            const def = componentDef;
+            const type = def.type?.toLowerCase();
+            if (type === 'content') {
+                contentComponents.push([componentName, def]);
+            }
+            else if (type === 'list') {
+                listComponents.push([componentName, def]);
+            }
+            else {
+                otherComponents.push([componentName, def]);
+            }
+        }
+        let html = '<div class="space-y-4">';
+        // Render content components first
+        for (const [componentName, def] of contentComponents) {
+            html += this.renderContentComponent(componentName, def, selectedEntity, modelData, modelSchemas, primaryModel, this.tailwindAdapter);
+        }
+        // Render other components
+        for (const [componentName, def] of otherComponents) {
+            const type = def.type?.toLowerCase();
+            const properties = def.properties || def;
+            if (type === 'card') {
+                html += this.renderCardComponent(componentName, def, selectedEntity, this.tailwindAdapter);
+            }
+            else if (this.tailwindAdapter.components[type]) {
+                html += this.renderAtomicComponent(componentName, type, properties, this.tailwindAdapter);
+            }
+        }
+        // Render list components in tabs if there are multiple, otherwise render normally
+        if (listComponents.length === 0) {
+            // No lists, nothing to render
+        }
+        else if (listComponents.length === 1) {
+            // Single list, render normally
+            const [componentName, def] = listComponents[0];
+            html += this.renderDetailListComponent(componentName, def, modelData, selectedEntity, primaryModel, this.tailwindAdapter, modelSchemas);
+        }
+        else {
+            // Multiple lists, render in tabs
+            html += this.renderTabbedLists(listComponents, modelData, selectedEntity, primaryModel, modelSchemas, this.tailwindAdapter);
+        }
+        html += '</div>';
+        return html;
+    }
+    /**
+     * Render multiple list components in a tabbed interface
+     */
+    renderTabbedLists(listComponents, modelData, selectedEntity, primaryModel, modelSchemas, tailwindAdapter) {
+        if (listComponents.length === 0)
+            return '';
+        // Generate unique ID for this tab group
+        const tabGroupId = `tabs-${Math.random().toString(36).substr(2, 9)}`;
+        // Extract tab labels from component names (e.g., "userinstrumentList" -> "User Instruments")
+        const tabs = listComponents.map(([componentName, _def], index) => {
+            // Remove "List" suffix and convert camelCase to Title Case
+            const label = componentName
+                .replace(/List$/, '')
+                .replace(/([A-Z])/g, ' $1')
+                .trim()
+                .split(' ')
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+                .join(' ');
+            return {
+                id: `${tabGroupId}-${index}`,
+                label,
+                index
+            };
+        });
+        let html = `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <!-- Tab Buttons -->
+        <div class="flex border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900" data-tab-group="${tabGroupId}">
+    `;
+        tabs.forEach((tab, index) => {
+            const isActive = index === 0;
+            html += `
+          <button
+            class="px-4 py-3 text-sm font-medium transition-colors focus:outline-none ${isActive
+                ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800'}"
+            data-tab-button="${tab.id}"
+            data-tab-index="${index}"
+          >
+            ${tab.label}
+          </button>
+      `;
+        });
+        html += `
+        </div>
+
+        <!-- Tab Panels -->
+        <div>
+    `;
+        listComponents.forEach(([componentName, def], index) => {
+            const isActive = index === 0;
+            html += `
+          <div
+            class="tab-panel ${isActive ? '' : 'hidden'}"
+            data-tab-panel="${tabs[index].id}"
+          >
+      `;
+            html += this.renderDetailListComponent(componentName, def, modelData, selectedEntity, primaryModel, tailwindAdapter, modelSchemas, true);
+            html += `
+          </div>
+      `;
+        });
+        html += `
+        </div>
+      </div>
+    `;
+        return html;
+    }
+    /**
+     * Render DashboardView pattern
+     */
+    renderDashboardView(context) {
+        const { viewSpec, modelData } = context;
+        const components = viewSpec.uiComponents || {};
+        let html = '<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">';
+        // Render dashboard components (metrics, charts, etc.)
+        for (const [componentName, componentDef] of Object.entries(components)) {
+            const def = componentDef;
+            const type = def.type?.toLowerCase();
+            const properties = def.properties || def;
+            if (type === 'card' && properties.variant === 'metric') {
+                html += this.renderMetricCard(componentName, def, modelData, this.tailwindAdapter);
+            }
+            else if (this.tailwindAdapter.components[type]) {
+                html += this.renderAtomicComponent(componentName, type, properties, this.tailwindAdapter);
+            }
+        }
+        html += '</div>';
+        return html;
+    }
+    /**
+     * Render generic data display (fallback)
+     */
+    renderGenericDataDisplay(_context) {
+        return '<div class="p-4 text-gray-500 dark:text-gray-400">Generic data display</div>';
+    }
+    /**
+     * Render fallback for unknown patterns
+     */
+    renderFallback(context) {
+        const { pattern } = context;
+        return `<div class="p-4 bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded">
+      <p class="text-yellow-800 dark:text-yellow-200">Pattern not yet implemented: ${pattern.name}</p>
+    </div>`;
+    }
+    /**
+     * Helper: Render form component
+     *
+     * Generates a complete form with:
+     * - Inferred field types from model data (text, number, boolean)
+     * - Proper input types and validation
+     * - Required field indicators
+     * - Submit and reset buttons
+     * - Professional styling matching admin-demo
+     */
+    renderFormComponent(componentName, componentDef, modelData, modelSchemas, primaryModel, _tailwindAdapter) {
+        const properties = componentDef.properties || componentDef;
+        const sections = properties.sections || [];
+        const model = properties.model || primaryModel;
+        // Infer field types from model schema or data
+        const fieldTypes = this.inferFieldTypes(modelSchemas, modelData, model);
+        let html = `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200">${componentName}</h4>
+        </div>
+        <div class="p-6">
+          <form class="space-y-6">
+    `;
+        // Render form sections
+        for (const section of sections) {
+            const fields = section.fields || [];
+            html += `
+        <div>
+          ${section.title ? `<h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">${section.title}</h5>` : ''}
+          <div class="space-y-4">
+      `;
+            // Show helpful message if no fields
+            if (fields.length === 0) {
+                html += `
+          <div class="text-sm text-gray-500 dark:text-gray-400 italic p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded">
+            No fields available for this form. Model data may be empty or all fields are system-generated.
+          </div>
+        `;
+            }
+            for (const field of fields) {
+                const fieldName = typeof field === 'string' ? field : field.name || field.fieldName;
+                const fieldLabel = typeof field === 'string'
+                    ? this.humanizeFieldName(fieldName)
+                    : field.label || this.humanizeFieldName(fieldName);
+                const fieldType = fieldTypes[fieldName] || 'string';
+                const isRequired = field.required !== false; // Default to required
+                html += `<div>`;
+                html += `
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
+            ${fieldLabel}
+            ${isRequired ? '<span class="text-red-500 dark:text-red-400 ml-1">*</span>' : ''}
+          </label>
+        `;
+                // Generate appropriate input based on field type
+                if (fieldType === 'boolean') {
+                    html += `
+            <div class="flex items-center">
+              <input
+                type="checkbox"
+                name="${fieldName}"
+                class="h-4 w-4 text-blue-600 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500"
+              />
+              <span class="ml-2 text-sm text-gray-600 dark:text-gray-300">Yes/No</span>
+            </div>
+          `;
+                }
+                else if (fieldType === 'number') {
+                    html += `
+            <input
+              type="number"
+              name="${fieldName}"
+              placeholder="Enter ${fieldLabel.toLowerCase()}"
+              ${isRequired ? 'required' : ''}
+              class="w-full 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"
+            />
+          `;
+                }
+                else {
+                    // Text input (default)
+                    html += `
+            <input
+              type="text"
+              name="${fieldName}"
+              placeholder="Enter ${fieldLabel.toLowerCase()}"
+              ${isRequired ? 'required' : ''}
+              class="w-full 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"
+            />
+          `;
+                }
+                html += `</div>`;
+            }
+            html += `
+          </div>
+        </div>
+      `;
+        }
+        // Add relationship fields (belongsTo) as select dropdowns
+        const relationshipFields = this.inferRelationshipFields(modelSchemas, modelData, model);
+        if (relationshipFields.length > 0) {
+            html += `
+        <div>
+          <h5 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Relationships</h5>
+          <div class="space-y-4">
+      `;
+            for (const relField of relationshipFields) {
+                const relatedEntities = modelData[relField.targetModel] || [];
+                html += `
+          <div>
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">
+              ${this.humanizeFieldName(relField.name)}
+            </label>
+            <select
+              name="${relField.foreignKey}"
+              class="w-full 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"
+            >
+              <option value="">-- Select ${relField.targetModel} --</option>
+              ${relatedEntities.map((entity) => {
+                    const displayName = entity.data?.name || entity.data?.title || entity.id;
+                    return `<option value="${entity.id}">${displayName}</option>`;
+                }).join('')}
+            </select>
+          </div>
+        `;
+            }
+            html += `
+          </div>
+        </div>
+      `;
+        }
+        // Add form action buttons
+        html += `
+            <div class="flex gap-3 pt-4 border-t border-gray-200 dark:border-gray-600">
+              <button
+                type="submit"
+                class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded font-medium transition-colors"
+              >
+                Create ${model || 'Entity'}
+              </button>
+              <button
+                type="reset"
+                class="px-6 py-2 bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 rounded font-medium transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    `;
+        return html;
+    }
+    /**
+     * Helper: Infer relationship fields from model schema or data
+     *
+     * Reads relationship definitions from the model schema (like original FormView).
+     * Falls back to inferring from foreign keys in data if no schema available.
+     *
+     * Strategy:
+     * 1. Read from schema.relationships (preferred - matches original FormView)
+     * 2. If entities exist, scan their fields for foreign keys
+     * 3. If no entities, look at available models and infer common relationships
+     */
+    inferRelationshipFields(modelSchemas, modelData, modelName) {
+        const relationships = [];
+        if (!modelName)
+            return relationships;
+        // Strategy 1: Read from schema.relationships (like original FormView)
+        if (modelSchemas && modelSchemas[modelName]?.relationships) {
+            const schemaRelationships = modelSchemas[modelName].relationships;
+            // Extract belongsTo relationships (these need form dropdowns)
+            for (const [relName, relDef] of Object.entries(schemaRelationships)) {
+                const relDefObj = relDef;
+                // Only include belongsTo relationships in forms
+                if (relDefObj.type === 'belongsTo') {
+                    relationships.push({
+                        name: relName,
+                        foreignKey: relDefObj.foreignKey || `${relName}Id`,
+                        targetModel: relDefObj.targetModel || relDefObj.model || relName.charAt(0).toUpperCase() + relName.slice(1)
+                    });
+                }
+            }
+            return relationships;
+        }
+        // Strategy 2: If we have entities, scan for foreign keys
+        const entities = modelData[modelName] || [];
+        if (entities.length > 0 && entities[0]?.data) {
+            const firstEntity = entities[0];
+            // Look for foreign key fields (ending in "Id")
+            for (const fieldName of Object.keys(firstEntity.data)) {
+                if (fieldName.endsWith('Id') && fieldName !== 'id') {
+                    // Extract relationship name (e.g., "authorId" -> "author")
+                    const relName = fieldName.slice(0, -2);
+                    // Capitalize to get model name (e.g., "author" -> "Author")
+                    const targetModel = relName.charAt(0).toUpperCase() + relName.slice(1);
+                    // Check if this model exists in modelData
+                    if (modelData[targetModel]) {
+                        relationships.push({
+                            name: relName,
+                            foreignKey: fieldName,
+                            targetModel: targetModel
+                        });
+                    }
+                }
+            }
+        }
+        // Strategy 3: If no entities or no relationships found, infer from available models
+        // This ensures forms are usable even when creating the first entity
+        if (relationships.length === 0) {
+            const availableModels = Object.keys(modelData);
+            // Common relationship patterns based on model names
+            for (const targetModel of availableModels) {
+                if (targetModel !== modelName) {
+                    // Create lowercase version for foreign key
+                    const relName = targetModel.charAt(0).toLowerCase() + targetModel.slice(1);
+                    const foreignKey = `${relName}Id`;
+                    // Add as potential relationship
+                    relationships.push({
+                        name: relName,
+                        foreignKey: foreignKey,
+                        targetModel: targetModel
+                    });
+                }
+            }
+        }
+        return relationships;
+    }
+    /**
+     * Helper: Humanize field name
+     * Converts camelCase/snake_case to readable labels
+     */
+    humanizeFieldName(fieldName) {
+        return fieldName
+            .replace(/([A-Z])/g, ' $1') // Add space before capitals
+            .replace(/_/g, ' ') // Replace underscores with spaces
+            .replace(/^./, (str) => str.toUpperCase()) // Capitalize first letter
+            .trim();
+    }
+    /**
+     * Helper: Infer field types from model schema or data
+     * Prefers schema definitions, falls back to examining actual data
+     */
+    inferFieldTypes(modelSchemas, modelData, modelName) {
+        const types = {};
+        if (!modelName)
+            return types;
+        // Strategy 1: Use schema if available
+        if (modelSchemas && modelSchemas[modelName]?.attributes) {
+            const attributes = modelSchemas[modelName].attributes;
+            for (const [fieldName, attrDef] of Object.entries(attributes)) {
+                const typeStr = typeof attrDef === 'string' ? attrDef : attrDef?.type || 'string';
+                if (typeStr.toLowerCase().includes('bool')) {
+                    types[fieldName] = 'boolean';
+                }
+                else if (typeStr.toLowerCase().includes('int') || typeStr.toLowerCase().includes('number') || typeStr.toLowerCase().includes('float')) {
+                    types[fieldName] = 'number';
+                }
+                else {
+                    types[fieldName] = 'string';
+                }
+            }
+            return types;
+        }
+        // Strategy 2: Examine actual data if no schema
+        if (!modelData[modelName] || modelData[modelName].length === 0)
+            return types;
+        const firstEntity = modelData[modelName][0];
+        if (!firstEntity || !firstEntity.data)
+            return types;
+        for (const [fieldName, value] of Object.entries(firstEntity.data)) {
+            if (typeof value === 'boolean') {
+                types[fieldName] = 'boolean';
+            }
+            else if (typeof value === 'number') {
+                types[fieldName] = 'number';
+            }
+            else {
+                types[fieldName] = 'string';
+            }
+        }
+        return types;
+    }
+    /**
+     * Helper: Infer field names from model schema
+     * Reads schema.attributes to get field definitions
+     * Includes belongsTo relationships for display
+     */
+    inferFieldsFromSchema(modelSchemas, modelName) {
+        if (!modelName || !modelSchemas || !modelSchemas[modelName]) {
+            // No schema - return common default fields
+            return ['name', 'title', 'description'];
+        }
+        const schema = modelSchemas[modelName];
+        if (!schema.attributes) {
+            return ['name', 'title', 'description'];
+        }
+        // Get field names from schema attributes, filter out system/metadata fields and foreign keys
+        const fields = Object.keys(schema.attributes).filter(field => {
+            // Filter out system fields
+            if (field === 'id')
+                return false;
+            // Filter out timestamp/metadata fields
+            if (['createdAt', 'updatedAt', 'deletedAt', 'appliedAt', 'publishedAt'].includes(field))
+                return false;
+            // Filter out foreign key fields (we'll add relationships instead)
+            if (field.endsWith('Id'))
+                return false;
+            // Filter out auto-generated fields
+            if (this.isAutoGeneratedField(field, schema.attributes[field]))
+                return false;
+            return true;
+        });
+        // Add belongsTo relationships (these will show as "Author" instead of "authorId")
+        if (schema.relationships) {
+            const belongsToRels = Object.entries(schema.relationships)
+                .filter(([_, relDef]) => relDef.type === 'belongsTo')
+                .map(([relName, _]) => relName);
+            // Add relationships at the end of the field list
+            fields.push(...belongsToRels);
+        }
+        return fields.length > 0 ? fields : ['name', 'title', 'description'];
+    }
+    /**
+     * Helper: Check if field is auto-generated (shouldn't show in forms)
+     */
+    isAutoGeneratedField(fieldName, attrDef) {
+        // System fields
+        if (['id', 'createdAt', 'updatedAt'].includes(fieldName))
+            return true;
+        // Check attribute definition for auto flag
+        if (typeof attrDef === 'object' && attrDef.auto)
+            return true;
+        return false;
+    }
+    /**
+     * Helper: Get smart display name for an entity
+     *
+     * Wrapper around shared getEntityDisplayName utility.
+     * Maintained for backward compatibility with excludeRelationship parameter.
+     */
+    getSmartDisplayName(entity, _excludeRelationship, _modelSchemas, modelData) {
+        // Use shared utility function (modelData is allEntities)
+        return getEntityDisplayName(entity, modelData || {});
+    }
+    /**
+     * Helper: Resolve relationship value for display
+     *
+     * If fieldName is a belongsTo relationship, looks up the related entity
+     * and returns its display name. Otherwise returns the raw value.
+     */
+    resolveFieldValue(fieldName, entity, modelSchemas, modelData, currentModel) {
+        // First check if this is a direct data field
+        if (entity.data && entity.data.hasOwnProperty(fieldName)) {
+            return entity.data[fieldName];
+        }
+        // Check if this is a relationship field
+        if (!currentModel || !modelSchemas || !modelSchemas[currentModel]?.relationships) {
+            return undefined;
+        }
+        const relationships = modelSchemas[currentModel].relationships;
+        const relationshipDef = relationships[fieldName];
+        if (!relationshipDef || relationshipDef.type !== 'belongsTo') {
+            return undefined;
+        }
+        // Get the foreign key value (e.g., authorId)
+        const foreignKey = relationshipDef.foreignKey || `${fieldName}Id`;
+        const foreignKeyValue = entity.data?.[foreignKey];
+        if (!foreignKeyValue) {
+            return null; // No relationship set
+        }
+        // Get the target model (e.g., "Author")
+        const targetModel = relationshipDef.targetModel || relationshipDef.model ||
+            fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
+        // Look up the related entity by UUID (not internal ID)
+        const relatedEntities = modelData[targetModel] || [];
+        const relatedEntity = relatedEntities.find((e) => e.data?.id === foreignKeyValue || e.id === foreignKeyValue);
+        if (!relatedEntity) {
+            return foreignKeyValue; // Return ID if entity not found
+        }
+        // Return a smart display name for the related entity
+        // Don't exclude any relationships - we want to show the full entity (e.g., "Guitar (intermediate)" for requirements)
+        return this.getSmartDisplayName(relatedEntity, undefined, modelSchemas, modelData);
+    }
+    /**
+     * Helper: Get navigation info for a relationship field
+     *
+     * Returns navigation attributes if the field is a belongsTo relationship,
+     * null otherwise. Used to make relationship values clickable.
+     */
+    getRelationshipNavInfo(fieldName, entity, modelSchemas, currentModel) {
+        // Check if this is a relationship field
+        if (!currentModel || !modelSchemas || !modelSchemas[currentModel]?.relationships) {
+            return null;
+        }
+        const relationships = modelSchemas[currentModel].relationships;
+        const relationshipDef = relationships[fieldName];
+        if (!relationshipDef || relationshipDef.type !== 'belongsTo') {
+            return null;
+        }
+        // Get the foreign key value (e.g., authorId)
+        const foreignKey = relationshipDef.foreignKey || `${fieldName}Id`;
+        const foreignKeyValue = entity.data?.[foreignKey];
+        if (!foreignKeyValue) {
+            return null;
+        }
+        // Get the target model (e.g., "Author")
+        const targetModel = relationshipDef.targetModel || relationshipDef.model ||
+            fieldName.charAt(0).toUpperCase() + fieldName.slice(1);
+        return {
+            entityId: foreignKeyValue,
+            targetModel: targetModel
+        };
+    }
+    /**
+     * Helper: Render table component
+     *
+     * Generates a data table with:
+     * - Column headers with proper formatting
+     * - Data type-aware value rendering (objects, booleans, etc.)
+     * - Relationship field resolution (shows related entity names)
+     * - Empty state handling
+     * - Hover effects and professional styling
+     * - Responsive scrolling
+     */
+    renderTableComponent(componentName, componentDef, modelData, primaryModel, modelSchemas, _tailwindAdapter) {
+        const properties = componentDef.properties || componentDef;
+        const tableModel = properties.model || primaryModel;
+        const entities = modelData[tableModel || ''] || [];
+        const columns = properties.columns || [];
+        let html = `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200">${componentName}</h4>
+        </div>
+        <div class="overflow-auto max-h-96">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead class="bg-gray-50 dark:bg-gray-700 sticky top-0">
+              <tr>
+                ${columns.map((col) => `
+                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wider">
+                    ${this.humanizeFieldName(col)}
+                  </th>
+                `).join('')}
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+    `;
+        if (entities.length === 0) {
+            html += `
+        <tr>
+          <td colspan="${columns.length}" class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400 italic">
+            No ${tableModel || 'data'} entities yet
+          </td>
+        </tr>
+      `;
+        }
+        else {
+            // Check if navigation is enabled
+            const enableNavigation = this.navigationOptions?.enableListNavigation;
+            for (const entity of entities) {
+                const navAttrs = enableNavigation
+                    ? `data-nav-entity-id="${entity.data?.id || entity.id}" style="cursor: pointer;" title="Click to view details"`
+                    : '';
+                html += `<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" ${navAttrs}>`;
+                for (const col of columns) {
+                    // Resolve value (handles both direct fields and relationships)
+                    const value = this.resolveFieldValue(col, entity, modelSchemas, modelData, tableModel);
+                    // Check if this is a relationship field for navigation
+                    const navInfo = this.getRelationshipNavInfo(col, entity, modelSchemas, tableModel);
+                    const enableRelatedNavigation = this.navigationOptions?.enableRelatedNavigation;
+                    let displayValue;
+                    // Format value based on type
+                    if (value === undefined || value === null || value === '') {
+                        displayValue = '<span class="text-gray-400 dark:text-gray-500">—</span>';
+                    }
+                    else if (typeof value === 'boolean') {
+                        displayValue = `
+              <span class="inline-block px-2 py-1 rounded text-xs font-medium ${value
+                            ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200'
+                            : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'}">
+                ${value ? 'Yes' : 'No'}
+              </span>
+            `;
+                    }
+                    else if (typeof value === 'object') {
+                        // Format objects — show field summary instead of [Object]
+                        const keys = Object.keys(value);
+                        let summary;
+                        if (Array.isArray(value)) {
+                            summary = `[${value.length} items]`;
+                        }
+                        else if (keys.length === 0) {
+                            summary = '{}';
+                        }
+                        else if (keys.length <= 5) {
+                            summary = keys.map(k => {
+                                const v = value[k];
+                                return `${k}: ${v === null || v === undefined ? '-' : typeof v === 'object' ? '{...}' : String(v)}`;
+                            }).join(', ');
+                        }
+                        else {
+                            summary = `{${keys.length} fields}`;
+                        }
+                        displayValue = `<span class="text-gray-600 dark:text-gray-400 text-xs">${summary.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</span>`;
+                    }
+                    else {
+                        // Escape HTML for safe rendering
+                        const escapedValue = String(value)
+                            .replace(/&/g, '&amp;')
+                            .replace(/</g, '&lt;')
+                            .replace(/>/g, '&gt;')
+                            .replace(/"/g, '&quot;');
+                        // Wrap in navigation span if this is a relationship field
+                        if (navInfo && enableRelatedNavigation) {
+                            displayValue = `<span data-nav-entity-id="${navInfo.entityId}" data-nav-model="${navInfo.targetModel}" style="cursor: pointer; color: rgb(37, 99, 235); text-decoration: underline;" title="Click to view ${navInfo.targetModel} details">${escapedValue}</span>`;
+                        }
+                        else {
+                            displayValue = escapedValue;
+                        }
+                    }
+                    html += `<td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">${displayValue}</td>`;
+                }
+                html += `</tr>`;
+            }
+        }
+        html += `
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+        return html;
+    }
+    /**
+     * Helper: Render list component
+     *
+     * Generates a list view with:
+     * - Flexible field display (comma-separated or multi-line)
+     * - Data type-aware rendering
+     * - Relationship field resolution (shows related entity names)
+     * - Empty state handling
+     * - Professional card-based styling
+     */
+    renderListComponent(componentName, componentDef, modelData, primaryModel, modelSchemas, _tailwindAdapter) {
+        const properties = componentDef.properties || componentDef;
+        const listModel = properties.model || primaryModel;
+        const entities = modelData[listModel || ''] || [];
+        const fields = properties.fields || [];
+        let html = `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200">${componentName}</h4>
+        </div>
+        <div class="p-4">
+    `;
+        if (entities.length === 0) {
+            html += `
+        <div class="text-sm text-gray-500 dark:text-gray-400 italic text-center py-4">
+          No ${listModel || 'items'} yet
+        </div>
+      `;
+        }
+        else {
+            html += '<ul class="space-y-2">';
+            // Check if navigation is enabled
+            const enableNavigation = this.navigationOptions?.enableListNavigation;
+            for (const entity of entities) {
+                const navAttrs = enableNavigation
+                    ? `data-nav-entity-id="${entity.data?.id || entity.id}" style="cursor: pointer;" title="Click to view details"`
+                    : '';
+                html += `
+          <li class="p-3 border border-gray-200 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" ${navAttrs}>
+            <div class="text-sm text-gray-900 dark:text-gray-100">
+        `;
+                // Render each field
+                const fieldValues = [];
+                for (const field of fields) {
+                    // Resolve value (handles both direct fields and relationships)
+                    const value = this.resolveFieldValue(field, entity, modelSchemas, modelData, listModel);
+                    if (value === undefined || value === null || value === '') {
+                        continue; // Skip empty values
+                    }
+                    let displayValue;
+                    if (typeof value === 'boolean') {
+                        displayValue = value ? 'Yes' : 'No';
+                    }
+                    else if (typeof value === 'object') {
+                        displayValue = '[Object]';
+                    }
+                    else {
+                        displayValue = String(value)
+                            .replace(/&/g, '&amp;')
+                            .replace(/</g, '&lt;')
+                            .replace(/>/g, '&gt;')
+                            .replace(/"/g, '&quot;');
+                    }
+                    fieldValues.push(`<strong>${this.humanizeFieldName(field)}:</strong> ${displayValue}`);
+                }
+                html += fieldValues.join(' • ');
+                html += `
+            </div>
+          </li>
+        `;
+            }
+            html += '</ul>';
+        }
+        html += `
+        </div>
+      </div>
+    `;
+        return html;
+    }
+    /**
+     * Helper: Render content component (for detail views)
+     *
+     * Displays specific fields from an entity with rich formatting.
+     * Resolves relationship fields to show related entity names.
+     * This matches the original DetailView's "content" component behavior.
+     */
+    renderContentComponent(componentName, componentDef, selectedEntity, modelData, modelSchemas, primaryModel, _tailwindAdapter) {
+        let fields = componentDef.fields || [];
+        const entityData = selectedEntity?.data || selectedEntity || {};
+        // FALLBACK: If no fields, infer from schema (includes relationships)
+        if (fields.length === 0) {
+            if (primaryModel && modelSchemas) {
+                // Use schema to get fields + relationships
+                fields = this.inferFieldsFromSchema(modelSchemas, primaryModel);
+            }
+            else if (entityData) {
+                // Last resort: infer from entity data
+                fields = Object.keys(entityData).filter(key => key !== 'id' &&
+                    !key.endsWith('Id') &&
+                    !['createdAt', 'updatedAt'].includes(key));
+            }
+        }
+        let html = `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200 capitalize">${componentName}</h4>
+        </div>
+        <div class="p-4">
+    `;
+        // Show debug info if still no fields
+        if (fields.length === 0) {
+            html += `
+        <p class="text-sm text-yellow-600 dark:text-yellow-400 italic">
+          No fields available (entity keys: ${Object.keys(entityData).join(', ')})
+        </p>
+      `;
+        }
+        else {
+            html += '<div class="space-y-3">';
+            let displayedFields = 0;
+            for (const fieldName of fields) {
+                // Skip id fields
+                if (fieldName === 'id')
+                    continue;
+                // Resolve value (handles both direct fields and relationships)
+                const value = this.resolveFieldValue(fieldName, selectedEntity, modelSchemas, modelData, primaryModel);
+                // Check if this is a relationship field for navigation
+                const navInfo = this.getRelationshipNavInfo(fieldName, selectedEntity, modelSchemas, primaryModel);
+                const enableRelatedNavigation = this.navigationOptions?.enableRelatedNavigation;
+                // Format the value (show even if null/undefined/empty)
+                let formattedValue;
+                if (value === undefined || value === null) {
+                    formattedValue = '<span class="text-gray-400 dark:text-gray-500 italic">Not set</span>';
+                }
+                else if (typeof value === 'object') {
+                    // Objects: Show as formatted JSON
+                    const jsonStr = JSON.stringify(value, null, 2)
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;');
+                    formattedValue = `
+            <pre class="bg-gray-50 dark:bg-gray-900 p-2 rounded border border-gray-200 dark:border-gray-600 text-xs overflow-auto text-gray-900 dark:text-gray-100">${jsonStr}</pre>
+          `;
+                }
+                else if (typeof value === 'boolean') {
+                    // Booleans: Show as Yes/No badge
+                    formattedValue = `
+            <span class="inline-block px-2 py-1 rounded text-xs font-medium ${value
+                        ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200'
+                        : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'}">
+              ${value ? 'Yes' : 'No'}
+            </span>
+          `;
+                }
+                else if (value === '') {
+                    formattedValue = '<span class="text-gray-400 dark:text-gray-500 italic">Empty</span>';
+                }
+                else {
+                    // Other values: Escape HTML and show as text
+                    const escapedValue = String(value)
+                        .replace(/&/g, '&amp;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;')
+                        .replace(/"/g, '&quot;');
+                    // Wrap in navigation span if this is a relationship field
+                    if (navInfo && enableRelatedNavigation) {
+                        formattedValue = `<span data-nav-entity-id="${navInfo.entityId}" data-nav-model="${navInfo.targetModel}" style="cursor: pointer; color: rgb(37, 99, 235); text-decoration: underline;" title="Click to view ${navInfo.targetModel} details">${escapedValue}</span>`;
+                    }
+                    else {
+                        formattedValue = escapedValue;
+                    }
+                }
+                html += `
+          <div class="grid grid-cols-[120px_1fr] gap-4 items-start">
+            <label class="font-semibold text-sm text-gray-700 dark:text-gray-200 capitalize text-left">${fieldName}</label>
+            <div class="text-sm text-gray-900 dark:text-gray-100">${formattedValue}</div>
+          </div>
+        `;
+                displayedFields++;
+            }
+            if (displayedFields === 0) {
+                html += '<p class="text-sm text-gray-500 dark:text-gray-400 italic">No fields to display</p>';
+            }
+            html += '</div>'; // Close space-y-3
+        }
+        html += `
+        </div>
+      </div>
+    `;
+        return html;
+    }
+    /**
+     * Helper: Render list component in detail view (for related entities)
+     *
+     * Shows related entities in a table format.
+     * This matches the original DetailView's "list" component behavior.
+     */
+    renderDetailListComponent(componentName, componentDef, modelData, selectedEntity, primaryModel, _tailwindAdapter, modelSchemas, insideTab) {
+        const properties = componentDef.properties || componentDef;
+        let fields = componentDef.fields || properties.fields || [];
+        let relatedModel = properties.model;
+        // FALLBACK: Infer model from component name if not specified
+        // E.g., "commentsList" -> "Comment", "postsList" -> "Post"
+        if (!relatedModel) {
+            const lowerName = componentName.toLowerCase();
+            // Try to extract model name from component name
+            // Sort by length descending to match longer names first (e.g., "UserInstrument" before "User")
+            const modelNames = Object.keys(modelData).sort((a, b) => b.length - a.length);
+            for (const modelName of modelNames) {
+                if (lowerName.includes(modelName.toLowerCase())) {
+                    relatedModel = modelName;
+                    break;
+                }
+            }
+        }
+        // Get all entities for the related model
+        const allRelatedEntities = relatedModel ? modelData[relatedModel] || [] : [];
+        // Filter by foreign key relationship
+        // For example, if viewing Post (primaryModel), filter Comments by postId
+        // Use selectedEntity.data.id (the UUID) not selectedEntity.id (the internal ID)
+        // Find the correct foreign key by looking at the related model's belongsTo relationships
+        let foreignKey = null;
+        if (primaryModel && relatedModel && modelSchemas?.[relatedModel]?.relationships) {
+            const relatedSchema = modelSchemas[relatedModel];
+            // Find the belongsTo relationship that targets the primary model
+            for (const [relName, relDef] of Object.entries(relatedSchema.relationships)) {
+                const rel = relDef;
+                if (rel.type === 'belongsTo' && rel.targetModel === primaryModel) {
+                    foreignKey = `${relName}Id`;
+                    break;
+                }
+            }
+        }
+        // Fallback: derive from primary model name
+        if (!foreignKey && primaryModel) {
+            foreignKey = `${primaryModel.charAt(0).toLowerCase()}${primaryModel.slice(1)}Id`;
+        }
+        const relatedEntities = foreignKey && selectedEntity?.data?.id
+            ? allRelatedEntities.filter((e) => e.data?.[foreignKey] === selectedEntity.data.id)
+            : allRelatedEntities;
+        // If no fields specified, infer from schema or first entity
+        if (fields.length === 0) {
+            // Try schema-based inference first (includes relationships)
+            if (relatedModel && modelSchemas) {
+                fields = this.inferFieldsFromSchema(modelSchemas, relatedModel);
+                // Filter out the parent foreign key (redundant in detail view lists)
+                // E.g., in UserInstrument list under User detail, don't show "user" field
+                if (primaryModel && foreignKey) {
+                    // Find the relationship name from the foreign key
+                    // E.g., "userId" -> "user", "organizerId" -> "organizer"
+                    const relationshipName = foreignKey.replace(/Id$/, '');
+                    fields = fields.filter((f) => f !== relationshipName);
+                }
+                // Limit to reasonable number for tables
+                if (fields.length > 6) {
+                    fields = fields.slice(0, 6);
+                }
+            }
+            else if (relatedEntities.length > 0) {
+                // Fallback to data-based inference (won't include relationships)
+                const firstEntity = relatedEntities[0];
+                if (firstEntity.data) {
+                    fields = Object.keys(firstEntity.data)
+                        .filter(key => key !== 'id' && !key.endsWith('Id'))
+                        .slice(0, 6); // Limit to first 6 fields
+                }
+            }
+        }
+        let html = '';
+        // Only add outer container if not inside a tab (tabs provide their own container)
+        if (!insideTab) {
+            html += `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200 capitalize">${componentName}</h4>
+        </div>
+        <div class="p-4">
+      `;
+        }
+        else {
+            html += '<div class="p-4">';
+        }
+        if (relatedEntities.length === 0) {
+            html += `
+        <p class="text-sm text-gray-500 dark:text-gray-400 italic">
+          No ${relatedModel || 'related'} entities ${foreignKey ? `with ${foreignKey} = ${selectedEntity?.id}` : ''}
+        </p>
+      `;
+        }
+        else if (fields.length === 0) {
+            html += `
+        <p class="text-sm text-gray-500 dark:text-gray-400 italic">
+          ${relatedEntities.length} ${relatedModel} entities found but no fields to display
+        </p>
+      `;
+        }
+        else {
+            // Check if navigation is enabled for related items
+            const enableRelatedNavigation = this.navigationOptions?.enableRelatedNavigation;
+            html += `
+        <div class="overflow-auto max-h-96">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+            <thead class="bg-gray-50 dark:bg-gray-700 sticky top-0">
+              <tr>
+                ${fields.map((fieldName) => `
+                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wider">
+                    ${this.humanizeFieldName(fieldName)}
+                  </th>
+                `).join('')}
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
+              ${relatedEntities.map((entity) => {
+                const navAttrs = enableRelatedNavigation && relatedModel
+                    ? `data-nav-entity-id="${entity.data?.id || entity.id}" data-nav-model="${relatedModel}" style="cursor: pointer;" title="Click to view ${relatedModel} details"`
+                    : '';
+                return `
+                  <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" ${navAttrs}>
+                    ${fields.map((fieldName) => {
+                    // Resolve value (handles both direct fields and relationships)
+                    const value = this.resolveFieldValue(fieldName, entity, modelSchemas, modelData, relatedModel);
+                    // Format the value
+                    let displayValue;
+                    if (value === undefined || value === null || value === '') {
+                        displayValue = '<span class="text-gray-400 dark:text-gray-500">—</span>';
+                    }
+                    else if (typeof value === 'boolean') {
+                        displayValue = `<span class="inline-block px-2 py-1 rounded text-xs font-medium ${value
+                            ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200'
+                            : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'}">${value ? 'Yes' : 'No'}</span>`;
+                    }
+                    else if (typeof value === 'object') {
+                        displayValue = '<span class="text-gray-500 dark:text-gray-400 italic">[Object]</span>';
+                    }
+                    else {
+                        // Escape HTML for safe rendering
+                        displayValue = String(value)
+                            .replace(/&/g, '&amp;')
+                            .replace(/</g, '&lt;')
+                            .replace(/>/g, '&gt;')
+                            .replace(/"/g, '&quot;');
+                    }
+                    return `
+                        <td class="px-4 py-2 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">
+                          ${displayValue}
+                        </td>
+                      `;
+                }).join('')}
+                  </tr>
+                `;
+            }).join('')}
+            </tbody>
+          </table>
+        </div>
+      `;
+        }
+        // Close containers
+        html += '</div>'; // Close p-4 div
+        if (!insideTab) {
+            html += '</div>'; // Close outer container
+        }
+        return html;
+    }
+    /**
+     * Helper: Render card component
+     *
+     * Displays entity fields with sophisticated formatting:
+     * - Objects: Formatted JSON in code block
+     * - Booleans: Yes/No badges
+     * - Other values: Plain text
+     */
+    renderCardComponent(componentName, _componentDef, selectedEntity, _tailwindAdapter) {
+        const entityData = selectedEntity.data || {};
+        const fields = Object.keys(entityData);
+        let html = `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200">${componentName}</h4>
+        </div>
+        <div class="p-4">
+          <div class="space-y-3">
+            ${fields.map(field => {
+            const value = entityData[field];
+            // Skip undefined/null values
+            if (value === undefined || value === null)
+                return '';
+            // Format value based on type
+            let formattedValue;
+            if (typeof value === 'object') {
+                // Objects: Show as formatted JSON
+                const jsonStr = JSON.stringify(value, null, 2)
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/"/g, '&quot;');
+                formattedValue = `
+                  <pre class="bg-gray-50 dark:bg-gray-900 p-2 rounded border border-gray-200 dark:border-gray-600 text-xs overflow-auto text-gray-900 dark:text-gray-100">${jsonStr}</pre>
+                `;
+            }
+            else if (typeof value === 'boolean') {
+                // Booleans: Show as Yes/No badge
+                formattedValue = `
+                  <span class="inline-block px-2 py-1 rounded text-xs font-medium ${value
+                    ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200'
+                    : 'bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200'}">
+                    ${value ? 'Yes' : 'No'}
+                  </span>
+                `;
+            }
+            else {
+                // Other values: Escape HTML and show as text
+                const escaped = String(value)
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/"/g, '&quot;');
+                formattedValue = escaped || '—';
+            }
+            return `
+                <div class="grid grid-cols-[140px_1fr] gap-4 items-start">
+                  <label class="font-semibold text-sm text-gray-700 dark:text-gray-200 capitalize">${field}:</label>
+                  <div class="text-sm text-gray-900 dark:text-gray-100">${formattedValue}</div>
+                </div>
+              `;
+        }).join('')}
+          </div>
+        </div>
+      </div>
+    `;
+        return html;
+    }
+    /**
+     * Helper: Render metric card
+     */
+    renderMetricCard(componentName, componentDef, modelData, _tailwindAdapter) {
+        const properties = componentDef.properties || componentDef;
+        const metric = properties.metric;
+        const metricModel = properties.model;
+        const entities = modelData[metricModel] || [];
+        // Calculate metric value
+        let metricValue = '0';
+        if (entities.length > 0 && metric) {
+            const values = entities
+                .map((e) => e.data?.[metric])
+                .filter((v) => v !== undefined && v !== null);
+            if (values.length > 0 && typeof values[0] === 'number') {
+                const sum = values.reduce((acc, v) => acc + v, 0);
+                metricValue = String(Math.round(sum));
+            }
+            else {
+                metricValue = String(values.length);
+            }
+        }
+        return `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-400 uppercase tracking-wide">
+          ${metric || componentName}
+        </p>
+        <p class="mt-2 text-3xl font-semibold text-gray-900 dark:text-gray-100">
+          ${metricValue}
+        </p>
+      </div>
+    `;
+    }
+    /**
+     * Helper: Render atomic component
+     */
+    renderAtomicComponent(componentName, type, properties, _tailwindAdapter) {
+        if (!this.tailwindAdapter.components[type]) {
+            return `<div class="p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded">
+        <p class="text-red-800 dark:text-red-200">Unknown component type: ${type}</p>
+      </div>`;
+        }
+        return `
+      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div class="px-4 py-2 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <h4 class="font-semibold text-sm text-gray-700 dark:text-gray-200">${componentName}</h4>
+        </div>
+        <div class="p-4">
+          ${this.tailwindAdapter.components[type].render({ properties })}
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Helper: Infer field names from model data
+     *
+     * Extracts field names from the first entity in modelData for the given model.
+     * Filters out system fields like id, createdAt, updatedAt, and foreign key fields.
+     *
+     * @param modelData - Map of model names to entity arrays
+     * @param modelName - Name of the model to extract fields from
+     * @returns Array of field names suitable for display
+     */
+    inferFieldsFromModel(modelData, modelName) {
+        if (!modelName || !modelData[modelName]) {
+            // No model data - return common default fields
+            return ['name', 'title', 'description'];
+        }
+        const entities = modelData[modelName];
+        if (entities.length === 0) {
+            // No entities yet - return common default fields for this model
+            return ['name', 'title', 'description'];
+        }
+        const firstEntity = entities[0];
+        if (!firstEntity || !firstEntity.data) {
+            return ['name', 'title', 'description'];
+        }
+        // Get field names from entity data, filter out system fields
+        const fields = Object.keys(firstEntity.data).filter(field => field !== 'id' &&
+            !field.endsWith('Id') &&
+            field !== 'createdAt' &&
+            field !== 'updatedAt');
+        // If after filtering we have no fields, return common defaults
+        return fields.length > 0 ? fields : ['name', 'title', 'description'];
+    }
+}
+/**
+ * Hook: Use pattern adapter
+ */
+export function usePatternAdapter(config = {}) {
+    return useMemo(() => new ReactPatternAdapter(config), [config]);
+}
+/**
+ * Export pattern registry for external use
+ */
+export { COMPOSITE_VIEW_PATTERNS, ATOMIC_COMPONENTS_REGISTRY };
+//# sourceMappingURL=react-pattern-adapter.js.map