@fgv/ts-res-ui-components 5.0.0-21 → 5.0.0-23

package/lib-commonjs/components/forms/GenericQualifierTypeEditForm.js

@@ -0,0 +1,171 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GenericQualifierTypeEditForm = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const outline_1 = require("@heroicons/react/24/outline");
+/**
+ * Form component for editing custom qualifier types with JSON configuration.
+ * Provides a generic editor for qualifier types that don't use the built-in system types.
+ *
+ * @public
+ */
+const GenericQualifierTypeEditForm = ({ qualifierType, onSave, onCancel, existingNames = [] }) => {
+    const [formData, setFormData] = (0, react_1.useState)(() => {
+        if (qualifierType) {
+            return {
+                name: qualifierType.name,
+                systemType: qualifierType.systemType,
+                configuration: JSON.stringify(qualifierType.configuration || {}, null, 2)
+            };
+        }
+        return {
+            name: '',
+            systemType: '',
+            configuration: JSON.stringify({}, null, 2)
+        };
+    });
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [isJsonValid, setIsJsonValid] = (0, react_1.useState)(true);
+    const [configValidation, setConfigValidation] = (0, react_1.useState)(null);
+    // Validate JSON configuration on every change
+    (0, react_1.useEffect)(() => {
+        try {
+            const parsed = JSON.parse(formData.configuration);
+            setIsJsonValid(true);
+            // Attempt to validate the configuration structure if we have both name and systemType
+            if (formData.name && formData.systemType) {
+                try {
+                    const testConfig = {
+                        name: formData.name,
+                        systemType: formData.systemType,
+                        configuration: parsed
+                    };
+                    // For now, we'll just check basic structure
+                    // In the future, this could call validateConfigurationJson if we had a qualifier type instance
+                    setConfigValidation(null); // Could be enhanced with actual validation
+                    setErrors((prev) => ({ ...prev, configuration: undefined }));
+                }
+                catch (validationError) {
+                    setConfigValidation(null); // Could store validation result
+                    setErrors((prev) => ({ ...prev, configuration: undefined }));
+                }
+            }
+            else {
+                setConfigValidation(null);
+                setErrors((prev) => ({ ...prev, configuration: undefined }));
+            }
+        }
+        catch (error) {
+            setIsJsonValid(false);
+            setConfigValidation(null);
+            setErrors((prev) => ({
+                ...prev,
+                configuration: error instanceof Error ? `JSON Error: ${error.message}` : 'Invalid JSON'
+            }));
+        }
+    }, [formData.configuration, formData.name, formData.systemType]);
+    const validateForm = (0, react_1.useCallback)(() => {
+        const newErrors = {};
+        // Validate name
+        if (!formData.name.trim()) {
+            newErrors.name = 'Name is required';
+        }
+        else if (existingNames.includes(formData.name.trim()) &&
+            (!qualifierType || qualifierType.name !== formData.name.trim())) {
+            newErrors.name = 'Name already exists';
+        }
+        // Validate system type
+        if (!formData.systemType.trim()) {
+            newErrors.systemType = 'System type is required';
+        }
+        // Validate JSON
+        if (!isJsonValid) {
+            newErrors.configuration = 'Valid JSON is required';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }, [formData, qualifierType, existingNames, isJsonValid]);
+    const handleSave = (0, react_1.useCallback)(() => {
+        if (!validateForm()) {
+            return;
+        }
+        try {
+            const configuration = JSON.parse(formData.configuration);
+            const newQualifierType = {
+                name: formData.name.trim(),
+                systemType: formData.systemType.trim(),
+                configuration
+            };
+            onSave(newQualifierType);
+        }
+        catch (error) {
+            setErrors((prev) => ({
+                ...prev,
+                configuration: 'Failed to parse JSON configuration'
+            }));
+        }
+    }, [formData, validateForm, onSave]);
+    const handleInputChange = (0, react_1.useCallback)((field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+        // Clear error when user starts typing
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: undefined }));
+        }
+    }, [errors]);
+    const formatJson = (0, react_1.useCallback)(() => {
+        try {
+            const parsed = JSON.parse(formData.configuration);
+            const formatted = JSON.stringify(parsed, null, 2);
+            setFormData((prev) => ({ ...prev, configuration: formatted }));
+        }
+        catch (error) {
+            // If JSON is invalid, don't format
+        }
+    }, [formData.configuration]);
+    return (react_1.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" },
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between p-6 border-b border-gray-200" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, qualifierType ? 'Edit Custom Qualifier Type' : 'Add Custom Qualifier Type'),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-600 mt-1" }, "Configure a custom qualifier type with JSON configuration")),
+                react_1.default.createElement("button", { onClick: onCancel, className: "p-2 text-gray-400 hover:text-gray-600 rounded-lg hover:bg-gray-100" },
+                    react_1.default.createElement(outline_1.XMarkIcon, { className: "w-6 h-6" }))),
+            react_1.default.createElement("div", { className: "p-6 space-y-6" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "qualifierTypeName", className: "block text-sm font-medium text-gray-700 mb-2" }, "Name"),
+                    react_1.default.createElement("input", { id: "qualifierTypeName", type: "text", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value), className: `w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.name ? 'border-red-300 bg-red-50' : 'border-gray-300'}`, placeholder: "Enter qualifier type name (e.g., 'custom-dimension')" }),
+                    errors.name && (react_1.default.createElement("div", { className: "mt-1 flex items-center text-sm text-red-600" },
+                        react_1.default.createElement(outline_1.ExclamationTriangleIcon, { className: "w-4 h-4 mr-1 flex-shrink-0" }),
+                        errors.name))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "systemType", className: "block text-sm font-medium text-gray-700 mb-2" }, "System Type"),
+                    react_1.default.createElement("input", { id: "systemType", type: "text", value: formData.systemType, onChange: (e) => handleInputChange('systemType', e.target.value), className: `w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${errors.systemType ? 'border-red-300 bg-red-50' : 'border-gray-300'}`, placeholder: "Enter system type (e.g., 'custom', 'dimension')" }),
+                    errors.systemType && (react_1.default.createElement("div", { className: "mt-1 flex items-center text-sm text-red-600" },
+                        react_1.default.createElement(outline_1.ExclamationTriangleIcon, { className: "w-4 h-4 mr-1 flex-shrink-0" }),
+                        errors.systemType))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "flex items-center justify-between mb-2" },
+                        react_1.default.createElement("label", { htmlFor: "configuration", className: "block text-sm font-medium text-gray-700" }, "Configuration (JSON)"),
+                        react_1.default.createElement("button", { type: "button", onClick: formatJson, disabled: !isJsonValid, className: "text-xs text-blue-600 hover:text-blue-800 disabled:text-gray-400" }, "Format JSON")),
+                    react_1.default.createElement("textarea", { id: "configuration", rows: 12, value: formData.configuration, onChange: (e) => handleInputChange('configuration', e.target.value), className: `w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm ${errors.configuration ? 'border-red-300 bg-red-50' : 'border-gray-300'}`, placeholder: '{"property": "value"}' }),
+                    errors.configuration && (react_1.default.createElement("div", { className: "mt-1 flex items-center text-sm text-red-600" },
+                        react_1.default.createElement(outline_1.ExclamationTriangleIcon, { className: "w-4 h-4 mr-1 flex-shrink-0" }),
+                        errors.configuration)),
+                    isJsonValid && (react_1.default.createElement("div", { className: "mt-1 flex items-center text-sm text-green-600" },
+                        react_1.default.createElement(outline_1.InformationCircleIcon, { className: "w-4 h-4 mr-1 flex-shrink-0" }),
+                        "Valid JSON configuration"))),
+                react_1.default.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4" },
+                    react_1.default.createElement("div", { className: "flex items-start" },
+                        react_1.default.createElement(outline_1.InformationCircleIcon, { className: "w-5 h-5 text-blue-500 mr-2 mt-0.5 flex-shrink-0" }),
+                        react_1.default.createElement("div", { className: "text-sm text-blue-700" },
+                            react_1.default.createElement("p", { className: "font-medium mb-1" }, "Custom Qualifier Types"),
+                            react_1.default.createElement("p", null, "Custom qualifier types allow you to extend the system with your own validation logic. The configuration object can contain any valid JSON and will be passed to your custom qualifier type implementation."))))),
+            react_1.default.createElement("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-gray-200" },
+                react_1.default.createElement("button", { onClick: onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" }, "Cancel"),
+                react_1.default.createElement("button", { onClick: handleSave, disabled: !isJsonValid || Object.keys(errors).length > 0, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed" },
+                    qualifierType ? 'Update' : 'Create',
+                    " Qualifier Type")))));
+};
+exports.GenericQualifierTypeEditForm = GenericQualifierTypeEditForm;
+//# sourceMappingURL=GenericQualifierTypeEditForm.js.map

