@elixir-cloud/trs-filer 2.0.0-alpha.4 → 2.0.0-alpha.41

package/dist/chunks/{chunk.4N7ZYKCA.js → chunk.JW7KBVNO.js}

@@ -1,6 +1,9 @@
-import { ComponentStyles, __decorateClass, __spreadProps, __spreadValues } from './chunk.Q5GOJN3Z.js';
+import { ComponentStyles } from './chunk.WG3VQJ2S.js';
+import { RestTrsFilerProvider } from './chunk.3S22ENXV.js';
+import { __decorateClass, __spreadProps, __spreadValues } from './chunk.S3NI7NKU.js';
 import { css, LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import JSZip from '@progress/jszip-esm';
 import '@elixir-cloud/design/components/button/index.js';
 import '@elixir-cloud/design/components/input/index.js';
 import '@elixir-cloud/design/components/select/index.js';
@@ -13,7 +16,6 @@ import '@elixir-cloud/design/components/tabs/index.js';
 import '@elixir-cloud/design/components/separator/index.js';
 import '@elixir-cloud/design/components/checkbox/index.js';
 import '@elixir-cloud/design/components/collapsible/index.js';
-import JSZip from '@progress/jszip-esm';
 
 var GlobalStyles = css`
   :host {
@@ -107,253 +109,26 @@ var GlobalStyles = css`
     --sidebar-ring: var(--ecc-sidebar-ring, oklch(0.439 0 0));
   }
 `;
-
-// src/providers/rest-trs-filer-provider.ts
-var RestTrsFilerProvider = class {
-  constructor(baseUrl) {
-    this.baseUrl = baseUrl;
-  }
-  async getToolClasses() {
-    const url = `${this.baseUrl}/toolClasses`;
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tool classes: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getToolsList(limit, offset, filters, query) {
-    let url = `${this.baseUrl}/tools?${limit ? `limit=${limit}&` : ""}${offset ? `offset=${offset}&` : ""}`;
-    if (query && query.length > 0) {
-      url += `&name=${encodeURIComponent(query)}`;
-    }
-    Object.entries(filters).forEach(([key, value]) => {
-      if (value !== "" && value !== void 0 && key !== "offset") {
-        url += `&${key}=${encodeURIComponent(String(value))}`;
-      }
-    });
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tools: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getTool(url, id) {
-    const encodedToolId = encodeURIComponent(id);
-    const response = await fetch(`${this.baseUrl}/tools/${encodedToolId}`);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tool: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getToolVersions(url, id) {
-    const encodedToolId = encodeURIComponent(id);
-    const response = await fetch(
-      `${this.baseUrl}/tools/${encodedToolId}/versions`
-    );
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tool versions: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getToolVersion(url, id, versionId) {
-    const encodedToolId = encodeURIComponent(id);
-    const version = versionId.split(":")[1] ? versionId.split(":")[1] : versionId;
-    const encodedVersionId = encodeURIComponent(version);
-    const response = await fetch(
-      `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}`
-    );
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tool version: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getToolFiles(url, id, version, descriptorType, format) {
-    const encodedToolId = encodeURIComponent(id);
-    const versionPart = version.split(":")[1] ? version.split(":")[1] : version;
-    const encodedVersionId = encodeURIComponent(versionPart);
-    const encodedType = encodeURIComponent(descriptorType);
-    let requestUrl = `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/${encodedType}/files`;
-    if (format) {
-      requestUrl += `?format=${format}`;
-    }
-    const response = await fetch(requestUrl);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tool files: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getToolDescriptor(url, id, version, descriptorType) {
-    const encodedToolId = encodeURIComponent(id);
-    const versionPart = version.split(":")[1] ? version.split(":")[1] : version;
-    const encodedVersionId = encodeURIComponent(versionPart);
-    const encodedType = encodeURIComponent(descriptorType);
-    const response = await fetch(
-      `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/${encodedType}/descriptor`
-    );
-    if (!response.ok) {
-      throw new Error(
-        `Failed to fetch tool descriptor: ${response.statusText}`
-      );
-    }
-    return response.json();
-  }
-  async getToolDescriptorByPath(url, id, version, descriptorType, path) {
-    const encodedToolId = encodeURIComponent(id);
-    const versionPart = version.split(":")[1] ? version.split(":")[1] : version;
-    const encodedVersionId = encodeURIComponent(versionPart);
-    const encodedType = encodeURIComponent(descriptorType);
-    try {
-      const response = await fetch(
-        `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/${encodedType}/descriptor/${path}`
-      );
-      if (response.ok) {
-        return response.json();
-      }
-      const encodedPath = encodeURIComponent(path);
-      const encodedResponse = await fetch(
-        `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/${encodedType}/descriptor/${encodedPath}`
-      );
-      if (encodedResponse.ok) {
-        return encodedResponse.json();
-      }
-      throw new Error(
-        `Failed to fetch tool descriptor by path: ${encodedResponse.statusText}`
-      );
-    } catch (error) {
-      const encodedPath = encodeURIComponent(path);
-      try {
-        const encodedResponse = await fetch(
-          `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/${encodedType}/descriptor/${encodedPath}`
-        );
-        if (encodedResponse.ok) {
-          return encodedResponse.json();
-        }
-        throw new Error(
-          `Failed to fetch tool descriptor by path: ${encodedResponse.statusText}`
-        );
-      } catch (encodedError) {
-        throw error;
-      }
-    }
-  }
-  async getContainerfile(url, id, version) {
-    const encodedToolId = encodeURIComponent(id);
-    const versionPart = version.split(":")[1] ? version.split(":")[1] : version;
-    const encodedVersionId = encodeURIComponent(versionPart);
-    const response = await fetch(
-      `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/containerfile`
-    );
-    if (!response.ok) {
-      throw new Error(`Failed to fetch containerfile: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  async getToolTests(url, id, version, descriptorType) {
-    const encodedToolId = encodeURIComponent(id);
-    const versionPart = version.split(":")[1] ? version.split(":")[1] : version;
-    const encodedVersionId = encodeURIComponent(versionPart);
-    const encodedType = encodeURIComponent(descriptorType);
-    const response = await fetch(
-      `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}/${encodedType}/tests`
-    );
-    if (!response.ok) {
-      throw new Error(`Failed to fetch tool tests: ${response.statusText}`);
-    }
-    return response.json();
-  }
-  // Creation methods (TRS-Filer specific functionality)
-  async createTool(tool) {
-    console.log("Creating tool:", tool);
-    const response = await fetch(`${this.baseUrl}/tools`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(tool)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to create tool: ${response.statusText}`);
-    }
-    return response.text();
-  }
-  async createToolWithId(id, tool) {
-    const encodedToolId = encodeURIComponent(id);
-    const response = await fetch(`${this.baseUrl}/tools/${encodedToolId}`, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(tool)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to create/update tool: ${response.statusText}`);
-    }
-    return response.text();
-  }
-  async createToolVersion(toolId, version) {
-    const encodedToolId = encodeURIComponent(toolId);
-    const response = await fetch(`${this.baseUrl}/tools/${encodedToolId}/versions`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(version)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to create tool version: ${response.statusText}`);
-    }
-    return response.text();
-  }
-  async createToolVersionWithId(toolId, versionId, version) {
-    const encodedToolId = encodeURIComponent(toolId);
-    const encodedVersionId = encodeURIComponent(versionId);
-    const response = await fetch(
-      `${this.baseUrl}/tools/${encodedToolId}/versions/${encodedVersionId}`,
-      {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(version)
-      }
-    );
-    if (!response.ok) {
-      throw new Error(`Failed to create/update tool version: ${response.statusText}`);
-    }
-    return response.text();
-  }
-  async createToolClass(toolClass) {
-    const response = await fetch(`${this.baseUrl}/toolClasses`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(toolClass)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to create tool class: ${response.statusText}`);
-    }
-    return response.text();
-  }
-  async createToolClassWithId(id, toolClass) {
-    const encodedId = encodeURIComponent(id);
-    const response = await fetch(`${this.baseUrl}/toolClasses/${encodedId}`, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(toolClass)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to create/update tool class: ${response.statusText}`);
-    }
-    return response.text();
-  }
-};
-var ECCClientElixirTrsToolCreate = class extends LitElement {
+var _ECCClientElixirTrsToolCreate = class _ECCClientElixirTrsToolCreate extends LitElement {
   constructor() {
     super(...arguments);
     this.baseUrl = "";
+    this.defaultName = "";
+    this.defaultOrganization = "";
+    this.defaultDescription = "";
+    this.defaultToolClassId = "";
+    this.defaultAliases = "";
+    this.defaultCheckerUrl = "";
+    this.defaultCustomToolId = "";
+    this.defaultVersionName = "";
+    this.defaultVersionAuthor = "";
+    this.defaultIsProduction = false;
+    this.defaultSigned = false;
+    this.defaultVerified = false;
+    this.defaultVerifiedSource = "";
+    this.defaultIncludedApps = "";
+    this.defaultCustomVersionId = "";
+    this.supportedDescriptorTypes = [];
     this.toolClasses = [];
     this.loading = false;
     this.error = null;
@@ -390,9 +165,10 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     this.activeDescriptorType = {};
   }
   async firstUpdated() {
+    this.initializeFormWithDefaults();
     if (!this.baseUrl && !this.provider) {
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-validation-error", {
+        new CustomEvent("ecc-tool-create-validation-failed", {
           detail: {
             error: "Please provide either a base URL for the TRS API or a custom provider."
           },
@@ -413,21 +189,66 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       await this.loadToolClasses();
     }
   }
+  initializeFormWithDefaults() {
+    this.formData = {
+      name: this.defaultName,
+      organization: this.defaultOrganization,
+      description: this.defaultDescription,
+      toolClassId: this.defaultToolClassId,
+      aliases: this.defaultAliases ? this.defaultAliases.split(",").map((s) => s.trim()).filter(Boolean) : [],
+      checkerUrl: this.defaultCheckerUrl,
+      hasChecker: Boolean(this.defaultCheckerUrl),
+      customToolId: this.defaultCustomToolId,
+      useCustomId: Boolean(this.defaultCustomToolId)
+    };
+    if (this.versions.length > 0) {
+      this.versions[0] = __spreadProps(__spreadValues({}, this.versions[0]), {
+        name: this.defaultVersionName,
+        author: this.defaultVersionAuthor ? this.defaultVersionAuthor.split(",").map((s) => s.trim()).filter(Boolean) : [],
+        isProduction: this.defaultIsProduction,
+        signed: this.defaultSigned,
+        verified: this.defaultVerified,
+        verifiedSource: this.defaultVerifiedSource ? this.defaultVerifiedSource.split(",").map((s) => s.trim()).filter(Boolean) : [],
+        includedApps: this.defaultIncludedApps ? this.defaultIncludedApps.split(",").map((s) => s.trim()).filter(Boolean) : [],
+        customVersionId: this.defaultCustomVersionId,
+        useCustomVersionId: Boolean(this.defaultCustomVersionId)
+      });
+    }
+  }
   updated(changedProperties) {
+    const defaultProps = [
+      "defaultName",
+      "defaultOrganization",
+      "defaultDescription",
+      "defaultToolClassId",
+      "defaultAliases",
+      "defaultCheckerUrl",
+      "defaultCustomToolId",
+      "defaultVersionName",
+      "defaultVersionAuthor",
+      "defaultIsProduction",
+      "defaultSigned",
+      "defaultVerified",
+      "defaultVerifiedSource",
+      "defaultIncludedApps",
+      "defaultCustomVersionId"
+    ];
+    if (defaultProps.some((prop) => changedProperties.has(prop))) {
+      this.initializeFormWithDefaults();
+    }
     if (changedProperties.has("baseUrl") && this.baseUrl) {
       this._provider = new RestTrsFilerProvider(this.baseUrl);
       this.loadToolClasses();
     }
   }
   async loadToolClasses() {
-    if (!this._provider)
-      return;
+    if (!this._provider) return;
     try {
       this.toolClasses = await this._provider.getToolClasses();
     } catch (error) {
       console.error("Failed to load tool classes:", error);
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-error", {
+        new CustomEvent("ecc-tool-create-failed", {
           detail: { error: "Failed to load tool classes" },
           bubbles: true,
           composed: true
@@ -454,18 +275,18 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     this.versions = [
       ...this.versions,
       {
-        name: "",
-        author: [],
+        name: this.defaultVersionName,
+        author: this.defaultVersionAuthor ? this.defaultVersionAuthor.split(",").map((s) => s.trim()).filter(Boolean) : [],
         descriptorTypes: [],
-        isProduction: false,
-        signed: false,
-        verified: false,
-        verifiedSource: [],
-        includedApps: [],
+        isProduction: this.defaultIsProduction,
+        signed: this.defaultSigned,
+        verified: this.defaultVerified,
+        verifiedSource: this.defaultVerifiedSource ? this.defaultVerifiedSource.split(",").map((s) => s.trim()).filter(Boolean) : [],
+        includedApps: this.defaultIncludedApps ? this.defaultIncludedApps.split(",").map((s) => s.trim()).filter(Boolean) : [],
         files: [],
         images: [],
-        customVersionId: "",
-        useCustomVersionId: false
+        customVersionId: this.defaultCustomVersionId,
+        useCustomVersionId: Boolean(this.defaultCustomVersionId)
       }
     ];
   }
@@ -479,8 +300,10 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     const activeDescriptorType = this.activeDescriptorType[versionIndex] || (version.descriptorTypes.length > 0 ? version.descriptorTypes[0] : null);
     if (!activeDescriptorType) {
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-validation-error", {
-          detail: { error: "Please select a descriptor type before adding files." },
+        new CustomEvent("ecc-tool-create-validation-failed", {
+          detail: {
+            error: "Please select a descriptor type before adding files."
+          },
           bubbles: true,
           composed: true
         })
@@ -489,9 +312,16 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     }
     const updatedVersions = [...this.versions];
     const descriptorType = activeDescriptorType;
+    let fileType = "PRIMARY_DESCRIPTOR";
+    if (updatedVersions[versionIndex].files.find(
+      (file) => file.fileType === "PRIMARY_DESCRIPTOR"
+    )) {
+      fileType = "SECONDARY_DESCRIPTOR";
+    }
     updatedVersions[versionIndex].files.push({
       path: "",
-      fileType: "PRIMARY_DESCRIPTOR",
+      fileType,
+      uiFileType: fileType,
       content: "",
       checksumType: "sha256",
       checksumValue: "",
@@ -524,14 +354,16 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
   }
   handleBulkFileUpload(versionIndex, event) {
     const input = event.target;
-    const files = input.files;
+    const { files } = input;
     if (files && files.length > 0) {
       const version = this.versions[versionIndex];
       const activeDescriptorType = this.activeDescriptorType[versionIndex] || (version.descriptorTypes.length > 0 ? version.descriptorTypes[0] : null);
       if (!activeDescriptorType) {
         this.dispatchEvent(
-          new CustomEvent("ecc-tool-create-validation-error", {
-            detail: { error: "Please select a descriptor type before uploading files." },
+          new CustomEvent("ecc-tool-create-validation-failed", {
+            detail: {
+              error: "Please select a descriptor type before uploading files."
+            },
             bubbles: true,
             composed: true
           })
@@ -541,15 +373,25 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       }
       const updatedVersions = [...this.versions];
       const descriptorType = activeDescriptorType;
-      Array.from(files).forEach((file, index) => {
+      Array.from(files).forEach((file) => {
+        const defaultFileType = _ECCClientElixirTrsToolCreate.getDefaultFileType(
+          file.name
+        );
+        const uiFileType = _ECCClientElixirTrsToolCreate.getUIFileType(
+          file.name,
+          defaultFileType
+        );
+        const containerImageType = defaultFileType === "CONTAINERFILE" ? _ECCClientElixirTrsToolCreate.getContainerImageType(file.name) : void 0;
         const fileData = {
           path: file.name,
-          fileType: this.getDefaultFileType(file.name),
+          fileType: defaultFileType,
+          uiFileType,
           content: "",
           file,
           checksumType: "sha256",
           checksumValue: "",
-          descriptorType
+          descriptorType,
+          containerImageType
         };
         updatedVersions[versionIndex].files.push(fileData);
         const reader = new FileReader();
@@ -576,7 +418,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     const file = (_a = input.files) == null ? void 0 : _a[0];
     if (!file || !file.name.toLowerCase().endsWith(".zip")) {
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-validation-error", {
+        new CustomEvent("ecc-tool-create-validation-failed", {
           detail: { error: "Please select a valid ZIP file" },
           bubbles: true,
           composed: true
@@ -588,8 +430,10 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     const activeDescriptorType = this.activeDescriptorType[versionIndex] || (version.descriptorTypes.length > 0 ? version.descriptorTypes[0] : null);
     if (!activeDescriptorType) {
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-validation-error", {
-          detail: { error: "Please select a descriptor type before uploading ZIP files." },
+        new CustomEvent("ecc-tool-create-validation-failed", {
+          detail: {
+            error: "Please select a descriptor type before uploading ZIP files."
+          },
           bubbles: true,
           composed: true
         })
@@ -603,17 +447,16 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       const zipContent = await zip.loadAsync(file);
       const updatedVersions = [...this.versions];
       const filePromises = [];
-      let extractedCount = 0;
       const descriptorType = activeDescriptorType;
       zipContent.forEach((relativePath, zipEntry) => {
-        if (zipEntry.dir)
-          return;
-        const promise = this.extractFileFromZip(zipEntry, relativePath).then((fileData) => {
+        if (zipEntry.dir) return;
+        const promise = _ECCClientElixirTrsToolCreate.extractFileFromZip(
+          zipEntry,
+          relativePath
+        ).then((fileData) => {
           if (fileData) {
-            fileData.descriptorType = descriptorType;
-            updatedVersions[versionIndex].files.push(fileData);
-            extractedCount++;
-          } else {
+            const fileDataWithDescriptor = __spreadProps(__spreadValues({}, fileData), { descriptorType });
+            updatedVersions[versionIndex].files.push(fileDataWithDescriptor);
           }
         }).catch((error) => {
           console.error(`Failed to extract file ${relativePath}:`, error);
@@ -635,7 +478,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
         error instanceof Error ? error.stack : "No stack trace"
       );
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-error", {
+        new CustomEvent("ecc-tool-create-failed", {
           detail: {
             error: `Failed to extract ZIP file: ${error instanceof Error ? error.message : "Unknown error"}. Please ensure it's a valid ZIP archive.`
           },
@@ -647,9 +490,9 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       this.loading = false;
     }
   }
