@fgv/ts-res-ui-components 5.0.0-10

package/lib/components/views/CompiledView/index.js

@@ -0,0 +1,595 @@
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { CubeIcon, FolderIcon, FolderOpenIcon, DocumentTextIcon, ChevronRightIcon, ChevronDownIcon, DocumentArrowDownIcon, CodeBracketIcon, ChevronUpIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
+import { Config, Bundle } from '@fgv/ts-res';
+export const CompiledView = ({ resources, filterState, filterResult, useNormalization: useNormalizationProp = false, onExport, onMessage, className = '' }) => {
+    const [selectedNodeId, setSelectedNodeId] = useState(null);
+    const [expandedNodes, setExpandedNodes] = useState(new Set(['root', 'resources']));
+    const [showJsonView, setShowJsonView] = useState(false);
+    const [useNormalization, setUseNormalization] = useState(useNormalizationProp);
+    // Update normalization default when bundle state changes
+    useEffect(() => {
+        if (resources?.isLoadedFromBundle && !useNormalization) {
+            setUseNormalization(true);
+        }
+    }, [resources?.isLoadedFromBundle, useNormalization]);
+    // Use filtered resources when filtering is active and successful
+    const isFilteringActive = filterState?.enabled && filterResult?.success === true;
+    const activeProcessedResources = isFilteringActive ? filterResult?.processedResources : resources;
+    // Get the active compiled collection
+    const activeCompiledCollection = useMemo(() => {
+        return isFilteringActive
+            ? filterResult?.processedResources?.compiledCollection
+            : resources?.compiledCollection;
+    }, [
+        isFilteringActive,
+        filterResult?.processedResources?.compiledCollection,
+        resources?.compiledCollection
+    ]);
+    // Build tree structure using the compiled collection
+    const treeData = useMemo(() => {
+        if (!activeCompiledCollection) {
+            return null;
+        }
+        const tree = {
+            id: 'root',
+            name: 'Compiled Resources',
+            type: 'folder',
+            children: []
+        };
+        try {
+            // Resources section using the compiled collection
+            const resourcesCount = activeCompiledCollection.resources?.length || 0;
+            const resourcesSection = {
+                id: 'resources',
+                name: `Resources (${resourcesCount})`,
+                type: 'section',
+                children: []
+            };
+            // Get all resource IDs from the compiled collection
+            if (activeCompiledCollection.resources && activeCompiledCollection.resources.length > 0) {
+                resourcesSection.children = activeCompiledCollection.resources.map((resource) => ({
+                    id: `resource-${resource.id}`,
+                    name: String(resource.id || 'unnamed'),
+                    type: 'resource',
+                    data: { type: 'compiled-resource', resource }
+                }));
+            }
+            tree.children.push(resourcesSection);
+            // Collectors section - showing from compiled collection
+            tree.children.push({
+                id: 'qualifiers',
+                name: `Qualifiers (${activeCompiledCollection.qualifiers?.length || 0})`,
+                type: 'section',
+                data: { type: 'qualifiers', items: activeCompiledCollection.qualifiers }
+            });
+            tree.children.push({
+                id: 'qualifier-types',
+                name: `Qualifier Types (${activeCompiledCollection.qualifierTypes?.length || 0})`,
+                type: 'section',
+                data: { type: 'qualifier-types', items: activeCompiledCollection.qualifierTypes }
+            });
+            tree.children.push({
+                id: 'resource-types',
+                name: `Resource Types (${activeCompiledCollection.resourceTypes?.length || 0})`,
+                type: 'section',
+                data: { type: 'resource-types', items: activeCompiledCollection.resourceTypes }
+            });
+            tree.children.push({
+                id: 'conditions',
+                name: `Conditions (${activeCompiledCollection.conditions?.length || 0})`,
+                type: 'section',
+                data: { type: 'conditions', items: activeCompiledCollection.conditions }
+            });
+            tree.children.push({
+                id: 'condition-sets',
+                name: `Condition Sets (${activeCompiledCollection.conditionSets?.length || 0})`,
+                type: 'section',
+                data: { type: 'condition-sets', items: activeCompiledCollection.conditionSets }
+            });
+            tree.children.push({
+                id: 'decisions',
+                name: `Decisions (${activeCompiledCollection.decisions?.length || 0})`,
+                type: 'section',
+                data: { type: 'decisions', items: activeCompiledCollection.decisions }
+            });
+        }
+        catch (error) {
+            onMessage?.('error', `Error building tree: ${error instanceof Error ? error.message : String(error)}`);
+        }
+        return tree;
+    }, [activeCompiledCollection, onMessage]);
+    const handleExportCompiledData = useCallback(async () => {
+        if (!activeProcessedResources?.compiledCollection) {
+            onMessage?.('error', 'No compiled data available to export');
+            return;
+        }
+        let compiledCollection = activeProcessedResources.compiledCollection;
+        if (useNormalization && resources?.activeConfiguration) {
+            const systemConfigResult = Config.SystemConfiguration.create(resources.activeConfiguration);
+            if (systemConfigResult.isSuccess()) {
+                // Check if we have a ResourceManagerBuilder (which supports normalization)
+                if ('getCompiledResourceCollection' in activeProcessedResources.system.resourceManager) {
+                    const resourceManagerResult = Bundle.BundleNormalizer.normalize(activeProcessedResources.system.resourceManager, systemConfigResult.value);
+                    if (resourceManagerResult.isSuccess()) {
+                        const normalizedCompiledResult = resourceManagerResult.value.getCompiledResourceCollection({
+                            includeMetadata: true
+                        });
+                        if (normalizedCompiledResult.isSuccess()) {
+                            compiledCollection = normalizedCompiledResult.value;
+                        }
+                        else {
+                            console.warn('Failed to get normalized compiled collection:', normalizedCompiledResult.message);
+                        }
+                    }
+                    else {
+                        console.warn('Failed to normalize bundle:', resourceManagerResult.message);
+                    }
+                }
+                // For IResourceManager from bundles, the compiled collection is already normalized
+            }
+            else {
+                console.warn('Failed to create system configuration for normalization:', systemConfigResult.message);
+            }
+        }
+        const compiledData = {
+            ...compiledCollection,
+            metadata: {
+                exportedAt: new Date().toISOString(),
+                type: isFilteringActive ? 'ts-res-filtered-compiled-collection' : 'ts-res-compiled-collection',
+                normalized: useNormalization,
+                ...(resources?.isLoadedFromBundle && { loadedFromBundle: true }),
+                ...(isFilteringActive && { filterContext: filterState?.appliedValues })
+            }
+        };
+        onExport?.(compiledData, 'json');
+    }, [
+        activeProcessedResources,
+        onMessage,
+        isFilteringActive,
+        filterState?.appliedValues,
+        useNormalization,
+        resources,
+        onExport
+    ]);
+    const handleExportBundle = useCallback(async () => {
+        if (!activeProcessedResources?.system?.resourceManager || !resources?.activeConfiguration) {
+            onMessage?.('error', 'No resource manager or configuration available to create bundle');
+            return;
+        }
+        const systemConfigResult = Config.SystemConfiguration.create(resources.activeConfiguration);
+        if (systemConfigResult.isFailure()) {
+            onMessage?.('error', `Failed to create system configuration: ${systemConfigResult.message}`);
+            return;
+        }
+        const systemConfig = systemConfigResult.value;
+        const bundleParams = {
+            version: '1.0.0',
+            description: isFilteringActive
+                ? 'Bundle exported from ts-res-ui-components (filtered)'
+                : 'Bundle exported from ts-res-ui-components',
+            normalize: true
+        };
+        // Check if we have a ResourceManagerBuilder (which supports bundle creation)
+        if (!('getCompiledResourceCollection' in activeProcessedResources.system.resourceManager)) {
+            onMessage?.('error', 'Bundle export is not supported for resources loaded from bundles');
+            return;
+        }
+        const bundleResult = Bundle.BundleBuilder.create(activeProcessedResources.system.resourceManager, systemConfig, bundleParams);
+        if (bundleResult.isFailure()) {
+            onMessage?.('error', `Failed to create bundle: ${bundleResult.message}`);
+            return;
+        }
+        const bundle = bundleResult.value;
+        const exportBundle = {
+            ...bundle,
+            exportMetadata: {
+                exportedAt: new Date().toISOString(),
+                exportedFrom: 'ts-res-ui-components',
+                type: isFilteringActive ? 'ts-res-bundle-filtered' : 'ts-res-bundle',
+                ...(isFilteringActive && { filterContext: filterState?.appliedValues })
+            }
+        };
+        onExport?.(exportBundle, 'bundle');
+    }, [
+        activeProcessedResources?.system?.resourceManager,
+        resources?.activeConfiguration,
+        onMessage,
+        isFilteringActive,
+        filterState?.appliedValues,
+        onExport
+    ]);
+    const handleNodeClick = (node) => {
+        setSelectedNodeId(node.id);
+        onMessage?.('info', `Selected: ${node.name}`);
+        if (node.type === 'folder' || (node.type === 'section' && node.children)) {
+            setExpandedNodes((prev) => {
+                const newExpanded = new Set(prev);
+                if (newExpanded.has(node.id)) {
+                    newExpanded.delete(node.id);
+                }
+                else {
+                    newExpanded.add(node.id);
+                }
+                return newExpanded;
+            });
+        }
+    };
+    const renderTreeNode = (node, level = 0) => {
+        const isExpanded = expandedNodes.has(node.id);
+        const isSelected = selectedNodeId === node.id;
+        const hasChildren = node.children && node.children.length > 0;
+        return (React.createElement("div", { key: node.id },
+            React.createElement("div", { className: `flex items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${isSelected ? 'bg-blue-50 border-r-2 border-blue-500' : ''}`, style: { paddingLeft: `${8 + level * 16}px` }, onClick: () => handleNodeClick(node) },
+                hasChildren && (React.createElement("div", { className: "w-4 h-4 mr-1 flex items-center justify-center" }, isExpanded ? (React.createElement(ChevronDownIcon, { className: "w-3 h-3 text-gray-500" })) : (React.createElement(ChevronRightIcon, { className: "w-3 h-3 text-gray-500" })))),
+                !hasChildren && React.createElement("div", { className: "w-5 mr-1" }),
+                React.createElement("div", { className: "w-4 h-4 mr-2 flex items-center justify-center" }, node.type === 'folder' ? (isExpanded ? (React.createElement(FolderOpenIcon, { className: "w-4 h-4 text-blue-500" })) : (React.createElement(FolderIcon, { className: "w-4 h-4 text-blue-500" }))) : node.type === 'resource' ? (React.createElement(DocumentTextIcon, { className: "w-4 h-4 text-green-500" })) : (React.createElement(CubeIcon, { className: "w-4 h-4 text-purple-500" }))),
+                React.createElement("span", { className: `text-sm ${isSelected ? 'font-medium text-blue-900' : 'text-gray-700'}` }, node.name)),
+            hasChildren && isExpanded && (React.createElement("div", null, node.children.map((child) => renderTreeNode(child, level + 1))))));
+    };
+    if (!resources) {
+        return (React.createElement("div", { className: `p-6 ${className}` },
+            React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+                React.createElement(CubeIcon, { className: "h-8 w-8 text-blue-600" }),
+                React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Compiled Resources")),
+            React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-8 text-center" },
+                React.createElement("div", { className: "max-w-2xl mx-auto" },
+                    React.createElement("h3", { className: "text-xl font-semibold text-gray-900 mb-4" }, "No Compiled Resources"),
+                    React.createElement("p", { className: "text-gray-600 mb-6" }, "Import resources to explore the compiled resource collection.")))));
+    }
+    const selectedNode = selectedNodeId ? findNodeById(treeData, selectedNodeId) : null;
+    return (React.createElement("div", { className: `p-6 ${className}` },
+        React.createElement("div", { className: "flex items-center justify-between mb-6" },
+            React.createElement("div", { className: "flex items-center space-x-3" },
+                React.createElement(CubeIcon, { className: "h-8 w-8 text-blue-600" }),
+                React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "Compiled Resources"),
+                isFilteringActive && (React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800" }, "Filtered"))),
+            activeProcessedResources && (React.createElement("div", { className: "flex items-center space-x-2" },
+                React.createElement("button", { onClick: handleExportCompiledData, className: "inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
+                    React.createElement(DocumentArrowDownIcon, { className: "h-4 w-4 mr-1" }),
+                    "Export JSON"),
+                React.createElement("button", { onClick: handleExportBundle, className: "inline-flex items-center px-3 py-1.5 border border-blue-300 text-xs font-medium rounded text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
+                    React.createElement(ArchiveBoxIcon, { className: "h-4 w-4 mr-1" }),
+                    "Export Bundle")))),
+        activeProcessedResources && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-6" },
+            React.createElement("div", { className: "flex items-center justify-between" },
+                React.createElement("div", { className: "flex items-center space-x-6" },
+                    React.createElement("div", { className: "flex items-center space-x-2" },
+                        resources?.isLoadedFromBundle ? (React.createElement(ArchiveBoxIcon, { className: "h-4 w-4 text-blue-600" })) : (React.createElement(CubeIcon, { className: "h-4 w-4 text-gray-600" })),
+                        React.createElement("label", { className: "text-sm font-medium text-gray-700" }, "Normalize Output:"),
+                        React.createElement("button", { onClick: () => setUseNormalization(!useNormalization), className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${useNormalization ? 'bg-blue-600' : 'bg-gray-300'}` },
+                            React.createElement("span", { className: `inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${useNormalization ? 'translate-x-5' : 'translate-x-1'}` })),
+                        React.createElement("span", { className: "text-xs text-gray-500" }, useNormalization ? 'ON' : 'OFF')),
+                    React.createElement("button", { onClick: () => setShowJsonView(!showJsonView), className: "inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
+                        React.createElement(CodeBracketIcon, { className: "h-4 w-4 mr-2" }),
+                        showJsonView ? 'Hide' : 'Show',
+                        " JSON",
+                        showJsonView ? (React.createElement(ChevronUpIcon, { className: "h-4 w-4 ml-2" })) : (React.createElement(ChevronDownIcon, { className: "h-4 w-4 ml-2" }))))),
+            showJsonView && (React.createElement("div", { className: "mt-4" },
+                React.createElement("div", { className: "bg-gray-50 rounded-lg border border-gray-200 p-4" },
+                    React.createElement("pre", { className: "text-xs text-gray-800 bg-white p-3 rounded border overflow-x-auto max-h-64 overflow-y-auto" }, JSON.stringify(activeProcessedResources.compiledCollection, null, 2))))))),
+        React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            React.createElement("div", { className: "flex flex-col lg:flex-row gap-6 h-[600px]" },
+                React.createElement("div", { className: "lg:w-1/2 flex flex-col" },
+                    React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, "Compiled Collection"),
+                    React.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50" }, treeData && renderTreeNode(treeData))),
+                React.createElement("div", { className: "lg:w-1/2 flex flex-col" }, selectedNode ? (React.createElement(NodeDetail, { node: selectedNode })) : (React.createElement("div", { className: "flex-1 flex items-center justify-center border border-gray-200 rounded-lg bg-gray-50" },
+                    React.createElement("div", { className: "text-center" },
+                        React.createElement(CubeIcon, { className: "h-12 w-12 text-gray-400 mx-auto mb-4" }),
+                        React.createElement("p", { className: "text-gray-500" }, "Select an item to view details")))))))));
+};
+// Helper function to find node by ID
+const findNodeById = (tree, id) => {
+    if (tree.id === id)
+        return tree;
+    if (tree.children) {
+        for (const child of tree.children) {
+            const found = findNodeById(child, id);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+};
+const NodeDetail = ({ node }) => {
+    const [showRawJson, setShowRawJson] = useState(false);
+    const renderDetails = () => {
+        if (!node.data) {
+            return (React.createElement("div", { className: "space-y-4" },
+                React.createElement("div", { className: "bg-white rounded-lg border p-4" },
+                    React.createElement("h4", { className: "font-medium text-gray-700 mb-2" },
+                        "\uD83D\uDCC1 ",
+                        node.name),
+                    React.createElement("p", { className: "text-sm text-gray-600" }, node.children ? `Contains ${node.children.length} items` : 'Empty folder'))));
+        }
+        const { type, resourceId, manager } = node.data;
+        switch (type) {
+            case 'runtime-resource':
+                return renderRuntimeResource(resourceId, manager);
+            case 'qualifiers':
+            case 'qualifier-types':
+            case 'resource-types':
+            case 'conditions':
+            case 'condition-sets':
+            case 'decisions':
+                return renderRuntimeCollection(type, manager);
+            default:
+                return renderRawData();
+        }
+    };
+    // New function that uses runtime objects instead of manual JSON manipulation
+    const renderRuntimeResource = (resourceId, manager) => {
+        // Get the full runtime resource object with all its rich data
+        const resourceResult = manager.getBuiltResource(resourceId);
+        if (resourceResult.isFailure()) {
+            return (React.createElement("div", { className: "bg-white rounded-lg border p-4" },
+                React.createElement("h4", { className: "font-medium text-red-700 mb-2" }, "Error Loading Resource"),
+                React.createElement("p", { className: "text-sm text-red-600" }, resourceResult.message)));
+        }
+        const resource = resourceResult.value;
+        return (React.createElement("div", { className: "space-y-6" },
+            React.createElement("div", { className: "bg-gray-50 rounded-lg p-4" },
+                React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, "Compiled Resource Details"),
+                React.createElement("div", { className: "bg-white rounded-lg border p-4 space-y-3" },
+                    React.createElement("div", { className: "flex items-start" },
+                        React.createElement("span", { className: "font-semibold text-gray-700 w-32" }, "ID:"),
+                        React.createElement("span", { className: "font-mono text-gray-900" }, resource.id)),
+                    React.createElement("div", { className: "flex items-start" },
+                        React.createElement("span", { className: "font-semibold text-gray-700 w-32" }, "Resource Type:"),
+                        React.createElement("span", { className: "text-gray-900" },
+                            resource.resourceType.name || resource.resourceType.key,
+                            React.createElement("span", { className: "ml-2 text-xs font-mono bg-gray-100 px-2 py-1 rounded" },
+                                "(",
+                                resource.resourceType.index,
+                                ")"))),
+                    React.createElement("div", { className: "flex items-start" },
+                        React.createElement("span", { className: "font-semibold text-gray-700 w-32" }, "Decision:"),
+                        React.createElement("span", { className: "text-gray-900" },
+                            React.createElement("span", { className: "font-mono" },
+                                "Decision ",
+                                resource.decision.baseDecision?.index ?? resource.decision.index ?? 'unknown',
+                                ' ',
+                                "with ",
+                                resource.decision.candidates.length,
+                                " candidates"))))),
+            React.createElement("div", { className: "bg-gray-50 rounded-lg p-4" },
+                React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, "Candidates"),
+                React.createElement("div", { className: "space-y-4" }, resource.candidates.map((candidate, candidateIdx) => {
+                    // Get the corresponding decision candidate to access condition sets
+                    const decisionCandidate = resource.decision.candidates[candidateIdx];
+                    return (React.createElement("div", { key: candidateIdx, className: "bg-white rounded-lg border p-4" },
+                        React.createElement("div", { className: "mb-3" },
+                            React.createElement("h4", { className: "font-semibold text-gray-900" },
+                                "Candidate ",
+                                candidateIdx + 1,
+                                candidate.isPartial && (React.createElement("span", { className: "ml-2 bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs" }, "Partial")))),
+                        React.createElement("div", { className: "bg-gray-50 rounded p-3 mb-3" },
+                            React.createElement("h6", { className: "text-sm font-semibold text-gray-700 mb-2" }, "Resource Content:"),
+                            React.createElement("pre", { className: "text-sm font-mono text-gray-800 whitespace-pre-wrap" }, JSON.stringify(candidate.json, null, 2))),
+                        decisionCandidate?.conditionSet &&
+                            decisionCandidate.conditionSet.conditions.length > 0 && (React.createElement("div", { className: "border-t pt-3" },
+                            React.createElement("h5", { className: "text-sm font-semibold text-gray-700 mb-2" },
+                                "Condition Set ",
+                                decisionCandidate.conditionSet.index,
+                                ":"),
+                            React.createElement("div", { className: "space-y-2" }, decisionCandidate.conditionSet.conditions.map((condition, idx) => (React.createElement("div", { key: idx, className: "flex items-center text-sm bg-blue-50 rounded px-3 py-2" },
+                                React.createElement("span", { className: "font-mono text-blue-700 mr-2 text-xs" },
+                                    condition.index.toString().padStart(2, '0'),
+                                    ":"),
+                                React.createElement("span", { className: "font-medium text-blue-900 mr-2" }, condition.qualifier.name),
+                                React.createElement("span", { className: "text-blue-700 mr-2" }, condition.operator),
+                                React.createElement("span", { className: "font-mono text-blue-800" }, condition.value),
+                                React.createElement("span", { className: "ml-auto text-xs text-blue-600" },
+                                    "Priority: ",
+                                    condition.priority,
+                                    condition.scoreAsDefault !== undefined && (React.createElement("span", { className: "ml-2" },
+                                        "Default: ",
+                                        condition.scoreAsDefault))))))))),
+                        (!decisionCandidate?.conditionSet ||
+                            decisionCandidate.conditionSet.conditions.length === 0) && (React.createElement("div", { className: "border-t pt-3" },
+                            React.createElement("span", { className: "text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded" }, "No conditions (default candidate)")))));
+                })))));
+    };
+    // New function that uses runtime collections instead of raw JSON
+    const renderRuntimeCollection = (collectionType, manager) => {
+        let collector;
+        let title;
+        switch (collectionType) {
+            case 'qualifiers':
+                collector = manager.qualifiers;
+                title = 'Qualifiers';
+                break;
+            case 'qualifier-types':
+                collector = manager.qualifierTypes;
+                title = 'Qualifier Types';
+                break;
+            case 'resource-types':
+                collector = manager.resourceTypes;
+                title = 'Resource Types';
+                break;
+            case 'conditions':
+                collector = manager.conditions;
+                title = 'Conditions';
+                break;
+            case 'condition-sets':
+                collector = manager.conditionSets;
+                title = 'Condition Sets';
+                break;
+            case 'decisions':
+                collector = manager.decisions;
+                title = 'Decisions';
+                break;
+            default:
+                return (React.createElement("div", { className: "bg-white rounded-lg border p-4" },
+                    React.createElement("p", { className: "text-sm text-gray-500" },
+                        "Unknown collection type: ",
+                        collectionType)));
+        }
+        const items = Array.from(collector.values());
+        return (React.createElement("div", { className: "bg-gray-50 rounded-lg p-4" },
+            React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" },
+                title,
+                " ",
+                React.createElement("span", { className: "text-sm font-normal text-gray-600" },
+                    "(",
+                    items.length,
+                    ")")),
+            items.length === 0 ? (React.createElement("div", { className: "bg-white rounded-lg border p-4" },
+                React.createElement("p", { className: "text-sm text-gray-500" },
+                    "No ",
+                    title.toLowerCase(),
+                    " available"))) : (React.createElement("div", { className: "space-y-3 max-h-96 overflow-y-auto" }, items.map((item, index) => (React.createElement("div", { key: index, className: "bg-white rounded-lg border p-4" },
+                React.createElement("div", { className: "flex items-start justify-between mb-3" },
+                    React.createElement("div", null,
+                        React.createElement("h4", { className: "font-semibold text-gray-900" }, getItemDisplayName(item, collectionType, index)),
+                        React.createElement("p", { className: "text-sm text-gray-600 font-mono mt-1" }, getItemDisplayKey(item, collectionType))),
+                    item.index !== undefined && (React.createElement("span", { className: "bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs font-mono" },
+                        "Index: ",
+                        item.index))),
+                React.createElement("div", { className: "border-t pt-3" }, renderRuntimeItemDetail(item, collectionType)))))))));
+    };
+    // Helper functions for runtime object display
+    const getItemDisplayName = (item, collectionType, index) => {
+        switch (collectionType) {
+            case 'qualifiers':
+                return `${item.index}: ${item.name} (${item.type.name})`;
+            case 'qualifier-types':
+                return `${item.index}: ${item.name} (${item.systemType})`;
+            case 'resource-types':
+                return `${item.index}: ${item.name || item.key}`;
+            case 'conditions':
+                return `${item.index.toString().padStart(2, '0')}: ${item.qualifier.name} ${item.operator} ${item.value}`;
+            case 'condition-sets':
+                return `${item.index}: ${item.conditions.length === 0 ? 'Unconditional' : `${item.conditions.length} conditions`}`;
+            case 'decisions':
+                return `${item.baseDecision?.index ?? item.index}: Decision with ${item.candidates.length} candidates`;
+            default:
+                return `${index}: Item ${index}`;
+        }
+    };
+    const getItemDisplayKey = (item, collectionType) => {
+        try {
+            switch (collectionType) {
+                case 'qualifiers':
+                    return `defaultPriority: ${item?.defaultPriority ?? 'N/A'}`;
+                case 'qualifier-types':
+                    return `allowContextList: ${item?.allowContextList ?? 'N/A'}`;
+                case 'resource-types':
+                    return `key: ${item?.key ?? 'N/A'}`;
+                case 'conditions':
+                    return `priority: ${item?.priority ?? 'N/A'}`;
+                case 'condition-sets':
+                    return (item?.conditions
+                        ?.map((c) => `${c?.qualifier?.name ?? 'unknown'}=${c?.value ?? 'unknown'}`)
+                        .join(', ') || 'default');
+                case 'decisions':
+                    return `${item?.conditionSets?.length ?? 0} condition sets`;
+                default:
+                    return '';
+            }
+        }
+        catch (error) {
+            console.warn('Error in getItemDisplayKey:', error, { item, collectionType });
+            return 'Display error';
+        }
+    };
+    const renderRuntimeItemDetail = (item, collectionType) => {
+        switch (collectionType) {
+            case 'qualifiers':
+                return (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Type:"),
+                        " ",
+                        item.type.name),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Default Priority:"),
+                        " ",
+                        item.defaultPriority)));
+            case 'qualifier-types':
+                return (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "System Type:"),
+                        " ",
+                        item.systemType),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Allow Context List:"),
+                        " ",
+                        item.allowContextList ? 'Yes' : 'No'),
+                    item.enumeratedValues && (React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Enumerated Values:"),
+                        " ",
+                        item.enumeratedValues.join(', ')))));
+            case 'resource-types':
+                return (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Key:"),
+                        " ",
+                        item.key),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Name:"),
+                        " ",
+                        item.name)));
+            case 'conditions':
+                return (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Qualifier:"),
+                        " ",
+                        item.qualifier.name),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Operator:"),
+                        " ",
+                        item.operator),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Value:"),
+                        " ",
+                        item.value),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Priority:"),
+                        " ",
+                        item.priority),
+                    item.scoreAsDefault !== undefined && (React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Score As Default:"),
+                        " ",
+                        item.scoreAsDefault))));
+            case 'condition-sets':
+                return (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Conditions:"),
+                        " ",
+                        item.conditions?.length ?? 0),
+                    (item.conditions?.length ?? 0) > 0 && (React.createElement("div", { className: "space-y-1" }, item.conditions?.map((condition, idx) => (React.createElement("div", { key: idx, className: "text-xs bg-blue-50 rounded px-2 py-1" },
+                        condition.qualifier.name,
+                        " ",
+                        condition.operator,
+                        " ",
+                        condition.value,
+                        " (p:",
+                        condition.priority,
+                        ")")))))));
+            case 'decisions':
+                return (React.createElement("div", { className: "space-y-2" },
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Condition Sets:"),
+                        " ",
+                        item.conditionSets?.length ?? 0),
+                    React.createElement("div", null,
+                        React.createElement("span", { className: "font-medium" }, "Candidates:"),
+                        " ",
+                        item.candidates?.length ?? 0)));
+            default:
+                return (React.createElement("pre", { className: "text-xs bg-gray-50 p-2 rounded overflow-x-auto" }, JSON.stringify(item, null, 2)));
+        }
+    };
+    const renderRawData = () => {
+        return (React.createElement("div", { className: "bg-white rounded-lg border p-4" },
+            React.createElement("h4", { className: "font-medium text-gray-700 mb-2" }, node.name),
+            React.createElement("pre", { className: "text-xs bg-gray-50 p-2 rounded overflow-x-auto max-h-96 overflow-y-auto" }, JSON.stringify(node.data, null, 2))));
+    };
+    return (React.createElement("div", { className: "flex flex-col h-full" },
+        React.createElement("div", { className: "flex items-center justify-between mb-4" },
+            React.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Details"),
+            React.createElement("button", { onClick: () => setShowRawJson(!showRawJson), className: "text-xs text-gray-500 hover:text-gray-700 px-2 py-1 rounded hover:bg-gray-100" }, showRawJson ? 'Rich View' : 'Raw JSON')),
+        React.createElement("div", { className: "flex-1 overflow-y-auto" }, showRawJson ? (React.createElement("div", { className: "bg-white rounded-lg border p-4" },
+            React.createElement("pre", { className: "text-xs bg-gray-50 p-3 rounded overflow-x-auto" }, JSON.stringify(node.data, null, 2)))) : (renderDetails()))));
+};
+export default CompiledView;
+//# sourceMappingURL=index.js.map