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

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

@@ -0,0 +1,212 @@
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { TableCellsIcon } from '@heroicons/react/24/outline';
+import { selectResources } from '../../../utils/resourceSelector';
+import { QualifierContextControl } from '../../common/QualifierContextControl';
+import { UnifiedChangeControls } from '../ResolutionView/UnifiedChangeControls';
+import { ResourceGrid } from './ResourceGrid';
+/**
+ * GridView component for displaying multiple resources in a tabular format.
+ *
+ * Provides a grid-based interface for viewing and editing multiple resources
+ * simultaneously, with configurable column mappings and shared context management.
+ * Leverages the same state management and batch processing as ResolutionView.
+ *
+ * **Key Features:**
+ * - **Multi-resource display**: View multiple resources in rows with configurable columns
+ * - **Column mapping**: Host-defined extraction of properties from resolved resources
+ * - **Batch editing**: Edit multiple resource values with unified batch application
+ * - **Context integration**: Same context management as ResolutionView
+ * - **Resource filtering**: Flexible resource selection via built-in and custom selectors
+ * - **Change management**: Leverages existing UnifiedChangeControls for batch operations
+ *
+ * @example
+ * ```tsx
+ * import { GridView } from '@fgv/ts-res-ui-components';
+ *
+ * // Define grid configuration
+ * const gridConfig = {
+ *   id: 'user-messages',
+ *   title: 'User Messages',
+ *   resourceSelection: { type: 'prefix', prefix: 'user.' },
+ *   columnMapping: [{
+ *     resourceType: 'text-resource',
+ *     columns: [
+ *       { id: 'text', title: 'Message Text', dataPath: 'text', editable: true },
+ *       { id: 'locale', title: 'Locale', dataPath: 'locale' }
+ *     ]
+ *   }]
+ * };
+ *
+ * function MyGridApp() {
+ *   return (
+ *     <GridView
+ *       gridConfig={gridConfig}
+ *       resources={processedResources}
+ *       resolutionState={resolutionState}
+ *       resolutionActions={resolutionActions}
+ *       availableQualifiers={['language', 'territory', 'platform']}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @public
+ */
+export const GridView = ({ gridConfig, resources, resolutionState, resolutionActions, availableQualifiers = [], contextOptions, filterState, filterResult, showContextControls = true, showChangeControls = true, onMessage, className = '' }) => {
+    // Use filtered resources when filtering is active and successful
+    const isFilteringActive = filterState?.enabled && filterResult?.success === true;
+    const baseProcessedResources = isFilteringActive ? filterResult?.processedResources : resources;
+    // Select resources for this grid based on the configuration
+    const selectedResourceIds = useMemo(() => {
+        if (!baseProcessedResources || !gridConfig.resourceSelection) {
+            return [];
+        }
+        const selectionResult = selectResources(gridConfig.resourceSelection, baseProcessedResources);
+        if (selectionResult.isFailure()) {
+            onMessage?.('error', `Resource selection failed: ${selectionResult.message}`);
+            return [];
+        }
+        return selectionResult.value;
+    }, [baseProcessedResources, gridConfig.resourceSelection, onMessage]);
+    // Resolve all selected resources with current context
+    const resourceResolutions = useMemo(() => {
+        if (!resolutionState?.currentResolver || !selectedResourceIds.length) {
+            return new Map();
+        }
+        const resolutions = new Map();
+        const context = resolutionState.contextValues;
+        selectedResourceIds.forEach((resourceId) => {
+            try {
+                const resolver = resolutionState.currentResolver;
+                const resourceResult = resolver.resourceManager.getBuiltResource(resourceId);
+                if (resourceResult.isSuccess()) {
+                    const resource = resourceResult.value;
+                    // Resolve the resource with current context
+                    const resolveResult = resolver.resolveComposedResourceValue(resourceId);
+                    if (resolveResult.isSuccess()) {
+                        resolutions.set(resourceId, {
+                            success: true,
+                            resourceId,
+                            resource,
+                            composedValue: resolveResult.value
+                            // Note: For grid view, we mainly need the composed value
+                            // Full candidate analysis is available but not needed for basic grid display
+                        });
+                    }
+                    else {
+                        resolutions.set(resourceId, {
+                            success: false,
+                            resourceId,
+                            error: resolveResult.message
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                resolutions.set(resourceId, {
+                    success: false,
+                    resourceId,
+                    error: error instanceof Error ? error.message : 'Unknown resolution error'
+                });
+            }
+        });
+        return resolutions;
+    }, [selectedResourceIds, resolutionState?.currentResolver, resolutionState?.contextValues]);
+    // Handle context value changes using the shared pattern from ResolutionView
+    const handleQualifierChange = useCallback((qualifierName, value) => {
+        // Don't update context if this qualifier is host-managed
+        const qualifierOptions = contextOptions?.qualifierOptions?.[qualifierName];
+        const isHostManaged = qualifierOptions?.hostValue !== undefined;
+        if (!isHostManaged) {
+            resolutionActions?.updateContextValue(qualifierName, value);
+        }
+    }, [resolutionActions, contextOptions?.qualifierOptions]);
+    // Apply host-managed values when they change (same pattern as ResolutionView)
+    useEffect(() => {
+        if (!contextOptions?.hostManagedValues || !resolutionActions?.applyContext)
+            return;
+        resolutionActions.applyContext(contextOptions.hostManagedValues);
+    }, [contextOptions?.hostManagedValues, resolutionActions]);
+    // Determine which qualifiers to show
+    const visibleQualifiers = useMemo(() => {
+        if (!contextOptions?.qualifierOptions) {
+            return availableQualifiers;
+        }
+        return availableQualifiers.filter((qualifierName) => {
+            const options = contextOptions.qualifierOptions[qualifierName];
+            return options?.visible !== false;
+        });
+    }, [availableQualifiers, contextOptions?.qualifierOptions]);
+    // Get effective context values
+    const effectiveContextValues = useMemo(() => {
+        return resolutionState?.contextValues || {};
+    }, [resolutionState?.contextValues]);
+    if (!resources) {
+        return (React.createElement("div", { className: `p-6 ${className}` },
+            React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+                React.createElement(TableCellsIcon, { className: "h-8 w-8 text-blue-600" }),
+                React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, gridConfig.title || 'Resource Grid')),
+            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 Resources Loaded"),
+                    React.createElement("p", { className: "text-gray-600 mb-6" }, "Import resources first to view them in a grid format with customizable columns."),
+                    React.createElement("div", { className: "bg-blue-50 rounded-lg p-4" },
+                        React.createElement("p", { className: "text-sm text-blue-800" },
+                            React.createElement("strong", null, "Grid View:"),
+                            " Display multiple resources in a table format. Configure columns to extract and edit specific properties from resolved resources."))))));
+    }
+    return (React.createElement("div", { className: `p-6 ${className}` },
+        React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+            React.createElement(TableCellsIcon, { className: "h-8 w-8 text-blue-600" }),
+            React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, gridConfig.title || 'Resource Grid'),
+            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")),
+            React.createElement("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800" },
+                selectedResourceIds.length,
+                " resource",
+                selectedResourceIds.length !== 1 ? 's' : '')),
+        gridConfig.description && React.createElement("p", { className: "text-gray-600 mb-6" }, gridConfig.description),
+        React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            showContextControls && contextOptions?.showContextControls !== false && (React.createElement("div", { className: "mb-6" },
+                React.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-4" }, contextOptions?.contextPanelTitle || 'Context Configuration'),
+                React.createElement("div", { className: `bg-gray-50 rounded-lg p-4 ${contextOptions?.contextPanelClassName || ''}` },
+                    React.createElement("div", { className: "mb-4" },
+                        React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3" }, visibleQualifiers.map((qualifierName) => {
+                            const qualifierOptions = contextOptions?.qualifierOptions?.[qualifierName];
+                            const hostManagedValue = contextOptions?.hostManagedValues?.[qualifierName];
+                            const globalPlaceholder = typeof contextOptions?.globalPlaceholder === 'function'
+                                ? contextOptions.globalPlaceholder(qualifierName)
+                                : contextOptions?.globalPlaceholder;
+                            const mergedOptions = {
+                                ...qualifierOptions,
+                                hostValue: hostManagedValue !== undefined ? hostManagedValue : qualifierOptions?.hostValue
+                            };
+                            return (React.createElement(QualifierContextControl, { key: qualifierName, qualifierName: qualifierName, value: resolutionState?.pendingContextValues[qualifierName], onChange: handleQualifierChange, placeholder: globalPlaceholder || `Enter ${qualifierName} value`, resources: baseProcessedResources, options: mergedOptions }));
+                        }))),
+                    contextOptions?.showCurrentContext !== false && (React.createElement("div", { className: "flex items-center justify-between" },
+                        React.createElement("div", { className: "text-sm text-gray-600" },
+                            "Current:",
+                            ' ',
+                            Object.entries(effectiveContextValues)
+                                .map(([key, value]) => `${key}=${value === undefined ? '(undefined)' : value}`)
+                                .join(', ')),
+                        contextOptions?.showContextActions !== false && (React.createElement("div", { className: "flex items-center space-x-2" },
+                            React.createElement("button", { onClick: resolutionActions?.resetCache, className: "px-3 py-1 text-xs font-medium text-gray-600 bg-gray-100 rounded hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500", title: "Clear resolution cache" }, "Clear Cache"),
+                            React.createElement("button", { onClick: () => resolutionActions?.applyContext(), disabled: !resolutionState?.hasPendingChanges, className: `px-4 py-2 rounded-md text-sm font-medium ${resolutionState?.hasPendingChanges
+                                    ? 'bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500'
+                                    : 'bg-gray-300 text-gray-500 cursor-not-allowed'}` }, resolutionState?.hasPendingChanges
+                                ? 'Apply Changes'
+                                : resolutionState?.currentResolver
+                                    ? 'Context Applied'
+                                    : 'Apply Context')))))))),
+            React.createElement(ResourceGrid, { gridConfig: gridConfig, selectedResourceIds: selectedResourceIds, resourceResolutions: resourceResolutions, resolutionActions: resolutionActions, resolutionState: resolutionState, onMessage: onMessage }),
+            showChangeControls &&
+                (resolutionState?.hasUnsavedEdits || resolutionState?.hasPendingResourceChanges) && (React.createElement("div", { className: "mt-6" },
+                React.createElement(UnifiedChangeControls, { editCount: resolutionState?.editedResources?.size || 0, addCount: resolutionState?.pendingResources?.size || 0, deleteCount: resolutionState?.pendingResourceDeletions?.size || 0, isApplying: resolutionState?.isApplyingEdits, disabled: !resolutionState?.currentResolver, onApplyAll: async () => {
+                        await resolutionActions?.applyPendingResources();
+                    }, onDiscardAll: () => {
+                        resolutionActions?.discardEdits?.();
+                        resolutionActions?.discardPendingResources?.();
+                    } }))))));
+};
+export default GridView;
+//# sourceMappingURL=index.js.map

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

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useRef } from 'react';
 import { DocumentArrowUpIcon, CheckCircleIcon, ExclamationTriangleIcon, ArchiveBoxIcon, FolderOpenIcon } from '@heroicons/react/24/outline';
 import { Bundle, ZipArchive } from '@fgv/ts-res';
 import { isZipFile } from '../../../utils/zipLoader';