package/lib-commonjs/components/forms/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HierarchyEditor = exports.ResourceTypeEditForm = exports.QualifierEditForm = exports.QualifierTypeEditForm = void 0;
+exports.HierarchyEditor = exports.ResourceTypeEditForm = exports.QualifierEditForm = exports.GenericQualifierTypeEditForm = exports.QualifierTypeEditForm = void 0;
 var QualifierTypeEditForm_1 = require("./QualifierTypeEditForm");
 Object.defineProperty(exports, "QualifierTypeEditForm", { enumerable: true, get: function () { return QualifierTypeEditForm_1.QualifierTypeEditForm; } });
+var GenericQualifierTypeEditForm_1 = require("./GenericQualifierTypeEditForm");
+Object.defineProperty(exports, "GenericQualifierTypeEditForm", { enumerable: true, get: function () { return GenericQualifierTypeEditForm_1.GenericQualifierTypeEditForm; } });
 var QualifierEditForm_1 = require("./QualifierEditForm");
 Object.defineProperty(exports, "QualifierEditForm", { enumerable: true, get: function () { return QualifierEditForm_1.QualifierEditForm; } });
 var ResourceTypeEditForm_1 = require("./ResourceTypeEditForm");

package/lib-commonjs/components/orchestrator/ResourceOrchestrator.js

