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

package/lib/components/common/ResourceTreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTreeView.js","sourceRoot":"","sources":["../../../src/components/common/ResourceTreeView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useMemo, useCallback } from 'react';\nimport {\n  ChevronRightIcon,\n  ChevronDownIcon,\n  DocumentTextIcon,\n  FolderIcon,\n  FolderOpenIcon\n} from '@heroicons/react/24/outline';\nimport { Resources, Runtime } from '@fgv/ts-res';\n\ninterface ResourceTreeViewProps {\n  resources: Resources.ResourceManagerBuilder | Runtime.CompiledResourceCollection;\n  selectedResourceId: string | null;\n  onResourceSelect: (resourceId: string) => void;\n  searchTerm?: string;\n  className?: string;\n}\n\ninterface TreeNode {\n  id: string;\n  name: string;\n  isLeaf: boolean;\n  resource?: Resources.Resource | Runtime.IResource;\n  children?: Map<string, TreeNode>;\n  isExpanded?: boolean;\n  isVisible?: boolean;\n  matchesSearch?: boolean;\n}\n\nexport const ResourceTreeView: React.FC<ResourceTreeViewProps> = ({\n  resources,\n  selectedResourceId,\n  onResourceSelect,\n  searchTerm = '',\n  className = ''\n}) => {\n  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());\n\n  // Build the tree structure from resources\n  const treeData = useMemo(() => {\n    if (!resources) return null;\n\n    // Get the tree from the resources\n    const treeResult = resources.getBuiltResourceTree();\n    if (treeResult.isFailure()) {\n      console.error('Failed to build resource tree:', treeResult.message);\n      return null;\n    }\n\n    return treeResult.value;\n  }, [resources]);\n\n  // Filter tree based on search term\n  const filteredTree = useMemo(() => {\n    if (!treeData || !searchTerm) return treeData;\n\n    // Helper function to check if a node or its descendants match the search\n    const markMatchingNodes = (\n      node: Runtime.ResourceTree.IReadOnlyResourceTreeNode<any>,\n      searchLower: string\n    ): boolean => {\n      const nodeIdLower = node.id.toLowerCase();\n      let matches = nodeIdLower.includes(searchLower);\n\n      if (!node.isLeaf && node.children) {\n        // Check children recursively\n        for (const child of node.children.values()) {\n          if (markMatchingNodes(child, searchLower)) {\n            matches = true;\n          }\n        }\n      }\n\n      return matches;\n    };\n\n    // Mark all matching nodes\n    const searchLower = searchTerm.toLowerCase();\n    for (const child of treeData.children.values()) {\n      markMatchingNodes(child, searchLower);\n    }\n\n    return treeData;\n  }, [treeData, searchTerm]);\n\n  // Toggle node expansion\n  const toggleNode = useCallback((nodeId: string) => {\n    setExpandedNodes((prev) => {\n      const newExpanded = new Set(prev);\n      if (newExpanded.has(nodeId)) {\n        newExpanded.delete(nodeId);\n      } else {\n        newExpanded.add(nodeId);\n      }\n      return newExpanded;\n    });\n  }, []);\n\n  // Expand all nodes that contain search matches\n  const expandMatchingNodes = useCallback(() => {\n    if (!searchTerm || !filteredTree) return;\n\n    const searchLower = searchTerm.toLowerCase();\n    const nodesToExpand = new Set<string>();\n\n    const checkNode = (node: Runtime.ResourceTree.IReadOnlyResourceTreeNode<any>) => {\n      if (node.id.toLowerCase().includes(searchLower)) {\n        // Expand all parent nodes\n        const parts = node.id.split('.');\n        for (let i = 1; i < parts.length; i++) {\n          nodesToExpand.add(parts.slice(0, i).join('.'));\n        }\n      }\n\n      if (!node.isLeaf && node.children) {\n        for (const child of node.children.values()) {\n          checkNode(child);\n        }\n      }\n    };\n\n    for (const child of filteredTree.children.values()) {\n      checkNode(child);\n    }\n\n    setExpandedNodes(nodesToExpand);\n  }, [searchTerm, filteredTree]);\n\n  // Auto-expand when search term changes\n  React.useEffect(() => {\n    if (searchTerm) {\n      expandMatchingNodes();\n    }\n  }, [searchTerm, expandMatchingNodes]);\n\n  // Render a single tree node\n  const renderTreeNode = (\n    node: Runtime.ResourceTree.IReadOnlyResourceTreeNode<Resources.Resource | Runtime.IResource>,\n    level: number = 0\n  ): React.ReactElement | null => {\n    const isExpanded = expandedNodes.has(node.id);\n    const isSelected = selectedResourceId === node.id;\n    const nodeIdLower = node.id.toLowerCase();\n    const searchLower = searchTerm.toLowerCase();\n    const matchesSearch = !searchTerm || nodeIdLower.includes(searchLower);\n\n    // Check if any children match\n    let hasMatchingChildren = false;\n    if (!node.isLeaf && node.children && searchTerm) {\n      const checkChildren = (n: Runtime.ResourceTree.IReadOnlyResourceTreeNode<any>): boolean => {\n        if (n.id.toLowerCase().includes(searchLower)) return true;\n        if (!n.isLeaf && n.children) {\n          for (const child of n.children.values()) {\n            if (checkChildren(child)) return true;\n          }\n        }\n        return false;\n      };\n\n      for (const child of node.children.values()) {\n        if (checkChildren(child)) {\n          hasMatchingChildren = true;\n          break;\n        }\n      }\n    }\n\n    // Hide nodes that don't match search and don't have matching children\n    if (searchTerm && !matchesSearch && !hasMatchingChildren) {\n      return null;\n    }\n\n    return (\n      <div key={node.id}>\n        <div\n          className={`flex items-center px-2 py-1 cursor-pointer hover:bg-gray-100 ${\n            isSelected ? 'bg-purple-50 border-l-2 border-purple-500' : ''\n          } ${matchesSearch && searchTerm ? 'bg-yellow-50' : ''}`}\n          style={{ paddingLeft: `${level * 20 + 8}px` }}\n          onClick={() => {\n            if (node.isLeaf) {\n              onResourceSelect(node.id);\n            } else {\n              toggleNode(node.id);\n            }\n          }}\n        >\n          {/* Expand/Collapse icon for branches */}\n          {!node.isLeaf && (\n            <button\n              onClick={(e) => {\n                e.stopPropagation();\n                toggleNode(node.id);\n              }}\n              className=\"mr-1 p-0.5 hover:bg-gray-200 rounded\"\n            >\n              {isExpanded ? (\n                <ChevronDownIcon className=\"w-3 h-3 text-gray-600\" />\n              ) : (\n                <ChevronRightIcon className=\"w-3 h-3 text-gray-600\" />\n              )}\n            </button>\n          )}\n\n          {/* Folder or document icon */}\n          {node.isLeaf ? (\n            <DocumentTextIcon className=\"w-4 h-4 text-green-500 mr-2 flex-shrink-0\" />\n          ) : isExpanded ? (\n            <FolderOpenIcon className=\"w-4 h-4 text-blue-500 mr-2 flex-shrink-0\" />\n          ) : (\n            <FolderIcon className=\"w-4 h-4 text-blue-500 mr-2 flex-shrink-0\" />\n          )}\n\n          {/* Node name */}\n          <span\n            className={`text-sm truncate ${isSelected ? 'font-medium text-purple-900' : 'text-gray-700'} ${\n              matchesSearch && searchTerm ? 'font-medium' : ''\n            }`}\n            title={node.id}\n          >\n            {node.name}\n          </span>\n\n          {/* Show child count for branches */}\n          {!node.isLeaf && node.children && (\n            <span className=\"ml-2 text-xs text-gray-500\">({node.children.size})</span>\n          )}\n        </div>\n\n        {/* Render children if expanded */}\n        {!node.isLeaf && node.children && isExpanded && (\n          <div>\n            {Array.from(node.children.values())\n              .sort((a, b) => {\n                // Sort folders first, then by name\n                if (a.isLeaf !== b.isLeaf) {\n                  return a.isLeaf ? 1 : -1;\n                }\n                return a.name.localeCompare(b.name);\n              })\n              .map((child) => renderTreeNode(child, level + 1))}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  if (!filteredTree) {\n    return (\n      <div className={`${className} p-4 text-center text-gray-500`}>\n        <p>No resources available</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`${className} overflow-y-auto`}>\n      {Array.from(filteredTree.children.values())\n        .sort((a, b) => {\n          // Sort folders first, then by name\n          if (a.isLeaf !== b.isLeaf) {\n            return a.isLeaf ? 1 : -1;\n          }\n          return a.name.localeCompare(b.name);\n        })\n        .map((child) => renderTreeNode(child))}\n    </div>\n  );\n};\n\nexport default ResourceTreeView;\n"]}

