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

package/lib/components/views/ZipLoaderView/index.js

@@ -0,0 +1,313 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { DocumentArrowDownIcon, FolderOpenIcon, CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { createBrowserZipLoader, formatFileSize, isZipFile } from '../../../utils/zipLoader';
+export const ZipLoaderView = ({ zipFileUrl, zipPath, onImport, onConfigurationLoad, onLoadComplete, onMessage, className = '' }) => {
+    const [loadingState, setLoadingState] = useState({
+        isLoading: false,
+        stage: null,
+        progress: 0,
+        message: ''
+    });
+    const [loadedState, setLoadedState] = useState({
+        result: null,
+        error: null,
+        fileName: null,
+        fileSize: null
+    });
+    const fileInputRef = useRef(null);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    // Load ZIP file with progress tracking
+    const loadZipFileInternal = useCallback(async (file) => {
+        setLoadingState({
+            isLoading: true,
+            stage: 'reading-file',
+            progress: 0,
+            message: 'Starting to load ZIP file...'
+        });
+        setLoadedState({
+            result: null,
+            error: null,
+            fileName: file.name,
+            fileSize: file.size
+        });
+        const options = {
+            autoApplyConfig: false,
+            autoProcessResources: false
+        };
+        const progressCallback = (stage, progress, message) => {
+            setLoadingState({
+                isLoading: stage !== 'complete',
+                stage,
+                progress,
+                message: message || getStageMessage(stage)
+            });
+        };
+        const loader = createBrowserZipLoader();
+        const result = await loader.loadFromFile(file, options, progressCallback);
+        if (result.isSuccess()) {
+            const zipResult = result.value;
+            setLoadedState((prev) => ({
+                ...prev,
+                result: zipResult,
+                error: null
+            }));
+            setLoadingState({
+                isLoading: false,
+                stage: 'complete',
+                progress: 100,
+                message: 'ZIP file loaded successfully'
+            });
+            onMessage?.('success', `Loaded ZIP file: ${file.name}`);
+            // Load configuration if found
+            if (zipResult.config) {
+                onConfigurationLoad?.(zipResult.config);
+                onMessage?.('info', `Configuration loaded from ZIP`);
+            }
+            // Import the raw data for processing by the orchestrator
+            if (zipResult.directory) {
+                onImport?.(zipResult.directory);
+            }
+            else if (zipResult.files.length > 0) {
+                onImport?.(zipResult.files);
+            }
+            onLoadComplete?.();
+        }
+        else {
+            const errorMessage = result.message;
+            setLoadedState((prev) => ({
+                ...prev,
+                error: errorMessage,
+                result: null
+            }));
+            setLoadingState({
+                isLoading: false,
+                stage: null,
+                progress: 0,
+                message: ''
+            });
+            onMessage?.('error', `Failed to load ZIP: ${errorMessage}`);
+        }
+    }, [onMessage, onLoadComplete]);
+    // Load ZIP from URL
+    const loadFromUrl = useCallback(async (url) => {
+        setLoadingState({
+            isLoading: true,
+            stage: 'reading-file',
+            progress: 0,
+            message: 'Fetching ZIP from URL...'
+        });
+        setLoadedState({
+            result: null,
+            error: null,
+            fileName: url.split('/').pop() || 'remote.zip',
+            fileSize: null
+        });
+        const options = {
+            autoApplyConfig: false,
+            autoProcessResources: false
+        };
+        const progressCallback = (stage, progress, message) => {
+            setLoadingState({
+                isLoading: stage !== 'complete',
+                stage,
+                progress,
+                message: message || getStageMessage(stage)
+            });
+        };
+        const loader = createBrowserZipLoader();
+        const result = await loader.loadFromUrl(url, options, progressCallback);
+        if (result.isSuccess()) {
+            const zipResult = result.value;
+            setLoadedState((prev) => ({
+                ...prev,
+                result: zipResult,
+                error: null
+            }));
+            setLoadingState({
+                isLoading: false,
+                stage: 'complete',
+                progress: 100,
+                message: 'ZIP file loaded successfully'
+            });
+            onMessage?.('success', `Loaded ZIP from URL: ${url}`);
+            // Load configuration if found
+            if (zipResult.config) {
+                onConfigurationLoad?.(zipResult.config);
+                onMessage?.('info', `Configuration loaded from ZIP`);
+            }
+            // Import the raw data for processing by the orchestrator
+            if (zipResult.directory) {
+                onImport?.(zipResult.directory);
+            }
+            else if (zipResult.files.length > 0) {
+                onImport?.(zipResult.files);
+            }
+            onLoadComplete?.();
+        }
+        else {
+            const errorMessage = result.message;
+            setLoadedState((prev) => ({
+                ...prev,
+                error: errorMessage,
+                result: null
+            }));
+            setLoadingState({
+                isLoading: false,
+                stage: null,
+                progress: 0,
+                message: ''
+            });
+            onMessage?.('error', `Failed to load ZIP from URL: ${errorMessage}`);
+        }
+    }, [onMessage, onLoadComplete]);
+    // Handle file selection - now defined after loadZipFileInternal
+    const handleFileSelect = useCallback(async (files) => {
+        if (!files || files.length === 0)
+            return;
+        const file = files[0];
+        if (!isZipFile(file.name)) {
+            setLoadedState((prev) => ({
+                ...prev,
+                error: `Selected file "${file.name}" is not a ZIP file`,
+                result: null
+            }));
+            onMessage?.('error', `File "${file.name}" is not a ZIP file`);
+            return;
+        }
+        await loadZipFileInternal(file);
+    }, [loadZipFileInternal, onMessage]);
+    // Handle drag and drop - now defined after handleFileSelect
+    const handleDrop = useCallback(async (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = e.dataTransfer.files;
+        await handleFileSelect(files);
+    }, [handleFileSelect]);
+    // Auto-load from URL parameter
+    React.useEffect(() => {
+        if (zipFileUrl && !loadingState.isLoading && !loadedState.result && !loadedState.error) {
+            loadFromUrl(zipFileUrl);
+        }
+    }, [zipFileUrl, loadFromUrl, loadingState.isLoading, loadedState.result, loadedState.error]);
+    const getStageMessage = (stage) => {
+        switch (stage) {
+            case 'reading-file':
+                return 'Reading ZIP file...';
+            case 'parsing-zip':
+                return 'Parsing ZIP archive...';
+            case 'loading-manifest':
+                return 'Loading manifest...';
+            case 'loading-config':
+                return 'Loading configuration...';
+            case 'extracting-files':
+                return 'Extracting files...';
+            case 'processing-resources':
+                return 'Processing resources...';
+            case 'complete':
+                return 'Complete!';
+            default:
+                return 'Processing...';
+        }
+    };
+    const getStageIcon = (stage) => {
+        switch (stage) {
+            case 'complete':
+                return CheckCircleIcon;
+            case null:
+                return DocumentArrowDownIcon;
+            default:
+                return ArrowPathIcon;
+        }
+    };
+    return (React.createElement("div", { className: `p-6 ${className}` },
+        React.createElement("div", { className: "flex items-center space-x-3 mb-6" },
+            React.createElement(DocumentArrowDownIcon, { className: "h-8 w-8 text-blue-600" }),
+            React.createElement("h2", { className: "text-2xl font-bold text-gray-900" }, "ZIP Loader")),
+        React.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            zipFileUrl && !loadedState.result && !loadedState.error && (React.createElement("div", { className: "mb-6 p-4 bg-blue-50 rounded-lg" },
+                React.createElement("h3", { className: "text-lg font-medium text-blue-900 mb-2" }, "Loading from URL"),
+                React.createElement("p", { className: "text-sm text-blue-700 break-all" }, zipFileUrl))),
+            !loadingState.isLoading && !loadedState.result && (React.createElement("div", { className: "border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors cursor-pointer", onDrop: handleDrop, onDragOver: handleDragOver, onClick: () => fileInputRef.current?.click() },
+                React.createElement(FolderOpenIcon, { className: "h-12 w-12 text-gray-400 mx-auto mb-4" }),
+                React.createElement("h3", { className: "text-lg font-medium text-gray-900 mb-2" }, "Select or Drop ZIP File"),
+                React.createElement("p", { className: "text-gray-600 mb-4" }, "Choose a ZIP file containing resources to load and process"),
+                React.createElement("button", { type: "button", className: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" },
+                    React.createElement(DocumentArrowDownIcon, { className: "w-4 h-4 mr-2" }),
+                    "Browse Files"),
+                React.createElement("input", { ref: fileInputRef, type: "file", accept: ".zip", onChange: (e) => handleFileSelect(e.target.files), className: "hidden" }))),
+            loadingState.isLoading && (React.createElement("div", { className: "mb-6" },
+                React.createElement("div", { className: "flex items-center justify-between mb-2" },
+                    React.createElement("div", { className: "flex items-center space-x-2" },
+                        React.createElement(getStageIcon(loadingState.stage), {
+                            className: `w-5 h-5 ${loadingState.stage === 'complete' ? 'text-green-500' : 'text-blue-500 animate-spin'}`
+                        }),
+                        React.createElement("span", { className: "text-sm font-medium text-gray-900" }, loadingState.message)),
+                    React.createElement("span", { className: "text-sm text-gray-500" },
+                        loadingState.progress,
+                        "%")),
+                React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2" },
+                    React.createElement("div", { className: "bg-blue-600 h-2 rounded-full transition-all duration-300", style: { width: `${loadingState.progress}%` } })))),
+            loadedState.result && (React.createElement("div", { className: "space-y-4" },
+                React.createElement("div", { className: "flex items-center space-x-2 text-green-600" },
+                    React.createElement(CheckCircleIcon, { className: "w-5 h-5" }),
+                    React.createElement("span", { className: "font-medium" }, "ZIP file loaded successfully")),
+                React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" },
+                    React.createElement("div", { className: "bg-gray-50 rounded-lg p-4" },
+                        React.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "File Information"),
+                        React.createElement("div", { className: "space-y-1 text-sm" },
+                            React.createElement("div", null,
+                                React.createElement("strong", null, "Name:"),
+                                " ",
+                                loadedState.fileName),
+                            loadedState.fileSize && (React.createElement("div", null,
+                                React.createElement("strong", null, "Size:"),
+                                " ",
+                                formatFileSize(loadedState.fileSize))),
+                            React.createElement("div", null,
+                                React.createElement("strong", null, "Files:"),
+                                " ",
+                                loadedState.result.files.length))),
+                    React.createElement("div", { className: "bg-gray-50 rounded-lg p-4" },
+                        React.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Content"),
+                        React.createElement("div", { className: "space-y-1 text-sm" },
+                            loadedState.result.manifest && (React.createElement("div", { className: "flex items-center space-x-1" },
+                                React.createElement(CheckCircleIcon, { className: "w-4 h-4 text-green-500" }),
+                                React.createElement("span", null, "Manifest found"))),
+                            loadedState.result.config && (React.createElement("div", { className: "flex items-center space-x-1" },
+                                React.createElement(CheckCircleIcon, { className: "w-4 h-4 text-green-500" }),
+                                React.createElement("span", null, "Configuration found"))),
+                            loadedState.result.processedResources && (React.createElement("div", { className: "flex items-center space-x-1" },
+                                React.createElement(CheckCircleIcon, { className: "w-4 h-4 text-green-500" }),
+                                React.createElement("span", null, "Resources processed")))))),
+                loadedState.result.manifest && (React.createElement("div", { className: "bg-blue-50 rounded-lg p-4" },
+                    React.createElement("h4", { className: "font-medium text-blue-900 mb-2" }, "Archive Information"),
+                    React.createElement("div", { className: "text-sm text-blue-800" },
+                        React.createElement("div", null,
+                            React.createElement("strong", null, "Created:"),
+                            ' ',
+                            new Date(loadedState.result.manifest.timestamp).toLocaleString()),
+                        loadedState.result.manifest.input && (React.createElement("div", null,
+                            React.createElement("strong", null, "Source:"),
+                            " ",
+                            loadedState.result.manifest.input.type,
+                            " -",
+                            ' ',
+                            loadedState.result.manifest.input.originalPath))))))),
+            loadedState.error && (React.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4" },
+                React.createElement("div", { className: "flex items-center space-x-2 text-red-600 mb-2" },
+                    React.createElement(ExclamationTriangleIcon, { className: "w-5 h-5" }),
+                    React.createElement("span", { className: "font-medium" }, "Error Loading ZIP")),
+                React.createElement("p", { className: "text-sm text-red-700" }, loadedState.error),
+                React.createElement("button", { onClick: () => setLoadedState((prev) => ({ ...prev, error: null })), className: "mt-3 inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" }, "Try Again"))),
+            !loadingState.isLoading && !loadedState.result && !loadedState.error && (React.createElement("div", { className: "mt-6 bg-blue-50 rounded-lg p-4" },
+                React.createElement("div", { className: "flex items-start space-x-2" },
+                    React.createElement(InformationCircleIcon, { className: "w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" }),
+                    React.createElement("div", { className: "text-sm text-blue-800" },
+                        React.createElement("p", { className: "font-medium mb-1" }, "ZIP Loader"),
+                        React.createElement("p", null, "Load ZIP archives containing resource files and configurations. The loader supports automatic configuration application and resource processing."))))))));
+};
+export default ZipLoaderView;
+//# sourceMappingURL=index.js.map