-  async extractFileFromZip(zipEntry, relativePath) {
+  static async extractFileFromZip(zipEntry, relativePath) {
     try {
-      const isTextFile = this.isTextFile(relativePath);
+      const isTextFile = _ECCClientElixirTrsToolCreate.isTextFile(relativePath);
       let content;
       if (isTextFile) {
         content = await zipEntry.async("text");
@@ -658,16 +501,24 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
         const uint8Array = new Uint8Array(arrayBuffer);
         content = btoa(String.fromCharCode(...uint8Array));
       }
+      const defaultFileType = _ECCClientElixirTrsToolCreate.getDefaultFileType(relativePath);
+      const uiFileType = _ECCClientElixirTrsToolCreate.getUIFileType(
+        relativePath,
+        defaultFileType
+      );
+      const containerImageType = defaultFileType === "CONTAINERFILE" ? _ECCClientElixirTrsToolCreate.getContainerImageType(relativePath) : void 0;
       const fileData = {
         path: relativePath,
-        fileType: this.getDefaultFileType(relativePath),
+        fileType: defaultFileType,
+        uiFileType,
         content,
         file: void 0,
         // No actual File object for extracted files
         checksumType: "sha256",
         checksumValue: "",
-        descriptorType: void 0
+        descriptorType: void 0,
         // Will be set by the calling method
+        containerImageType
       };
       return fileData;
     } catch (error) {
@@ -679,7 +530,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       return null;
     }
   }
-  isTextFile(filename) {
+  static isTextFile(filename) {
     var _a;
     const textExtensions = [
       "txt",
@@ -715,7 +566,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase();
     return textExtensions.includes(extension || "") || filename.toLowerCase().includes("readme") || filename.toLowerCase().includes("license") || filename.toLowerCase().includes("changelog");
   }
-  getDefaultFileType(filename) {
+  static getDefaultFileType(filename) {
     var _a;
     const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase();
     const basename = filename.toLowerCase();
@@ -733,10 +584,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     }
     return "OTHER";
   }
-  getDefaultDescriptorType(filename) {
-    return void 0;
-  }
-  getContainerImageType(filename) {
+  static getContainerImageType(filename) {
     var _a;
     const basename = filename.toLowerCase();
     const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase();
@@ -748,7 +596,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     }
     return "Docker";
   }
-  getFileExtension(filename) {
+  static getFileExtension(filename) {
     var _a;
     return ((_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "txt";
   }
@@ -775,11 +623,12 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     this.versions = updatedVersions;
   }
   async handleSubmit() {
-    console.log("handleSubmit");
     if (!this._provider || !this._provider.createTool) {
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-error", {
-          detail: { error: "Tool creation is not supported by the current provider" },
+        new CustomEvent("ecc-tool-create-failed", {
+          detail: {
+            error: "Tool creation is not supported by the current provider"
+          },
           bubbles: true,
           composed: true
         })
@@ -829,7 +678,9 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
                 }
               ] : void 0
             },
-            type: file.fileType === "CONTAINERFILE" ? this.getContainerImageType(file.path) : file.descriptorType || version.descriptorTypes[0] || "CWL"
+            type: file.fileType === "CONTAINERFILE" ? file.containerImageType || _ECCClientElixirTrsToolCreate.getContainerImageType(
+              file.path
+            ) : file.descriptorType || version.descriptorTypes[0] || "CWL"
             // Use file's descriptor type or first version descriptor type as default
           })) : void 0,
           images: version.images.length > 0 ? version.images : void 0
@@ -846,7 +697,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       }
       const successMessage = `Tool created successfully with ID: ${toolId}`;
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-success", {
+        new CustomEvent("ecc-tool-created", {
           detail: { toolId, toolData, message: successMessage },
           bubbles: true,
           composed: true
@@ -856,7 +707,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to create tool";
       this.dispatchEvent(
-        new CustomEvent("ecc-tool-create-error", {
+        new CustomEvent("ecc-tool-create-failed", {
           detail: { error: errorMessage },
           bubbles: true,
           composed: true
@@ -867,40 +718,20 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     }
   }
   resetForm() {
-    this.formData = {
-      name: "",
-      organization: "",
-      description: "",
-      toolClassId: "",
-      aliases: [],
-      checkerUrl: "",
-      hasChecker: false,
-      customToolId: "",
-      useCustomId: false
-    };
-    this.versions = [
-      {
-        name: "",
-        author: [],
-        descriptorTypes: [],
-        isProduction: false,
-        signed: false,
-        verified: false,
-        verifiedSource: [],
-        includedApps: [],
-        files: [],
-        images: [],
-        customVersionId: "",
-        useCustomVersionId: false
-      }
-    ];
+    this.initializeFormWithDefaults();
+    this.error = null;
+    this.success = null;
+    this.activeFileIndex = {};
+    this.activeDescriptorType = {};
   }
   renderBasicFields() {
     return html`
-        <div class="grid gap-4">
-          <!-- Tool Name, Organization, Tool Class in same row on desktop -->
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div class="grid gap-2">
+      <div class="grid gap-4">
+        <!-- Tool Name, Organization, Tool Class in same row on desktop -->
+        <div class="flex md:flex-row flex-col">
+          <!-- Tool Name Field -->
+          <slot name="tool-name">
+            <div class="flex-1 pr-4">
               <ecc-utils-design-label
                 for="tool-name"
                 class="text-sm font-medium"
@@ -910,13 +741,16 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
               <ecc-utils-design-input
                 id="tool-name"
                 .value=${this.formData.name}
-                @ecc-utils-change=${(e) => this.handleInputChange("name", e.detail.value)}
+                @ecc-input-changed=${(e) => this.handleInputChange("name", e.detail.value)}
                 placeholder="Enter a descriptive name for your tool"
                 class="h-10"
               ></ecc-utils-design-input>
             </div>
+          </slot>
 
-            <div class="grid gap-2">
+          <!-- Organization Field -->
+          <slot name="organization">
+            <div class="flex-1 pr-4">
               <ecc-utils-design-label
                 for="organization"
                 class="text-sm font-medium"
@@ -926,14 +760,17 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
               <ecc-utils-design-input
                 id="organization"
                 .value=${this.formData.organization}
-                @ecc-utils-change=${(e) => this.handleInputChange("organization", e.detail.value)}
+                @ecc-input-changed=${(e) => this.handleInputChange("organization", e.detail.value)}
                 placeholder="Enter your organization name"
                 required
                 class="h-10"
               ></ecc-utils-design-input>
             </div>
+          </slot>
 
-            <div class="grid gap-1">
+          <!-- Tool Class Field -->
+          <slot name="tool-class">
+            <div class="flex-1">
               <ecc-utils-design-label
                 for="tool-class"
                 class="text-sm font-medium"
@@ -943,7 +780,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
               <ecc-utils-design-select
                 id="tool-class-select"
                 .value=${this.formData.toolClassId}
-                @ecc-utils-change=${(e) => {
+                @ecc-input-changed=${(e) => {
       this.handleInputChange("toolClassId", e.detail.value);
     }}
                 required
@@ -970,9 +807,11 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
                 </ecc-utils-design-select-content>
               </ecc-utils-design-select>
             </div>
-          </div>
+          </slot>
+        </div>
 
-          <!-- Description spans full width -->
+        <!-- Description spans full width -->
+        <slot name="description">
           <div class="grid gap-2">
             <ecc-utils-design-label
               for="description"
@@ -983,14 +822,17 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
             <ecc-utils-design-textarea
               id="description"
               .value=${this.formData.description}
-              @ecc-utils-change=${(e) => this.handleInputChange("description", e.detail.value)}
+              @ecc-input-changed=${(e) => this.handleInputChange("description", e.detail.value)}
               placeholder="Provide a detailed description of what your tool does"
               rows="4"
               class="resize-none"
             ></ecc-utils-design-textarea>
           </div>
-          ${this.renderAdvancedFields()}
-        </div>
+        </slot>
+
+        <!-- Advanced Fields -->
+        <slot name="advanced-fields"> ${this.renderAdvancedFields()} </slot>
+      </div>
     `;
   }
   renderAdvancedFields() {
@@ -1027,67 +869,73 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
               <!-- Tool Configuration in grid layout -->
               <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                 <!-- Custom Tool ID Section -->
-                <div class="grid gap-2">
-                  <ecc-utils-design-label
-                    for="custom-tool-id"
-                    class="text-sm font-medium h-6"
-                  >
-                    Custom Tool ID
-                  </ecc-utils-design-label>
-                  <ecc-utils-design-input
-                    id="custom-tool-id"
-                    .value=${this.formData.customToolId}
-                    @ecc-utils-change=${(e) => {
+                <slot name="custom-tool-id">
+                  <div class="grid gap-2">
+                    <ecc-utils-design-label
+                      for="custom-tool-id"
+                      class="text-sm font-medium h-6"
+                    >
+                      Custom Tool ID
+                    </ecc-utils-design-label>
+                    <ecc-utils-design-input
+                      id="custom-tool-id"
+                      .value=${this.formData.customToolId}
+                      @ecc-input-changed=${(e) => {
       this.handleInputChange("customToolId", e.detail.value);
       this.handleInputChange(
         "useCustomId",
         Boolean(e.detail.value)
       );
     }}
-                    placeholder="my-org/my-tool (optional)"
-                    class="h-10"
-                  ></ecc-utils-design-input>
-                </div>
+                      placeholder="my-org/my-tool (optional)"
+                      class="h-10"
+                    ></ecc-utils-design-input>
+                  </div>
+                </slot>
 
                 <!-- Aliases Section -->
-                <div class="grid gap-2">
-                  <ecc-utils-design-label
-                    for="aliases"
-                    class="text-sm font-medium h-6"
-                  >
-                    Aliases
-                  </ecc-utils-design-label>
-                  <ecc-utils-design-input
-                    id="aliases"
-                    .value=${this.formData.aliases.join(", ")}
-                    @ecc-utils-change=${(e) => this.handleArrayInputChange("aliases", e.detail.value)}
-                    placeholder="alias1, alias2, alias3"
-                    class="h-10"
-                  ></ecc-utils-design-input>
-                </div>
+                <slot name="aliases">
+                  <div class="grid gap-2">
+                    <ecc-utils-design-label
+                      for="aliases"
+                      class="text-sm font-medium h-6"
+                    >
+                      Aliases
+                    </ecc-utils-design-label>
+                    <ecc-utils-design-input
+                      id="aliases"
+                      .value=${this.formData.aliases.join(", ")}
+                      @ecc-input-changed=${(e) => this.handleArrayInputChange("aliases", e.detail.value)}
+                      placeholder="alias1, alias2, alias3"
+                      class="h-10"
+                    ></ecc-utils-design-input>
+                  </div>
+                </slot>
 
                 <!-- Checker Tool Section -->
-                <div class="grid gap-2">
-                  <ecc-utils-design-label
-                    for="checker-url"
-                    class="text-sm font-medium h-6"
-                  >
-                    Checker Tool URL
-                  </ecc-utils-design-label>
-                  <ecc-utils-design-input
-                    id="checker-url"
-                    .value=${this.formData.checkerUrl}
-                    @ecc-utils-change=${(e) => {
+                <slot name="checker-url">
+                  <div class="grid gap-2">
+                    <ecc-utils-design-label
+                      for="checker-url"
+                      class="text-sm font-medium h-6"
+                    >
+                      Checker Tool URL
+                    </ecc-utils-design-label>
+                    <ecc-utils-design-input
+                      id="checker-url"
+                      .value=${this.formData.checkerUrl}
+                      @ecc-input-changed=${(e) => {
       this.handleInputChange("checkerUrl", e.detail.value);
       this.handleInputChange(
         "hasChecker",
         Boolean(e.detail.value)
       );
     }}
-                    placeholder="https://example.com/checker-tool (optional)"
-                    class="h-10"
-                  ></ecc-utils-design-input>
-                </div>
+                      placeholder="https://example.com/checker-tool (optional)"
+                      class="h-10"
+                    ></ecc-utils-design-input>
+                  </div>
+                </slot>
               </div>
             </div>
           </ecc-utils-design-collapsible-content>
@@ -1183,43 +1031,58 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     return html`
       <div class="flex flex-col gap-4 pt-4">
         <!-- Basic Version Information -->
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div class="grid gap-2">
-            <ecc-utils-design-label class="text-sm font-medium h-6"
-              >Version Name</ecc-utils-design-label
-            >
-            <ecc-utils-design-input
-              .value=${version.name}
-              @ecc-utils-change=${(e) => this.handleVersionChange(index, "name", e.detail.value)}
-              placeholder="e.g., v1.0.0"
-              class="h-10"
-            ></ecc-utils-design-input>
-          </div>
+        <div class="flex md:flex-row flex-col">
+          <!-- Version Name Field -->
+          <slot name="version-${index}-name">
+            <div class="flex-1 pr-4">
+              <ecc-utils-design-label class="text-sm font-medium h-6"
+                >Version Name</ecc-utils-design-label
+              >
+              <ecc-utils-design-input
+                .value=${version.name}
+                @ecc-input-changed=${(e) => this.handleVersionChange(index, "name", e.detail.value)}
+                placeholder="e.g., v1.0.0"
+                class="h-10"
+              ></ecc-utils-design-input>
+            </div>
+          </slot>
 
-          <div class="grid gap-2">
-            <ecc-utils-design-label class="text-sm font-medium h-6">
-              Authors (comma-separated)
-            </ecc-utils-design-label>
-            <ecc-utils-design-input
-              .value=${version.author.join(", ")}
-              @ecc-utils-change=${(e) => {
+          <!-- Version Author Field -->
+          <slot name="version-${index}-author">
+            <div class="flex-1 pr-4">
+              <ecc-utils-design-label class="text-sm font-medium h-6">
+                Authors (comma-separated)
+              </ecc-utils-design-label>
+              <ecc-utils-design-input
+                .value=${version.author.join(", ")}
+                @ecc-input-changed=${(e) => {
       const authors = e.detail.value.split(",").map((a) => a.trim()).filter((a) => a);
       this.handleVersionChange(index, "author", authors);
     }}
-              placeholder="author1, author2"
-              class="h-10"
-            ></ecc-utils-design-input>
-          </div>
+                placeholder="author1, author2"
+                class="h-10"
+              ></ecc-utils-design-input>
+            </div>
+          </slot>
 
           <!-- Descriptor Types Selection -->
-          <div class="grid">
+          <div class="flex-1">
             <ecc-utils-design-label class="text-sm font-medium"
-              >Supported Languages</ecc-utils-design-label
+              >Languages</ecc-utils-design-label
             >
             <ecc-utils-design-multi-select
               .value=${version.descriptorTypes}
-              placeholder="Select supported languages..."
-              @ecc-utils-change=${(e) => {
+              placeholder="Select languages..."
+              @ecc-input-changed=${(e) => {
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-create-input-changed", {
+          detail: {
+            value: e.detail.value,
+            versionIndex: index,
+            type: "version-descriptor-types"
+          }
+        })
+      );
       const updatedVersions = [...this.versions];
       const oldDescriptorTypes = updatedVersions[index].descriptorTypes;
       const newDescriptorTypes = e.detail.value;
@@ -1233,7 +1096,9 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
         );
       }
       const currentActiveDescriptor = this.activeDescriptorType[index];
-      if (currentActiveDescriptor && removedDescriptorTypes.includes(currentActiveDescriptor)) {
+      if (currentActiveDescriptor && removedDescriptorTypes.includes(
+        currentActiveDescriptor
+      )) {
         this.activeDescriptorType = __spreadProps(__spreadValues({}, this.activeDescriptorType), {
           [index]: newDescriptorTypes.length > 0 ? newDescriptorTypes[0] : void 0
         });
@@ -1249,168 +1114,184 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
               </ecc-utils-design-multi-select-trigger>
 
               <ecc-utils-design-multi-select-content>
-                <ecc-utils-design-multi-select-item value="CWL">
-                  CWL (Common Workflow Language)
-                </ecc-utils-design-multi-select-item>
-                <ecc-utils-design-multi-select-item value="WDL">
-                  WDL (Workflow Description Language)
-                </ecc-utils-design-multi-select-item>
-                <ecc-utils-design-multi-select-item value="NFL">
-                  Nextflow
-                </ecc-utils-design-multi-select-item>
-                <ecc-utils-design-multi-select-item value="GALAXY">
-                  Galaxy
-                </ecc-utils-design-multi-select-item>
-                <ecc-utils-design-multi-select-item value="SMK">
-                  Snakemake
-                </ecc-utils-design-multi-select-item>
+                ${this.renderDescriptorTypeOptions()}
               </ecc-utils-design-multi-select-content>
             </ecc-utils-design-multi-select>
           </div>
         </div>
 
         <!-- Advanced Version Options -->
-        <div class="">
-          <ecc-utils-design-collapsible>
-            <ecc-utils-design-collapsible-trigger>
-              <div
-                class="flex items-center justify-between w-full py-2 text-left hover:bg-muted/50 focus:outline-none focus:ring-1 focus:ring-ring rounded cursor-pointer transition-colors px-2"
-              >
-                <h4 class="text-sm font-medium text-muted-foreground">
-                  Advance Version Configuration
-                </h4>
-                <svg
-                  class="w-4 h-4 text-muted-foreground/60 transition-transform duration-200 shrink-0"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
+        <slot name="version-${index}-advanced-options">
+          <div class="">
+            <ecc-utils-design-collapsible>
+              <ecc-utils-design-collapsible-trigger>
+                <div
+                  class="flex items-center justify-between w-full py-2 text-left hover:bg-muted/50 focus:outline-none focus:ring-1 focus:ring-ring rounded cursor-pointer transition-colors px-2"
                 >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M19 9l-7 7-7-7"
-                  ></path>
-                </svg>
-              </div>
-            </ecc-utils-design-collapsible-trigger>
+                  <h4 class="text-sm font-medium text-muted-foreground">
+                    Advance Version Configuration
+                  </h4>
+                  <svg
+                    class="w-4 h-4 text-muted-foreground/60 transition-transform duration-200 shrink-0"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M19 9l-7 7-7-7"
+                    ></path>
+                  </svg>
+                </div>
+              </ecc-utils-design-collapsible-trigger>
 
-            <ecc-utils-design-collapsible-content>
-              <div class="pt-4 space-y-4 border-t border-border/50">
-                <!-- Tags and Custom Version ID in same row -->
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div class="grid gap-1">
-                    <ecc-utils-design-label class="text-sm font-medium h-6">
-                      Tags
-                    </ecc-utils-design-label>
-                    <ecc-utils-design-multi-select
-                      .value=${this.getVersionTags(version)}
-                      placeholder="Select tags..."
-                      @ecc-utils-change=${(e) => {
+              <ecc-utils-design-collapsible-content>
+                <div class="pt-4 space-y-4 border-t border-border/50">
+                  <!-- Tags and Custom Version ID in same row -->
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="grid gap-1">
+                      <ecc-utils-design-label class="text-sm font-medium h-6">
+                        Tags
+                      </ecc-utils-design-label>
+                      <ecc-utils-design-multi-select
+                        .value=${_ECCClientElixirTrsToolCreate.getVersionTags(
+      version
+    )}
+                        placeholder="Select tags..."
+                        @ecc-input-changed=${(e) => {
       this.handleVersionTagsChange(index, e.detail.value);
     }}
-                    >
-                      <ecc-utils-design-multi-select-trigger>
-                      </ecc-utils-design-multi-select-trigger>
+                      >
+                        <ecc-utils-design-multi-select-trigger>
+                        </ecc-utils-design-multi-select-trigger>
 
-                      <ecc-utils-design-multi-select-content>
-                        <ecc-utils-design-multi-select-item value="prod">
-                          Production
-                        </ecc-utils-design-multi-select-item>
-                        <ecc-utils-design-multi-select-item value="verified">
-                          Verified
-                        </ecc-utils-design-multi-select-item>
-                        <ecc-utils-design-multi-select-item value="signed">
-                          Signed
-                        </ecc-utils-design-multi-select-item>
-                      </ecc-utils-design-multi-select-content>
-                    </ecc-utils-design-multi-select>
-                  </div>
+                        <ecc-utils-design-multi-select-content>
+                          <ecc-utils-design-multi-select-item value="prod">
+                            Production
+                          </ecc-utils-design-multi-select-item>
+                          <ecc-utils-design-multi-select-item value="verified">
+                            Verified
+                          </ecc-utils-design-multi-select-item>
+                          <ecc-utils-design-multi-select-item value="signed">
+                            Signed
+                          </ecc-utils-design-multi-select-item>
+                        </ecc-utils-design-multi-select-content>
+                      </ecc-utils-design-multi-select>
+                    </div>
 
-                  <div class="grid gap-2">
-                    <ecc-utils-design-label class="text-sm font-medium h-6">
-                      Custom Version ID
-                    </ecc-utils-design-label>
-                    <ecc-utils-design-input
-                      .value=${version.customVersionId}
-                      @ecc-utils-change=${(e) => this.handleVersionChange(
+                    <div class="grid gap-2">
+                      <ecc-utils-design-label class="text-sm font-medium h-6">
+                        Custom Version ID
+                      </ecc-utils-design-label>
+                      <ecc-utils-design-input
+                        .value=${version.customVersionId}
+                        @ecc-input-changed=${(e) => this.handleVersionChange(
       index,
       "customVersionId",
       e.detail.value
     )}
-                      placeholder="Enter custom version ID (optional)"
-                      class="h-10"
-                    ></ecc-utils-design-input>
+                        placeholder="Enter custom version ID (optional)"
+                        class="h-10"
+                      ></ecc-utils-design-input>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </ecc-utils-design-collapsible-content>
-          </ecc-utils-design-collapsible>
-        </div>
+              </ecc-utils-design-collapsible-content>
+            </ecc-utils-design-collapsible>
+          </div>
+        </slot>
 
         <!-- Files Section -->
-        <div class="space-y-2">
-          <div class="flex justify-between items-center">
-            <h4 class="text-base font-semibold">Files</h4>
-            <div class="flex gap-2">
-              <div class="relative">
-                <input
-                  type="file"
-                  multiple
-                  @change=${(e) => this.handleBulkFileUpload(index, e)}
-                  class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                  id="bulk-upload-${index}"
-                  ?disabled=${version.descriptorTypes.length === 0}
-                />
-                <ecc-utils-design-button
-                  variant="outline"
-                  size="sm"
-                  as="label"
-                  for="bulk-upload-${index}"
-                  .disabled=${version.descriptorTypes.length === 0}
-                >
-                  Upload Files
-                </ecc-utils-design-button>
-              </div>
-              <div class="relative">
-                <input
-                  type="file"
-                  accept=".zip"
-                  @change=${(e) => this.handleZipFileUpload(index, e)}
-                  class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
-                  id="zip-upload-${index}"
-                  ?disabled=${version.descriptorTypes.length === 0}
-                />
+        <slot
+          name="version-${index}-files-section"
+          version-index=${index}
+          .version=${version}
+          .files=${version.files}
+          .descriptorTypes=${version.descriptorTypes}
+          .activeDescriptorType=${this.activeDescriptorType[index]}
+          .activeFileIndex=${this.activeFileIndex[index]}
+          .onBulkFileUpload=${(e) => this.handleBulkFileUpload(index, e)}
+          .onZipFileUpload=${(e) => this.handleZipFileUpload(index, e)}
+          .onAddFile=${() => this.addFileToVersion(index)}
+          .onRemoveFile=${(fileIndex) => this.removeFileFromVersion(index, fileIndex)}
+          .onDescriptorTypeChange=${(descriptorType) => {
+      this.activeDescriptorType = __spreadProps(__spreadValues({}, this.activeDescriptorType), {
+        [index]: descriptorType
+      });
+      this.requestUpdate();
+    }}
+          .onFileSelect=${(fileIndex) => {
+      this.activeFileIndex = __spreadProps(__spreadValues({}, this.activeFileIndex), {
+        [index]: fileIndex
+      });
+      this.requestUpdate();
+    }}
+          .onFileFieldChange=${(fileIndex, field, value) => this.handleFileFieldChange(index, fileIndex, field, value)}
+        >
+          <div class="space-y-2">
+            <div class="flex justify-between items-center">
+              <h4 class="text-base font-semibold">Files</h4>
+              <div class="flex gap-2">
+                <div class="relative">
+                  <input
+                    type="file"
+                    multiple
+                    @change=${(e) => this.handleBulkFileUpload(index, e)}
+                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                    id="bulk-upload-${index}"
+                    ?disabled=${version.descriptorTypes.length === 0}
+                  />
+                  <ecc-utils-design-button
+                    variant="outline"
+                    size="sm"
+                    as="label"
+                    for="bulk-upload-${index}"
+                    .disabled=${version.descriptorTypes.length === 0}
+                  >
+                    Upload Files
+                  </ecc-utils-design-button>
+                </div>
+                <div class="relative">
+                  <input
+                    type="file"
+                    accept=".zip"
+                    @change=${(e) => this.handleZipFileUpload(index, e)}
+                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                    id="zip-upload-${index}"
+                    ?disabled=${version.descriptorTypes.length === 0}
+                  />
+                  <ecc-utils-design-button
+                    variant="outline"
+                    size="sm"
+                    as="label"
+                    for="zip-upload-${index}"
+                    .disabled=${version.descriptorTypes.length === 0}
+                  >
+                    Upload ZIP
+                  </ecc-utils-design-button>
+                </div>
                 <ecc-utils-design-button
+                  @click=${() => this.addFileToVersion(index)}
                   variant="outline"
                   size="sm"
-                  as="label"
-                  for="zip-upload-${index}"
                   .disabled=${version.descriptorTypes.length === 0}
                 >
-                  Upload ZIP
+                  Add File Manually
                 </ecc-utils-design-button>
-              </div>
-              <ecc-utils-design-button
-                @click=${() => this.addFileToVersion(index)}
-                variant="outline"
-                size="sm"
-                .disabled=${version.descriptorTypes.length === 0}
-              >
-                Add File Manually
-              </ecc-utils-design-button>
-              ${version.descriptorTypes.length > 0 ? html`
-                    <div
-                      class="flex items-center gap-2 text-sm text-muted-foreground"
-                    >
-                      <span
-                        class="text-sm text-muted-foreground"
-                        style="font-style: italic;"
-                        >for:</span
+                ${version.descriptorTypes.length > 0 ? html`
+                      <div
+                        class="flex items-center gap-2 text-sm text-muted-foreground"
                       >
-                      <ecc-utils-design-select
-                        .value=${this.activeDescriptorType[index] || version.descriptorTypes[0]}
-                        @ecc-utils-change=${(e) => {
+                        <span
+                          class="text-sm text-muted-foreground"
+                          style="font-style: italic;"
+                          >for:</span
+                        >
+                        <ecc-utils-design-select
+                          .value=${this.activeDescriptorType[index] || version.descriptorTypes[0]}
+                          @ecc-input-changed=${(e) => {
       this.activeDescriptorType = __spreadProps(__spreadValues({}, this.activeDescriptorType), {
         [index]: e.detail.value
       });
@@ -1437,39 +1318,40 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       }
       this.requestUpdate();
     }}
-                        class="w-24"
-                      >
-                        <ecc-utils-design-select-trigger
-                          class="part:text-sm part:h-8 part:w-24"
-                        >
-                          <ecc-utils-design-select-value></ecc-utils-design-select-value>
-                        </ecc-utils-design-select-trigger>
-                        <ecc-utils-design-select-content
-                          class="part:text-sm part:w-24 part:min-w-24"
+                          class="w-24"
                         >
-                          ${version.descriptorTypes.map(
+                          <ecc-utils-design-select-trigger
+                            class="part:text-sm part:h-8 part:w-24"
+                          >
+                            <ecc-utils-design-select-value></ecc-utils-design-select-value>
+                          </ecc-utils-design-select-trigger>
+                          <ecc-utils-design-select-content
+                            class="part:text-sm part:w-24 part:min-w-24"
+                          >
+                            ${version.descriptorTypes.map(
       (descriptorType) => html`
-                              <ecc-utils-design-select-item
-                                value=${descriptorType}
-                                class="part:text-sm"
-                              >
-                                ${descriptorType}
-                              </ecc-utils-design-select-item>
-                            `
+                                <ecc-utils-design-select-item
+                                  value=${descriptorType}
+                                  class="part:text-sm"
+                                >
+                                  ${descriptorType}
+                                </ecc-utils-design-select-item>
+                              `
     )}
-                        </ecc-utils-design-select-content>
-                      </ecc-utils-design-select>
-                    </div>
-                  ` : ``}
+                          </ecc-utils-design-select-content>
+                        </ecc-utils-design-select>
+                      </div>
+                    ` : ``}
+              </div>
             </div>
-          </div>
 
-          <!-- Language Filter Section -->
+            <!-- Language Filter Section -->
 
-          ${version.files.length === 0 ? html`<p class="text-gray-500 text-sm">
-                ${version.descriptorTypes.length > 0 ? "No files added yet. Upload files or add them manually." : "Select a language this version supports to upload and manage files."}
-              </p>` : this.renderFilesLayout(index, version.files)}
-        </div>
+            ${version.files.length === 0 ? html`<p class="text-gray-500 text-sm">
+                  ${version.descriptorTypes.length > 0 ? "No files added yet. Upload files or add them manually." : "Select a language this version supports to upload and manage files."}
+                </p>` : this.renderFilesLayout(index, version.files)}
+          </div>
+        </slot>
       </div>
     `;
   }
@@ -1490,62 +1372,79 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       (file) => file.descriptorType === activeDescriptor
     );
     return html`
-      <div class="grid grid-cols-5 gap-4">
-        <!-- Files List Section - 1/5 of screen -->
-        <div class="col-span-5 md:col-span-1">
-          <div class="space-y-1 max-h-[400px] overflow-y-auto">
-            ${filteredFiles.map((file, fileIndex) => {
+      <!-- Descriptor-specific files slot -->
+      <slot
+        name="version-${versionIndex}-${activeDescriptor}-files"
+        version-index=${versionIndex}
+        descriptor-type=${activeDescriptor}
+        .filteredFiles=${filteredFiles}
+        .activeFileIndex=${this.activeFileIndex[versionIndex]}
+        .onFileSelect=${(fileIndex) => {
+      this.activeFileIndex = __spreadProps(__spreadValues({}, this.activeFileIndex), {
+        [versionIndex]: fileIndex
+      });
+      this.requestUpdate();
+    }}
+        .onRemoveFile=${(originalIndex) => this.removeFileFromVersion(versionIndex, originalIndex)}
+        .onFileFieldChange=${(fileIndex, field, value) => this.handleFileFieldChange(versionIndex, fileIndex, field, value)}
+      >
+        <div class="grid grid-cols-5 gap-4">
+          <!-- Files List Section - 1/5 of screen -->
+          <div class="col-span-5 md:col-span-1">
+            <div class="space-y-1 max-h-[400px] overflow-y-auto">
+              ${filteredFiles.map((file) => {
       const originalIndex = files.indexOf(file);
       return html`
-                <ecc-utils-design-button
-                  variant="ghost"
-                  type="button"
-                  class="part:h-8 part:w-full part:text-left part:px-3 part:py-1 part:rounded-md part:text-sm part:flex part:items-center part:justify-between ${this.activeFileIndex[versionIndex] === originalIndex ? "part:bg-primary/10" : "part:hover:bg-muted"}"
-                  @click=${() => {
+                  <ecc-utils-design-button
+                    variant="ghost"
+                    type="button"
+                    class="part:h-8 part:w-full part:text-left part:px-3 part:py-1 part:rounded-md part:text-sm part:flex part:items-center part:justify-between ${this.activeFileIndex[versionIndex] === originalIndex ? "part:bg-primary/10" : "part:hover:bg-muted"}"
+                    @click=${() => {
         this.activeFileIndex = __spreadProps(__spreadValues({}, this.activeFileIndex), {
           [versionIndex]: originalIndex
         });
         this.requestUpdate();
       }}
-                >
-                  <span class="truncate">
-                    ${file.path || `File ${originalIndex + 1}`}
-                    ${file.descriptorType ? html`<span class="text-xs text-muted-foreground ml-1"
-                          >(${file.descriptorType})</span
-                        >` : ""}
-                  </span>
-                  <ecc-utils-design-button
-                    type="button"
-                    variant="ghost"
-                    class="part:h-8 part:w-8 part:text-left part:px-3 part:py-1 part:rounded-md part:text-sm part:flex part:items-center part:justify-between"
-                    @click=${(e) => {
+                  >
+                    <span class="truncate">
+                      ${file.path || `File ${originalIndex + 1}`}
+                      ${file.uiFileType ? html`<span class="text-xs text-muted-foreground ml-1"
+                            >(${file.uiFileType})</span
+                          >` : ""}
+                    </span>
+                    <ecc-utils-design-button
+                      type="button"
+                      variant="ghost"
+                      class="part:h-8 part:w-8 part:text-left part:px-3 part:py-1 part:rounded-md part:text-sm part:flex part:items-center part:justify-between"
+                      @click=${(e) => {
         e.stopPropagation();
         this.removeFileFromVersion(versionIndex, originalIndex);
       }}
-                  >
-                    ×
+                    >
+                      ×
+                    </ecc-utils-design-button>
                   </ecc-utils-design-button>
-                </ecc-utils-design-button>
-              `;
+                `;
     })}
+            </div>
           </div>
-        </div>
 
-        <!-- Mobile Separator -->
-        <div class="block md:hidden col-span-5">
-          <ecc-utils-design-separator
-            orientation="horizontal"
-            class="part:my-4"
-          ></ecc-utils-design-separator>
-        </div>
+          <!-- Mobile Separator -->
+          <div class="block md:hidden col-span-5">
+            <ecc-utils-design-separator
+              orientation="horizontal"
+              class="part:my-4"
+            ></ecc-utils-design-separator>
+          </div>
 
-        <!-- File Content Section - 4/5 of screen -->
-        <div
-          class="col-span-5 md:col-span-4 md:border-l md:pl-4 md:border-muted w-full"
-        >
-          ${this.renderFileContentArea(versionIndex, files)}
+          <!-- File Content Section - 4/5 of screen -->
+          <div
+            class="col-span-5 md:col-span-4 md:border-l md:pl-4 md:border-muted w-full"
+          >
+            ${this.renderFileContentArea(versionIndex, files)}
+          </div>
         </div>
-      </div>
+      </slot>
     `;
   }
   renderFileContentArea(versionIndex, files) {
@@ -1560,24 +1459,19 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
         </div>
       `;
     }
-    const fileTypes = [
-      { value: "PRIMARY_DESCRIPTOR", label: "Primary Descriptor" },
-      { value: "SECONDARY_DESCRIPTOR", label: "Secondary Descriptor" },
-      { value: "TEST_FILE", label: "Test File" },
-      { value: "CONTAINERFILE", label: "Container File" },
-      { value: "OTHER", label: "Other" }
-    ];
+    const otherFileHasPrimaryDescriptor = files.some(
+      (file, index) => index !== activeIndex && file.uiFileType === "PRIMARY_DESCRIPTOR" && file.descriptorType === activeFile.descriptorType
+    );
     const checksumTypes = ["sha256", "sha1", "md5"];
     return html`
       <div class="space-y-4">
-
         <!-- File Configuration -->
         <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
           <div>
             <ecc-utils-design-label>File Path</ecc-utils-design-label>
             <ecc-utils-design-input
               .value=${activeFile.path}
-              @ecc-utils-change=${(e) => {
+              @ecc-input-changed=${(e) => {
       this.handleFileFieldChange(
         versionIndex,
         activeIndex,
@@ -1592,27 +1486,87 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
           <div>
             <ecc-utils-design-label>File Type</ecc-utils-design-label>
             <ecc-utils-design-select
-              .value=${activeFile.fileType}
-              @ecc-utils-change=${(e) => {
+              .value=${activeFile.uiFileType}
+              @ecc-input-changed=${(e) => {
+      const newUIFileType = e.detail.value;
+      const newFileType = _ECCClientElixirTrsToolCreate.convertUIFileTypeToFileType(
+        newUIFileType
+      );
+      const newContainerImageType = _ECCClientElixirTrsToolCreate.convertUIFileTypeToImageType(
+        newUIFileType
+      );
+      this.handleFileFieldChange(
+        versionIndex,
+        activeIndex,
+        "uiFileType",
+        newUIFileType
+      );
       this.handleFileFieldChange(
         versionIndex,
         activeIndex,
         "fileType",
-        e.detail.value
+        newFileType
       );
+      if (newContainerImageType) {
+        this.handleFileFieldChange(
+          versionIndex,
+          activeIndex,
+          "containerImageType",
+          newContainerImageType
+        );
+      } else {
+        this.handleFileFieldChange(
+          versionIndex,
+          activeIndex,
+          "containerImageType",
+          void 0
+        );
+      }
     }}
             >
               <ecc-utils-design-select-trigger>
                 <ecc-utils-design-select-value></ecc-utils-design-select-value>
               </ecc-utils-design-select-trigger>
               <ecc-utils-design-select-content>
-                ${fileTypes.map(
-      (type) => html`
-                    <ecc-utils-design-select-item value=${type.value}>
-                      ${type.label}
-                    </ecc-utils-design-select-item>
-                  `
-    )}
+                <!-- Source Files Group -->
+                <ecc-utils-design-select-group>
+                  <ecc-utils-design-select-label
+                    >Source file</ecc-utils-design-select-label
+                  >
+                  <ecc-utils-design-select-item
+                    value="PRIMARY_DESCRIPTOR"
+                    .disabled=${otherFileHasPrimaryDescriptor && activeFile.uiFileType !== "PRIMARY_DESCRIPTOR"}
+                  >
+                    Primary Descriptor
+                  </ecc-utils-design-select-item>
+                  <ecc-utils-design-select-item value="SECONDARY_DESCRIPTOR">
+                    Secondary Descriptor
+                  </ecc-utils-design-select-item>
+                  <ecc-utils-design-select-item value="TEST_FILE">
+                    Test File
+                  </ecc-utils-design-select-item>
+                  <ecc-utils-design-select-item value="OTHER">
+                    Other
+                  </ecc-utils-design-select-item>
+                </ecc-utils-design-select-group>
+
+                <ecc-utils-design-select-separator></ecc-utils-design-select-separator>
+
+                <!-- Image Files Group -->
+                <ecc-utils-design-select-group>
+                  <ecc-utils-design-select-label
+                    >Image file</ecc-utils-design-select-label
+                  >
+                  <ecc-utils-design-select-item value="Docker">
+                    Docker
+                  </ecc-utils-design-select-item>
+                  <ecc-utils-design-select-item value="Singularity">
+                    Singularity
+                  </ecc-utils-design-select-item>
+                  <ecc-utils-design-select-item value="Conda">
+                    Conda
+                  </ecc-utils-design-select-item>
+                </ecc-utils-design-select-group>
               </ecc-utils-design-select-content>
             </ecc-utils-design-select>
           </div>
@@ -1621,7 +1575,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
             <ecc-utils-design-label>Checksum Type</ecc-utils-design-label>
             <ecc-utils-design-select
               .value=${activeFile.checksumType}
-              @ecc-utils-change=${(e) => {
+              @ecc-input-changed=${(e) => {
       this.handleFileFieldChange(
         versionIndex,
         activeIndex,
@@ -1651,7 +1605,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
             >
             <ecc-utils-design-input
               .value=${activeFile.checksumValue}
-              @ecc-utils-change=${(e) => {
+              @ecc-input-changed=${(e) => {
       this.handleFileFieldChange(
         versionIndex,
         activeIndex,
@@ -1671,8 +1625,10 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
           ${activeFile.content !== void 0 ? html`
                 <ecc-utils-design-code
                   value=${activeFile.content}
-                  extension=${this.getFileExtension(activeFile.path)}
-                  @ecc-utils-change=${(e) => {
+                  extension=${_ECCClientElixirTrsToolCreate.getFileExtension(
+      activeFile.path
+    )}
+                  @ecc-input-changed=${(e) => {
       this.handleFileFieldChange(
         versionIndex,
         activeIndex,
@@ -1694,17 +1650,11 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       </div>
     `;
   }
-  renderFileInput(versionIndex, fileIndex, file) {
-    return html``;
-  }
-  getVersionTags(version) {
+  static getVersionTags(version) {
     const tags = [];
-    if (version.isProduction)
-      tags.push("prod");
-    if (version.verified)
-      tags.push("verified");
-    if (version.signed)
-      tags.push("signed");
+    if (version.isProduction) tags.push("prod");
+    if (version.verified) tags.push("verified");
+    if (version.signed) tags.push("signed");
     return tags;
   }
   handleVersionTagsChange(index, tags) {
@@ -1716,6 +1666,24 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     });
     this.versions = updatedVersions;
   }
+  static getUIFileType(filename, fileType) {
+    if (fileType === "CONTAINERFILE") {
+      return _ECCClientElixirTrsToolCreate.getContainerImageType(filename);
+    }
+    return fileType;
+  }
+  static convertUIFileTypeToFileType(uiFileType) {
+    if (uiFileType === "Docker" || uiFileType === "Singularity" || uiFileType === "Conda") {
+      return "CONTAINERFILE";
+    }
+    return uiFileType;
+  }
+  static convertUIFileTypeToImageType(uiFileType) {
+    if (uiFileType === "Docker" || uiFileType === "Singularity" || uiFileType === "Conda") {
+      return uiFileType;
+    }
+    return void 0;
+  }
   render() {
     return html`
       <div class="">
@@ -1726,8 +1694,7 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
     }}
         >
           <div class="space-y-4">
-            ${this.renderBasicFields()} 
-            ${this.renderVersions()}
+            ${this.renderBasicFields()} ${this.renderVersions()}
           </div>
 
           <div class="flex justify-between items-center mt-4">
@@ -1753,8 +1720,27 @@ var ECCClientElixirTrsToolCreate = class extends LitElement {
       </div>
     `;
   }
+  renderDescriptorTypeOptions() {
+    const allDescriptorTypes = [
+      { value: "CWL", label: "CWL (Common Workflow Language)" },
+      { value: "WDL", label: "WDL (Workflow Description Language)" },
+      { value: "NFL", label: "Nextflow" },
+      { value: "GALAXY", label: "Galaxy" },
+      { value: "SMK", label: "Snakemake" }
+    ];
+    const availableTypes = this.supportedDescriptorTypes.length > 0 ? allDescriptorTypes.filter(
+      (type) => this.supportedDescriptorTypes.includes(type.value)
+    ) : allDescriptorTypes;
+    return availableTypes.map(
+      (type) => html`
+        <ecc-utils-design-multi-select-item value=${type.value}>
+          ${type.label}
+        </ecc-utils-design-multi-select-item>
+      `
+    );
+  }
 };
-ECCClientElixirTrsToolCreate.styles = [
+_ECCClientElixirTrsToolCreate.styles = [
   ComponentStyles,
   GlobalStyles,
   css`
@@ -1775,34 +1761,83 @@ ECCClientElixirTrsToolCreate.styles = [
 ];
 __decorateClass([
   property({ type: String, reflect: true })
-], ECCClientElixirTrsToolCreate.prototype, "baseUrl", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "baseUrl", 2);
 __decorateClass([
   property({ attribute: false, reflect: true })
-], ECCClientElixirTrsToolCreate.prototype, "provider", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "provider", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-name" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultName", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-organization" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultOrganization", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-description" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultDescription", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-tool-class-id" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultToolClassId", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-aliases" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultAliases", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-checker-url" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultCheckerUrl", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-custom-tool-id" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultCustomToolId", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-version-name" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultVersionName", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-version-author" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultVersionAuthor", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "default-is-production" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultIsProduction", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "default-signed" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultSigned", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "default-verified" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultVerified", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-verified-source" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultVerifiedSource", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-included-apps" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultIncludedApps", 2);
+__decorateClass([
+  property({ type: String, attribute: "default-custom-version-id" })
+], _ECCClientElixirTrsToolCreate.prototype, "defaultCustomVersionId", 2);
+__decorateClass([
+  property({ type: Array, reflect: true })
+], _ECCClientElixirTrsToolCreate.prototype, "supportedDescriptorTypes", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "toolClasses", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "toolClasses", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "loading", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "loading", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "error", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "error", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "success", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "success", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "formData", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "formData", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "versions", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "versions", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "activeFileIndex", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "activeFileIndex", 2);
 __decorateClass([
   state()
-], ECCClientElixirTrsToolCreate.prototype, "activeDescriptorType", 2);
+], _ECCClientElixirTrsToolCreate.prototype, "activeDescriptorType", 2);
+var ECCClientElixirTrsToolCreate = _ECCClientElixirTrsToolCreate;
 var tool_create_default = ECCClientElixirTrsToolCreate;
 
 export { ECCClientElixirTrsToolCreate, tool_create_default };