npm - @fgv/ts-res-browser - Versions diffs - 1.0.0 - Mend

@fgv/ts-res-browser 1.0.0

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 (95) hide show

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

package/dist/bundle.js.LICENSE.txt ADDED Viewed

@@ -0,0 +1,62 @@
+/* @license
+Papa Parse
+v5.4.1
+https://github.com/mholt/PapaParse
+License: MIT
+*/
+/*!
+   * mustache.js - Logic-less {{mustache}} templates with JavaScript
+   * http://github.com/janl/mustache.js
+   */
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <https://feross.org>
+ * @license  MIT
+ */
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
+/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+/**
+ * @license React
+ * react-dom-client.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react-dom.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * react.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * @license React
+ * scheduler.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/dist/index.html ADDED Viewed

@@ -0,0 +1 @@

+ <!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><script defer="defer" src="bundle.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

package/package.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "name": "@fgv/ts-res-browser",
+  "version": "1.0.0",
+  "description": "Visual browser tool for ts-res resources",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "bin": {
+    "ts-res-browser": "./lib/cli.js"
+  },
+  "keywords": [
+    "ts-res",
+    "browser",
+    "tool",
+    "resource",
+    "visualization"
+  ],
+  "author": "Erik Fortune",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "dependencies": {
+    "react": "~19.1.0",
+    "react-dom": "~19.1.0",
+    "@heroicons/react": "~2.2.0",
+    "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"
+  },
+  "devDependencies": {
+    "@types/react": "~19.1.8",
+    "@types/react-dom": "~19.1.6",
+    "@types/node": "^20.14.9",
+    "typescript": "^5.7.3",
+    "webpack": "~5.100.1",
+    "webpack-cli": "~6.0.1",
+    "webpack-dev-server": "~5.2.2",
+    "@babel/core": "~7.28.0",
+    "@babel/preset-env": "~7.28.0",
+    "@babel/preset-react": "~7.27.1",
+    "@babel/preset-typescript": "~7.27.1",
+    "babel-loader": "~10.0.0",
+    "css-loader": "~7.1.2",
+    "style-loader": "~4.0.0",
+    "postcss-loader": "~8.1.1",
+    "postcss": "~8.5.6",
+    "autoprefixer": "~10.4.21",
+    "tailwindcss": "~4.1.11",
+    "html-webpack-plugin": "~5.6.3",
+    "jest": "^29.7.0",
+    "rimraf": "^5.0.7",
+    "@tailwindcss/postcss": "~4.1.11",
+    "path-browserify": "~1.0.1",
+    "crypto-browserify": "~3.12.1",
+    "stream-browserify": "~3.0.0",
+    "util": "~0.12.5",
+    "buffer": "~6.0.3",
+    "process": "~0.11.10",
+    "@rushstack/heft-web-rig": "~0.29.0",
+    "@rushstack/heft": "~0.74.0",
+    "@rushstack/heft-api-extractor-plugin": "~0.4.8",
+    "@rushstack/heft-jest-plugin": "~0.16.9",
+    "@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"
+  },
+  "scripts": {
+    "build": "webpack --mode production",
+    "dev": "webpack serve --mode development",
+    "clean": "rimraf lib dist",
+    "test": "jest"
+  }
+}

package/postcss.config.js ADDED Viewed

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

package/public/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!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 ADDED Viewed

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

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

@@ -0,0 +1,35 @@
+Invoking: webpack --mode production
+asset bundle.js 2.31 MiB [emitted] [minimized] [big] (name: main) 1 related asset
+asset index.html 478 bytes [emitted]
+orphan modules 636 KiB [orphan] 348 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
+  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
+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)
+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)
+      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 19176 ms

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,153 @@
+import React, { useCallback } 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 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 { FilterResult } from './utils/filterResources';
+import { Tool } from './types/app';
+const App: React.FC = () => {
+  const { state, actions } = useAppState();
+  const fileImport = useFileImport();
+  const resourceManager = useResourceManager();
+  const navigationWarning = useNavigationWarning();
+  // 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);
+  // 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}
+          />
+        );
+      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 ADDED Viewed

@@ -0,0 +1,44 @@
+#!/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 ADDED Viewed

@@ -0,0 +1,138 @@
+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;
+}
+export const FileImporter: React.FC<FileImporterProps> = ({
+  onDirectoryImported,
+  onFilesImported,
+  onError
+}) => {
+  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();
+      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]);
+  const handleFileImport = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = await fileImporter.pickFiles({
+        acceptedTypes: ['.json'],
+        multiple: true
+      });
+      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]);
+  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 ADDED Viewed

@@ -0,0 +1,62 @@
+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 ADDED Viewed

@@ -0,0 +1,46 @@
+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;

package/src/components/layout/Header.tsx ADDED Viewed

@@ -0,0 +1,22 @@
+import React from 'react';
+import { DocumentMagnifyingGlassIcon } from '@heroicons/react/24/outline';
+const Header: React.FC = () => {
+  return (
+    <header className="bg-white shadow-sm border-b border-gray-200">
+      <div className="container mx-auto px-4 py-4">
+        <div className="flex items-center space-x-3">
+          <DocumentMagnifyingGlassIcon className="h-8 w-8 text-blue-600" />
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">TS-RES Browser</h1>
+            <p className="text-sm text-gray-600">
+              Visual tool for loading, browsing, and experimenting with ts-res resources
+            </p>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;