package/lib/components/views/ZipLoaderView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/views/ZipLoaderView/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback, useRef } from 'react';\nimport {\n  DocumentArrowDownIcon,\n  FolderOpenIcon,\n  CheckCircleIcon,\n  ExclamationTriangleIcon,\n  InformationCircleIcon,\n  ArrowPathIcon\n} from '@heroicons/react/24/outline';\nimport { ZipLoaderViewProps } from '../../../types';\nimport {\n  createBrowserZipLoader,\n  ZipLoadOptions,\n  ZipLoadResult,\n  ZipLoadingStage,\n  formatFileSize,\n  isZipFile\n} from '../../../utils/zipLoader';\n\ninterface LoadingState {\n  isLoading: boolean;\n  stage: ZipLoadingStage | null;\n  progress: number;\n  message: string;\n}\n\ninterface LoadedState {\n  result: ZipLoadResult | null;\n  error: string | null;\n  fileName: string | null;\n  fileSize: number | null;\n}\n\nexport const ZipLoaderView: React.FC<ZipLoaderViewProps> = ({\n  zipFileUrl,\n  zipPath,\n  onImport,\n  onConfigurationLoad,\n  onLoadComplete,\n  onMessage,\n  className = ''\n}) => {\n  const [loadingState, setLoadingState] = useState<LoadingState>({\n    isLoading: false,\n    stage: null,\n    progress: 0,\n    message: ''\n  });\n\n  const [loadedState, setLoadedState] = useState<LoadedState>({\n    result: null,\n    error: null,\n    fileName: null,\n    fileSize: null\n  });\n\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const handleDragOver = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    e.stopPropagation();\n  }, []);\n\n  // Load ZIP file with progress tracking\n  const loadZipFileInternal = useCallback(\n    async (file: File) => {\n      setLoadingState({\n        isLoading: true,\n        stage: 'reading-file',\n        progress: 0,\n        message: 'Starting to load ZIP file...'\n      });\n\n      setLoadedState({\n        result: null,\n        error: null,\n        fileName: file.name,\n        fileSize: file.size\n      });\n\n      const options: ZipLoadOptions = {\n        autoApplyConfig: false,\n        autoProcessResources: false\n      };\n\n      const progressCallback = (stage: ZipLoadingStage, progress: number, message?: string) => {\n        setLoadingState({\n          isLoading: stage !== 'complete',\n          stage,\n          progress,\n          message: message || getStageMessage(stage)\n        });\n      };\n\n      const loader = createBrowserZipLoader();\n      const result = await loader.loadFromFile(file, options, progressCallback);\n\n      if (result.isSuccess()) {\n        const zipResult = result.value;\n\n        setLoadedState((prev) => ({\n          ...prev,\n          result: zipResult,\n          error: null\n        }));\n\n        setLoadingState({\n          isLoading: false,\n          stage: 'complete',\n          progress: 100,\n          message: 'ZIP file loaded successfully'\n        });\n\n        onMessage?.('success', `Loaded ZIP file: ${file.name}`);\n\n        // Load configuration if found\n        if (zipResult.config) {\n          onConfigurationLoad?.(zipResult.config);\n          onMessage?.('info', `Configuration loaded from ZIP`);\n        }\n\n        // Import the raw data for processing by the orchestrator\n        if (zipResult.directory) {\n          onImport?.(zipResult.directory);\n        } else if (zipResult.files.length > 0) {\n          onImport?.(zipResult.files);\n        }\n\n        onLoadComplete?.();\n      } else {\n        const errorMessage = result.message;\n        setLoadedState((prev) => ({\n          ...prev,\n          error: errorMessage,\n          result: null\n        }));\n\n        setLoadingState({\n          isLoading: false,\n          stage: null,\n          progress: 0,\n          message: ''\n        });\n\n        onMessage?.('error', `Failed to load ZIP: ${errorMessage}`);\n      }\n    },\n    [onMessage, onLoadComplete]\n  );\n\n  // Load ZIP from URL\n  const loadFromUrl = useCallback(\n    async (url: string) => {\n      setLoadingState({\n        isLoading: true,\n        stage: 'reading-file',\n        progress: 0,\n        message: 'Fetching ZIP from URL...'\n      });\n\n      setLoadedState({\n        result: null,\n        error: null,\n        fileName: url.split('/').pop() || 'remote.zip',\n        fileSize: null\n      });\n\n      const options: ZipLoadOptions = {\n        autoApplyConfig: false,\n        autoProcessResources: false\n      };\n\n      const progressCallback = (stage: ZipLoadingStage, progress: number, message?: string) => {\n        setLoadingState({\n          isLoading: stage !== 'complete',\n          stage,\n          progress,\n          message: message || getStageMessage(stage)\n        });\n      };\n\n      const loader = createBrowserZipLoader();\n      const result = await loader.loadFromUrl(url, options, progressCallback);\n\n      if (result.isSuccess()) {\n        const zipResult = result.value;\n\n        setLoadedState((prev) => ({\n          ...prev,\n          result: zipResult,\n          error: null\n        }));\n\n        setLoadingState({\n          isLoading: false,\n          stage: 'complete',\n          progress: 100,\n          message: 'ZIP file loaded successfully'\n        });\n\n        onMessage?.('success', `Loaded ZIP from URL: ${url}`);\n\n        // Load configuration if found\n        if (zipResult.config) {\n          onConfigurationLoad?.(zipResult.config);\n          onMessage?.('info', `Configuration loaded from ZIP`);\n        }\n\n        // Import the raw data for processing by the orchestrator\n        if (zipResult.directory) {\n          onImport?.(zipResult.directory);\n        } else if (zipResult.files.length > 0) {\n          onImport?.(zipResult.files);\n        }\n\n        onLoadComplete?.();\n      } else {\n        const errorMessage = result.message;\n        setLoadedState((prev) => ({\n          ...prev,\n          error: errorMessage,\n          result: null\n        }));\n\n        setLoadingState({\n          isLoading: false,\n          stage: null,\n          progress: 0,\n          message: ''\n        });\n\n        onMessage?.('error', `Failed to load ZIP from URL: ${errorMessage}`);\n      }\n    },\n    [onMessage, onLoadComplete]\n  );\n\n  // Handle file selection - now defined after loadZipFileInternal\n  const handleFileSelect = useCallback(\n    async (files: FileList | null) => {\n      if (!files || files.length === 0) return;\n\n      const file = files[0];\n      if (!isZipFile(file.name)) {\n        setLoadedState((prev) => ({\n          ...prev,\n          error: `Selected file \"${file.name}\" is not a ZIP file`,\n          result: null\n        }));\n        onMessage?.('error', `File \"${file.name}\" is not a ZIP file`);\n        return;\n      }\n\n      await loadZipFileInternal(file);\n    },\n    [loadZipFileInternal, onMessage]\n  );\n\n  // Handle drag and drop - now defined after handleFileSelect\n  const handleDrop = useCallback(\n    async (e: React.DragEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const files = e.dataTransfer.files;\n      await handleFileSelect(files);\n    },\n    [handleFileSelect]\n  );\n\n  // Auto-load from URL parameter\n  React.useEffect(() => {\n    if (zipFileUrl && !loadingState.isLoading && !loadedState.result && !loadedState.error) {\n      loadFromUrl(zipFileUrl);\n    }\n  }, [zipFileUrl, loadFromUrl, loadingState.isLoading, loadedState.result, loadedState.error]);\n\n  const getStageMessage = (stage: ZipLoadingStage): string => {\n    switch (stage) {\n      case 'reading-file':\n        return 'Reading ZIP file...';\n      case 'parsing-zip':\n        return 'Parsing ZIP archive...';\n      case 'loading-manifest':\n        return 'Loading manifest...';\n      case 'loading-config':\n        return 'Loading configuration...';\n      case 'extracting-files':\n        return 'Extracting files...';\n      case 'processing-resources':\n        return 'Processing resources...';\n      case 'complete':\n        return 'Complete!';\n      default:\n        return 'Processing...';\n    }\n  };\n\n  const getStageIcon = (stage: ZipLoadingStage | null) => {\n    switch (stage) {\n      case 'complete':\n        return CheckCircleIcon;\n      case null:\n        return DocumentArrowDownIcon;\n      default:\n        return ArrowPathIcon;\n    }\n  };\n\n  return (\n    <div className={`p-6 ${className}`}>\n      <div className=\"flex items-center space-x-3 mb-6\">\n        <DocumentArrowDownIcon className=\"h-8 w-8 text-blue-600\" />\n        <h2 className=\"text-2xl font-bold text-gray-900\">ZIP Loader</h2>\n      </div>\n\n      <div className=\"bg-white rounded-lg shadow-sm border border-gray-200 p-6\">\n        {/* URL Loading Section */}\n        {zipFileUrl && !loadedState.result && !loadedState.error && (\n          <div className=\"mb-6 p-4 bg-blue-50 rounded-lg\">\n            <h3 className=\"text-lg font-medium text-blue-900 mb-2\">Loading from URL</h3>\n            <p className=\"text-sm text-blue-700 break-all\">{zipFileUrl}</p>\n          </div>\n        )}\n\n        {/* File Upload Area */}\n        {!loadingState.isLoading && !loadedState.result && (\n          <div\n            className=\"border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors cursor-pointer\"\n            onDrop={handleDrop}\n            onDragOver={handleDragOver}\n            onClick={() => fileInputRef.current?.click()}\n          >\n            <FolderOpenIcon className=\"h-12 w-12 text-gray-400 mx-auto mb-4\" />\n            <h3 className=\"text-lg font-medium text-gray-900 mb-2\">Select or Drop ZIP File</h3>\n            <p className=\"text-gray-600 mb-4\">Choose a ZIP file containing resources to load and process</p>\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n            >\n              <DocumentArrowDownIcon className=\"w-4 h-4 mr-2\" />\n              Browse Files\n            </button>\n            <input\n              ref={fileInputRef}\n              type=\"file\"\n              accept=\".zip\"\n              onChange={(e) => handleFileSelect(e.target.files)}\n              className=\"hidden\"\n            />\n          </div>\n        )}\n\n        {/* Loading Progress */}\n        {loadingState.isLoading && (\n          <div className=\"mb-6\">\n            <div className=\"flex items-center justify-between mb-2\">\n              <div className=\"flex items-center space-x-2\">\n                {React.createElement(getStageIcon(loadingState.stage), {\n                  className: `w-5 h-5 ${\n                    loadingState.stage === 'complete' ? 'text-green-500' : 'text-blue-500 animate-spin'\n                  }`\n                })}\n                <span className=\"text-sm font-medium text-gray-900\">{loadingState.message}</span>\n              </div>\n              <span className=\"text-sm text-gray-500\">{loadingState.progress}%</span>\n            </div>\n            <div className=\"w-full bg-gray-200 rounded-full h-2\">\n              <div\n                className=\"bg-blue-600 h-2 rounded-full transition-all duration-300\"\n                style={{ width: `${loadingState.progress}%` }}\n              />\n            </div>\n          </div>\n        )}\n\n        {/* Loaded Content Summary */}\n        {loadedState.result && (\n          <div className=\"space-y-4\">\n            <div className=\"flex items-center space-x-2 text-green-600\">\n              <CheckCircleIcon className=\"w-5 h-5\" />\n              <span className=\"font-medium\">ZIP file loaded successfully</span>\n            </div>\n\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n              <div className=\"bg-gray-50 rounded-lg p-4\">\n                <h4 className=\"font-medium text-gray-900 mb-2\">File Information</h4>\n                <div className=\"space-y-1 text-sm\">\n                  <div>\n                    <strong>Name:</strong> {loadedState.fileName}\n                  </div>\n                  {loadedState.fileSize && (\n                    <div>\n                      <strong>Size:</strong> {formatFileSize(loadedState.fileSize)}\n                    </div>\n                  )}\n                  <div>\n                    <strong>Files:</strong> {loadedState.result.files.length}\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"bg-gray-50 rounded-lg p-4\">\n                <h4 className=\"font-medium text-gray-900 mb-2\">Content</h4>\n                <div className=\"space-y-1 text-sm\">\n                  {loadedState.result.manifest && (\n                    <div className=\"flex items-center space-x-1\">\n                      <CheckCircleIcon className=\"w-4 h-4 text-green-500\" />\n                      <span>Manifest found</span>\n                    </div>\n                  )}\n                  {loadedState.result.config && (\n                    <div className=\"flex items-center space-x-1\">\n                      <CheckCircleIcon className=\"w-4 h-4 text-green-500\" />\n                      <span>Configuration found</span>\n                    </div>\n                  )}\n                  {loadedState.result.processedResources && (\n                    <div className=\"flex items-center space-x-1\">\n                      <CheckCircleIcon className=\"w-4 h-4 text-green-500\" />\n                      <span>Resources processed</span>\n                    </div>\n                  )}\n                </div>\n              </div>\n            </div>\n\n            {loadedState.result.manifest && (\n              <div className=\"bg-blue-50 rounded-lg p-4\">\n                <h4 className=\"font-medium text-blue-900 mb-2\">Archive Information</h4>\n                <div className=\"text-sm text-blue-800\">\n                  <div>\n                    <strong>Created:</strong>{' '}\n                    {new Date(loadedState.result.manifest.timestamp).toLocaleString()}\n                  </div>\n                  {loadedState.result.manifest.input && (\n                    <div>\n                      <strong>Source:</strong> {loadedState.result.manifest.input.type} -{' '}\n                      {loadedState.result.manifest.input.originalPath}\n                    </div>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Error Display */}\n        {loadedState.error && (\n          <div className=\"bg-red-50 border border-red-200 rounded-lg p-4\">\n            <div className=\"flex items-center space-x-2 text-red-600 mb-2\">\n              <ExclamationTriangleIcon className=\"w-5 h-5\" />\n              <span className=\"font-medium\">Error Loading ZIP</span>\n            </div>\n            <p className=\"text-sm text-red-700\">{loadedState.error}</p>\n            <button\n              onClick={() => setLoadedState((prev) => ({ ...prev, error: null }))}\n              className=\"mt-3 inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500\"\n            >\n              Try Again\n            </button>\n          </div>\n        )}\n\n        {/* Help Information */}\n        {!loadingState.isLoading && !loadedState.result && !loadedState.error && (\n          <div className=\"mt-6 bg-blue-50 rounded-lg p-4\">\n            <div className=\"flex items-start space-x-2\">\n              <InformationCircleIcon className=\"w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0\" />\n              <div className=\"text-sm text-blue-800\">\n                <p className=\"font-medium mb-1\">ZIP Loader</p>\n                <p>\n                  Load ZIP archives containing resource files and configurations. The loader supports\n                  automatic configuration application and resource processing.\n                </p>\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default ZipLoaderView;\n"]}