@@ -3,55 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResourceOrchestrator = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const contexts_1 = require("../../contexts");
+const ts_res_1 = require("@fgv/ts-res");
+const ObservabilityTools = tslib_1.__importStar(require("../../utils/observability"));
 const useResourceData_1 = require("../../hooks/useResourceData");
 const useFilterState_1 = require("../../hooks/useFilterState");
 const useViewState_1 = require("../../hooks/useViewState");
 const useResolutionState_1 = require("../../hooks/useResolutionState");
 const filterResources_1 = require("../../utils/filterResources");
+const downloadHelper_1 = require("../../utils/downloadHelper");
 /**
- * Main orchestrator component for ts-res resource management UI.
- *
- * This component provides a centralized state management and action coordination
- * for all ts-res UI functionality. It uses the render props pattern to provide
- * state and actions to child components.
- *
- * Features:
- * - Resource processing (files, directories, bundles)
- * - Filtering and context management
- * - Resource resolution testing
- * - Configuration management
- * - View state coordination
- *
- * @param props - ResourceOrchestrator configuration
- * @returns JSX element using render props pattern
- *
- * @example
- * ```typescript
- * <ResourceOrchestrator>
- *   {({ state, actions }) => (
- *     <div>
- *       <ImportView
- *         onImport={actions.importDirectory}
- *         onBundleImport={actions.importBundle}
- *       />
- *       {state.processedResources && (
- *         <SourceView
- *           resources={state.processedResources}
- *           onExport={actions.exportData}
- *         />
- *       )}
- *     </div>
- *   )}
- * </ResourceOrchestrator>
- * ```
- *
- * @public
+ * Internal orchestrator component that has access to observability context via hook.
  */
