@specverse/runtime 4.1.0

package/dist/runtime/views/react/components/RuntimeView.d.ts

@@ -0,0 +1,20 @@
+/**
+ * RuntimeView — Pattern-based view renderer
+ *
+ * Renders spec views using the pattern engine and tailwind adapter.
+ * Uses RuntimeViewProvider context for data access instead of appStore.
+ *
+ * Ported from specverse-app-demo/frontend-react/src/components/views/RuntimeViewNew.tsx
+ */
+export interface RuntimeViewProps {
+    /** The view specification to render */
+    view: any;
+    /** Pre-selected entity ID (e.g., from navigation) */
+    selectedEntityId?: string | null;
+    /** Navigation callback for cross-view/cross-model navigation */
+    onNavigate?: (targetViewType: string, entityId?: string, targetModel?: string) => void;
+    /** Optional pattern adapter instance (if not provided, uses built-in) */
+    patternAdapter?: any;
+}
+export declare function RuntimeView({ view, selectedEntityId: initialEntityId, onNavigate, patternAdapter: externalAdapter }: RuntimeViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RuntimeView.d.ts.map

package/dist/runtime/views/react/components/RuntimeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeView.d.ts","sourceRoot":"","sources":["../../../../../src/runtime/views/react/components/RuntimeView.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AASH,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,IAAI,EAAE,GAAG,CAAC;IACV,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,gEAAgE;IAChE,UAAU,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvF,yEAAyE;IACzE,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,cAAc,EAAE,eAAe,EAAE,EAAE,gBAAgB,2CAoPrI"}

package/dist/runtime/views/react/components/RuntimeView.js

@@ -0,0 +1,284 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RuntimeView — Pattern-based view renderer
+ *
+ * Renders spec views using the pattern engine and tailwind adapter.
+ * Uses RuntimeViewProvider context for data access instead of appStore.
+ *
+ * Ported from specverse-app-demo/frontend-react/src/components/views/RuntimeViewNew.tsx
+ */
+import { useEffect, useState, useMemo } from 'react';
+import { useRuntimeContext } from '../context.js';
+import { getEntityDisplayName } from '../../core/entity-display.js';
+import { detectPattern } from '../../core/pattern-engine.js';
+import { createUniversalTailwindAdapter } from '../../tailwind/universal-adapter.js';
+export function RuntimeView({ view, selectedEntityId: initialEntityId, onNavigate, patternAdapter: externalAdapter }) {
+    const [renderedHtml, setRenderedHtml] = useState('');
+    const [error, setError] = useState(null);
+    const [selectedEntityId, setSelectedEntityId] = useState(initialEntityId || null);
+    // Get data from RuntimeViewProvider context
+    const ctx = useRuntimeContext();
+    const { entities, modelSchemas } = ctx;
+    // Create tailwind adapter
+    const tailwindAdapter = useMemo(() => createUniversalTailwindAdapter(), []);
+    // Determine primary model from view spec
+    const primaryModel = useMemo(() => {
+        if (view.model)
+            return view.model;
+        if (view.controller)
+            return view.controller.replace(/Controller$/, '');
+        return null;
+    }, [view]);
+    // Detect additional models from view components and relationships
+    const allModels = useMemo(() => {
+        const models = new Set();
+        if (primaryModel)
+            models.add(primaryModel);
+        // From view.uiComponents
+        if (view.uiComponents) {
+            for (const comp of Object.values(view.uiComponents)) {
+                if (comp?.model)
+                    models.add(comp.model);
+            }
+        }
+        // From schema relationships (2 levels deep)
+        const processed = new Set();
+        const processModel = (name) => {
+            if (processed.has(name))
+                return;
+            processed.add(name);
+            const schema = modelSchemas[name];
+            if (schema?.relationships) {
+                for (const rel of Object.values(schema.relationships)) {
+                    const target = rel?.targetModel || rel?.model;
+                    if (target)
+                        models.add(target);
+                }
+            }
+        };
+        for (const m of [...models])
+            processModel(m);
+        // Second level
+        for (const m of [...models])
+            processModel(m);
+        return [...models];
+    }, [primaryModel, view, modelSchemas]);
+    // Fetch schemas and entities for all detected models
+    for (const modelName of allModels) {
+        const controllerName = `${modelName}Controller`;
+        ctx.useEntitiesQuery(controllerName, modelName);
+        ctx.useModelSchemaQuery(modelName);
+    }
+    // Build model data from context
+    const modelData = useMemo(() => {
+        const result = {};
+        for (const modelName of allModels) {
+            result[modelName] = entities[modelName] || [];
+        }
+        return result;
+    }, [allModels, entities]);
+    // Primary entities
+    const primaryEntities = useMemo(() => (primaryModel ? entities[primaryModel] || [] : []), [primaryModel, entities]);
+    // Selected entity
+    const selectedEntity = useMemo(() => {
+        if (!selectedEntityId || !primaryEntities.length)
+            return null;
+        return primaryEntities.find((e) => e.id === selectedEntityId) || null;
+    }, [selectedEntityId, primaryEntities]);
+    // Auto-select first entity for detail/dashboard views
+    useEffect(() => {
+        if ((view.type === 'detail' || view.type === 'dashboard') && primaryEntities.length > 0 && !selectedEntityId) {
+            setSelectedEntityId(primaryEntities[0].id);
+        }
+    }, [view.type, primaryEntities, selectedEntityId]);
+    // Sync with external entity ID
+    useEffect(() => {
+        if (initialEntityId)
+            setSelectedEntityId(initialEntityId);
+    }, [initialEntityId]);
+    // Render pattern
+    useEffect(() => {
+        try {
+            const patternResult = detectPattern(view);
+            if (!patternResult) {
+                setRenderedHtml(`
+          <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">
+              No pattern found for view type: ${view.type}
+            </p>
+          </div>
+        `);
+                return;
+            }
+            // Build entity selector for detail/dashboard views
+            let html = '';
+            if (primaryModel && primaryEntities.length > 0 && (view.type === 'detail' || view.type === 'dashboard')) {
+                html += `
+          <div class="mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 flex items-end justify-between gap-4">
+            <div class="flex-1">
+              <label class="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2">
+                Select ${primaryModel}:
+              </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"
+              >
+                ${primaryEntities.map((entity) => {
+                    const displayName = getEntityDisplayName(entity, modelData);
+                    return `<option value="${entity.id}" ${entity.id === selectedEntityId ? 'selected' : ''}>${displayName}</option>`;
+                }).join('')}
+              </select>
+            </div>
+            ${onNavigate ? `
+              <button
+                id="edit-button"
+                class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+              >
+                Edit
+              </button>
+            ` : ''}
+          </div>
+        `;
+            }
+            // If external pattern adapter provided, use it
+            if (externalAdapter) {
+                const pattern = externalAdapter.detectPattern(view);
+                if (pattern) {
+                    const context = {
+                        pattern,
+                        viewSpec: view,
+                        modelData,
+                        modelSchemas,
+                        primaryModel,
+                        selectedEntity,
+                        primaryEntities,
+                        protocolMapping: externalAdapter.REACT_PROTOCOL_MAPPING || {},
+                        tailwindAdapter: externalAdapter.tailwindAdapter || tailwindAdapter,
+                    };
+                    html += externalAdapter.renderPattern(context, {
+                        enableListNavigation: view.type === 'list' && onNavigate !== undefined,
+                        enableRelatedNavigation: onNavigate !== undefined,
+                    });
+                }
+            }
+            else {
+                // Built-in rendering using tailwind adapter directly
+                html += renderBuiltInPattern(patternResult, view, modelData, modelSchemas, primaryModel, selectedEntity, primaryEntities, tailwindAdapter);
+            }
+            setRenderedHtml(html);
+            setError(null);
+        }
+        catch (err) {
+            console.error('Pattern-based rendering error:', err);
+            setError(err instanceof Error ? err.message : 'Unknown error');
+        }
+    }, [view, modelData, modelSchemas, selectedEntity, primaryModel, primaryEntities, selectedEntityId, externalAdapter, tailwindAdapter, onNavigate]);
+    // DOM event handlers for navigation
+    useEffect(() => {
+        // Entity selector change
+        const selector = document.getElementById('entity-selector');
+        if (selector) {
+            const handler = (e) => {
+                setSelectedEntityId(e.target.value);
+            };
+            selector.addEventListener('change', handler);
+            return () => selector.removeEventListener('change', handler);
+        }
+    }, [renderedHtml]);
+    useEffect(() => {
+        // Edit button
+        const editButton = document.getElementById('edit-button');
+        if (editButton && onNavigate) {
+            const handler = () => onNavigate('form', selectedEntityId || undefined);
+            editButton.addEventListener('click', handler);
+            return () => editButton.removeEventListener('click', handler);
+        }
+    }, [renderedHtml, onNavigate, selectedEntityId]);
+    useEffect(() => {
+        // List item navigation (same model)
+        const items = document.querySelectorAll('[data-nav-entity-id]:not([data-nav-model])');
+        if (items.length > 0 && onNavigate) {
+            const handlers = [];
+            items.forEach((item) => {
+                const handler = () => {
+                    const entityId = item.getAttribute('data-nav-entity-id');
+                    if (entityId)
+                        onNavigate('detail', entityId);
+                };
+                item.addEventListener('click', handler);
+                handlers.push([item, handler]);
+            });
+            return () => handlers.forEach(([el, h]) => el.removeEventListener('click', h));
+        }
+    }, [renderedHtml, onNavigate]);
+    useEffect(() => {
+        // Cross-model navigation
+        const items = document.querySelectorAll('[data-nav-entity-id][data-nav-model]');
+        if (items.length > 0 && onNavigate) {
+            const handlers = [];
+            items.forEach((item) => {
+                const handler = () => {
+                    const entityId = item.getAttribute('data-nav-entity-id');
+                    const targetModel = item.getAttribute('data-nav-model');
+                    if (entityId && targetModel)
+                        onNavigate('detail', entityId, targetModel);
+                };
+                item.addEventListener('click', handler);
+                handlers.push([item, handler]);
+            });
+            return () => handlers.forEach(([el, h]) => el.removeEventListener('click', h));
+        }
+    }, [renderedHtml, onNavigate]);
+    if (error) {
+        return (_jsxs("div", { className: "p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 rounded", children: [_jsx("p", { className: "text-red-800 dark:text-red-200 font-semibold", children: "Pattern Rendering Error" }), _jsx("pre", { className: "text-sm text-red-700 dark:text-red-300 mt-2", children: error })] }));
+    }
+    return (_jsx("div", { className: "runtime-view-container p-4 h-full overflow-auto", children: _jsx("div", { dangerouslySetInnerHTML: { __html: renderedHtml } }) }));
+}
+/**
+ * Built-in pattern rendering when no external adapter is provided.
+ * Uses the tailwind adapter to generate HTML for common patterns.
+ */
+function renderBuiltInPattern(pattern, view, modelData, modelSchemas, primaryModel, selectedEntity, primaryEntities, tailwindAdapter) {
+    const tw = tailwindAdapter.components;
+    if (pattern.patternId === 'list-view' && primaryModel) {
+        const entities = modelData[primaryModel] || [];
+        const schema = modelSchemas[primaryModel];
+        const attributes = schema?.attributes || {};
+        const columns = Object.keys(attributes).filter(k => k !== 'id' && k !== 'createdAt' && k !== 'updatedAt');
+        if (entities.length === 0) {
+            return `<div class="text-center py-16 text-gray-500 dark:text-gray-400">No ${primaryModel} entities yet</div>`;
+        }
+        const headerRow = columns.map(col => `<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">${col}</th>`).join('');
+        const bodyRows = entities.map((entity) => {
+            const data = entity.data || entity;
+            const cells = columns.map(col => `<td class="px-6 py-4 text-sm text-gray-900 dark:text-gray-100">${data[col] ?? '-'}</td>`).join('');
+            return `<tr class="hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer" data-nav-entity-id="${entity.id}">${cells}</tr>`;
+        }).join('');
+        return tw.table?.render({
+            properties: { columns },
+            children: bodyRows,
+        }) || `<table class="min-w-full"><thead><tr>${headerRow}</tr></thead><tbody>${bodyRows}</tbody></table>`;
+    }
+    if (pattern.patternId === 'detail-view' && selectedEntity) {
+        const data = selectedEntity.data || selectedEntity;
+        const schema = modelSchemas[primaryModel || ''];
+        const attributes = schema?.attributes || {};
+        const fields = Object.keys(attributes).filter(k => k !== 'id' && k !== 'createdAt' && k !== 'updatedAt');
+        return tw.content?.render({
+            properties: { fields },
+            children: fields.map(f => `<div class="py-3 border-b border-gray-200 dark:border-gray-700">
+          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">${f}</dt>
+          <dd class="text-base text-gray-900 dark:text-gray-100">${data[f] ?? '-'}</dd>
+        </div>`).join(''),
+        }) || '';
+    }
+    if (pattern.patternId === 'dashboard-view' && primaryModel) {
+        const entities = modelData[primaryModel] || [];
+        return tw.card?.render({
+            properties: { variant: 'metric', metric: `Total ${primaryModel}` },
+            children: String(entities.length),
+        }) || '';
+    }
+    return `<div class="p-4 text-gray-500 dark:text-gray-400">View type: ${view.type} — pattern: ${pattern.patternId}</div>`;
+}
+//# sourceMappingURL=RuntimeView.js.map

package/dist/runtime/views/react/components/RuntimeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeView.js","sourceRoot":"","sources":["../../../../../src/runtime/views/react/components/RuntimeView.tsx"],"names":[],"mappings":"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"}

package/dist/runtime/views/react/components/ViewRouter.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ViewRouter — Routes views to appropriate renderer
+ *
+ * Forms → FormView (stateful, controller-based)
+ * Display (list/detail/dashboard) → RuntimeView (pattern-based)
+ *
+ * Ported from specverse-app-demo/frontend-react/src/components/views/ViewRenderer.tsx
+ */
+import React from 'react';
+export interface ViewRouterProps {
+    /** Optional: override which views to show */
+    views?: any[];
+    /** Optional: custom form renderer for interactive views */
+    FormView?: React.ComponentType<{
+        view: any;
+        selectedEntityId?: string | null;
+    }>;
+    /** Optional: pattern adapter for rendering */
+    patternAdapter?: any;
+}
+export declare function ViewRouter({ views: viewsOverride, FormView, patternAdapter }: ViewRouterProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewRouter.d.ts.map

package/dist/runtime/views/react/components/ViewRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewRouter.d.ts","sourceRoot":"","sources":["../../../../../src/runtime/views/react/components/ViewRouter.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAO9D,MAAM,WAAW,eAAe;IAC9B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,IAAI,EAAE,GAAG,CAAC;QAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC,CAAC;IAChF,8CAA8C;IAC9C,cAAc,CAAC,EAAE,GAAG,CAAC;CACtB;AAOD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,eAAe,2CAqF7F"}

package/dist/runtime/views/react/components/ViewRouter.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ViewRouter — Routes views to appropriate renderer
+ *
+ * Forms → FormView (stateful, controller-based)
+ * Display (list/detail/dashboard) → RuntimeView (pattern-based)
+ *
+ * Ported from specverse-app-demo/frontend-react/src/components/views/ViewRenderer.tsx
+ */
+import { useState, useMemo, useCallback } from 'react';
+import { useRuntimeContext } from '../context.js';
+import { RuntimeView } from './RuntimeView.js';
+import { ViewSidebar } from './ViewSidebar.js';
+import { ResizeHandle } from './ui/ResizeHandle.js';
+import { useResizableSidebar } from '../hooks/useResizableSidebar.js';
+/** View types that require interactive (form-based) rendering */
+const INTERACTIVE_VIEW_TYPES = new Set([
+    'form', 'create', 'edit', 'create-form', 'edit-form',
+]);
+export function ViewRouter({ views: viewsOverride, FormView, patternAdapter }) {
+    const ctx = useRuntimeContext();
+    const views = viewsOverride || ctx.views || [];
+    const [selectedViewName, setSelectedViewName] = useState(null);
+    const [selectedEntityId, setSelectedEntityId] = useState(null);
+    const { width, isResizing, startResizing } = useResizableSidebar();
+    // Auto-select first view
+    const selectedView = useMemo(() => {
+        if (!views.length)
+            return null;
+        const name = selectedViewName || views[0]?.name;
+        return views.find(v => v.name === name) || null;
+    }, [views, selectedViewName]);
+    // Find a view by model and type
+    const findViewByModelAndType = useCallback((model, type) => {
+        return views.find(v => {
+            const viewModel = v.model || v.controller?.replace(/Controller$/, '');
+            return viewModel === model && v.type === type;
+        });
+    }, [views]);
+    // Navigation handler
+    const handleNavigate = useCallback((targetViewType, entityId, targetModel) => {
+        if (entityId)
+            setSelectedEntityId(entityId);
+        if (targetModel) {
+            // Cross-model navigation
+            const targetView = findViewByModelAndType(targetModel, targetViewType);
+            if (targetView) {
+                setSelectedViewName(targetView.name);
+            }
+        }
+        else if (selectedView) {
+            // Same-model navigation
+            const currentModel = selectedView.model || selectedView.controller?.replace(/Controller$/, '');
+            if (currentModel) {
+                const targetView = findViewByModelAndType(currentModel, targetViewType);
+                if (targetView) {
+                    setSelectedViewName(targetView.name);
+                }
+            }
+        }
+    }, [selectedView, findViewByModelAndType]);
+    const handleViewSelect = useCallback((viewName) => {
+        setSelectedViewName(viewName);
+        setSelectedEntityId(null);
+    }, []);
+    // Determine rendering strategy
+    const isInteractive = selectedView && INTERACTIVE_VIEW_TYPES.has(selectedView.type?.toLowerCase());
+    return (_jsxs("div", { className: "flex h-full bg-gray-900", children: [_jsx(ViewSidebar, { views: views, selectedView: selectedView?.name || null, onSelectView: handleViewSelect }), _jsx(ResizeHandle, { onMouseDown: startResizing, isResizing: isResizing }), _jsx("div", { className: "flex-1 bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden flex flex-col ml-3 border border-gray-200 dark:border-gray-700", children: selectedView ? (isInteractive && FormView ? (_jsx(FormView, { view: selectedView, selectedEntityId: selectedEntityId })) : (_jsx(RuntimeView, { view: selectedView, selectedEntityId: selectedEntityId, onNavigate: handleNavigate, patternAdapter: patternAdapter }))) : (_jsx("div", { className: "flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400", children: _jsx("p", { children: "Select a view from the sidebar" }) })) })] }));
+}
+//# sourceMappingURL=ViewRouter.js.map

package/dist/runtime/views/react/components/ViewRouter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewRouter.js","sourceRoot":"","sources":["../../../../../src/runtime/views/react/components/ViewRouter.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;AAEH,OAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAWtE,iEAAiE;AACjE,MAAM,sBAAsB,GAAG,IAAI,GAAG,CAAC;IACrC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW;CACrD,CAAC,CAAC;AAEH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAmB;IAC5F,MAAM,GAAG,GAAG,iBAAiB,EAAE,CAAC;IAChC,MAAM,KAAK,GAAG,aAAa,IAAI,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;IAE/C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC9E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC9E,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAEnE,yBAAyB;IACzB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAC/B,MAAM,IAAI,GAAG,gBAAgB,IAAK,KAAK,CAAC,CAAC,CAAS,EAAE,IAAI,CAAC;QACzD,OAAQ,KAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,IAAI,CAAC;IAC7D,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9B,gCAAgC;IAChC,MAAM,sBAAsB,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,IAAY,EAAE,EAAE;QACzE,OAAQ,KAAe,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;YAC/B,MAAM,SAAS,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,UAAU,EAAE,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACtE,OAAO,SAAS,KAAK,KAAK,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC;QAChD,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,qBAAqB;IACrB,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,cAAsB,EAAE,QAAiB,EAAE,WAAoB,EAAE,EAAE;QACrG,IAAI,QAAQ;YAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAE5C,IAAI,WAAW,EAAE,CAAC;YAChB,yBAAyB;YACzB,MAAM,UAAU,GAAG,sBAAsB,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC;YACvE,IAAI,UAAU,EAAE,CAAC;gBACf,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;aAAM,IAAI,YAAY,EAAE,CAAC;YACxB,wBAAwB;YACxB,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,IAAI,YAAY,CAAC,UAAU,EAAE,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YAC/F,IAAI,YAAY,EAAE,CAAC;gBACjB,MAAM,UAAU,GAAG,sBAAsB,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;gBACxE,IAAI,UAAU,EAAE,CAAC;oBACf,mBAAmB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE3C,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,QAAgB,EAAE,EAAE;QACxD,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QAC9B,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,+BAA+B;IAC/B,MAAM,aAAa,GAAG,YAAY,IAAI,sBAAsB,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;IAEnG,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aAEtC,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAAE,IAAI,IAAI,IAAI,EACxC,YAAY,EAAE,gBAAgB,GAC9B,EAEF,KAAC,YAAY,IAAC,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,GAAI,EAGpE,cAAK,SAAS,EAAC,mIAAmI,YAC/I,YAAY,CAAC,CAAC,CAAC,CACd,aAAa,IAAI,QAAQ,CAAC,CAAC,CAAC,CAC1B,KAAC,QAAQ,IAAC,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,GAAI,CACrE,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IACV,IAAI,EAAE,YAAY,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,UAAU,EAAE,cAAc,EAC1B,cAAc,EAAE,cAAc,GAC9B,CACH,CACF,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,0EAA0E,YACvF,yDAAqC,GACjC,CACP,GACG,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/runtime/views/react/components/ViewSidebar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * ViewSidebar — View selection sidebar
+ *
+ * Displays a scrollable list of available views with selection state.
+ * Ported from specverse-app-demo.
+ */
+export interface ViewSidebarProps {
+    views: unknown[];
+    selectedView?: string | null;
+    onSelectView?: (viewName: string) => void;
+    width?: number;
+}
+export declare function ViewSidebar({ views, selectedView, onSelectView, width }: ViewSidebarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ViewSidebar.d.ts.map

package/dist/runtime/views/react/components/ViewSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSidebar.d.ts","sourceRoot":"","sources":["../../../../../src/runtime/views/react/components/ViewSidebar.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,gBAAgB,2CAoCzF"}

package/dist/runtime/views/react/components/ViewSidebar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ViewSidebar({ views, selectedView, onSelectView, width }) {
+    const style = width ? { width: `${width}px`, minWidth: `${width}px`, maxWidth: `${width}px` } : undefined;
+    return (_jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow p-4 flex flex-col overflow-hidden border border-gray-200 dark:border-gray-700", style: style, children: [_jsx("h3", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100 uppercase tracking-wide mb-4", children: "Views" }), views.length === 0 ? (_jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 italic", children: "No views defined in spec" })) : (_jsx("ul", { className: "space-y-0.5 overflow-y-auto flex-1 sidebar-scrollbar", children: views.map((view) => {
+                    const isSelected = view.name === selectedView;
+                    return (_jsx("li", { onClick: () => onSelectView?.(view.name), className: `px-2 py-1.5 rounded cursor-pointer border transition-all text-sm ${isSelected
+                            ? 'bg-blue-50 dark:bg-blue-900/30 border-blue-500 dark:border-blue-600 text-blue-700 dark:text-blue-200'
+                            : 'border-transparent hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300'}`, children: view.name }, view.name));
+                }) }))] }));
+}
+//# sourceMappingURL=ViewSidebar.js.map