package/lib/components/forms/HierarchyEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface HierarchyEditorProps {
+    hierarchy: Record<string, string>;
+    onChange: (hierarchy: Record<string, string>) => void;
+    availableValues: string[];
+    className?: string;
+}
+export declare const HierarchyEditor: React.FC<HierarchyEditorProps>;
+export default HierarchyEditor;
+//# sourceMappingURL=HierarchyEditor.d.ts.map

package/lib/components/forms/HierarchyEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchyEditor.d.ts","sourceRoot":"","sources":["../../../src/components/forms/HierarchyEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IACtD,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgM1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/forms/HierarchyEditor.js

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+export const HierarchyEditor = ({ hierarchy, onChange, availableValues, className = '' }) => {
+    const [newChild, setNewChild] = useState('');
+    const [newParent, setNewParent] = useState('');
+    // Ensure hierarchy is a valid object with string values
+    const safeHierarchy = React.useMemo(() => {
+        if (!hierarchy || typeof hierarchy !== 'object') {
+            return {};
+        }
+        // Filter out any non-string values
+        const safe = {};
+        for (const [key, value] of Object.entries(hierarchy)) {
+            if (typeof value === 'string') {
+                safe[key] = value;
+            }
+        }
+        return safe;
+    }, [hierarchy]);
+    const handleAddRelationship = () => {
+        if (newChild && newParent && newChild !== newParent) {
+            const updatedHierarchy = { ...safeHierarchy, [newChild]: newParent };
+            onChange(updatedHierarchy);
+            setNewChild('');
+            setNewParent('');
+        }
+    };
+    const handleRemoveRelationship = (child) => {
+        const updatedHierarchy = { ...safeHierarchy };
+        delete updatedHierarchy[child];
+        onChange(updatedHierarchy);
+    };
+    const getHierarchyTree = () => {
+        const roots = new Set(availableValues);
+        const children = new Set(Object.keys(safeHierarchy));
+        const parents = new Set(Object.values(safeHierarchy));
+        // 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, level = 0) => {
+            const childrenOfValue = Object.entries(safeHierarchy).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) => {
+        return nodes.map((node) => {
+            const parentValue = safeHierarchy[node.value];
+            return (React.createElement("div", { key: node.value, className: "ml-4" },
+                React.createElement("div", { className: "flex items-center space-x-2 py-1" },
+                    React.createElement("span", { className: "text-sm text-gray-700", style: { marginLeft: `${node.level * 20}px` } },
+                        node.level > 0 && '└─ ',
+                        node.value),
+                    parentValue && React.createElement("span", { className: "text-xs text-gray-500" },
+                        "\u2192 ",
+                        parentValue)),
+                node.children.length > 0 && renderTree(node.children)));
+        });
+    };
+    return (React.createElement("div", { className: className },
+        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2" }, "Value Hierarchy"),
+        React.createElement("div", { className: "border border-gray-300 rounded-md p-3 bg-white" },
+            React.createElement("div", { className: "mb-4 p-3 bg-gray-50 rounded border" },
+                React.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" }, "Add Parent-Child Relationship"),
+                React.createElement("div", { className: "grid grid-cols-3 gap-2 items-end" },
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-xs text-gray-600" }, "Child Value"),
+                        availableValues.length > 0 ? (React.createElement("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" },
+                            React.createElement("option", { value: "" }, "Select child..."),
+                            availableValues.map((value) => (React.createElement("option", { key: value, value: value }, value))))) : (React.createElement("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" }))),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-xs text-gray-600" }, "Parent Value"),
+                        React.createElement("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" })),
+                    React.createElement("div", null,
+                        React.createElement("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"))),
+                React.createElement("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.')),
+            Object.keys(safeHierarchy).length > 0 && (React.createElement("div", { className: "mb-4" },
+                React.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" },
+                    "Current Relationships (",
+                    Object.keys(safeHierarchy).length,
+                    ")"),
+                React.createElement("div", { className: "max-h-24 overflow-y-auto border border-gray-200 rounded bg-white p-2" },
+                    React.createElement("div", { className: "space-y-1" }, Object.entries(safeHierarchy).map(([child, parent]) => (React.createElement("div", { key: child, className: "flex items-center justify-between bg-gray-50 px-2 py-1 rounded" },
+                        React.createElement("span", { className: "text-sm" },
+                            React.createElement("span", { className: "font-medium" }, child),
+                            " \u2192",
+                            ' ',
+                            React.createElement("span", { className: "text-gray-600" }, parent)),
+                        React.createElement("button", { onClick: () => handleRemoveRelationship(child), className: "text-red-600 hover:text-red-800 text-xs ml-2 flex-shrink-0" }, "Remove")))))))),
+            (availableValues.length > 0 || Object.keys(safeHierarchy).length > 0) && (React.createElement("div", null,
+                React.createElement("div", { className: "text-sm font-medium text-gray-700 mb-2" }, "Hierarchy Tree"),
+                React.createElement("div", { className: "bg-gray-50 border rounded max-h-32 overflow-y-auto" },
+                    React.createElement("div", { className: "p-2 text-sm font-mono" }, getHierarchyTree().length > 0 ? (renderTree(getHierarchyTree())) : (React.createElement("div", { className: "text-gray-500 text-center py-2" }, "No hierarchy defined. Add relationships above to see the tree structure.")))))))));
+};
+export default HierarchyEditor;
+//# sourceMappingURL=HierarchyEditor.js.map

