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

package/src/components/tools/ConfigurationTool.tsx

@@ -1,1405 +0,0 @@
-import React, { useState, useMemo, useCallback } from 'react';
-import {
-  CogIcon,
-  PlusIcon,
-  PencilIcon,
-  TrashIcon,
-  FolderOpenIcon,
-  DocumentArrowDownIcon,
-  CodeBracketIcon,
-  ChevronDownIcon,
-  ChevronUpIcon
-} from '@heroicons/react/24/outline';
-import { UseResourceManagerReturn } from '../../hooks/useResourceManager';
-import { Message } from '../../types/app';
-import { Config } from '@fgv/ts-res';
-import {
-  DEFAULT_SYSTEM_CONFIGURATION,
-  getDefaultSystemConfiguration,
-  getAvailablePredefinedConfigurations,
-  getPredefinedConfiguration
-} from '../../utils/tsResIntegration';
-import { fileImporter } from '../../utils/fileImport';
-import { Result } from '@fgv/ts-utils';
-import { useUrlParams } from '../../hooks/useUrlParams';
-
-interface ConfigurationToolProps {
-  onMessage?: (type: Message['type'], message: string) => void;
-  resourceManager: UseResourceManagerReturn;
-  onUnsavedChanges?: (hasChanges: boolean) => void;
-  onSaveHandlerRef?: React.MutableRefObject<(() => void) | null>;
-}
-
-type ActivePanel = 'qualifiers' | 'qualifier-types' | 'resource-types';
-
-const ConfigurationTool: React.FC<ConfigurationToolProps> = ({
-  onMessage,
-  resourceManager,
-  onUnsavedChanges,
-  onSaveHandlerRef
-}) => {
-  const { state: resourceState } = resourceManager;
-  const { urlParams } = useUrlParams();
-  const [activePanel, setActivePanel] = useState<ActivePanel>('qualifiers');
-
-  // Check if we have processed resources
-  const hasProcessedResources = !!resourceState.processedResources;
-
-  // Check if we have an active configuration
-  const hasActiveConfiguration = !!resourceState.activeConfiguration;
-
-  // Get current system configuration
-  const systemConfiguration = useMemo(() => {
-    // Always use active configuration if available, regardless of processed resources
-    // This preserves the user's configuration context even after importing resources
-    return resourceState.activeConfiguration || DEFAULT_SYSTEM_CONFIGURATION;
-  }, [resourceState.activeConfiguration]);
-
-  // State for configuration edits
-  const [currentConfig, setCurrentConfig] = useState<Config.Model.ISystemConfiguration>(systemConfiguration);
-
-  // Update currentConfig when systemConfiguration changes
-  React.useEffect(() => {
-    setCurrentConfig(systemConfiguration);
-  }, [systemConfiguration]);
-
-  // State for editing items
-  const [editingQualifierType, setEditingQualifierType] = useState<string | null>(null);
-  const [editingQualifier, setEditingQualifier] = useState<string | null>(null);
-  const [editingMetadata, setEditingMetadata] = useState(false);
-
-  // Check if current config has changes compared to system configuration
-  const hasChanges = useMemo(() => {
-    return JSON.stringify(currentConfig) !== JSON.stringify(systemConfiguration);
-  }, [currentConfig, systemConfiguration]);
-
-  // Notify parent about unsaved changes
-  React.useEffect(() => {
-    onUnsavedChanges?.(hasChanges);
-  }, [hasChanges, onUnsavedChanges]);
-
-  // State for JSON view
-  const [showJsonView, setShowJsonView] = useState(false);
-
-  // Load configuration from file
-  const handleLoadConfiguration = useCallback(async () => {
-    try {
-      const fileResult = await fileImporter.pickFiles({
-        acceptedTypes: ['.json'],
-        multiple: false,
-        startIn: urlParams.configStartDir
-      });
-
-      if (fileResult.isFailure()) {
-        onMessage?.('error', `Failed to load configuration file: ${fileResult.message}`);
-        return;
-      }
-
-      const files = fileResult.value;
-      if (files.length === 0) {
-        onMessage?.('warning', 'No configuration file selected');
-        return;
-      }
-
-      const file = files[0];
-      let parsedConfig: Config.Model.ISystemConfiguration;
-
-      try {
-        parsedConfig = JSON.parse(file.content);
-      } catch (parseError) {
-        onMessage?.(
-          'error',
-          `Failed to parse configuration file: ${
-            parseError instanceof Error ? parseError.message : String(parseError)
-          }`
-        );
-        return;
-      }
-
-      // Validate the configuration structure
-      if (!parsedConfig.qualifierTypes || !parsedConfig.qualifiers || !parsedConfig.resourceTypes) {
-        onMessage?.(
-          'error',
-          'Invalid configuration file: missing required sections (qualifierTypes, qualifiers, resourceTypes)'
-        );
-        return;
-      }
-
-      // Update the local config state for preview
-      setCurrentConfig(parsedConfig);
-      onMessage?.(
-        'success',
-        `Configuration loaded successfully from ${file.name}${
-          parsedConfig.name ? ` (${parsedConfig.name})` : ''
-        }. Click "Apply Configuration" to activate it.`
-      );
-    } catch (error) {
-      onMessage?.(
-        'error',
-        `Unexpected error loading configuration: ${error instanceof Error ? error.message : String(error)}`
-      );
-    }
-  }, [resourceManager.actions, onMessage]);
-
-  // Load predefined configuration
-  const handleLoadPredefinedConfiguration = useCallback(
-    async (configName: Config.PredefinedSystemConfiguration) => {
-      try {
-        const configResult = getPredefinedConfiguration(configName);
-
-        if (configResult.isFailure()) {
-          onMessage?.(
-            'error',
-            `Failed to load predefined configuration '${configName}': ${configResult.message}`
-          );
-          return;
-        }
-
-        const config = configResult.value;
-
-        // Update the local config state for preview
-        setCurrentConfig(config);
-        onMessage?.(
-          'success',
-          `Predefined configuration "${config.name}" loaded successfully. Click "Apply Configuration" to activate it.`
-        );
-      } catch (error) {
-        onMessage?.(
-          'error',
-          `Unexpected error loading predefined configuration: ${
-            error instanceof Error ? error.message : String(error)
-          }`
-        );
-      }
-    },
-    [onMessage]
-  );
-
-  // Apply configuration handler
-  const handleApplyConfiguration = useCallback(
-    (newConfig: Config.Model.ISystemConfiguration) => {
-      try {
-        // Apply the configuration through the resource manager
-        resourceManager.actions.applyConfiguration(newConfig);
-
-        // Update local state
-        setCurrentConfig(newConfig);
-
-        // Provide user feedback
-        const configName = newConfig.name || 'Unnamed configuration';
-        onMessage?.(
-          'success',
-          `Configuration "${configName}" applied successfully. Resources will use this configuration when loaded.`
-        );
-      } catch (error) {
-        onMessage?.(
-          'error',
-          `Failed to apply configuration: ${error instanceof Error ? error.message : String(error)}`
-        );
-      }
-    },
-    [resourceManager.actions, onMessage]
-  );
-
-  // Handle save and navigate (called from navigation warning modal)
-  const handleSaveAndNavigate = useCallback(() => {
-    if (hasChanges) {
-      handleApplyConfiguration(currentConfig);
-    }
-  }, [hasChanges, currentConfig, handleApplyConfiguration]);
-
-  // Set the save handler reference for the parent component
-  React.useEffect(() => {
-    if (onSaveHandlerRef) {
-      onSaveHandlerRef.current = handleSaveAndNavigate;
-    }
-    return () => {
-      if (onSaveHandlerRef) {
-        onSaveHandlerRef.current = null;
-      }
-    };
-  }, [handleSaveAndNavigate, onSaveHandlerRef]);
-
-  // Restore defaults handler
-  const handleRestoreDefaults = useCallback(() => {
-    try {
-      // Get the latest default configuration
-      const defaultConfig = getDefaultSystemConfiguration();
-
-      // Apply the default configuration
-      resourceManager.actions.applyConfiguration(defaultConfig);
-
-      // Update local state
-      setCurrentConfig(defaultConfig);
-
-      // Provide user feedback
-      onMessage?.('success', 'Default configuration restored successfully.');
-    } catch (error) {
-      onMessage?.(
-        'error',
-        `Failed to restore defaults: ${error instanceof Error ? error.message : String(error)}`
-      );
-    }
-  }, [resourceManager.actions, onMessage]);
-
-  // Handle metadata editing
-  const handleSaveMetadata = useCallback(
-    (name: string, description: string) => {
-      const updatedConfig = {
-        ...currentConfig,
-        name: name || undefined,
-        description: description || undefined
-      };
-      setCurrentConfig(updatedConfig);
-      setEditingMetadata(false);
-      onMessage?.('info', 'Configuration metadata updated');
-    },
-    [currentConfig, onMessage]
-  );
-
-  const handleCancelMetadataEdit = useCallback(() => {
-    setEditingMetadata(false);
-  }, []);
-
-  // Export configuration to JSON file
-  const handleExportConfiguration = useCallback(() => {
-    try {
-      const configJson = JSON.stringify(currentConfig, null, 2);
-      const blob = new Blob([configJson], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `${currentConfig.name || 'configuration'}.json`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-
-      onMessage?.('success', 'Configuration exported successfully');
-    } catch (error) {
-      onMessage?.(
-        'error',
-        `Failed to export configuration: ${error instanceof Error ? error.message : String(error)}`
-      );
-    }
-  }, [currentConfig, onMessage]);
-
-  const handleAddQualifierType = useCallback(() => {
-    const newQualifierType: Config.Model.ISystemConfiguration['qualifierTypes'][0] = {
-      name: `newType${currentConfig.qualifierTypes.length + 1}`,
-      systemType: 'literal',
-      configuration: {
-        allowContextList: true,
-        caseSensitive: true,
-        enumeratedValues: ['value1', 'value2']
-      }
-    };
-
-    const updatedConfig = {
-      ...currentConfig,
-      qualifierTypes: [...currentConfig.qualifierTypes, newQualifierType]
-    };
-
-    setCurrentConfig(updatedConfig);
-    onMessage?.('info', `Added qualifier type: ${newQualifierType.name}`);
-  }, [currentConfig, onMessage]);
-
-  const handleEditQualifierType = useCallback((typeName: string) => {
-    setEditingQualifierType(typeName);
-  }, []);
-
-  const handleSaveQualifierType = useCallback(
-    (typeName: string, updatedType: Config.Model.ISystemConfiguration['qualifierTypes'][0]) => {
-      const updatedConfig = {
-        ...currentConfig,
-        qualifierTypes: currentConfig.qualifierTypes.map((type) =>
-          type.name === typeName ? updatedType : type
-        )
-      };
-      setCurrentConfig(updatedConfig);
-      setEditingQualifierType(null);
-      onMessage?.('info', `Updated qualifier type: ${updatedType.name}`);
-    },
-    [currentConfig, onMessage]
-  );
-
-  const handleCancelEditQualifierType = useCallback(() => {
-    setEditingQualifierType(null);
-  }, []);
-
-  const handleDeleteQualifierType = useCallback(
-    (typeId: string) => {
-      onMessage?.('warning', `Deleting qualifier type ${typeId} will clear all loaded resources`);
-      // TODO: Implement qualifier type deletion with confirmation
-    },
-    [onMessage]
-  );
-
-  const renderQualifierTypesPanel = () => (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-      <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-medium text-gray-900">Qualifier Types</h3>
-          <button
-            onClick={handleAddQualifierType}
-            className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <PlusIcon className="h-4 w-4 mr-1" />
-            Add Type
-          </button>
-        </div>
-        <p className="text-sm text-gray-600 mt-1">
-          {hasProcessedResources
-            ? 'Qualifier types from loaded configuration'
-            : 'Default qualifier types that will be used for resource loading'}
-        </p>
-      </div>
-      <div className="divide-y divide-gray-200">
-        {currentConfig.qualifierTypes.map((type) => (
-          <div key={type.name} className="p-4">
-            {editingQualifierType === type.name ? (
-              <QualifierTypeEditForm
-                qualifierType={type}
-                onSave={(updatedType) => handleSaveQualifierType(type.name, updatedType)}
-                onCancel={handleCancelEditQualifierType}
-              />
-            ) : (
-              <div className="flex items-center justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center space-x-3">
-                    <h4 className="text-sm font-medium text-gray-900">{type.name}</h4>
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
-                      {type.systemType}
-                    </span>
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
-                      Built-in
-                    </span>
-                  </div>
-                  <div className="mt-2 text-sm text-gray-600">
-                    <div className="grid grid-cols-2 gap-4">
-                      <div>Context List: {type.configuration?.allowContextList === false ? 'No' : 'Yes'}</div>
-                      <div>
-                        Case Sensitive:{' '}
-                        {type.systemType === 'literal' && type.configuration?.caseSensitive !== false
-                          ? 'Yes'
-                          : 'No'}
-                      </div>
-                    </div>
-                    {type.systemType === 'literal' && type.configuration?.enumeratedValues && (
-                      <div className="mt-1">Values: {type.configuration.enumeratedValues.join(', ')}</div>
-                    )}
-                    {type.systemType === 'territory' && type.configuration?.allowedTerritories && (
-                      <div className="mt-1">
-                        Territories: {type.configuration.allowedTerritories.join(', ')}
-                      </div>
-                    )}
-                    {type.systemType === 'territory' && type.configuration?.acceptLowercase && (
-                      <div className="mt-1">Accepts lowercase codes</div>
-                    )}
-                    {(type.systemType === 'literal' || type.systemType === 'territory') &&
-                      type.configuration?.hierarchy && (
-                        <div className="mt-1">
-                          Hierarchy: {Object.keys(type.configuration.hierarchy).length} relationship(s)
-                        </div>
-                      )}
-                  </div>
-                </div>
-                <div className="flex items-center space-x-2">
-                  <button
-                    onClick={() => handleEditQualifierType(type.name)}
-                    className="p-1.5 text-gray-400 hover:text-blue-600"
-                    title="Edit qualifier type"
-                  >
-                    <PencilIcon className="h-4 w-4" />
-                  </button>
-                  <button
-                    onClick={() => handleDeleteQualifierType(type.name)}
-                    className="p-1.5 text-gray-400 hover:text-red-600"
-                    title="Delete qualifier type"
-                  >
-                    <TrashIcon className="h-4 w-4" />
-                  </button>
-                </div>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-
-  const handleAddQualifier = useCallback(() => {
-    // Find an available qualifier type for the new qualifier
-    const availableType = currentConfig.qualifierTypes[0]; // Default to first type
-    if (!availableType) {
-      onMessage?.('error', 'No qualifier types available. Add a qualifier type first.');
-      return;
-    }
-
-    const newQualifier: Config.Model.ISystemConfiguration['qualifiers'][0] = {
-      name: `newQualifier${currentConfig.qualifiers.length + 1}`,
-      typeName: availableType.name,
-      defaultPriority: 100 + currentConfig.qualifiers.length * 10
-    };
-
-    const updatedConfig = {
-      ...currentConfig,
-      qualifiers: [...currentConfig.qualifiers, newQualifier]
-    };
-
-    setCurrentConfig(updatedConfig);
-    onMessage?.('info', `Added qualifier: ${newQualifier.name}`);
-  }, [currentConfig, onMessage]);
-
-  const handleEditQualifier = useCallback((qualifierName: string) => {
-    setEditingQualifier(qualifierName);
-  }, []);
-
-  const handleSaveQualifier = useCallback(
-    (qualifierName: string, updatedQualifier: Config.Model.ISystemConfiguration['qualifiers'][0]) => {
-      const updatedConfig = {
-        ...currentConfig,
-        qualifiers: currentConfig.qualifiers.map((qualifier) =>
-          qualifier.name === qualifierName ? updatedQualifier : qualifier
-        )
-      };
-      setCurrentConfig(updatedConfig);
-      setEditingQualifier(null);
-      onMessage?.('info', `Updated qualifier: ${updatedQualifier.name}`);
-    },
-    [currentConfig, onMessage]
-  );
-
-  const handleCancelEditQualifier = useCallback(() => {
-    setEditingQualifier(null);
-  }, []);
-
-  const handleDeleteQualifier = useCallback(
-    (qualifierId: string) => {
-      onMessage?.('warning', `Deleting qualifier ${qualifierId} will clear all loaded resources`);
-      // TODO: Implement qualifier deletion with confirmation
-    },
-    [onMessage]
-  );
-
-  const renderQualifiersPanel = () => (
-    <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-      <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-medium text-gray-900">Qualifiers</h3>
-          <button
-            onClick={handleAddQualifier}
-            className="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          >
-            <PlusIcon className="h-4 w-4 mr-1" />
-            Add Qualifier
-          </button>
-        </div>
-        <p className="text-sm text-gray-600 mt-1">
-          {hasProcessedResources
-            ? 'Qualifiers from loaded configuration'
-            : 'Default qualifiers that will be available for resource resolution'}
-        </p>
-      </div>
-      <div className="divide-y divide-gray-200">
-        {currentConfig.qualifiers
-          .slice()
-          .sort((a, b) => b.defaultPriority - a.defaultPriority)
-          .map((qualifier) => {
-            const qualifierType = currentConfig.qualifierTypes.find((qt) => qt.name === qualifier.typeName);
-            return (
-              <div key={qualifier.name} className="p-4">
-                {editingQualifier === qualifier.name ? (
-                  <QualifierEditForm
-                    qualifier={qualifier}
-                    qualifierTypes={currentConfig.qualifierTypes}
-                    onSave={(updatedQualifier) => handleSaveQualifier(qualifier.name, updatedQualifier)}
-                    onCancel={handleCancelEditQualifier}
-                  />
-                ) : (
-                  <div className="flex items-center justify-between">
-                    <div className="flex-1">
-                      <div className="flex items-center space-x-3">
-                        <h4 className="text-sm font-medium text-gray-900">{qualifier.name}</h4>
-                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
-                          {qualifier.typeName}
-                        </span>
-                        {qualifier.token && (
-                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
-                            token: {qualifier.token}
-                          </span>
-                        )}
-                      </div>
-                      <div className="mt-2 text-sm text-gray-600">
-                        <div className="grid grid-cols-2 gap-4">
-                          <div>Type: {qualifierType?.systemType || 'unknown'}</div>
-                          <div>Priority: {qualifier.defaultPriority}</div>
-                        </div>
-                        {qualifier.defaultValue && (
-                          <div className="mt-1">
-                            <span className="text-xs text-gray-700">
-                              <span className="font-medium">Default value:</span> {qualifier.defaultValue}
-                            </span>
-                          </div>
-                        )}
-                        {qualifier.tokenIsOptional && (
-                          <div className="mt-1">
-                            <span className="text-xs text-gray-500">Token is optional</span>
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <button
-                        onClick={() => handleEditQualifier(qualifier.name)}
-                        className="p-1.5 text-gray-400 hover:text-blue-600"
-                        title="Edit qualifier"
-                      >
-                        <PencilIcon className="h-4 w-4" />
-                      </button>
-                      <button
-                        onClick={() => handleDeleteQualifier(qualifier.name)}
-                        className="p-1.5 text-gray-400 hover:text-red-600"
-                        title="Delete qualifier"
-                      >
-                        <TrashIcon className="h-4 w-4" />
-                      </button>
-                    </div>
-                  </div>
-                )}
-              </div>
-            );
-          })}
-      </div>
-    </div>
-  );
-
-  const renderResourceTypesPanel = () => {
-    const totalResources = resourceState.processedResources?.summary.totalResources || 0;
-    return (
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
-          <h3 className="text-lg font-medium text-gray-900">Resource Types</h3>
-          <p className="text-sm text-gray-600 mt-1">
-            {hasProcessedResources
-              ? 'Resource types from loaded configuration'
-              : 'Default resource types available for use'}
-          </p>
-        </div>
-        <div className="divide-y divide-gray-200">
-          {currentConfig.resourceTypes.map((resourceType) => (
-            <div key={resourceType.name} className="p-4">
-              <div className="flex items-center justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center space-x-3">
-                    <h4 className="text-sm font-medium text-gray-900">{resourceType.name}</h4>
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
-                      {resourceType.typeName}
-                    </span>
-                    {hasProcessedResources && (
-                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
-                        {totalResources} resources
-                      </span>
-                    )}
-                  </div>
-                  <div className="mt-2 text-sm text-gray-600">
-                    JSON object resources for internationalization
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  };
-
-  const panels = [
-    { id: 'qualifiers', name: 'Qualifiers', component: renderQualifiersPanel },
-    { id: 'qualifier-types', name: 'Qualifier Types', component: renderQualifierTypesPanel },
-    { id: 'resource-types', name: 'Resource Types', component: renderResourceTypesPanel }
-  ];
-
-  return (
-    <div className="h-full flex flex-col">
-      {/* Header */}
-      <div className="flex-shrink-0 bg-white border-b border-gray-200 px-6 py-4">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <CogIcon className="h-6 w-6 text-gray-400" />
-            <div className="flex flex-col">
-              <h1 className="text-xl font-semibold text-gray-900">Configuration</h1>
-              {(currentConfig.name || currentConfig.description) && (
-                <div className="text-sm text-gray-600">
-                  {currentConfig.name && <span className="font-medium">{currentConfig.name}</span>}
-                  {currentConfig.name && currentConfig.description && (
-                    <span className="text-gray-400 mx-1">•</span>
-                  )}
-                  {currentConfig.description && <span>{currentConfig.description}</span>}
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="flex items-center space-x-2">
-            <button
-              onClick={() => setEditingMetadata(true)}
-              className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              <PencilIcon className="h-4 w-4 mr-1" />
-              Edit Metadata
-            </button>
-            <div className="relative">
-              <select
-                onChange={(e) => {
-                  if (e.target.value) {
-                    handleLoadPredefinedConfiguration(e.target.value as Config.PredefinedSystemConfiguration);
-                    e.target.value = ''; // Reset selection
-                  }
-                }}
-                className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 pr-8"
-                defaultValue=""
-              >
-                <option value="" disabled>
-                  Load Predefined...
-                </option>
-                {getAvailablePredefinedConfigurations().map((config) => (
-                  <option key={config.name} value={config.name}>
-                    {config.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <button
-              onClick={handleLoadConfiguration}
-              className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              <FolderOpenIcon className="h-4 w-4 mr-1" />
-              Load from File
-            </button>
-            <button
-              onClick={handleRestoreDefaults}
-              className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              Restore Defaults
-            </button>
-            <button
-              onClick={handleExportConfiguration}
-              className="inline-flex items-center px-3 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              <DocumentArrowDownIcon className="h-4 w-4 mr-1" />
-              Export JSON
-            </button>
-            <button
-              onClick={() => handleApplyConfiguration(currentConfig)}
-              disabled={!hasChanges}
-              className={`inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
-                hasChanges
-                  ? 'text-white bg-blue-600 hover:bg-blue-700'
-                  : 'text-gray-400 bg-gray-300 cursor-not-allowed'
-              }`}
-            >
-              Apply Configuration
-            </button>
-            <span
-              className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                hasProcessedResources
-                  ? 'bg-green-100 text-green-800'
-                  : hasActiveConfiguration
-                  ? 'bg-blue-100 text-blue-800'
-                  : 'bg-yellow-100 text-yellow-800'
-              }`}
-            >
-              {hasProcessedResources
-                ? 'Loaded Configuration'
-                : hasActiveConfiguration
-                ? 'Active Configuration'
-                : 'Default Configuration'}
-            </span>
-          </div>
-        </div>
-        <p className="mt-1 text-sm text-gray-600">
-          {hasProcessedResources
-            ? 'Configuration from loaded resources - editing will clear loaded data'
-            : hasActiveConfiguration
-            ? `Custom configuration is active - resources will use this configuration when loaded${
-                hasChanges ? ' (unsaved changes)' : ''
-              }`
-            : `Default configuration - will be used when importing resources${
-                hasChanges ? ' (unsaved changes)' : ''
-              }`}
-        </p>
-      </div>
-
-      {/* Metadata Edit Modal */}
-      {editingMetadata && (
-        <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">
-            <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Configuration Metadata</h3>
-            <MetadataEditForm
-              name={currentConfig.name || ''}
-              description={currentConfig.description || ''}
-              onSave={handleSaveMetadata}
-              onCancel={handleCancelMetadataEdit}
-            />
-          </div>
-        </div>
-      )}
-
-      {/* JSON View Toggle */}
-      <div className="flex-shrink-0 bg-white border-b border-gray-200 px-6 py-2">
-        <button
-          onClick={() => setShowJsonView(!showJsonView)}
-          className="inline-flex items-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-        >
-          <CodeBracketIcon className="h-4 w-4 mr-2" />
-          {showJsonView ? 'Hide' : 'Show'} JSON Configuration
-          {showJsonView ? (
-            <ChevronUpIcon className="h-4 w-4 ml-2" />
-          ) : (
-            <ChevronDownIcon className="h-4 w-4 ml-2" />
-          )}
-        </button>
-      </div>
-
-      {/* JSON View */}
-      {showJsonView && (
-        <div className="flex-shrink-0 bg-gray-50 border-b border-gray-200 px-6 py-4">
-          <div className="bg-white rounded-lg border border-gray-200 p-4">
-            <div className="flex items-center justify-between mb-2">
-              <h3 className="text-sm font-medium text-gray-900">Current Configuration (JSON)</h3>
-              <button
-                onClick={handleExportConfiguration}
-                className="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-              >
-                <DocumentArrowDownIcon className="h-3 w-3 mr-1" />
-                Export
-              </button>
-            </div>
-            <pre className="text-xs text-gray-800 bg-gray-50 p-3 rounded border overflow-x-auto max-h-64 overflow-y-auto">
-              {JSON.stringify(currentConfig, null, 2)}
-            </pre>
-          </div>
-        </div>
-      )}
-
-      {/* Panel Navigation */}
-      <div className="flex-shrink-0 bg-gray-50 border-b border-gray-200">
-        <nav className="flex space-x-8 px-6" aria-label="Tabs">
-          {panels.map((panel) => (
-            <button
-              key={panel.id}
-              onClick={() => setActivePanel(panel.id as ActivePanel)}
-              className={`py-4 px-1 border-b-2 font-medium text-sm ${
-                activePanel === panel.id
-                  ? 'border-blue-500 text-blue-600'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
-              }`}
-            >
-              {panel.name}
-            </button>
-          ))}
-        </nav>
-      </div>
-
-      {/* Panel Content */}
-      <div className="flex-1 overflow-y-auto p-6">
-        {panels.find((p) => p.id === activePanel)?.component()}
-      </div>
-    </div>
-  );
-};
-
-// Hierarchy Editor Component
-interface HierarchyEditorProps {
-  hierarchy: Record<string, string>;
-  onChange: (hierarchy: Record<string, string>) => void;
-  availableValues: string[];
-}
-
-const HierarchyEditor: React.FC<HierarchyEditorProps> = ({ hierarchy, onChange, availableValues }) => {
-  const [newChild, setNewChild] = useState('');
-  const [newParent, setNewParent] = useState('');
-
-  const handleAddRelationship = () => {
-    if (newChild && newParent && newChild !== newParent) {
-      const updatedHierarchy = { ...hierarchy, [newChild]: newParent };
-      onChange(updatedHierarchy);
-      setNewChild('');
-      setNewParent('');
-    }
-  };
-
-  const handleRemoveRelationship = (child: string) => {
-    const updatedHierarchy = { ...hierarchy };
-    delete updatedHierarchy[child];
-    onChange(updatedHierarchy);
-  };
-
-  const getHierarchyTree = () => {
-    const roots = new Set(availableValues);
-    const children = new Set(Object.keys(hierarchy));
-    const parents = new Set(Object.values(hierarchy));
-
-    // Remove children from roots (they have parents)
-    children.forEach((child) => roots.delete(child));
-
-    // Add parents that aren't in available values (for display purposes)
-    parents.forEach((parent) => {
-      if (!availableValues.includes(parent)) {
-        roots.add(parent);
-      }
-    });
-
-    const buildTree = (value: string, level = 0): any => {
-      const childrenOfValue = Object.entries(hierarchy).filter(([, parent]) => parent === value);
-      return {
-        value,
-        level,
-        children: childrenOfValue.map(([child]) => buildTree(child, level + 1))
-      };
-    };
-
-    return Array.from(roots).map((root) => buildTree(root));
-  };
-
-  const renderTree = (nodes: any[]): React.ReactNode => {
-    return nodes.map((node) => (
-      <div key={node.value} className="ml-4">
-        <div className="flex items-center space-x-2 py-1">
-          <span className="text-sm text-gray-700" style={{ marginLeft: `${node.level * 20}px` }}>
-            {node.level > 0 && '└─ '}
-            {node.value}
-          </span>
-          {hierarchy[node.value] && <span className="text-xs text-gray-500">→ {hierarchy[node.value]}</span>}
-        </div>
-        {node.children.length > 0 && renderTree(node.children)}
-      </div>
-    ));
-  };
-
-  return (
-    <div>
-      <label className="block text-sm font-medium text-gray-700 mb-2">Value Hierarchy</label>
-      <div className="border border-gray-300 rounded-md p-3 bg-white">
-        {/* Add new relationship form */}
-        <div className="mb-4 p-3 bg-gray-50 rounded border">
-          <div className="text-sm font-medium text-gray-700 mb-2">Add Parent-Child Relationship</div>
-          <div className="grid grid-cols-3 gap-2 items-end">
-            <div>
-              <label className="block text-xs text-gray-600">Child Value</label>
-              {availableValues.length > 0 ? (
-                <select
-                  value={newChild}
-                  onChange={(e) => setNewChild(e.target.value)}
-                  className="w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                >
-                  <option value="">Select child...</option>
-                  {availableValues.map((value) => (
-                    <option key={value} value={value}>
-                      {value}
-                    </option>
-                  ))}
-                </select>
-              ) : (
-                <input
-                  type="text"
-                  value={newChild}
-                  onChange={(e) => setNewChild(e.target.value)}
-                  placeholder="Enter child value"
-                  className="w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-                />
-              )}
-            </div>
-            <div>
-              <label className="block text-xs text-gray-600">Parent Value</label>
-              <input
-                type="text"
-                value={newParent}
-                onChange={(e) => setNewParent(e.target.value)}
-                placeholder="Enter parent value"
-                className="w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500"
-              />
-            </div>
-            <div>
-              <button
-                onClick={handleAddRelationship}
-                disabled={!newChild || !newParent || newChild === newParent}
-                className="w-full px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed"
-              >
-                Add
-              </button>
-            </div>
-          </div>
-          <div className="text-xs text-gray-500 mt-1">
-            {availableValues.length > 0
-              ? "Define which values are children of other values. The parent doesn't need to be in the enumerated values list."
-              : 'Define which values are children of other values. Enter any valid values for this qualifier type.'}
-          </div>
-        </div>
-
-        {/* Current relationships */}
-        {Object.keys(hierarchy).length > 0 && (
-          <div className="mb-4">
-            <div className="text-sm font-medium text-gray-700 mb-2">Current Relationships</div>
-            <div className="space-y-1">
-              {Object.entries(hierarchy).map(([child, parent]) => (
-                <div key={child} className="flex items-center justify-between bg-gray-50 px-2 py-1 rounded">
-                  <span className="text-sm">
-                    <span className="font-medium">{child}</span> →{' '}
-                    <span className="text-gray-600">{parent}</span>
-                  </span>
-                  <button
-                    onClick={() => handleRemoveRelationship(child)}
-                    className="text-red-600 hover:text-red-800 text-xs"
-                  >
-                    Remove
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Hierarchy visualization */}
-        {(availableValues.length > 0 || Object.keys(hierarchy).length > 0) && (
-          <div>
-            <div className="text-sm font-medium text-gray-700 mb-2">Hierarchy Tree</div>
-            <div className="bg-gray-50 p-2 rounded border text-sm font-mono">
-              {getHierarchyTree().length > 0 ? (
-                renderTree(getHierarchyTree())
-              ) : (
-                <div className="text-gray-500 text-center py-2">
-                  No hierarchy defined. Add relationships above to see the tree structure.
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-// Edit form components
-interface QualifierTypeEditFormProps {
-  qualifierType: Config.Model.ISystemConfiguration['qualifierTypes'][0];
-  onSave: (updatedType: Config.Model.ISystemConfiguration['qualifierTypes'][0]) => void;
-  onCancel: () => void;
-}
-
-const QualifierTypeEditForm: React.FC<QualifierTypeEditFormProps> = ({ qualifierType, onSave, onCancel }) => {
-  const [name, setName] = useState(qualifierType.name);
-  const [systemType, setSystemType] = useState<'language' | 'territory' | 'literal'>(
-    qualifierType.systemType
-  );
-  const [allowContextList, setAllowContextList] = useState(
-    qualifierType.configuration?.allowContextList !== false
-  );
-  const [caseSensitive, setCaseSensitive] = useState(
-    qualifierType.systemType === 'literal' && qualifierType.configuration?.caseSensitive !== false
-  );
-  const [enumeratedValues, setEnumeratedValues] = useState(
-    qualifierType.systemType === 'literal' && qualifierType.configuration?.enumeratedValues
-      ? qualifierType.configuration.enumeratedValues.join(', ')
-      : ''
-  );
-  const [allowedTerritories, setAllowedTerritories] = useState(
-    qualifierType.systemType === 'territory' && qualifierType.configuration?.allowedTerritories
-      ? qualifierType.configuration.allowedTerritories.join(', ')
-      : ''
-  );
-  const [acceptLowercase, setAcceptLowercase] = useState(
-    qualifierType.systemType === 'territory' && qualifierType.configuration?.acceptLowercase === true
-  );
-  const [hierarchy, setHierarchy] = useState<Record<string, string>>(
-    (qualifierType.systemType === 'literal' || qualifierType.systemType === 'territory') &&
-      qualifierType.configuration?.hierarchy
-      ? (qualifierType.configuration.hierarchy as Record<string, string>)
-      : {}
-  );
-
-  const handleSave = () => {
-    let updatedType: Config.Model.ISystemConfiguration['qualifierTypes'][0];
-
-    if (systemType === 'literal') {
-      const configuration: any = {
-        allowContextList,
-        caseSensitive,
-        enumeratedValues: enumeratedValues
-          .split(',')
-          .map((v) => v.trim())
-          .filter((v) => v)
-      };
-
-      // Add hierarchy if it has entries
-      if (Object.keys(hierarchy).length > 0) {
-        configuration.hierarchy = hierarchy;
-      }
-
-      updatedType = {
-        name,
-        systemType: 'literal',
-        configuration
-      };
-    } else if (systemType === 'territory') {
-      const configuration: any = {
-        allowContextList,
-        acceptLowercase
-      };
-
-      // Add allowedTerritories if specified
-      const territoryValues = allowedTerritories
-        .split(',')
-        .map((v) => v.trim().toUpperCase())
-        .filter((v) => v);
-      if (territoryValues.length > 0) {
-        configuration.allowedTerritories = territoryValues;
-      }
-
-      // Add hierarchy if it has entries
-      if (Object.keys(hierarchy).length > 0) {
-        configuration.hierarchy = hierarchy;
-      }
-
-      updatedType = {
-        name,
-        systemType: 'territory',
-        configuration
-      };
-    } else {
-      updatedType = {
-        name,
-        systemType,
-        configuration: {
-          allowContextList
-        }
-      };
-    }
-
-    onSave(updatedType);
-  };
-
-  return (
-    <div className="space-y-4 p-4 bg-gray-50 rounded-lg">
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Name</label>
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">System Type</label>
-          <select
-            value={systemType}
-            onChange={(e) => setSystemType(e.target.value as 'language' | 'territory' | 'literal')}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          >
-            <option value="language">Language</option>
-            <option value="territory">Territory</option>
-            <option value="literal">Literal</option>
-          </select>
-        </div>
-      </div>
-
-      <div className="flex items-center space-x-4">
-        <label className="flex items-center">
-          <input
-            type="checkbox"
-            checked={allowContextList}
-            onChange={(e) => setAllowContextList(e.target.checked)}
-            className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-          />
-          <span className="ml-2 text-sm text-gray-700">Allow Context List</span>
-        </label>
-
-        {systemType === 'literal' && (
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={caseSensitive}
-              onChange={(e) => setCaseSensitive(e.target.checked)}
-              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-            />
-            <span className="ml-2 text-sm text-gray-700">Case Sensitive</span>
-          </label>
-        )}
-      </div>
-
-      {systemType === 'literal' && (
-        <div>
-          <label className="block text-sm font-medium text-gray-700">
-            Enumerated Values (comma-separated)
-          </label>
-          <input
-            type="text"
-            value={enumeratedValues}
-            onChange={(e) => setEnumeratedValues(e.target.value)}
-            placeholder="value1, value2, value3"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          />
-        </div>
-      )}
-
-      {systemType === 'territory' && (
-        <div>
-          <label className="flex items-center mb-4">
-            <input
-              type="checkbox"
-              checked={acceptLowercase}
-              onChange={(e) => setAcceptLowercase(e.target.checked)}
-              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-            />
-            <span className="ml-2 text-sm text-gray-700">Accept Lowercase Territory Codes</span>
-          </label>
-        </div>
-      )}
-
-      {systemType === 'territory' && (
-        <div>
-          <label className="block text-sm font-medium text-gray-700">
-            Allowed Territories (comma-separated, optional)
-          </label>
-          <input
-            type="text"
-            value={allowedTerritories}
-            onChange={(e) => setAllowedTerritories(e.target.value)}
-            placeholder="US, CA, GB, DE (leave empty to allow all valid territory codes)"
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          />
-          <p className="mt-1 text-xs text-gray-500">
-            Territory codes will be automatically converted to uppercase. Leave empty to allow any valid
-            ISO-3166-2 Alpha-2 codes.
-          </p>
-        </div>
-      )}
-
-      {systemType === 'literal' && (
-        <HierarchyEditor
-          hierarchy={hierarchy}
-          onChange={setHierarchy}
-          availableValues={enumeratedValues
-            .split(',')
-            .map((v) => v.trim())
-            .filter((v) => v)}
-        />
-      )}
-
-      {systemType === 'territory' && (
-        <HierarchyEditor
-          hierarchy={hierarchy}
-          onChange={setHierarchy}
-          availableValues={allowedTerritories
-            .split(',')
-            .map((v) => v.trim().toUpperCase())
-            .filter((v) => v)}
-        />
-      )}
-
-      <div className="flex justify-end space-x-2">
-        <button
-          onClick={onCancel}
-          className="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
-        >
-          Cancel
-        </button>
-        <button
-          onClick={handleSave}
-          className="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  );
-};
-
-interface QualifierEditFormProps {
-  qualifier: Config.Model.ISystemConfiguration['qualifiers'][0];
-  qualifierTypes: Config.Model.ISystemConfiguration['qualifierTypes'];
-  onSave: (updatedQualifier: Config.Model.ISystemConfiguration['qualifiers'][0]) => void;
-  onCancel: () => void;
-}
-
-const QualifierEditForm: React.FC<QualifierEditFormProps> = ({
-  qualifier,
-  qualifierTypes,
-  onSave,
-  onCancel
-}) => {
-  const [name, setName] = useState(qualifier.name);
-  const [typeName, setTypeName] = useState(qualifier.typeName);
-  const [defaultPriority, setDefaultPriority] = useState(qualifier.defaultPriority);
-  const [token, setToken] = useState(qualifier.token || '');
-  const [tokenIsOptional, setTokenIsOptional] = useState(qualifier.tokenIsOptional || false);
-  const [defaultValue, setDefaultValue] = useState(qualifier.defaultValue || '');
-
-  const handleSave = () => {
-    const updatedQualifier: Config.Model.ISystemConfiguration['qualifiers'][0] = {
-      name,
-      typeName,
-      defaultPriority,
-      ...(token && { token }),
-      ...(token && { tokenIsOptional }),
-      ...(defaultValue.trim() && { defaultValue: defaultValue.trim() })
-    };
-    onSave(updatedQualifier);
-  };
-
-  return (
-    <div className="space-y-4 p-4 bg-gray-50 rounded-lg">
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Name</label>
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Type</label>
-          <select
-            value={typeName}
-            onChange={(e) => setTypeName(e.target.value)}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          >
-            {qualifierTypes.map((type) => (
-              <option key={type.name} value={type.name}>
-                {type.name} ({type.systemType})
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Default Priority</label>
-          <input
-            type="number"
-            value={defaultPriority}
-            onChange={(e) => setDefaultPriority(parseInt(e.target.value) || 0)}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          />
-        </div>
-        <div>
-          <label className="block text-sm font-medium text-gray-700">Token (optional)</label>
-          <input
-            type="text"
-            value={token}
-            onChange={(e) => setToken(e.target.value)}
-            className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-          />
-        </div>
-      </div>
-
-      {token && (
-        <div>
-          <label className="flex items-center">
-            <input
-              type="checkbox"
-              checked={tokenIsOptional}
-              onChange={(e) => setTokenIsOptional(e.target.checked)}
-              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-            />
-            <span className="ml-2 text-sm text-gray-700">Token is optional</span>
-          </label>
-        </div>
-      )}
-
-      <div>
-        <label className="block text-sm font-medium text-gray-700">Default Value (optional)</label>
-        <input
-          type="text"
-          value={defaultValue}
-          onChange={(e) => setDefaultValue(e.target.value)}
-          placeholder="Enter default value for this qualifier"
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-        />
-        <p className="mt-1 text-xs text-gray-500">
-          The default value to use when this qualifier is not specified in a context. For list-capable
-          qualifiers, use comma-separated values (e.g., "en-US, fr-FR").
-        </p>
-      </div>
-
-      <div className="flex justify-end space-x-2">
-        <button
-          onClick={onCancel}
-          className="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
-        >
-          Cancel
-        </button>
-        <button
-          onClick={handleSave}
-          className="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  );
-};
-
-// Metadata edit form component
-interface MetadataEditFormProps {
-  name: string;
-  description: string;
-  onSave: (name: string, description: string) => void;
-  onCancel: () => void;
-}
-
-const MetadataEditForm: React.FC<MetadataEditFormProps> = ({ name, description, onSave, onCancel }) => {
-  const [localName, setLocalName] = useState(name);
-  const [localDescription, setLocalDescription] = useState(description);
-
-  const handleSave = () => {
-    onSave(localName.trim(), localDescription.trim());
-  };
-
-  return (
-    <div className="space-y-4">
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
-        <input
-          type="text"
-          value={localName}
-          onChange={(e) => setLocalName(e.target.value)}
-          placeholder="Enter configuration name"
-          className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-        />
-      </div>
-      <div>
-        <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
-        <textarea
-          value={localDescription}
-          onChange={(e) => setLocalDescription(e.target.value)}
-          placeholder="Enter configuration description"
-          rows={3}
-          className="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-        />
-      </div>
-      <div className="flex justify-end space-x-2">
-        <button
-          onClick={onCancel}
-          className="px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
-        >
-          Cancel
-        </button>
-        <button
-          onClick={handleSave}
-          className="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default ConfigurationTool;