package/lib/hooks/useConfigurationState.d.ts

@@ -0,0 +1,46 @@
+import { Config, QualifierTypes, Qualifiers, ResourceTypes } from '@fgv/ts-res';
+import { Result } from '@fgv/ts-utils';
+import { ConfigurationChanges, ConfigurationValidationResult, ConfigurationExportOptions, ConfigurationTemplate } from '../utils/configurationUtils';
+export interface ConfigurationState {
+    currentConfiguration: Config.Model.ISystemConfiguration;
+    originalConfiguration: Config.Model.ISystemConfiguration;
+    hasUnsavedChanges: boolean;
+    changes: ConfigurationChanges;
+    validation: ConfigurationValidationResult;
+    activeTab: 'qualifierTypes' | 'qualifiers' | 'resourceTypes' | 'json';
+    isJsonView: boolean;
+    jsonString: string;
+    jsonError: string | null;
+}
+export interface ConfigurationActions {
+    loadConfiguration: (config: Config.Model.ISystemConfiguration) => void;
+    resetConfiguration: () => void;
+    applyConfiguration: () => void;
+    updateQualifierTypes: (qualifierTypes: QualifierTypes.Config.ISystemQualifierTypeConfig[]) => void;
+    updateQualifiers: (qualifiers: Qualifiers.IQualifierDecl[]) => void;
+    updateResourceTypes: (resourceTypes: ResourceTypes.Config.IResourceTypeConfig[]) => void;
+    addQualifierType: (qualifierType: QualifierTypes.Config.ISystemQualifierTypeConfig) => void;
+    updateQualifierType: (index: number, qualifierType: QualifierTypes.Config.ISystemQualifierTypeConfig) => void;
+    removeQualifierType: (index: number) => void;
+    addQualifier: (qualifier: Qualifiers.IQualifierDecl) => void;
+    updateQualifier: (index: number, qualifier: Qualifiers.IQualifierDecl) => void;
+    removeQualifier: (index: number) => void;
+    addResourceType: (resourceType: ResourceTypes.Config.IResourceTypeConfig) => void;
+    updateResourceType: (index: number, resourceType: ResourceTypes.Config.IResourceTypeConfig) => void;
+    removeResourceType: (index: number) => void;
+    setActiveTab: (tab: ConfigurationState['activeTab']) => void;
+    toggleJsonView: () => void;
+    updateJsonString: (json: string) => void;
+    applyJsonChanges: () => Result<void>;
+    exportToJson: (options?: ConfigurationExportOptions) => Result<string>;
+    importFromJson: (jsonData: string) => Result<void>;
+    loadTemplate: (templateId: string) => Result<void>;
+    validateCurrent: () => ConfigurationValidationResult;
+}
+export interface UseConfigurationStateReturn {
+    state: ConfigurationState;
+    actions: ConfigurationActions;
+    templates: ConfigurationTemplate[];
+}
+export declare function useConfigurationState(initialConfiguration?: Config.Model.ISystemConfiguration, onConfigurationChange?: (config: Config.Model.ISystemConfiguration) => void, onUnsavedChanges?: (hasChanges: boolean) => void): UseConfigurationStateReturn;
+//# sourceMappingURL=useConfigurationState.d.ts.map

package/lib/hooks/useConfigurationState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useConfigurationState.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfigurationState.ts"],"names":[],"mappings":"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"}