package/lib/components/forms/HierarchyEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchyEditor.js","sourceRoot":"","sources":["../../../src/components/forms/HierarchyEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AASxC,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,SAAS,EACT,QAAQ,EACR,eAAe,EACf,SAAS,GAAG,EAAE,EACf,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,wDAAwD;IACxD,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACvC,IAAI,CAAC,SAAS,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE,CAAC;YAChD,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,mCAAmC;QACnC,MAAM,IAAI,GAA2B,EAAE,CAAC;QACxC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YACrD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;YACpB,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,qBAAqB,GAAG,GAAG,EAAE;QACjC,IAAI,QAAQ,IAAI,SAAS,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YACpD,MAAM,gBAAgB,GAAG,EAAE,GAAG,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;YACrE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;YAC3B,WAAW,CAAC,EAAE,CAAC,CAAC;YAChB,YAAY,CAAC,EAAE,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,CAAC,KAAa,EAAE,EAAE;QACjD,MAAM,gBAAgB,GAAG,EAAE,GAAG,aAAa,EAAE,CAAC;QAC9C,OAAO,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC/B,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC5B,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;QACrD,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC;QAEtD,iDAAiD;QACjD,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAEjD,qEAAqE;QACrE,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBACtC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,KAAK,GAAG,CAAC,EAAO,EAAE;YAClD,MAAM,eAAe,GAAG,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,MAAM,KAAK,KAAK,CAAC,CAAC;YAC/F,OAAO;gBACL,KAAK;gBACL,KAAK;gBACL,QAAQ,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;aACxE,CAAC;QACJ,CAAC,CAAC;QAEF,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAY,EAAmB,EAAE;QACnD,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACxB,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAE9C,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,MAAM;gBACpC,6BAAK,SAAS,EAAC,kCAAkC;oBAC/C,8BAAM,SAAS,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,IAAI,EAAE;wBAClF,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,KAAK;wBACvB,IAAI,CAAC,KAAK,CACN;oBACN,WAAW,IAAI,8BAAM,SAAS,EAAC,uBAAuB;;wBAAI,WAAW,CAAQ,CAC1E;gBACL,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClD,CACP,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,+BAAO,SAAS,EAAC,8CAA8C,sBAAwB;QACvF,6BAAK,SAAS,EAAC,gDAAgD;YAE7D,6BAAK,SAAS,EAAC,oCAAoC;gBACjD,6BAAK,SAAS,EAAC,wCAAwC,oCAAoC;gBAC3F,6BAAK,SAAS,EAAC,kCAAkC;oBAC/C;wBACE,+BAAO,SAAS,EAAC,6BAA6B,kBAAoB;wBACjE,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC5B,gCACE,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAC,kFAAkF;4BAE5F,gCAAQ,KAAK,EAAC,EAAE,sBAAyB;4BACxC,eAAe,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC9B,gCAAQ,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,IAC7B,KAAK,CACC,CACV,CAAC,CACK,CACV,CAAC,CAAC,CAAC,CACF,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,WAAW,EAAC,mBAAmB,EAC/B,SAAS,EAAC,kFAAkF,GAC5F,CACH,CACG;oBACN;wBACE,+BAAO,SAAS,EAAC,6BAA6B,mBAAqB;wBACnE,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,WAAW,EAAC,oBAAoB,EAChC,SAAS,EAAC,kFAAkF,GAC5F,CACE;oBACN;wBACE,gCACE,OAAO,EAAE,qBAAqB,EAC9B,QAAQ,EAAE,CAAC,QAAQ,IAAI,CAAC,SAAS,IAAI,QAAQ,KAAK,SAAS,EAC3D,SAAS,EAAC,4HAA4H,UAG/H,CACL,CACF;gBACN,6BAAK,SAAS,EAAC,4BAA4B,IACxC,eAAe,CAAC,MAAM,GAAG,CAAC;oBACzB,CAAC,CAAC,gHAAgH;oBAClH,CAAC,CAAC,mGAAmG,CACnG,CACF;YAGL,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,6BAAK,SAAS,EAAC,MAAM;gBACnB,6BAAK,SAAS,EAAC,wCAAwC;;oBAC7B,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;wBACrD;gBACN,6BAAK,SAAS,EAAC,sEAAsE;oBACnF,6BAAK,SAAS,EAAC,WAAW,IACvB,MAAM,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CACtD,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,gEAAgE;wBACzF,8BAAM,SAAS,EAAC,SAAS;4BACvB,8BAAM,SAAS,EAAC,aAAa,IAAE,KAAK,CAAQ;;4BAAG,GAAG;4BAClD,8BAAM,SAAS,EAAC,eAAe,IAAE,MAAM,CAAQ,CAC1C;wBACP,gCACE,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC9C,SAAS,EAAC,4DAA4D,aAG/D,CACL,CACP,CAAC,CACE,CACF,CACF,CACP;YAGA,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CACxE;gBACE,6BAAK,SAAS,EAAC,wCAAwC,qBAAqB;gBAC5E,6BAAK,SAAS,EAAC,oDAAoD;oBACjE,6BAAK,SAAS,EAAC,uBAAuB,IACnC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/B,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAC/B,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,gCAAgC,+EAEzC,CACP,CACG,CACF,CACF,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React, { useState } from 'react';\n\nexport interface HierarchyEditorProps {\n  hierarchy: Record<string, string>;\n  onChange: (hierarchy: Record<string, string>) => void;\n  availableValues: string[];\n  className?: string;\n}\n\nexport const HierarchyEditor: React.FC<HierarchyEditorProps> = ({\n  hierarchy,\n  onChange,\n  availableValues,\n  className = ''\n}) => {\n  const [newChild, setNewChild] = useState('');\n  const [newParent, setNewParent] = useState('');\n\n  // Ensure hierarchy is a valid object with string values\n  const safeHierarchy = React.useMemo(() => {\n    if (!hierarchy || typeof hierarchy !== 'object') {\n      return {};\n    }\n    // Filter out any non-string values\n    const safe: Record<string, string> = {};\n    for (const [key, value] of Object.entries(hierarchy)) {\n      if (typeof value === 'string') {\n        safe[key] = value;\n      }\n    }\n    return safe;\n  }, [hierarchy]);\n\n  const handleAddRelationship = () => {\n    if (newChild && newParent && newChild !== newParent) {\n      const updatedHierarchy = { ...safeHierarchy, [newChild]: newParent };\n      onChange(updatedHierarchy);\n      setNewChild('');\n      setNewParent('');\n    }\n  };\n\n  const handleRemoveRelationship = (child: string) => {\n    const updatedHierarchy = { ...safeHierarchy };\n    delete updatedHierarchy[child];\n    onChange(updatedHierarchy);\n  };\n\n  const getHierarchyTree = () => {\n    const roots = new Set(availableValues);\n    const children = new Set(Object.keys(safeHierarchy));\n    const parents = new Set(Object.values(safeHierarchy));\n\n    // Remove children from roots (they have parents)\n    children.forEach((child) => roots.delete(child));\n\n    // Add parents that aren't in available values (for display purposes)\n    parents.forEach((parent) => {\n      if (!availableValues.includes(parent)) {\n        roots.add(parent);\n      }\n    });\n\n    const buildTree = (value: string, level = 0): any => {\n      const childrenOfValue = Object.entries(safeHierarchy).filter(([, parent]) => parent === value);\n      return {\n        value,\n        level,\n        children: childrenOfValue.map(([child]) => buildTree(child, level + 1))\n      };\n    };\n\n    return Array.from(roots).map((root) => buildTree(root));\n  };\n\n  const renderTree = (nodes: any[]): React.ReactNode => {\n    return nodes.map((node) => {\n      const parentValue = safeHierarchy[node.value];\n\n      return (\n        <div key={node.value} className=\"ml-4\">\n          <div className=\"flex items-center space-x-2 py-1\">\n            <span className=\"text-sm text-gray-700\" style={{ marginLeft: `${node.level * 20}px` }}>\n              {node.level > 0 && '└─ '}\n              {node.value}\n            </span>\n            {parentValue && <span className=\"text-xs text-gray-500\">→ {parentValue}</span>}\n          </div>\n          {node.children.length > 0 && renderTree(node.children)}\n        </div>\n      );\n    });\n  };\n\n  return (\n    <div className={className}>\n      <label className=\"block text-sm font-medium text-gray-700 mb-2\">Value Hierarchy</label>\n      <div className=\"border border-gray-300 rounded-md p-3 bg-white\">\n        {/* Add new relationship form */}\n        <div className=\"mb-4 p-3 bg-gray-50 rounded border\">\n          <div className=\"text-sm font-medium text-gray-700 mb-2\">Add Parent-Child Relationship</div>\n          <div className=\"grid grid-cols-3 gap-2 items-end\">\n            <div>\n              <label className=\"block text-xs text-gray-600\">Child Value</label>\n              {availableValues.length > 0 ? (\n                <select\n                  value={newChild}\n                  onChange={(e) => setNewChild(e.target.value)}\n                  className=\"w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500\"\n                >\n                  <option value=\"\">Select child...</option>\n                  {availableValues.map((value) => (\n                    <option key={value} value={value}>\n                      {value}\n                    </option>\n                  ))}\n                </select>\n              ) : (\n                <input\n                  type=\"text\"\n                  value={newChild}\n                  onChange={(e) => setNewChild(e.target.value)}\n                  placeholder=\"Enter child value\"\n                  className=\"w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500\"\n                />\n              )}\n            </div>\n            <div>\n              <label className=\"block text-xs text-gray-600\">Parent Value</label>\n              <input\n                type=\"text\"\n                value={newParent}\n                onChange={(e) => setNewParent(e.target.value)}\n                placeholder=\"Enter parent value\"\n                className=\"w-full text-sm rounded border-gray-300 focus:border-blue-500 focus:ring-blue-500\"\n              />\n            </div>\n            <div>\n              <button\n                onClick={handleAddRelationship}\n                disabled={!newChild || !newParent || newChild === newParent}\n                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\"\n              >\n                Add\n              </button>\n            </div>\n          </div>\n          <div className=\"text-xs text-gray-500 mt-1\">\n            {availableValues.length > 0\n              ? \"Define which values are children of other values. The parent doesn't need to be in the enumerated values list.\"\n              : 'Define which values are children of other values. Enter any valid values for this qualifier type.'}\n          </div>\n        </div>\n\n        {/* Current relationships */}\n        {Object.keys(safeHierarchy).length > 0 && (\n          <div className=\"mb-4\">\n            <div className=\"text-sm font-medium text-gray-700 mb-2\">\n              Current Relationships ({Object.keys(safeHierarchy).length})\n            </div>\n            <div className=\"max-h-24 overflow-y-auto border border-gray-200 rounded bg-white p-2\">\n              <div className=\"space-y-1\">\n                {Object.entries(safeHierarchy).map(([child, parent]) => (\n                  <div key={child} className=\"flex items-center justify-between bg-gray-50 px-2 py-1 rounded\">\n                    <span className=\"text-sm\">\n                      <span className=\"font-medium\">{child}</span> →{' '}\n                      <span className=\"text-gray-600\">{parent}</span>\n                    </span>\n                    <button\n                      onClick={() => handleRemoveRelationship(child)}\n                      className=\"text-red-600 hover:text-red-800 text-xs ml-2 flex-shrink-0\"\n                    >\n                      Remove\n                    </button>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        )}\n\n        {/* Hierarchy visualization */}\n        {(availableValues.length > 0 || Object.keys(safeHierarchy).length > 0) && (\n          <div>\n            <div className=\"text-sm font-medium text-gray-700 mb-2\">Hierarchy Tree</div>\n            <div className=\"bg-gray-50 border rounded max-h-32 overflow-y-auto\">\n              <div className=\"p-2 text-sm font-mono\">\n                {getHierarchyTree().length > 0 ? (\n                  renderTree(getHierarchyTree())\n                ) : (\n                  <div className=\"text-gray-500 text-center py-2\">\n                    No hierarchy defined. Add relationships above to see the tree structure.\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default HierarchyEditor;\n"]}

package/lib/components/forms/QualifierEditForm.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Qualifiers, QualifierTypes } from '@fgv/ts-res';
+export interface QualifierEditFormProps {
+    qualifier?: Qualifiers.IQualifierDecl;
+    qualifierTypes: QualifierTypes.Config.ISystemQualifierTypeConfig[];
+    onSave: (qualifier: Qualifiers.IQualifierDecl) => void;
+    onCancel: () => void;
+    existingNames?: string[];
+}
+export declare const QualifierEditForm: React.FC<QualifierEditFormProps>;
+//# sourceMappingURL=QualifierEditForm.d.ts.map