package/dist/runtime/views/react/components/ViewSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewSidebar.js","sourceRoot":"","sources":["../../../../../src/runtime/views/react/components/ViewSidebar.tsx"],"names":[],"mappings":";AAgBA,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAoB;IACxF,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1G,OAAO,CACL,eACE,SAAS,EAAC,2HAA2H,EACrI,KAAK,EAAE,KAAK,aAEZ,aAAI,SAAS,EAAC,qFAAqF,sBAE9F,EAEH,KAAe,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC/B,YAAG,SAAS,EAAC,iDAAiD,yCAA6B,CAC5F,CAAC,CAAC,CAAC,CACF,aAAI,SAAS,EAAC,sDAAsD,YAChE,KAAe,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oBAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC;oBAC9C,OAAO,CACL,aAEE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,SAAS,EAAE,oEACT,UAAU;4BACR,CAAC,CAAC,sGAAsG;4BACxG,CAAC,CAAC,6FACN,EAAE,YAED,IAAI,CAAC,IAAI,IARL,IAAI,CAAC,IAAI,CASX,CACN,CAAC;gBACJ,CAAC,CAAC,GACC,CACN,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/runtime/views/react/components/ui/ResizeHandle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ResizeHandle — Draggable resize handle between panels
+ */
+import React from 'react';
+export interface ResizeHandleProps {
+    onMouseDown: () => void;
+    isResizing: boolean;
+}
+export declare function ResizeHandle({ onMouseDown, isResizing }: ResizeHandleProps): React.DetailedReactHTMLElement<{
+    className: string;
+    onMouseDown: () => void;
+}, HTMLElement>;
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/runtime/views/react/components/ui/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../../../../src/runtime/views/react/components/ui/ResizeHandle.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,iBAAiB;;uBAJtD,IAAI;gBAWxB"}

