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

package/README.md

@@ -0,0 +1,18 @@
+# Name
+### @fgv/ts-res-ui-components
+
+# Synopsis
+Reusable React components for ts-res resource visualization and management
+
+# Description
+
+# Example
+
+# Install:
+`npm install @fgv/ts-res-ui-components`
+
+# Test:
+`npm test`
+
+#License:
+MIT

package/REFACTORING_PLAN.md

@@ -0,0 +1,171 @@
+# ts-res-ui-components Refactoring Plan
+
+## Problem Analysis
+
+### Current Issues
+The ts-res-ui-components library has accumulated technical debt through attempts to optimize and short-circuit the proper data flow:
+- Widespread use of `any` types (30+ instances in production code)
+- Unsafe type assertions and casts
+- Complex branching logic to handle special cases
+- Polymorphic handling where ResourceManager sometimes contains ResourceManagerBuilder and sometimes CompiledResourceCollection
+- The orchestrator contains business logic instead of pure coordination
+
+### Root Cause
+The bundle import feature created a special case that broke the clean flow. Instead of normalizing bundles into the standard pipeline, the code tried to inject CompiledResourceCollection directly into the middle of the flow, leading to type confusion and complex branching.
+
+## Architecture Overview
+
+### Core Principle: One Clean Flow
+All operations must follow the same pipeline, with no shortcuts or special cases:
+```
+Configuration → ResourceManagerBuilder → [Filter?] → Filtered RMB → CompiledCollection → Resolver
+```
+
+### Fundamental Entities
+
+1. **Configuration** (`ISystemConfiguration`)
+   - Must exist first
+   - Defines qualifier types, qualifiers, and resource types
+   - Controls how imports are processed
+
+2. **Primary ResourceManagerBuilder**
+   - The source of truth for all resources
+   - Created by importing files using the configuration
+   - All modifications create clones, never mutate
+
+3. **Filter Context** (`Map<QualifierName, string | undefined>`)
+   - Optional qualifier values for filtering
+   - Reduces the resource space
+   - Creates a subset of resources/candidates
+
+4. **Filtered ResourceManagerBuilder**
+   - Clone of primary with filter parameters applied
+   - If no filter, this is just a reference to primary (no clone needed)
+   - Still a ResourceManagerBuilder, maintaining type consistency
+
+### Derived Entities
+
+5. **CompiledResourceCollection**
+   - Always derived from the current ResourceManagerBuilder (filtered or primary)
+   - Pre-compiled for efficient runtime access
+   - Regenerated when the source ResourceManagerBuilder changes
+
+6. **ResourceResolver**
+   - Created from ResourceManagerBuilder + Resolution Context
+   - Resolution Context is a DIFFERENT `Map<QualifierName, string | undefined>` than Filter Context
+   - Resolves resources based on the resolution context
+
+### Key Insight: Two Different Contexts
+- **Filter Context**: Reduces the resource space (affects what resources/candidates exist)
+- **Resolution Context**: Resolves within that space (determines which candidate wins)
+
+## Import Normalization
+
+All import types must produce a ResourceManagerBuilder:
+
+1. **Configuration Import**
+   - Sets up the system configuration
+   - Prerequisite for all other imports
+
+2. **Resource Files/Directories**
+   - Import using configuration → ResourceManagerBuilder
+
+3. **Bundle Import** (the fix)
+   - Extract configuration
+   - Extract CompiledResourceCollection
+   - **Reconstruct ResourceManagerBuilder from CompiledResourceCollection**
+   - Continue with normal flow
+
+4. **ZIP File Import**
+   - Extract configuration
+   - Extract resource files
+   - Import files using configuration → ResourceManagerBuilder
+
+## Operations via Cloning
+
+All modifications create new instances via cloning:
+
+1. **Filtering**
+   - Clone primary ResourceManagerBuilder
+   - Apply filter parameters
+   - Produce filtered ResourceManagerBuilder
+
+2. **Apply Edits** (from Resolution Viewer)
+   - Clone current ResourceManagerBuilder
+   - Pass in new conditions/values
+   - Let ResourceManagerBuilder do the work
+   - Produce updated ResourceManagerBuilder
+
+3. **No Filter Case**
+   - Filtered ResourceManagerBuilder = reference to Primary
+   - No cloning needed, just point to primary
+
+## Implementation Guidelines
+
+### Result Pattern Usage
+- **Follow RESULT_PATTERN_GUIDE.md** in the root directory for all Result pattern usage
+- Avoid intermediate result variables when possible
+- Use `.onSuccess()` and `.onFailure()` for chaining operations
+- Use `.orDefault()` for acceptable undefined/default values
+- Use `.orThrow()` only in setup/test code, not production paths
+- Use `captureResult` around code that might throw to convert to Results
+
+### Type Safety and Validation
+- **NEVER use unsafe casts**, especially for structs
+- Use existing Converters or Validators from ts-res/ts-utils:
+  - Converters: Transform and construct new objects (for simple types, primitives)
+  - Validators: Validate existing objects without construction (for complex objects, class instances)
+- If no converter/validator exists for a type, **create one** rather than using unsafe casts
+- Example: Instead of `as ResourceType`, use `Convert.resourceType(value)` or create a new converter
+
+## Implementation Plan
+
+### Phase 1: Type System Cleanup
+- Define proper TypeScript interfaces for all entities
+- Replace all `any` types with specific types (using JsonValue for JSON data)
+- Create validators/converters for new types as needed
+- Establish clear type boundaries between components
+- Import proper types from ts-res (QualifierTypes, Qualifiers, ResourceTypes, etc.)
+
+### Phase 2: Import Flow Normalization
+- Refactor bundle import to reconstruct ResourceManagerBuilder
+- Remove special case handling for bundles
+- Ensure all import paths produce ResourceManagerBuilder
+- Eliminate polymorphic resource manager handling
+
+### Phase 3: Clone-Based Operations
+- Implement clone-based filtering
+- Implement clone-based edit application
+- Ensure primary ResourceManagerBuilder is never mutated
+- Remove complex branching logic
+
+### Phase 4: Orchestrator Simplification
+- Extract business logic to dedicated services
+- Make orchestrator a pure coordination layer
+- Simplify state management
+- Remove redundant effects and callbacks
+
+### Phase 5: Testing & Validation
+- Test each import type follows the same flow
+- Verify filtering and editing via cloning
+- Ensure type safety throughout
+- Validate no regressions in functionality
+
+## Success Criteria
+
+1. **Zero `any` types** in production code
+2. **Single flow path** for all operations
+3. **Type-safe** throughout with proper interfaces
+4. **No special cases** or branching for different import types
+5. **Pure orchestrator** that only coordinates, no business logic
+6. **Immutable operations** via cloning, no mutations
+7. **Clear separation** between Filter Context and Resolution Context
+
+## Expected Benefits
+
+- **Type Safety**: Full TypeScript benefits with compile-time checking
+- **Maintainability**: Clear, predictable flow without special cases
+- **Debuggability**: Linear flow easier to trace and debug
+- **Extensibility**: New features follow established patterns
+- **Performance**: Simpler code paths, less branching
+- **Reliability**: Fewer edge cases and error conditions

