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

package/lib/components/forms/QualifierTypeEditForm.js

@@ -0,0 +1,172 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+import { HierarchyEditor } from './HierarchyEditor';
+export const QualifierTypeEditForm = ({ qualifierType, onSave, onCancel, existingNames = [] }) => {
+    const [formData, setFormData] = useState(() => {
+        if (qualifierType) {
+            const config = qualifierType.configuration || {};
+            // Ensure hierarchy is a plain object with string values
+            let hierarchy = {};
+            const rawHierarchy = config?.hierarchy;
+            if (rawHierarchy && typeof rawHierarchy === 'object' && !Array.isArray(rawHierarchy)) {
+                for (const [key, value] of Object.entries(rawHierarchy)) {
+                    if (typeof value === 'string') {
+                        hierarchy[key] = value;
+                    }
+                }
+            }
+            return {
+                name: qualifierType.name,
+                systemType: qualifierType.systemType,
+                allowContextList: config?.allowContextList ?? false,
+                caseSensitive: config?.caseSensitive ?? true,
+                enumeratedValues: config?.enumeratedValues || [],
+                acceptLowercase: config?.acceptLowercase ?? false,
+                allowedTerritories: config?.allowedTerritories || [],
+                hierarchy: hierarchy
+            };
+        }
+        return {
+            name: '',
+            systemType: 'literal',
+            allowContextList: false,
+            caseSensitive: true,
+            enumeratedValues: [],
+            acceptLowercase: false,
+            allowedTerritories: [],
+            hierarchy: {}
+        };
+    });
+    const [errors, setErrors] = useState({});
+    const [enumeratedValuesText, setEnumeratedValuesText] = useState(formData.enumeratedValues.join(', '));
+    const [allowedTerritoriesText, setAllowedTerritoriesText] = useState(formData.allowedTerritories.join(', '));
+    // Validation
+    const validateForm = useCallback(() => {
+        const newErrors = {};
+        if (!formData.name.trim()) {
+            newErrors.name = 'Name is required';
+        }
+        else if (existingNames.includes(formData.name) && formData.name !== qualifierType?.name) {
+            newErrors.name = 'Name must be unique';
+        }
+        if (formData.systemType === 'literal' && formData.enumeratedValues.length === 0) {
+            newErrors.enumeratedValues = 'Literal types should have enumerated values';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }, [formData, existingNames, qualifierType?.name]);
+    // Update enumerated values when text changes
+    useEffect(() => {
+        const values = enumeratedValuesText
+            .split(',')
+            .map((v) => v.trim())
+            .filter((v) => v.length > 0);
+        setFormData((prev) => ({ ...prev, enumeratedValues: values }));
+    }, [enumeratedValuesText]);
+    // Update allowed territories when text changes
+    useEffect(() => {
+        const territories = allowedTerritoriesText
+            .split(',')
+            .map((v) => v.trim().toUpperCase())
+            .filter((v) => v.length > 0);
+        setFormData((prev) => ({ ...prev, allowedTerritories: territories }));
+    }, [allowedTerritoriesText]);
+    const handleSave = useCallback(() => {
+        if (!validateForm())
+            return;
+        let configuration = {
+            allowContextList: formData.allowContextList
+        };
+        switch (formData.systemType) {
+            case 'literal':
+                configuration = {
+                    ...configuration,
+                    caseSensitive: formData.caseSensitive,
+                    enumeratedValues: formData.enumeratedValues.length > 0 ? formData.enumeratedValues : undefined
+                };
+                // Add hierarchy if it has entries
+                if (Object.keys(formData.hierarchy).length > 0) {
+                    configuration.hierarchy = formData.hierarchy;
+                }
+                break;
+            case 'territory':
+                configuration = {
+                    ...configuration,
+                    acceptLowercase: formData.acceptLowercase,
+                    allowedTerritories: formData.allowedTerritories.length > 0 ? formData.allowedTerritories : undefined
+                };
+                // Add hierarchy if it has entries
+                if (Object.keys(formData.hierarchy).length > 0) {
+                    configuration.hierarchy = formData.hierarchy;
+                }
+                break;
+            case 'language':
+                // Language types only have allowContextList
+                break;
+        }
+        const result = {
+            name: formData.name,
+            systemType: formData.systemType,
+            configuration: Object.keys(configuration).length > 1 ? configuration : undefined
+        };
+        onSave(result);
+    }, [formData, validateForm, onSave]);
+    const updateField = useCallback((field, value) => {
+        setFormData((prev) => ({ ...prev, [field]: value }));
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: '' }));
+        }
+    }, [errors]);
+    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" }, qualifierType ? 'Edit Qualifier Type' : 'Add Qualifier Type'),
+                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 type 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" }, "System Type *"),
+                        React.createElement("select", { value: formData.systemType, onChange: (e) => updateField('systemType', 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" },
+                            React.createElement("option", { value: "literal" }, "Literal"),
+                            React.createElement("option", { value: "language" }, "Language"),
+                            React.createElement("option", { value: "territory" }, "Territory")))),
+                React.createElement("div", { className: "flex items-center" },
+                    React.createElement("input", { type: "checkbox", id: "allowContextList", checked: formData.allowContextList, onChange: (e) => updateField('allowContextList', e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }),
+                    React.createElement("label", { htmlFor: "allowContextList", className: "ml-2 text-sm text-gray-700" }, "Allow Context List"),
+                    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" }, "Allow multiple values separated by commas"))),
+                formData.systemType === 'literal' && (React.createElement("div", { className: "space-y-4 p-4 bg-blue-50 rounded-lg" },
+                    React.createElement("h4", { className: "font-medium text-gray-900" }, "Literal Type Configuration"),
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("input", { type: "checkbox", id: "caseSensitive", checked: formData.caseSensitive, onChange: (e) => updateField('caseSensitive', e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }),
+                        React.createElement("label", { htmlFor: "caseSensitive", className: "ml-2 text-sm text-gray-700" }, "Case Sensitive")),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Enumerated Values"),
+                        React.createElement("textarea", { value: enumeratedValuesText, onChange: (e) => setEnumeratedValuesText(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.enumeratedValues ? 'border-red-300' : 'border-gray-300'}`, rows: 3, placeholder: "Enter values separated by commas (e.g., dev, test, prod)" }),
+                        errors.enumeratedValues && (React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.enumeratedValues)),
+                        React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Separate multiple values with commas")))),
+                formData.systemType === 'territory' && (React.createElement("div", { className: "space-y-4 p-4 bg-green-50 rounded-lg" },
+                    React.createElement("h4", { className: "font-medium text-gray-900" }, "Territory Type Configuration"),
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("input", { type: "checkbox", id: "acceptLowercase", checked: formData.acceptLowercase, onChange: (e) => updateField('acceptLowercase', e.target.checked), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" }),
+                        React.createElement("label", { htmlFor: "acceptLowercase", className: "ml-2 text-sm text-gray-700" }, "Accept Lowercase Territory Codes")),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Allowed Territories"),
+                        React.createElement("textarea", { value: allowedTerritoriesText, onChange: (e) => setAllowedTerritoriesText(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", rows: 3, placeholder: "Enter territory codes separated by commas (e.g., US, CA, GB)" }),
+                        React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Separate multiple territory codes with commas. Will be automatically converted to uppercase.")))),
+                (formData.systemType === 'literal' || formData.systemType === 'territory') && (React.createElement("div", { className: "space-y-4" },
+                    React.createElement(HierarchyEditor, { hierarchy: formData.hierarchy, onChange: (hierarchy) => updateField('hierarchy', hierarchy), availableValues: formData.systemType === 'literal' ? formData.enumeratedValues : formData.allowedTerritories }))),
+                formData.systemType === 'language' && (React.createElement("div", { className: "p-4 bg-yellow-50 rounded-lg" },
+                    React.createElement("h4", { className: "font-medium text-gray-900" }, "Language Type Configuration"),
+                    React.createElement("p", { className: "text-sm text-gray-600 mt-2" }, "Language qualifier types use BCP47 language tags and only support the \"Allow Context List\" option above.")))),
+            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" }, qualifierType ? 'Save Changes' : 'Add Qualifier Type')))));
+};
+//# sourceMappingURL=QualifierTypeEditForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QualifierTypeEditForm.js","sourceRoot":"","sources":["../../../src/components/forms/QualifierTypeEditForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE/E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAuBpD,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAC1E,aAAa,EACb,MAAM,EACN,QAAQ,EACR,aAAa,GAAG,EAAE,EACnB,EAAE,EAAE;IACH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,GAAG,EAAE;QACtD,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,aAAa,CAAC,aAAa,IAAI,EAAE,CAAC;YACjD,wDAAwD;YACxD,IAAI,SAAS,GAA2B,EAAE,CAAC;YAC3C,MAAM,YAAY,GAAI,MAAc,EAAE,SAAS,CAAC;YAChD,IAAI,YAAY,IAAI,OAAO,YAAY,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;gBACrF,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;oBACxD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;wBAC9B,SAAS,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;oBACzB,CAAC;gBACH,CAAC;YACH,CAAC;YAED,OAAO;gBACL,IAAI,EAAE,aAAa,CAAC,IAAI;gBACxB,UAAU,EAAE,aAAa,CAAC,UAAkD;gBAC5E,gBAAgB,EAAG,MAAc,EAAE,gBAAgB,IAAI,KAAK;gBAC5D,aAAa,EAAG,MAAc,EAAE,aAAa,IAAI,IAAI;gBACrD,gBAAgB,EAAG,MAAc,EAAE,gBAAgB,IAAI,EAAE;gBACzD,eAAe,EAAG,MAAc,EAAE,eAAe,IAAI,KAAK;gBAC1D,kBAAkB,EAAG,MAAc,EAAE,kBAAkB,IAAI,EAAE;gBAC7D,SAAS,EAAE,SAAS;aACrB,CAAC;QACJ,CAAC;QACD,OAAO;YACL,IAAI,EAAE,EAAE;YACR,UAAU,EAAE,SAAS;YACrB,gBAAgB,EAAE,KAAK;YACvB,aAAa,EAAE,IAAI;YACnB,gBAAgB,EAAE,EAAE;YACpB,eAAe,EAAE,KAAK;YACtB,kBAAkB,EAAE,EAAE;YACtB,SAAS,EAAE,EAAE;SACd,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAyB,EAAE,CAAC,CAAC;IACjE,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACvG,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAClE,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CACvC,CAAC;IAEF,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,aAAa,EAAE,IAAI,EAAE,CAAC;YAC1F,SAAS,CAAC,IAAI,GAAG,qBAAqB,CAAC;QACzC,CAAC;QAED,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,IAAI,QAAQ,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAChF,SAAS,CAAC,gBAAgB,GAAG,6CAA6C,CAAC;QAC7E,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,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAEnD,6CAA6C;IAC7C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,oBAAoB;aAChC,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;aACpB,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/B,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAE3B,+CAA+C;IAC/C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,sBAAsB;aACvC,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;aAClC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAC/B,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,YAAY,EAAE;YAAE,OAAO;QAE5B,IAAI,aAAa,GAAQ;YACvB,gBAAgB,EAAE,QAAQ,CAAC,gBAAgB;SAC5C,CAAC;QAEF,QAAQ,QAAQ,CAAC,UAAU,EAAE,CAAC;YAC5B,KAAK,SAAS;gBACZ,aAAa,GAAG;oBACd,GAAG,aAAa;oBAChB,aAAa,EAAE,QAAQ,CAAC,aAAa;oBACrC,gBAAgB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;iBAC/F,CAAC;gBACF,kCAAkC;gBAClC,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC/C,aAAa,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;gBAC/C,CAAC;gBACD,MAAM;YACR,KAAK,WAAW;gBACd,aAAa,GAAG;oBACd,GAAG,aAAa;oBAChB,eAAe,EAAE,QAAQ,CAAC,eAAe;oBACzC,kBAAkB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS;iBACrG,CAAC;gBACF,kCAAkC;gBAClC,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBAC/C,aAAa,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;gBAC/C,CAAC;gBACD,MAAM;YACR,KAAK,UAAU;gBACb,4CAA4C;gBAC5C,MAAM;QACV,CAAC;QAED,MAAM,MAAM,GAAqD;YAC/D,IAAI,EAAE,QAAQ,CAAC,IAAI;YACnB,UAAU,EAAE,QAAQ,CAAC,UAAU;YAC/B,aAAa,EAAE,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SAC1E,CAAC;QAET,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,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACrD,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,OAAO,CACL,6BAAK,SAAS,EAAC,mFAAmF;QAChG,6BAAK,SAAS,EAAC,8FAA8F;YAE3G,6BAAK,SAAS,EAAC,8DAA8D;gBAC3E,4BAAI,SAAS,EAAC,mCAAmC,IAC9C,aAAa,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,CAC1D;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,2BAA2B,GACvC;wBACD,MAAM,CAAC,IAAI,IAAI,2BAAG,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,IAAI,CAAK,CACtE;oBAEN;wBACE,+BAAO,SAAS,EAAC,8CAA8C,oBAAsB;wBACrF,gCACE,KAAK,EAAE,QAAQ,CAAC,UAAU,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,KAA6C,CAAC,EAEnF,SAAS,EAAC,kHAAkH;4BAE5H,gCAAQ,KAAK,EAAC,SAAS,cAAiB;4BACxC,gCAAQ,KAAK,EAAC,UAAU,eAAkB;4BAC1C,gCAAQ,KAAK,EAAC,WAAW,gBAAmB,CACrC,CACL,CACF;gBAGN,6BAAK,SAAS,EAAC,mBAAmB;oBAChC,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,kBAAkB,EACrB,OAAO,EAAE,QAAQ,CAAC,gBAAgB,EAClC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,kBAAkB,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAClE,SAAS,EAAC,mEAAmE,GAC7E;oBACF,+BAAO,OAAO,EAAC,kBAAkB,EAAC,SAAS,EAAC,4BAA4B,yBAEhE;oBACR,6BAAK,SAAS,EAAC,qBAAqB;wBAClC,oBAAC,qBAAqB,IAAC,SAAS,EAAC,uBAAuB,GAAG;wBAC3D,6BAAK,SAAS,EAAC,sHAAsH,gDAE/H,CACF,CACF;gBAGL,QAAQ,CAAC,UAAU,KAAK,SAAS,IAAI,CACpC,6BAAK,SAAS,EAAC,qCAAqC;oBAClD,4BAAI,SAAS,EAAC,2BAA2B,iCAAgC;oBAEzE,6BAAK,SAAS,EAAC,mBAAmB;wBAChC,+BACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAC,eAAe,EAClB,OAAO,EAAE,QAAQ,CAAC,aAAa,EAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAC/D,SAAS,EAAC,mEAAmE,GAC7E;wBACF,+BAAO,OAAO,EAAC,eAAe,EAAC,SAAS,EAAC,4BAA4B,qBAE7D,CACJ;oBAEN;wBACE,+BAAO,SAAS,EAAC,8CAA8C,wBAA0B;wBACzF,kCACE,KAAK,EAAE,oBAAoB,EAC3B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxD,SAAS,EAAE,oGACT,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,iBAC/C,EAAE,EACF,IAAI,EAAE,CAAC,EACP,WAAW,EAAC,0DAA0D,GACtE;wBACD,MAAM,CAAC,gBAAgB,IAAI,CAC1B,2BAAG,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAC,gBAAgB,CAAK,CACvE;wBACD,2BAAG,SAAS,EAAC,4BAA4B,2CAAyC,CAC9E,CACF,CACP;gBAGA,QAAQ,CAAC,UAAU,KAAK,WAAW,IAAI,CACtC,6BAAK,SAAS,EAAC,sCAAsC;oBACnD,4BAAI,SAAS,EAAC,2BAA2B,mCAAkC;oBAE3E,6BAAK,SAAS,EAAC,mBAAmB;wBAChC,+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;wBACF,+BAAO,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,4BAA4B,uCAE/D,CACJ;oBAEN;wBACE,+BAAO,SAAS,EAAC,8CAA8C,0BAA4B;wBAC3F,kCACE,KAAK,EAAE,sBAAsB,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,yBAAyB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC1D,SAAS,EAAC,kHAAkH,EAC5H,IAAI,EAAE,CAAC,EACP,WAAW,EAAC,8DAA8D,GAC1E;wBACF,2BAAG,SAAS,EAAC,4BAA4B,mGAErC,CACA,CACF,CACP;gBAGA,CAAC,QAAQ,CAAC,UAAU,KAAK,SAAS,IAAI,QAAQ,CAAC,UAAU,KAAK,WAAW,CAAC,IAAI,CAC7E,6BAAK,SAAS,EAAC,WAAW;oBACxB,oBAAC,eAAe,IACd,SAAS,EAAE,QAAQ,CAAC,SAAS,EAC7B,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,WAAW,CAAC,WAAW,EAAE,SAAS,CAAC,EAC5D,eAAe,EACb,QAAQ,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,kBAAkB,GAE7F,CACE,CACP;gBAGA,QAAQ,CAAC,UAAU,KAAK,UAAU,IAAI,CACrC,6BAAK,SAAS,EAAC,6BAA6B;oBAC1C,4BAAI,SAAS,EAAC,2BAA2B,kCAAiC;oBAC1E,2BAAG,SAAS,EAAC,4BAA4B,iHAGrC,CACA,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,aAAa,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAC/C,CACL,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React, { useState, useCallback, useEffect } from 'react';\nimport { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';\nimport { QualifierTypes } from '@fgv/ts-res';\nimport { HierarchyEditor } from './HierarchyEditor';\n\nexport interface QualifierTypeEditFormProps {\n  qualifierType?: QualifierTypes.Config.ISystemQualifierTypeConfig;\n  onSave: (qualifierType: QualifierTypes.Config.ISystemQualifierTypeConfig) => void;\n  onCancel: () => void;\n  existingNames?: string[];\n}\n\ninterface FormData {\n  name: string;\n  systemType: 'language' | 'territory' | 'literal';\n  allowContextList: boolean;\n  // Literal type specific\n  caseSensitive: boolean;\n  enumeratedValues: string[];\n  // Territory type specific\n  acceptLowercase: boolean;\n  allowedTerritories: string[];\n  // Hierarchy support (for literal and territory types)\n  hierarchy: Record<string, string>;\n}\n\nexport const QualifierTypeEditForm: React.FC<QualifierTypeEditFormProps> = ({\n  qualifierType,\n  onSave,\n  onCancel,\n  existingNames = []\n}) => {\n  const [formData, setFormData] = useState<FormData>(() => {\n    if (qualifierType) {\n      const config = qualifierType.configuration || {};\n      // Ensure hierarchy is a plain object with string values\n      let hierarchy: Record<string, string> = {};\n      const rawHierarchy = (config as any)?.hierarchy;\n      if (rawHierarchy && typeof rawHierarchy === 'object' && !Array.isArray(rawHierarchy)) {\n        for (const [key, value] of Object.entries(rawHierarchy)) {\n          if (typeof value === 'string') {\n            hierarchy[key] = value;\n          }\n        }\n      }\n\n      return {\n        name: qualifierType.name,\n        systemType: qualifierType.systemType as 'language' | 'territory' | 'literal',\n        allowContextList: (config as any)?.allowContextList ?? false,\n        caseSensitive: (config as any)?.caseSensitive ?? true,\n        enumeratedValues: (config as any)?.enumeratedValues || [],\n        acceptLowercase: (config as any)?.acceptLowercase ?? false,\n        allowedTerritories: (config as any)?.allowedTerritories || [],\n        hierarchy: hierarchy\n      };\n    }\n    return {\n      name: '',\n      systemType: 'literal',\n      allowContextList: false,\n      caseSensitive: true,\n      enumeratedValues: [],\n      acceptLowercase: false,\n      allowedTerritories: [],\n      hierarchy: {}\n    };\n  });\n\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [enumeratedValuesText, setEnumeratedValuesText] = useState(formData.enumeratedValues.join(', '));\n  const [allowedTerritoriesText, setAllowedTerritoriesText] = useState(\n    formData.allowedTerritories.join(', ')\n  );\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 !== qualifierType?.name) {\n      newErrors.name = 'Name must be unique';\n    }\n\n    if (formData.systemType === 'literal' && formData.enumeratedValues.length === 0) {\n      newErrors.enumeratedValues = 'Literal types should have enumerated values';\n    }\n\n    setErrors(newErrors);\n    return Object.keys(newErrors).length === 0;\n  }, [formData, existingNames, qualifierType?.name]);\n\n  // Update enumerated values when text changes\n  useEffect(() => {\n    const values = enumeratedValuesText\n      .split(',')\n      .map((v) => v.trim())\n      .filter((v) => v.length > 0);\n    setFormData((prev) => ({ ...prev, enumeratedValues: values }));\n  }, [enumeratedValuesText]);\n\n  // Update allowed territories when text changes\n  useEffect(() => {\n    const territories = allowedTerritoriesText\n      .split(',')\n      .map((v) => v.trim().toUpperCase())\n      .filter((v) => v.length > 0);\n    setFormData((prev) => ({ ...prev, allowedTerritories: territories }));\n  }, [allowedTerritoriesText]);\n\n  const handleSave = useCallback(() => {\n    if (!validateForm()) return;\n\n    let configuration: any = {\n      allowContextList: formData.allowContextList\n    };\n\n    switch (formData.systemType) {\n      case 'literal':\n        configuration = {\n          ...configuration,\n          caseSensitive: formData.caseSensitive,\n          enumeratedValues: formData.enumeratedValues.length > 0 ? formData.enumeratedValues : undefined\n        };\n        // Add hierarchy if it has entries\n        if (Object.keys(formData.hierarchy).length > 0) {\n          configuration.hierarchy = formData.hierarchy;\n        }\n        break;\n      case 'territory':\n        configuration = {\n          ...configuration,\n          acceptLowercase: formData.acceptLowercase,\n          allowedTerritories: formData.allowedTerritories.length > 0 ? formData.allowedTerritories : undefined\n        };\n        // Add hierarchy if it has entries\n        if (Object.keys(formData.hierarchy).length > 0) {\n          configuration.hierarchy = formData.hierarchy;\n        }\n        break;\n      case 'language':\n        // Language types only have allowContextList\n        break;\n    }\n\n    const result: QualifierTypes.Config.ISystemQualifierTypeConfig = {\n      name: formData.name,\n      systemType: formData.systemType,\n      configuration: Object.keys(configuration).length > 1 ? configuration : undefined\n    } as any;\n\n    onSave(result);\n  }, [formData, validateForm, onSave]);\n\n  const updateField = useCallback(\n    (field: keyof FormData, value: any) => {\n      setFormData((prev) => ({ ...prev, [field]: value }));\n      if (errors[field]) {\n        setErrors((prev) => ({ ...prev, [field]: '' }));\n      }\n    },\n    [errors]\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            {qualifierType ? 'Edit Qualifier Type' : 'Add Qualifier Type'}\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 type 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\">System Type *</label>\n              <select\n                value={formData.systemType}\n                onChange={(e) =>\n                  updateField('systemType', e.target.value as 'language' | 'territory' | 'literal')\n                }\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              >\n                <option value=\"literal\">Literal</option>\n                <option value=\"language\">Language</option>\n                <option value=\"territory\">Territory</option>\n              </select>\n            </div>\n          </div>\n\n          {/* Allow Context List */}\n          <div className=\"flex items-center\">\n            <input\n              type=\"checkbox\"\n              id=\"allowContextList\"\n              checked={formData.allowContextList}\n              onChange={(e) => updateField('allowContextList', e.target.checked)}\n              className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n            />\n            <label htmlFor=\"allowContextList\" className=\"ml-2 text-sm text-gray-700\">\n              Allow Context List\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\">\n                Allow multiple values separated by commas\n              </div>\n            </div>\n          </div>\n\n          {/* Literal Type Specific */}\n          {formData.systemType === 'literal' && (\n            <div className=\"space-y-4 p-4 bg-blue-50 rounded-lg\">\n              <h4 className=\"font-medium text-gray-900\">Literal Type Configuration</h4>\n\n              <div className=\"flex items-center\">\n                <input\n                  type=\"checkbox\"\n                  id=\"caseSensitive\"\n                  checked={formData.caseSensitive}\n                  onChange={(e) => updateField('caseSensitive', e.target.checked)}\n                  className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n                />\n                <label htmlFor=\"caseSensitive\" className=\"ml-2 text-sm text-gray-700\">\n                  Case Sensitive\n                </label>\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">Enumerated Values</label>\n                <textarea\n                  value={enumeratedValuesText}\n                  onChange={(e) => setEnumeratedValuesText(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.enumeratedValues ? 'border-red-300' : 'border-gray-300'\n                  }`}\n                  rows={3}\n                  placeholder=\"Enter values separated by commas (e.g., dev, test, prod)\"\n                />\n                {errors.enumeratedValues && (\n                  <p className=\"mt-1 text-sm text-red-600\">{errors.enumeratedValues}</p>\n                )}\n                <p className=\"mt-1 text-xs text-gray-500\">Separate multiple values with commas</p>\n              </div>\n            </div>\n          )}\n\n          {/* Territory Type Specific */}\n          {formData.systemType === 'territory' && (\n            <div className=\"space-y-4 p-4 bg-green-50 rounded-lg\">\n              <h4 className=\"font-medium text-gray-900\">Territory Type Configuration</h4>\n\n              <div className=\"flex items-center\">\n                <input\n                  type=\"checkbox\"\n                  id=\"acceptLowercase\"\n                  checked={formData.acceptLowercase}\n                  onChange={(e) => updateField('acceptLowercase', e.target.checked)}\n                  className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded\"\n                />\n                <label htmlFor=\"acceptLowercase\" className=\"ml-2 text-sm text-gray-700\">\n                  Accept Lowercase Territory Codes\n                </label>\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-gray-700 mb-1\">Allowed Territories</label>\n                <textarea\n                  value={allowedTerritoriesText}\n                  onChange={(e) => setAllowedTerritoriesText(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                  rows={3}\n                  placeholder=\"Enter territory codes separated by commas (e.g., US, CA, GB)\"\n                />\n                <p className=\"mt-1 text-xs text-gray-500\">\n                  Separate multiple territory codes with commas. Will be automatically converted to uppercase.\n                </p>\n              </div>\n            </div>\n          )}\n\n          {/* Hierarchy Editor for Literal and Territory Types */}\n          {(formData.systemType === 'literal' || formData.systemType === 'territory') && (\n            <div className=\"space-y-4\">\n              <HierarchyEditor\n                hierarchy={formData.hierarchy}\n                onChange={(hierarchy) => updateField('hierarchy', hierarchy)}\n                availableValues={\n                  formData.systemType === 'literal' ? formData.enumeratedValues : formData.allowedTerritories\n                }\n              />\n            </div>\n          )}\n\n          {/* Language Type Specific */}\n          {formData.systemType === 'language' && (\n            <div className=\"p-4 bg-yellow-50 rounded-lg\">\n              <h4 className=\"font-medium text-gray-900\">Language Type Configuration</h4>\n              <p className=\"text-sm text-gray-600 mt-2\">\n                Language qualifier types use BCP47 language tags and only support the \"Allow Context List\"\n                option above.\n              </p>\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            {qualifierType ? 'Save Changes' : 'Add Qualifier Type'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTypeEditForm.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ResourceTypeEditForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,mBAAmB,CAAC;IACxD,MAAM,EAAE,CAAC,YAAY,EAAE,aAAa,CAAC,MAAM,CAAC,mBAAmB,KAAK,IAAI,CAAC;IACzE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B;AAsBD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2SpE,CAAC"}

package/lib/components/forms/ResourceTypeEditForm.js

@@ -0,0 +1,188 @@
+import React, { useState, useCallback } from 'react';
+import { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
+const COMMON_TYPE_NAMES = [
+    'string',
+    'object',
+    'array',
+    'number',
+    'boolean',
+    'localizedString',
+    'config',
+    'settings',
+    'permissions',
+    'template',
+    'content',
+    'metadata'
+];
+export const ResourceTypeEditForm = ({ resourceType, onSave, onCancel, existingNames = [] }) => {
+    const [formData, setFormData] = useState(() => {
+        if (resourceType) {
+            return {
+                name: resourceType.name,
+                typeName: resourceType.typeName
+            };
+        }
+        return {
+            name: '',
+            typeName: 'string'
+        };
+    });
+    const [errors, setErrors] = useState({});
+    const [useCustomTypeName, setUseCustomTypeName] = useState(() => {
+        if (resourceType) {
+            return !COMMON_TYPE_NAMES.includes(resourceType.typeName);
+        }
+        return false;
+    });
+    // Validation
+    const validateForm = useCallback(() => {
+        const newErrors = {};
+        if (!formData.name.trim()) {
+            newErrors.name = 'Name is required';
+        }
+        else if (existingNames.includes(formData.name) && formData.name !== resourceType?.name) {
+            newErrors.name = 'Name must be unique';
+        }
+        else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.name)) {
+            newErrors.name = 'Name must start with a letter and contain only letters, numbers, and underscores';
+        }
+        if (!formData.typeName.trim()) {
+            newErrors.typeName = 'Type name is required';
+        }
+        else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.typeName)) {
+            newErrors.typeName =
+                'Type name must start with a letter and contain only letters, numbers, and underscores';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    }, [formData, existingNames, resourceType?.name]);
+    const handleSave = useCallback(() => {
+        if (!validateForm())
+            return;
+        const result = {
+            name: formData.name,
+            typeName: formData.typeName
+        };
+        onSave(result);
+    }, [formData, validateForm, onSave]);
+    const updateField = useCallback((field, value) => {
+        setFormData((prev) => {
+            const updated = { ...prev, [field]: value };
+            // Auto-generate typeName from name for new resource types if using common types
+            if (field === 'name' && !resourceType && !useCustomTypeName) {
+                const cleanName = value.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');
+                const commonType = COMMON_TYPE_NAMES.find((type) => cleanName.includes(type) || type.includes(cleanName));
+                if (commonType) {
+                    updated.typeName = commonType;
+                }
+                else {
+                    updated.typeName = cleanName || 'string';
+                }
+            }
+            return updated;
+        });
+        if (errors[field]) {
+            setErrors((prev) => ({ ...prev, [field]: '' }));
+        }
+    }, [errors, resourceType, useCustomTypeName]);
+    const handleTypeNameModeChange = useCallback((useCustom) => {
+        setUseCustomTypeName(useCustom);
+        if (!useCustom && !resourceType) {
+            // Reset to a common type
+            updateField('typeName', 'string');
+        }
+    }, [resourceType, updateField]);
+    const getTypeNameDescription = (typeName) => {
+        switch (typeName) {
+            case 'string':
+                return 'Simple text content (default)';
+            case 'object':
+                return 'Complex structured data (JSON objects)';
+            case 'array':
+                return 'List of values or objects';
+            case 'number':
+                return 'Numeric values';
+            case 'boolean':
+                return 'True/false values';
+            case 'localizedString':
+                return 'Text content with localization support';
+            case 'config':
+                return 'Configuration settings and parameters';
+            case 'settings':
+                return 'User or application settings';
+            case 'permissions':
+                return 'Access control and permission data';
+            case 'template':
+                return 'Template content for rendering';
+            case 'content':
+                return 'Rich content (HTML, Markdown, etc.)';
+            case 'metadata':
+                return 'Descriptive information about resources';
+            default:
+                return 'Custom resource type';
+        }
+    };
+    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" }, resourceType ? 'Edit Resource Type' : 'Add Resource Type'),
+                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", 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 resource type name (e.g., 'userSettings', 'errorMessages')" }),
+                    errors.name && React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.name),
+                    React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "A descriptive name for this type of resource. This will be used to categorize and identify resources.")),
+                React.createElement("div", null,
+                    React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-3" }, "Type Name Configuration *"),
+                    React.createElement("div", { className: "space-y-3" },
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("input", { type: "radio", id: "useCommonType", name: "typeNameMode", checked: !useCustomTypeName, onChange: () => handleTypeNameModeChange(false), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }),
+                            React.createElement("label", { htmlFor: "useCommonType", className: "ml-2 text-sm text-gray-700" }, "Use common type name")),
+                        !useCustomTypeName && (React.createElement("div", { className: "ml-6" },
+                            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'}` }, COMMON_TYPE_NAMES.map((type) => (React.createElement("option", { key: type, value: type }, type)))),
+                            React.createElement("p", { className: "mt-1 text-xs text-gray-600" }, getTypeNameDescription(formData.typeName)))),
+                        React.createElement("div", { className: "flex items-center" },
+                            React.createElement("input", { type: "radio", id: "useCustomType", name: "typeNameMode", checked: useCustomTypeName, onChange: () => handleTypeNameModeChange(true), className: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }),
+                            React.createElement("label", { htmlFor: "useCustomType", className: "ml-2 text-sm text-gray-700" }, "Define custom type name")),
+                        useCustomTypeName && (React.createElement("div", { className: "ml-6" },
+                            React.createElement("input", { type: "text", 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'}`, placeholder: "Enter custom type name" }),
+                            React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, "Define a custom type name for specialized resource handling")))),
+                    errors.typeName && React.createElement("p", { className: "mt-1 text-sm text-red-600" }, errors.typeName)),
+                React.createElement("div", { className: "p-4 bg-blue-50 rounded-lg" },
+                    React.createElement("div", { className: "flex items-start" },
+                        React.createElement(InformationCircleIcon, { className: "w-5 h-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0" }),
+                        React.createElement("div", { className: "text-sm text-blue-800" },
+                            React.createElement("h4", { className: "font-medium mb-2" }, "About Resource Types"),
+                            React.createElement("div", { className: "space-y-2" },
+                                React.createElement("p", null, "Resource types define how resources are categorized and processed in your application."),
+                                React.createElement("ul", { className: "list-disc list-inside space-y-1 ml-2" },
+                                    React.createElement("li", null,
+                                        React.createElement("strong", null, "Name:"),
+                                        " A human-readable identifier for grouping resources"),
+                                    React.createElement("li", null,
+                                        React.createElement("strong", null, "Type Name:"),
+                                        " Determines how the resource data is interpreted and validated"),
+                                    React.createElement("li", null, "Common types (string, object, array) provide built-in processing"),
+                                    React.createElement("li", null, "Custom types allow specialized handling for domain-specific data")))))),
+                React.createElement("div", { className: "p-4 bg-gray-50 rounded-lg" },
+                    React.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Preview"),
+                    React.createElement("div", { className: "text-sm text-gray-600" },
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "font-medium" }, "Resource Type:"),
+                            " ",
+                            formData.name || '(name not set)'),
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "font-medium" }, "Type Name:"),
+                            " ",
+                            formData.typeName),
+                        React.createElement("p", null,
+                            React.createElement("span", { className: "font-medium" }, "Description:"),
+                            " ",
+                            getTypeNameDescription(formData.typeName))))),
+            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" }, resourceType ? 'Save Changes' : 'Add Resource Type')))));
+};
+//# sourceMappingURL=ResourceTypeEditForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTypeEditForm.js","sourceRoot":"","sources":["../../../src/components/forms/ResourceTypeEditForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useCallback } from 'react';\nimport { XMarkIcon, InformationCircleIcon } from '@heroicons/react/24/outline';\nimport { ResourceTypes } from '@fgv/ts-res';\n\nexport interface ResourceTypeEditFormProps {\n  resourceType?: ResourceTypes.Config.IResourceTypeConfig;\n  onSave: (resourceType: ResourceTypes.Config.IResourceTypeConfig) => void;\n  onCancel: () => void;\n  existingNames?: string[];\n}\n\ninterface FormData {\n  name: string;\n  typeName: string;\n}\n\nconst COMMON_TYPE_NAMES = [\n  'string',\n  'object',\n  'array',\n  'number',\n  'boolean',\n  'localizedString',\n  'config',\n  'settings',\n  'permissions',\n  'template',\n  'content',\n  'metadata'\n];\n\nexport const ResourceTypeEditForm: React.FC<ResourceTypeEditFormProps> = ({\n  resourceType,\n  onSave,\n  onCancel,\n  existingNames = []\n}) => {\n  const [formData, setFormData] = useState<FormData>(() => {\n    if (resourceType) {\n      return {\n        name: resourceType.name,\n        typeName: resourceType.typeName\n      };\n    }\n    return {\n      name: '',\n      typeName: 'string'\n    };\n  });\n\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [useCustomTypeName, setUseCustomTypeName] = useState(() => {\n    if (resourceType) {\n      return !COMMON_TYPE_NAMES.includes(resourceType.typeName);\n    }\n    return false;\n  });\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 !== resourceType?.name) {\n      newErrors.name = 'Name must be unique';\n    } else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.name)) {\n      newErrors.name = 'Name must start with a letter and contain only letters, numbers, and underscores';\n    }\n\n    if (!formData.typeName.trim()) {\n      newErrors.typeName = 'Type name is required';\n    } else if (!/^[a-zA-Z][a-zA-Z0-9_]*$/.test(formData.typeName)) {\n      newErrors.typeName =\n        'Type name 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, resourceType?.name]);\n\n  const handleSave = useCallback(() => {\n    if (!validateForm()) return;\n\n    const result: ResourceTypes.Config.IResourceTypeConfig = {\n      name: formData.name,\n      typeName: formData.typeName\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 typeName from name for new resource types if using common types\n        if (field === 'name' && !resourceType && !useCustomTypeName) {\n          const cleanName = value.toLowerCase().replace(/[^a-zA-Z0-9]/g, '');\n          const commonType = COMMON_TYPE_NAMES.find(\n            (type) => cleanName.includes(type) || type.includes(cleanName)\n          );\n          if (commonType) {\n            updated.typeName = commonType;\n          } else {\n            updated.typeName = cleanName || 'string';\n          }\n        }\n\n        return updated;\n      });\n\n      if (errors[field]) {\n        setErrors((prev) => ({ ...prev, [field]: '' }));\n      }\n    },\n    [errors, resourceType, useCustomTypeName]\n  );\n\n  const handleTypeNameModeChange = useCallback(\n    (useCustom: boolean) => {\n      setUseCustomTypeName(useCustom);\n      if (!useCustom && !resourceType) {\n        // Reset to a common type\n        updateField('typeName', 'string');\n      }\n    },\n    [resourceType, updateField]\n  );\n\n  const getTypeNameDescription = (typeName: string): string => {\n    switch (typeName) {\n      case 'string':\n        return 'Simple text content (default)';\n      case 'object':\n        return 'Complex structured data (JSON objects)';\n      case 'array':\n        return 'List of values or objects';\n      case 'number':\n        return 'Numeric values';\n      case 'boolean':\n        return 'True/false values';\n      case 'localizedString':\n        return 'Text content with localization support';\n      case 'config':\n        return 'Configuration settings and parameters';\n      case 'settings':\n        return 'User or application settings';\n      case 'permissions':\n        return 'Access control and permission data';\n      case 'template':\n        return 'Template content for rendering';\n      case 'content':\n        return 'Rich content (HTML, Markdown, etc.)';\n      case 'metadata':\n        return 'Descriptive information about resources';\n      default:\n        return 'Custom resource type';\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            {resourceType ? 'Edit Resource Type' : 'Add Resource Type'}\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>\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 resource type name (e.g., 'userSettings', 'errorMessages')\"\n            />\n            {errors.name && <p className=\"mt-1 text-sm text-red-600\">{errors.name}</p>}\n            <p className=\"mt-1 text-xs text-gray-500\">\n              A descriptive name for this type of resource. This will be used to categorize and identify\n              resources.\n            </p>\n          </div>\n\n          {/* Type Name Configuration */}\n          <div>\n            <label className=\"block text-sm font-medium text-gray-700 mb-3\">Type Name Configuration *</label>\n\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center\">\n                <input\n                  type=\"radio\"\n                  id=\"useCommonType\"\n                  name=\"typeNameMode\"\n                  checked={!useCustomTypeName}\n                  onChange={() => handleTypeNameModeChange(false)}\n                  className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300\"\n                />\n                <label htmlFor=\"useCommonType\" className=\"ml-2 text-sm text-gray-700\">\n                  Use common type name\n                </label>\n              </div>\n\n              {!useCustomTypeName && (\n                <div className=\"ml-6\">\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                    {COMMON_TYPE_NAMES.map((type) => (\n                      <option key={type} value={type}>\n                        {type}\n                      </option>\n                    ))}\n                  </select>\n                  <p className=\"mt-1 text-xs text-gray-600\">{getTypeNameDescription(formData.typeName)}</p>\n                </div>\n              )}\n\n              <div className=\"flex items-center\">\n                <input\n                  type=\"radio\"\n                  id=\"useCustomType\"\n                  name=\"typeNameMode\"\n                  checked={useCustomTypeName}\n                  onChange={() => handleTypeNameModeChange(true)}\n                  className=\"h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300\"\n                />\n                <label htmlFor=\"useCustomType\" className=\"ml-2 text-sm text-gray-700\">\n                  Define custom type name\n                </label>\n              </div>\n\n              {useCustomTypeName && (\n                <div className=\"ml-6\">\n                  <input\n                    type=\"text\"\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                    placeholder=\"Enter custom type name\"\n                  />\n                  <p className=\"mt-1 text-xs text-gray-500\">\n                    Define a custom type name for specialized resource handling\n                  </p>\n                </div>\n              )}\n            </div>\n\n            {errors.typeName && <p className=\"mt-1 text-sm text-red-600\">{errors.typeName}</p>}\n          </div>\n\n          {/* Information Panel */}\n          <div className=\"p-4 bg-blue-50 rounded-lg\">\n            <div className=\"flex items-start\">\n              <InformationCircleIcon className=\"w-5 h-5 text-blue-400 mt-0.5 mr-3 flex-shrink-0\" />\n              <div className=\"text-sm text-blue-800\">\n                <h4 className=\"font-medium mb-2\">About Resource Types</h4>\n                <div className=\"space-y-2\">\n                  <p>\n                    Resource types define how resources are categorized and processed in your application.\n                  </p>\n                  <ul className=\"list-disc list-inside space-y-1 ml-2\">\n                    <li>\n                      <strong>Name:</strong> A human-readable identifier for grouping resources\n                    </li>\n                    <li>\n                      <strong>Type Name:</strong> Determines how the resource data is interpreted and\n                      validated\n                    </li>\n                    <li>Common types (string, object, array) provide built-in processing</li>\n                    <li>Custom types allow specialized handling for domain-specific data</li>\n                  </ul>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {/* Preview */}\n          <div className=\"p-4 bg-gray-50 rounded-lg\">\n            <h4 className=\"font-medium text-gray-900 mb-2\">Preview</h4>\n            <div className=\"text-sm text-gray-600\">\n              <p>\n                <span className=\"font-medium\">Resource Type:</span> {formData.name || '(name not set)'}\n              </p>\n              <p>\n                <span className=\"font-medium\">Type Name:</span> {formData.typeName}\n              </p>\n              <p>\n                <span className=\"font-medium\">Description:</span> {getTypeNameDescription(formData.typeName)}\n              </p>\n            </div>\n          </div>\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            {resourceType ? 'Save Changes' : 'Add Resource Type'}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1,9 @@
+export { QualifierTypeEditForm } from './QualifierTypeEditForm';
+export type { QualifierTypeEditFormProps } from './QualifierTypeEditForm';
+export { QualifierEditForm } from './QualifierEditForm';
+export type { QualifierEditFormProps } from './QualifierEditForm';
+export { ResourceTypeEditForm } from './ResourceTypeEditForm';
+export type { ResourceTypeEditFormProps } from './ResourceTypeEditForm';
+export { HierarchyEditor } from './HierarchyEditor';
+export type { HierarchyEditorProps } from './HierarchyEditor';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/components/forms/index.js