+import { useObservability } from '../../../contexts';
 /**
  * ImportView component for importing resource files, directories, and bundles.
  *
@@ -49,7 +50,9 @@ import { isZipFile } from '../../../utils/zipLoader';
  *
  * @public
  */
-export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes = ['.json', '.zip'], onMessage, className = '' }) => {
+export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFileTypes = ['.json', '.zip'], onMessage, className = '', importError }) => {
+    // Get observability context
+    const o11y = useObservability();
     const [isLoading, setIsLoading] = useState(false);
     const [importStatus, setImportStatus] = useState({
         hasImported: false,
@@ -65,7 +68,7 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
     const isFileSystemAccessSupported = 'showDirectoryPicker' in window || 'showOpenFilePicker' in window;
     // Helper function to process ZIP files using zip-archive packlet
     const processZipFile = useCallback(async (file) => {
-        console.log(`[ImportView] Processing ZIP file: ${file.name}`);
+        o11y.diag.info(`[ImportView] Processing ZIP file: ${file.name}`);
         onMessage?.('info', `Processing ZIP file: ${file.name}`);
         const loader = new ZipArchive.ZipArchiveLoader();
         const loadResult = await loader.loadFromFile(file, {
@@ -75,7 +78,7 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
             throw new Error(`Failed to load ZIP: ${loadResult.message}`);
         }
         const zipData = loadResult.value;
-        console.log(`[ImportView] ZIP loaded successfully:`, zipData);
+        o11y.diag.info(`[ImportView] ZIP loaded successfully:`, zipData);
         // Pass the ZIP data to the appropriate handler
         if (onZipImport) {
             // Pass both the directory/files and any configuration found
@@ -107,7 +110,7 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                 const file = files[0];
                 // Check if it's a ZIP file first
                 if (isZipFile(file.name)) {
-                    console.log(`[ImportView] ✅ ${file.name} detected as ZIP file`);
+                    o11y.diag.info(`[ImportView] ✅ ${file.name} detected as ZIP file`);
                     const zipData = await processZipFile(file);
                     setImportStatus({
                         hasImported: true,
@@ -137,10 +140,10 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                 let isCurrentFileBundle = false;
                 try {
                     const parsedData = JSON.parse(content);
-                    console.log(`[ImportView] Checking if ${file.name} is a bundle...`);
+                    o11y.diag.info(`[ImportView] Checking if ${file.name} is a bundle...`);
                     // Use BundleUtils for proper bundle detection
                     if (Bundle.BundleUtils.isBundleFile(parsedData)) {
-                        console.log(`[ImportView] ✅ ${file.name} detected as bundle file`);
+                        o11y.diag.info(`[ImportView] ✅ ${file.name} detected as bundle file`);
                         bundleFile = { ...importedFile, bundle: parsedData };
                         isCurrentFileBundle = true;
                     }
@@ -149,11 +152,11 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                         console.warn(`[ImportView] ⚠️ File ${file.name} appears to be a bundle by name but content doesn't match bundle structure`);
                     }
                     else {
-                        console.log(`[ImportView] ❌ ${file.name} is not a bundle file`);
+                        o11y.diag.info(`[ImportView] ❌ ${file.name} is not a bundle file`);
                     }
                 }
                 catch (parseError) {
-                    console.log(`[ImportView] ❌ ${file.name} failed JSON parsing:`, parseError);
+                    o11y.diag.info(`[ImportView] ❌ ${file.name} failed JSON parsing:`, parseError);
                     // Not valid JSON or not a bundle, treat as regular file
                 }
                 // Only add to regular files if this specific file is not a bundle
@@ -163,7 +166,7 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
             }
             // Process results
             if (bundleFile) {
-                console.log(`[ImportView] Processing bundle file: ${bundleFile.name}`, bundleFile.bundle);
+                o11y.diag.info(`[ImportView] Processing bundle file: ${bundleFile.name}`, bundleFile.bundle);
                 setImportStatus({
                     hasImported: true,
                     fileCount: 1,
@@ -173,11 +176,11 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                 });
                 onMessage?.('info', `Bundle file detected: ${bundleFile.name}`);
                 if (onBundleImport && bundleFile.bundle) {
-                    console.log(`[ImportView] Calling onBundleImport with bundle data`);
+                    o11y.diag.info(`[ImportView] Calling onBundleImport with bundle data`);
                     onBundleImport(bundleFile.bundle);
                 }
                 else {
-                    console.warn(`[ImportView] No bundle import handler or bundle data missing`);
+                    o11y.diag.warn(`[ImportView] No bundle import handler or bundle data missing`);
                 }
             }
             else if (importedFiles.length > 0) {
@@ -346,7 +349,7 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
             if (fileHandles.length === 1) {
                 const file = await fileHandles[0].getFile();
                 if (isZipFile(file.name)) {
-                    console.log(`[ImportView] Modern API - ✅ ${file.name} detected as ZIP file`);
+                    o11y.diag.info(`[ImportView] Modern API - ✅ ${file.name} detected as ZIP file`);
                     const zipData = await processZipFile(file);
                     setImportStatus({
                         hasImported: true,
@@ -379,10 +382,10 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                 let isCurrentFileBundle = false;
                 try {
                     const parsedData = JSON.parse(content);
-                    console.log(`[ImportView] Modern API - Checking if ${file.name} is a bundle...`);
+                    o11y.diag.info(`[ImportView] Modern API - Checking if ${file.name} is a bundle...`);
                     // Use BundleUtils for proper bundle detection
                     if (Bundle.BundleUtils.isBundleFile(parsedData)) {
-                        console.log(`[ImportView] Modern API - ✅ ${file.name} detected as bundle file`);
+                        o11y.diag.info(`[ImportView] Modern API - ✅ ${file.name} detected as bundle file`);
                         bundleFile = { ...importedFile, bundle: parsedData };
                         isCurrentFileBundle = true;
                     }
@@ -390,11 +393,11 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                         console.warn(`[ImportView] Modern API - ⚠️ File ${file.name} appears to be a bundle by name but content doesn't match bundle structure`);
                     }
                     else {
-                        console.log(`[ImportView] Modern API - ❌ ${file.name} is not a bundle file`);
+                        o11y.diag.info(`[ImportView] Modern API - ❌ ${file.name} is not a bundle file`);
                     }
                 }
                 catch (parseError) {
-                    console.log(`[ImportView] Modern API - ❌ ${file.name} failed JSON parsing:`, parseError);
+                    o11y.diag.info(`[ImportView] Modern API - ❌ ${file.name} failed JSON parsing:`, parseError);
                 }
                 // Only add to regular files if this specific file is not a bundle
                 if (!isCurrentFileBundle) {
@@ -513,13 +516,13 @@ export const ImportView = ({ onImport, onBundleImport, onZipImport, acceptedFile
                             React.createElement(ArchiveBoxIcon, { className: "w-5 h-5 text-purple-500" }),
                             React.createElement("span", { className: "text-sm text-purple-900" }, "ZIP archive processed")))),
                     importStatus.hasImported && (React.createElement("button", { onClick: handleReset, className: "mt-4 px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors" }, "Clear Import"))),
-                error && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-red-200 p-6" },
+                (error || importError) && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-red-200 p-6" },
                     React.createElement("div", { className: "flex items-start space-x-2" },
                         React.createElement(ExclamationTriangleIcon, { className: "w-5 h-5 text-red-600 mt-0.5" }),
                         React.createElement("div", { className: "text-sm text-red-800" },
                             React.createElement("p", { className: "font-medium" }, "Error"),
-                            React.createElement("p", null, error))))),
-                importStatus.hasImported && !error && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-green-200 p-6" },
+                            React.createElement("p", null, importError || error))))),
+                importStatus.hasImported && !error && !importError && (React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-green-200 p-6" },
                     React.createElement("div", { className: "flex items-start space-x-2" },
                         React.createElement(CheckCircleIcon, { className: "w-5 h-5 text-green-600 mt-0.5" }),
                         React.createElement("div", { className: "text-sm text-green-800" },

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

@@ -1,6 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { InformationCircleIcon, ExclamationTriangleIcon, XCircleIcon, CheckCircleIcon, ChevronUpIcon, ChevronDownIcon, FunnelIcon, DocumentDuplicateIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
+import { useObservability } from '../../../contexts';
 /**
  * MessagesWindow component for displaying and managing application messages.
  *
@@ -95,6 +96,8 @@ import { CheckIcon } from '@heroicons/react/24/solid';
  * @public
  */
 export const MessagesWindow = ({ messages, onClearMessages, className = '' }) => {
+    // Get observability context
+    const o11y = useObservability();
     const [isCollapsed, setIsCollapsed] = useState(false);
     const [filter, setFilter] = useState('all');
     const [searchTerm, setSearchTerm] = useState('');
@@ -119,7 +122,7 @@ export const MessagesWindow = ({ messages, onClearMessages, className = '' }) =>
             setTimeout(() => setCopySuccess(false), 2000);
         })
             .catch((err) => {
-            console.error('Failed to copy messages:', err);
+            o11y.diag.error('Failed to copy messages:', err);
         });
     };
     if (messages.length === 0) {

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

@@ -7,6 +7,7 @@ import { ResourcePickerOptionsControl } from '../../common/ResourcePickerOptions
 import { ResolutionContextOptionsControl } from '../../common/ResolutionContextOptionsControl';
 import { ResolutionResults } from '../../common/ResolutionResults';
 import { NewResourceModal } from './NewResourceModal';
+import { useObservability } from '../../../contexts';
 /**
  * ResolutionView component for resource resolution testing and editing.
  *
@@ -57,6 +58,8 @@ import { NewResourceModal } from './NewResourceModal';
  * @public
  */
 export const ResolutionView = ({ resources, filterState, filterResult, resolutionState, resolutionActions, availableQualifiers = [], resourceEditorFactory, onMessage, pickerOptions, pickerOptionsPresentation = 'hidden', contextOptions, lockedViewMode, sectionTitles, allowResourceCreation = false, defaultResourceType, resourceTypeFactory, onPendingResourcesApplied, showPendingResourcesInList = true, className = '' }) => {
+    // Get observability context
+    const o11y = useObservability();
     // State for picker options control
     const [currentPickerOptions, setCurrentPickerOptions] = useState(pickerOptions || {});
     // State for context options control
@@ -209,10 +212,10 @@ export const ResolutionView = ({ resources, filterState, filterResult, resolutio
                 ? currentContextOptions.hostManagedValues
                 : contextOptions?.hostManagedValues
         };
-        console.log('ResolutionView - effectiveContextOptions:', merged);
-        console.log('ResolutionView - contextOptions hostManagedValues:', contextOptions?.hostManagedValues);
-        console.log('ResolutionView - currentContextOptions hostManagedValues:', currentContextOptions?.hostManagedValues);
-        console.log('ResolutionView - final hostManagedValues:', merged.hostManagedValues);
+        o11y.diag.info('ResolutionView - effectiveContextOptions:', merged);
+        o11y.diag.info('ResolutionView - contextOptions hostManagedValues:', contextOptions?.hostManagedValues);
+        o11y.diag.info('ResolutionView - currentContextOptions hostManagedValues:', currentContextOptions?.hostManagedValues);
+        o11y.diag.info('ResolutionView - final hostManagedValues:', merged.hostManagedValues);
         return merged;
     }, [contextOptions, currentContextOptions]);
     // Handle context value changes using the shared component's callback pattern
@@ -304,7 +307,7 @@ export const ResolutionView = ({ resources, filterState, filterResult, resolutio
     }, [resolutionActions]);
     // Handle new resource creation
     const handleStartNewResource = useCallback(() => {
-        resolutionActions?.startNewResource(defaultResourceType);
+        resolutionActions?.startNewResource({ defaultTypeName: defaultResourceType });
         setShowNewResourceModal(true);
     }, [resolutionActions]);
     const handleCloseNewResourceModal = useCallback(() => {

package/lib/contexts/ObservabilityContext.d.ts

@@ -0,0 +1,85 @@
+import React, { ReactNode } from 'react';
+import * as ObservabilityTools from '../utils/observability';
+/**
+ * React context for observability infrastructure.
+ * Provides access to diagnostic and user loggers throughout the component tree.
+ * @public
+ */
+export declare const ObservabilityContext: React.Context<ObservabilityTools.IObservabilityContext>;
+/**
+ * Props for the ObservabilityProvider component.
+ * @public
+ */
+export interface ObservabilityProviderProps {
+    /** Child components that will have access to the observability context */
+    children: ReactNode;
+    /** Optional observability context to provide (defaults to console-based context) */
+    observabilityContext?: ObservabilityTools.IObservabilityContext;
+}
+/**
+ * Provider component that makes observability context available to all child components.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default console logging
+ * <ObservabilityProvider>
+ *   <MyApp />
+ * </ObservabilityProvider>
+ *
+ * // Custom observability context
+ * const customContext = ObservabilityTools.createConsoleObservabilityContext('debug', 'info');
+ * <ObservabilityProvider observabilityContext={customContext}>
+ *   <MyApp />
+ * </ObservabilityProvider>
+ *
+ * // With custom user logger that forwards to app's message system
+ * const contextWithMessages = new ObservabilityTools.ObservabilityContext(
+ *   new ObservabilityTools.ConsoleUserLogger('info'),
+ *   createCallbackUserLogger((type, message) => showToast(type, message))
+ * );
+ * <ObservabilityProvider observabilityContext={contextWithMessages}>
+ *   <MyApp />
+ * </ObservabilityProvider>
+ * ```
+ *
+ * @param props - Provider configuration
+ * @returns JSX provider element
+ * @public
+ */
+export declare const ObservabilityProvider: React.FC<ObservabilityProviderProps>;
+/**
+ * Hook to access the current observability context.
+ *
+ * Provides access to both diagnostic logging (for developers/debugging) and
+ * user logging (for user-facing messages and feedback).
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const observability = useObservability();
+ *
+ *   const handleAction = () => {
+ *     // Log diagnostic info for developers
+ *     observability.diag.info('User clicked action button');
+ *
+ *     try {
+ *       performAction();
+ *       // Show success message to user
+ *       observability.user.success('Action completed successfully!');
+ *     } catch (error) {
+ *       // Log error for debugging
+ *       observability.diag.error('Action failed:', error);
+ *       // Show error to user
+ *       observability.user.error('Action failed. Please try again.');
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleAction}>Perform Action</button>;
+ * }
+ * ```
+ *
+ * @returns The current observability context with diag and user loggers
+ * @public
+ */
+export declare const useObservability: () => ObservabilityTools.IObservabilityContext;
+//# sourceMappingURL=ObservabilityContext.d.ts.map

package/lib/contexts/ObservabilityContext.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright (c) 2025 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React, { createContext, useContext } from 'react';
+import * as ObservabilityTools from '../utils/observability';
+/**
+ * React context for observability infrastructure.
+ * Provides access to diagnostic and user loggers throughout the component tree.
+ * @public
+ */
+export const ObservabilityContext = createContext(ObservabilityTools.DefaultObservabilityContext);
+/**
+ * Provider component that makes observability context available to all child components.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default console logging
+ * <ObservabilityProvider>
+ *   <MyApp />
+ * </ObservabilityProvider>
+ *
+ * // Custom observability context
+ * const customContext = ObservabilityTools.createConsoleObservabilityContext('debug', 'info');
+ * <ObservabilityProvider observabilityContext={customContext}>
+ *   <MyApp />
+ * </ObservabilityProvider>
+ *
+ * // With custom user logger that forwards to app's message system
+ * const contextWithMessages = new ObservabilityTools.ObservabilityContext(
+ *   new ObservabilityTools.ConsoleUserLogger('info'),
+ *   createCallbackUserLogger((type, message) => showToast(type, message))
+ * );
+ * <ObservabilityProvider observabilityContext={contextWithMessages}>
+ *   <MyApp />
+ * </ObservabilityProvider>
+ * ```
+ *
+ * @param props - Provider configuration
+ * @returns JSX provider element
+ * @public
+ */
+export const ObservabilityProvider = ({ children, observabilityContext = ObservabilityTools.DefaultObservabilityContext }) => React.createElement(ObservabilityContext.Provider, { value: observabilityContext }, children);
+/**
+ * Hook to access the current observability context.
+ *
+ * Provides access to both diagnostic logging (for developers/debugging) and
+ * user logging (for user-facing messages and feedback).
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const observability = useObservability();
+ *
+ *   const handleAction = () => {
+ *     // Log diagnostic info for developers
+ *     observability.diag.info('User clicked action button');
+ *
+ *     try {
+ *       performAction();
+ *       // Show success message to user
+ *       observability.user.success('Action completed successfully!');
+ *     } catch (error) {
+ *       // Log error for debugging
+ *       observability.diag.error('Action failed:', error);
+ *       // Show error to user
+ *       observability.user.error('Action failed. Please try again.');
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleAction}>Perform Action</button>;
+ * }
+ * ```
+ *
+ * @returns The current observability context with diag and user loggers
+ * @public
+ */
+export const useObservability = () => {
+    return useContext(ObservabilityContext);
+};
+//# sourceMappingURL=ObservabilityContext.js.map

package/lib/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export { ObservabilityContext, ObservabilityProvider, useObservability, type ObservabilityProviderProps } from './ObservabilityContext';
+//# sourceMappingURL=index.d.ts.map

package/lib/contexts/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2025 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// Export observability context components and hooks
+export { ObservabilityContext, ObservabilityProvider, useObservability } from './ObservabilityContext';
+//# sourceMappingURL=index.js.map