-const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFactory, resourceTypeFactory, onStateChange }) => {
+const ResourceOrchestratorInternal = ({ children, initialConfiguration, qualifierTypeFactory, resourceTypeFactory, onStateChange }) => {
+    // Get observability context from provider
+    const o11y = (0, contexts_1.useObservability)();
     // Core hooks
     const resourceData = (0, useResourceData_1.useResourceData)({
         qualifierTypeFactory,
-        resourceTypeFactory
+        resourceTypeFactory,
+        o11y
     });
     const filterState = (0, useFilterState_1.useFilterState)();
     const viewState = (0, useViewState_1.useViewState)();
@@ -97,7 +68,7 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
     const performFiltering = (0, react_1.useCallback)(async (filterValues) => {
         // Prevent concurrent filtering operations
         if (isFilteringInProgress.current) {
-            console.log('Filtering already in progress, skipping...');
+            o11y.diag.info('Filtering already in progress, skipping...');
             return null;
         }
         if (!resourceData.state.processedResources || !filterState.state.enabled) {
@@ -114,12 +85,12 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
         try {
             const { system } = resourceData.state.processedResources;
             viewState.addMessage('info', 'Starting filtering process...');
-            console.log('Filtering with values:', filterValues);
-            console.log('Filter state:', filterState.state);
+            o11y.diag.info('Filtering with values:', filterValues);
+            o11y.diag.info('Filter state:', filterState.state);
             // Try the simplified filtering approach using provided values
             let filteredResult = await (0, filterResources_1.createFilteredResourceManagerSimple)(system, filterValues, {
                 partialContextMatch: true,
-                enableDebugLogging: true, // Enable debug logging to see what's happening
+                enableDebugLogging: false, // Disable debug logging to reduce console output
                 reduceQualifiers: filterState.state.reduceQualifiers
             });
             if (filteredResult.isFailure()) {
@@ -135,15 +106,15 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
             }
             // Analyze filtered resources compared to original
             const originalResources = resourceData.state.processedResources.summary.resourceIds || [];
-            console.log('Original resources count:', originalResources.length);
+            o11y.diag.info('Original resources count:', originalResources.length);
             const analysis = (0, filterResources_1.analyzeFilteredResources)(originalResources, filteredResult.value, resourceData.state.processedResources);
-            console.log('Analysis result:', {
+            o11y.diag.info('Analysis result:', {
                 success: analysis.success,
                 filteredResourcesCount: analysis.filteredResources.length,
                 warningsCount: analysis.warnings.length,
                 hasProcessedResources: !!analysis.processedResources
             });
-            console.log('Filtered resources breakdown:', analysis.filteredResources.map((r) => ({
+            o11y.diag.info('Filtered resources breakdown:', analysis.filteredResources.map((r) => ({
                 id: r.id,
                 originalCandidates: r.originalCandidateCount,
                 filteredCandidates: r.filteredCandidateCount,
@@ -156,7 +127,7 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
                 filteredResources: analysis.filteredResources,
                 warnings: analysis.warnings
             };
-            console.log('Setting filter result:', result);
+            o11y.diag.info('Setting filter result:', result);
             setFilterResult(result);
             if (analysis.warnings.length > 0) {
                 viewState.addMessage('warning', `Filtering completed with ${analysis.warnings.length} warning(s)`);
@@ -242,12 +213,12 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
         // Resource management
         importDirectory: async (directory) => {
             viewState.addMessage('info', 'Importing directory...');
-            await resourceData.actions.processDirectory(directory);
-            if (!resourceData.state.error) {
+            const result = await resourceData.actions.processDirectory(directory);
+            if (result.isSuccess()) {
                 viewState.addMessage('success', 'Directory imported successfully');
             }
             else {
-                viewState.addMessage('error', resourceData.state.error);
+                viewState.addMessage('error', result.message);
             }
         },
         importDirectoryWithConfig: async (directory, config) => {
@@ -315,10 +286,12 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
         clearResourceEdits: resolutionData.actions.clearEdits,
         // Edits applied through unified applyPendingResources
         discardResourceEdits: resolutionData.actions.discardEdits,
-        // Resource creation actions
+        // Resource creation actions (enhanced with atomic API)
+        createPendingResource: resolutionData.actions.createPendingResource,
         startNewResource: resolutionData.actions.startNewResource,
         updateNewResourceId: resolutionData.actions.updateNewResourceId,
         selectResourceType: resolutionData.actions.selectResourceType,
+        updateNewResourceJson: resolutionData.actions.updateNewResourceJson,
         saveNewResourceAsPending: resolutionData.actions.saveNewResourceAsPending,
         cancelNewResource: resolutionData.actions.cancelNewResource,
         removePendingResource: resolutionData.actions.removePendingResource,
@@ -326,15 +299,109 @@ const ResourceOrchestrator = ({ children, initialConfiguration, qualifierTypeFac
         applyPendingResources: resolutionData.actions.applyPendingResources,
         discardPendingResources: resolutionData.actions.discardPendingResources,
         // Combined apply/discard removed; use applyPendingResources/discard* directly
+        // Export functionality
+        exportBundle: () => {
+            const resources = resourceData.state.processedResources;
+            if (!resources || !resources.activeConfiguration) {
+                viewState.addMessage('error', 'Export bundle failed: No resource manager or configuration available');
+                return;
+            }
+            // Use proper Result chaining with side effects
+            const result = ts_res_1.Config.SystemConfiguration.create(resources.activeConfiguration)
+                .onSuccess((systemConfig) => ts_res_1.Bundle.BundleBuilder.create(resources.system.resourceManager, systemConfig))
+                .onSuccess((bundle) => downloadHelper_1.DownloadUtils.downloadBundle(bundle, resources.resourceCount));
+            // Handle final result with side effects
+            if (result.isSuccess()) {
+                viewState.addMessage('success', 'Bundle exported successfully');
+            }
+            else {
+                viewState.addMessage('error', `Export bundle failed: ${result.message}`);
+            }
+        },
+        exportSource: () => {
+            const resources = resourceData.state.processedResources;
+            if (!resources) {
+                viewState.addMessage('error', 'Export source failed: No processed resources available');
+                return;
+            }
+            // Use proper Result chaining with side effects
+            const result = downloadHelper_1.DownloadUtils.downloadSourceResources(resources, resources.resourceCount);
+            // Handle result with side effects
+            if (result.isSuccess()) {
+                viewState.addMessage('success', 'Source resources exported successfully');
+            }
+            else {
+                viewState.addMessage('error', `Export source failed: ${result.message}`);
+            }
+        },
+        exportCompiled: () => {
+            const resources = resourceData.state.processedResources;
+            if (!resources || !resources.compiledCollection) {
+                viewState.addMessage('error', 'Export compiled failed: No compiled resources available');
+                return;
+            }
+            // Use proper Result chaining with side effects
+            const result = downloadHelper_1.DownloadUtils.downloadCompiledResources(resources.compiledCollection, resources.resourceCount);
+            // Handle result with side effects
+            if (result.isSuccess()) {
+                viewState.addMessage('success', 'Compiled resources exported successfully');
+            }
+            else {
+                viewState.addMessage('error', `Export compiled failed: ${result.message}`);
+            }
+        },
         // UI state management
         selectResource: viewState.selectResource,
         addMessage: viewState.addMessage,
         clearMessages: viewState.clearMessages,
+        // Observability context
+        o11y,
         // Resource resolution
         resolveResource: resourceData.actions.resolveResource
     }), [resourceData.actions, filterState.actions, resolutionData.actions, viewState, applyFilter, resetFilter]);
     return react_1.default.createElement(react_1.default.Fragment, null, children({ state, actions }));
 };
+/**
+ * Main orchestrator component for ts-res resource management UI.
+ *
+ * This component provides a centralized state management and action coordination
+ * for all ts-res UI functionality. It uses the render props pattern to provide
+ * state and actions to child components.
+ *
+ * Features:
+ * - Resource processing (files, directories, bundles)
+ * - Filtering and context management
+ * - Resource resolution testing
+ * - Configuration management
+ * - View state coordination
+ *
+ * @param props - ResourceOrchestrator configuration
+ * @returns JSX element using render props pattern
+ *
+ * @example
+ * ```typescript
+ * <ResourceOrchestrator>
+ *   {({ state, actions }) => (
+ *     <div>
+ *       <ImportView
+ *         onImport={actions.importDirectory}
+ *         onBundleImport={actions.importBundle}
+ *       />
+ *       {state.processedResources && (
+ *         <SourceView
+ *           resources={state.processedResources}
+ *           onExport={actions.exportData}
+ *         />
+ *       )}
+ *     </div>
+ *   )}
+ * </ResourceOrchestrator>
+ * ```
+ *
+ * @public
+ */
+const ResourceOrchestrator = ({ observabilityContext = ObservabilityTools.DefaultObservabilityContext, ...props }) => (react_1.default.createElement(contexts_1.ObservabilityProvider, { observabilityContext: observabilityContext },
+    react_1.default.createElement(ResourceOrchestratorInternal, { ...props })));
 exports.ResourceOrchestrator = ResourceOrchestrator;
 exports.default = exports.ResourceOrchestrator;
 //# sourceMappingURL=ResourceOrchestrator.js.map

package/lib-commonjs/components/pickers/ResourcePicker/ResourcePickerTree.js

@@ -4,12 +4,14 @@ exports.ResourcePickerTree = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const outline_1 = require("@heroicons/react/24/outline");
+const contexts_1 = require("../../../contexts");
 /**
  * Creates a virtual tree by merging real resource tree with pending resources
  */
 function createVirtualTree(realTree, pendingResources = []) {
-    if (!realTree)
+    if (!realTree) {
         return null;
+    }
     // Helper to convert real node to virtual node
     const convertRealNode = (realNode) => {
         const virtualNode = {
@@ -84,28 +86,46 @@ function createVirtualTree(realTree, pendingResources = []) {
  * Enhanced version of ResourceTreeView with branch isolation and annotation support
  */
 const ResourcePickerTree = ({ resources, pendingResources, selectedResourceId, onResourceSelect, resourceAnnotations, searchTerm = '', rootPath, hideRootNode, className = '', emptyMessage = 'No resources available' }) => {
+    // Get observability context
+    const o11y = (0, contexts_1.useObservability)();
     const [expandedNodes, setExpandedNodes] = (0, react_1.useState)(new Set());
     // Build the virtual tree structure from resources and pending resources
     const virtualTree = (0, react_1.useMemo)(() => {
-        if (!resources)
+        if (!resources) {
             return null;
+        }
         // Get the tree from the resource manager
         const resourceManager = resources.system.resourceManager;
         const treeResult = resourceManager.getBuiltResourceTree();
         if (treeResult.isFailure()) {
-            console.error('Failed to build resource tree:', treeResult.message);
+            o11y.diag.error('ResourcePickerTree: Failed to build resource tree:', treeResult.message);
             return null;
         }
         // Create virtual tree that includes pending resources
-        return createVirtualTree(treeResult.value, pendingResources);
+        try {
+            const virtualTree = createVirtualTree(treeResult.value, pendingResources);
+            return virtualTree;
+        }
+        catch (error) {
+            o11y.diag.error('ResourcePickerTree: Error in createVirtualTree:', error);
+            return null;
+        }
     }, [resources, pendingResources]);
     // Find the effective root node(s) to display
     const effectiveRootNodes = (0, react_1.useMemo)(() => {
-        if (!virtualTree)
+        try {
+            if (!virtualTree) {
+                return [];
+            }
+            // If no rootPath, show all top-level nodes
+            if (!rootPath) {
+                const nodes = Array.from(virtualTree.children.values());
+                return nodes;
+            }
+        }
+        catch (error) {
+            o11y.diag.error('ResourcePickerTree: Error in effectiveRootNodes calculation:', error);
             return [];
-        // If no rootPath, show all top-level nodes
-        if (!rootPath) {
-            return Array.from(virtualTree.children.values());
         }
         // Find the target node in the virtual tree
         const findVirtualNodeById = (node, targetId) => {
@@ -280,7 +300,7 @@ const ResourcePickerTree = ({ resources, pendingResources, selectedResourceId, o
         return (react_1.default.createElement("div", { className: `${className} p-4 text-center text-gray-500` },
             react_1.default.createElement("p", null, emptyMessage)));
     }
-    return (react_1.default.createElement("div", { className: `${className} overflow-y-auto` }, effectiveRootNodes
+    return (react_1.default.createElement("div", { className: `${className} overflow-y-auto !relative !z-auto !min-h-[200px]` }, effectiveRootNodes
         .sort((a, b) => {
         // Sort folders first, then by name
         if (a.isLeaf !== b.isLeaf) {
@@ -288,7 +308,9 @@ const ResourcePickerTree = ({ resources, pendingResources, selectedResourceId, o
         }
         return a.name.localeCompare(b.name);
     })
-        .map((child) => renderTreeNode(child))));
+        .map((child) => {
+        return renderTreeNode(child);
+    })));
 };
 exports.ResourcePickerTree = ResourcePickerTree;
 /**

package/lib-commonjs/components/pickers/ResourcePicker/index.js

@@ -109,7 +109,9 @@ const ResourcePicker = ({ resources, selectedResourceId, onResourceSelect, resou
             react_1.default.createElement("p", null, emptyMessage || 'No resources loaded')));
     }
     const containerHeight = typeof height === 'number' ? `${height}px` : height;
-    return (react_1.default.createElement("div", { className: `flex flex-col ${className}`, style: { height: containerHeight } },
+    return (react_1.default.createElement("div", { className: `flex flex-col !relative !z-auto !min-h-[400px] ${className}`, style: {
+            height: containerHeight
+        } },
         (enableSearch || showViewToggle) && (react_1.default.createElement("div", { className: "flex flex-col gap-3 mb-4" },
             enableSearch && (react_1.default.createElement("div", { className: "relative" },
                 react_1.default.createElement(outline_1.MagnifyingGlassIcon, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }),
@@ -131,7 +133,7 @@ const ResourcePicker = ({ resources, selectedResourceId, onResourceSelect, resou
                             : 'text-gray-600 hover:text-gray-900'}`, title: "Tree View" },
                         react_1.default.createElement(outline_1.FolderIcon, { className: "h-4 w-4" }),
                         react_1.default.createElement("span", { className: "ml-1" }, "Tree"))))))),
-        react_1.default.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50" }, viewMode === 'tree' ? (react_1.default.createElement(ResourcePickerTree_1.ResourcePickerTree, { resources: resources, pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })) : (react_1.default.createElement(ResourcePickerList_1.ResourcePickerList, { resourceIds: resources.summary.resourceIds || [], pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })))));
+        react_1.default.createElement("div", { className: "flex-1 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 !relative !z-auto !min-h-[300px]" }, viewMode === 'tree' ? (react_1.default.createElement(ResourcePickerTree_1.ResourcePickerTree, { resources: resources, pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })) : (react_1.default.createElement(ResourcePickerList_1.ResourcePickerList, { resourceIds: resources.summary.resourceIds || [], pendingResources: pendingResources, selectedResourceId: selectedResourceId, onResourceSelect: handleResourceSelect, resourceAnnotations: resourceAnnotations, searchTerm: searchTerm, rootPath: rootPath, hideRootNode: hideRootNode, emptyMessage: emptyMessage })))));
 };
 exports.ResourcePicker = ResourcePicker;
 exports.default = exports.ResourcePicker;