package/config/jest.config.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@rushstack/heft-web-rig/profiles/library/config/jest.config.json",
+  "coveragePathIgnorePatterns": ["index.js", "public.js", "internal.js"],
+  "coverageThreshold": {
+    "global": {
+      "branches": 0,
+      "functions": 0,
+      "lines": 0,
+      "statements": 0
+    }
+  },
+  "collectCoverage": true,
+  "coverageReporters": ["text", "lcov", "html"],
+  "setupFilesAfterEnv": ["<rootDir>/config/jest.setup.js"],
+  "testEnvironment": "jsdom"
+}

package/config/jest.setup.js

@@ -0,0 +1,64 @@
+// Setup file for Jest tests
+// Required for ts-utils which uses TextEncoder/TextDecoder
+
+// Polyfill TextEncoder and TextDecoder for Node.js environment
+if (typeof TextEncoder === 'undefined') {
+  const { TextEncoder, TextDecoder } = require('util');
+  global.TextEncoder = TextEncoder;
+  global.TextDecoder = TextDecoder;
+}
+
+// Mock File constructor for browser file operations
+global.File = class MockFile {
+  constructor(bits, name, options = {}) {
+    this.bits = bits;
+    this.name = name;
+    this.type = options.type || '';
+    this.webkitRelativePath = options.webkitRelativePath || '';
+  }
+};
+
+// Mock FileReader for file reading operations
+global.FileReader = class MockFileReader {
+  constructor() {
+    this.onload = null;
+    this.onerror = null;
+    this.result = null;
+  }
+
+  readAsText(file) {
+    setTimeout(() => {
+      if (this.onload) {
+        this.result = file.bits ? file.bits[0] : '';
+        this.onload({ target: { result: this.result } });
+      }
+    }, 0);
+  }
+};
+
+// Mock Blob for export operations
+global.Blob = class MockBlob {
+  constructor(bits, options = {}) {
+    this.bits = bits;
+    this.type = options.type || '';
+  }
+};
+
+// Mock URL for createObjectURL/revokeObjectURL
+global.URL = {
+  createObjectURL: jest.fn(() => 'mock-blob-url'),
+  revokeObjectURL: jest.fn()
+};
+
+// Mock document methods for file export
+global.document = {
+  createElement: jest.fn(() => ({
+    href: '',
+    download: '',
+    click: jest.fn()
+  })),
+  body: {
+    appendChild: jest.fn(),
+    removeChild: jest.fn()
+  }
+};