@@ -0,0 +1,5 @@
+export { QualifierTypeEditForm } from './QualifierTypeEditForm';
+export { QualifierEditForm } from './QualifierEditForm';
+export { ResourceTypeEditForm } from './ResourceTypeEditForm';
+export { HierarchyEditor } from './HierarchyEditor';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAGhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { QualifierTypeEditForm } from './QualifierTypeEditForm';\nexport type { QualifierTypeEditFormProps } from './QualifierTypeEditForm';\n\nexport { QualifierEditForm } from './QualifierEditForm';\nexport type { QualifierEditFormProps } from './QualifierEditForm';\n\nexport { ResourceTypeEditForm } from './ResourceTypeEditForm';\nexport type { ResourceTypeEditFormProps } from './ResourceTypeEditForm';\n\nexport { HierarchyEditor } from './HierarchyEditor';\nexport type { HierarchyEditorProps } from './HierarchyEditor';\n"]}

package/lib/components/orchestrator/ResourceOrchestrator.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { Config } from '@fgv/ts-res';
+import { OrchestratorState, OrchestratorActions } from '../../types';
+export interface ResourceOrchestratorProps {
+    children: (orchestrator: {
+        state: OrchestratorState;
+        actions: OrchestratorActions;
+    }) => ReactNode;
+    initialConfiguration?: Config.Model.ISystemConfiguration;
+    onStateChange?: (state: Partial<OrchestratorState>) => void;
+}
+export declare const ResourceOrchestrator: React.FC<ResourceOrchestratorProps>;
+export default ResourceOrchestrator;
+//# sourceMappingURL=ResourceOrchestrator.d.ts.map

package/lib/components/orchestrator/ResourceOrchestrator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceOrchestrator.d.ts","sourceRoot":"","sources":["../../../src/components/orchestrator/ResourceOrchestrator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,MAAM,EAAU,MAAM,aAAa,CAAC;AAC7C,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EAOpB,MAAM,aAAa,CAAC;AAcrB,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,KAAK,EAAE,iBAAiB,CAAC;QAAC,OAAO,EAAE,mBAAmB,CAAA;KAAE,KAAK,SAAS,CAAC;IAClG,oBAAoB,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,oBAAoB,CAAC;IACzD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAiVpE,CAAC;AAEF,eAAe,oBAAoB,CAAC"}