@elixir-cloud/trs-filer 2.0.0-alpha.1

package/dist/chunks/chunk.5A4EA5NE.js

@@ -0,0 +1,1803 @@
+import { ComponentStyles, __decorateClass, __spreadProps, __spreadValues } from './chunk.Q5GOJN3Z.js';
+import { css, LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import '@elixir-cloud/design/components/button/index.js';
+import '@elixir-cloud/design/components/input/index.js';
+import '@elixir-cloud/design/components/select/index.js';
+import '@elixir-cloud/design/components/multi-select/index.js';
+import '@elixir-cloud/design/components/label/index.js';
+import '@elixir-cloud/design/components/textarea/index.js';
+import '@elixir-cloud/design/components/badge/index.js';
+import '@elixir-cloud/design/components/code/index.js';
+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 {
+    --background: var(--ecc-background, oklch(1 0 0));
+    --foreground: var(--ecc-foreground, oklch(0.145 0 0));
+    --card: var(--ecc-card, oklch(1 0 0));
+    --card-foreground: var(--ecc-card-foreground, oklch(0.145 0 0));
+    --popover: var(--ecc-popover, oklch(1 0 0));
+    --popover-foreground: var(--ecc-popover-foreground, oklch(0.145 0 0));
+    --primary: var(--ecc-primary, oklch(0.205 0 0));
+    --primary-foreground: var(--ecc-primary-foreground, oklch(0.985 0 0));
+    --secondary: var(--ecc-secondary, oklch(0.97 0 0));
+    --secondary-foreground: var(--ecc-secondary-foreground, oklch(0.205 0 0));
+    --muted: var(--ecc-muted, oklch(0.97 0 0));
+    --muted-foreground: var(--ecc-muted-foreground, oklch(0.556 0 0));
+    --accent: var(--ecc-accent, oklch(0.97 0 0));
+    --accent-foreground: var(--ecc-accent-foreground, oklch(0.205 0 0));
+    --destructive: var(--ecc-destructive, oklch(0.577 0.245 27.325));
+    --destructive-foreground: var(
+      --ecc-destructive-foreground,
+      oklch(0.985 0 0)
+    );
+    --border: var(--ecc-border, oklch(0.922 0 0));
+    --input: var(--ecc-input, oklch(0.922 0 0));
+    --ring: var(--ecc-ring, oklch(0.708 0 0));
+    --chart-1: var(--ecc-chart-1, oklch(0.646 0.222 41.116));
+    --chart-2: var(--ecc-chart-2, oklch(0.6 0.118 184.704));
+    --chart-3: var(--ecc-chart-3, oklch(0.398 0.07 227.392));
+    --chart-4: var(--ecc-chart-4, oklch(0.828 0.189 84.429));
+    --chart-5: var(--ecc-chart-5, oklch(0.769 0.188 70.08));
+    --radius: var(--ecc-radius, 0.625rem);
+    --sidebar: var(--ecc-sidebar, oklch(0.985 0 0));
+    --sidebar-foreground: var(--ecc-sidebar-foreground, oklch(0.145 0 0));
+    --sidebar-primary: var(--ecc-sidebar-primary, oklch(0.205 0 0));
+    --sidebar-primary-foreground: var(
+      --ecc-sidebar-primary-foreground,
+      oklch(0.985 0 0)
+    );
+    --sidebar-accent: var(--ecc-sidebar-accent, oklch(0.97 0 0));
+    --sidebar-accent-foreground: var(
+      --ecc-sidebar-accent-foreground,
+      oklch(0.205 0 0)
+    );
+    --sidebar-border: var(--ecc-sidebar-border, oklch(0.922 0 0));
+    --sidebar-ring: var(--ecc-sidebar-ring, oklch(0.708 0 0));
+  }
+
+  :host([dark]),
+  :host-context([dark]),
+  :host-context(.dark) {
+    --background: var(--ecc-background, oklch(0.145 0 0));
+    --foreground: var(--ecc-foreground, oklch(0.985 0 0));
+    --card: var(--ecc-card, oklch(0.145 0 0));
+    --card-foreground: var(--ecc-card-foreground, oklch(0.985 0 0));
+    --popover: var(--ecc-popover, oklch(0.145 0 0));
+    --popover-foreground: var(--ecc-popover-foreground, oklch(0.985 0 0));
+    --primary: var(--ecc-primary, oklch(0.985 0 0));
+    --primary-foreground: var(--ecc-primary-foreground, oklch(0.205 0 0));
+    --secondary: var(--ecc-secondary, oklch(0.269 0 0));
+    --secondary-foreground: var(--ecc-secondary-foreground, oklch(0.985 0 0));
+    --muted: var(--ecc-muted, oklch(0.269 0 0));
+    --muted-foreground: var(--ecc-muted-foreground, oklch(0.708 0 0));
+    --accent: var(--ecc-accent, oklch(0.269 0 0));
+    --accent-foreground: var(--ecc-accent-foreground, oklch(0.985 0 0));
+    --destructive: var(--ecc-destructive, oklch(0.396 0.141 25.723));
+    --destructive-foreground: var(
+      --ecc-destructive-foreground,
+      oklch(0.637 0.237 25.331)
+    );
+    --border: var(--ecc-border, oklch(0.269 0 0));
+    --input: var(--ecc-input, oklch(0.269 0 0));
+    --ring: var(--ecc-ring, oklch(0.439 0 0));
+    --chart-1: var(--ecc-chart-1, oklch(0.488 0.243 264.376));
+    --chart-2: var(--ecc-chart-2, oklch(0.696 0.17 162.48));
+    --chart-3: var(--ecc-chart-3, oklch(0.769 0.188 70.08));
+    --chart-4: var(--ecc-chart-4, oklch(0.627 0.265 303.9));
+    --chart-5: var(--ecc-chart-5, oklch(0.645 0.246 16.439));
+    --sidebar: var(--ecc-sidebar, oklch(0.205 0 0));
+    --sidebar-foreground: var(--ecc-sidebar-foreground, oklch(0.985 0 0));
+    --sidebar-primary: var(--ecc-sidebar-primary, oklch(0.488 0.243 264.376));
+    --sidebar-primary-foreground: var(
+      --ecc-sidebar-primary-foreground,
+      oklch(0.985 0 0)
+    );
+    --sidebar-accent: var(--ecc-sidebar-accent, oklch(0.269 0 0));
+    --sidebar-accent-foreground: var(
+      --ecc-sidebar-accent-foreground,
+      oklch(0.985 0 0)
+    );
+    --sidebar-border: var(--ecc-sidebar-border, oklch(0.269 0 0));
+    --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 {
+  constructor() {
+    super(...arguments);
+    this.baseUrl = "";
+    this.toolClasses = [];
+    this.loading = false;
+    this.error = null;
+    this.success = null;
+    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._provider = null;
+    this.activeFileIndex = {};
+    this.activeDescriptorType = {};
+  }
+  async firstUpdated() {
+    if (!this.baseUrl && !this.provider) {
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-create-validation-error", {
+          detail: {
+            error: "Please provide either a base URL for the TRS API or a custom provider."
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
+    }
+    if (this.provider) {
+      this._provider = this.provider;
+    } else if (this.baseUrl) {
+      this._provider = new RestTrsFilerProvider(this.baseUrl);
+    } else {
+      this._provider = null;
+    }
+    if (this._provider) {
+      await this.loadToolClasses();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("baseUrl") && this.baseUrl) {
+      this._provider = new RestTrsFilerProvider(this.baseUrl);
+      this.loadToolClasses();
+    }
+  }
+  async loadToolClasses() {
+    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", {
+          detail: { error: "Failed to load tool classes" },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+  }
+  handleInputChange(field, value) {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { [field]: value });
+  }
+  handleArrayInputChange(field, value) {
+    const array = value.split(",").map((item) => item.trim()).filter((item) => item);
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { [field]: array });
+  }
+  handleVersionChange(index, field, value) {
+    const updatedVersions = [...this.versions];
+    updatedVersions[index] = __spreadProps(__spreadValues({}, updatedVersions[index]), { [field]: value });
+    if (field === "customVersionId") {
+      updatedVersions[index].useCustomVersionId = Boolean(value);
+    }
+    this.versions = updatedVersions;
+  }
+  addVersion() {
+    this.versions = [
+      ...this.versions,
+      {
+        name: "",
+        author: [],
+        descriptorTypes: [],
+        isProduction: false,
+        signed: false,
+        verified: false,
+        verifiedSource: [],
+        includedApps: [],
+        files: [],
+        images: [],
+        customVersionId: "",
+        useCustomVersionId: false
+      }
+    ];
+  }
+  removeVersion(index) {
+    if (this.versions.length > 1) {
+      this.versions = this.versions.filter((_, i) => i !== index);
+    }
+  }
+  addFileToVersion(versionIndex) {
+    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 adding files." },
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
+    }
+    const updatedVersions = [...this.versions];
+    const descriptorType = activeDescriptorType;
+    updatedVersions[versionIndex].files.push({
+      path: "",
+      fileType: "PRIMARY_DESCRIPTOR",
+      content: "",
+      checksumType: "sha256",
+      checksumValue: "",
+      descriptorType
+    });
+    this.versions = updatedVersions;
+  }
+  removeFileFromVersion(versionIndex, fileIndex) {
+    const updatedVersions = [...this.versions];
+    updatedVersions[versionIndex].files = updatedVersions[versionIndex].files.filter((_, i) => i !== fileIndex);
+    this.versions = updatedVersions;
+  }
+  handleFileUpload(versionIndex, fileIndex, event) {
+    var _a;
+    const input = event.target;
+    const file = (_a = input.files) == null ? void 0 : _a[0];
+    if (file) {
+      const updatedVersions = [...this.versions];
+      updatedVersions[versionIndex].files[fileIndex].file = file;
+      updatedVersions[versionIndex].files[fileIndex].path = file.name;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        var _a2;
+        updatedVersions[versionIndex].files[fileIndex].content = (_a2 = e.target) == null ? void 0 : _a2.result;
+        this.versions = [...updatedVersions];
+      };
+      reader.readAsText(file);
+      this.versions = updatedVersions;
+    }
+  }
+  handleBulkFileUpload(versionIndex, event) {
+    const input = event.target;
+    const files = input.files;
+    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." },
+            bubbles: true,
+            composed: true
+          })
+        );
+        input.value = "";
+        return;
+      }
+      const updatedVersions = [...this.versions];
+      const descriptorType = activeDescriptorType;
+      Array.from(files).forEach((file, index) => {
+        const fileData = {
+          path: file.name,
+          fileType: this.getDefaultFileType(file.name),
+          content: "",
+          file,
+          checksumType: "sha256",
+          checksumValue: "",
+          descriptorType
+        };
+        updatedVersions[versionIndex].files.push(fileData);
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          var _a;
+          const currentVersions = [...this.versions];
+          const targetFileIndex = currentVersions[versionIndex].files.findIndex(
+            (f) => f.file === file
+          );
+          if (targetFileIndex !== -1 && currentVersions[versionIndex].files[targetFileIndex]) {
+            currentVersions[versionIndex].files[targetFileIndex].content = (_a = e.target) == null ? void 0 : _a.result;
+            this.versions = currentVersions;
+          }
+        };
+        reader.readAsText(file);
+      });
+      this.versions = updatedVersions;
+      input.value = "";
+    }
+  }
+  async handleZipFileUpload(versionIndex, event) {
+    var _a;
+    const input = event.target;
+    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", {
+          detail: { error: "Please select a valid ZIP file" },
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
+    }
+    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 ZIP files." },
+          bubbles: true,
+          composed: true
+        })
+      );
+      input.value = "";
+      return;
+    }
+    try {
+      this.loading = true;
+      const zip = new JSZip();
+      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 (fileData) {
+            fileData.descriptorType = descriptorType;
+            updatedVersions[versionIndex].files.push(fileData);
+            extractedCount++;
+          } else {
+          }
+        }).catch((error) => {
+          console.error(`Failed to extract file ${relativePath}:`, error);
+        });
+        filePromises.push(promise);
+      });
+      await Promise.all(filePromises);
+      this.versions = updatedVersions;
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-create-success", {
+          detail: { message: `Successfully extracted ${extractedCount} files from ZIP archive` },
+          bubbles: true,
+          composed: true
+        })
+      );
+      input.value = "";
+    } catch (error) {
+      console.error("ZIP extraction error details:", error);
+      console.error("Error type:", typeof error);
+      console.error(
+        "Error message:",
+        error instanceof Error ? error.message : String(error)
+      );
+      console.error(
+        "Error stack:",
+        error instanceof Error ? error.stack : "No stack trace"
+      );
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-create-error", {
+          detail: {
+            error: `Failed to extract ZIP file: ${error instanceof Error ? error.message : "Unknown error"}. Please ensure it's a valid ZIP archive.`
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } finally {
+      this.loading = false;
+    }
+  }
+  async extractFileFromZip(zipEntry, relativePath) {
+    try {
+      const isTextFile = this.isTextFile(relativePath);
+      let content;
+      if (isTextFile) {
+        content = await zipEntry.async("text");
+      } else {
+        const arrayBuffer = await zipEntry.async("arraybuffer");
+        const uint8Array = new Uint8Array(arrayBuffer);
+        content = btoa(String.fromCharCode(...uint8Array));
+      }
+      const fileData = {
+        path: relativePath,
+        fileType: this.getDefaultFileType(relativePath),
+        content,
+        file: void 0,
+        // No actual File object for extracted files
+        checksumType: "sha256",
+        checksumValue: "",
+        descriptorType: void 0
+        // Will be set by the calling method
+      };
+      return fileData;
+    } catch (error) {
+      console.error(`Error extracting file ${relativePath}:`, error);
+      console.error(`Error details for ${relativePath}:`, {
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : "No stack trace"
+      });
+      return null;
+    }
+  }
+  isTextFile(filename) {
+    var _a;
+    const textExtensions = [
+      "txt",
+      "md",
+      "json",
+      "yml",
+      "yaml",
+      "xml",
+      "html",
+      "htm",
+      "css",
+      "js",
+      "ts",
+      "cwl",
+      "wdl",
+      "nf",
+      "py",
+      "r",
+      "sh",
+      "bash",
+      "dockerfile",
+      "def",
+      "config",
+      "conf",
+      "ini",
+      "log",
+      "csv",
+      "tsv",
+      "sql",
+      "graphql",
+      "gql"
+    ];
+    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) {
+    var _a;
+    const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+    const basename = filename.toLowerCase();
+    if (basename.includes("workflow") || basename.includes("main") || extension === "cwl" || extension === "wdl" || extension === "nf") {
+      return "PRIMARY_DESCRIPTOR";
+    }
+    if (basename.includes("test") || basename.includes("example")) {
+      return "TEST_FILE";
+    }
+    if (basename === "dockerfile" || basename.includes("container") || extension === "def") {
+      return "CONTAINERFILE";
+    }
+    if (extension === "yml" || extension === "yaml" || extension === "json") {
+      return "SECONDARY_DESCRIPTOR";
+    }
+    return "OTHER";
+  }
+  getDefaultDescriptorType(filename) {
+    return void 0;
+  }
+  getContainerImageType(filename) {
+    var _a;
+    const basename = filename.toLowerCase();
+    const extension = (_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+    if (basename === "singularity" || basename.includes("singularity") || extension === "def" || extension === "sif" || basename.includes(".def")) {
+      return "Singularity";
+    }
+    if (basename === "environment.yml" || basename === "environment.yaml" || basename === "conda.yml" || basename === "conda.yaml" || basename.includes("conda") || basename.includes("environment")) {
+      return "Conda";
+    }
+    return "Docker";
+  }
+  getFileExtension(filename) {
+    var _a;
+    return ((_a = filename.split(".").pop()) == null ? void 0 : _a.toLowerCase()) || "txt";
+  }
+  handleFileFieldChange(versionIndex, fileIndex, field, value) {
+    const updatedVersions = [...this.versions];
+    updatedVersions[versionIndex].files[fileIndex] = __spreadProps(__spreadValues({}, updatedVersions[versionIndex].files[fileIndex]), {
+      [field]: value
+    });
+    this.versions = updatedVersions;
+  }
+  addImageToVersion(versionIndex) {
+    const updatedVersions = [...this.versions];
+    updatedVersions[versionIndex].images.push({
+      registry_host: "",
+      image_name: "",
+      image_type: "Docker",
+      checksum: []
+    });
+    this.versions = updatedVersions;
+  }
+  removeImageFromVersion(versionIndex, imageIndex) {
+    const updatedVersions = [...this.versions];
+    updatedVersions[versionIndex].images = updatedVersions[versionIndex].images.filter((_, i) => i !== imageIndex);
+    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" },
+          bubbles: true,
+          composed: true
+        })
+      );
+      return;
+    }
+    this.loading = true;
+    try {
+      const selectedToolClass = this.toolClasses.find(
+        (tc) => tc.id === this.formData.toolClassId
+      );
+      if (!selectedToolClass) {
+        throw new Error("Please select a valid tool class");
+      }
+      const toolData = {
+        name: this.formData.name || void 0,
+        organization: this.formData.organization,
+        description: this.formData.description || void 0,
+        toolclass: {
+          id: selectedToolClass.id,
+          name: selectedToolClass.name,
+          description: selectedToolClass.description
+        },
+        aliases: this.formData.aliases.length > 0 ? this.formData.aliases : void 0,
+        checker_url: this.formData.checkerUrl || void 0,
+        has_checker: this.formData.hasChecker,
+        versions: this.versions.map((version) => __spreadProps(__spreadValues({}, version.useCustomVersionId && version.customVersionId ? { id: version.customVersionId } : {}), {
+          name: version.name || void 0,
+          author: version.author.length > 0 ? version.author : void 0,
+          descriptor_type: version.descriptorTypes.length > 0 ? version.descriptorTypes : void 0,
+          is_production: version.isProduction,
+          signed: version.signed,
+          verified: version.verified,
+          verified_source: version.verifiedSource.length > 0 ? version.verifiedSource : void 0,
+          included_apps: version.includedApps.length > 0 ? version.includedApps : void 0,
+          files: version.files.length > 0 ? version.files.map((file) => ({
+            tool_file: {
+              path: file.path,
+              file_type: file.fileType
+            },
+            file_wrapper: {
+              content: file.content || void 0,
+              checksum: file.checksumValue ? [
+                {
+                  type: file.checksumType,
+                  checksum: file.checksumValue
+                }
+              ] : void 0
+            },
+            type: file.fileType === "CONTAINERFILE" ? this.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
+        }))
+      };
+      let toolId;
+      if (this.formData.useCustomId && this.formData.customToolId) {
+        toolId = await this._provider.createToolWithId(
+          this.formData.customToolId,
+          toolData
+        );
+      } else {
+        toolId = await this._provider.createTool(toolData);
+      }
+      const successMessage = `Tool created successfully with ID: ${toolId}`;
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-create-success", {
+          detail: { message: successMessage },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-created", {
+          detail: { toolId, toolData },
+          bubbles: true,
+          composed: true
+        })
+      );
+      this.resetForm();
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to create tool";
+      this.dispatchEvent(
+        new CustomEvent("ecc-tool-create-error", {
+          detail: { error: errorMessage },
+          bubbles: true,
+          composed: true
+        })
+      );
+    } finally {
+      this.loading = false;
+    }
+  }
+  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
+      }
+    ];
+  }
+  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">
+              <ecc-utils-design-label
+                for="tool-name"
+                class="text-sm font-medium"
+              >
+                Tool Name
+              </ecc-utils-design-label>
+              <ecc-utils-design-input
+                id="tool-name"
+                .value=${this.formData.name}
+                @ecc-utils-change=${(e) => this.handleInputChange("name", e.detail.value)}
+                placeholder="Enter a descriptive name for your tool"
+                class="h-10"
+              ></ecc-utils-design-input>
+            </div>
+
+            <div class="grid gap-2">
+              <ecc-utils-design-label
+                for="organization"
+                class="text-sm font-medium"
+              >
+                Organization <span class="text-destructive">*</span>
+              </ecc-utils-design-label>
+              <ecc-utils-design-input
+                id="organization"
+                .value=${this.formData.organization}
+                @ecc-utils-change=${(e) => this.handleInputChange("organization", e.detail.value)}
+                placeholder="Enter your organization name"
+                required
+                class="h-10"
+              ></ecc-utils-design-input>
+            </div>
+
+            <div class="grid gap-1">
+              <ecc-utils-design-label
+                for="tool-class"
+                class="text-sm font-medium"
+              >
+                Tool Class <span class="text-destructive">*</span>
+              </ecc-utils-design-label>
+              <ecc-utils-design-select
+                id="tool-class-select"
+                .value=${this.formData.toolClassId}
+                @ecc-utils-change=${(e) => {
+      this.handleInputChange("toolClassId", e.detail.value);
+    }}
+                required
+              >
+                <ecc-utils-design-select-trigger class="h-10">
+                  <ecc-utils-design-select-value
+                    placeholder="Select a tool class"
+                  ></ecc-utils-design-select-value>
+                </ecc-utils-design-select-trigger>
+
+                <ecc-utils-design-select-content>
+                  <ecc-utils-design-select-item value="">
+                    Select a tool class
+                  </ecc-utils-design-select-item>
+                  ${this.toolClasses.map(
+      (tc) => html`
+                      <ecc-utils-design-select-item value=${tc.id}>
+                        <div class="flex flex-col">
+                          <span class="font-medium">${tc.name}</span>
+                        </div>
+                      </ecc-utils-design-select-item>
+                    `
+    )}
+                </ecc-utils-design-select-content>
+              </ecc-utils-design-select>
+            </div>
+          </div>
+
+          <!-- Description spans full width -->
+          <div class="grid gap-2">
+            <ecc-utils-design-label
+              for="description"
+              class="text-sm font-medium"
+            >
+              Description
+            </ecc-utils-design-label>
+            <ecc-utils-design-textarea
+              id="description"
+              .value=${this.formData.description}
+              @ecc-utils-change=${(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>
+    `;
+  }
+  renderAdvancedFields() {
+    return html`
+      <div class="space-y-6">
+        <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-t cursor-pointer transition-colors px-2"
+            >
+              <div class="space-y-0.5">
+                <h4 class="text-sm font-medium text-muted-foreground">
+                  Advance Configuration
+                </h4>
+              </div>
+              <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">
+              <!-- 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) => {
+      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>
+
+                <!-- 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>
+
+                <!-- 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) => {
+      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>
+              </div>
+            </div>
+          </ecc-utils-design-collapsible-content>
+        </ecc-utils-design-collapsible>
+      </div>
+    `;
+  }
+  renderVersions() {
+    return html`
+      <div class="space-y-6">
+        <ecc-utils-design-tabs default-value="version-0" class="part:w-full">
+          <div class="flex items-center w-full">
+            <div class="flex-1 overflow-x-auto tabs-scroll-container">
+              <ecc-utils-design-tabs-list
+                class="part:flex part:min-w-max part:justify-start"
+              >
+                ${this.versions.map(
+      (version, index) => html`
+                    <ecc-utils-design-tabs-trigger
+                      value="version-${index}"
+                      class="part:relative part:flex-shrink-0"
+                    >
+                      <span>Version ${index + 1}</span>
+                      ${version.name ? html`<span class="text-xs text-muted-foreground ml-1"
+                            >(${version.name})</span
+                          >` : ""}
+                      ${this.versions.length > 1 ? html`
+                            <ecc-utils-design-button
+                              variant="ghost"
+                              size="sm"
+                              class="part:ml-2 part:h-4 part:w-4 part:p-0 part:hover:bg-destructive part:hover:text-destructive-foreground"
+                              @click=${(e) => {
+        e.stopPropagation();
+        this.removeVersion(index);
+      }}
+                            >
+                              <svg
+                                class="w-3 h-3"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                              >
+                                <path
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                  stroke-width="2"
+                                  d="M6 18L18 6M6 6l12 12"
+                                ></path>
+                              </svg>
+                            </ecc-utils-design-button>
+                          ` : ""}
+                    </ecc-utils-design-tabs-trigger>
+                  `
+    )}
+              </ecc-utils-design-tabs-list>
+            </div>
+
+            <ecc-utils-design-button
+              @click=${this.addVersion}
+              variant="outline"
+              size="sm"
+              class="ml-4 flex-shrink-0 part:h-10"
+            >
+              <svg
+                class="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 4v16m8-8H4"
+                ></path>
+              </svg>
+              Add Version
+            </ecc-utils-design-button>
+          </div>
+
+          ${this.versions.map(
+      (version, index) => html`
+              <ecc-utils-design-tabs-content value="version-${index}">
+                ${this.renderVersionContent(version, index)}
+              </ecc-utils-design-tabs-content>
+            `
+    )}
+        </ecc-utils-design-tabs>
+      </div>
+    `;
+  }
+  renderVersionContent(version, index) {
+    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="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) => {
+      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>
+
+          <!-- Descriptor Types Selection -->
+          <div class="grid">
+            <ecc-utils-design-label class="text-sm font-medium"
+              >Supported Languages</ecc-utils-design-label
+            >
+            <ecc-utils-design-multi-select
+              .value=${version.descriptorTypes}
+              placeholder="Select supported languages..."
+              @ecc-utils-change=${(e) => {
+      const updatedVersions = [...this.versions];
+      updatedVersions[index].descriptorTypes = e.detail.value;
+      this.versions = updatedVersions;
+    }}
+              class="mt-2"
+            >
+              <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="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>
+              </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"
+                >
+                  <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) => {
+      this.handleVersionTagsChange(index, e.detail.value);
+    }}
+                    >
+                      <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>
+
+                  <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(
+      index,
+      "customVersionId",
+      e.detail.value
+    )}
+                      placeholder="Enter custom version ID (optional)"
+                      class="h-10"
+                    ></ecc-utils-design-input>
+                  </div>
+                </div>
+              </div>
+            </ecc-utils-design-collapsible-content>
+          </ecc-utils-design-collapsible>
+        </div>
+
+        <!-- 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}
+                />
+                <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"
+                .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
+                      >
+                      <ecc-utils-design-select
+                        .value=${this.activeDescriptorType[index] || version.descriptorTypes[0]}
+                        @ecc-utils-change=${(e) => {
+      this.activeDescriptorType = __spreadProps(__spreadValues({}, this.activeDescriptorType), {
+        [index]: e.detail.value
+      });
+      if (e.detail.value) {
+        const filteredFiles = version.files.filter(
+          (file) => file.descriptorType === e.detail.value
+        );
+        if (filteredFiles.length > 0) {
+          const firstFileIndex = version.files.indexOf(
+            filteredFiles[0]
+          );
+          this.activeFileIndex = __spreadProps(__spreadValues({}, this.activeFileIndex), {
+            [index]: firstFileIndex
+          });
+        } else {
+          this.activeFileIndex = __spreadProps(__spreadValues({}, this.activeFileIndex), {
+            [index]: -1
+          });
+        }
+      } else {
+        this.activeFileIndex = __spreadProps(__spreadValues({}, this.activeFileIndex), {
+          [index]: -1
+        });
+      }
+      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"
+                        >
+                          ${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-content>
+                      </ecc-utils-design-select>
+                    </div>
+                  ` : ``}
+            </div>
+          </div>
+
+          <!-- 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>
+      </div>
+    `;
+  }
+  renderFilesLayout(versionIndex, files) {
+    const version = this.versions[versionIndex];
+    const activeDescriptor = this.activeDescriptorType[versionIndex] || (version.descriptorTypes.length > 0 ? version.descriptorTypes[0] : null);
+    if (!activeDescriptor) {
+      return html`
+        <div class="text-center py-8 text-gray-500">
+          <p>Please select a descriptor type to view and manage files</p>
+          <p class="text-sm">
+            Files will be filtered by the selected descriptor type
+          </p>
+        </div>
+      `;
+    }
+    const filteredFiles = files.filter(
+      (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) => {
+      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=${() => {
+        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) => {
+        e.stopPropagation();
+        this.removeFileFromVersion(versionIndex, originalIndex);
+      }}
+                  >
+                    ×
+                  </ecc-utils-design-button>
+                </ecc-utils-design-button>
+              `;
+    })}
+          </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>
+
+        <!-- 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>
+    `;
+  }
+  renderFileContentArea(versionIndex, files) {
+    var _a;
+    const activeIndex = (_a = this.activeFileIndex[versionIndex]) != null ? _a : 0;
+    const activeFile = files[activeIndex];
+    if (!activeFile) {
+      return html`
+        <div class="text-center py-8 text-gray-500">
+          <p>No files available</p>
+          <p class="text-sm">Add files to see content preview</p>
+        </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 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) => {
+      this.handleFileFieldChange(
+        versionIndex,
+        activeIndex,
+        "path",
+        e.detail.value
+      );
+    }}
+              placeholder="e.g., Readme.md"
+            ></ecc-utils-design-input>
+          </div>
+
+          <div>
+            <ecc-utils-design-label>File Type</ecc-utils-design-label>
+            <ecc-utils-design-select
+              .value=${activeFile.fileType}
+              @ecc-utils-change=${(e) => {
+      this.handleFileFieldChange(
+        versionIndex,
+        activeIndex,
+        "fileType",
+        e.detail.value
+      );
+    }}
+            >
+              <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>
+                  `
+    )}
+              </ecc-utils-design-select-content>
+            </ecc-utils-design-select>
+          </div>
+
+          <div>
+            <ecc-utils-design-label>Checksum Type</ecc-utils-design-label>
+            <ecc-utils-design-select
+              .value=${activeFile.checksumType}
+              @ecc-utils-change=${(e) => {
+      this.handleFileFieldChange(
+        versionIndex,
+        activeIndex,
+        "checksumType",
+        e.detail.value
+      );
+    }}
+            >
+              <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>
+                ${checksumTypes.map(
+      (type) => html`
+                    <ecc-utils-design-select-item value=${type}>
+                      ${type.toUpperCase()}
+                    </ecc-utils-design-select-item>
+                  `
+    )}
+              </ecc-utils-design-select-content>
+            </ecc-utils-design-select>
+          </div>
+
+          <div>
+            <ecc-utils-design-label
+              >Checksum Value (optional)</ecc-utils-design-label
+            >
+            <ecc-utils-design-input
+              .value=${activeFile.checksumValue}
+              @ecc-utils-change=${(e) => {
+      this.handleFileFieldChange(
+        versionIndex,
+        activeIndex,
+        "checksumValue",
+        e.detail.value
+      );
+    }}
+              placeholder="Enter checksum value"
+            ></ecc-utils-design-input>
+          </div>
+        </div>
+
+        <!-- File Content -->
+        <div class="space-y-2">
+          <ecc-utils-design-label>File Content</ecc-utils-design-label>
+
+          ${activeFile.content !== void 0 ? html`
+                <ecc-utils-design-code
+                  value=${activeFile.content}
+                  extension=${this.getFileExtension(activeFile.path)}
+                  @ecc-utils-change=${(e) => {
+      this.handleFileFieldChange(
+        versionIndex,
+        activeIndex,
+        "content",
+        e.detail.value
+      );
+    }}
+                  class="part:h-[500px]"
+                ></ecc-utils-design-code>
+              ` : html`
+                <div
+                  class="text-center py-8 text-gray-500 border-2 border-dashed border-gray-300 rounded-lg"
+                >
+                  <p>No content available</p>
+                  <p class="text-sm">This file was not uploaded with content</p>
+                </div>
+              `}
+        </div>
+      </div>
+    `;
+  }
+  renderFileInput(versionIndex, fileIndex, file) {
+    return html``;
+  }
+  getVersionTags(version) {
+    const tags = [];
+    if (version.isProduction)
+      tags.push("prod");
+    if (version.verified)
+      tags.push("verified");
+    if (version.signed)
+      tags.push("signed");
+    return tags;
+  }
+  handleVersionTagsChange(index, tags) {
+    const updatedVersions = [...this.versions];
+    updatedVersions[index] = __spreadProps(__spreadValues({}, updatedVersions[index]), {
+      isProduction: tags.includes("prod"),
+      verified: tags.includes("verified"),
+      signed: tags.includes("signed")
+    });
+    this.versions = updatedVersions;
+  }
+  render() {
+    return html`
+      <div class="">
+        <form
+          @submit=${(e) => {
+      e.preventDefault();
+      this.handleSubmit();
+    }}
+        >
+          <div class="space-y-4">
+            ${this.renderBasicFields()} 
+            ${this.renderVersions()}
+          </div>
+
+          <div class="flex justify-between items-center mt-4">
+            <div></div>
+            <div class="space-x-2">
+              <ecc-utils-design-button
+                type="button"
+                variant="outline"
+                @click=${this.resetForm}
+              >
+                Reset
+              </ecc-utils-design-button>
+              <ecc-utils-design-button
+                type="submit"
+                @click=${this.handleSubmit}
+                .disabled=${this.loading || !this.formData.organization || !this.formData.toolClassId}
+              >
+                ${this.loading ? "Creating..." : "Create"}
+              </ecc-utils-design-button>
+            </div>
+          </div>
+        </form>
+      </div>
+    `;
+  }
+};
+ECCClientElixirTrsToolCreate.styles = [
+  ComponentStyles,
+  GlobalStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .tabs-scroll-container {
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* Internet Explorer 10+ */
+      }
+
+      .tabs-scroll-container::-webkit-scrollbar {
+        display: none; /* WebKit */
+      }
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], ECCClientElixirTrsToolCreate.prototype, "baseUrl", 2);
+__decorateClass([
+  property({ attribute: false, reflect: true })
+], ECCClientElixirTrsToolCreate.prototype, "provider", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "toolClasses", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "loading", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "error", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "success", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "formData", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "versions", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "activeFileIndex", 2);
+__decorateClass([
+  state()
+], ECCClientElixirTrsToolCreate.prototype, "activeDescriptorType", 2);
+var tool_create_default = ECCClientElixirTrsToolCreate;
+
+export { ECCClientElixirTrsToolCreate, tool_create_default };