package/dist/runtime/views/react/components/ui/ResizeHandle.js

@@ -0,0 +1,11 @@
+/**
+ * ResizeHandle — Draggable resize handle between panels
+ */
+import React from 'react';
+export function ResizeHandle({ onMouseDown, isResizing }) {
+    return React.createElement('div', {
+        className: `w-1 cursor-col-resize hover:bg-blue-500 transition-colors ${isResizing ? 'bg-blue-500' : 'bg-gray-200 dark:bg-gray-700'}`,
+        onMouseDown,
+    });
+}
+//# sourceMappingURL=ResizeHandle.js.map

package/dist/runtime/views/react/components/ui/ResizeHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.js","sourceRoot":"","sources":["../../../../../../src/runtime/views/react/components/ui/ResizeHandle.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,UAAU,YAAY,CAAC,EAAE,WAAW,EAAE,UAAU,EAAqB;IACzE,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;QAChC,SAAS,EAAE,6DACT,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,8BAC/B,EAAE;QACF,WAAW;KACZ,CAAC,CAAC;AACL,CAAC"}

package/dist/runtime/views/react/context.d.ts

@@ -0,0 +1,24 @@
+/**
+ * RuntimeViewProvider — React Context
+ *
+ * Connects runtime view components to instance-specific data and hooks.
+ * The generated App.tsx provides this context; runtime components consume it.
+ */
+import type { RuntimeViewProviderValue } from '../core/types.js';
+/**
+ * Provider that supplies instance-specific hooks and data to runtime view components.
+ *
+ * Usage in generated App.tsx:
+ * ```tsx
+ * <RuntimeViewProvider value={{ useEntitiesQuery, useModelSchemaQuery, ... }}>
+ *   <DevShell />
+ * </RuntimeViewProvider>
+ * ```
+ */
+export declare const RuntimeViewProvider: import("react").Provider<RuntimeViewProviderValue | null>;
+/**
+ * Access the runtime context from within runtime view components.
+ * Throws if used outside a RuntimeViewProvider.
+ */
+export declare function useRuntimeContext(): RuntimeViewProviderValue;
+//# sourceMappingURL=context.d.ts.map