package/lib/components/forms/QualifierEditForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualifierEditForm.d.ts","sourceRoot":"","sources":["../../../src/components/forms/QualifierEditForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC;IACtC,cAAc,EAAE,cAAc,CAAC,MAAM,CAAC,0BAA0B,EAAE,CAAC;IACnE,MAAM,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,cAAc,KAAK,IAAI,CAAC;IACvD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAWD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6U9D,CAAC"}

package/lib/components/forms/QualifierEditForm.js

@@ -0,0 +1,181 @@
+import React, { useState, useCallback } from 'react';
+import { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+export const QualifierEditForm = ({ qualifier, qualifierTypes, onSave, onCancel, existingNames = [] }) => {
+    const [formData, setFormData] = useState(() => {
+        if (qualifier) {
+            return {
+                name: qualifier.name,
+                typeName: qualifier.typeName,
+                defaultPriority: qualifier.defaultPriority,
+                token: qualifier.token || '',
+                tokenIsOptional: qualifier.tokenIsOptional || false,
+                defaultValue: qualifier.defaultValue || ''
+            };
+        }
+        return {
+            name: '',
+            typeName: qualifierTypes[0]?.name || '',
+            defaultPriority: 50,
+            token: '',
+            tokenIsOptional: false,
+            defaultValue: ''
+        };
+    });
+    const [errors, setErrors] = useState({});
+    // Get the selected qualifier type for context
+    const selectedQualifierType = qualifierTypes.find((qt) => qt.name === formData.typeName);
+    const allowsContextList = selectedQualifierType?.configuration && selectedQualifierType.configuration.allowContextList;
+    // Validation
+    const validateForm = useCallback(() => {
+        const newErrors = {};
+        if (!formData.name.trim()) {
+            newErrors.name = 'Name is required';
+        }
+        else if (existingNames.includes(formData.name) && formData.name !== qualifier?.name) {
+            newErrors.name = 'Name must be unique';
+        }
+        if (!formData.typeName) {
+            newErrors.typeName = 'Qualifier type is required';
+        }
+        if (formData.defaultPriority < 0 || formData.defaultPriority > 1000) {
+            newErrors.defaultPriority = 'Priority must be between 0 and 1000';
+        }
+        if (formData.token && !/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.token)) {
+            newErrors.token = 'Token must start with a letter and contain only letters, numbers, and underscores';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }, [formData, existingNames, qualifier?.name]);
+    const handleSave = useCallback(() => {
+        if (!validateForm())
+            return;
+        const result = {
+            name: formData.name,
+            typeName: formData.typeName,
+            defaultPriority: formData.defaultPriority,
+            ...(formData.token && { token: formData.token }),
+            ...(formData.token && formData.tokenIsOptional && { tokenIsOptional: true }),
+            ...(formData.defaultValue && { defaultValue: formData.defaultValue })
+        };
+        onSave(result);
+    }, [formData, validateForm, onSave]);
+    const updateField = useCallback((field, value) => {
+        setFormData((prev) => {
+            const updated = { ...prev, [field]: value };
+            // Auto-generate token from name if no custom token is set
+            if (field === 'name' && !prev.token) {
+                updated.token = value.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
+            }
+            // Clear tokenIsOptional if token is cleared
+            if (field === 'token' && !value) {
+                updated.tokenIsOptional = false;
+            }
+            return updated;
+        });
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: '' }));
+        }
+    }, [errors]);
+    const getDefaultValuePlaceholder = () => {
+        if (!selectedQualifierType)
+            return 'Enter default value';
+        switch (selectedQualifierType.systemType) {
+            case 'language':
+                return allowsContextList ? 'e.g., en-US or en-US,en' : 'e.g., en-US';
+            case 'territory':
+                return allowsContextList ? 'e.g., US or US,CA' : 'e.g., US';
+            case 'literal':
+                const enumValues = selectedQualifierType.configuration?.enumeratedValues;
+                if (enumValues && enumValues.length > 0) {
+                    return allowsContextList
+                        ? `e.g., ${enumValues[0]} or ${enumValues.slice(0, 2).join(',')}`
+                        : `e.g., ${enumValues[0]}`;
+                }
+                return allowsContextList ? 'e.g., value or value1,value2' : 'e.g., value';
+            default:
+                return 'Enter default value';
+        }
+    };
+    return (React.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4" },
+        React.createElement("div", { className: "bg-white rounded-lg shadow-xl max-w-2xl w-full h-full max-h-[calc(100vh-2rem)] flex flex-col" },
+            React.createElement("div", { className: "flex items-center justify-between p-6 border-b flex-shrink-0" },
+                React.createElement("h3", { className: "text-lg font-medium text-gray-900" }, qualifier ? 'Edit Qualifier' : 'Add Qualifier'),
+                React.createElement("button", { onClick: onCancel, className: "text-gray-400 hover:text-gray-600" },
+                    React.createElement(XMarkIcon, { className: "w-6 h-6" }))),
+            React.createElement("div", { className: "p-6 space-y-6 overflow-y-auto flex-1 min-h-0" },
+                React.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Name *"),
+                        React.createElement("input", { type: "text", value: formData.name, onChange: (e) => updateField('name', e.target.value), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.name ? 'border-red-300' : 'border-gray-300'}`, placeholder: "Enter qualifier name" }),
+                        errors.name && React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.name)),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Qualifier Type *"),
+                        React.createElement("select", { value: formData.typeName, onChange: (e) => updateField('typeName', e.target.value), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.typeName ? 'border-red-300' : 'border-gray-300'}` }, qualifierTypes.length === 0 ? (React.createElement("option", { value: "" }, "No qualifier types available")) : (qualifierTypes.map((type) => (React.createElement("option", { key: type.name, value: type.name },
+                            type.name,
+                            " (",
+                            type.systemType,
+                            ")"))))),
+                        errors.typeName && React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.typeName))),
+                React.createElement("div", { className: "grid grid-cols-2 gap-4" },
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Default Priority *"),
+                        React.createElement("input", { type: "number", min: "0", max: "1000", value: formData.defaultPriority, onChange: (e) => updateField('defaultPriority', parseInt(e.target.value) || 0), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.defaultPriority ? 'border-red-300' : 'border-gray-300'}`, placeholder: "50" }),
+                        errors.defaultPriority && (React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.defaultPriority)),
+                        React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Higher numbers have higher priority (0-1000)")),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" },
+                            "Token",
+                            React.createElement("span", { className: "ml-1 text-gray-500" }, "(optional)")),
+                        React.createElement("input", { type: "text", value: formData.token, onChange: (e) => updateField('token', e.target.value), className: `w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${errors.token ? 'border-red-300' : 'border-gray-300'}`, placeholder: "e.g., lang, locale" }),
+                        errors.token && React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.token),
+                        React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Used to identify this qualifier in resource names"))),
+                formData.token && (React.createElement("div", { className: "flex items-center" },
+                    React.createElement("input", { type: "checkbox", id: "tokenIsOptional", checked: formData.tokenIsOptional, onChange: (e) => updateField('tokenIsOptional', e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }),
+                    React.createElement("label", { htmlFor: "tokenIsOptional", className: "ml-2 text-sm text-gray-700" }, "Token is optional in resource names"),
+                    React.createElement("div", { className: "ml-2 group relative" },
+                        React.createElement(InformationCircleIcon, { className: "w-4 h-4 text-gray-400" }),
+                        React.createElement("div", { className: "absolute left-0 bottom-6 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10" }, "Allow resources without this qualifier token")))),
+                React.createElement("div", null,
+                    React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" },
+                        "Default Value",
+                        React.createElement("span", { className: "ml-1 text-gray-500" }, "(optional)")),
+                    React.createElement("input", { type: "text", value: formData.defaultValue, onChange: (e) => updateField('defaultValue', e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500", placeholder: getDefaultValuePlaceholder() }),
+                    React.createElement("div", { className: "mt-1 text-xs text-gray-500" }, selectedQualifierType && (React.createElement("div", null,
+                        React.createElement("p", null,
+                            "Qualifier type: ",
+                            React.createElement("span", { className: "font-medium" }, selectedQualifierType.systemType)),
+                        allowsContextList && (React.createElement("p", { className: "text-blue-600" }, "This qualifier type supports multiple values (comma-separated)")))))),
+                selectedQualifierType && (React.createElement("div", { className: "p-4 bg-gray-50 rounded-lg" },
+                    React.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Qualifier Type Information"),
+                    React.createElement("div", { className: "text-sm text-gray-600 space-y-1" },
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "font-medium" }, "System Type:"),
+                            " ",
+                            selectedQualifierType.systemType),
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "font-medium" }, "Supports Context List:"),
+                            ' ',
+                            allowsContextList ? 'Yes' : 'No'),
+                        selectedQualifierType.systemType === 'literal' && selectedQualifierType.configuration && (React.createElement(React.Fragment, null,
+                            selectedQualifierType.configuration.caseSensitive !== undefined && (React.createElement("p", null,
+                                React.createElement("span", { className: "font-medium" }, "Case Sensitive:"),
+                                ' ',
+                                selectedQualifierType.configuration.caseSensitive ? 'Yes' : 'No')),
+                            selectedQualifierType.configuration.enumeratedValues && (React.createElement("p", null,
+                                React.createElement("span", { className: "font-medium" }, "Allowed Values:"),
+                                ' ',
+                                selectedQualifierType.configuration.enumeratedValues.join(', '))))),
+                        selectedQualifierType.systemType === 'territory' && selectedQualifierType.configuration && (React.createElement(React.Fragment, null,
+                            selectedQualifierType.configuration.acceptLowercase !== undefined && (React.createElement("p", null,
+                                React.createElement("span", { className: "font-medium" }, "Accept Lowercase:"),
+                                ' ',
+                                selectedQualifierType.configuration.acceptLowercase ? 'Yes' : 'No')),
+                            selectedQualifierType.configuration.allowedTerritories && (React.createElement("p", null,
+                                React.createElement("span", { className: "font-medium" }, "Allowed Territories:"),
+                                ' ',
+                                selectedQualifierType.configuration.allowedTerritories.join(', '))))))))),
+            React.createElement("div", { className: "flex justify-end space-x-3 px-6 py-4 border-t bg-gray-50 flex-shrink-0" },
+                React.createElement("button", { onClick: onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, "Cancel"),
+                React.createElement("button", { onClick: handleSave, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" }, qualifier ? 'Save Changes' : 'Add Qualifier')))));
+};
+//# sourceMappingURL=QualifierEditForm.js.map

package/lib/components/forms/QualifierEditForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualifierEditForm.js","sourceRoot":"","sources":["../../../src/components/forms/QualifierEditForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAoB/E,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,SAAS,EACT,cAAc,EACd,MAAM,EACN,QAAQ,EACR,aAAa,GAAG,EAAE,EACnB,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,GAAG,EAAE;QACtD,IAAI,SAAS,EAAE,CAAC;YACd,OAAO;gBACL,IAAI,EAAE,SAAS,CAAC,IAAI;gBACpB,QAAQ,EAAE,SAAS,CAAC,QAAQ;gBAC5B,eAAe,EAAE,SAAS,CAAC,eAAe;gBAC1C,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,EAAE;gBAC5B,eAAe,EAAE,SAAS,CAAC,eAAe,IAAI,KAAK;gBACnD,YAAY,EAAE,SAAS,CAAC,YAAY,IAAI,EAAE;aAC3C,CAAC;QACJ,CAAC;QACD,OAAO;YACL,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,EAAE;YACvC,eAAe,EAAE,EAAE;YACnB,KAAK,EAAE,EAAE;YACT,eAAe,EAAE,KAAK;YACtB,YAAY,EAAE,EAAE;SACjB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAEjE,8CAA8C;IAC9C,MAAM,qBAAqB,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACzF,MAAM,iBAAiB,GACrB,qBAAqB,EAAE,aAAa,IAAK,qBAAqB,CAAC,aAAqB,CAAC,gBAAgB,CAAC;IAExG,aAAa;IACb,MAAM,YAAY,GAAG,WAAW,CAAC,GAAY,EAAE;QAC7C,MAAM,SAAS,GAA2B,EAAE,CAAC;QAE7C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;YAC1B,SAAS,CAAC,IAAI,GAAG,kBAAkB,CAAC;QACtC,CAAC;aAAM,IAAI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,IAAI,KAAK,SAAS,EAAE,IAAI,EAAE,CAAC;YACtF,SAAS,CAAC,IAAI,GAAG,qBAAqB,CAAC;QACzC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;YACvB,SAAS,CAAC,QAAQ,GAAG,4BAA4B,CAAC;QACpD,CAAC;QAED,IAAI,QAAQ,CAAC,eAAe,GAAG,CAAC,IAAI,QAAQ,CAAC,eAAe,GAAG,IAAI,EAAE,CAAC;YACpE,SAAS,CAAC,eAAe,GAAG,qCAAqC,CAAC;QACpE,CAAC;QAED,IAAI,QAAQ,CAAC,KAAK,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACtE,SAAS,CAAC,KAAK,GAAG,mFAAmF,CAAC;QACxG,CAAC;QAED,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,OAAO,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;IAE/C,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,YAAY,EAAE;YAAE,OAAO;QAE5B,MAAM,MAAM,GAA8B;YACxC,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;YAC3B,eAAe,EAAE,QAAQ,CAAC,eAAe;YACzC,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,KAAK,EAAE,CAAC;YAChD,GAAG,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,eAAe,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;YAC5E,GAAG,CAAC,QAAQ,CAAC,YAAY,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC,YAAY,EAAE,CAAC;SACtE,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAErC,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAAqB,EAAE,KAAU,EAAE,EAAE;QACpC,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,MAAM,OAAO,GAAG,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;YAE5C,0DAA0D;YAC1D,IAAI,KAAK,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACpC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;YACnE,CAAC;YAED,4CAA4C;YAC5C,IAAI,KAAK,KAAK,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChC,OAAO,CAAC,eAAe,GAAG,KAAK,CAAC;YAClC,CAAC;YAED,OAAO,OAAO,CAAC;QACjB,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YAClB,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAClD,CAAC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,0BAA0B,GAAG,GAAW,EAAE;QAC9C,IAAI,CAAC,qBAAqB;YAAE,OAAO,qBAAqB,CAAC;QAEzD,QAAQ,qBAAqB,CAAC,UAAU,EAAE,CAAC;YACzC,KAAK,UAAU;gBACb,OAAO,iBAAiB,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,aAAa,CAAC;YACvE,KAAK,WAAW;gBACd,OAAO,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9D,KAAK,SAAS;gBACZ,MAAM,UAAU,GAAI,qBAAqB,CAAC,aAAqB,EAAE,gBAAgB,CAAC;gBAClF,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBACxC,OAAO,iBAAiB;wBACtB,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;wBACjE,CAAC,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC/B,CAAC;gBACD,OAAO,iBAAiB,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,aAAa,CAAC;YAC5E;gBACE,OAAO,qBAAqB,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAC,mFAAmF;QAChG,6BAAK,SAAS,EAAC,8FAA8F;YAE3G,6BAAK,SAAS,EAAC,8DAA8D;gBAC3E,4BAAI,SAAS,EAAC,mCAAmC,IAC9C,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAC5C;gBACL,gCAAQ,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAC,mCAAmC;oBACtE,oBAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,CAC1B,CACL;YAGN,6BAAK,SAAS,EAAC,8CAA8C;gBAE3D,6BAAK,SAAS,EAAC,wBAAwB;oBACrC;wBACE,+BAAO,SAAS,EAAC,8CAA8C,aAAe;wBAC9E,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,QAAQ,CAAC,IAAI,EACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACpD,SAAS,EAAE,oGACT,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBACnC,EAAE,EACF,WAAW,EAAC,sBAAsB,GAClC;wBACD,MAAM,CAAC,IAAI,IAAI,2BAAG,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,IAAI,CAAK,CACtE;oBAEN;wBACE,+BAAO,SAAS,EAAC,8CAA8C,uBAAyB;wBACxF,gCACE,KAAK,EAAE,QAAQ,CAAC,QAAQ,EACxB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxD,SAAS,EAAE,oGACT,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBACvC,EAAE,IAED,cAAc,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAC7B,gCAAQ,KAAK,EAAC,EAAE,mCAAsC,CACvD,CAAC,CAAC,CAAC,CACF,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC3B,gCAAQ,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI;4BACrC,IAAI,CAAC,IAAI;;4BAAI,IAAI,CAAC,UAAU;gCACtB,CACV,CAAC,CACH,CACM;wBACR,MAAM,CAAC,QAAQ,IAAI,2BAAG,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,QAAQ,CAAK,CAC9E,CACF;gBAEN,6BAAK,SAAS,EAAC,wBAAwB;oBACrC;wBACE,+BAAO,SAAS,EAAC,8CAA8C,yBAA2B;wBAC1F,+BACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,MAAM,EACV,KAAK,EAAE,QAAQ,CAAC,eAAe,EAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAC9E,SAAS,EAAE,oGACT,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAC9C,EAAE,EACF,WAAW,EAAC,IAAI,GAChB;wBACD,MAAM,CAAC,eAAe,IAAI,CACzB,2BAAG,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,eAAe,CAAK,CACtE;wBACD,2BAAG,SAAS,EAAC,4BAA4B,mDAAiD,CACtF;oBAEN;wBACE,+BAAO,SAAS,EAAC,8CAA8C;;4BAE7D,8BAAM,SAAS,EAAC,oBAAoB,iBAAkB,CAChD;wBACR,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,QAAQ,CAAC,KAAK,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACrD,SAAS,EAAE,oGACT,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBACpC,EAAE,EACF,WAAW,EAAC,oBAAoB,GAChC;wBACD,MAAM,CAAC,KAAK,IAAI,2BAAG,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,KAAK,CAAK;wBAC5E,2BAAG,SAAS,EAAC,4BAA4B,wDAAsD,CAC3F,CACF;gBAGL,QAAQ,CAAC,KAAK,IAAI,CACjB,6BAAK,SAAS,EAAC,mBAAmB;oBAChC,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,iBAAiB,EACpB,OAAO,EAAE,QAAQ,CAAC,eAAe,EACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EACjE,SAAS,EAAC,mEAAmE,GAC7E;oBACF,+BAAO,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,4BAA4B,0CAE/D;oBACR,6BAAK,SAAS,EAAC,qBAAqB;wBAClC,oBAAC,qBAAqB,IAAC,SAAS,EAAC,uBAAuB,GAAG;wBAC3D,6BAAK,SAAS,EAAC,2HAA2H,mDAEpI,CACF,CACF,CACP;gBAGD;oBACE,+BAAO,SAAS,EAAC,8CAA8C;;wBAE7D,8BAAM,SAAS,EAAC,oBAAoB,iBAAkB,CAChD;oBACR,+BACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,QAAQ,CAAC,YAAY,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5D,SAAS,EAAC,kHAAkH,EAC5H,WAAW,EAAE,0BAA0B,EAAE,GACzC;oBACF,6BAAK,SAAS,EAAC,4BAA4B,IACxC,qBAAqB,IAAI,CACxB;wBACE;;4BACkB,8BAAM,SAAS,EAAC,aAAa,IAAE,qBAAqB,CAAC,UAAU,CAAQ,CACrF;wBACH,iBAAiB,IAAI,CACpB,2BAAG,SAAS,EAAC,eAAe,qEAExB,CACL,CACG,CACP,CACG,CACF;gBAGL,qBAAqB,IAAI,CACxB,6BAAK,SAAS,EAAC,2BAA2B;oBACxC,4BAAI,SAAS,EAAC,gCAAgC,iCAAgC;oBAC9E,6BAAK,SAAS,EAAC,iCAAiC;wBAC9C;4BACE,8BAAM,SAAS,EAAC,aAAa,mBAAoB;;4BAAE,qBAAqB,CAAC,UAAU,CACjF;wBACJ;4BACE,8BAAM,SAAS,EAAC,aAAa,6BAA8B;4BAAC,GAAG;4BAC9D,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAC/B;wBACH,qBAAqB,CAAC,UAAU,KAAK,SAAS,IAAI,qBAAqB,CAAC,aAAa,IAAI,CACxF;4BACI,qBAAqB,CAAC,aAAqB,CAAC,aAAa,KAAK,SAAS,IAAI,CAC3E;gCACE,8BAAM,SAAS,EAAC,aAAa,sBAAuB;gCAAC,GAAG;gCACtD,qBAAqB,CAAC,aAAqB,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CACxE,CACL;4BACC,qBAAqB,CAAC,aAAqB,CAAC,gBAAgB,IAAI,CAChE;gCACE,8BAAM,SAAS,EAAC,aAAa,sBAAuB;gCAAC,GAAG;gCACtD,qBAAqB,CAAC,aAAqB,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CACvE,CACL,CACA,CACJ;wBACA,qBAAqB,CAAC,UAAU,KAAK,WAAW,IAAI,qBAAqB,CAAC,aAAa,IAAI,CAC1F;4BACI,qBAAqB,CAAC,aAAqB,CAAC,eAAe,KAAK,SAAS,IAAI,CAC7E;gCACE,8BAAM,SAAS,EAAC,aAAa,wBAAyB;gCAAC,GAAG;gCACxD,qBAAqB,CAAC,aAAqB,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAC1E,CACL;4BACC,qBAAqB,CAAC,aAAqB,CAAC,kBAAkB,IAAI,CAClE;gCACE,8BAAM,SAAS,EAAC,aAAa,2BAA4B;gCAAC,GAAG;gCAC3D,qBAAqB,CAAC,aAAqB,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CACzE,CACL,CACA,CACJ,CACG,CACF,CACP,CACG;YAGN,6BAAK,SAAS,EAAC,wEAAwE;gBACrF,gCACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAC,iLAAiL,aAGpL;gBACT,gCACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,qLAAqL,IAE9L,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CACtC,CACL,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';\nimport { Qualifiers, QualifierTypes } from '@fgv/ts-res';\n\nexport interface QualifierEditFormProps {\n  qualifier?: Qualifiers.IQualifierDecl;\n  qualifierTypes: QualifierTypes.Config.ISystemQualifierTypeConfig[];\n  onSave: (qualifier: Qualifiers.IQualifierDecl) => void;\n  onCancel: () => void;\n  existingNames?: string[];\n}\n\ninterface FormData {\n  name: string;\n  typeName: string;\n  defaultPriority: number;\n  token: string;\n  tokenIsOptional: boolean;\n  defaultValue: string;\n}\n\nexport const QualifierEditForm: React.FC<QualifierEditFormProps> = ({\n  qualifier,\n  qualifierTypes,\n  onSave,\n  onCancel,\n  existingNames = []\n}) => {\n  const [formData, setFormData] = useState<FormData>(() => {\n    if (qualifier) {\n      return {\n        name: qualifier.name,\n        typeName: qualifier.typeName,\n        defaultPriority: qualifier.defaultPriority,\n        token: qualifier.token || '',\n        tokenIsOptional: qualifier.tokenIsOptional || false,\n        defaultValue: qualifier.defaultValue || ''\n      };\n    }\n    return {\n      name: '',\n      typeName: qualifierTypes[0]?.name || '',\n      defaultPriority: 50,\n      token: '',\n      tokenIsOptional: false,\n      defaultValue: ''\n    };\n  });\n\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  // Get the selected qualifier type for context\n  const selectedQualifierType = qualifierTypes.find((qt) => qt.name === formData.typeName);\n  const allowsContextList =\n    selectedQualifierType?.configuration && (selectedQualifierType.configuration as any).allowContextList;\n\n  // Validation\n  const validateForm = useCallback((): boolean => {\n    const newErrors: Record<string, string> = {};\n\n    if (!formData.name.trim()) {\n      newErrors.name = 'Name is required';\n    } else if (existingNames.includes(formData.name) && formData.name !== qualifier?.name) {\n      newErrors.name = 'Name must be unique';\n    }\n\n    if (!formData.typeName) {\n      newErrors.typeName = 'Qualifier type is required';\n    }\n\n    if (formData.defaultPriority < 0 || formData.defaultPriority > 1000) {\n      newErrors.defaultPriority = 'Priority must be between 0 and 1000';\n    }\n\n    if (formData.token && !/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.token)) {\n      newErrors.token = 'Token must start with a letter and contain only letters, numbers, and underscores';\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  }, [formData, existingNames, qualifier?.name]);\n\n  const handleSave = useCallback(() => {\n    if (!validateForm()) return;\n\n    const result: Qualifiers.IQualifierDecl = {\n      name: formData.name,\n      typeName: formData.typeName,\n      defaultPriority: formData.defaultPriority,\n      ...(formData.token && { token: formData.token }),\n      ...(formData.token && formData.tokenIsOptional && { tokenIsOptional: true }),\n      ...(formData.defaultValue && { defaultValue: formData.defaultValue })\n    };\n\n    onSave(result);\n  }, [formData, validateForm, onSave]);\n\n  const updateField = useCallback(\n    (field: keyof FormData, value: any) => {\n      setFormData((prev) => {\n        const updated = { ...prev, [field]: value };\n\n        // Auto-generate token from name if no custom token is set\n        if (field === 'name' && !prev.token) {\n          updated.token = value.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');\n        }\n\n        // Clear tokenIsOptional if token is cleared\n        if (field === 'token' && !value) {\n          updated.tokenIsOptional = false;\n        }\n\n        return updated;\n      });\n\n      if (errors[field]) {\n        setErrors((prev) => ({ ...prev, [field]: '' }));\n      }\n    },\n    [errors]\n  );\n\n  const getDefaultValuePlaceholder = (): string => {\n    if (!selectedQualifierType) return 'Enter default value';\n\n    switch (selectedQualifierType.systemType) {\n      case 'language':\n        return allowsContextList ? 'e.g., en-US or en-US,en' : 'e.g., en-US';\n      case 'territory':\n        return allowsContextList ? 'e.g., US or US,CA' : 'e.g., US';\n      case 'literal':\n        const enumValues = (selectedQualifierType.configuration as any)?.enumeratedValues;\n        if (enumValues && enumValues.length > 0) {\n          return allowsContextList\n            ? `e.g., ${enumValues[0]} or ${enumValues.slice(0, 2).join(',')}`\n            : `e.g., ${enumValues[0]}`;\n        }\n        return allowsContextList ? 'e.g., value or value1,value2' : 'e.g., value';\n      default:\n        return 'Enter default value';\n    }\n  };\n\n  return (\n    <div className=\"fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4\">\n      <div className=\"bg-white rounded-lg shadow-xl max-w-2xl w-full h-full max-h-[calc(100vh-2rem)] flex flex-col\">\n        {/* Fixed Header */}\n        <div className=\"flex items-center justify-between p-6 border-b flex-shrink-0\">\n          <h3 className=\"text-lg font-medium text-gray-900\">\n            {qualifier ? 'Edit Qualifier' : 'Add Qualifier'}\n          </h3>\n          <button onClick={onCancel} className=\"text-gray-400 hover:text-gray-600\">\n            <XMarkIcon className=\"w-6 h-6\" />\n          </button>\n        </div>\n\n        {/* Scrollable Content */}\n        <div className=\"p-6 space-y-6 overflow-y-auto flex-1 min-h-0\">\n          {/* Basic Properties */}\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">Name *</label>\n              <input\n                type=\"text\"\n                value={formData.name}\n                onChange={(e) => updateField('name', e.target.value)}\n                className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${\n                  errors.name ? 'border-red-300' : 'border-gray-300'\n                }`}\n                placeholder=\"Enter qualifier name\"\n              />\n              {errors.name && <p className=\"mt-1 text-sm text-red-600\">{errors.name}</p>}\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">Qualifier Type *</label>\n              <select\n                value={formData.typeName}\n                onChange={(e) => updateField('typeName', e.target.value)}\n                className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${\n                  errors.typeName ? 'border-red-300' : 'border-gray-300'\n                }`}\n              >\n                {qualifierTypes.length === 0 ? (\n                  <option value=\"\">No qualifier types available</option>\n                ) : (\n                  qualifierTypes.map((type) => (\n                    <option key={type.name} value={type.name}>\n                      {type.name} ({type.systemType})\n                    </option>\n                  ))\n                )}\n              </select>\n              {errors.typeName && <p className=\"mt-1 text-sm text-red-600\">{errors.typeName}</p>}\n            </div>\n          </div>\n\n          <div className=\"grid grid-cols-2 gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">Default Priority *</label>\n              <input\n                type=\"number\"\n                min=\"0\"\n                max=\"1000\"\n                value={formData.defaultPriority}\n                onChange={(e) => updateField('defaultPriority', parseInt(e.target.value) || 0)}\n                className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${\n                  errors.defaultPriority ? 'border-red-300' : 'border-gray-300'\n                }`}\n                placeholder=\"50\"\n              />\n              {errors.defaultPriority && (\n                <p className=\"mt-1 text-sm text-red-600\">{errors.defaultPriority}</p>\n              )}\n              <p className=\"mt-1 text-xs text-gray-500\">Higher numbers have higher priority (0-1000)</p>\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n                Token\n                <span className=\"ml-1 text-gray-500\">(optional)</span>\n              </label>\n              <input\n                type=\"text\"\n                value={formData.token}\n                onChange={(e) => updateField('token', e.target.value)}\n                className={`w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 ${\n                  errors.token ? 'border-red-300' : 'border-gray-300'\n                }`}\n                placeholder=\"e.g., lang, locale\"\n              />\n              {errors.token && <p className=\"mt-1 text-sm text-red-600\">{errors.token}</p>}\n              <p className=\"mt-1 text-xs text-gray-500\">Used to identify this qualifier in resource names</p>\n            </div>\n          </div>\n\n          {/* Token Options */}\n          {formData.token && (\n            <div className=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                id=\"tokenIsOptional\"\n                checked={formData.tokenIsOptional}\n                onChange={(e) => updateField('tokenIsOptional', e.target.checked)}\n                className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n              />\n              <label htmlFor=\"tokenIsOptional\" className=\"ml-2 text-sm text-gray-700\">\n                Token is optional in resource names\n              </label>\n              <div className=\"ml-2 group relative\">\n                <InformationCircleIcon className=\"w-4 h-4 text-gray-400\" />\n                <div className=\"absolute left-0 bottom-6 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap z-10\">\n                  Allow resources without this qualifier token\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* Default Value */}\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 mb-1\">\n              Default Value\n              <span className=\"ml-1 text-gray-500\">(optional)</span>\n            </label>\n            <input\n              type=\"text\"\n              value={formData.defaultValue}\n              onChange={(e) => updateField('defaultValue', e.target.value)}\n              className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500\"\n              placeholder={getDefaultValuePlaceholder()}\n            />\n            <div className=\"mt-1 text-xs text-gray-500\">\n              {selectedQualifierType && (\n                <div>\n                  <p>\n                    Qualifier type: <span className=\"font-medium\">{selectedQualifierType.systemType}</span>\n                  </p>\n                  {allowsContextList && (\n                    <p className=\"text-blue-600\">\n                      This qualifier type supports multiple values (comma-separated)\n                    </p>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Qualifier Type Information */}\n          {selectedQualifierType && (\n            <div className=\"p-4 bg-gray-50 rounded-lg\">\n              <h4 className=\"font-medium text-gray-900 mb-2\">Qualifier Type Information</h4>\n              <div className=\"text-sm text-gray-600 space-y-1\">\n                <p>\n                  <span className=\"font-medium\">System Type:</span> {selectedQualifierType.systemType}\n                </p>\n                <p>\n                  <span className=\"font-medium\">Supports Context List:</span>{' '}\n                  {allowsContextList ? 'Yes' : 'No'}\n                </p>\n                {selectedQualifierType.systemType === 'literal' && selectedQualifierType.configuration && (\n                  <>\n                    {(selectedQualifierType.configuration as any).caseSensitive !== undefined && (\n                      <p>\n                        <span className=\"font-medium\">Case Sensitive:</span>{' '}\n                        {(selectedQualifierType.configuration as any).caseSensitive ? 'Yes' : 'No'}\n                      </p>\n                    )}\n                    {(selectedQualifierType.configuration as any).enumeratedValues && (\n                      <p>\n                        <span className=\"font-medium\">Allowed Values:</span>{' '}\n                        {(selectedQualifierType.configuration as any).enumeratedValues.join(', ')}\n                      </p>\n                    )}\n                  </>\n                )}\n                {selectedQualifierType.systemType === 'territory' && selectedQualifierType.configuration && (\n                  <>\n                    {(selectedQualifierType.configuration as any).acceptLowercase !== undefined && (\n                      <p>\n                        <span className=\"font-medium\">Accept Lowercase:</span>{' '}\n                        {(selectedQualifierType.configuration as any).acceptLowercase ? 'Yes' : 'No'}\n                      </p>\n                    )}\n                    {(selectedQualifierType.configuration as any).allowedTerritories && (\n                      <p>\n                        <span className=\"font-medium\">Allowed Territories:</span>{' '}\n                        {(selectedQualifierType.configuration as any).allowedTerritories.join(', ')}\n                      </p>\n                    )}\n                  </>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Fixed Footer */}\n        <div className=\"flex justify-end space-x-3 px-6 py-4 border-t bg-gray-50 flex-shrink-0\">\n          <button\n            onClick={onCancel}\n            className=\"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n          >\n            Cancel\n          </button>\n          <button\n            onClick={handleSave}\n            className=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500\"\n          >\n            {qualifier ? 'Save Changes' : 'Add Qualifier'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/components/forms/QualifierTypeEditForm.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { QualifierTypes } from '@fgv/ts-res';
+export interface QualifierTypeEditFormProps {
+    qualifierType?: QualifierTypes.Config.ISystemQualifierTypeConfig;
+    onSave: (qualifierType: QualifierTypes.Config.ISystemQualifierTypeConfig) => void;
+    onCancel: () => void;
+    existingNames?: string[];
+}
+export declare const QualifierTypeEditForm: React.FC<QualifierTypeEditFormProps>;
+//# sourceMappingURL=QualifierTypeEditForm.d.ts.map

package/lib/components/forms/QualifierTypeEditForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QualifierTypeEditForm.d.ts","sourceRoot":"","sources":["../../../src/components/forms/QualifierTypeEditForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,MAAM,WAAW,0BAA0B;IACzC,aAAa,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,0BAA0B,CAAC;IACjE,MAAM,EAAE,CAAC,aAAa,EAAE,cAAc,CAAC,MAAM,CAAC,0BAA0B,KAAK,IAAI,CAAC;IAClF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAgBD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgUtE,CAAC"}