npm - @fgv/ts-res-browser - Versions diffs - 5.0.0-2 → 5.0.0-21 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/cli.js +132 -21
package/dist/bundle.js +1 -1
package/dist/bundle.js.LICENSE.txt +11 -1
package/package.json +42 -36
package/.rush/temp/587277bfc395406ad444e989b6c309b9698f534c.tar.log +0 -15
package/.rush/temp/chunked-rush-logs/ts-res-browser.build.chunks.jsonl +0 -35
package/.rush/temp/operation/build/all.log +0 -35
package/.rush/temp/operation/build/log-chunks.jsonl +0 -35
package/.rush/temp/operation/build/state.json +0 -3
package/.rush/temp/shrinkwrap-deps.json +0 -1225
package/TS_RES_BROWSER_PLAN.md +0 -689
package/babel.config.js +0 -17
package/config/jest.config.json +0 -13
package/config/rig.json +0 -16
package/postcss.config.js +0 -3
package/public/index.html +0 -15
package/rush-logs/ts-res-browser.build.cache.log +0 -3
package/rush-logs/ts-res-browser.build.log +0 -35
package/src/App.tsx +0 -274
package/src/cli.ts +0 -44
package/src/components/common/FileImporter.tsx +0 -143
package/src/components/common/NavigationWarningModal.tsx +0 -62
package/src/components/layout/AppLayout.tsx +0 -46
package/src/components/layout/Header.tsx +0 -22
package/src/components/layout/MessagesWindow.tsx +0 -108
package/src/components/layout/Sidebar.tsx +0 -99
package/src/components/tools/CompiledBrowser.tsx +0 -949
package/src/components/tools/ConfigurationTool.tsx +0 -1405
package/src/components/tools/FilterTool.tsx +0 -1114
package/src/components/tools/ImportTool.tsx +0 -249
package/src/components/tools/ResolutionViewer.tsx +0 -1672
package/src/components/tools/SourceBrowser.tsx +0 -496
package/src/components/tools/ZipLoader.tsx +0 -302
package/src/hooks/useAppState.ts +0 -111
package/src/hooks/useFileImport.ts +0 -86
package/src/hooks/useNavigationWarning.ts +0 -67
package/src/hooks/useResourceManager.ts +0 -295
package/src/hooks/useUrlParams.ts +0 -56
package/src/index.css +0 -38
package/src/main.tsx +0 -16
package/src/types/app.ts +0 -70
package/src/types/fileSystemAccess.d.ts +0 -94
package/src/utils/browserFileTreeAccessors.ts +0 -245
package/src/utils/fileImport.ts +0 -336
package/src/utils/fileTreeConverter.ts +0 -160
package/src/utils/filterResources.ts +0 -677
package/src/utils/tsResIntegration.ts +0 -467
package/src/utils/urlParams.ts +0 -238
package/src/utils/zip/browserZipFileTreeAccessors.ts +0 -385
package/tailwind.config.js +0 -21
package/test-data/README.md +0 -184
package/test-data/config-variations/README.md +0 -64
package/test-data/config-variations/composition-terminology.json +0 -112
package/test-data/config-variations/enterprise-complex.json +0 -129
package/test-data/config-variations/gaming-app.json +0 -87
package/test-data/config-variations/high-priority-language.json +0 -65
package/test-data/config-variations/minimal-basic.json +0 -37
package/test-data/config-variations/qualifier-default-values.json +0 -71
package/test-data/config-variations/territory-first.json +0 -68
package/test-data/config-variations/territory-hierarchy-test.json +0 -31
package/test-data/config-variations/territory-hierarchy-unconstrained.json +0 -32
package/test-data/default-matching-test/greeting.res.json +0 -83
package/test-data/default-matching-test/only-defaults.res.json +0 -48
package/test-data/sample-project/package.json +0 -27
package/test-data/sample-project/src/resources/app-config.json +0 -27
package/test-data/sample-project/src/resources/app.json +0 -177
package/test-data/sample-project/src/resources/config/app.env=development.json +0 -21
package/test-data/sample-project/src/resources/config/app.json +0 -21
package/test-data/sample-project/src/resources/config/app.platform=mobile.json +0 -23
package/test-data/sample-project/src/resources/feature-flags.json +0 -23
package/test-data/sample-project/src/resources/home=CA/common.json +0 -16
package/test-data/sample-project/src/resources/images/density=hdpi.json +0 -29
package/test-data/sample-project/src/resources/images/home.json +0 -29
package/test-data/sample-project/src/resources/images/logout.json +0 -14
package/test-data/sample-project/src/resources/images/settings.json +0 -14
package/test-data/sample-project/src/resources/images/ui-icons.json +0 -29
package/test-data/sample-project/src/resources/images/user.density=hdpi.json +0 -14
package/test-data/sample-project/src/resources/images/user.json +0 -14
package/test-data/sample-project/src/resources/lang=en-US/common.json +0 -15
package/test-data/sample-project/src/resources/language=en-CA/ui-terms.json +0 -19
package/test-data/sample-project/src/resources/language=en-GB/ui-terms.json +0 -30
package/test-data/sample-project/src/resources/language=fr-CA/ui-terms.json +0 -25
package/test-data/sample-project/src/resources/language=nl-BE/ui-terms.json +0 -17
package/test-data/sample-project/src/resources/region=europe/feature-flags.json +0 -17
package/test-data/sample-project/src/resources/region=north-america/feature-flags.json +0 -18
package/test-data/sample-project/src/resources/strings/dashboard.home=CA,language=fr.json +0 -20
package/test-data/sample-project/src/resources/strings/dashboard.json +0 -18
package/test-data/sample-project/src/resources/strings/dashboard.role=admin.json +0 -23
package/test-data/sample-project/src/resources/strings/dashboard.role=user.json +0 -21
package/test-data/sample-project/src/resources/strings/language=en-US.json +0 -16
package/test-data/sample-project/src/resources/strings.json +0 -78
package/test-data/sample-project/src/resources/territory=BE/app-config.json +0 -19
package/test-data/sample-project/src/resources/territory=CA/app-config.json +0 -21
package/test-data/sample-project/src/resources/territory=GB/app-config.json +0 -25
package/test-data/sample-project/src/resources/territory=NL/app-config.json +0 -25
package/test-data/sample-project/src/resources/ui-terms.json +0 -96
package/test-data/sample-project/src/resources-config.json +0 -111
package/tsconfig.json +0 -27
package/webpack.config.js +0 -60

