@fgv/ts-res-browser 1.0.0 → 5.0.0-2

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@fgv/ts-res-browser",
-  "version": "1.0.0",
+  "version": "5.0.0-2",
   "description": "Visual browser tool for ts-res resources",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "bin": {
-    "ts-res-browser": "./lib/cli.js"
+    "ts-res-browser": "./cli.js"
   },
   "keywords": [
     "ts-res",
@@ -26,10 +26,14 @@
     "core-js": "~3.44.0",
     "whatwg-fetch": "~3.6.20",
     "@rushstack/heft-web-rig": "~0.29.0",
-    "@fgv/ts-res": "5.0.0-0",
-    "@fgv/ts-utils": "5.0.0-0",
-    "@fgv/ts-json": "5.0.0-0",
-    "@fgv/ts-json-base": "5.0.0-0"
+    "jszip": "~3.10.1",
+    "browserify-zlib": "~0.2.0",
+    "assert": "~2.1.0",
+    "@fgv/ts-res": "5.0.0-2",
+    "@fgv/ts-json-base": "5.0.0-2",
+    "@fgv/ts-utils": "5.0.0-2",
+    "@fgv/ts-extras": "5.0.0-2",
+    "@fgv/ts-json": "5.0.0-2"
   },
   "devDependencies": {
     "@types/react": "~19.1.8",
@@ -67,7 +71,8 @@
     "@rushstack/heft-lint-plugin": "~0.7.0",
     "@rushstack/heft-sass-plugin": "~0.17.8",
     "@rushstack/heft-webpack5-plugin": "~0.11.34",
-    "@fgv/ts-utils-jest": "5.0.0-0"
+    "@types/jszip": "~3.4.1",
+    "@fgv/ts-utils-jest": "5.0.0-2"
   },
   "scripts": {
     "build": "webpack --mode production",

package/rush-logs/ts-res-browser.build.cache.log

@@ -1,3 +1,3 @@
 Caching build output folders: dist, .rush/temp/operation/build
 Successfully set cache entry.
-Cache key: 5fc90bc7c2ccf812114ea099111568e5429be2a2
+Cache key: 587277bfc395406ad444e989b6c309b9698f534c

package/rush-logs/ts-res-browser.build.log

@@ -1,30 +1,30 @@
 Invoking: webpack --mode production 
-asset bundle.js 2.31 MiB [emitted] [minimized] [big] (name: main) 1 related asset
+asset bundle.js 2.41 MiB [emitted] [minimized] [big] (name: main) 1 related asset
 asset index.html 478 bytes [emitted]
-orphan modules 636 KiB [orphan] 348 modules
+orphan modules 678 KiB [orphan] 353 modules
 runtime modules 1.02 KiB 6 modules
-modules by path ../../common/temp/node_modules/.pnpm/ 2.31 MiB 846 modules
-modules by path ../../libraries/ 2.23 MiB
-  javascript modules 1.4 MiB 312 modules
+modules by path ../../common/temp/node_modules/.pnpm/ 2.38 MiB 841 modules
+modules by path ../../libraries/ 2.24 MiB
+  javascript modules 1.41 MiB 314 modules
   json modules 849 KiB 4 modules
 optional modules 60 bytes [optional]
   buffer (ignored) 15 bytes [optional] [built] [code generated]
   crypto (ignored) 15 bytes [optional] [built] [code generated]
   buffer (ignored) 15 bytes [optional] [built] [code generated]
   vm (ignored) 15 bytes [optional] [built] [code generated]
-modules by path ./src/ 362 KiB
-  ./src/main.tsx + 47 modules 327 KiB [built] [code generated]
-  ../../common/temp/node_modules/.pnpm/css-loader@7.1.2_webpack@5.100.1/node_modules/css-loader/dist/cjs.js!../../common/temp/node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.5.6_typescript@5.8.3_webpack@5.100.1/node_modules/postcss-loader/dist/cjs.js!./src/index.css 35.6 KiB [built] [code generated]
-+ 14 modules
+modules by path ./src/ 406 KiB
+  ./src/main.tsx + 54 modules 370 KiB [built] [code generated]
+  ../../common/temp/node_modules/.pnpm/css-loader@7.1.2_webpack@5.100.1/node_modules/css-loader/dist/cjs.js!../../common/temp/node_modules/.pnpm/postcss-loader@8.1.1_postcss@8.5.6_typescript@5.8.3_webpack@5.100.1/node_modules/postcss-loader/dist/cjs.js!./src/index.css 35.7 KiB [built] [code generated]
++ 15 modules
 
 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
 This can impact web performance.
 Assets: 
-  bundle.js (2.31 MiB)
+  bundle.js (2.41 MiB)
 
 WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
 Entrypoints:
-  main (2.31 MiB)
+  main (2.41 MiB)
       bundle.js
 
 
@@ -32,4 +32,4 @@ WARNING in webpack performance recommendations:
 You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
 For more info visit https://webpack.js.org/guides/code-splitting/
 
-webpack 5.100.1 compiled with 3 warnings in 19176 ms
+webpack 5.100.1 compiled with 3 warnings in 21598 ms

package/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import AppLayout from './components/layout/AppLayout';
 import ImportTool from './components/tools/ImportTool';
 import SourceBrowser from './components/tools/SourceBrowser';
@@ -6,19 +6,24 @@ import FilterTool from './components/tools/FilterTool';
 import CompiledBrowser from './components/tools/CompiledBrowser';
 import ResolutionViewer from './components/tools/ResolutionViewer';
 import ConfigurationTool from './components/tools/ConfigurationTool';
+import ZipLoader from './components/tools/ZipLoader';
 import NavigationWarningModal from './components/common/NavigationWarningModal';
 import { useAppState } from './hooks/useAppState';
 import { useFileImport } from './hooks/useFileImport';
 import { useResourceManager } from './hooks/useResourceManager';
 import { useNavigationWarning } from './hooks/useNavigationWarning';
+import { useUrlParams } from './hooks/useUrlParams';
 import { FilterResult } from './utils/filterResources';
+import { parseContextFilter } from './utils/urlParams';
 import { Tool } from './types/app';
+import * as TsRes from '@fgv/ts-res';
 
 const App: React.FC = () => {
   const { state, actions } = useAppState();
   const fileImport = useFileImport();
   const resourceManager = useResourceManager();
   const navigationWarning = useNavigationWarning();
+  const { urlParams, hasUrlParams } = useUrlParams();
 
   // State to share filter result between components
   const [filterResult, setFilterResult] = React.useState<FilterResult | null>(null);
@@ -26,6 +31,109 @@ const App: React.FC = () => {
   // Ref to store the configuration tool's save handler
   const configSaveHandlerRef = React.useRef<(() => void) | null>(null);
 
+  // Ref to track if we've already initialized from URL parameters
+  const initializedFromUrlRef = React.useRef(false);
+
+  // Initialize app state from URL parameters (only run once)
+  useEffect(() => {
+    if (hasUrlParams && !initializedFromUrlRef.current) {
+      initializedFromUrlRef.current = true;
+
+      // Load and apply configuration if provided
+      if (urlParams.config) {
+        const loadConfiguration = async () => {
+          try {
+            // Check if it's a predefined configuration name
+            const predefinedNames: TsRes.Config.PredefinedSystemConfiguration[] = [
+              'default',
+              'language-priority',
+              'territory-priority',
+              'extended-example'
+            ];
+
+            if (predefinedNames.includes(urlParams.config as TsRes.Config.PredefinedSystemConfiguration)) {
+              // Load predefined configuration
+              const configResult = TsRes.Config.getPredefinedDeclaration(
+                urlParams.config as TsRes.Config.PredefinedSystemConfiguration
+              );
+
+              if (configResult.isSuccess()) {
+                // Store the declaration directly, not the SystemConfiguration instance
+                resourceManager.actions.applyConfiguration(configResult.value);
+                actions.addMessage('success', `Loaded predefined configuration: ${urlParams.config}`);
+              } else {
+                actions.addMessage(
+                  'error',
+                  `Failed to load predefined configuration '${urlParams.config}': ${configResult.message}`
+                );
+              }
+            } else {
+              // It might be a file path - show a message for now
+              actions.addMessage(
+                'info',
+                `Configuration file specified: ${urlParams.config} (file loading not yet supported)`
+              );
+            }
+          } catch (error) {
+            actions.addMessage('error', `Error loading configuration: ${error}`);
+          }
+        };
+
+        loadConfiguration();
+      }
+
+      // Apply context filter if provided
+      if (urlParams.contextFilter) {
+        try {
+          const contextObj = parseContextFilter(urlParams.contextFilter);
+          actions.updateFilterValues(contextObj);
+          actions.updateFilterEnabled(true);
+          actions.applyFilterValues();
+          actions.addMessage('info', `Applied context filter from URL: ${urlParams.contextFilter}`);
+        } catch (error) {
+          actions.addMessage('error', `Invalid context filter in URL: ${urlParams.contextFilter}`);
+        }
+      }
+
+      // Apply reduceQualifiers setting
+      if (urlParams.reduceQualifiers) {
+        actions.updateReduceQualifiers(true);
+      }
+
+      // Handle ZIP loading
+      if (urlParams.loadZip) {
+        actions.setActiveTool('zip-loader');
+        actions.addMessage('info', 'ZIP archive ready to load');
+      }
+
+      // Show appropriate messages for other parameters
+      if (urlParams.input) {
+        actions.addMessage('info', `Ready to load resource file: ${urlParams.input}`);
+      }
+
+      if (urlParams.resourceTypes) {
+        actions.addMessage('info', `Resource types filter: ${urlParams.resourceTypes}`);
+      }
+
+      if (urlParams.maxDistance !== undefined) {
+        actions.addMessage('info', `Language matching distance: ${urlParams.maxDistance}`);
+      }
+
+      if (urlParams.interactive) {
+        actions.addMessage('info', 'Launched in interactive mode - sample data will be loaded');
+      }
+
+      // Navigate to appropriate tool based on URL params
+      if (urlParams.input) {
+        // If input is specified, start with import tool
+        actions.setSelectedTool('import');
+      } else if (urlParams.interactive) {
+        // If interactive mode, might want to go straight to source browser with sample data
+        actions.setSelectedTool('source');
+      }
+    }
+  }, [hasUrlParams]); // Remove urlParams and actions to prevent re-runs
+
   // Handle navigation with unsaved changes check
   const handleToolSelect = useCallback(
     (tool: Tool) => {
@@ -117,6 +225,19 @@ const App: React.FC = () => {
             onSaveHandlerRef={configSaveHandlerRef}
           />
         );
+      case 'zip-loader':
+        return (
+          <ZipLoader
+            onMessage={actions.addMessage}
+            resourceManager={resourceManager}
+            zipFile={urlParams.zipFile}
+            zipPath={urlParams.zipPath}
+            onLoadComplete={() => {
+              // Switch to source browser after successful load
+              actions.setSelectedTool('source');
+            }}
+          />
+        );
       default:
         return (
           <ImportTool

package/src/components/common/FileImporter.tsx

@@ -12,12 +12,14 @@ interface FileImporterProps {
   onDirectoryImported?: (directory: ImportedDirectory) => void;
   onFilesImported?: (files: ImportedFile[]) => void;
   onError?: (error: string) => void;
+  startInDirectory?: string;
 }
 
 export const FileImporter: React.FC<FileImporterProps> = ({
   onDirectoryImported,
   onFilesImported,
-  onError
+  onError,
+  startInDirectory
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [importMethod, setImportMethod] = useState<'modern' | 'fallback'>(
@@ -27,7 +29,9 @@ export const FileImporter: React.FC<FileImporterProps> = ({
   const handleDirectoryImport = useCallback(async () => {
     setIsLoading(true);
     try {
-      const result = await fileImporter.pickDirectory();
+      const result = await fileImporter.pickDirectory({
+        startIn: startInDirectory
+      });
 
       if (result.isSuccess()) {
         onDirectoryImported?.(result.value);
@@ -39,14 +43,15 @@ export const FileImporter: React.FC<FileImporterProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [onDirectoryImported, onError]);
+  }, [onDirectoryImported, onError, startInDirectory]);
 
   const handleFileImport = useCallback(async () => {
     setIsLoading(true);
     try {
       const result = await fileImporter.pickFiles({
         acceptedTypes: ['.json'],
-        multiple: true
+        multiple: true,
+        startIn: startInDirectory
       });
 
       if (result.isSuccess()) {
@@ -59,7 +64,7 @@ export const FileImporter: React.FC<FileImporterProps> = ({
     } finally {
       setIsLoading(false);
     }
-  }, [onFilesImported, onError]);
+  }, [onFilesImported, onError, startInDirectory]);
 
   return (
     <div className="space-y-4">

package/src/components/layout/Sidebar.tsx

@@ -5,7 +5,8 @@ import {
   FunnelIcon,
   CubeIcon,
   MagnifyingGlassIcon,
-  CogIcon
+  CogIcon,
+  ArchiveBoxIcon
 } from '@heroicons/react/24/outline';
 import { Tool } from '../../types/app';
 
@@ -50,6 +51,12 @@ const tools = [
     name: 'Configuration',
     icon: CogIcon,
     description: 'Manage qualifier types, qualifiers, and resource types'
+  },
+  {
+    id: 'zip-loader',
+    name: 'ZIP Loader',
+    icon: ArchiveBoxIcon,
+    description: 'Load resources from ZIP archive created by CLI'
   }
 ];
 

package/src/components/tools/ConfigurationTool.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../utils/tsResIntegration';
 import { fileImporter } from '../../utils/fileImport';
 import { Result } from '@fgv/ts-utils';
+import { useUrlParams } from '../../hooks/useUrlParams';
 
 interface ConfigurationToolProps {
   onMessage?: (type: Message['type'], message: string) => void;
@@ -38,6 +39,7 @@ const ConfigurationTool: React.FC<ConfigurationToolProps> = ({
   onSaveHandlerRef
 }) => {
   const { state: resourceState } = resourceManager;
+  const { urlParams } = useUrlParams();
   const [activePanel, setActivePanel] = useState<ActivePanel>('qualifiers');
 
   // Check if we have processed resources
@@ -84,7 +86,8 @@ const ConfigurationTool: React.FC<ConfigurationToolProps> = ({
     try {
       const fileResult = await fileImporter.pickFiles({
         acceptedTypes: ['.json'],
-        multiple: false
+        multiple: false,
+        startIn: urlParams.configStartDir
       });
 
       if (fileResult.isFailure()) {

package/src/components/tools/FilterTool.tsx

@@ -13,7 +13,7 @@ import {
 } from '@heroicons/react/24/outline';
 import { UseResourceManagerReturn } from '../../hooks/useResourceManager';
 import { Message, FilterState } from '../../types/app';
-import { NoMatch } from '@fgv/ts-res';
+import { NoMatch, Config } from '@fgv/ts-res';
 import { DEFAULT_SYSTEM_CONFIGURATION } from '../../utils/tsResIntegration';
 import {
   createFilteredResourceManager,
@@ -65,6 +65,64 @@ const FilterTool: React.FC<FilterToolProps> = ({
     return config.qualifiers.map((q) => q.name);
   }, [resourceState.processedResources?.compiledCollection.qualifiers, resourceState.activeConfiguration]);
 
+  // Get qualifier type information for dropdown decisions
+  const qualifierTypeInfo = useMemo(() => {
+    const info: Record<
+      string,
+      {
+        type: Config.Model.ISystemConfiguration['qualifierTypes'][0];
+        enumeratedValues?: string[];
+        allowedTerritories?: string[];
+      }
+    > = {};
+
+    // Get the active configuration to access qualifier types
+    const config = resourceState.activeConfiguration || DEFAULT_SYSTEM_CONFIGURATION;
+
+    // Create a map of qualifier name to qualifier type for quick lookup
+    const qualifierTypeMap: Record<string, Config.Model.ISystemConfiguration['qualifierTypes'][0]> = {};
+
+    // First, create a mapping of qualifiers to their types
+    config.qualifiers.forEach((qualifier) => {
+      const qualifierType = config.qualifierTypes.find((qt) => qt.name === qualifier.typeName);
+      if (qualifierType) {
+        qualifierTypeMap[qualifier.name] = qualifierType;
+      }
+    });
+
+    // Build info for each qualifier
+    availableQualifiers.forEach((qualifierName) => {
+      const qualifierType = qualifierTypeMap[qualifierName];
+      if (qualifierType) {
+        info[qualifierName] = { type: qualifierType };
+
+        // Extract enumerated values for literal types
+        if (
+          qualifierType.systemType === 'literal' &&
+          qualifierType.configuration &&
+          typeof qualifierType.configuration === 'object' &&
+          'enumeratedValues' in qualifierType.configuration &&
+          Array.isArray(qualifierType.configuration.enumeratedValues)
+        ) {
+          info[qualifierName].enumeratedValues = qualifierType.configuration.enumeratedValues;
+        }
+
+        // Extract allowed territories for territory types
+        if (
+          qualifierType.systemType === 'territory' &&
+          qualifierType.configuration &&
+          typeof qualifierType.configuration === 'object' &&
+          'allowedTerritories' in qualifierType.configuration &&
+          Array.isArray(qualifierType.configuration.allowedTerritories)
+        ) {
+          info[qualifierName].allowedTerritories = qualifierType.configuration.allowedTerritories;
+        }
+      }
+    });
+
+    return info;
+  }, [availableQualifiers, resourceState.activeConfiguration]);
+
   // Check if we have any applied filter values set
   const hasAppliedFilterValues = useMemo(() => {
     return hasFilterValues(filterState.appliedValues);
@@ -504,25 +562,54 @@ const FilterTool: React.FC<FilterToolProps> = ({
           <h3 className="text-lg font-semibold text-gray-900 mb-4">Context Filters</h3>
           <div className="bg-gray-50 rounded-lg p-4">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-              {availableQualifiers.map((qualifierName) => (
-                <div key={qualifierName} className="bg-white rounded border border-gray-200 p-2">
-                  <div className="flex items-center gap-2">
-                    <label className="text-sm font-medium text-gray-700 min-w-0 flex-shrink-0">
-                      {qualifierName}:
-                    </label>
-                    <input
-                      type="text"
-                      value={filterState.values[qualifierName] || ''}
-                      onChange={(e) => handleFilterChange(qualifierName, e.target.value)}
-                      disabled={!filterState.enabled}
-                      className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent text-sm min-w-0 ${
-                        !filterState.enabled ? 'bg-gray-100 text-gray-400' : ''
-                      }`}
-                      placeholder={filterState.enabled ? `Filter by ${qualifierName}` : 'Disabled'}
-                    />
+              {availableQualifiers.map((qualifierName) => {
+                const typeInfo = qualifierTypeInfo[qualifierName];
+                const hasConstrainedValues =
+                  (typeInfo?.enumeratedValues && typeInfo.enumeratedValues.length > 0) ||
+                  (typeInfo?.allowedTerritories && typeInfo.allowedTerritories.length > 0);
+
+                const constrainedValues = typeInfo?.enumeratedValues || typeInfo?.allowedTerritories || [];
+
+                return (
+                  <div key={qualifierName} className="bg-white rounded border border-gray-200 p-2">
+                    <div className="flex items-center gap-2">
+                      <label className="text-sm font-medium text-gray-700 min-w-0 flex-shrink-0">
+                        {qualifierName}:
+                      </label>
+                      {hasConstrainedValues ? (
+                        <select
+                          value={filterState.values[qualifierName] || ''}
+                          onChange={(e) => handleFilterChange(qualifierName, e.target.value)}
+                          disabled={!filterState.enabled}
+                          className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent text-sm min-w-0 ${
+                            !filterState.enabled ? 'bg-gray-100 text-gray-400' : 'bg-white'
+                          }`}
+                        >
+                          <option value="">
+                            {filterState.enabled ? `All ${qualifierName} values` : 'Disabled'}
+                          </option>
+                          {constrainedValues.map((value) => (
+                            <option key={value} value={value}>
+                              {value}
+                            </option>
+                          ))}
+                        </select>
+                      ) : (
+                        <input
+                          type="text"
+                          value={filterState.values[qualifierName] || ''}
+                          onChange={(e) => handleFilterChange(qualifierName, e.target.value)}
+                          disabled={!filterState.enabled}
+                          className={`flex-1 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-transparent text-sm min-w-0 ${
+                            !filterState.enabled ? 'bg-gray-100 text-gray-400' : ''
+                          }`}
+                          placeholder={filterState.enabled ? `Filter by ${qualifierName}` : 'Disabled'}
+                        />
+                      )}
+                    </div>
                   </div>
-                </div>
-              ))}
+                );
+              })}
             </div>
             {filterState.enabled && (
               <div className="mt-3 text-sm text-gray-600">

package/src/components/tools/ImportTool.tsx

@@ -4,6 +4,7 @@ import { Message } from '../../types/app';
 import { UseFileImportReturn } from '../../hooks/useFileImport';
 import { UseResourceManagerReturn } from '../../hooks/useResourceManager';
 import FileImporter from '../common/FileImporter';
+import { useUrlParams } from '../../hooks/useUrlParams';
 
 interface ImportToolProps {
   onMessage: (type: Message['type'], message: string) => void;
@@ -14,6 +15,7 @@ interface ImportToolProps {
 const ImportTool: React.FC<ImportToolProps> = ({ onMessage, fileImport, resourceManager }) => {
   const { state: fileImportState, actions: fileImportActions } = fileImport;
   const { state: resourceState, actions: resourceActions } = resourceManager;
+  const { urlParams } = useUrlParams();
 
   // Track if we've already processed the current import to prevent infinite loops
   const lastProcessedImport = useRef<{
@@ -114,6 +116,7 @@ const ImportTool: React.FC<ImportToolProps> = ({ onMessage, fileImport, resource
             onDirectoryImported={fileImportActions.handleDirectoryImport}
             onFilesImported={fileImportActions.handleFilesImport}
             onError={fileImportActions.handleError}
+            startInDirectory={urlParams.inputStartDir}
           />
         </div>