@memberjunction/ng-conversations 5.33.0 → 5.34.0

package/dist/lib/components/collection/artifact-collection-picker-modal.component.js

@@ -1,268 +1,475 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import { FormsModule } from '@angular/forms';
-import { RunView } from '@memberjunction/core';
+import { RunView, LogError } from '@memberjunction/core';
 import { MJDialogComponent, MJDialogActionsComponent, MJButtonDirective } from '@memberjunction/ng-ui-components';
 import { SharedGenericModule } from '@memberjunction/ng-shared-generic';
-import { UUIDsEqual } from '@memberjunction/global';
+import { UUIDsEqual, NormalizeUUID } from '@memberjunction/global';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/toast.service";
 import * as i2 from "../../services/collection-permission.service";
 import * as i3 from "@angular/forms";
 import * as i4 from "@memberjunction/ng-shared-generic";
+const _c0 = ["searchInput"];
+const _c1 = ["newNameInput"];
 const _forTrack0 = ($index, $item) => $item.collection.ID;
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_2_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "i", 20);
-    i0.ɵɵelementStart(1, "button", 18);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_2_For_5_Template_button_click_1_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.navigateToCollection(item_r5.collection)); });
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const item_r5 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", item_r5.collection.Name, " ");
-} }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+const _forTrack1 = ($index, $item) => $item.collectionId;
+const _forTrack2 = ($index, $item) => $item.ID;
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "button", 18);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToRoot()); });
-    i0.ɵɵelement(2, "i", 19);
-    i0.ɵɵtext(3, " Root ");
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(4, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_2_For_5_Template, 3, 1, null, null, _forTrack0);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "mj-loading", 36);
     i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 16);
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r1.navigationPath);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 22);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 8);
     i0.ɵɵelementStart(1, "p");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 38);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵtext(4, "Clear search");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(4);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("No collections found matching \"", ctx_r1.searchQuery, "\"");
+    i0.ɵɵtextInterpolate1("No collections match \u201C", ctx_r1.searchQuery, "\u201D");
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 23);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 39);
     i0.ɵɵelementStart(1, "p");
-    i0.ɵɵtext(2, "No sub-collections available");
+    i0.ɵɵtext(2, "No editable collections yet");
     i0.ɵɵelementEnd();
-} }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 24);
-    i0.ɵɵelementStart(1, "p");
-    i0.ɵɵtext(2, "No collections available");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 25);
-    i0.ɵɵtext(4, "Create a new collection to get started");
+    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵtext(4, "Create one to get started");
     i0.ɵɵelementEnd();
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21);
-    i0.ɵɵconditionalCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Conditional_1_Template, 3, 1)(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Conditional_2_Template, 3, 0)(3, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Conditional_3_Template, 5, 0);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵconditionalCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Conditional_1_Template, 5, 1)(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Conditional_2_Template, 5, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.searchQuery ? 1 : ctx_r1.currentParentId ? 2 : 3);
+    i0.ɵɵconditional(ctx_r1.searchQuery ? 1 : 2);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 53);
+} if (rf & 2) {
+    const node_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassProp("fa-chevron-down", node_r6.expanded)("fa-chevron-right", !node_r6.expanded);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
-    i0.ɵɵelement(1, "i", 34);
-    i0.ɵɵtext(2, " Already added ");
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("\u00B7 ", node_r6.ancestry);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.drillIntoCollection(node_r7.collection)); });
-    i0.ɵɵelement(1, "i", 36);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 52);
+    i0.ɵɵtext(1, "Already saved");
     i0.ɵɵelementEnd();
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Template_div_click_0_listener() { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleSelection(node_r7)); });
-    i0.ɵɵelementStart(1, "div", 28)(2, "input", 29);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Template_input_click_2_listener($event) { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleSelection(node_r7)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelement(3, "i", 30);
-    i0.ɵɵelementStart(4, "span", 31);
-    i0.ɵɵtext(5);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Template_div_click_0_listener() { const node_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRowClick(node_r6)); });
+    i0.ɵɵelementStart(1, "span", 45);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Template_span_click_1_listener($event) { const node_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); $event.stopPropagation(); return i0.ɵɵresetView(ctx_r1.toggleExpand(node_r6)); });
+    i0.ɵɵconditionalCreate(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_2_Template, 1, 4, "i", 46);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 47);
+    i0.ɵɵconditionalCreate(4, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_4_Template, 1, 0, "i", 48);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "i", 49);
+    i0.ɵɵelementStart(6, "span", 50);
+    i0.ɵɵtext(7);
+    i0.ɵɵconditionalCreate(8, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_8_Template, 2, 1, "span", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Conditional_6_Template, 3, 0, "span", 32);
-    i0.ɵɵconditionalCreate(7, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Conditional_7_Template, 2, 0, "button", 33);
+    i0.ɵɵconditionalCreate(9, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Conditional_9_Template, 2, 0, "span", 52);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r7 = ctx.$implicit;
-    i0.ɵɵclassProp("already-added", node_r7.alreadyContainsArtifact);
+    const node_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵstyleProp("padding-left", ctx_r1.searchQuery ? 12 : 12 + node_r6.depth * 18, "px");
+    i0.ɵɵclassProp("selected", ctx_r1.isSelected(node_r6.collection.ID))("already", node_r6.alreadyContainsArtifact);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("checked", node_r7.selected)("disabled", node_r7.alreadyContainsArtifact);
+    i0.ɵɵconditional(node_r6.hasChildren && !ctx_r1.searchQuery ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("checked", ctx_r1.isSelected(node_r6.collection.ID))("locked", node_r6.alreadyContainsArtifact);
+    i0.ɵɵattribute("aria-label", node_r6.alreadyContainsArtifact ? "Already saved" : "Toggle selection");
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("color", node_r7.collection.Color || "var(--mj-brand-primary)");
+    i0.ɵɵconditional(ctx_r1.isSelected(node_r6.collection.ID) || node_r6.alreadyContainsArtifact ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("color", node_r6.collection.Color || "var(--mj-brand-primary)");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r7.collection.Name);
+    i0.ɵɵtextInterpolate1(" ", node_r6.collection.Name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r7.alreadyContainsArtifact ? 6 : -1);
+    i0.ɵɵconditional(ctx_r1.searchQuery && node_r6.ancestry ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(node_r7.hasChildren ? 7 : -1);
+    i0.ɵɵconditional(node_r6.alreadyContainsArtifact ? 9 : -1);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openCreateForm()); });
+    i0.ɵɵelement(1, "span", 55);
+    i0.ɵɵelementStart(2, "span", 56);
+    i0.ɵɵelement(3, "i", 57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 50);
+    i0.ɵɵtext(5, "Create new collection\u2026");
+    i0.ɵɵelementEnd()();
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_For_1_Template, 8, 9, "div", 26, _forTrack0);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " Create ");
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵelement(1, "span", 55);
+    i0.ɵɵelementStart(2, "span", 56);
+    i0.ɵɵelement(3, "i", 57);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "input", 58, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r1.newCollectionName, $event) || (ctx_r1.newCollectionName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template_input_keydown_enter_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createCollection()); })("keydown.escape", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template_input_keydown_escape_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.cancelCreate()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 59);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createCollection()); });
+    i0.ɵɵconditionalCreate(7, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Conditional_7_Template, 1, 0, "i", 60)(8, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Conditional_8_Template, 1, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 61);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.cancelCreate()); });
+    i0.ɵɵtext(10, " Cancel ");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵrepeater(ctx_r1.displayedCollections);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newCollectionName);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingCollection);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingCollection || !ctx_r1.newCollectionName.trim());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isCreatingCollection ? 7 : 8);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isCreatingCollection);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵconditionalCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_1_Template, 4, 1, "div", 21)(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Conditional_2_Template, 2, 0);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18);
+    i0.ɵɵrepeaterCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_For_2_Template, 10, 18, "div", 41, _forTrack0);
+    i0.ɵɵconditionalCreate(3, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_3_Template, 6, 0, "button", 42)(4, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Conditional_4_Template, 11, 5, "div", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.displayedCollections.length === 0 ? 1 : 2);
+    i0.ɵɵrepeater(ctx_r1.visibleNodes);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r1.isSaving && !ctx_r1.searchQuery && !ctx_r1.showCreateForm ? 3 : ctx_r1.showCreateForm ? 4 : -1);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9);
-    i0.ɵɵelement(1, "mj-loading", 37);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("v", ctx_r1.artifactVersionNumber);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "i", 38);
-    i0.ɵɵelementStart(2, "span");
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Results");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 62);
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
+    i0.ɵɵtextInterpolate2("", ctx_r1.successCount, " / ", ctx_r1.saveResults.size);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "i", 34);
-    i0.ɵɵelementStart(2, "span");
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "Selected");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 62);
     i0.ɵɵtext(3);
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.selectedCollections.length, " collection(s) selected");
+    i0.ɵɵtextInterpolate(ctx_r1.selectedIds.size);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 39);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.showCreateForm = true); });
-    i0.ɵɵelement(1, "i", 40);
-    i0.ɵɵtext(2, " Create New Collection ");
-    i0.ɵɵelementEnd();
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtext(0, " Create ");
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 37);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const r_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(r_r9.errorMessage);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "input", 41, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.newCollectionName, $event) || (ctx_r1.newCollectionName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Template_input_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createCollection()); });
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const r_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.retryOne(r_r9.collectionId)); });
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 42)(4, "button", 43);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.createCollection()); });
-    i0.ɵɵconditionalCreate(5, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Conditional_5_Template, 1, 0, "i", 44)(6, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Conditional_6_Template, 1, 0);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64)(1, "span", 65);
+    i0.ɵɵconditionalCreate(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_2_Template, 1, 0, "i", 60)(3, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_3_Template, 1, 0, "i", 48)(4, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_4_Template, 1, 0, "i", 37)(5, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Case_5_Template, 1, 0, "i", 66);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 67)(7, "div", 68);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Conditional_9_Template, 2, 1, "div", 69);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Conditional_10_Template, 2, 0, "button", 70);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_16_0;
+    const r_r9 = ctx.$implicit;
+    i0.ɵɵclassProp("success", r_r9.status === "success")("error", r_r9.status === "error")("saving", r_r9.status === "saving");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_16_0 = r_r9.status) === "saving" ? 2 : tmp_16_0 === "success" ? 3 : tmp_16_0 === "error" ? 4 : 5);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(r_r9.collectionName);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(r_r9.status === "error" && r_r9.errorMessage ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(r_r9.status === "error" ? 10 : -1);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵrepeaterCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_For_2_Template, 11, 10, "div", 63, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 45);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); ctx_r1.showCreateForm = false; return i0.ɵɵresetView(ctx_r1.newCollectionName = ""); });
-    i0.ɵɵtext(8, " Cancel ");
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.newCollectionName);
+    i0.ɵɵrepeater(ctx_r1.resultsList);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_36_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 73);
+    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelementStart(2, "div", 67)(3, "div", 68);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "button", 74);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_36_For_2_Template_button_click_5_listener() { const c_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselect(c_r12.ID)); });
+    i0.ɵɵelement(6, "i", 35);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const c_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("color", c_r12.Color || "var(--mj-brand-primary)");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.isCreatingCollection || !ctx_r1.newCollectionName.trim());
+    i0.ɵɵtextInterpolate(c_r12.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29);
+    i0.ɵɵrepeaterCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_36_For_2_Template, 7, 4, "div", 73, _forTrack2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isCreatingCollection ? 5 : 6);
+    i0.ɵɵrepeater(ctx_r1.selectedCollections);
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "Pick a collection on the left");
+    i0.ɵɵelementEnd()();
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 44);
-    i0.ɵɵtext(1, " Saving... ");
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 76);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_42_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.retryFailed()); });
+    i0.ɵɵelement(1, "i", 72);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 77);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_42_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAcknowledgeAndClose()); });
+    i0.ɵɵtext(4, "Done");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Retry ", ctx_r1.failedCount, " failed ");
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 76);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_43_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAcknowledgeAndClose()); });
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵtext(2, " Done ");
+    i0.ɵɵelementEnd();
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
+    i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" Saving to ", ctx_r1.selectedIds.size, "\u2026 ");
 } }