package/babel.config.js DELETED Viewed

@@ -1,17 +0,0 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          browsers: ['last 2 versions', 'not dead']
-        },
-        useBuiltIns: 'usage',
-        corejs: 3
-      }
-    ],
-    '@babel/preset-react',
-    '@babel/preset-typescript'
-  ],
-  plugins: []
-};

package/config/jest.config.json DELETED Viewed

@@ -1,13 +0,0 @@
-{
-  "preset": "ts-jest",
-  "testEnvironment": "jsdom",
-  "roots": ["<rootDir>/src"],
-  "testMatch": ["**/__tests__/**/*.ts?(x)", "**/?(*.)+(spec|test).ts?(x)"],
-  "transform": {
-    "^.+\\.(ts|tsx)$": "ts-jest"
-  },
-  "moduleNameMapping": {
-    "^@/(.*)$": "<rootDir>/src/$1"
-  },
-  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.ts"]
-}

package/config/rig.json DELETED Viewed

@@ -1,16 +0,0 @@
-// 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": "app"
-}

package/postcss.config.js DELETED Viewed

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: [require('@tailwindcss/postcss'), require('autoprefixer')]
-};

package/public/index.html DELETED Viewed

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Visual browser tool for ts-res resources" />
-    <title>TS-RES Browser</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>

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

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

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

