@elixir-cloud/drs-filer 2.0.0-alpha.34

package/dist/chunks/chunk.I4IZIBWK.js

@@ -0,0 +1,832 @@
+import { ComponentStyles } from './chunk.XGZHBPCB.js';
+import { RestDrsFilerProvider } from './chunk.566Z3G7U.js';
+import { __decorateClass, __spreadProps, __spreadValues } from './chunk.S3NI7NKU.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/label/index.js';
+import '@elixir-cloud/design/components/textarea/index.js';
+import '@elixir-cloud/design/components/badge/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';
+
+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));
+  }
+`;
+var ECCClientElixirDrsFilerObjectCreate = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.baseUrl = "";
+    this.loading = false;
+    this.error = null;
+    this.success = null;
+    this.formData = {
+      name: "",
+      description: "",
+      mimeType: "",
+      version: "",
+      aliases: [],
+      size: 0,
+      checksums: [],
+      accessMethods: [],
+      contents: []
+    };
+    this.objectType = "blob";
+    this._provider = null;
+  }
+  async firstUpdated() {
+    if (!this.baseUrl && !this.provider) {
+      this.error = "Please provide either a base URL for the DRS API or a custom provider.";
+      return;
+    }
+    if (this.provider) {
+      this._provider = this.provider;
+    } else if (this.baseUrl) {
+      this._provider = new RestDrsFilerProvider(this.baseUrl);
+    } else {
+      this._provider = null;
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("provider")) {
+      if (!this.provider && !this.baseUrl) {
+        this.error = "Please provide either a base URL for the DRS API or a custom provider.";
+        return;
+      }
+      if (this.provider !== this._provider) {
+        this._provider = this.provider || null;
+      }
+      return;
+    }
+    if (changedProperties.has("baseUrl") && !this.provider) {
+      if (!this.baseUrl) {
+        this.error = "Please provide either a base URL for the DRS API or a custom provider.";
+        return;
+      }
+      this._provider = new RestDrsFilerProvider(this.baseUrl);
+    }
+  }
+  handleInputChange(field, value) {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { [field]: value });
+    const event = new CustomEvent("ecc-drs-object-create-input-changed", {
+      detail: { field, value, formData: this.formData },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
+  handleArrayInputChange(field, value) {
+    const arrayValue = value.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { [field]: arrayValue });
+    const event = new CustomEvent("ecc-drs-object-create-input-changed", {
+      detail: { field, value: arrayValue, formData: this.formData },
+      bubbles: true,
+      composed: true
+    });
+    this.dispatchEvent(event);
+  }
+  addChecksum() {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), {
+      checksums: [...this.formData.checksums, { type: "md5", checksum: "" }]
+    });
+  }
+  removeChecksum(index) {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), {
+      checksums: this.formData.checksums.filter((_, i) => i !== index)
+    });
+  }
+  updateChecksum(index, field, value) {
+    const updatedChecksums = [...this.formData.checksums];
+    updatedChecksums[index] = __spreadProps(__spreadValues({}, updatedChecksums[index]), { [field]: value });
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { checksums: updatedChecksums });
+  }
+  addAccessMethod() {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), {
+      accessMethods: [
+        ...this.formData.accessMethods,
+        { type: "https", access_url: { url: "" } }
+      ]
+    });
+  }
+  removeAccessMethod(index) {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), {
+      accessMethods: this.formData.accessMethods.filter((_, i) => i !== index)
+    });
+  }
+  updateAccessMethod(index, field, value) {
+    const updatedMethods = [...this.formData.accessMethods];
+    if (field === "url") {
+      updatedMethods[index] = __spreadProps(__spreadValues({}, updatedMethods[index]), {
+        access_url: { url: value }
+      });
+    } else {
+      updatedMethods[index] = __spreadProps(__spreadValues({}, updatedMethods[index]), { [field]: value });
+    }
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { accessMethods: updatedMethods });
+  }
+  async handleSubmit() {
+    if (!this._provider) {
+      this.error = "No provider available";
+      return;
+    }
+    if (!this.formData.name) {
+      this.error = "Object name is required";
+      const event = new CustomEvent("ecc-drs-object-create-validation-failed", {
+        detail: { errors: ["Object name is required"] },
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchEvent(event);
+      return;
+    }
+    this.loading = true;
+    this.error = null;
+    this.success = null;
+    try {
+      const drsObject = {
+        name: this.formData.name,
+        description: this.formData.description || void 0,
+        created_time: (/* @__PURE__ */ new Date()).toISOString(),
+        mime_type: this.formData.mimeType || void 0,
+        version: this.formData.version || void 0,
+        aliases: this.formData.aliases.length > 0 ? this.formData.aliases : void 0,
+        size: this.formData.size,
+        checksums: this.formData.checksums,
+        access_methods: this.formData.accessMethods,
+        contents: this.objectType === "bundle" && this.formData.contents.length > 0 ? this.formData.contents.filter((content) => content.id.trim()).map((content) => ({ name: content.id, id: content.id })) : void 0
+      };
+      const objectId = await this._provider.createObject(drsObject);
+      this.success = `DRS object created successfully with ID: ${objectId}`;
+      const event = new CustomEvent("ecc-drs-object-created", {
+        detail: {
+          objectId,
+          objectData: drsObject,
+          message: this.success
+        },
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchEvent(event);
+      this.resetForm();
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : "Failed to create DRS object";
+      const event = new CustomEvent("ecc-drs-object-create-failed", {
+        detail: { error: this.error, formData: this.formData },
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchEvent(event);
+    } finally {
+      this.loading = false;
+    }
+  }
+  resetForm() {
+    this.formData = {
+      name: "",
+      description: "",
+      mimeType: "",
+      version: "",
+      aliases: [],
+      size: 0,
+      checksums: [],
+      accessMethods: [],
+      contents: []
+    };
+    this.objectType = "blob";
+    this.error = null;
+    this.success = null;
+  }
+  renderBasicFields() {
+    return html`
+      <div class="space-y-4">
+        <h3 class="text-lg font-medium">Basic Information</h3>
+
+        ${this.error ? html`
+              <div
+                class="p-4 border border-destructive rounded-md text-destructive-foreground bg-destructive/10"
+              >
+                ${this.error}
+              </div>
+            ` : ""}
+        ${this.success ? html`
+              <div
+                class="p-4 border border-primary rounded-md text-primary-foreground bg-primary/10"
+              >
+                ${this.success}
+              </div>
+            ` : ""}
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <ecc-utils-design-label for="object-name"
+              >Object Name *</ecc-utils-design-label
+            >
+            <ecc-utils-design-input
+              id="object-name"
+              placeholder="Enter object name"
+              .value=${this.formData.name}
+              @ecc-input-changed=${(e) => this.handleInputChange("name", e.detail.value)}
+            ></ecc-utils-design-input>
+          </div>
+
+          <div>
+            <ecc-utils-design-label for="object-type"
+              >Object Type</ecc-utils-design-label
+            >
+            <ecc-utils-design-select
+              id="object-type"
+              .value=${this.objectType}
+              @ecc-input-changed=${(e) => {
+      this.objectType = e.detail.value;
+    }}
+            >
+              <ecc-utils-design-select-trigger>
+                <ecc-utils-design-select-value
+                  placeholder="Select object type"
+                ></ecc-utils-design-select-value>
+              </ecc-utils-design-select-trigger>
+              <ecc-utils-design-select-content>
+                <ecc-utils-design-select-item value="blob"
+                  >Blob (Single file)</ecc-utils-design-select-item
+                >
+                <ecc-utils-design-select-item value="bundle"
+                  >Bundle (Collection)</ecc-utils-design-select-item
+                >
+              </ecc-utils-design-select-content>
+            </ecc-utils-design-select>
+          </div>
+        </div>
+
+        <div>
+          <ecc-utils-design-label for="description"
+            >Description</ecc-utils-design-label
+          >
+          <ecc-utils-design-textarea
+            id="description"
+            placeholder="Enter object description"
+            .value=${this.formData.description}
+            @ecc-textarea-changed=${(e) => this.handleInputChange("description", e.detail.value)}
+          ></ecc-utils-design-textarea>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <ecc-utils-design-label for="mime-type"
+              >MIME Type</ecc-utils-design-label
+            >
+            <ecc-utils-design-input
+              id="mime-type"
+              placeholder="e.g., application/json"
+              .value=${this.formData.mimeType}
+              @ecc-input-changed=${(e) => this.handleInputChange("mimeType", e.detail.value)}
+            ></ecc-utils-design-input>
+          </div>
+
+          <div>
+            <ecc-utils-design-label for="version"
+              >Version</ecc-utils-design-label
+            >
+            <ecc-utils-design-input
+              id="version"
+              placeholder="e.g., 1.0.0"
+              .value=${this.formData.version}
+              @ecc-input-changed=${(e) => this.handleInputChange("version", e.detail.value)}
+            ></ecc-utils-design-input>
+          </div>
+
+          <div>
+            <ecc-utils-design-label for="size"
+              >Size (bytes)</ecc-utils-design-label
+            >
+            <ecc-utils-design-input
+              id="size"
+              type="number"
+              placeholder="0"
+              .value=${this.formData.size.toString()}
+              @ecc-input-changed=${(e) => this.handleInputChange(
+      "size",
+      parseInt(e.detail.value, 10) || 0
+    )}
+            ></ecc-utils-design-input>
+          </div>
+        </div>
+
+        <div>
+          <ecc-utils-design-label for="aliases"
+            >Aliases (comma-separated)</ecc-utils-design-label
+          >
+          <ecc-utils-design-input
+            id="aliases"
+            placeholder="alias1, alias2, alias3"
+            .value=${this.formData.aliases.join(", ")}
+            @ecc-input-changed=${(e) => this.handleArrayInputChange("aliases", e.detail.value)}
+          ></ecc-utils-design-input>
+        </div>
+      </div>
+    `;
+  }
+  renderChecksums() {
+    return html`
+      <div class="space-y-4 mt-4">
+        <div class="flex justify-between items-center">
+          <h3 class="text-lg font-medium">Checksums</h3>
+          <ecc-utils-design-button
+            type="button"
+            variant="outline"
+            size="sm"
+            @click=${this.addChecksum}
+          >
+            Add Checksum
+          </ecc-utils-design-button>
+        </div>
+
+        ${this.formData.checksums.length === 0 ? html`
+              <p class="text-muted-foreground text-sm">
+                No checksums added yet.
+              </p>
+            ` : ""}
+        ${this.formData.checksums.map(
+      (checksum, index) => html`
+            <div
+              class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 border rounded-lg"
+            >
+              <div>
+                <ecc-utils-design-label>Type</ecc-utils-design-label>
+                <ecc-utils-design-select
+                  .value=${checksum.type}
+                  @ecc-input-changed=${(e) => this.updateChecksum(index, "type", e.detail.value)}
+                >
+                  <ecc-utils-design-select-trigger>
+                    <ecc-utils-design-select-value
+                      placeholder="Select type"
+                    ></ecc-utils-design-select-value>
+                  </ecc-utils-design-select-trigger>
+                  <ecc-utils-design-select-content>
+                    <ecc-utils-design-select-item value="md5"
+                      >MD5</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="sha1"
+                      >SHA1</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="sha256"
+                      >SHA256</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="sha512"
+                      >SHA512</ecc-utils-design-select-item
+                    >
+                  </ecc-utils-design-select-content>
+                </ecc-utils-design-select>
+              </div>
+              <div>
+                <ecc-utils-design-label>Checksum Value</ecc-utils-design-label>
+                <ecc-utils-design-input
+                  placeholder="Enter checksum value"
+                  .value=${checksum.checksum}
+                  @ecc-input-changed=${(e) => this.updateChecksum(index, "checksum", e.detail.value)}
+                ></ecc-utils-design-input>
+              </div>
+              <div class="flex items-end">
+                <ecc-utils-design-button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  @click=${() => this.removeChecksum(index)}
+                >
+                  Remove
+                </ecc-utils-design-button>
+              </div>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  renderAccessMethods() {
+    return html`
+      <div class="space-y-4 mt-4">
+        <div class="flex justify-between items-center">
+          <h3 class="text-lg font-medium">Access Methods</h3>
+          <ecc-utils-design-button
+            type="button"
+            variant="outline"
+            size="sm"
+            @click=${this.addAccessMethod}
+          >
+            Add Access Method
+          </ecc-utils-design-button>
+        </div>
+
+        ${this.formData.accessMethods.length === 0 ? html`
+              <p class="text-muted-foreground text-sm">
+                No access methods added yet.
+              </p>
+            ` : ""}
+        ${this.formData.accessMethods.map(
+      (method, index) => {
+        var _a;
+        return html`
+            <div
+              class="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 border rounded-lg"
+            >
+              <div>
+                <ecc-utils-design-label>Type</ecc-utils-design-label>
+                <ecc-utils-design-select
+                  .value=${method.type}
+                  @ecc-input-changed=${(e) => this.updateAccessMethod(index, "type", e.detail.value)}
+                >
+                  <ecc-utils-design-select-trigger>
+                    <ecc-utils-design-select-value
+                      placeholder="Select type"
+                    ></ecc-utils-design-select-value>
+                  </ecc-utils-design-select-trigger>
+                  <ecc-utils-design-select-content>
+                    <ecc-utils-design-select-item value="https"
+                      >HTTPS</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="http"
+                      >HTTP</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="ftp"
+                      >FTP</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="sftp"
+                      >SFTP</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="s3"
+                      >S3</ecc-utils-design-select-item
+                    >
+                    <ecc-utils-design-select-item value="gs"
+                      >Google Storage</ecc-utils-design-select-item
+                    >
+                  </ecc-utils-design-select-content>
+                </ecc-utils-design-select>
+              </div>
+              <div>
+                <ecc-utils-design-label>Access URL</ecc-utils-design-label>
+                <ecc-utils-design-input
+                  placeholder="Enter access URL"
+                  .value=${((_a = method.access_url) == null ? void 0 : _a.url) || ""}
+                  @ecc-input-changed=${(e) => this.updateAccessMethod(index, "url", e.detail.value)}
+                ></ecc-utils-design-input>
+              </div>
+              <div class="flex items-end">
+                <ecc-utils-design-button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  @click=${() => this.removeAccessMethod(index)}
+                >
+                  Remove
+                </ecc-utils-design-button>
+              </div>
+            </div>
+          `;
+      }
+    )}
+      </div>
+    `;
+  }
+  renderBundleContents() {
+    if (this.objectType !== "bundle") return html``;
+    return html`
+      <div class="space-y-4 mt-4">
+        <div class="flex justify-between items-center">
+          <h3 class="text-lg font-medium">Bundle Contents</h3>
+          <ecc-utils-design-button
+            type="button"
+            variant="outline"
+            size="sm"
+            @click=${this.addBundleContent}
+          >
+            Add Content Object
+          </ecc-utils-design-button>
+        </div>
+
+        ${this.formData.contents.length === 0 ? html`
+              <p class="text-muted-foreground text-sm">
+                No content objects added yet.
+              </p>
+            ` : ""}
+
+        <div class="space-y-3">
+          ${this.formData.contents.map(
+      (content, index) => this.renderBundleContentItem(content, index)
+    )}
+        </div>
+
+        <div class="p-4 bg-blue-50 border border-blue-200 rounded">
+          <p class="text-sm text-blue-700">
+            <strong>Tip:</strong> You can create nested bundle structures by
+            referencing other bundle object IDs. Each content object can have
+            its own nested contents for complex hierarchical data organization.
+          </p>
+        </div>
+      </div>
+    `;
+  }
+  renderBundleContentItem(content, index) {
+    const indent = content.depth * 24;
+    const depthIndicator = "  ".repeat(content.depth) + (content.depth > 0 ? "\u2514\u2500 " : "");
+    return html`
+      <div
+        class="border rounded-lg p-4 relative"
+        style="margin-left: ${indent}px;"
+      >
+        ${content.depth > 0 ? html`
+              <div class="absolute -left-4 top-0 bottom-0 w-px bg-border"></div>
+              <div class="absolute -left-4 top-6 w-4 h-px bg-border"></div>
+            ` : ""}
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <ecc-utils-design-label class="flex items-center gap-2">
+              ${content.depth > 0 ? html`
+                    <span class="text-muted-foreground font-mono text-xs">
+                      ${depthIndicator}
+                    </span>
+                  ` : ""}
+              Object ID *
+            </ecc-utils-design-label>
+            <ecc-utils-design-input
+              placeholder="Enter DRS object ID"
+              .value=${content.id}
+              @ecc-input-changed=${(e) => this.updateBundleContent(index, e.detail.value)}
+            ></ecc-utils-design-input>
+          </div>
+
+          <div class="flex items-end gap-2">
+            <ecc-utils-design-button
+              type="button"
+              variant="outline"
+              size="sm"
+              @click=${() => this.addNestedContent(index)}
+            >
+              Add Child
+            </ecc-utils-design-button>
+            ${content.depth < 3 ? html`
+                  <ecc-utils-design-button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    @click=${() => this.indentContent(index)}
+                  >
+                    Indent →
+                  </ecc-utils-design-button>
+                ` : ""}
+            ${content.depth > 0 ? html`
+                  <ecc-utils-design-button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    @click=${() => this.outdentContent(index)}
+                  >
+                    ← Outdent
+                  </ecc-utils-design-button>
+                ` : ""}
+            <ecc-utils-design-button
+              type="button"
+              variant="outline"
+              size="sm"
+              @click=${() => this.removeBundleContent(index)}
+            >
+              Remove
+            </ecc-utils-design-button>
+          </div>
+        </div>
+
+        <!-- Show depth level indicator -->
+        ${content.depth > 0 ? html`
+              <div
+                class="mt-2 text-xs text-muted-foreground flex items-center gap-1"
+              >
+                <span
+                  class="inline-flex items-center gap-1 px-2 py-1 bg-muted rounded"
+                >
+                  <span>Level ${content.depth + 1}</span>
+                  <span class="text-xs opacity-60">(nested)</span>
+                </span>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+  addBundleContent() {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), {
+      contents: [...this.formData.contents, { id: "", depth: 0 }]
+    });
+  }
+  removeBundleContent(index) {
+    this.formData = __spreadProps(__spreadValues({}, this.formData), {
+      contents: this.formData.contents.filter((_, i) => i !== index)
+    });
+  }
+  updateBundleContent(index, value) {
+    const updatedContents = [...this.formData.contents];
+    updatedContents[index] = __spreadProps(__spreadValues({}, updatedContents[index]), { id: value });
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { contents: updatedContents });
+  }
+  addNestedContent(parentIndex) {
+    const updatedContents = [...this.formData.contents];
+    const parentDepth = updatedContents[parentIndex].depth;
+    updatedContents.splice(parentIndex + 1, 0, {
+      id: "",
+      depth: parentDepth + 1
+    });
+    this.formData = __spreadProps(__spreadValues({}, this.formData), { contents: updatedContents });
+  }
+  indentContent(index) {
+    const updatedContents = [...this.formData.contents];
+    if (updatedContents[index].depth < 3) {
+      updatedContents[index] = __spreadProps(__spreadValues({}, updatedContents[index]), {
+        depth: updatedContents[index].depth + 1
+      });
+      this.formData = __spreadProps(__spreadValues({}, this.formData), { contents: updatedContents });
+    }
+  }
+  outdentContent(index) {
+    const updatedContents = [...this.formData.contents];
+    if (updatedContents[index].depth > 0) {
+      updatedContents[index] = __spreadProps(__spreadValues({}, updatedContents[index]), {
+        depth: updatedContents[index].depth - 1
+      });
+      this.formData = __spreadProps(__spreadValues({}, this.formData), { contents: updatedContents });
+    }
+  }
+  render() {
+    if (!this.baseUrl && !this.provider) {
+      return html`
+        <div
+          class="p-4 border border-destructive rounded-md text-destructive-foreground bg-destructive/10"
+        >
+          Please provide either a base URL for the DRS API or a custom provider.
+        </div>
+      `;
+    }
+    return html`
+      <div class="space-y-6">
+        <form
+          @submit=${(e) => {
+      e.preventDefault();
+      this.handleSubmit();
+    }}
+        >
+          <div class="space-y-6">
+            ${this.renderBasicFields()}
+            <ecc-utils-design-separator></ecc-utils-design-separator>
+            ${this.renderChecksums()}
+            <ecc-utils-design-separator></ecc-utils-design-separator>
+            ${this.renderAccessMethods()}
+            <ecc-utils-design-separator></ecc-utils-design-separator>
+            ${this.renderBundleContents()}
+          </div>
+
+          <div class="flex justify-between items-center mt-6">
+            <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.name}
+              >
+                ${this.loading ? "Creating..." : "Create Object"}
+              </ecc-utils-design-button>
+            </div>
+          </div>
+        </form>
+      </div>
+    `;
+  }
+};
+ECCClientElixirDrsFilerObjectCreate.styles = [
+  ComponentStyles,
+  GlobalStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String, reflect: true })
+], ECCClientElixirDrsFilerObjectCreate.prototype, "baseUrl", 2);
+__decorateClass([
+  property({ attribute: false, reflect: true })
+], ECCClientElixirDrsFilerObjectCreate.prototype, "provider", 2);
+__decorateClass([
+  state()
+], ECCClientElixirDrsFilerObjectCreate.prototype, "loading", 2);
+__decorateClass([
+  state()
+], ECCClientElixirDrsFilerObjectCreate.prototype, "error", 2);
+__decorateClass([
+  state()
+], ECCClientElixirDrsFilerObjectCreate.prototype, "success", 2);
+__decorateClass([
+  state()
+], ECCClientElixirDrsFilerObjectCreate.prototype, "formData", 2);
+__decorateClass([
+  state()
+], ECCClientElixirDrsFilerObjectCreate.prototype, "objectType", 2);
+var object_create_default = ECCClientElixirDrsFilerObjectCreate;
+
+export { ECCClientElixirDrsFilerObjectCreate, object_create_default };