package/config/rig.json

@@ -0,0 +1,16 @@
+// The "rig.json" file directs tools to look for their config files in an external package.
+// Documentation for this system: https://www.npmjs.com/package/@rushstack/rig-package
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  /**
+   * (Required) The name of the rig package to inherit from.
+   * It should be an NPM package name with the "-rig" suffix.
+   */
+  "rigPackageName": "@rushstack/heft-web-rig",
+  /**
+   * (Optional) Selects a config profile from the rig package.  The name must consist of
+   * lowercase alphanumeric words separated by hyphens, for example "sample-profile".
+   * If omitted, then the "default" profile will be used."
+   */
+  "rigProfile": "library"
+}

package/lib/components/common/QualifierContextControl.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ProcessedResources } from '../../types';
+export interface QualifierContextControlProps {
+    qualifierName: string;
+    value: string | undefined;
+    onChange: (qualifierName: string, value: string | undefined) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    resources?: ProcessedResources | null;
+    className?: string;
+}
+export declare const QualifierContextControl: React.FC<QualifierContextControlProps>;
+export default QualifierContextControl;
+//# sourceMappingURL=QualifierContextControl.d.ts.map

package/lib/components/common/QualifierContextControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualifierContextControl.d.ts","sourceRoot":"","sources":["../../../src/components/common/QualifierContextControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,4BAA4B;IAC3C,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAuI1E,CAAC;AAEF,eAAe,uBAAuB,CAAC"}