@@ -1,35 +0,0 @@
-Invoking: webpack --mode production
-asset bundle.js 2.41 MiB [emitted] [minimized] [big] (name: main) 1 related asset
-asset index.html 478 bytes [emitted]
-orphan modules 678 KiB [orphan] 353 modules
-runtime modules 1.02 KiB 6 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/ 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.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.41 MiB)
-      bundle.js
-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 21598 ms

package/src/App.tsx DELETED Viewed

@@ -1,274 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import AppLayout from './components/layout/AppLayout';
-import ImportTool from './components/tools/ImportTool';
-import SourceBrowser from './components/tools/SourceBrowser';
-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);
-  // 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) => {
-      // If we're trying to navigate away from configuration and have unsaved changes
-      if (state.selectedTool === 'configuration' && navigationWarning.state.hasUnsavedChanges) {
-        navigationWarning.actions.showWarning(tool);
-        return;
-      }
-      // Otherwise, navigate normally
-      actions.setSelectedTool(tool);
-    },
-    [state.selectedTool, navigationWarning, actions]
-  );
-  // Handle save and continue from navigation warning
-  const handleSaveAndContinue = useCallback(() => {
-    // Call the configuration tool's save handler if available
-    if (configSaveHandlerRef.current) {
-      configSaveHandlerRef.current();
-    }
-    const pendingTool = navigationWarning.actions.confirmNavigation();
-    if (pendingTool) {
-      actions.setSelectedTool(pendingTool);
-    }
-  }, [navigationWarning, actions]);
-  // Handle discard changes and continue
-  const handleDiscardAndContinue = useCallback(() => {
-    const pendingTool = navigationWarning.actions.confirmNavigation();
-    if (pendingTool) {
-      actions.setSelectedTool(pendingTool);
-    }
-  }, [navigationWarning, actions]);
-  const renderTool = () => {
-    switch (state.selectedTool) {
-      case 'import':
-        return (
-          <ImportTool
-            onMessage={actions.addMessage}
-            fileImport={fileImport}
-            resourceManager={resourceManager}
-          />
-        );
-      case 'source':
-        return <SourceBrowser onMessage={actions.addMessage} resourceManager={resourceManager} />;
-      case 'filter':
-        return (
-          <FilterTool
-            onMessage={actions.addMessage}
-            resourceManager={resourceManager}
-            filterState={state.filterState}
-            filterActions={{
-              updateFilterEnabled: actions.updateFilterEnabled,
-              updateFilterValues: actions.updateFilterValues,
-              applyFilterValues: actions.applyFilterValues,
-              resetFilterValues: actions.resetFilterValues,
-              updateReduceQualifiers: actions.updateReduceQualifiers
-            }}
-            onFilterResult={setFilterResult}
-          />
-        );
-      case 'compiled':
-        return (
-          <CompiledBrowser
-            onMessage={actions.addMessage}
-            resourceManager={resourceManager}
-            filterState={state.filterState}
-            filterResult={filterResult}
-          />
-        );
-      case 'resolution':
-        return (
-          <ResolutionViewer
-            onMessage={actions.addMessage}
-            resourceManager={resourceManager}
-            filterState={state.filterState}
-            filterResult={filterResult}
-          />
-        );
-      case 'configuration':
-        return (
-          <ConfigurationTool
-            onMessage={actions.addMessage}
-            resourceManager={resourceManager}
-            onUnsavedChanges={navigationWarning.actions.setHasUnsavedChanges}
-            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
-            onMessage={actions.addMessage}
-            fileImport={fileImport}
-            resourceManager={resourceManager}
-          />
-        );
-    }
-  };
-  return (
-    <>
-      <AppLayout
-        selectedTool={state.selectedTool}
-        onToolSelect={handleToolSelect}
-        messages={state.messages}
-        onClearMessages={actions.clearMessages}
-      >
-        {renderTool()}
-      </AppLayout>
-      <NavigationWarningModal
-        isOpen={navigationWarning.state.isWarningOpen}
-        onCancel={navigationWarning.actions.hideWarning}
-        onConfirm={handleDiscardAndContinue}
-        onSave={handleSaveAndContinue}
-        hasUnsavedChanges={navigationWarning.state.hasUnsavedChanges}
-      />
-    </>
-  );
-};
-export default App;