package/dist/runtime/views/react/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/runtime/views/react/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAIjE;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,2DAA8B,CAAC;AAE/D;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,wBAAwB,CAS5D"}

package/dist/runtime/views/react/context.js

@@ -0,0 +1,32 @@
+/**
+ * RuntimeViewProvider — React Context
+ *
+ * Connects runtime view components to instance-specific data and hooks.
+ * The generated App.tsx provides this context; runtime components consume it.
+ */
+import { createContext, useContext } from 'react';
+const RuntimeViewContext = createContext(null);
+/**
+ * Provider that supplies instance-specific hooks and data to runtime view components.
+ *
+ * Usage in generated App.tsx:
+ * ```tsx
+ * <RuntimeViewProvider value={{ useEntitiesQuery, useModelSchemaQuery, ... }}>
+ *   <DevShell />
+ * </RuntimeViewProvider>
+ * ```
+ */
+export const RuntimeViewProvider = RuntimeViewContext.Provider;
+/**
+ * Access the runtime context from within runtime view components.
+ * Throws if used outside a RuntimeViewProvider.
+ */
+export function useRuntimeContext() {
+    const ctx = useContext(RuntimeViewContext);
+    if (!ctx) {
+        throw new Error('useRuntimeContext must be used within a <RuntimeViewProvider>. ' +
+            'Ensure your App.tsx wraps the view tree with RuntimeViewProvider.');
+    }
+    return ctx;
+}
+//# sourceMappingURL=context.js.map