package/lib/components/common/QualifierContextControl.js

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+export const QualifierContextControl = ({ qualifierName, value, onChange, disabled = false, placeholder, resources, className = '' }) => {
+    // Extract qualifier type information from system configuration
+    const qualifierInfo = useMemo(() => {
+        if (!resources?.system?.qualifiers) {
+            return { hasEnumeratedValues: false, enumeratedValues: [] };
+        }
+        try {
+            // Get qualifier declaration
+            const qualifierResult = resources.system.qualifiers.validating.get(qualifierName);
+            if (!qualifierResult.isSuccess()) {
+                return { hasEnumeratedValues: false, enumeratedValues: [] };
+            }
+            const qualifier = qualifierResult.value;
+            // Access the instantiated qualifier type
+            if (qualifier.type) {
+                const qualifierType = qualifier.type;
+                // Use type assertion to access properties that may exist on specific subtypes
+                const qtAny = qualifierType;
+                const config = (qtAny.configuration || {});
+                // Look for enumerated values in different possible locations
+                const enumeratedValues = config.enumeratedValues ||
+                    config.allowedTerritories ||
+                    qtAny.enumeratedValues ||
+                    qtAny.allowedTerritories ||
+                    [];
+                if (enumeratedValues && Array.isArray(enumeratedValues) && enumeratedValues.length > 0) {
+                    return {
+                        hasEnumeratedValues: true,
+                        enumeratedValues: enumeratedValues,
+                        systemType: qtAny.systemType || 'literal',
+                        caseSensitive: config.caseSensitive !== false
+                    };
+                }
+            }
+            return { hasEnumeratedValues: false, enumeratedValues: [] };
+        }
+        catch (error) {
+            console.warn(`Failed to extract qualifier type info for ${qualifierName}:`, error);
+            return { hasEnumeratedValues: false, enumeratedValues: [] };
+        }
+    }, [qualifierName, resources?.system?.qualifiers]);
+    const handleChange = (newValue) => {
+        onChange(qualifierName, newValue || undefined);
+    };
+    const handleClear = () => {
+        onChange(qualifierName, undefined);
+    };
+    const effectiveValue = value ?? '';
+    const hasEnumeratedValues = qualifierInfo.hasEnumeratedValues && qualifierInfo.enumeratedValues.length > 0;
+    return (React.createElement("div", { className: `bg-white rounded border border-gray-200 p-2 ${className}` },
+        React.createElement("div", { className: "flex items-center gap-2" },
+            React.createElement("label", { className: "text-sm font-medium text-gray-700 min-w-0 flex-shrink-0" },
+                qualifierName,
+                ":"),
+            React.createElement("div", { className: "flex-1 flex items-center gap-1" },
+                hasEnumeratedValues ? (
+                // Dropdown for enumerated values
+                React.createElement("select", { value: effectiveValue, onChange: (e) => handleChange(e.target.value), disabled: disabled, className: `flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${disabled ? 'bg-gray-100 text-gray-400' : ''}` },
+                    React.createElement("option", { value: "" }, disabled
+                        ? 'Disabled'
+                        : value === undefined
+                            ? '(undefined)'
+                            : placeholder || 'Select value...'),
+                    qualifierInfo.enumeratedValues.map((enumValue) => (React.createElement("option", { key: enumValue, value: enumValue }, enumValue))))) : (
+                // Text input for non-enumerated values
+                React.createElement("input", { type: "text", value: effectiveValue, onChange: (e) => handleChange(e.target.value), disabled: disabled, className: `flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${disabled ? 'bg-gray-100 text-gray-400' : ''}`, placeholder: disabled
+                        ? 'Disabled'
+                        : value === undefined
+                            ? '(undefined)'
+                            : placeholder || `Enter ${qualifierName} value` })),
+                !disabled && value !== undefined && (React.createElement("button", { type: "button", onClick: handleClear, className: "px-2 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors", title: "Set to undefined" }, "\u2715")))),
+        hasEnumeratedValues && (React.createElement("div", { className: "mt-1 text-xs text-blue-600" },
+            qualifierInfo.enumeratedValues.length,
+            " predefined values"))));
+};
+export default QualifierContextControl;
+//# sourceMappingURL=QualifierContextControl.js.map