package/src/cli.ts DELETED Viewed

@@ -1,44 +0,0 @@
-#!/usr/bin/env node
-import { exec } from 'child_process';
-import { join } from 'path';
-const command = process.argv[2];
-switch (command) {
-  case 'dev':
-    console.log('Starting TS-RES Browser development server...');
-    exec('npm run dev', { cwd: __dirname }, (error, stdout, stderr) => {
-      if (error) {
-        console.error(`Error: ${error}`);
-        return;
-      }
-      console.log(stdout);
-      if (stderr) console.error(stderr);
-    });
-    break;
-  case 'build':
-    console.log('Building TS-RES Browser...');
-    exec('npm run build', { cwd: __dirname }, (error, stdout, stderr) => {
-      if (error) {
-        console.error(`Error: ${error}`);
-        return;
-      }
-      console.log(stdout);
-      if (stderr) console.error(stderr);
-    });
-    break;
-  default:
-    console.log('TS-RES Browser CLI');
-    console.log('');
-    console.log('Usage:');
-    console.log('  ts-res-browser dev   - Start development server');
-    console.log('  ts-res-browser build - Build for production');
-    console.log('');
-    console.log('For development, you can also use:');
-    console.log('  rushx dev   - Start development server');
-    console.log('  rushx build - Build for production');
-    break;
-}

package/src/components/common/FileImporter.tsx DELETED Viewed

