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

package/README.md

@@ -1,6 +1,6 @@
 # @fgv/ts-res-ui-components
 
-React components for building user interfaces that work with the [ts-res](https://github.com/fgv/ts-res) multidimensional resource management library.
+React components for building user interfaces that work with the [ts-res](https://github.com/ErikFortune/fgv/tree/main/libraries/ts-res) multidimensional resource management library.
 
 ## Overview
 
@@ -19,20 +19,10 @@ This packlet is largely AI written, and it shows.
 - **📊 Visualization**: Multiple views for exploring resource structures and compiled output
 - **⚙️ Configuration**: Visual configuration management for qualifier types, qualifiers, and resource types
 - **🎛️ Host Control**: Programmatic control of qualifier values and resource types
-- **📁 File Handling**: Support for directory imports, ZIP files via ts-res zip-archive packlet, and bundle loading
+- **📁 File Handling**: Support for directory imports, ZIP files, and bundle loading
+- **🐛 Built-in Debugging**: Comprehensive logging and observability throughout operations
 - **🎨 Modern UI**: Built with Tailwind CSS and Heroicons for a clean, responsive interface
 
-### ZIP Archive Integration
-
-This library now uses the **ts-res zip-archive packlet** as the single source of truth for all ZIP operations, providing:
-
-- **Universal compatibility**: Works in both browser and Node.js environments using fflate
-- **Standardized format**: Common ZIP bundle format across all ts-res tools  
-- **Simplified API**: Direct integration with ts-res ZIP archive functionality
-- **Processing helpers**: Utilities to integrate ZIP data with ts-res-ui-components workflows
-
-The `ImportView` component handles ZIP files automatically, and the `ZipTools` namespace provides processing helpers for custom ZIP workflows.
-
 ## Installation
 
 ```bash
@@ -45,133 +35,62 @@ This library requires the following peer dependencies:
 
 ```json
 {
-  "@fgv/ts-res": "^5.0.0",
-  "@fgv/ts-utils": "^5.0.0",
-  "@fgv/ts-json-base": "^5.0.0",
-  "react": "^18.0.0",
-  "react-dom": "^18.0.0"
+  "@fgv/ts-res": ">=5.0.0",
+  "@fgv/ts-utils": ">=5.0.0", 
+  "@fgv/ts-json-base": ">=5.0.0",
+  "@fgv/ts-json": ">=5.0.0",
+  "react": ">=18.0.0",
+  "react-dom": ">=18.0.0"
 }
 ```
 
 ## Quick Start
 
-### Minimal Editing App (Unified Apply)
+### Basic Setup
 
 ```tsx
 import React from 'react';
-import { ResourceOrchestrator, ResolutionView } from '@fgv/ts-res-ui-components';
+import { ResourceOrchestrator, ObservabilityProvider } from '@fgv/ts-res-ui-components';
 
-export default function App() {
+function App() {
   return (
-    <ResourceOrchestrator>
-      {({ state, actions }) => (
-        <ResolutionView
-          resources={state.resources}
-          resolutionState={state.resolutionState}
-          resolutionActions={{
-            updateContextValue: actions.updateResolutionContext,
-            applyContext: actions.applyResolutionContext,
-            selectResource: actions.selectResourceForResolution,
-            setViewMode: actions.setResolutionViewMode,
-            resetCache: actions.resetResolutionCache,
-            saveEdit: actions.saveResourceEdit,
-            getEditedValue: actions.getEditedValue,
-            hasEdit: actions.hasResourceEdit,
-            clearEdits: actions.clearResourceEdits,
-            discardEdits: actions.discardResourceEdits,
-            startNewResource: actions.startNewResource,
-            updateNewResourceId: actions.updateNewResourceId,
-            selectResourceType: actions.selectResourceType,
-            saveNewResourceAsPending: actions.saveNewResourceAsPending,
-            cancelNewResource: actions.cancelNewResource,
-            removePendingResource: actions.removePendingResource,
-            markResourceForDeletion: actions.markResourceForDeletion,
-            applyPendingResources: actions.applyPendingResources,
-            discardPendingResources: actions.discardPendingResources
-          }}
-          allowResourceCreation
-          defaultResourceType="json"
-          showPendingResourcesInList
-          onMessage={actions.addMessage}
-        />
-      )}
-    </ResourceOrchestrator>
+    <ObservabilityProvider>
+      <ResourceOrchestrator />
+    </ObservabilityProvider>
   );
 }
 ```
 
-### Basic Usage with ResourceOrchestrator
-
-The `ResourceOrchestrator` component provides centralized state management for all ts-res UI functionality:
-
-```tsx
-import React from 'react';
-import { ResourceOrchestrator, ImportView, SourceView } from '@fgv/ts-res-ui-components';
-
-function App() {
-  return (
-    <ResourceOrchestrator>
-      {({ state, actions }) => (
-        <div className="min-h-screen bg-gray-50">
-          <div className="container mx-auto px-4 py-8">
-            <h1 className="text-3xl font-bold mb-8">Resource Manager</h1>
-            
-            {!state.processedResources ? (
-              <ImportView
-                onImport={actions.importDirectory}
-                onBundleImport={actions.importBundle}
-                onZipImport={(zipData, config) => {
-                  if (config) actions.applyConfiguration(config);
-                  if (zipData.directory) actions.importDirectory(zipData.directory);
-                  else if (zipData.files?.length) actions.importFiles(zipData.files);
-                }}
-              />
-            ) : (
-              <SourceView
-                resources={state.processedResources}
-                onExport={actions.exportData}
-              />
-            )}
-          </div>
-        </div>
-      )}
-    </ResourceOrchestrator>
-  );
-}
+The `ResourceOrchestrator` provides a complete resource management interface with import, filtering, resolution, and editing capabilities. The `ObservabilityProvider` enables built-in logging and debugging features throughout the component tree.
 
-export default App;
-```
+## Core Concepts
 
-### Using Individual Hooks
+### Resource Orchestrator
+The central component that coordinates all resource operations. It manages the complete workflow:
 
-For more granular control, you can use individual hooks:
+- **Configuration Management**: Set up qualifier types, qualifiers, and resource types
+- **Resource Import**: Load resources from files, ZIP archives, or bundles
+- **Resource Filtering**: Filter resources by context to create deployment subsets
+- **Resource Resolution**: Test how resources resolve for different contexts
+- **Resource Editing**: Create and modify resources with real-time validation
 
-```tsx
-import React from 'react';
-import { useResourceData, SourceView } from '@fgv/ts-res-ui-components';
+### Component Architecture
+The library is organized into specialized namespaces, each containing related components and utilities:
 
-function MyResourceViewer() {
-  const { state, actions } = useResourceData();
+- **FilterTools**: Resource filtering with context-aware capabilities
+- **ResolutionTools**: Resource resolution testing and editing
+- **ConfigurationTools**: System configuration management
+- **GridTools**: Advanced data grid for tabular resource management
+- **ImportTools**: File and archive import capabilities
+- **ObservabilityTools**: Logging and debugging infrastructure
 
-  const handleFileImport = async (files: File[]) => {
-    const importedFiles = await processFiles(files); // Your file processing logic
-    await actions.processFiles(importedFiles);
-  };
+### Built-in Observability
+All operations include comprehensive logging for debugging and user feedback:
 
-  return (
-    <div>
-      {state.isProcessing && <div>Processing...</div>}
-      {state.error && <div className="error">{state.error}</div>}
-      {state.processedResources && (
-        <SourceView 
-          resources={state.processedResources}
-          onExport={(data) => console.log('Export:', data)}
-        />
-      )}
-    </div>
-  );
-}
-```
+- **Diagnostic Logging**: Developer-focused information for troubleshooting
+- **User Messaging**: User-friendly success/error notifications
+- **Configurable Loggers**: Console output for development, silent for production
+- **React Integration**: Observability context available throughout the component tree
 
 ## Architecture
 
@@ -515,47 +434,128 @@ This is particularly useful when:
 
 #### Resource Creation
 
-ResolutionView now supports creating new resources directly in the UI with a pending/apply workflow similar to context management:
+ResolutionView supports both atomic and sequential resource creation workflows:
+
+##### Atomic Resource Creation (Recommended)
+
+Use the new `createPendingResource` API for simple, robust resource creation:
+
+```tsx
+// Single atomic call to create a pending resource
+const result = await actions.createPendingResource({
+  id: 'platform.languages.az-AZ',           // Full resource ID (required)
+  resourceTypeName: 'json',                 // Resource type (required)
+  json: { text: 'Welcome', locale: 'az-AZ' } // JSON content (optional - uses base template if omitted)
+});
+
+if (result.isSuccess()) {
+  console.log('Resource created and added to pending resources');
+  // Apply all pending changes when ready
+  await actions.applyPendingResources();
+} else {
+  console.error('Failed to create resource:', result.message);
+}
+
+// Example: Creating a resource with base template (no JSON content)
+const baseTemplateResult = await actions.createPendingResource({
+  id: 'platform.languages.fr-FR',
+  resourceTypeName: 'json'
+  // json omitted - resource type will provide base template (typically {})
+});
+
+if (baseTemplateResult.isSuccess()) {
+  console.log('Resource created using base template from resource type');
+  // You can then edit the resource using the UI or saveEdit()
+}
+```
+
+**Benefits of the atomic API:**
+- **Single Operation**: No multi-step sequencing required
+- **Better Error Handling**: Returns `Result<void>` with detailed error messages
+- **Validation**: Comprehensive validation of ID, type, and JSON content
+- **Safe**: Prevents temporary IDs and ensures uniqueness
+- **Context Stamping**: Automatically applies current context as conditions
+
+##### Sequential Resource Creation (Legacy)
+
+The traditional step-by-step workflow is still available:
+
+```tsx
+// Step 1: Start a new resource
+const startResult = actions.startNewResource({ defaultTypeName: 'json' });
+if (startResult.isFailure()) {
+  console.error('Failed to start resource:', startResult.message);
+  return;
+}
+
+// Step 2: Set the final resource ID
+const idResult = actions.updateNewResourceId('platform.languages.az-AZ');
+if (idResult.isFailure()) {
+  console.error('Invalid resource ID:', idResult.message);
+  return;
+}
+
+// Step 3: Update JSON content (optional)
+const jsonResult = actions.updateNewResourceJson({ 
+  text: 'Welcome', 
+  locale: 'az-AZ' 
+});
+if (jsonResult.isFailure()) {
+  console.error('Invalid JSON:', jsonResult.message);
+  return;
+}
+
+// Step 4: Save as pending
+const saveResult = actions.saveNewResourceAsPending();
+if (saveResult.isFailure()) {
+  console.error('Failed to save:', saveResult.message);
+  return;
+}
+
+// Step 5: Apply all pending changes
+await actions.applyPendingResources();
+```
+
+**Enhanced Action Return Values:**
+
+All resource creation actions now return `Result<T>` objects following the standard Result pattern:
+- Use `.isSuccess()` and `.isFailure()` to check status
+- Access success values with `.value` property (contains `draft`/`pendingResources` and `diagnostics`)
+- Access error messages with `.message` property
+- Multiline error messages include diagnostic information
+
+```tsx
+// Example: Working with Result values
+const startResult = actions.startNewResource({ defaultTypeName: 'json' });
+if (startResult.isSuccess()) {
+  console.log('Started draft:', startResult.value.draft);
+  console.log('Diagnostics:', startResult.value.diagnostics);
+} else {
+  console.error('Error:', startResult.message); // May include diagnostics
+}
+```
+
+##### UI Integration Example
 
 ```tsx
-// Basic resource creation - user selects resource type
 <ResolutionView
   resources={state.processedResources}
   resolutionState={resolutionState}
   resolutionActions={resolutionActions}
   allowResourceCreation={true}
+  defaultResourceType="json"  // Optional: Host-controlled resource type
+  showPendingResourcesInList={true}  // Show pending resources with visual distinction
   onPendingResourcesApplied={(added, deleted) => {
+    console.log(`Applied ${added.length} additions, ${deleted.length} deletions`);
     // Rebuild resource manager with new resources
     const updatedResources = rebuildWithResources(added, deleted);
     setState({ processedResources: updatedResources });
   }}
 />
-
-// Host-controlled resource type
-<ResolutionView
-  resources={state.processedResources}
-  resolutionState={resolutionState}
-  resolutionActions={resolutionActions}
-  allowResourceCreation={true}
-  defaultResourceType="json"  // Type selector hidden, always creates JSON resources
-  onPendingResourcesApplied={(added, deleted) => {
-    console.log(`Applied ${added.length} additions, ${deleted.length} deletions`);
-  }}
-/>
-
-// With custom resource types
-<ResolutionView
-  resources={state.processedResources}
-  resolutionState={resolutionState}
-  resolutionActions={resolutionActions}
-  allowResourceCreation={true}
-  resourceTypeFactory={[customType1, customType2]}  // Provide custom resource types
-  showPendingResourcesInList={true}  // Show pending resources with visual distinction
-/>
 ```
 
 **Unified Change Workflow (Edits, Additions, Deletions):**
-1. Click "Add Resource" in the picker header to create new resources (if enabled)
+1. Use `createPendingResource()` or the traditional UI workflow to create resources
 2. Edit existing resources from the results pane using the JSON or custom editors
 3. Mark resources for deletion where supported
 4. All changes appear in a single "Pending Changes" bar with counts (edits/additions/deletions)
@@ -563,12 +563,70 @@ ResolutionView now supports creating new resources directly in the UI with a pen
 6. Or click "Discard Changes" to remove all pending changes
 
 **Key features:**
+- **Atomic Creation**: Single API call creates complete resources
+- **Enhanced Error Handling**: Detailed validation and error messages
 - **Template-based creation**: Resource types provide default templates for new resources
 - **Pending workflow**: Resources aren't added immediately, allowing review before applying
 - **Host control**: Can specify a default resource type to hide the type selector
 - **Batch operations**: Create multiple resources before applying
 - **Visual feedback**: Pending resources shown with distinct styling
-- **Validation**: Resource IDs are validated for uniqueness
+- **ID Validation**: Comprehensive resource ID validation and uniqueness checking
+
+##### Resource ID Requirements
+
+**IMPORTANT**: All pending resources use **full resource IDs** as keys, never leaf IDs:
+
+```tsx
+// ✅ Correct: Full resource IDs
+createPendingResource({
+  id: 'platform.languages.az-AZ',    // Full path
+  resourceTypeName: 'json',
+  json: { text: 'Azərbaycan dili' }
+});
+
+// ❌ Wrong: Leaf IDs
+createPendingResource({
+  id: 'az-AZ',                       // Just the leaf - will be rejected
+  resourceTypeName: 'json', 
+  json: { text: 'Azərbaycan dili' }
+});
+```
+
+##### Helper Functions for Pending Resources
+
+```tsx
+import { ResolutionTools } from '@fgv/ts-res-ui-components';
+
+// Get pending resources by type
+const jsonResources = ResolutionTools.getPendingAdditionsByType(
+  resolutionState.pendingResources, 
+  'json'
+);
+
+// Check if a resource is pending
+const isPending = ResolutionTools.isPendingAddition(
+  'platform.languages.az-AZ', 
+  resolutionState.pendingResources
+);
+
+// Work with resource IDs
+const leafIdResult = ResolutionTools.deriveLeafId('platform.languages.az-AZ');
+console.log(leafIdResult.value); // 'az-AZ'
+
+const fullIdResult = ResolutionTools.deriveFullId('platform.languages', 'az-AZ');
+console.log(fullIdResult.value); // 'platform.languages.az-AZ'
+
+// Get statistics
+const stats = ResolutionTools.getPendingResourceStats(resolutionState.pendingResources);
+console.log(`${stats.totalCount} pending resources`);
+console.log(`Types: ${Object.keys(stats.byType).join(', ')}`);
+
+// Validate pending resource keys (diagnostic)
+const validation = ResolutionTools.validatePendingResourceKeys(resolutionState.pendingResources);
+if (validation.isFailure()) {
+  console.error('Key validation failed:', validation.message);
+}
+```
 
 #### Custom Resource Editors
 
@@ -1254,6 +1312,181 @@ All components accept a `className` prop for custom styling:
 />
 ```
 
+## Detailed Examples
+
+### Canonical New Resource Flow
+
+The recommended approach for programmatic resource creation:
+
+```tsx
+import { ResolutionTools } from '@fgv/ts-res-ui-components';
+
+// Single atomic operation (recommended)
+async function createResourceAtomic(actions) {
+  const result = await actions.createPendingResource({
+    id: 'platform.languages.az-AZ',
+    resourceTypeName: 'json',
+    json: { text: 'Welcome', locale: 'az-AZ' }
+  });
+
+  if (result.isSuccess()) {
+    console.log('Resource created successfully');
+    await actions.applyPendingResources();
+  } else {
+    console.error('Creation failed:', result.message);
+  }
+}
+
+// Step-by-step workflow (if needed)
+function createResourceStepByStep(actions) {
+  // 1) Start new resource
+  const startResult = actions.startNewResource({ defaultTypeName: 'json' });
+  if (!startResult.success) return;
+
+  // 2) Update resource ID  
+  const idResult = actions.updateNewResourceId('platform.languages.az-AZ');
+  if (!idResult.success) return;
+
+  // 3) Select resource type (if step 1 didn't set it)
+  const typeResult = actions.selectResourceType('json');
+  if (!typeResult.success) return;
+
+  // 4) Update JSON content (optional, recommended)
+  const jsonResult = actions.updateNewResourceJson({ 
+    text: 'Welcome', 
+    locale: 'az-AZ' 
+  });
+  if (!jsonResult.success) return;
+
+  // 5) Save as pending
+  const saveResult = actions.saveNewResourceAsPending();
+  if (!saveResult.success) return;
+
+  // Note: Do NOT call saveResourceEdit for brand-new resources
+}
+```
+
+### Minimal Editing App (Unified Apply)
+
+```tsx
+import React from 'react';
+import { ResourceOrchestrator, ResolutionView } from '@fgv/ts-res-ui-components';
+
+export default function App() {
+  return (
+    <ResourceOrchestrator>
+      {({ state, actions }) => (
+        <ResolutionView
+          resources={state.resources}
+          resolutionState={state.resolutionState}
+          resolutionActions={{
+            updateContextValue: actions.updateResolutionContext,
+            applyContext: actions.applyResolutionContext,
+            selectResource: actions.selectResourceForResolution,
+            setViewMode: actions.setResolutionViewMode,
+            resetCache: actions.resetResolutionCache,
+            saveEdit: actions.saveResourceEdit,
+            getEditedValue: actions.getEditedValue,
+            hasEdit: actions.hasResourceEdit,
+            clearEdits: actions.clearResourceEdits,
+            discardEdits: actions.discardResourceEdits,
+            // Enhanced resource creation actions with atomic API
+            createPendingResource: actions.createPendingResource,
+            startNewResource: actions.startNewResource,
+            updateNewResourceId: actions.updateNewResourceId,
+            selectResourceType: actions.selectResourceType,
+            updateNewResourceJson: actions.updateNewResourceJson,
+            saveNewResourceAsPending: actions.saveNewResourceAsPending,
+            cancelNewResource: actions.cancelNewResource,
+            removePendingResource: actions.removePendingResource,
+            markResourceForDeletion: actions.markResourceForDeletion,
+            applyPendingResources: actions.applyPendingResources,
+            discardPendingResources: actions.discardPendingResources
+          }}
+          allowResourceCreation
+          defaultResourceType="json"
+          showPendingResourcesInList
+          onMessage={actions.addMessage}
+        />
+      )}
+    </ResourceOrchestrator>
+  );
+}
+```
+
+### Basic Usage with ResourceOrchestrator
+
+The `ResourceOrchestrator` component provides centralized state management for all ts-res UI functionality:
+
+```tsx
+import React from 'react';
+import { ResourceOrchestrator, ImportView, SourceView } from '@fgv/ts-res-ui-components';
+
+function App() {
+  return (
+    <ResourceOrchestrator>
+      {({ state, actions }) => (
+        <div className="min-h-screen bg-gray-50">
+          <div className="container mx-auto px-4 py-8">
+            <h1 className="text-3xl font-bold mb-8">Resource Manager</h1>
+            
+            {!state.processedResources ? (
+              <ImportView
+                onImport={actions.importDirectory}
+                onBundleImport={actions.importBundle}
+                onZipImport={(zipData, config) => {
+                  if (config) actions.applyConfiguration(config);
+                  if (zipData.directory) actions.importDirectory(zipData.directory);
+                  else if (zipData.files?.length) actions.importFiles(zipData.files);
+                }}
+              />
+            ) : (
+              <SourceView
+                resources={state.processedResources}
+                onExport={actions.exportData}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </ResourceOrchestrator>
+  );
+}
+
+export default App;
+```
+
+### Using Individual Hooks
+
+For more granular control, you can use individual hooks:
+
+```tsx
+import React from 'react';
+import { useResourceData, SourceView } from '@fgv/ts-res-ui-components';
+
+function MyResourceViewer() {
+  const { state, actions } = useResourceData();
+
+  const handleFileImport = async (files: File[]) => {
+    const importedFiles = await processFiles(files); // Your file processing logic
+    await actions.processFiles(importedFiles);
+  };
+
+  return (
+    <div>
+      {state.isProcessing && <div>Processing...</div>}
+      {state.error && <div className="error">{state.error}</div>}
+      {state.processedResources && (
+        <SourceView 
+          resources={state.processedResources}
+          onExport={(data) => console.log('Export:', data)}
+        />
+      )}
+    </div>
+  );
+}
+```
+
 ## Advanced Usage
 
 ### Custom Resource Processing
@@ -1349,21 +1582,25 @@ For better organization and discoverability, utility functions are organized int
 
 ```tsx
 import { 
-  FilterTools,     // FilterView + filtering utilities
-  ResolutionTools, // ResolutionView + resolution utilities  
+  FilterTools,        // FilterView + filtering utilities
+  ResolutionTools,    // ResolutionView + resolution utilities  
   ConfigurationTools, // ConfigurationView + configuration utilities
-  TsResTools,      // SourceView, CompiledView + ts-res utilities
-  ViewTools,       // MessagesWindow + view state utilities
-  ZipTools,        // ImportView + ZIP processing helpers
-  FileTools        // File processing utilities
+  TsResTools,         // SourceView, CompiledView + ts-res utilities
+  ViewStateTools,     // MessagesWindow + view state utilities
+  ZipTools,           // ImportView + ZIP processing helpers
+  ObservabilityTools, // Observability context and loggers
+  GridTools,          // GridView + data grid utilities
+  PickerTools,        // ResourcePicker + picker utilities
+  ImportTools         // Import utilities and types
 } from '@fgv/ts-res-ui-components';
 
 // Use view components from namespaces
 <FilterTools.FilterView {...filterProps} />
 <ResolutionTools.ResolutionView {...resolutionProps} />
-<ViewTools.MessagesWindow {...messageProps} />
+<ViewStateTools.MessagesWindow {...messageProps} />
 <TsResTools.SourceView {...sourceProps} />
 <ZipTools.ImportView {...importProps} />
+<GridTools.GridView {...gridProps} />
 
 // Use utility functions from namespaces  
 const hasFilters = FilterTools.hasFilterValues(filterState.values);
@@ -1372,6 +1609,15 @@ const system = await TsResTools.createTsResSystemFromConfig(config);
 
 // ZIP processing helpers for ts-res-ui-components integration
 const processResult = await ZipTools.processZipLoadResult(zipData, config);
+
+// Observability context and loggers
+const consoleContext = ObservabilityTools.createConsoleObservabilityContext('debug', 'info');
+const noOpContext = ObservabilityTools.createNoOpObservabilityContext();
+const customLogger = new ObservabilityTools.ConsoleUserLogger('info');
+
+// Grid utilities and selectors
+const gridSelector = new GridTools.ResourceSelector();
+const validation = GridTools.validateCellValue(value, rules);
 ```
 
 ### Namespace Contents
@@ -1596,6 +1842,6 @@ The API documentation includes detailed examples, usage patterns, and type infor
 For questions and support, please:
 
 1. Check the [API documentation](./docs/index.md) for detailed component usage
-2. Review the [ts-res documentation](https://docs.ts-res.dev) for core concepts
-3. Search [existing issues](https://github.com/fgv/ts-res/issues)
-4. Create a [new issue](https://github.com/fgv/ts-res/issues/new)
+2. Review the [ts-res documentation](https://github.com/ErikFortune/fgv/tree/main/libraries/ts-res) for core concepts
+3. Search [existing issues](https://github.com/ErikFortune/fgv/issues)
+4. Create a [new issue](https://github.com/ErikFortune/fgv/issues/new)

package/config/jest.setup.js

@@ -53,6 +53,16 @@ global.URL = {
 // Extend jest matchers (toBeInTheDocument, etc.)
 require('@testing-library/jest-dom');
 
+// Suppress console output in tests by providing a no-op logger
+// This affects both direct console calls and components that use logger dependency injection
+global.testLogger = () => {}; // No-op logger for tests
+global.console = {
+  ...console,
+  log: global.testLogger,
+  warn: global.testLogger,
+  error: console.error // Keep error for actual test failures
+};
+
 // Mock document methods for file export
 global.document = {
   createElement: jest.fn(() => ({