package/dist/runtime/views/react/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../../src/runtime/views/react/context.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,kBAAkB,GAAG,aAAa,CAAkC,IAAI,CAAC,CAAC;AAEhF;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AAE/D;;;GAGG;AACH,MAAM,UAAU,iBAAiB;IAC/B,MAAM,GAAG,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC3C,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CACb,iEAAiE;YACjE,mEAAmE,CACpE,CAAC;IACJ,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC"}

package/dist/runtime/views/react/hooks/useEntityHelpers.d.ts

@@ -0,0 +1,25 @@
+/**
+ * useEntityHelpers — React hooks wrapping core field classification
+ *
+ * Uses RuntimeViewContext instead of instance-specific appStore.
+ */
+import { METADATA_FIELDS } from '../../core/field-classification.js';
+export { METADATA_FIELDS };
+/**
+ * Hook to separate regular fields from metadata fields for table display.
+ */
+export declare function useFieldSeparation(attributes: Record<string, unknown>): import("../../core/field-classification.js").FieldClassification;
+/**
+ * Hook to create a relationship resolver function.
+ * Uses entities from RuntimeViewProvider context.
+ */
+export declare function useRelationshipResolver(): (entity: any, relName: string, relDef: any) => string;
+/**
+ * Combined hook for entity helpers.
+ */
+export declare function useEntityHelpers(attributes: Record<string, unknown>): {
+    resolveRelationship: (entity: any, relName: string, relDef: any) => string;
+    regularFields: string[];
+    metadataFields: string[];
+};
+//# sourceMappingURL=useEntityHelpers.d.ts.map

package/dist/runtime/views/react/hooks/useEntityHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEntityHelpers.d.ts","sourceRoot":"","sources":["../../../../../src/runtime/views/react/hooks/useEntityHelpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAkB,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrF,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,oEAErE;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,aAInB,GAAG,WAAW,MAAM,UAAU,GAAG,KAAG,MAAM,CAsB7D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;kCA3BhD,GAAG,WAAW,MAAM,UAAU,GAAG,KAAG,MAAM;;;EA+B7D"}