@@ -1,143 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { FolderOpenIcon, DocumentArrowUpIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-import {
-  fileImporter,
-  isFileSystemAccessSupported,
-  ImportedDirectory,
-  ImportedFile
-} from '../../utils/fileImport';
-import { Result } from '@fgv/ts-utils';
-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,
-  startInDirectory
-}) => {
-  const [isLoading, setIsLoading] = useState(false);
-  const [importMethod, setImportMethod] = useState<'modern' | 'fallback'>(
-    isFileSystemAccessSupported() ? 'modern' : 'fallback'
-  );
-  const handleDirectoryImport = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const result = await fileImporter.pickDirectory({
-        startIn: startInDirectory
-      });
-      if (result.isSuccess()) {
-        onDirectoryImported?.(result.value);
-      } else {
-        onError?.(result.error);
-      }
-    } catch (error) {
-      onError?.(`Unexpected error: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onDirectoryImported, onError, startInDirectory]);
-  const handleFileImport = useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const result = await fileImporter.pickFiles({
-        acceptedTypes: ['.json'],
-        multiple: true,
-        startIn: startInDirectory
-      });
-      if (result.isSuccess()) {
-        onFilesImported?.(result.value);
-      } else {
-        onError?.(result.error);
-      }
-    } catch (error) {
-      onError?.(`Unexpected error: ${error instanceof Error ? error.message : String(error)}`);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [onFilesImported, onError, startInDirectory]);
-  return (
-    <div className="space-y-4">
-      {/* Import Method Info */}
-      <div className="flex items-center space-x-2 text-sm text-gray-600">
-        {importMethod === 'modern' ? (
-          <>
-            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-            <span>Using modern File System Access API</span>
-          </>
-        ) : (
-          <>
-            <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
-            <span>Using fallback file input (limited browser support)</span>
-          </>
-        )}
-      </div>
-      {/* Import Controls */}
-      <div className="flex flex-col space-y-3">
-        {/* Directory Import */}
-        <button
-          onClick={handleDirectoryImport}
-          disabled={isLoading}
-          className="flex items-center justify-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          <FolderOpenIcon className="w-5 h-5" />
-          <span>{isLoading ? 'Importing...' : 'Import Resource Directory'}</span>
-        </button>
-        {/* File Import */}
-        <button
-          onClick={handleFileImport}
-          disabled={isLoading}
-          className="flex items-center justify-center space-x-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          <DocumentArrowUpIcon className="w-5 h-5" />
-          <span>{isLoading ? 'Importing...' : 'Import Resource Files'}</span>
-        </button>
-      </div>
-      {/* Browser Compatibility Warning */}
-      {importMethod === 'fallback' && (
-        <div className="flex items-start space-x-2 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-          <ExclamationTriangleIcon className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" />
-          <div className="text-sm text-yellow-800">
-            <p className="font-medium">Limited Browser Support</p>
-            <p className="mt-1">
-              Your browser doesn't support the File System Access API. For the best experience, use Chrome,
-              Edge, or another Chromium-based browser.
-            </p>
-          </div>
-        </div>
-      )}
-      {/* Usage Instructions */}
-      <div className="text-sm text-gray-600 space-y-2">
-        <p className="font-medium">Import Options:</p>
-        <ul className="list-disc list-inside space-y-1 ml-2">
-          <li>
-            <strong>Import Directory:</strong> Select a folder containing ts-res resources
-          </li>
-          <li>
-            <strong>Import Files:</strong> Select individual JSON resource files
-          </li>
-        </ul>
-        <p className="mt-2">
-          The importer will automatically detect and parse ts-res resource formats including Resource
-          Collections, Resource Trees, and simple JSON files.
-        </p>
-      </div>
-    </div>
-  );
-};
-export default FileImporter;

package/src/components/common/NavigationWarningModal.tsx DELETED Viewed

@@ -1,62 +0,0 @@
-import React from 'react';
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
-interface NavigationWarningModalProps {
-  isOpen: boolean;
-  onCancel: () => void;
-  onConfirm: () => void;
-  onSave?: () => void;
-  hasUnsavedChanges: boolean;
-}
-const NavigationWarningModal: React.FC<NavigationWarningModalProps> = ({
-  isOpen,
-  onCancel,
-  onConfirm,
-  onSave,
-  hasUnsavedChanges
-}) => {
-  if (!isOpen) return null;
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div className="bg-white rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
-        <div className="flex items-center space-x-3 mb-4">
-          <ExclamationTriangleIcon className="h-6 w-6 text-amber-500" />
-          <h3 className="text-lg font-medium text-gray-900">Unsaved Changes</h3>
-        </div>
-        <p className="text-sm text-gray-600 mb-6">
-          You have unsaved configuration changes. What would you like to do?
-        </p>
-        <div className="flex justify-end space-x-3">
-          <button
-            onClick={onCancel}
-            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            Cancel
-          </button>
-          <button
-            onClick={onConfirm}
-            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            Discard Changes
-          </button>
-          {onSave && (
-            <button
-              onClick={onSave}
-              className="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              Save & Continue
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-export default NavigationWarningModal;

package/src/components/layout/AppLayout.tsx DELETED Viewed

@@ -1,46 +0,0 @@
-import React from 'react';
-import Header from './Header';
-import Sidebar from './Sidebar';
-import MessagesWindow from './MessagesWindow';
-import { Tool } from '../../types/app';
-interface AppLayoutProps {
-  children: React.ReactNode;
-  selectedTool: Tool;
-  onToolSelect: (tool: Tool) => void;
-  messages: Array<{
-    id: string;
-    type: 'info' | 'warning' | 'error' | 'success';
-    message: string;
-    timestamp: Date;
-  }>;
-  onClearMessages: () => void;
-}
-const AppLayout: React.FC<AppLayoutProps> = ({
-  children,
-  selectedTool,
-  onToolSelect,
-  messages,
-  onClearMessages
-}) => {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <Header />
-      <div className="flex">
-        <Sidebar selectedTool={selectedTool} onToolSelect={onToolSelect} />
-        <main className="flex-1 overflow-hidden">
-          <div className="h-full flex flex-col">
-            <div className="flex-1 overflow-auto">{children}</div>
-            <MessagesWindow messages={messages} onClearMessages={onClearMessages} />
-          </div>
-        </main>
-      </div>
-    </div>
-  );
-};
-export default AppLayout;