-function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 46);
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 80);
     i0.ɵɵtext(1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" Save to ", ctx_r1.selectedIds.size, " ", ctx_r1.selectedIds.size === 1 ? "collection" : "collections", " ");
+} }
+function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 78);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSave()); });
+    i0.ɵɵconditionalCreate(1, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Conditional_1_Template, 2, 1)(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Conditional_2_Template, 2, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 79);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵtext(4, "Cancel");
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r1.selectedIds.size === 0 || ctx_r1.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" Save to ", ctx_r1.selectedCollections.length, " Collection(s) ");
+    i0.ɵɵconditional(ctx_r1.isSaving ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
 } }
 function ArtifactCollectionPickerModalComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dialog", 2);
+    i0.ɵɵelementStart(0, "mj-dialog", 3);
     i0.ɵɵlistener("Close", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵelementStart(1, "div", 3);
-    i0.ɵɵconditionalCreate(2, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_2_Template, 6, 0, "div", 4);
-    i0.ɵɵelementStart(3, "div", 5);
-    i0.ɵɵelement(4, "i", 6);
-    i0.ɵɵelementStart(5, "input", 7);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchQuery, $event) || (ctx_r1.searchQuery = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("input", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_input_input_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_6_Template, 3, 1, "div", 8);
-    i0.ɵɵconditionalCreate(7, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_7_Template, 2, 0, "div", 9);
-    i0.ɵɵconditionalCreate(8, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_8_Template, 4, 1, "div", 10);
-    i0.ɵɵconditionalCreate(9, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_9_Template, 4, 1, "div", 11);
-    i0.ɵɵelementStart(10, "div", 12)(11, "div", 13)(12, "span");
-    i0.ɵɵtext(13, "OR CREATE NEW");
+    i0.ɵɵelementStart(1, "div", 4)(2, "div", 5)(3, "div", 6)(4, "div", 7);
+    i0.ɵɵelement(5, "i", 8);
+    i0.ɵɵelementStart(6, "input", 9, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_input_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchQuery, $event) || (ctx_r1.searchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_input_ngModelChange_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_8_Template, 2, 0, "button", 10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 11);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilter("editable")); });
+    i0.ɵɵelement(10, "i", 12);
+    i0.ɵɵtext(11, " Editable ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 11);
+    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilter("recent")); });
+    i0.ɵɵelement(13, "i", 13);
+    i0.ɵɵtext(14, " Recent ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_14_Template, 3, 0, "button", 14)(15, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_15_Template, 9, 3, "div", 15);
+    i0.ɵɵelementStart(15, "div", 14);
+    i0.ɵɵconditionalCreate(16, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_16_Template, 2, 0, "div", 15)(17, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_17_Template, 4, 1, "div", 16)(18, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_18_Template, 3, 1, "div", 17)(19, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_19_Template, 5, 1, "div", 18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "mj-dialog-actions")(17, "button", 16);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵtext(18, " Cancel ");
+    i0.ɵɵelementStart(20, "div", 19)(21, "div", 20)(22, "div", 21);
+    i0.ɵɵtext(23, "Saving");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "div", 22)(25, "div", 23);
+    i0.ɵɵelement(26, "i", 24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "div", 25)(28, "div", 26);
+    i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 17);
-    i0.ɵɵlistener("click", function ArtifactCollectionPickerModalComponent_Conditional_0_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSave()); });
-    i0.ɵɵconditionalCreate(20, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_20_Template, 2, 0)(21, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_21_Template, 2, 1);
+    i0.ɵɵconditionalCreate(30, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_30_Template, 2, 1, "span", 27);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(31, "div", 28)(32, "div", 21);
+    i0.ɵɵconditionalCreate(33, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_33_Template, 4, 2)(34, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_34_Template, 4, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(35, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_35_Template, 3, 0, "div", 29)(36, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_36_Template, 3, 0, "div", 29)(37, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_37_Template, 4, 0, "div", 30);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(38, "div", 31);
+    i0.ɵɵelement(39, "i", 32);
+    i0.ɵɵtext(40, " Only collections you can edit are shown ");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(41, "mj-dialog-actions");
+    i0.ɵɵconditionalCreate(42, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_42_Template, 5, 1)(43, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_43_Template, 3, 0, "button", 33)(44, ArtifactCollectionPickerModalComponent_Conditional_0_Conditional_44_Template, 5, 3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("Visible", true)("Width", 700)("MinWidth", 500);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.navigationPath.length > 0 ? 2 : -1);
-    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Visible", true)("Width", 960)("MinWidth", 720);
+    i0.ɵɵadvance(6);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchQuery);
-    i0.ɵɵproperty("disabled", ctx_r1.isLoading);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.isLoading && !ctx_r1.errorMessage ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoading ? 7 : -1);
+    i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isSaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.searchQuery ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.errorMessage ? 8 : -1);
+    i0.ɵɵclassProp("active", ctx_r1.filterMode === "editable");
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.filterMode === "recent");
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.isLoading ? 16 : ctx_r1.errorMessage ? 17 : ctx_r1.visibleNodes.length === 0 ? 18 : 19);
+    i0.ɵɵadvance(12);
+    i0.ɵɵproperty("title", ctx_r1.artifactName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.selectedCollections.length > 0 ? 9 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵconditional(!ctx_r1.showCreateForm ? 14 : 15);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedCollections.length === 0 || ctx_r1.isSaving);
+    i0.ɵɵtextInterpolate(ctx_r1.artifactName || "Artifact");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSaving ? 20 : 21);
+    i0.ɵɵconditional(ctx_r1.artifactVersionNumber != null ? 30 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.saveResults.size > 0 ? 33 : 34);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.saveResults.size > 0 ? 35 : ctx_r1.selectedIds.size > 0 ? 36 : 37);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r1.failedCount > 0 && !ctx_r1.isSaving ? 42 : ctx_r1.saveResults.size > 0 && ctx_r1.successCount === ctx_r1.saveResults.size && !ctx_r1.isSaving ? 43 : 44);
 } }
 /**
- * Modal for selecting collections to save artifacts to.
- * Features:
- * - Permission-aware: only shows collections where user has Edit permission
- * - Hierarchical navigation: start with root collections, drill down as needed
- * - Search by name
- * - Multi-selection support
- * - Create new collection with proper permission logic
+ * Modal for saving an artifact version to one or more collections.
+ *
+ * Owns the full UX *and* the writes:
+ *   - Left pane: searchable, expandable tree of collections the user can edit
+ *   - Right pane: artifact preview + live selection chips, and (post-save) per-collection results
+ *   - Save runs inline (modal stays open during writes) and reports per-collection success/failure with retry
+ *
+ * Emits {@link completed} on full success (parent should reload bookmark state) and on user-acknowledged
+ * partial failure. Emits {@link cancelled} when the user backs out without saving anything.
  */
 export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent {
     toastService;
@@ -271,30 +478,50 @@ export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent
     isOpen = false;
     environmentId;
     currentUser;
-    excludeCollectionIds = []; // Collections to exclude (e.g., already contains artifact)
-    saved = new EventEmitter(); // Emits selected collection IDs
+    /** Collections that already contain the *current version* — rendered with a green check and locked. */
+    excludeCollectionIds = [];
+    /** ID of the artifact version being saved. Required for writes. */
+    artifactVersionId = null;
+    /** Display-only: artifact name shown in the preview pane. */
+    artifactName = '';
+    /** Display-only: version number shown in the preview pane. */
+    artifactVersionNumber = null;
+    /** Fired when the save flow finishes (fully successful, or user acknowledged partial result). */
+    completed = new EventEmitter();
     cancelled = new EventEmitter();
+    searchInputRef;
+    newNameInputRef;
+    // Data
     allCollections = [];
-    displayedCollections = [];
-    selectedCollections = [];
+    editableCollections = [];
     userPermissions = new Map();
-    navigationPath = []; // Breadcrumb trail
-    currentParentId = null;
-    currentParentCollection = undefined;
+    collectionById = new Map();
+    expandedIds = new Set();
+    // Selection (normalized UUIDs so SQL Server vs Postgres casing doesn't bite us)
+    selectedIds = new Set();
+    // Filter / search
     searchQuery = '';
+    filterMode = 'editable';
+    // Render output
+    visibleNodes = [];
+    // States
     isLoading = false;
     isSaving = false;
     errorMessage = '';
-    // Create collection form state
     showCreateForm = false;
     newCollectionName = '';
     isCreatingCollection = false;
+    // Per-collection save outcomes
+    saveResults = new Map();
     constructor(toastService, permissionService, cdr) {
         super();
         this.toastService = toastService;
         this.permissionService = permissionService;
         this.cdr = cdr;
     }
+    // ============================================================
+    //  Lifecycle
+    // ============================================================
     async ngOnInit() {
         this.permissionService.Provider = this.ProviderToUse;
         if (this.isOpen) {
@@ -302,27 +529,76 @@ export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent
         }
     }
     async ngOnChanges(changes) {
-        if (changes['isOpen'] && this.isOpen) {
-            this.reset();
-            await this.loadCollections();
+        if (changes['isOpen']) {
+            if (this.isOpen) {
+                this.resetState();
+                await this.loadCollections();
+                // Autofocus search on next tick
+                Promise.resolve().then(() => this.searchInputRef?.nativeElement?.focus());
+            }
         }
     }
-    reset() {
+    ngAfterViewInit() {
+        if (this.isOpen) {
+            this.searchInputRef?.nativeElement?.focus();
+        }
+    }
+    // ============================================================
+    //  Selection helpers (normalized UUIDs)
+    // ============================================================
+    isSelected(id) {
+        return this.selectedIds.has(NormalizeUUID(id));
+    }
+    get selectedCollections() {
+        const list = [];
+        for (const id of this.selectedIds) {
+            const c = this.collectionById.get(id);
+            if (c)
+                list.push(c);
+        }
+        return list;
+    }
+    get resultsList() {
+        return Array.from(this.saveResults.values());
+    }
+    get successCount() {
+        let n = 0;
+        for (const r of this.saveResults.values())
+            if (r.status === 'success')
+                n++;
+        return n;
+    }
+    get failedCount() {
+        let n = 0;
+        for (const r of this.saveResults.values())
+            if (r.status === 'error')
+                n++;
+        return n;
+    }
+    // ============================================================
+    //  Load + tree build
+    // ============================================================
+    resetState() {
         this.allCollections = [];
-        this.displayedCollections = [];
-        this.selectedCollections = [];
+        this.editableCollections = [];
         this.userPermissions.clear();
-        this.navigationPath = [];
-        this.currentParentId = null;
-        this.currentParentCollection = undefined;
+        this.collectionById.clear();
+        this.expandedIds.clear();
+        this.selectedIds.clear();
+        this.visibleNodes = [];
         this.searchQuery = '';
+        this.filterMode = 'editable';
         this.errorMessage = '';
+        this.showCreateForm = false;
+        this.newCollectionName = '';
+        this.saveResults.clear();
+        this.isSaving = false;
+        this.isCreatingCollection = false;
     }
     async loadCollections() {
         try {
             this.isLoading = true;
             this.errorMessage = '';
-            // Load all collections in environment
             const rv = RunView.FromMetadataProvider(this.ProviderToUse);
             const result = await rv.RunView({
                 EntityName: 'MJ: Collections',
@@ -335,18 +611,16 @@ export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent
                 return;
             }
             this.allCollections = result.Results || [];
-            // Load user permissions for all collections
             await this.loadUserPermissions();
-            // Filter to collections with Edit permission
-            // Include collections that already contain the artifact (will be shown as disabled)
-            const editableCollections = this.allCollections.filter(c => {
-                return this.canEdit(c);
-            });
-            // Show root collections initially
-            this.displayRootCollections(editableCollections);
+            this.editableCollections = this.allCollections.filter(c => this.canEdit(c));
+            this.collectionById.clear();
+            for (const c of this.editableCollections) {
+                this.collectionById.set(NormalizeUUID(c.ID), c);
+            }
+            this.rebuildVisibleNodes();
         }
         catch (error) {
-            console.error('Error loading collections:', error);
+            LogError(error);
             this.errorMessage = 'An error occurred while loading collections';
         }
         finally {
@@ -355,204 +629,367 @@ export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent
         }
     }
     async loadUserPermissions() {
-        // Load permissions for collections not owned by current user
-        const nonOwnedCollections = this.allCollections.filter(c => c.OwnerID && !UUIDsEqual(c.OwnerID, this.currentUser.ID));
-        if (nonOwnedCollections.length === 0) {
+        const nonOwned = this.allCollections.filter(c => c.OwnerID && !UUIDsEqual(c.OwnerID, this.currentUser.ID));
+        if (nonOwned.length === 0)
             return;
+        const ids = nonOwned.map(c => c.ID);
+        const permissions = await this.permissionService.checkBulkPermissions(ids, this.currentUser.ID, this.currentUser);
+        permissions.forEach((permission, id) => this.userPermissions.set(id, permission));
+    }
+    canEdit(c) {
+        if (!c.OwnerID || UUIDsEqual(c.OwnerID, this.currentUser.ID))
+            return true;
+        return this.userPermissions.get(c.ID)?.canEdit || false;
+    }
+    // ============================================================
+    //  Tree rendering — flat list of CollectionNode, ordered DFS
+    // ============================================================
+    rebuildVisibleNodes() {
+        const q = this.searchQuery.trim().toLowerCase();
+        if (q) {
+            this.visibleNodes = this.buildSearchNodes(q);
         }
-        const collectionIds = nonOwnedCollections.map(c => c.ID);
-        const permissions = await this.permissionService.checkBulkPermissions(collectionIds, this.currentUser.ID, this.currentUser);
-        permissions.forEach((permission, collectionId) => {
-            this.userPermissions.set(collectionId, permission);
-        });
-    }
-    displayRootCollections(editableCollections) {
-        const rootCollections = editableCollections.filter(c => !c.ParentID);
-        this.displayedCollections = rootCollections.map(c => this.createNode(c, editableCollections));
-    }
-    displayChildCollections(parentId, editableCollections) {
-        const childCollections = editableCollections.filter(c => UUIDsEqual(c.ParentID, parentId));
-        this.displayedCollections = childCollections.map(c => this.createNode(c, editableCollections));
-    }
-    createNode(collection, allEditableCollections) {
-        const hasChildren = allEditableCollections.some(c => UUIDsEqual(c.ParentID, collection.ID));
-        const alreadyContainsArtifact = this.excludeCollectionIds.some(id => UUIDsEqual(id, collection.ID));
-        return {
-            collection,
-            selected: this.selectedCollections.some(sc => UUIDsEqual(sc.ID, collection.ID)),
-            hasChildren,
-            alreadyContainsArtifact
+        else {
+            this.visibleNodes = this.buildTreeNodes();
+        }
+    }
+    buildTreeNodes() {
+        const byParent = new Map();
+        for (const c of this.editableCollections) {
+            const key = c.ParentID ? NormalizeUUID(c.ParentID) : null;
+            const arr = byParent.get(key) || [];
+            arr.push(c);
+            byParent.set(key, arr);
+        }
+        const out = [];
+        const walk = (parentId, depth) => {
+            const children = byParent.get(parentId) || [];
+            for (const c of children) {
+                const id = NormalizeUUID(c.ID);
+                const kids = byParent.get(id) || [];
+                const hasChildren = kids.length > 0;
+                out.push({
+                    collection: c,
+                    depth,
+                    expanded: this.expandedIds.has(id),
+                    hasChildren,
+                    alreadyContainsArtifact: this.isAlreadyAdded(c.ID),
+                    ancestry: ''
+                });
+                if (hasChildren && this.expandedIds.has(id)) {
+                    walk(id, depth + 1);
+                }
+            }
         };
+        walk(null, 0);
+        return out;
     }
-    canEdit(collection) {
-        // Backwards compatibility: treat null OwnerID as owned by current user
-        if (!collection.OwnerID || UUIDsEqual(collection.OwnerID, this.currentUser.ID)) {
-            return true;
+    buildSearchNodes(query) {
+        const matches = this.editableCollections.filter(c => c.Name.toLowerCase().includes(query));
+        return matches.map(c => ({
+            collection: c,
+            depth: 0,
+            expanded: false,
+            hasChildren: false,
+            alreadyContainsArtifact: this.isAlreadyAdded(c.ID),
+            ancestry: this.buildAncestry(c)
+        }));
+    }
+    buildAncestry(c) {
+        const names = [];
+        let parentId = c.ParentID;
+        let guard = 0;
+        while (parentId && guard++ < 32) {
+            const p = this.collectionById.get(NormalizeUUID(parentId));
+            if (!p)
+                break;
+            names.unshift(p.Name);
+            parentId = p.ParentID;
         }
-        // Check permission record
-        const permission = this.userPermissions.get(collection.ID);
-        return permission?.canEdit || false;
+        return names.join(' / ');
+    }
+    isAlreadyAdded(id) {
+        return this.excludeCollectionIds.some(eid => UUIDsEqual(eid, id));
     }
-    toggleSelection(node) {
-        // Don't allow selection of collections that already contain the artifact
-        if (node.alreadyContainsArtifact) {
+    // ============================================================
+    //  Tree interactions
+    // ============================================================
+    onRowClick(node) {
+        if (this.isSaving)
             return;
-        }
-        const index = this.selectedCollections.findIndex(c => UUIDsEqual(c.ID, node.collection.ID));
-        if (index >= 0) {
-            this.selectedCollections.splice(index, 1);
-            node.selected = false;
+        if (node.alreadyContainsArtifact)
+            return;
+        this.toggleSelection(node.collection);
+    }
+    toggleSelection(c) {
+        const id = NormalizeUUID(c.ID);
+        if (this.selectedIds.has(id)) {
+            this.selectedIds.delete(id);
         }
         else {
-            this.selectedCollections.push(node.collection);
-            node.selected = true;
-        }
-    }
-    drillIntoCollection(collection) {
-        // Add current location to navigation path
-        const editableCollections = this.allCollections.filter(c => {
-            return this.canEdit(c);
-        });
-        const node = this.createNode(collection, editableCollections);
-        this.navigationPath.push(node);
-        this.currentParentId = collection.ID;
-        this.currentParentCollection = collection;
-        // Display child collections
-        this.displayChildCollections(collection.ID, editableCollections);
-        // Clear search when drilling down
-        this.searchQuery = '';
+            this.selectedIds.add(id);
+        }
     }
-    navigateToRoot() {
-        this.navigationPath = [];
-        this.currentParentId = null;
-        this.currentParentCollection = undefined;
-        const editableCollections = this.allCollections.filter(c => {
-            return this.canEdit(c);
-        });
-        this.displayRootCollections(editableCollections);
-        this.searchQuery = '';
+    deselect(id) {
+        if (this.isSaving)
+            return;
+        this.selectedIds.delete(NormalizeUUID(id));
     }
-    navigateToCollection(collection) {
-        // Find the index of this collection in the navigation path
-        const index = this.navigationPath.findIndex(n => UUIDsEqual(n.collection.ID, collection.ID));
-        if (index >= 0) {
-            // Trim navigation path to this level
-            this.navigationPath = this.navigationPath.slice(0, index + 1);
-            this.currentParentId = collection.ID;
-            this.currentParentCollection = collection;
-            const editableCollections = this.allCollections.filter(c => {
-                return this.canEdit(c);
-            });
-            this.displayChildCollections(collection.ID, editableCollections);
-            this.searchQuery = '';
+    toggleExpand(node) {
+        if (!node.hasChildren)
+            return;
+        const id = NormalizeUUID(node.collection.ID);
+        if (this.expandedIds.has(id)) {
+            this.expandedIds.delete(id);
+        }
+        else {
+            this.expandedIds.add(id);
         }
+        this.rebuildVisibleNodes();
     }
     onSearchChange() {
-        if (!this.searchQuery.trim()) {
-            // Reset to current navigation context
-            if (this.currentParentId) {
-                const editableCollections = this.allCollections.filter(c => {
-                    return this.canEdit(c);
-                });
-                this.displayChildCollections(this.currentParentId, editableCollections);
-            }
-            else {
-                const editableCollections = this.allCollections.filter(c => {
-                    return this.canEdit(c);
-                });
-                this.displayRootCollections(editableCollections);
-            }
-            return;
-        }
-        // Search across all editable collections
-        const query = this.searchQuery.toLowerCase();
-        const editableCollections = this.allCollections.filter(c => {
-            return this.canEdit(c) && c.Name.toLowerCase().includes(query);
-        });
-        this.displayedCollections = editableCollections.map(c => this.createNode(c, editableCollections));
+        this.rebuildVisibleNodes();
+    }
+    clearSearch() {
+        this.searchQuery = '';
+        this.rebuildVisibleNodes();
+        this.searchInputRef?.nativeElement?.focus();
+    }
+    setFilter(mode) {
+        this.filterMode = mode;
+        // 'recent' filter is a placeholder for now — same data, future sort change.
+        // Keeping the chip wired so the UI is honest and a future PR can flip the sort.
+        this.rebuildVisibleNodes();
+    }
+    // ============================================================
+    //  Create new collection (root-level only — keeps the picker simple)
+    // ============================================================
+    openCreateForm() {
+        this.showCreateForm = true;
+        // Force the @if branch to render now, then focus the input it created.
+        // A microtask alone isn't enough — Angular hasn't run change detection by then,
+        // so the @ViewChild ref is still undefined.
+        this.cdr.detectChanges();
+        this.newNameInputRef?.nativeElement?.focus();
+    }
+    cancelCreate() {
+        this.showCreateForm = false;
+        this.newCollectionName = '';
     }
     async createCollection() {
-        if (!this.newCollectionName.trim()) {
+        const name = this.newCollectionName.trim();
+        if (!name) {
             this.toastService.warning('Please enter a collection name');
             return;
         }
         try {
             this.isCreatingCollection = true;
-            const md = this.ProviderToUse;
-            const collection = await md.GetEntityObject('MJ: Collections', this.currentUser);
-            collection.Name = this.newCollectionName.trim();
+            const p = this.ProviderToUse;
+            const collection = await p.GetEntityObject('MJ: Collections', this.currentUser);
+            collection.Name = name;
             collection.EnvironmentID = this.environmentId;
-            // Set parent and owner based on current navigation context
-            if (this.currentParentCollection) {
-                // Creating sub-collection - inherit parent's owner
-                collection.ParentID = this.currentParentCollection.ID;
-                collection.OwnerID = this.currentParentCollection.OwnerID || this.currentUser.ID;
-            }
-            else {
-                // Creating root collection - current user becomes owner
-                collection.OwnerID = this.currentUser.ID;
-            }
+            collection.OwnerID = this.currentUser.ID;
             const saved = await collection.Save();
-            if (saved) {
-                // Create owner permission or copy parent permissions
-                if (this.currentParentCollection) {
-                    // Copy permissions from parent
-                    await this.permissionService.copyParentPermissions(this.currentParentCollection.ID, collection.ID, this.currentUser);
-                }
-                else {
-                    // Create owner permission
-                    await this.permissionService.createOwnerPermission(collection.ID, this.currentUser.ID, this.currentUser);
-                }
-                this.toastService.success('Collection created successfully');
-                // Reset form
-                this.showCreateForm = false;
-                this.newCollectionName = '';
-                // Reload collections to include the new one
-                await this.loadCollections();
-                // Auto-select the newly created collection
-                this.selectedCollections.push(collection);
-            }
-            else {
-                this.toastService.error(collection.LatestResult?.Message || 'Failed to create collection');
+            if (!saved) {
+                this.toastService.error(collection.LatestResult?.CompleteMessage || 'Failed to create collection');
+                return;
             }
+            // No explicit owner permission row needed — CollectionPermissionProvider treats the
+            // OwnerID as an implicit full-access grant. Writing a self-share row was both redundant
+            // and triggering a server-side auth failure on freshly-created collections.
+            this.toastService.success('Collection created');
+            this.cancelCreate();
+            // Splice the new collection into local state directly. Re-running loadCollections() here
+            // races with the server's cache-invalidation propagation and intermittently returns the
+            // pre-create result; we already own the freshly-saved entity, so just use it.
+            this.allCollections = [...this.allCollections, collection];
+            this.editableCollections = [...this.editableCollections, collection];
+            this.collectionById.set(NormalizeUUID(collection.ID), collection);
+            // Auto-select the new one
+            this.selectedIds.add(NormalizeUUID(collection.ID));
+            this.rebuildVisibleNodes();
         }
         catch (error) {
-            console.error('Error creating collection:', error);
-            this.toastService.error('An error occurred while creating the collection');
+            LogError(error);
+            this.toastService.error('Failed to create collection');
         }
         finally {
             this.isCreatingCollection = false;
             this.cdr.detectChanges();
         }
     }
+    // ============================================================
+    //  Save flow (writes happen here, dialog stays open until done)
+    // ============================================================
     async onSave() {
-        if (this.selectedCollections.length === 0) {
-            this.toastService.warning('Please select at least one collection');
+        if (this.isSaving)
+            return;
+        if (this.selectedIds.size === 0) {
+            this.toastService.warning('Pick at least one collection');
+            return;
+        }
+        if (!this.artifactVersionId) {
+            this.toastService.error('No version selected to save');
             return;
         }
         this.isSaving = true;
-        try {
-            // Emit the selected collection IDs - parent handles actual saving and modal close
-            const collectionIds = this.selectedCollections.map(c => c.ID);
-            this.saved.emit(collectionIds);
+        this.saveResults.clear();
+        // Seed each result as pending so they render in order
+        for (const c of this.selectedCollections) {
+            this.saveResults.set(NormalizeUUID(c.ID), {
+                collectionId: c.ID,
+                collectionName: c.Name,
+                status: 'pending'
+            });
         }
-        finally {
-            this.isSaving = false;
+        this.cdr.detectChanges();
+        for (const c of this.selectedCollections) {
+            await this.saveOne(c);
+        }
+        this.isSaving = false;
+        // Auto-close on full success
+        if (this.failedCount === 0) {
+            this.emitCompleted();
+        }
+        else {
+            this.toastService.warning(`Saved to ${this.successCount} of ${this.saveResults.size} collections`);
+            this.cdr.detectChanges();
+        }
+    }
+    async retryFailed() {
+        if (this.isSaving)
+            return;
+        const toRetry = [];
+        for (const r of this.saveResults.values()) {
+            if (r.status === 'error') {
+                const c = this.collectionById.get(NormalizeUUID(r.collectionId));
+                if (c)
+                    toRetry.push(c);
+            }
+        }
+        if (toRetry.length === 0)
+            return;
+        this.isSaving = true;
+        this.cdr.detectChanges();
+        for (const c of toRetry) {
+            await this.saveOne(c);
+        }
+        this.isSaving = false;
+        if (this.failedCount === 0) {
+            this.emitCompleted();
+        }
+        else {
             this.cdr.detectChanges();
         }
     }
+    async retryOne(collectionId) {
+        if (this.isSaving)
+            return;
+        const c = this.collectionById.get(NormalizeUUID(collectionId));
+        if (!c)
+            return;
+        this.isSaving = true;
+        this.cdr.detectChanges();
+        await this.saveOne(c);
+        this.isSaving = false;
+        if (this.failedCount === 0 && this.successCount === this.saveResults.size) {
+            this.emitCompleted();
+        }
+        else {
+            this.cdr.detectChanges();
+        }
+    }
+    async saveOne(collection) {
+        const key = NormalizeUUID(collection.ID);
+        const r = this.saveResults.get(key);
+        if (!r)
+            return;
+        r.status = 'saving';
+        r.errorMessage = undefined;
+        this.cdr.detectChanges();
+        try {
+            const versionId = this.artifactVersionId;
+            if (!versionId) {
+                r.status = 'error';
+                r.errorMessage = 'No artifact version selected';
+                return;
+            }
+            const p = this.ProviderToUse;
+            // Server-side cache + remote-invalidation make this idempotent in practice,
+            // but we still pre-check to avoid creating duplicate junction rows in races.
+            const rv = RunView.FromMetadataProvider(p);
+            const existing = await rv.RunView({
+                EntityName: 'MJ: Collection Artifacts',
+                ExtraFilter: `CollectionID='${collection.ID}' AND ArtifactVersionID='${versionId}'`,
+                ResultType: 'simple',
+                Fields: ['ID']
+            }, this.currentUser);
+            if (existing.Success && (existing.Results?.length ?? 0) > 0) {
+                r.status = 'success';
+                return;
+            }
+            const junction = await p.GetEntityObject('MJ: Collection Artifacts', this.currentUser);
+            junction.CollectionID = collection.ID;
+            junction.ArtifactVersionID = versionId;
+            junction.Sequence = 0;
+            const ok = await junction.Save();
+            if (ok) {
+                r.status = 'success';
+            }
+            else {
+                r.status = 'error';
+                r.errorMessage = junction.LatestResult?.CompleteMessage || 'Save failed';
+            }
+        }
+        catch (err) {
+            LogError(err);
+            r.status = 'error';
+            r.errorMessage = err instanceof Error ? err.message : 'Unexpected error';
+        }
+    }
+    // ============================================================
+    //  Close paths
+    // ============================================================
     onCancel() {
-        this.cancelled.emit();
+        if (this.isSaving)
+            return; // can't close while writes are in flight
+        // If any saves completed before cancel, treat it as completion so the viewer reloads
+        if (this.successCount > 0) {
+            this.emitCompleted();
+        }
+        else {
+            this.cancelled.emit();
+        }
+    }
+    onAcknowledgeAndClose() {
+        this.emitCompleted();
+    }
+    emitCompleted() {
+        const successIds = [];
+        const failedIds = [];
+        for (const r of this.saveResults.values()) {
+            if (r.status === 'success')
+                successIds.push(r.collectionId);
+            else if (r.status === 'error')
+                failedIds.push(r.collectionId);
+        }
+        this.completed.emit({ successIds, failedIds });
     }
     static ɵfac = function ArtifactCollectionPickerModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ArtifactCollectionPickerModalComponent)(i0.ɵɵdirectiveInject(i1.ToastService), i0.ɵɵdirectiveInject(i2.CollectionPermissionService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactCollectionPickerModalComponent, selectors: [["mj-artifact-collection-picker-modal"]], inputs: { isOpen: "isOpen", environmentId: "environmentId", currentUser: "currentUser", excludeCollectionIds: "excludeCollectionIds" }, outputs: { saved: "saved", cancelled: "cancelled" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["newCollectionInput", ""], ["Title", "Save to Collection", 3, "Visible", "Width", "MinWidth"], ["Title", "Save to Collection", 3, "Close", "Visible", "Width", "MinWidth"], [1, "picker-modal"], [1, "breadcrumb-nav"], [1, "search-bar"], [1, "fas", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search collections...", 1, "k-textbox", "search-input", 3, "ngModelChange", "input", "ngModel", "disabled"], [1, "collections-list"], [1, "loading-state"], [1, "error-state"], [1, "selected-summary"], [1, "create-section"], [1, "divider"], [1, "btn-create-collection"], [1, "create-form"], ["mjButton", "", 3, "click"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "breadcrumb-btn", 3, "click"], [1, "fas", "fa-home"], [1, "fas", "fa-chevron-right", "breadcrumb-separator"], [1, "empty-state"], [1, "fas", "fa-search"], [1, "fas", "fa-folder-open"], [1, "fas", "fa-folder"], [1, "hint"], [1, "collection-item", 3, "already-added"], [1, "collection-item", 3, "click"], [1, "collection-checkbox"], ["type", "checkbox", 3, "click", "checked", "disabled"], [1, "fas", "fa-folder", "collection-icon"], [1, "collection-name"], [1, "already-added-badge"], ["title", "View sub-collections", 1, "drill-down-btn"], [1, "fas", "fa-check-circle"], ["title", "View sub-collections", 1, "drill-down-btn", 3, "click"], [1, "fas", "fa-chevron-right"], ["text", "Loading collections...", "size", "medium"], [1, "fas", "fa-exclamation-triangle"], [1, "btn-create-collection", 3, "click"], [1, "fas", "fa-plus"], ["type", "text", "placeholder", "Enter collection name", 1, "k-textbox", "create-input", 3, "ngModelChange", "keydown.enter", "ngModel"], [1, "create-actions"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [1, "fas", "fa-spinner", "fa-spin"], ["mjButton", "", "size", "sm", 3, "click"], [1, "fas", "fa-save"]], template: function ArtifactCollectionPickerModalComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, ArtifactCollectionPickerModalComponent_Conditional_0_Template, 22, 13, "mj-dialog", 1);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactCollectionPickerModalComponent, selectors: [["mj-artifact-collection-picker-modal"]], viewQuery: function ArtifactCollectionPickerModalComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInputRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.newNameInputRef = _t.first);
+        } }, inputs: { isOpen: "isOpen", environmentId: "environmentId", currentUser: "currentUser", excludeCollectionIds: "excludeCollectionIds", artifactVersionId: "artifactVersionId", artifactName: "artifactName", artifactVersionNumber: "artifactVersionNumber" }, outputs: { completed: "completed", cancelled: "cancelled" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["searchInput", ""], ["newNameInput", ""], ["Title", "Save to Collection", 3, "Visible", "Width", "MinWidth"], ["Title", "Save to Collection", 3, "Close", "Visible", "Width", "MinWidth"], [1, "picker-shell"], [1, "pane", "pane-left"], [1, "toolbar"], [1, "search"], [1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search collections\u2026", 3, "ngModelChange", "ngModel", "disabled"], ["title", "Clear", 1, "search-clear"], [1, "chip-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-user-pen"], [1, "fa-solid", "fa-clock"], [1, "tree-wrap"], [1, "state-block"], [1, "state-block", "error"], [1, "state-block", "muted"], ["role", "tree", 1, "tree"], [1, "pane", "pane-right"], [1, "preview-block"], [1, "block-label"], [1, "preview-card"], [1, "preview-thumb"], [1, "fa-solid", "fa-file-lines"], [1, "preview-meta"], [1, "preview-name", 3, "title"], [1, "badge", "neutral"], [1, "chips-block"], [1, "chips"], [1, "chips-empty"], [1, "footnote"], [1, "fa-solid", "fa-shield-halved"], ["mjButton", "", "variant", "primary"], ["title", "Clear", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-xmark"], ["text", "Loading collections\u2026", "size", "medium"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "link-btn", 3, "click"], [1, "fa-solid", "fa-folder-open"], [1, "hint"], ["role", "treeitem", 1, "row", 3, "selected", "already", "padding-left"], [1, "row", "create-row"], [1, "row", "create-form-row"], ["role", "treeitem", 1, "row", 3, "click"], [1, "caret", 3, "click"], [1, "fa-solid", 3, "fa-chevron-down", "fa-chevron-right"], [1, "check"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-folder", "folder-icon"], [1, "row-title"], [1, "row-ancestry"], [1, "row-tag", "success"], [1, "fa-solid"], [1, "row", "create-row", 3, "click"], [1, "caret"], [1, "check", "dashed"], [1, "fa-solid", "fa-plus"], ["type", "text", "placeholder", "Collection name", 1, "create-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "ngModel", "disabled"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], ["mjButton", "", "size", "sm", 3, "click", "disabled"], [1, "block-count"], [1, "chip", "result", 3, "success", "error", "saving"], [1, "chip", "result"], [1, "chip-status"], [1, "fa-solid", "fa-circle"], [1, "chip-body"], [1, "chip-name"], [1, "chip-error"], ["title", "Retry", 1, "chip-action"], ["title", "Retry", 1, "chip-action", 3, "click"], [1, "fa-solid", "fa-rotate-right"], [1, "chip"], ["title", "Remove", 1, "chip-action", 3, "click", "disabled"], [1, "fa-solid", "fa-hand-pointer"], ["mjButton", "", "variant", "primary", 3, "click"], ["mjButton", "", 3, "click"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", 3, "click", "disabled"], [1, "fa-solid", "fa-bookmark"]], template: function ArtifactCollectionPickerModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ArtifactCollectionPickerModalComponent_Conditional_0_Template, 45, 19, "mj-dialog", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen ? 0 : -1);
         } }, dependencies: [FormsModule, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, MJDialogComponent,
             MJDialogActionsComponent,
             MJButtonDirective,
-            SharedGenericModule, i4.LoadingComponent], styles: [".picker-modal[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 20px 0;\n      min-height: 400px;\n      max-height: 600px;\n    }\n\n    .breadcrumb-nav[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      white-space: nowrap;\n      font-size: 14px;\n    }\n\n    .breadcrumb-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-border-default);\n    }\n\n    .breadcrumb-separator[_ngcontent-%COMP%] {\n      color: var(--mj-text-disabled);\n      font-size: 12px;\n    }\n\n    .search-bar[_ngcontent-%COMP%] {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-icon[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-disabled);\n      pointer-events: none;\n    }\n\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding-left: 36px;\n    }\n\n    .collections-list[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow-y: auto;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      min-height: 250px;\n      max-height: 350px;\n    }\n\n    .collection-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .collection-item[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .collection-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .collection-item.already-added[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      opacity: 0.7;\n      cursor: not-allowed;\n    }\n\n    .collection-item.already-added[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .collection-checkbox[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    .collection-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n    }\n\n    .collection-icon[_ngcontent-%COMP%] {\n      font-size: 18px;\n      flex-shrink: 0;\n    }\n\n    .collection-name[_ngcontent-%COMP%] {\n      flex: 1;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .already-added-badge[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n      border-radius: 12px;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .already-added-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-brand-primary);\n    }\n\n    .drill-down-btn[_ngcontent-%COMP%] {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 4px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .drill-down-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-text-disabled);\n      color: var(--mj-text-secondary);\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      color: var(--mj-text-muted);\n      text-align: center;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.4;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 4px 0;\n      font-size: 14px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    .loading-state[_ngcontent-%COMP%], .error-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      gap: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n    }\n\n    .error-state[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .selected-summary[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n      border-radius: 6px;\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .selected-summary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .create-section[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .divider[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      text-align: center;\n      color: var(--mj-text-disabled);\n      font-size: 12px;\n      font-weight: 500;\n    }\n\n    .divider[_ngcontent-%COMP%]::before, \n   .divider[_ngcontent-%COMP%]::after {\n      content: '';\n      flex: 1;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      padding: 0 12px;\n    }\n\n    .btn-create-collection[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 10px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px dashed var(--mj-border-strong);\n      border-radius: 6px;\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-create-collection[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .btn-create-collection[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n    }\n\n    .create-form[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n    }\n\n    .create-input[_ngcontent-%COMP%] {\n      width: 100%;\n    }\n\n    .create-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    .btn-create[_ngcontent-%COMP%], .btn-cancel[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      font-size: 14px;\n    }"] });
+            SharedGenericModule, i4.LoadingComponent], styles: ["\n\n    .picker-shell[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 300px;\n      min-height: 460px;\n      max-height: 70vh;\n      gap: 0;\n      margin: -8px -4px 0;\n    }\n    .pane[_ngcontent-%COMP%] { display:flex; flex-direction:column; min-height: 0; }\n    .pane-left[_ngcontent-%COMP%]  { border-right: 1px solid var(--mj-border-subtle); }\n    .pane-right[_ngcontent-%COMP%] { background: var(--mj-bg-surface-card); }\n\n    \n\n    .toolbar[_ngcontent-%COMP%] {\n      display:flex; gap: 8px; padding: 10px 12px;\n      border-bottom: 1px solid var(--mj-border-subtle);\n      flex-wrap: wrap;\n    }\n    .search[_ngcontent-%COMP%] {\n      flex: 1; min-width: 200px;\n      display:flex; align-items:center; gap: 8px;\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid transparent;\n      border-radius: 8px;\n      transition: all .15s ease;\n    }\n    .search[_ngcontent-%COMP%]:focus-within {\n      background: var(--mj-bg-surface);\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n    }\n    .search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-text-muted); font-size: 13px; }\n    .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 1; border: 0; outline: 0; background: transparent;\n      font-size: 13.5px; color: var(--mj-text-primary);\n      min-width: 0;\n    }\n    .search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-text-disabled); }\n    .search-clear[_ngcontent-%COMP%] {\n      background: transparent; border: 0; cursor: pointer;\n      color: var(--mj-text-muted); padding: 2px 4px; border-radius: 4px;\n    }\n    .search-clear[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); background: var(--mj-bg-surface-hover); }\n\n    .chip-btn[_ngcontent-%COMP%] {\n      display:inline-flex; align-items:center; gap: 6px;\n      padding: 7px 11px; border-radius: 8px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n      font-size: 12.5px; font-weight: 600; cursor: pointer;\n      transition: all .15s ease;\n    }\n    .chip-btn[_ngcontent-%COMP%]:hover:not(:disabled) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n    .chip-btn.active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .chip-btn[_ngcontent-%COMP%]:disabled { opacity: .55; cursor: not-allowed; }\n\n    \n\n    .tree-wrap[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }\n    .tree[_ngcontent-%COMP%] { display:flex; flex-direction: column; gap: 1px; }\n    .row[_ngcontent-%COMP%] {\n      display:flex; align-items:center; gap: 10px;\n      padding: 7px 12px; border-radius: 8px; cursor: pointer;\n      user-select: none;\n      border: 1px solid transparent;\n      background: transparent;\n      text-align: left;\n      transition: background .12s ease;\n      min-height: 36px;\n    }\n    .row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n    .row.selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 9%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .row.already[_ngcontent-%COMP%] { cursor: default; }\n    .row.already[_ngcontent-%COMP%]:hover { background: transparent; }\n    .row.already[_ngcontent-%COMP%]   .row-title[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n\n    .caret[_ngcontent-%COMP%] {\n      width: 16px; flex-shrink: 0; text-align: center;\n      color: var(--mj-text-muted); font-size: 10px;\n      cursor: pointer;\n    }\n    .caret[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n    .check[_ngcontent-%COMP%] {\n      width: 18px; height: 18px; border-radius: 5px;\n      border: 1.5px solid var(--mj-border-strong);\n      background: var(--mj-bg-surface);\n      display:flex; align-items:center; justify-content:center;\n      color: transparent; font-size: 10px; flex-shrink: 0;\n      transition: all .12s ease;\n    }\n    .check.checked[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: #fff;\n    }\n    .check.locked[_ngcontent-%COMP%] {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n      color: #fff;\n    }\n    .check.dashed[_ngcontent-%COMP%] {\n      border-style: dashed;\n      color: var(--mj-text-muted);\n    }\n\n    .folder-icon[_ngcontent-%COMP%] { font-size: 14px; flex-shrink: 0; }\n\n    .row-title[_ngcontent-%COMP%] {\n      flex: 1; font-size: 13.5px; font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .row-ancestry[_ngcontent-%COMP%] {\n      font-weight: 500; color: var(--mj-text-muted); font-size: 12px;\n      margin-left: 2px;\n    }\n    .row-tag[_ngcontent-%COMP%] {\n      font-size: 11px; font-weight: 600; padding: 2px 8px;\n      border-radius: 999px; flex-shrink: 0;\n    }\n    .row-tag.success[_ngcontent-%COMP%] {\n      background: var(--mj-status-success-bg);\n      color: var(--mj-status-success-text);\n      border: 1px solid color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n    }\n\n    .create-row[_ngcontent-%COMP%] {\n      width: 100%;\n      border: 1.5px dashed var(--mj-border-strong);\n      color: var(--mj-text-secondary);\n      margin-top: 8px;\n      background: transparent;\n    }\n    .create-row[_ngcontent-%COMP%]   .row-title[_ngcontent-%COMP%] { color: var(--mj-text-secondary); font-weight: 600; }\n    .create-row[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n    .create-row[_ngcontent-%COMP%]:hover   .row-title[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n    .create-form-row[_ngcontent-%COMP%] {\n      margin-top: 8px;\n      border: 1.5px solid var(--mj-border-focus);\n      background: var(--mj-bg-surface);\n      cursor: default;\n      gap: 8px;\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n    .create-input[_ngcontent-%COMP%] {\n      flex: 1; min-width: 0;\n      padding: 7px 10px;\n      font-size: 13.5px; color: var(--mj-text-primary);\n      background: var(--mj-bg-surface);\n      border: 1.5px solid var(--mj-border-strong);\n      border-radius: 6px;\n      outline: 0;\n      transition: all .12s ease;\n    }\n    .create-input[_ngcontent-%COMP%]::placeholder {\n      color: var(--mj-text-muted);\n    }\n    .create-input[_ngcontent-%COMP%]:focus {\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    }\n\n    \n\n    .state-block[_ngcontent-%COMP%] {\n      display:flex; flex-direction:column; align-items:center; justify-content:center;\n      padding: 48px 24px; gap: 8px; color: var(--mj-text-muted);\n      text-align: center;\n    }\n    .state-block[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 28px; opacity: .6; }\n    .state-block.error[_ngcontent-%COMP%] { color: var(--mj-status-error-text); }\n    .state-block[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] { font-size: 12.5px; color: var(--mj-text-disabled); margin: 0; }\n    .state-block[_ngcontent-%COMP%]   .link-btn[_ngcontent-%COMP%] {\n      background: transparent; border: 0; color: var(--mj-text-link);\n      font-weight: 600; cursor: pointer; font-size: 13px; padding: 6px 12px;\n    }\n    .state-block[_ngcontent-%COMP%]   .link-btn[_ngcontent-%COMP%]:hover { color: var(--mj-text-link-hover); text-decoration: underline; }\n    .state-block[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13.5px; }\n\n    \n\n    .preview-block[_ngcontent-%COMP%] { padding: 16px 18px; border-bottom: 1px solid var(--mj-border-subtle); }\n    .block-label[_ngcontent-%COMP%] {\n      font-size: 11px; text-transform: uppercase; letter-spacing: .08em;\n      font-weight: 700; color: var(--mj-text-muted); margin-bottom: 8px;\n      display:flex; justify-content:space-between; align-items:center;\n    }\n    .block-count[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary); font-size: 12px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      padding: 2px 8px; border-radius: 999px;\n    }\n    .preview-card[_ngcontent-%COMP%] {\n      display:flex; gap: 12px; align-items:center;\n      background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n      border-radius: 10px; padding: 12px;\n      box-shadow: 0 1px 2px rgba(15,23,42,.04);\n    }\n    .preview-thumb[_ngcontent-%COMP%] {\n      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;\n      background: linear-gradient(135deg, var(--mj-color-accent-400), var(--mj-brand-primary));\n      color: #fff; display:flex; align-items:center; justify-content:center;\n      font-size: 14px;\n    }\n    .preview-meta[_ngcontent-%COMP%] { flex: 1; min-width: 0; display:flex; flex-direction: column; gap: 4px; }\n    .preview-name[_ngcontent-%COMP%] {\n      font-weight: 700; font-size: 13.5px; color: var(--mj-text-primary);\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .badge[_ngcontent-%COMP%] {\n      display:inline-flex; align-items:center; gap: 4px;\n      padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;\n      width: fit-content;\n    }\n    .badge.neutral[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .chips-block[_ngcontent-%COMP%] { flex: 1; min-height: 0; display:flex; flex-direction: column;\n                    padding: 16px 18px 8px; overflow-y: auto; }\n    .chips[_ngcontent-%COMP%] { display:flex; flex-direction: column; gap: 6px; }\n    .chip[_ngcontent-%COMP%] {\n      display:flex; align-items:center; gap: 10px; padding: 8px 10px;\n      background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n    }\n    .chip-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .chip-name[_ngcontent-%COMP%] {\n      font-weight: 600; font-size: 13px; color: var(--mj-text-primary);\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .chip-error[_ngcontent-%COMP%] {\n      font-size: 11.5px; color: var(--mj-status-error-text); margin-top: 2px;\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .chip-action[_ngcontent-%COMP%] {\n      width: 24px; height: 24px; border-radius: 6px;\n      background: transparent; border: 0; cursor: pointer;\n      color: var(--mj-text-muted); font-size: 11px;\n      display:flex; align-items:center; justify-content:center;\n    }\n    .chip-action[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-hover); color: var(--mj-text-primary);\n    }\n    .chip-action[_ngcontent-%COMP%]:disabled { opacity: .4; cursor: not-allowed; }\n    .chip-status[_ngcontent-%COMP%] {\n      width: 20px; flex-shrink: 0; text-align: center; font-size: 12px;\n    }\n    .chip.result.success[_ngcontent-%COMP%] { border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n                            background: var(--mj-status-success-bg); }\n    .chip.result.success[_ngcontent-%COMP%]   .chip-status[_ngcontent-%COMP%] { color: var(--mj-status-success-text); }\n    .chip.result.error[_ngcontent-%COMP%] { border-color: color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n                          background: var(--mj-status-error-bg); }\n    .chip.result.error[_ngcontent-%COMP%]   .chip-status[_ngcontent-%COMP%] { color: var(--mj-status-error-text); }\n    .chip.result.saving[_ngcontent-%COMP%]   .chip-status[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n    .chips-empty[_ngcontent-%COMP%] {\n      flex: 1; display:flex; flex-direction: column; align-items: center; justify-content: center;\n      padding: 32px 16px; text-align: center; color: var(--mj-text-muted);\n      border: 1.5px dashed var(--mj-border-default); border-radius: 10px;\n    }\n    .chips-empty[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 22px; margin-bottom: 8px; opacity: .55; }\n    .chips-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 12.5px; }\n\n    .footnote[_ngcontent-%COMP%] {\n      padding: 12px 18px;\n      font-size: 11.5px; color: var(--mj-text-muted);\n      display:flex; align-items:center; gap: 6px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n    .footnote[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 11px; }\n\n    \n\n    [_nghost-%COMP%]     mj-dialog .k-window-content, \n   [_nghost-%COMP%]     mj-dialog .mj-dialog-content {\n      padding: 0 !important;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactCollectionPickerModalComponent, [{
         type: Component,
@@ -568,156 +1005,255 @@ export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent
         Title="Save to Collection"
         (Close)="onCancel()"
         [Visible]="true"
-        [Width]="700"
-        [MinWidth]="500">
-        <div class="picker-modal">
-          <!-- Breadcrumb Navigation -->
-          @if (navigationPath.length > 0) {
-            <div class="breadcrumb-nav">
-              <button class="breadcrumb-btn" (click)="navigateToRoot()">
-                <i class="fas fa-home"></i> Root
+        [Width]="960"
+        [MinWidth]="720">
+        <div class="picker-shell">
+          <!-- ============================================================ -->
+          <!--  LEFT PANE  · search + tree                                  -->
+          <!-- ============================================================ -->
+          <div class="pane pane-left">
+            <div class="toolbar">
+              <div class="search">
+                <i class="fa-solid fa-magnifying-glass"></i>
+                <input
+                  #searchInput
+                  type="text"
+                  [(ngModel)]="searchQuery"
+                  (ngModelChange)="onSearchChange()"
+                  placeholder="Search collections…"
+                  [disabled]="isLoading || isSaving" />
+                @if (searchQuery) {
+                  <button class="search-clear" (click)="clearSearch()" title="Clear">
+                    <i class="fa-solid fa-xmark"></i>
+                  </button>
+                }
+              </div>
+              <button class="chip-btn"
+                      [class.active]="filterMode === 'editable'"
+                      (click)="setFilter('editable')"
+                      [disabled]="isSaving">
+                <i class="fa-solid fa-user-pen"></i> Editable
+              </button>
+              <button class="chip-btn"
+                      [class.active]="filterMode === 'recent'"
+                      (click)="setFilter('recent')"
+                      [disabled]="isSaving">
+                <i class="fa-solid fa-clock"></i> Recent
               </button>
-              @for (item of navigationPath; track item.collection.ID) {
-                <i class="fas fa-chevron-right breadcrumb-separator"></i>
-                <button class="breadcrumb-btn" (click)="navigateToCollection(item.collection)">
-                  {{ item.collection.Name }}
-                </button>
-              }
             </div>
-          }
-          <!-- Search Bar -->
-          <div class="search-bar">
-            <i class="fas fa-search search-icon"></i>
-            <input
-              type="text"
-              class="k-textbox search-input"
-              [(ngModel)]="searchQuery"
-              (input)="onSearchChange()"
-              placeholder="Search collections..."
-              [disabled]="isLoading">
-          </div>
-          <!-- Collections List -->
-          @if (!isLoading && !errorMessage) {
-            <div class="collections-list">
-              @if (displayedCollections.length === 0) {
-                <div class="empty-state">
+
+            <div class="tree-wrap">
+              @if (isLoading) {
+                <div class="state-block">
+                  <mj-loading text="Loading collections…" size="medium"></mj-loading>
+                </div>
+              } @else if (errorMessage) {
+                <div class="state-block error">
+                  <i class="fa-solid fa-triangle-exclamation"></i>
+                  <span>{{ errorMessage }}</span>
+                </div>
+              } @else if (visibleNodes.length === 0) {
+                <div class="state-block muted">
                   @if (searchQuery) {
-                    <i class="fas fa-search"></i>
-                    <p>No collections found matching "{{ searchQuery }}"</p>
-                  } @else if (currentParentId) {
-                    <i class="fas fa-folder-open"></i>
-                    <p>No sub-collections available</p>
+                    <i class="fa-solid fa-magnifying-glass"></i>
+                    <p>No collections match &ldquo;{{ searchQuery }}&rdquo;</p>
+                    <button class="link-btn" (click)="clearSearch()">Clear search</button>
                   } @else {
-                    <i class="fas fa-folder"></i>
-                    <p>No collections available</p>
-                    <p class="hint">Create a new collection to get started</p>
+                    <i class="fa-solid fa-folder-open"></i>
+                    <p>No editable collections yet</p>
+                    <p class="hint">Create one to get started</p>
                   }
                 </div>
               } @else {
-                @for (node of displayedCollections; track node.collection.ID) {
-                  <div class="collection-item"
-                    [class.already-added]="node.alreadyContainsArtifact"
-                    (click)="toggleSelection(node)">
-                    <div class="collection-checkbox">
-                      <input
-                        type="checkbox"
-                        [checked]="node.selected"
-                        [disabled]="node.alreadyContainsArtifact"
-                        (click)="$event.stopPropagation(); toggleSelection(node)">
-                    </div>
-                    <i class="fas fa-folder collection-icon" [style.color]="node.collection.Color || 'var(--mj-brand-primary)'"></i>
-                    <span class="collection-name">{{ node.collection.Name }}</span>
-                    @if (node.alreadyContainsArtifact) {
-                      <span class="already-added-badge">
-                        <i class="fas fa-check-circle"></i> Already added
+                <div class="tree" role="tree">
+                  @for (node of visibleNodes; track node.collection.ID) {
+                    <div class="row"
+                         role="treeitem"
+                         [class.selected]="isSelected(node.collection.ID)"
+                         [class.already]="node.alreadyContainsArtifact"
+                         [style.padding-left.px]="searchQuery ? 12 : 12 + node.depth * 18"
+                         (click)="onRowClick(node)">
+                      <span class="caret" (click)="$event.stopPropagation(); toggleExpand(node)">
+                        @if (node.hasChildren && !searchQuery) {
+                          <i class="fa-solid" [class.fa-chevron-down]="node.expanded" [class.fa-chevron-right]="!node.expanded"></i>
+                        }
+                      </span>
+                      <span class="check"
+                            [class.checked]="isSelected(node.collection.ID)"
+                            [class.locked]="node.alreadyContainsArtifact"
+                            [attr.aria-label]="node.alreadyContainsArtifact ? 'Already saved' : 'Toggle selection'">
+                        @if (isSelected(node.collection.ID) || node.alreadyContainsArtifact) {
+                          <i class="fa-solid fa-check"></i>
+                        }
+                      </span>
+                      <i class="fa-solid fa-folder folder-icon"
+                         [style.color]="node.collection.Color || 'var(--mj-brand-primary)'"></i>
+                      <span class="row-title">
+                        {{ node.collection.Name }}
+                        @if (searchQuery && node.ancestry) {
+                          <span class="row-ancestry">· {{ node.ancestry }}</span>
+                        }
                       </span>
-                    }
-                    @if (node.hasChildren) {
-                      <button
-                        class="drill-down-btn"
-                        (click)="$event.stopPropagation(); drillIntoCollection(node.collection)"
-                        title="View sub-collections">
-                        <i class="fas fa-chevron-right"></i>
+                      @if (node.alreadyContainsArtifact) {
+                        <span class="row-tag success">Already saved</span>
+                      }
+                    </div>
+                  }
+
+                  <!-- Inline "create new" row -->
+                  @if (!isSaving && !searchQuery && !showCreateForm) {
+                    <button class="row create-row" (click)="openCreateForm()">
+                      <span class="caret"></span>
+                      <span class="check dashed"><i class="fa-solid fa-plus"></i></span>
+                      <span class="row-title">Create new collection…</span>
+                    </button>
+                  } @else if (showCreateForm) {
+                    <div class="row create-form-row">
+                      <span class="caret"></span>
+                      <span class="check dashed"><i class="fa-solid fa-plus"></i></span>
+                      <input #newNameInput type="text"
+                             class="create-input"
+                             [(ngModel)]="newCollectionName"
+                             (keydown.enter)="createCollection()"
+                             (keydown.escape)="cancelCreate()"
+                             placeholder="Collection name"
+                             [disabled]="isCreatingCollection" />
+                      <button mjButton variant="primary" size="sm"
+                              (click)="createCollection()"
+                              [disabled]="isCreatingCollection || !newCollectionName.trim()">
+                        @if (isCreatingCollection) {
+                          <i class="fa-solid fa-spinner fa-spin"></i>
+                        } @else {
+                          Create
+                        }
                       </button>
-                    }
-                  </div>
-                }
+                      <button mjButton size="sm" (click)="cancelCreate()" [disabled]="isCreatingCollection">
+                        Cancel
+                      </button>
+                    </div>
+                  }
+                </div>
               }
             </div>
-          }
-          <!-- Loading State -->
-          @if (isLoading) {
-            <div class="loading-state">
-              <mj-loading text="Loading collections..." size="medium"></mj-loading>
-            </div>
-          }
-          <!-- Error State -->
-          @if (errorMessage) {
-            <div class="error-state">
-              <i class="fas fa-exclamation-triangle"></i>
-              <span>{{ errorMessage }}</span>
+          </div>
+
+          <!-- ============================================================ -->
+          <!--  RIGHT PANE  · preview + chips / results                     -->
+          <!-- ============================================================ -->
+          <div class="pane pane-right">
+            <div class="preview-block">
+              <div class="block-label">Saving</div>
+              <div class="preview-card">
+                <div class="preview-thumb"><i class="fa-solid fa-file-lines"></i></div>
+                <div class="preview-meta">
+                  <div class="preview-name" [title]="artifactName">{{ artifactName || 'Artifact' }}</div>
+                  @if (artifactVersionNumber != null) {
+                    <span class="badge neutral">v{{ artifactVersionNumber }}</span>
+                  }
+                </div>
+              </div>
             </div>
-          }
-          <!-- Selected Collections Summary -->
-          @if (selectedCollections.length > 0) {
-            <div class="selected-summary">
-              <i class="fas fa-check-circle"></i>
-              <span>{{ selectedCollections.length }} collection(s) selected</span>
+
+            <div class="chips-block">
+              <div class="block-label">
+                @if (saveResults.size > 0) {
+                  <span>Results</span>
+                  <span class="block-count">{{ successCount }} / {{ saveResults.size }}</span>
+                } @else {
+                  <span>Selected</span>
+                  <span class="block-count">{{ selectedIds.size }}</span>
+                }
+              </div>
+
+              @if (saveResults.size > 0) {
+                <!-- Per-collection results -->
+                <div class="chips">
+                  @for (r of resultsList; track r.collectionId) {
+                    <div class="chip result" [class.success]="r.status === 'success'"
+                                              [class.error]="r.status === 'error'"
+                                              [class.saving]="r.status === 'saving'">
+                      <span class="chip-status">
+                        @switch (r.status) {
+                          @case ('saving') { <i class="fa-solid fa-spinner fa-spin"></i> }
+                          @case ('success') { <i class="fa-solid fa-check"></i> }
+                          @case ('error') { <i class="fa-solid fa-triangle-exclamation"></i> }
+                          @default { <i class="fa-solid fa-circle"></i> }
+                        }
+                      </span>
+                      <div class="chip-body">
+                        <div class="chip-name">{{ r.collectionName }}</div>
+                        @if (r.status === 'error' && r.errorMessage) {
+                          <div class="chip-error">{{ r.errorMessage }}</div>
+                        }
+                      </div>
+                      @if (r.status === 'error') {
+                        <button class="chip-action" (click)="retryOne(r.collectionId)" title="Retry">
+                          <i class="fa-solid fa-rotate-right"></i>
+                        </button>
+                      }
+                    </div>
+                  }
+                </div>
+              } @else if (selectedIds.size > 0) {
+                <div class="chips">
+                  @for (c of selectedCollections; track c.ID) {
+                    <div class="chip">
+                      <i class="fa-solid fa-folder folder-icon" [style.color]="c.Color || 'var(--mj-brand-primary)'"></i>
+                      <div class="chip-body">
+                        <div class="chip-name">{{ c.Name }}</div>
+                      </div>
+                      <button class="chip-action" (click)="deselect(c.ID)"
+                              [disabled]="isSaving"
+                              title="Remove">
+                        <i class="fa-solid fa-xmark"></i>
+                      </button>
+                    </div>
+                  }
+                </div>
+              } @else {
+                <div class="chips-empty">
+                  <i class="fa-solid fa-hand-pointer"></i>
+                  <p>Pick a collection on the left</p>
+                </div>
+              }
             </div>
-          }
-          <!-- Create New Collection Section -->
-          <div class="create-section">
-            <div class="divider">
-              <span>OR CREATE NEW</span>
+
+            <div class="footnote">
+              <i class="fa-solid fa-shield-halved"></i>
+              Only collections you can edit are shown
             </div>
-            @if (!showCreateForm) {
-              <button class="btn-create-collection" (click)="showCreateForm = true">
-                <i class="fas fa-plus"></i>
-                Create New Collection
-              </button>
-            } @else {
-              <div class="create-form">
-                <input
-                  type="text"
-                  class="k-textbox create-input"
-                  [(ngModel)]="newCollectionName"
-                  placeholder="Enter collection name"
-                  (keydown.enter)="createCollection()"
-                  #newCollectionInput>
-                <div class="create-actions">
-                  <button mjButton variant="primary" size="sm" (click)="createCollection()" [disabled]="isCreatingCollection || !newCollectionName.trim()">
-                    @if (isCreatingCollection) {
-                      <i class="fas fa-spinner fa-spin"></i>
-                    } @else {
-                      Create
-                    }
-                  </button>
-                  <button mjButton size="sm" (click)="showCreateForm = false; newCollectionName = ''">
-                    Cancel
-                  </button>
-                </div>
-              </div>
-            }
           </div>
         </div>
+
         <mj-dialog-actions>
-          <button mjButton (click)="onCancel()">
-            Cancel
-          </button>
-          <button mjButton
-            variant="primary"
-            (click)="onSave()"
-            [disabled]="selectedCollections.length === 0 || isSaving">
-            @if (isSaving) {
-              <i class="fas fa-spinner fa-spin"></i> Saving...
-            } @else {
-              <i class="fas fa-save"></i> Save to {{ selectedCollections.length }} Collection(s)
-            }
-          </button>
+          <!-- Primary on the LEFT per MJ convention -->
+          @if (failedCount > 0 && !isSaving) {
+            <button mjButton variant="primary" (click)="retryFailed()">
+              <i class="fa-solid fa-rotate-right"></i> Retry {{ failedCount }} failed
+            </button>
+            <button mjButton (click)="onAcknowledgeAndClose()">Done</button>
+          } @else if (saveResults.size > 0 && successCount === saveResults.size && !isSaving) {
+            <!-- All succeeded — auto-closes, but render fallback button just in case -->
+            <button mjButton variant="primary" (click)="onAcknowledgeAndClose()">
+              <i class="fa-solid fa-check"></i> Done
+            </button>
+          } @else {
+            <button mjButton variant="primary"
+                    (click)="onSave()"
+                    [disabled]="selectedIds.size === 0 || isSaving">
+              @if (isSaving) {
+                <i class="fa-solid fa-spinner fa-spin"></i> Saving to {{ selectedIds.size }}…
+              } @else {
+                <i class="fa-solid fa-bookmark"></i>
+                Save to {{ selectedIds.size }} {{ selectedIds.size === 1 ? 'collection' : 'collections' }}
+              }
+            </button>
+            <button mjButton (click)="onCancel()" [disabled]="isSaving">Cancel</button>
+          }
         </mj-dialog-actions>
       </mj-dialog>
     }
-    `, styles: ["\n    .picker-modal {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n      padding: 20px 0;\n      min-height: 400px;\n      max-height: 600px;\n    }\n\n    .breadcrumb-nav {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-btn {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      white-space: nowrap;\n      font-size: 14px;\n    }\n\n    .breadcrumb-btn:hover {\n      background: var(--mj-border-default);\n    }\n\n    .breadcrumb-separator {\n      color: var(--mj-text-disabled);\n      font-size: 12px;\n    }\n\n    .search-bar {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-icon {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-disabled);\n      pointer-events: none;\n    }\n\n    .search-input {\n      width: 100%;\n      padding-left: 36px;\n    }\n\n    .collections-list {\n      flex: 1;\n      overflow-y: auto;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      min-height: 250px;\n      max-height: 350px;\n    }\n\n    .collection-item {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .collection-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .collection-item:last-child {\n      border-bottom: none;\n    }\n\n    .collection-item.already-added {\n      background: var(--mj-bg-surface-sunken);\n      opacity: 0.7;\n      cursor: not-allowed;\n    }\n\n    .collection-item.already-added:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .collection-checkbox {\n      display: flex;\n      align-items: center;\n    }\n\n    .collection-checkbox input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n    }\n\n    .collection-icon {\n      font-size: 18px;\n      flex-shrink: 0;\n    }\n\n    .collection-name {\n      flex: 1;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .already-added-badge {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 8px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n      border-radius: 12px;\n      color: var(--mj-brand-primary);\n      font-size: 12px;\n      font-weight: 500;\n      white-space: nowrap;\n    }\n\n    .already-added-badge i {\n      font-size: 12px;\n      color: var(--mj-brand-primary);\n    }\n\n    .drill-down-btn {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 4px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .drill-down-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-text-disabled);\n      color: var(--mj-text-secondary);\n    }\n\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      color: var(--mj-text-muted);\n      text-align: center;\n    }\n\n    .empty-state i {\n      font-size: 48px;\n      margin-bottom: 16px;\n      opacity: 0.4;\n    }\n\n    .empty-state p {\n      margin: 4px 0;\n      font-size: 14px;\n    }\n\n    .empty-state .hint {\n      font-size: 13px;\n      color: var(--mj-text-disabled);\n    }\n\n    .loading-state, .error-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 48px 24px;\n      gap: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .error-state i {\n      font-size: 32px;\n    }\n\n    .error-state {\n      color: var(--mj-status-error);\n    }\n\n    .selected-summary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n      border-radius: 6px;\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n      font-weight: 500;\n    }\n\n    .selected-summary i {\n      color: var(--mj-brand-primary);\n    }\n\n    .create-section {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    .divider {\n      display: flex;\n      align-items: center;\n      text-align: center;\n      color: var(--mj-text-disabled);\n      font-size: 12px;\n      font-weight: 500;\n    }\n\n    .divider::before,\n    .divider::after {\n      content: '';\n      flex: 1;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .divider span {\n      padding: 0 12px;\n    }\n\n    .btn-create-collection {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 10px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 2px dashed var(--mj-border-strong);\n      border-radius: 6px;\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .btn-create-collection:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .btn-create-collection i {\n      font-size: 16px;\n    }\n\n    .create-form {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n    }\n\n    .create-input {\n      width: 100%;\n    }\n\n    .create-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    }\n\n    .btn-create, .btn-cancel {\n      padding: 8px 16px;\n      font-size: 14px;\n    }\n  "] }]
+  `, styles: ["\n    /* ===== Shell ===== */\n    .picker-shell {\n      display: grid;\n      grid-template-columns: 1fr 300px;\n      min-height: 460px;\n      max-height: 70vh;\n      gap: 0;\n      margin: -8px -4px 0;\n    }\n    .pane { display:flex; flex-direction:column; min-height: 0; }\n    .pane-left  { border-right: 1px solid var(--mj-border-subtle); }\n    .pane-right { background: var(--mj-bg-surface-card); }\n\n    /* ===== Toolbar / search / chip filters ===== */\n    .toolbar {\n      display:flex; gap: 8px; padding: 10px 12px;\n      border-bottom: 1px solid var(--mj-border-subtle);\n      flex-wrap: wrap;\n    }\n    .search {\n      flex: 1; min-width: 200px;\n      display:flex; align-items:center; gap: 8px;\n      padding: 8px 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid transparent;\n      border-radius: 8px;\n      transition: all .15s ease;\n    }\n    .search:focus-within {\n      background: var(--mj-bg-surface);\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 18%, transparent);\n    }\n    .search i { color: var(--mj-text-muted); font-size: 13px; }\n    .search input {\n      flex: 1; border: 0; outline: 0; background: transparent;\n      font-size: 13.5px; color: var(--mj-text-primary);\n      min-width: 0;\n    }\n    .search input::placeholder { color: var(--mj-text-disabled); }\n    .search-clear {\n      background: transparent; border: 0; cursor: pointer;\n      color: var(--mj-text-muted); padding: 2px 4px; border-radius: 4px;\n    }\n    .search-clear:hover { color: var(--mj-text-primary); background: var(--mj-bg-surface-hover); }\n\n    .chip-btn {\n      display:inline-flex; align-items:center; gap: 6px;\n      padding: 7px 11px; border-radius: 8px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      color: var(--mj-text-secondary);\n      font-size: 12.5px; font-weight: 600; cursor: pointer;\n      transition: all .15s ease;\n    }\n    .chip-btn:hover:not(:disabled) { background: var(--mj-bg-surface-hover); color: var(--mj-text-primary); }\n    .chip-btn.active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .chip-btn:disabled { opacity: .55; cursor: not-allowed; }\n\n    /* ===== Tree ===== */\n    .tree-wrap { flex: 1; overflow-y: auto; padding: 8px 8px 16px; }\n    .tree { display:flex; flex-direction: column; gap: 1px; }\n    .row {\n      display:flex; align-items:center; gap: 10px;\n      padding: 7px 12px; border-radius: 8px; cursor: pointer;\n      user-select: none;\n      border: 1px solid transparent;\n      background: transparent;\n      text-align: left;\n      transition: background .12s ease;\n      min-height: 36px;\n    }\n    .row:hover { background: var(--mj-bg-surface-hover); }\n    .row.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 9%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n    .row.already { cursor: default; }\n    .row.already:hover { background: transparent; }\n    .row.already .row-title { color: var(--mj-text-secondary); }\n\n    .caret {\n      width: 16px; flex-shrink: 0; text-align: center;\n      color: var(--mj-text-muted); font-size: 10px;\n      cursor: pointer;\n    }\n    .caret:hover { color: var(--mj-text-primary); }\n\n    .check {\n      width: 18px; height: 18px; border-radius: 5px;\n      border: 1.5px solid var(--mj-border-strong);\n      background: var(--mj-bg-surface);\n      display:flex; align-items:center; justify-content:center;\n      color: transparent; font-size: 10px; flex-shrink: 0;\n      transition: all .12s ease;\n    }\n    .check.checked {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: #fff;\n    }\n    .check.locked {\n      background: var(--mj-status-success);\n      border-color: var(--mj-status-success);\n      color: #fff;\n    }\n    .check.dashed {\n      border-style: dashed;\n      color: var(--mj-text-muted);\n    }\n\n    .folder-icon { font-size: 14px; flex-shrink: 0; }\n\n    .row-title {\n      flex: 1; font-size: 13.5px; font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .row-ancestry {\n      font-weight: 500; color: var(--mj-text-muted); font-size: 12px;\n      margin-left: 2px;\n    }\n    .row-tag {\n      font-size: 11px; font-weight: 600; padding: 2px 8px;\n      border-radius: 999px; flex-shrink: 0;\n    }\n    .row-tag.success {\n      background: var(--mj-status-success-bg);\n      color: var(--mj-status-success-text);\n      border: 1px solid color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n    }\n\n    .create-row {\n      width: 100%;\n      border: 1.5px dashed var(--mj-border-strong);\n      color: var(--mj-text-secondary);\n      margin-top: 8px;\n      background: transparent;\n    }\n    .create-row .row-title { color: var(--mj-text-secondary); font-weight: 600; }\n    .create-row:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n    .create-row:hover .row-title { color: var(--mj-brand-primary); }\n\n    .create-form-row {\n      margin-top: 8px;\n      border: 1.5px solid var(--mj-border-focus);\n      background: var(--mj-bg-surface);\n      cursor: default;\n      gap: 8px;\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    }\n    .create-input {\n      flex: 1; min-width: 0;\n      padding: 7px 10px;\n      font-size: 13.5px; color: var(--mj-text-primary);\n      background: var(--mj-bg-surface);\n      border: 1.5px solid var(--mj-border-strong);\n      border-radius: 6px;\n      outline: 0;\n      transition: all .12s ease;\n    }\n    .create-input::placeholder {\n      color: var(--mj-text-muted);\n    }\n    .create-input:focus {\n      border-color: var(--mj-border-focus);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    }\n\n    /* ===== State blocks ===== */\n    .state-block {\n      display:flex; flex-direction:column; align-items:center; justify-content:center;\n      padding: 48px 24px; gap: 8px; color: var(--mj-text-muted);\n      text-align: center;\n    }\n    .state-block i { font-size: 28px; opacity: .6; }\n    .state-block.error { color: var(--mj-status-error-text); }\n    .state-block .hint { font-size: 12.5px; color: var(--mj-text-disabled); margin: 0; }\n    .state-block .link-btn {\n      background: transparent; border: 0; color: var(--mj-text-link);\n      font-weight: 600; cursor: pointer; font-size: 13px; padding: 6px 12px;\n    }\n    .state-block .link-btn:hover { color: var(--mj-text-link-hover); text-decoration: underline; }\n    .state-block p { margin: 0; font-size: 13.5px; }\n\n    /* ===== Right pane ===== */\n    .preview-block { padding: 16px 18px; border-bottom: 1px solid var(--mj-border-subtle); }\n    .block-label {\n      font-size: 11px; text-transform: uppercase; letter-spacing: .08em;\n      font-weight: 700; color: var(--mj-text-muted); margin-bottom: 8px;\n      display:flex; justify-content:space-between; align-items:center;\n    }\n    .block-count {\n      color: var(--mj-brand-primary); font-size: 12px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      padding: 2px 8px; border-radius: 999px;\n    }\n    .preview-card {\n      display:flex; gap: 12px; align-items:center;\n      background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n      border-radius: 10px; padding: 12px;\n      box-shadow: 0 1px 2px rgba(15,23,42,.04);\n    }\n    .preview-thumb {\n      width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;\n      background: linear-gradient(135deg, var(--mj-color-accent-400), var(--mj-brand-primary));\n      color: #fff; display:flex; align-items:center; justify-content:center;\n      font-size: 14px;\n    }\n    .preview-meta { flex: 1; min-width: 0; display:flex; flex-direction: column; gap: 4px; }\n    .preview-name {\n      font-weight: 700; font-size: 13.5px; color: var(--mj-text-primary);\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .badge {\n      display:inline-flex; align-items:center; gap: 4px;\n      padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;\n      width: fit-content;\n    }\n    .badge.neutral {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-secondary);\n      border: 1px solid var(--mj-border-default);\n    }\n\n    .chips-block { flex: 1; min-height: 0; display:flex; flex-direction: column;\n                    padding: 16px 18px 8px; overflow-y: auto; }\n    .chips { display:flex; flex-direction: column; gap: 6px; }\n    .chip {\n      display:flex; align-items:center; gap: 10px; padding: 8px 10px;\n      background: var(--mj-bg-surface); border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n    }\n    .chip-body { flex: 1; min-width: 0; }\n    .chip-name {\n      font-weight: 600; font-size: 13px; color: var(--mj-text-primary);\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .chip-error {\n      font-size: 11.5px; color: var(--mj-status-error-text); margin-top: 2px;\n      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n    }\n    .chip-action {\n      width: 24px; height: 24px; border-radius: 6px;\n      background: transparent; border: 0; cursor: pointer;\n      color: var(--mj-text-muted); font-size: 11px;\n      display:flex; align-items:center; justify-content:center;\n    }\n    .chip-action:hover:not(:disabled) {\n      background: var(--mj-bg-surface-hover); color: var(--mj-text-primary);\n    }\n    .chip-action:disabled { opacity: .4; cursor: not-allowed; }\n    .chip-status {\n      width: 20px; flex-shrink: 0; text-align: center; font-size: 12px;\n    }\n    .chip.result.success { border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n                            background: var(--mj-status-success-bg); }\n    .chip.result.success .chip-status { color: var(--mj-status-success-text); }\n    .chip.result.error { border-color: color-mix(in srgb, var(--mj-status-error) 35%, transparent);\n                          background: var(--mj-status-error-bg); }\n    .chip.result.error .chip-status { color: var(--mj-status-error-text); }\n    .chip.result.saving .chip-status { color: var(--mj-brand-primary); }\n\n    .chips-empty {\n      flex: 1; display:flex; flex-direction: column; align-items: center; justify-content: center;\n      padding: 32px 16px; text-align: center; color: var(--mj-text-muted);\n      border: 1.5px dashed var(--mj-border-default); border-radius: 10px;\n    }\n    .chips-empty i { font-size: 22px; margin-bottom: 8px; opacity: .55; }\n    .chips-empty p { margin: 0; font-size: 12.5px; }\n\n    .footnote {\n      padding: 12px 18px;\n      font-size: 11.5px; color: var(--mj-text-muted);\n      display:flex; align-items:center; gap: 6px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n    .footnote i { font-size: 11px; }\n\n    /* Tighten dialog content padding so panes meet edges cleanly */\n    :host ::ng-deep mj-dialog .k-window-content,\n    :host ::ng-deep mj-dialog .mj-dialog-content {\n      padding: 0 !important;\n    }\n  "] }]
     }], () => [{ type: i1.ToastService }, { type: i2.CollectionPermissionService }, { type: i0.ChangeDetectorRef }], { isOpen: [{
             type: Input
         }], environmentId: [{
@@ -726,10 +1262,22 @@ export class ArtifactCollectionPickerModalComponent extends BaseAngularComponent
             type: Input
         }], excludeCollectionIds: [{
             type: Input
-        }], saved: [{
+        }], artifactVersionId: [{
+            type: Input
+        }], artifactName: [{
+            type: Input
+        }], artifactVersionNumber: [{
+            type: Input
+        }], completed: [{
             type: Output
         }], cancelled: [{
             type: Output
+        }], searchInputRef: [{
+            type: ViewChild,
+            args: ['searchInput']
+        }], newNameInputRef: [{
+            type: ViewChild,
+            args: ['newNameInput']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactCollectionPickerModalComponent, { className: "ArtifactCollectionPickerModalComponent", filePath: "src/lib/components/collection/artifact-collection-picker-modal.component.ts", lineNumber: 489 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ArtifactCollectionPickerModalComponent, { className: "ArtifactCollectionPickerModalComponent", filePath: "src/lib/components/collection/artifact-collection-picker-modal.component.ts", lineNumber: 604 }); })();
 //# sourceMappingURL=artifact-collection-picker-modal.component.js.map