package/lib/components/common/QualifierContextControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualifierContextControl.js","sourceRoot":"","sources":["../../../src/components/common/QualifierContextControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\nimport { ProcessedResources } from '../../types';\n\nexport interface QualifierContextControlProps {\n  qualifierName: string;\n  value: string | undefined;\n  onChange: (qualifierName: string, value: string | undefined) => void;\n  disabled?: boolean;\n  placeholder?: string;\n  resources?: ProcessedResources | null;\n  className?: string;\n}\n\nexport const QualifierContextControl: React.FC<QualifierContextControlProps> = ({\n  qualifierName,\n  value,\n  onChange,\n  disabled = false,\n  placeholder,\n  resources,\n  className = ''\n}) => {\n  // Extract qualifier type information from system configuration\n  const qualifierInfo = useMemo(() => {\n    if (!resources?.system?.qualifiers) {\n      return { hasEnumeratedValues: false, enumeratedValues: [] };\n    }\n\n    try {\n      // Get qualifier declaration\n      const qualifierResult = resources.system.qualifiers.validating.get(qualifierName);\n\n      if (!qualifierResult.isSuccess()) {\n        return { hasEnumeratedValues: false, enumeratedValues: [] };\n      }\n\n      const qualifier = qualifierResult.value;\n\n      // Access the instantiated qualifier type\n      if (qualifier.type) {\n        const qualifierType = qualifier.type;\n        // Use type assertion to access properties that may exist on specific subtypes\n        const qtAny = qualifierType as unknown as Record<string, unknown>;\n        const config = (qtAny.configuration || {}) as Record<string, unknown>;\n\n        // Look for enumerated values in different possible locations\n        const enumeratedValues =\n          config.enumeratedValues ||\n          config.allowedTerritories ||\n          qtAny.enumeratedValues ||\n          qtAny.allowedTerritories ||\n          [];\n\n        if (enumeratedValues && Array.isArray(enumeratedValues) && enumeratedValues.length > 0) {\n          return {\n            hasEnumeratedValues: true,\n            enumeratedValues: enumeratedValues as string[],\n            systemType: (qtAny.systemType as string) || 'literal',\n            caseSensitive: config.caseSensitive !== false\n          };\n        }\n      }\n\n      return { hasEnumeratedValues: false, enumeratedValues: [] };\n    } catch (error) {\n      console.warn(`Failed to extract qualifier type info for ${qualifierName}:`, error);\n      return { hasEnumeratedValues: false, enumeratedValues: [] };\n    }\n  }, [qualifierName, resources?.system?.qualifiers]);\n\n  const handleChange = (newValue: string) => {\n    onChange(qualifierName, newValue || undefined);\n  };\n\n  const handleClear = () => {\n    onChange(qualifierName, undefined);\n  };\n\n  const effectiveValue = value ?? '';\n  const hasEnumeratedValues = qualifierInfo.hasEnumeratedValues && qualifierInfo.enumeratedValues.length > 0;\n\n  return (\n    <div className={`bg-white rounded border border-gray-200 p-2 ${className}`}>\n      <div className=\"flex items-center gap-2\">\n        <label className=\"text-sm font-medium text-gray-700 min-w-0 flex-shrink-0\">{qualifierName}:</label>\n        <div className=\"flex-1 flex items-center gap-1\">\n          {hasEnumeratedValues ? (\n            // Dropdown for enumerated values\n            <select\n              value={effectiveValue}\n              onChange={(e) => handleChange(e.target.value)}\n              disabled={disabled}\n              className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${\n                disabled ? 'bg-gray-100 text-gray-400' : ''\n              }`}\n            >\n              <option value=\"\">\n                {disabled\n                  ? 'Disabled'\n                  : value === undefined\n                  ? '(undefined)'\n                  : placeholder || 'Select value...'}\n              </option>\n              {qualifierInfo.enumeratedValues.map((enumValue: string) => (\n                <option key={enumValue} value={enumValue}>\n                  {enumValue}\n                </option>\n              ))}\n            </select>\n          ) : (\n            // Text input for non-enumerated values\n            <input\n              type=\"text\"\n              value={effectiveValue}\n              onChange={(e) => handleChange(e.target.value)}\n              disabled={disabled}\n              className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent text-sm min-w-0 ${\n                disabled ? 'bg-gray-100 text-gray-400' : ''\n              }`}\n              placeholder={\n                disabled\n                  ? 'Disabled'\n                  : value === undefined\n                  ? '(undefined)'\n                  : placeholder || `Enter ${qualifierName} value`\n              }\n            />\n          )}\n          {!disabled && value !== undefined && (\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"px-2 py-1 text-xs text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded transition-colors\"\n              title=\"Set to undefined\"\n            >\n              ✕\n            </button>\n          )}\n        </div>\n      </div>\n      {/* Show enumerated values indicator */}\n      {hasEnumeratedValues && (\n        <div className=\"mt-1 text-xs text-blue-600\">\n          {qualifierInfo.enumeratedValues.length} predefined values\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default QualifierContextControl;\n"]}

package/lib/components/common/ResourceListView.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ResourceListViewProps {
+    resourceIds: string[];
+    selectedResourceId: string | null;
+    onResourceSelect: (resourceId: string) => void;
+    searchTerm?: string;
+    className?: string;
+}
+export declare const ResourceListView: React.FC<ResourceListViewProps>;
+export default ResourceListView;
+//# sourceMappingURL=ResourceListView.d.ts.map

package/lib/components/common/ResourceListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceListView.d.ts","sourceRoot":"","sources":["../../../src/components/common/ResourceListView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,qBAAqB;IAC7B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiD5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/common/ResourceListView.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { DocumentTextIcon } from '@heroicons/react/24/outline';
+export const ResourceListView = ({ resourceIds, selectedResourceId, onResourceSelect, searchTerm = '', className = '' }) => {
+    // Filter and sort resource IDs
+    const filteredResourceIds = React.useMemo(() => {
+        const filtered = searchTerm
+            ? resourceIds.filter((id) => id.toLowerCase().includes(searchTerm.toLowerCase()))
+            : resourceIds;
+        return filtered.sort();
+    }, [resourceIds, searchTerm]);
+    if (filteredResourceIds.length === 0) {
+        return (React.createElement("div", { className: `${className} p-4 text-center text-gray-500` },
+            React.createElement("p", null, searchTerm ? 'No resources match your search' : 'No resources available')));
+    }
+    return (React.createElement("div", { className: `${className} overflow-y-auto` }, filteredResourceIds.map((resourceId) => (React.createElement("div", { key: resourceId, className: `flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 border-b border-gray-100 last:border-b-0 ${selectedResourceId === resourceId ? 'bg-purple-50 border-l-2 border-purple-500' : ''} ${searchTerm && resourceId.toLowerCase().includes(searchTerm.toLowerCase()) ? 'bg-yellow-50' : ''}`, onClick: () => onResourceSelect(resourceId) },
+        React.createElement(DocumentTextIcon, { className: "w-4 h-4 text-green-500 mr-2 flex-shrink-0" }),
+        React.createElement("span", { className: `text-sm truncate ${selectedResourceId === resourceId ? 'font-medium text-purple-900' : 'text-gray-700'}`, title: resourceId }, resourceId))))));
+};
+export default ResourceListView;
+//# sourceMappingURL=ResourceListView.js.map

package/lib/components/common/ResourceListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceListView.js","sourceRoot":"","sources":["../../../src/components/common/ResourceListView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAU/D,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAChE,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,UAAU,GAAG,EAAE,EACf,SAAS,GAAG,EAAE,EACf,EAAE,EAAE;IACH,+BAA+B;IAC/B,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC7C,MAAM,QAAQ,GAAG,UAAU;YACzB,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;YACjF,CAAC,CAAC,WAAW,CAAC;QAEhB,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC;IAE9B,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACrC,OAAO,CACL,6BAAK,SAAS,EAAE,GAAG,SAAS,gCAAgC;YAC1D,+BAAI,UAAU,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,wBAAwB,CAAK,CAC7E,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,GAAG,SAAS,kBAAkB,IAC3C,mBAAmB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CACvC,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,yGACT,kBAAkB,KAAK,UAAU,CAAC,CAAC,CAAC,2CAA2C,CAAC,CAAC,CAAC,EACpF,IACE,UAAU,IAAI,UAAU,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAC/F,EAAE,EACF,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC;QAE3C,oBAAC,gBAAgB,IAAC,SAAS,EAAC,2CAA2C,GAAG;QAC1E,8BACE,SAAS,EAAE,oBACT,kBAAkB,KAAK,UAAU,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,eACtE,EAAE,EACF,KAAK,EAAE,UAAU,IAEhB,UAAU,CACN,CACH,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport { DocumentTextIcon } from '@heroicons/react/24/outline';\n\ninterface ResourceListViewProps {\n  resourceIds: string[];\n  selectedResourceId: string | null;\n  onResourceSelect: (resourceId: string) => void;\n  searchTerm?: string;\n  className?: string;\n}\n\nexport const ResourceListView: React.FC<ResourceListViewProps> = ({\n  resourceIds,\n  selectedResourceId,\n  onResourceSelect,\n  searchTerm = '',\n  className = ''\n}) => {\n  // Filter and sort resource IDs\n  const filteredResourceIds = React.useMemo(() => {\n    const filtered = searchTerm\n      ? resourceIds.filter((id) => id.toLowerCase().includes(searchTerm.toLowerCase()))\n      : resourceIds;\n\n    return filtered.sort();\n  }, [resourceIds, searchTerm]);\n\n  if (filteredResourceIds.length === 0) {\n    return (\n      <div className={`${className} p-4 text-center text-gray-500`}>\n        <p>{searchTerm ? 'No resources match your search' : 'No resources available'}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`${className} overflow-y-auto`}>\n      {filteredResourceIds.map((resourceId) => (\n        <div\n          key={resourceId}\n          className={`flex items-center px-3 py-2 cursor-pointer hover:bg-gray-100 border-b border-gray-100 last:border-b-0 ${\n            selectedResourceId === resourceId ? 'bg-purple-50 border-l-2 border-purple-500' : ''\n          } ${\n            searchTerm && resourceId.toLowerCase().includes(searchTerm.toLowerCase()) ? 'bg-yellow-50' : ''\n          }`}\n          onClick={() => onResourceSelect(resourceId)}\n        >\n          <DocumentTextIcon className=\"w-4 h-4 text-green-500 mr-2 flex-shrink-0\" />\n          <span\n            className={`text-sm truncate ${\n              selectedResourceId === resourceId ? 'font-medium text-purple-900' : 'text-gray-700'\n            }`}\n            title={resourceId}\n          >\n            {resourceId}\n          </span>\n        </div>\n      ))}\n    </div>\n  );\n};\n\nexport default ResourceListView;\n"]}

package/lib/components/common/ResourceTreeView.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Resources, Runtime } from '@fgv/ts-res';
+interface ResourceTreeViewProps {
+    resources: Resources.ResourceManagerBuilder | Runtime.CompiledResourceCollection;
+    selectedResourceId: string | null;
+    onResourceSelect: (resourceId: string) => void;
+    searchTerm?: string;
+    className?: string;
+}
+export declare const ResourceTreeView: React.FC<ResourceTreeViewProps>;
+export default ResourceTreeView;
+//# sourceMappingURL=ResourceTreeView.d.ts.map

package/lib/components/common/ResourceTreeView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTreeView.d.ts","sourceRoot":"","sources":["../../../src/components/common/ResourceTreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAQ9D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEjD,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC,sBAAsB,GAAG,OAAO,CAAC,0BAA0B,CAAC;IACjF,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAClC,gBAAgB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+O5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/common/ResourceTreeView.js

@@ -0,0 +1,162 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { ChevronRightIcon, ChevronDownIcon, DocumentTextIcon, FolderIcon, FolderOpenIcon } from '@heroicons/react/24/outline';
+export const ResourceTreeView = ({ resources, selectedResourceId, onResourceSelect, searchTerm = '', className = '' }) => {
+    const [expandedNodes, setExpandedNodes] = useState(new Set());
+    // Build the tree structure from resources
+    const treeData = useMemo(() => {
+        if (!resources)
+            return null;
+        // Get the tree from the resources
+        const treeResult = resources.getBuiltResourceTree();
+        if (treeResult.isFailure()) {
+            console.error('Failed to build resource tree:', treeResult.message);
+            return null;
+        }
+        return treeResult.value;
+    }, [resources]);
+    // Filter tree based on search term
+    const filteredTree = useMemo(() => {
+        if (!treeData || !searchTerm)
+            return treeData;
+        // Helper function to check if a node or its descendants match the search
+        const markMatchingNodes = (node, searchLower) => {
+            const nodeIdLower = node.id.toLowerCase();
+            let matches = nodeIdLower.includes(searchLower);
+            if (!node.isLeaf && node.children) {
+                // Check children recursively
+                for (const child of node.children.values()) {
+                    if (markMatchingNodes(child, searchLower)) {
+                        matches = true;
+                    }
+                }
+            }
+            return matches;
+        };
+        // Mark all matching nodes
+        const searchLower = searchTerm.toLowerCase();
+        for (const child of treeData.children.values()) {
+            markMatchingNodes(child, searchLower);
+        }
+        return treeData;
+    }, [treeData, searchTerm]);
+    // Toggle node expansion
+    const toggleNode = useCallback((nodeId) => {
+        setExpandedNodes((prev) => {
+            const newExpanded = new Set(prev);
+            if (newExpanded.has(nodeId)) {
+                newExpanded.delete(nodeId);
+            }
+            else {
+                newExpanded.add(nodeId);
+            }
+            return newExpanded;
+        });
+    }, []);
+    // Expand all nodes that contain search matches
+    const expandMatchingNodes = useCallback(() => {
+        if (!searchTerm || !filteredTree)
+            return;
+        const searchLower = searchTerm.toLowerCase();
+        const nodesToExpand = new Set();
+        const checkNode = (node) => {
+            if (node.id.toLowerCase().includes(searchLower)) {
+                // Expand all parent nodes
+                const parts = node.id.split('.');
+                for (let i = 1; i < parts.length; i++) {
+                    nodesToExpand.add(parts.slice(0, i).join('.'));
+                }
+            }
+            if (!node.isLeaf && node.children) {
+                for (const child of node.children.values()) {
+                    checkNode(child);
+                }
+            }
+        };
+        for (const child of filteredTree.children.values()) {
+            checkNode(child);
+        }
+        setExpandedNodes(nodesToExpand);
+    }, [searchTerm, filteredTree]);
+    // Auto-expand when search term changes
+    React.useEffect(() => {
+        if (searchTerm) {
+            expandMatchingNodes();
+        }
+    }, [searchTerm, expandMatchingNodes]);
+    // Render a single tree node
+    const renderTreeNode = (node, level = 0) => {
+        const isExpanded = expandedNodes.has(node.id);
+        const isSelected = selectedResourceId === node.id;
+        const nodeIdLower = node.id.toLowerCase();
+        const searchLower = searchTerm.toLowerCase();
+        const matchesSearch = !searchTerm || nodeIdLower.includes(searchLower);
+        // Check if any children match
+        let hasMatchingChildren = false;
+        if (!node.isLeaf && node.children && searchTerm) {
+            const checkChildren = (n) => {
+                if (n.id.toLowerCase().includes(searchLower))
+                    return true;
+                if (!n.isLeaf && n.children) {
+                    for (const child of n.children.values()) {
+                        if (checkChildren(child))
+                            return true;
+                    }
+                }
+                return false;
+            };
+            for (const child of node.children.values()) {
+                if (checkChildren(child)) {
+                    hasMatchingChildren = true;
+                    break;
+                }
+            }
+        }
+        // Hide nodes that don't match search and don't have matching children
+        if (searchTerm && !matchesSearch && !hasMatchingChildren) {
+            return null;
+        }
+        return (React.createElement("div", { key: node.id },
+            React.createElement("div", { className: `flex items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${isSelected ? 'bg-purple-50 border-l-2 border-purple-500' : ''} ${matchesSearch && searchTerm ? 'bg-yellow-50' : ''}`, style: { paddingLeft: `${level * 20 + 8}px` }, onClick: () => {
+                    if (node.isLeaf) {
+                        onResourceSelect(node.id);
+                    }
+                    else {
+                        toggleNode(node.id);
+                    }
+                } },
+                !node.isLeaf && (React.createElement("button", { onClick: (e) => {
+                        e.stopPropagation();
+                        toggleNode(node.id);
+                    }, className: "mr-1 p-0.5 hover:bg-gray-200 rounded" }, isExpanded ? (React.createElement(ChevronDownIcon, { className: "w-3 h-3 text-gray-600" })) : (React.createElement(ChevronRightIcon, { className: "w-3 h-3 text-gray-600" })))),
+                node.isLeaf ? (React.createElement(DocumentTextIcon, { className: "w-4 h-4 text-green-500 mr-2 flex-shrink-0" })) : isExpanded ? (React.createElement(FolderOpenIcon, { className: "w-4 h-4 text-blue-500 mr-2 flex-shrink-0" })) : (React.createElement(FolderIcon, { className: "w-4 h-4 text-blue-500 mr-2 flex-shrink-0" })),
+                React.createElement("span", { className: `text-sm truncate ${isSelected ? 'font-medium text-purple-900' : 'text-gray-700'} ${matchesSearch && searchTerm ? 'font-medium' : ''}`, title: node.id }, node.name),
+                !node.isLeaf && node.children && (React.createElement("span", { className: "ml-2 text-xs text-gray-500" },
+                    "(",
+                    node.children.size,
+                    ")"))),
+            !node.isLeaf && node.children && isExpanded && (React.createElement("div", null, Array.from(node.children.values())
+                .sort((a, b) => {
+                // Sort folders first, then by name
+                if (a.isLeaf !== b.isLeaf) {
+                    return a.isLeaf ? 1 : -1;
+                }
+                return a.name.localeCompare(b.name);
+            })
+                .map((child) => renderTreeNode(child, level + 1))))));
+    };
+    if (!filteredTree) {
+        return (React.createElement("div", { className: `${className} p-4 text-center text-gray-500` },
+            React.createElement("p", null, "No resources available")));
+    }
+    return (React.createElement("div", { className: `${className} overflow-y-auto` }, Array.from(filteredTree.children.values())
+        .sort((a, b) => {
+        // Sort folders first, then by name
+        if (a.isLeaf !== b.isLeaf) {
+            return a.isLeaf ? 1 : -1;
+        }
+        return a.name.localeCompare(b.name);
+    })
+        .map((child) => renderTreeNode(child))));
+};
+export default ResourceTreeView;
+//# sourceMappingURL=ResourceTreeView.js.map