@memberjunction/ng-artifacts 2.107.0 → 2.108.0

package/dist/lib/components/artifact-viewer-panel.component.js

@@ -6,12 +6,13 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ArtifactTypePluginViewerComponent } from './artifact-type-plugin-viewer.component';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "ngx-markdown";
-import * as i4 from "@memberjunction/ng-code-editor";
-import * as i5 from "./artifact-type-plugin-viewer.component";
+import * as i1 from "@angular/forms";
+import * as i2 from "ngx-markdown";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "./artifact-type-plugin-viewer.component";
+import * as i5 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.ID;
+const _forTrack1 = ($index, $item) => $item.id;
 function ArtifactViewerPanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 4);
     i0.ɵɵtext(1);
@@ -22,26 +23,26 @@ function ArtifactViewerPanelComponent_Conditional_6_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(ctx_r0.displayDescription);
 } }
 function ArtifactViewerPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 19);
+    i0.ɵɵelement(0, "i", 18);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵclassProp("open", ctx_r0.showVersionDropdown);
 } }
 function ArtifactViewerPanelComponent_Conditional_13_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 25);
+    i0.ɵɵelement(0, "i", 24);
 } }
 function ArtifactViewerPanelComponent_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵelementStart(0, "div", 21);
     i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_13_For_2_Template_div_click_0_listener($event) { const version_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); ctx_r0.selectVersion(version_r4); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "span", 23);
+    i0.ɵɵelementStart(1, "span", 22);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 24);
+    i0.ɵɵelementStart(3, "span", 23);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_13_For_2_Conditional_6_Template, 1, 0, "i", 25);
+    i0.ɵɵtemplate(6, ArtifactViewerPanelComponent_Conditional_13_For_2_Conditional_6_Template, 1, 0, "i", 24);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const version_r4 = ctx.$implicit;
@@ -56,9 +57,9 @@ function ArtifactViewerPanelComponent_Conditional_13_For_2_Template(rf, ctx) { i
 } }
 function ArtifactViewerPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵelementStart(0, "div", 19);
     i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_13_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r2); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_13_For_2_Template, 7, 8, "div", 21, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_13_For_2_Template, 7, 8, "div", 20, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -67,27 +68,21 @@ function ArtifactViewerPanelComponent_Conditional_13_Template(rf, ctx) { if (rf
 } }
 function ArtifactViewerPanelComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵelementStart(0, "button", 25);
     i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSaveToLibrary()); });
-    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelement(1, "i", 26);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("in-collection", ctx_r0.isInCollection);
-    i0.ɵɵproperty("title", ctx_r0.isInCollection ? "View in Collection" : "Save to Collection");
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r0.isInCollection ? "fas fa-bookmark" : "far fa-bookmark");
 } }
 function ArtifactViewerPanelComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelement(1, "i", 28);
+    i0.ɵɵelement(1, "i", 27);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Loading artifact...");
     i0.ɵɵelementEnd()();
 } }
 function ArtifactViewerPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -98,7 +93,7 @@ function ArtifactViewerPanelComponent_Conditional_19_Template(rf, ctx) { if (rf
 } }
 function ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵelementStart(0, "button", 31);
     i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setActiveTab("display")); });
     i0.ɵɵelement(1, "i", 38);
     i0.ɵɵtext(2, " Display ");
@@ -109,7 +104,7 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template(rf,
 } }
 function ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵelementStart(0, "button", 31);
     i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setActiveTab("json")); });
     i0.ɵɵelement(1, "i", 39);
     i0.ɵɵtext(2, " JSON ");
@@ -118,58 +113,74 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template(rf,
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("active", ctx_r0.activeTab === "json");
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-artifact-type-plugin-viewer", 40);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setActiveTab("links")); });
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2, " Links ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "links");
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-artifact-type-plugin-viewer", 41);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("artifactVersion", ctx_r0.artifactVersion)("artifactTypeName", ctx_r0.artifactTypeName)("contentType", ctx_r0.contentType)("readonly", true);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 44);
-    i0.ɵɵelement(1, "markdown", 46);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47);
+    i0.ɵɵelement(1, "markdown", 49);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵproperty("data", ctx_r0.displayMarkdown);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 45);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 48);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("innerHTML", ctx_r0.displayHtml, i0.ɵɵsanitizeHtml);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "button", 42);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r9); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onCopyDisplayContent()); });
-    i0.ɵɵelement(2, "i", 43);
-    i0.ɵɵtext(3, " Copy ");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 42)(1, "button", 43);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onPrintDisplayContent()); });
+    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵtext(3, " Print ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 45);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onCopyDisplayContent()); });
+    i0.ɵɵelement(5, "i", 46);
+    i0.ɵɵtext(6, " Copy ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_4_Template, 2, 1, "div", 44)(5, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Conditional_5_Template, 1, 1, "div", 45);
+    i0.ɵɵtemplate(7, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Conditional_7_Template, 2, 1, "div", 47)(8, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Conditional_8_Template, 1, 1, "div", 48);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r0.displayMarkdown ? 4 : ctx_r0.displayHtml ? 5 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵconditional(ctx_r0.displayMarkdown ? 7 : ctx_r0.displayHtml ? 8 : -1);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 35);
-    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_1_Template, 1, 4, "mj-artifact-type-plugin-viewer", 40)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_2_Template, 6, 1);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_1_Template, 1, 4, "mj-artifact-type-plugin-viewer", 41)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Conditional_2_Template, 9, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.hasPlugin && ctx_r0.artifactVersion && ctx_r0.artifactTypeName ? 1 : ctx_r0.displayMarkdown || ctx_r0.displayHtml ? 2 : -1);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 47)(2, "button", 48);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCopyToClipboard()); });
-    i0.ɵɵelement(3, "i", 43);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "div", 50)(2, "button", 51);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCopyToClipboard()); });
+    i0.ɵɵelement(3, "i", 46);
     i0.ɵɵtext(4, " Copy ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 49)(6, "mj-code-editor", 50);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template_mj_code_editor_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.jsonContent, $event) || (ctx_r0.jsonContent = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(5, "div", 52)(6, "mj-code-editor", 53);
+    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template_mj_code_editor_ngModelChange_6_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r0 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r0.jsonContent, $event) || (ctx_r0.jsonContent = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -177,8 +188,8 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template(rf,
     i0.ɵɵtwoWayProperty("ngModel", ctx_r0.jsonContent);
     i0.ɵɵproperty("language", "json")("readonly", true);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53)(1, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56)(1, "label");
     i0.ɵɵtext(2, "Artifact Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -189,8 +200,8 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.artifact.Description);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53)(1, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56)(1, "label");
     i0.ɵɵtext(2, "Version Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -201,75 +212,75 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const attr_r11 = i0.ɵɵnextContext().$implicit;
+    const attr_r12 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(attr_r11.Value);
+    i0.ɵɵtextInterpolate(attr_r12.Value);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 57);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
     i0.ɵɵtext(1, "Empty");
     i0.ɵɵelementEnd();
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56)(1, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 59)(1, "label");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_3_Template, 2, 1, "span")(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Conditional_4_Template, 2, 0, "span", 57);
+    i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_For_5_Conditional_3_Template, 2, 1, "span")(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_For_5_Conditional_4_Template, 2, 0, "span", 60);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const attr_r11 = ctx.$implicit;
+    const attr_r12 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(attr_r11.Name);
+    i0.ɵɵtextInterpolate(attr_r12.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(attr_r11.Value ? 3 : 4);
+    i0.ɵɵconditional(attr_r12.Value ? 3 : 4);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54)(1, "h4");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57)(1, "h4");
     i0.ɵɵtext(2, "Version Attributes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 55);
-    i0.ɵɵrepeaterCreate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_For_5_Template, 5, 2, "div", 56, _forTrack0);
+    i0.ɵɵelementStart(3, "div", 58);
+    i0.ɵɵrepeaterCreate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_For_5_Template, 5, 2, "div", 59, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r0.filteredAttributes);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 51)(2, "div", 52)(3, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 54)(2, "div", 55)(3, "label");
     i0.ɵɵtext(4, "Type");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 52)(8, "label");
+    i0.ɵɵelementStart(7, "div", 55)(8, "label");
     i0.ɵɵtext(9, "Version");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 52)(13, "label");
+    i0.ɵɵelementStart(12, "div", 55)(13, "label");
     i0.ɵɵtext(14, "Created");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16);
     i0.ɵɵpipe(17, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 52)(19, "label");
+    i0.ɵɵelementStart(18, "div", 55)(19, "label");
     i0.ɵɵtext(20, "Updated");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(21, "span");
     i0.ɵɵtext(22);
     i0.ɵɵpipe(23, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(24, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_24_Template, 5, 1, "div", 53)(25, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_25_Template, 5, 1, "div", 53);
+    i0.ɵɵtemplate(24, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_24_Template, 5, 1, "div", 56)(25, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_25_Template, 5, 1, "div", 56);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(26, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Conditional_26_Template, 6, 0, "div", 54);
+    i0.ɵɵtemplate(26, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Conditional_26_Template, 6, 0, "div", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -288,122 +299,95 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.filteredAttributes.length > 0 ? 26 : -1);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "div", 30);
-    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template, 3, 2, "button", 31)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template, 3, 2, "button", 31);
-    i0.ɵɵelementStart(4, "button", 32);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("details")); });
-    i0.ɵɵelement(5, "i", 33);
-    i0.ɵɵtext(6, " Details ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 34);
-    i0.ɵɵtemplate(8, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Template, 3, 1, "div", 35)(9, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template, 7, 3, "div", 36)(10, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template, 27, 13, "div", 37);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 65);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64);
+    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Conditional_2_Template, 1, 0, "i", 65)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Conditional_3_Template, 1, 0, "i", 66);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 67)(5, "div", 68);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 69);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 70)(10, "button", 71);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Template_button_click_10_listener() { const link_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onNavigateToLink(link_r14)); });
+    i0.ɵɵelement(11, "i", 72);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const link_r14 = ctx.$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.hasDisplayTab ? 2 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.hasJsonTab ? 3 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("active", ctx_r0.activeTab === "details");
+    i0.ɵɵconditional(link_r14.type === "conversation" ? 2 : 3);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r0.activeTab === "display" && ctx_r0.hasDisplayTab ? 8 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "json" && ctx_r0.hasJsonTab ? 9 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "details" ? 10 : -1);
+    i0.ɵɵtextInterpolate(link_r14.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(link_r14.type === "conversation" ? "Conversation" : "Collection");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !link_r14.hasAccess)("title", link_r14.hasAccess ? "Open" : "No access");
 } }
-function ArtifactViewerPanelComponent_Conditional_21_For_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 66);
-    i0.ɵɵtext(1);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61);
+    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_For_2_Template, 12, 5, "div", 63, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const collection_r13 = ctx.$implicit;
-    i0.ɵɵproperty("ngValue", collection_r13.ID);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(collection_r13.Name);
-} }
-function ArtifactViewerPanelComponent_Conditional_21_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 28);
+    i0.ɵɵrepeater(ctx_r0.linksToShow);
 } }
-function ArtifactViewerPanelComponent_Conditional_21_Conditional_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 71);
-} }
-function ArtifactViewerPanelComponent_Conditional_21_Conditional_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 28);
-    i0.ɵɵtext(1, " Saving... ");
-} }
-function ArtifactViewerPanelComponent_Conditional_21_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 75);
-    i0.ɵɵtext(1, " Save to Collection ");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3, "No links available");
+    i0.ɵɵelementEnd()();
 } }
-function ArtifactViewerPanelComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 58);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelLibraryDialog()); });
-    i0.ɵɵelementStart(1, "div", 59);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 60)(3, "h3");
-    i0.ɵɵelement(4, "i", 61);
-    i0.ɵɵtext(5, " Save to Collection ");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_1_Template, 3, 0, "div", 61)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Conditional_2_Template, 4, 0, "div", 62);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 62);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelLibraryDialog()); });
-    i0.ɵɵelement(7, "i", 13);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 63)(9, "div", 64)(10, "label");
-    i0.ɵɵtext(11, "Select Collection");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.linksToShow.length > 0 ? 1 : 2);
+} }
+function ArtifactViewerPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 29);
+    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_2_Template, 3, 2, "button", 30)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_3_Template, 3, 2, "button", 30);
+    i0.ɵɵelementStart(4, "button", 31);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setActiveTab("details")); });
+    i0.ɵɵelement(5, "i", 32);
+    i0.ɵɵtext(6, " Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "select", 65);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_21_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.selectedCollectionId, $event) || (ctx_r0.selectedCollectionId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(13, "option", 66);
-    i0.ɵɵtext(14, "-- Choose a collection --");
+    i0.ɵɵtemplate(7, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Template, 3, 2, "button", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(15, ArtifactViewerPanelComponent_Conditional_21_For_16_Template, 2, 2, "option", 66, _forTrack0);
+    i0.ɵɵelementStart(8, "div", 33);
+    i0.ɵɵtemplate(9, ArtifactViewerPanelComponent_Conditional_20_Conditional_9_Template, 3, 1, "div", 34)(10, ArtifactViewerPanelComponent_Conditional_20_Conditional_10_Template, 7, 3, "div", 35)(11, ArtifactViewerPanelComponent_Conditional_20_Conditional_11_Template, 27, 13, "div", 36)(12, ArtifactViewerPanelComponent_Conditional_20_Conditional_12_Template, 3, 1, "div", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 67)(18, "span");
-    i0.ɵɵtext(19, "OR");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 64)(21, "label");
-    i0.ɵɵtext(22, "Create New Collection");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 68)(24, "input", 69);
-    i0.ɵɵtwoWayListener("ngModelChange", function ArtifactViewerPanelComponent_Conditional_21_Template_input_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r0.newCollectionName, $event) || (ctx_r0.newCollectionName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keyup.enter", function ArtifactViewerPanelComponent_Conditional_21_Template_input_keyup_enter_24_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createNewCollection()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "button", 70);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.createNewCollection()); });
-    i0.ɵɵtemplate(26, ArtifactViewerPanelComponent_Conditional_21_Conditional_26_Template, 1, 0, "i", 28)(27, ArtifactViewerPanelComponent_Conditional_21_Conditional_27_Template, 1, 0, "i", 71);
-    i0.ɵɵtext(28, " Create ");
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(29, "div", 72)(30, "button", 73);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.cancelLibraryDialog()); });
-    i0.ɵɵtext(31, " Cancel ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "button", 74);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_21_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r12); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.saveToSelectedCollection()); });
-    i0.ɵɵtemplate(33, ArtifactViewerPanelComponent_Conditional_21_Conditional_33_Template, 2, 0)(34, ArtifactViewerPanelComponent_Conditional_21_Conditional_34_Template, 2, 0);
-    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(12);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.selectedCollectionId);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.hasDisplayTab ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngValue", null);
+    i0.ɵɵconditional(ctx_r0.hasJsonTab ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("active", ctx_r0.activeTab === "details");
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.hasLinksTab ? 7 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r0.collections);
-    i0.ɵɵadvance(9);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r0.newCollectionName);
+    i0.ɵɵconditional(ctx_r0.activeTab === "display" && ctx_r0.hasDisplayTab ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", ctx_r0.isCreatingCollection || !ctx_r0.newCollectionName.trim());
+    i0.ɵɵconditional(ctx_r0.activeTab === "json" && ctx_r0.hasJsonTab ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isCreatingCollection ? 26 : 27);
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("disabled", !ctx_r0.selectedCollectionId || ctx_r0.isSavingToLibrary);
+    i0.ɵɵconditional(ctx_r0.activeTab === "details" ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.isSavingToLibrary ? 33 : 34);
+    i0.ɵɵconditional(ctx_r0.activeTab === "links" ? 12 : -1);
 } }
 export class ArtifactViewerPanelComponent {
     artifactId;
@@ -412,7 +396,11 @@ export class ArtifactViewerPanelComponent {
     versionNumber; // Version to display
     showSaveToCollection = true; // Control whether Save to Collection button is shown
     refreshTrigger;
+    viewContext = null; // Where artifact is being viewed
+    contextCollectionId; // If viewing in collection, which collection
     closed = new EventEmitter();
+    saveToCollectionRequested = new EventEmitter();
+    navigateToLink = new EventEmitter();
     pluginViewer;
     destroy$ = new Subject();
     artifact = null;
@@ -423,12 +411,6 @@ export class ArtifactViewerPanelComponent {
     error = null;
     jsonContent = '';
     showVersionDropdown = false;
-    showLibraryDialog = false;
-    collections = [];
-    selectedCollectionId = null;
-    newCollectionName = '';
-    isCreatingCollection = false;
-    isSavingToLibrary = false;
     artifactCollections = [];
     primaryCollection = null;
     // Tabbed interface
@@ -437,6 +419,10 @@ export class ArtifactViewerPanelComponent {
     displayHtml = null;
     versionAttributes = [];
     artifactTypeDriverClass = null;
+    // Links tab data
+    originConversation = null;
+    allCollections = [];
+    hasAccessToOriginConversation = false;
     // Cache plugin state to avoid losing it when switching tabs
     cachedPluginShouldShowRaw = false;
     cachedPluginIsElevated = false;
@@ -540,6 +526,8 @@ export class ArtifactViewerPanelComponent {
                 await this.loadVersionAttributes();
                 // Load collection associations
                 await this.loadCollectionAssociations();
+                // Load links data
+                await this.loadLinksData();
                 console.log(`📦 Loaded ${this.allVersions.length} versions for artifact ${this.artifactId}, showing v${this.selectedVersionNumber}`);
             }
             else {
@@ -590,6 +578,10 @@ export class ArtifactViewerPanelComponent {
                 // Parse values - they might be JSON-encoded strings
                 this.displayMarkdown = this.parseAttributeValue(displayMarkdownAttr?.Value);
                 this.displayHtml = this.parseAttributeValue(displayHtmlAttr?.Value);
+                // Clean up double-escaped characters in HTML (from LLM generation)
+                if (this.displayHtml) {
+                    this.displayHtml = this.cleanEscapedCharacters(this.displayHtml);
+                }
                 // Default to display tab if we have a plugin or extracted display content
                 // Otherwise default to JSON tab for JSON types, or Details tab as last resort
                 if (this.hasDisplayTab) {
@@ -676,6 +668,22 @@ export class ArtifactViewerPanelComponent {
         }
         return value;
     }
+    /**
+     * Clean up double-escaped characters that appear in LLM-generated HTML
+     * Removes literal "\\n" and "\\t" which cause rendering issues
+     */
+    cleanEscapedCharacters(html) {
+        // Remove escaped newlines (\\n becomes nothing)
+        // HTML doesn't need whitespace for formatting, and these cause display issues
+        let cleaned = html.replace(/\\n/g, '');
+        // Remove escaped tabs
+        cleaned = cleaned.replace(/\\t/g, '');
+        // Remove double-escaped tabs
+        cleaned = cleaned.replace(/\\\\t/g, '');
+        // Remove double-escaped newlines
+        cleaned = cleaned.replace(/\\\\n/g, '');
+        return cleaned;
+    }
     async loadCollectionAssociations() {
         if (!this.artifactId)
             return;
@@ -714,7 +722,7 @@ export class ArtifactViewerPanelComponent {
         }
     }
     onCopyDisplayContent() {
-        const content = this.displayMarkdown || this.displayHtml;
+        const content = this.displayHtml || this.displayMarkdown;
         if (content) {
             navigator.clipboard.writeText(content).then(() => {
                 console.log('✅ Copied display content to clipboard');
@@ -723,6 +731,50 @@ export class ArtifactViewerPanelComponent {
             });
         }
     }
+    onPrintDisplayContent() {
+        // Try to delegate to the plugin viewer's print method
+        if (this.pluginViewer?.pluginInstance) {
+            const plugin = this.pluginViewer.pluginInstance;
+            if (typeof plugin.printHtml === 'function') {
+                plugin.printHtml();
+                return;
+            }
+        }
+        // Fallback: create a temporary print window with displayHtml or displayMarkdown
+        const content = this.displayHtml || this.displayMarkdown;
+        if (content) {
+            const printWindow = window.open('', '_blank');
+            if (printWindow) {
+                if (this.displayHtml) {
+                    printWindow.document.write(content);
+                }
+                else if (this.displayMarkdown) {
+                    // Wrap markdown in basic HTML for printing
+                    printWindow.document.write(`
+            <!DOCTYPE html>
+            <html>
+            <head>
+              <title>Print</title>
+              <style>
+                body { font-family: sans-serif; padding: 20px; }
+                pre { background: #f5f5f5; padding: 10px; border-radius: 4px; }
+              </style>
+            </head>
+            <body>
+              <pre>${content}</pre>
+            </body>
+            </html>
+          `);
+                }
+                printWindow.document.close();
+                printWindow.focus();
+                setTimeout(() => {
+                    printWindow.print();
+                    printWindow.close();
+                }, 250);
+            }
+        }
+    }
     toggleVersionDropdown() {
         if (this.allVersions.length > 1) {
             this.showVersionDropdown = !this.showVersionDropdown;
@@ -738,127 +790,199 @@ export class ArtifactViewerPanelComponent {
         console.log(`📦 Switched to version ${this.selectedVersionNumber}`);
     }
     async onSaveToLibrary() {
-        // If already in a collection, navigate to that collection
-        if (this.isInCollection && this.primaryCollection) {
-            // TODO: Implement navigation to collection view
-            // For now, just log - will need ConversationStateService or similar to navigate
-            console.log('Navigate to collection:', this.primaryCollection.Name, this.primaryCollection.ID);
-            MJNotificationService.Instance.CreateSimpleNotification(`This artifact is saved in collection: ${this.primaryCollection.Name}`, 'info', 3000);
-            return;
-        }
-        // If not in a collection, show the save dialog
-        try {
-            // Load user's collections
-            const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'MJ: Collections',
-                ExtraFilter: `EnvironmentID='${this.environmentId}'`,
-                OrderBy: 'Name',
-                ResultType: 'entity_object'
-            }, this.currentUser);
-            if (result.Success) {
-                this.collections = result.Results || [];
-                this.showLibraryDialog = true;
-            }
-            else {
-                console.error('Failed to load collections:', result.ErrorMessage);
-                MJNotificationService.Instance.CreateSimpleNotification('Failed to load collections. Please try again.', 'error');
-            }
-        }
-        catch (err) {
-            console.error('Error loading collections:', err);
-            MJNotificationService.Instance.CreateSimpleNotification('Error loading collections. Please try again.', 'error');
-        }
+        // Always show the collection picker modal
+        // Artifacts can be saved to multiple collections
+        this.saveToCollectionRequested.emit({
+            artifactId: this.artifactId,
+            excludedCollectionIds: this.excludedCollectionIds
+        });
     }
-    async createNewCollection() {
-        if (!this.newCollectionName.trim()) {
-            MJNotificationService.Instance.CreateSimpleNotification('Please enter a collection name', 'warning', 2000);
-            return;
+    get excludedCollectionIds() {
+        // Return IDs of collections that already contain this artifact
+        return this.artifactCollections.map(ca => ca.CollectionID);
+    }
+    /**
+     * Called by parent component after user selects collections in the picker.
+     * Saves the artifact to the selected collections.
+     */
+    async saveToCollections(collectionIds) {
+        if (!this.artifactId || collectionIds.length === 0) {
+            return false;
         }
         try {
-            this.isCreatingCollection = true;
             const md = new Metadata();
-            const collection = await md.GetEntityObject('MJ: Collections', this.currentUser);
-            collection.EnvironmentID = this.environmentId;
-            collection.Name = this.newCollectionName.trim();
-            collection.Description = 'Created from conversation';
-            const saved = await collection.Save();
-            if (saved) {
-                this.collections.push(collection);
-                this.selectedCollectionId = collection.ID;
-                this.newCollectionName = '';
-                console.log('✅ Created new collection:', collection.Name);
-                MJNotificationService.Instance.CreateSimpleNotification(`Collection "${collection.Name}" created successfully!`, 'success', 3000);
+            let successCount = 0;
+            // Save artifact to each selected collection
+            for (const collectionId of collectionIds) {
+                // Double check it doesn't already exist
+                const rv = new RunView();
+                const existingResult = await rv.RunView({
+                    EntityName: 'MJ: Collection Artifacts',
+                    ExtraFilter: `CollectionID='${collectionId}' AND ArtifactID='${this.artifactId}'`,
+                    ResultType: 'entity_object'
+                }, this.currentUser);
+                if (existingResult.Success && existingResult.Results && existingResult.Results.length > 0) {
+                    console.log(`Artifact already in collection ${collectionId}, skipping`);
+                    continue;
+                }
+                // Create junction record
+                const collectionArtifact = await md.GetEntityObject('MJ: Collection Artifacts', this.currentUser);
+                collectionArtifact.CollectionID = collectionId;
+                collectionArtifact.ArtifactID = this.artifactId;
+                collectionArtifact.Sequence = 0;
+                const saved = await collectionArtifact.Save();
+                if (saved) {
+                    successCount++;
+                }
+                else {
+                    console.error(`Failed to save artifact to collection ${collectionId}`);
+                }
+            }
+            if (successCount > 0) {
+                console.log(`✅ Saved artifact to ${successCount} collection(s)`);
+                MJNotificationService.Instance.CreateSimpleNotification(`Artifact saved to ${successCount} collection(s) successfully!`, 'success', 3000);
+                // Reload collection associations to update the bookmark icon state
+                await this.loadCollectionAssociations();
+                return true;
             }
             else {
-                MJNotificationService.Instance.CreateSimpleNotification('Failed to create collection. Please try again.', 'error');
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to save artifact to any collections', 'error');
+                return false;
             }
         }
         catch (err) {
-            console.error('Error creating collection:', err);
+            console.error('Error saving to collections:', err);
             LogError(err);
-            MJNotificationService.Instance.CreateSimpleNotification('Error creating collection. Please try again.', 'error');
-        }
-        finally {
-            this.isCreatingCollection = false;
+            MJNotificationService.Instance.CreateSimpleNotification('Error saving artifact to collections. Please try again.', 'error');
+            return false;
         }
     }
-    async saveToSelectedCollection() {
-        if (!this.selectedCollectionId) {
-            MJNotificationService.Instance.CreateSimpleNotification('Please select a collection', 'warning', 2000);
-            return;
-        }
-        if (!this.artifactId) {
-            MJNotificationService.Instance.CreateSimpleNotification('No artifact to save', 'error');
+    /**
+     * Load links data: origin conversation and all collections containing this artifact
+     */
+    async loadLinksData() {
+        if (!this.artifactId)
             return;
-        }
         try {
-            this.isSavingToLibrary = true;
-            // Check if artifact already exists in this collection
+            const md = new Metadata();
             const rv = new RunView();
-            const existingResult = await rv.RunView({
+            // Load all collections containing this artifact
+            const collArtifactsResult = await rv.RunView({
                 EntityName: 'MJ: Collection Artifacts',
-                ExtraFilter: `CollectionID='${this.selectedCollectionId}' AND ArtifactID='${this.artifactId}'`,
+                ExtraFilter: `ArtifactID='${this.artifactId}'`,
                 ResultType: 'entity_object'
             }, this.currentUser);
-            if (existingResult.Success && existingResult.Results && existingResult.Results.length > 0) {
-                MJNotificationService.Instance.CreateSimpleNotification('This artifact is already in the selected collection', 'info', 3000);
-                this.showLibraryDialog = false;
-                return;
-            }
-            // Create junction record
-            const md = new Metadata();
-            const collectionArtifact = await md.GetEntityObject('MJ: Collection Artifacts', this.currentUser);
-            collectionArtifact.CollectionID = this.selectedCollectionId;
-            collectionArtifact.ArtifactID = this.artifactId;
-            collectionArtifact.Sequence = 0; // Could calculate max sequence + 1 if needed
-            const saved = await collectionArtifact.Save();
-            if (saved) {
-                const collectionName = this.collections.find(c => c.ID === this.selectedCollectionId)?.Name || 'collection';
-                console.log(`✅ Saved artifact to ${collectionName}`);
-                MJNotificationService.Instance.CreateSimpleNotification(`Artifact saved to ${collectionName} successfully!`, 'success', 3000);
-                this.showLibraryDialog = false;
-                this.selectedCollectionId = null;
-                // Reload collection associations to update the bookmark icon state
-                await this.loadCollectionAssociations();
+            if (collArtifactsResult.Success && collArtifactsResult.Results) {
+                // Get unique collection IDs
+                const collectionIds = [...new Set(collArtifactsResult.Results.map(ca => ca.CollectionID))];
+                if (collectionIds.length > 0) {
+                    const collectionsFilter = collectionIds.map(id => `ID='${id}'`).join(' OR ');
+                    const collectionsResult = await rv.RunView({
+                        EntityName: 'MJ: Collections',
+                        ExtraFilter: collectionsFilter,
+                        ResultType: 'entity_object'
+                    }, this.currentUser);
+                    if (collectionsResult.Success && collectionsResult.Results) {
+                        this.allCollections = collectionsResult.Results;
+                    }
+                }
             }
-            else {
-                MJNotificationService.Instance.CreateSimpleNotification('Failed to save artifact to collection. Please try again.', 'error');
+            // Load origin conversation (if artifact came from conversation)
+            // Artifacts are linked to conversations via ConversationDetailArtifact -> ConversationDetail -> Conversation
+            // Get all version IDs for this artifact
+            const versionIds = this.allVersions.map(v => v.ID);
+            if (versionIds.length > 0) {
+                const versionFilter = versionIds.map(id => `ArtifactVersionID='${id}'`).join(' OR ');
+                const convDetailArtifactsResult = await rv.RunView({
+                    EntityName: 'MJ: Conversation Detail Artifacts',
+                    ExtraFilter: versionFilter,
+                    MaxRows: 1,
+                    ResultType: 'entity_object'
+                }, this.currentUser);
+                if (convDetailArtifactsResult.Success && convDetailArtifactsResult.Results && convDetailArtifactsResult.Results.length > 0) {
+                    const conversationDetailId = convDetailArtifactsResult.Results[0].ConversationDetailID;
+                    // Load the conversation detail to get the conversation ID
+                    const conversationDetail = await md.GetEntityObject('Conversation Details', this.currentUser);
+                    const detailLoaded = await conversationDetail.Load(conversationDetailId);
+                    if (detailLoaded && conversationDetail.ConversationID) {
+                        const conversation = await md.GetEntityObject('Conversations', this.currentUser);
+                        const loaded = await conversation.Load(conversationDetail.ConversationID);
+                        if (loaded) {
+                            this.originConversation = conversation;
+                            // Check if user has access (is owner or participant)
+                            const userIsOwner = conversation.UserID === this.currentUser.ID;
+                            // Check if user is a participant
+                            const participantResult = await rv.RunView({
+                                EntityName: 'Conversation Details',
+                                ExtraFilter: `ConversationID='${conversation.ID}' AND UserID='${this.currentUser.ID}'`,
+                                MaxRows: 1,
+                                ResultType: 'simple'
+                            }, this.currentUser);
+                            const userIsParticipant = participantResult.Success &&
+                                participantResult.Results &&
+                                participantResult.Results.length > 0;
+                            this.hasAccessToOriginConversation = userIsOwner || userIsParticipant;
+                        }
+                    }
+                }
             }
+            console.log(`🔗 Loaded links: ${this.allCollections.length} collections, origin conversation: ${this.originConversation?.Name || 'none'}`);
         }
-        catch (err) {
-            console.error('Error saving to collection:', err);
-            LogError(err);
-            MJNotificationService.Instance.CreateSimpleNotification('Error saving artifact to collection. Please try again.', 'error');
+        catch (error) {
+            console.error('Error loading links data:', error);
         }
-        finally {
-            this.isSavingToLibrary = false;
+    }
+    get hasLinksTab() {
+        // Show links tab if:
+        // 1. Viewing in collection and there's an origin conversation OR other collections
+        // 2. Viewing in conversation and there are any collections
+        if (this.viewContext === 'collection') {
+            // Show if there's an origin conversation, or more than 1 collection (current + others)
+            return !!this.originConversation || this.allCollections.length > 1;
+        }
+        else if (this.viewContext === 'conversation') {
+            // Show if there are any collections
+            return this.allCollections.length > 0;
         }
+        return false;
     }
-    cancelLibraryDialog() {
-        this.showLibraryDialog = false;
-        this.selectedCollectionId = null;
-        this.newCollectionName = '';
+    get linksToShow() {
+        const links = [];
+        // Add origin conversation if viewing in collection
+        if (this.viewContext === 'collection' && this.originConversation) {
+            links.push({
+                type: 'conversation',
+                id: this.originConversation.ID,
+                name: this.originConversation.Name || 'Untitled Conversation',
+                hasAccess: this.hasAccessToOriginConversation
+            });
+        }
+        // Add all collections (excluding current context if applicable)
+        for (const collection of this.allCollections) {
+            if (this.viewContext === 'collection' && collection.ID === this.contextCollectionId) {
+                // Skip current collection
+                continue;
+            }
+            links.push({
+                type: 'collection',
+                id: collection.ID,
+                name: collection.Name,
+                hasAccess: true // User can see it, so they have access
+            });
+        }
+        return links;
+    }
+    /**
+     * Navigate to a linked conversation or collection
+     */
+    onNavigateToLink(link) {
+        if (!link.hasAccess) {
+            return;
+        }
+        this.navigateToLink.emit({
+            type: link.type,
+            id: link.id
+        });
     }
     onClose() {
         this.closed.emit();
@@ -913,7 +1037,7 @@ export class ArtifactViewerPanelComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pluginViewer = _t.first);
-        } }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", refreshTrigger: "refreshTrigger" }, outputs: { closed: "closed" }, features: [i0.ɵɵNgOnChangesFeature], decls: 22, vars: 12, consts: [[1, "artifact-viewer-panel"], [1, "panel-header"], [1, "panel-header-left"], [1, "fas", "fa-cube"], [1, "header-description"], [1, "panel-header-right"], [1, "version-selector", 3, "click"], [1, "fas", "fa-history"], [1, "version-label"], [1, "fas", "fa-chevron-down", "dropdown-icon", 3, "open"], [1, "version-dropdown"], [1, "save-to-collection-btn", 3, "in-collection", "title"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "panel-content"], [1, "loading-state"], [1, "error-state"], [1, "artifact-content-wrapper"], [1, "modal-overlay"], [1, "fas", "fa-chevron-down", "dropdown-icon"], [1, "version-dropdown", 3, "click"], [1, "version-option", 3, "selected"], [1, "version-option", 3, "click"], [1, "version-number"], [1, "version-date"], [1, "fas", "fa-check"], [1, "save-to-collection-btn", 3, "click", "title"], [3, "ngClass"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "tab-navigation"], [1, "tab-btn", 3, "active"], [1, "tab-btn", 3, "click"], [1, "fas", "fa-info-circle"], [1, "tab-content"], [1, "display-content"], [1, "json-viewer"], [1, "details-content"], [1, "fas", "fa-eye"], [1, "fas", "fa-code"], [3, "artifactVersion", "artifactTypeName", "contentType", "readonly"], [1, "display-toolbar"], ["title", "Copy Content", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "markdown-content"], [1, "html-content", 3, "innerHTML"], [3, "data"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [1, "modal-overlay", 3, "click"], [1, "modal-content", "library-modal", 3, "click"], [1, "modal-header"], [1, "fas", "fa-bookmark"], [1, "close-btn", 3, "click"], [1, "modal-body"], [1, "form-section"], [1, "form-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "divider"], [1, "create-collection-row"], ["type", "text", "placeholder", "Enter collection name", 1, "form-input", 3, "ngModelChange", "keyup.enter", "ngModel"], [1, "btn", "btn-secondary", 3, "click", "disabled"], [1, "fas", "fa-plus"], [1, "modal-footer"], [1, "btn", "btn-secondary", 3, "click"], [1, "btn", "btn-primary", 3, "click", "disabled"], [1, "fas", "fa-save"]], template: function ArtifactViewerPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { artifactId: "artifactId", currentUser: "currentUser", environmentId: "environmentId", versionNumber: "versionNumber", showSaveToCollection: "showSaveToCollection", refreshTrigger: "refreshTrigger", viewContext: "viewContext", contextCollectionId: "contextCollectionId" }, outputs: { closed: "closed", saveToCollectionRequested: "saveToCollectionRequested", navigateToLink: "navigateToLink" }, features: [i0.ɵɵNgOnChangesFeature], decls: 21, vars: 11, consts: [[1, "artifact-viewer-panel"], [1, "panel-header"], [1, "panel-header-left"], [1, "fas", "fa-cube"], [1, "header-description"], [1, "panel-header-right"], [1, "version-selector", 3, "click"], [1, "fas", "fa-history"], [1, "version-label"], [1, "fas", "fa-chevron-down", "dropdown-icon", 3, "open"], [1, "version-dropdown"], ["title", "Save to Collection", 1, "save-to-collection-btn"], ["title", "Close", 1, "close-btn", 3, "click"], [1, "fas", "fa-times"], [1, "panel-content"], [1, "loading-state"], [1, "error-state"], [1, "artifact-content-wrapper"], [1, "fas", "fa-chevron-down", "dropdown-icon"], [1, "version-dropdown", 3, "click"], [1, "version-option", 3, "selected"], [1, "version-option", 3, "click"], [1, "version-number"], [1, "version-date"], [1, "fas", "fa-check"], ["title", "Save to Collection", 1, "save-to-collection-btn", 3, "click"], [1, "far", "fa-bookmark"], [1, "fas", "fa-spinner", "fa-spin"], [1, "fas", "fa-exclamation-triangle"], [1, "tab-navigation"], [1, "tab-btn", 3, "active"], [1, "tab-btn", 3, "click"], [1, "fas", "fa-info-circle"], [1, "tab-content"], [1, "display-content"], [1, "json-viewer"], [1, "details-content"], [1, "links-container"], [1, "fas", "fa-eye"], [1, "fas", "fa-code"], [1, "fas", "fa-link"], [3, "artifactVersion", "artifactTypeName", "contentType", "readonly"], [1, "display-toolbar"], ["title", "Print", 1, "btn-icon", 3, "click"], [1, "fas", "fa-print"], ["title", "Copy Content", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "markdown-content"], [1, "html-content", 3, "innerHTML"], [3, "data"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [1, "links-section"], [1, "empty-state"], [1, "link-item"], [1, "link-icon"], [1, "fas", "fa-comments"], [1, "fas", "fa-folder"], [1, "link-content"], [1, "link-name"], [1, "link-type"], [1, "link-actions"], [1, "link-action-btn", 3, "click", "disabled", "title"], [1, "fas", "fa-arrow-right"]], template: function ArtifactViewerPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
             i0.ɵɵelement(4, "i", 3);
             i0.ɵɵtext(5);
@@ -928,15 +1052,14 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(12, ArtifactViewerPanelComponent_Conditional_12_Template, 1, 2, "i", 9)(13, ArtifactViewerPanelComponent_Conditional_13_Template, 3, 0, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(14, ArtifactViewerPanelComponent_Conditional_14_Template, 2, 4, "button", 11);
+            i0.ɵɵtemplate(14, ArtifactViewerPanelComponent_Conditional_14_Template, 2, 0, "button", 11);
             i0.ɵɵelementStart(15, "button", 12);
             i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Template_button_click_15_listener() { return ctx.onClose(); });
             i0.ɵɵelement(16, "i", 13);
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(17, "div", 14);
-            i0.ɵɵtemplate(18, ArtifactViewerPanelComponent_Conditional_18_Template, 4, 0, "div", 15)(19, ArtifactViewerPanelComponent_Conditional_19_Template, 4, 1, "div", 16)(20, ArtifactViewerPanelComponent_Conditional_20_Template, 11, 7, "div", 17);
+            i0.ɵɵtemplate(18, ArtifactViewerPanelComponent_Conditional_18_Template, 4, 0, "div", 15)(19, ArtifactViewerPanelComponent_Conditional_19_Template, 4, 1, "div", 16)(20, ArtifactViewerPanelComponent_Conditional_20_Template, 13, 9, "div", 17);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(21, ArtifactViewerPanelComponent_Conditional_21_Template, 35, 7, "div", 18);
         } if (rf & 2) {
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate1(" ", ctx.displayName, " ");
@@ -958,13 +1081,11 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵconditional(ctx.error ? 19 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 20 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showLibraryDialog ? 21 : -1);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MarkdownComponent, i4.CodeEditorComponent, i5.ArtifactTypePluginViewerComponent, i1.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n}\n\n.panel-header-left[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366F1;\n  flex-shrink: 0;\n}\n\n.header-description[_ngcontent-%COMP%] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n}\n\n.panel-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n}\n\n.version-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon[_ngcontent-%COMP%] {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon.open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.version-label[_ngcontent-%COMP%] {\n  font-family: monospace;\n}\n\n.version-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected[_ngcontent-%COMP%] {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-number[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-date[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n  background: #FEF3C7;\n  color: #D97706;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifact-content-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%]:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.form-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select[_ngcontent-%COMP%], \n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select[_ngcontent-%COMP%]:focus, \n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider[_ngcontent-%COMP%]::before, \n.divider[_ngcontent-%COMP%]::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  padding: 0 12px;\n}\n\n.create-collection-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.display-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content[_ngcontent-%COMP%], \n.html-content[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px;\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content[_ngcontent-%COMP%] {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content[_ngcontent-%COMP%]   .artifact-meta[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content[_ngcontent-%COMP%]   .meta-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.attributes-section[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}"] });
+        } }, dependencies: [i1.NgControlStatus, i1.NgModel, i2.MarkdownComponent, i3.CodeEditorComponent, i4.ArtifactTypePluginViewerComponent, i5.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.panel-header-left[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  margin-right: 16px;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #6366F1;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.header-description[_ngcontent-%COMP%] {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.version-selector.clickable[_ngcontent-%COMP%]:hover {\n  background: #E5E7EB;\n}\n\n.version-selector[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon[_ngcontent-%COMP%] {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector[_ngcontent-%COMP%]   .dropdown-icon.open[_ngcontent-%COMP%] {\n  transform: rotate(180deg);\n}\n\n.version-label[_ngcontent-%COMP%] {\n  font-family: monospace;\n}\n\n.version-dropdown[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option[_ngcontent-%COMP%]:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected[_ngcontent-%COMP%] {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-number[_ngcontent-%COMP%] {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option[_ngcontent-%COMP%]   .version-date[_ngcontent-%COMP%] {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.panel-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.artifact-content-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: #DC2626;\n}\n\n.loading-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 24px;\n}\n\n.artifact-meta[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%]:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #F59E0B;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n}\n\n.form-section[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select[_ngcontent-%COMP%], \n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select[_ngcontent-%COMP%]:focus, \n.form-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider[_ngcontent-%COMP%]::before, \n.divider[_ngcontent-%COMP%]::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  padding: 0 12px;\n}\n\n.create-collection-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row[_ngcontent-%COMP%]   .form-input[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn[_ngcontent-%COMP%]:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 5px;\n  min-width: 0;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n}\n\n.display-toolbar[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content[_ngcontent-%COMP%], \n.html-content[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px 10px 5px 20px; \n\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content[_ngcontent-%COMP%] {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content[_ngcontent-%COMP%]   .artifact-meta[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content[_ngcontent-%COMP%]   .meta-item.full-width[_ngcontent-%COMP%] {\n  grid-column: 1 / -1;\n}\n\n.attributes-section[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n\n\n.links-container[_ngcontent-%COMP%] {\n  padding: 20px;\n}\n\n.links-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.link-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item[_ngcontent-%COMP%]:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: #1e40af;\n}\n\n.link-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.link-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: #6B7280;\n  margin-top: 2px;\n}\n\n.link-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.link-action-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  color: #1e40af;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.link-action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #EFF6FF;\n  border-color: #1e40af;\n}\n\n.link-action-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  color: #9CA3AF;\n}\n\n.links-container[_ngcontent-%COMP%]   .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: #9CA3AF;\n  text-align: center;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.links-container[_ngcontent-%COMP%]   .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactViewerPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\">\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <h3>\n        <i class=\"fas fa-cube\"></i>\n        {{ displayName }}\n      </h3>\n      @if (displayDescription) {\n        <p class=\"header-description\">{{ displayDescription }}</p>\n      }\n    </div>\n    <div class=\"panel-header-right\">\n      <div class=\"version-selector\" [class.clickable]=\"allVersions.length > 1\" (click)=\"toggleVersionDropdown()\">\n        <i class=\"fas fa-history\"></i>\n        <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n        @if (allVersions.length > 1) {\n          <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n        }\n        @if (showVersionDropdown) {\n          <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n            @for (version of allVersions; track version.ID) {\n              <div class=\"version-option\"\n                   [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                   (click)=\"selectVersion(version); $event.stopPropagation()\">\n                <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                @if (version.VersionNumber === selectedVersionNumber) {\n                  <i class=\"fas fa-check\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (showSaveToCollection) {\n        <button class=\"save-to-collection-btn\"\n                [class.in-collection]=\"isInCollection\"\n                (click)=\"onSaveToLibrary()\"\n                [title]=\"isInCollection ? 'View in Collection' : 'Save to Collection'\">\n          <i [ngClass]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n        </button>\n      }\n      <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"panel-content\">\n    @if (isLoading) {\n      <div class=\"loading-state\">\n        <i class=\"fas fa-spinner fa-spin\"></i>\n        <span>Loading artifact...</span>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"error-state\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        <span>{{ error }}</span>\n      </div>\n    }\n\n    @if (!isLoading && !error && artifact) {\n      <div class=\"artifact-content-wrapper\">\n        <!-- Tab Navigation -->\n        <div class=\"tab-navigation\">\n          @if (hasDisplayTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'display'\" (click)=\"setActiveTab('display')\">\n              <i class=\"fas fa-eye\"></i> Display\n            </button>\n          }\n          @if (hasJsonTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'json'\" (click)=\"setActiveTab('json')\">\n              <i class=\"fas fa-code\"></i> JSON\n            </button>\n          }\n          <button class=\"tab-btn\" [class.active]=\"activeTab === 'details'\" (click)=\"setActiveTab('details')\">\n            <i class=\"fas fa-info-circle\"></i> Details\n          </button>\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"tab-content\">\n          <!-- Display Tab (uses plugin system OR extracted attributes) -->\n          @if (activeTab === 'display' && hasDisplayTab) {\n            <div class=\"display-content\">\n              @if (hasPlugin && artifactVersion && artifactTypeName) {\n                <!-- Use plugin viewer if available -->\n                <mj-artifact-type-plugin-viewer\n                  [artifactVersion]=\"artifactVersion\"\n                  [artifactTypeName]=\"artifactTypeName\"\n                  [contentType]=\"contentType\"\n                  [readonly]=\"true\">\n                </mj-artifact-type-plugin-viewer>\n              } @else if (displayMarkdown || displayHtml) {\n                <!-- Fallback to extracted markdown/HTML attributes -->\n                <div class=\"display-toolbar\">\n                  <button class=\"btn-icon\" title=\"Copy Content\" (click)=\"onCopyDisplayContent()\">\n                    <i class=\"fas fa-copy\"></i> Copy\n                  </button>\n                </div>\n                @if (displayMarkdown) {\n                  <div class=\"markdown-content\">\n                    <markdown [data]=\"displayMarkdown\"></markdown>\n                  </div>\n                } @else if (displayHtml) {\n                  <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n                }\n              }\n            </div>\n          }\n\n          <!-- JSON Tab (only shown for elevated displays with JSON content) -->\n          @if (activeTab === 'json' && hasJsonTab) {\n            <div class=\"json-viewer\">\n              <div class=\"json-toolbar\">\n                <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                  <i class=\"fas fa-copy\"></i> Copy\n                </button>\n              </div>\n              <div class=\"json-editor-container\">\n                <mj-code-editor\n                  [(ngModel)]=\"jsonContent\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"width: 100%; height: 100%;\">\n                </mj-code-editor>\n              </div>\n            </div>\n          }\n\n          <!-- Details Tab -->\n          @if (activeTab === 'details') {\n            <div class=\"details-content\">\n              <div class=\"artifact-meta\">\n                <div class=\"meta-item\">\n                  <label>Type</label>\n                  <span>{{ artifact.Type }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Version</label>\n                  <span>{{ artifactVersion?.VersionNumber || 1 }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Created</label>\n                  <span>{{ artifact.__mj_CreatedAt | date:'short' }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Updated</label>\n                  <span>{{ artifactVersion?.__mj_UpdatedAt | date:'short' }}</span>\n                </div>\n                @if (artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Artifact Description</label>\n                    <span>{{ artifact.Description }}</span>\n                  </div>\n                }\n                @if (artifactVersion?.Description && artifact.Description && artifactVersion?.Description !== artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Version Description</label>\n                    <span>{{ artifactVersion?.Description }}</span>\n                  </div>\n                }\n              </div>\n\n              <!-- Version Attributes -->\n              @if (filteredAttributes.length > 0) {\n                <div class=\"attributes-section\">\n                  <h4>Version Attributes</h4>\n                  <div class=\"attributes-list\">\n                    @for (attr of filteredAttributes; track attr.ID) {\n                      <div class=\"attribute-item\">\n                        <label>{{ attr.Name }}</label>\n                        @if (attr.Value) {\n                          <span>{{ attr.Value }}</span>\n                        } @else {\n                          <span class=\"attribute-empty-pill\">Empty</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n<!-- Save to Collection Dialog -->\n@if (showLibraryDialog) {\n  <div class=\"modal-overlay\" (click)=\"cancelLibraryDialog()\">\n    <div class=\"modal-content library-modal\" (click)=\"$event.stopPropagation()\">\n      <div class=\"modal-header\">\n        <h3>\n          <i class=\"fas fa-bookmark\"></i>\n          Save to Collection\n        </h3>\n        <button class=\"close-btn\" (click)=\"cancelLibraryDialog()\">\n          <i class=\"fas fa-times\"></i>\n        </button>\n      </div>\n      <div class=\"modal-body\">\n        <div class=\"form-section\">\n          <label>Select Collection</label>\n          <select [(ngModel)]=\"selectedCollectionId\" class=\"form-select\">\n            <option [ngValue]=\"null\">-- Choose a collection --</option>\n            @for (collection of collections; track collection.ID) {\n              <option [ngValue]=\"collection.ID\">{{ collection.Name }}</option>\n            }\n          </select>\n        </div>\n\n        <div class=\"divider\">\n          <span>OR</span>\n        </div>\n\n        <div class=\"form-section\">\n          <label>Create New Collection</label>\n          <div class=\"create-collection-row\">\n            <input\n              type=\"text\"\n              [(ngModel)]=\"newCollectionName\"\n              placeholder=\"Enter collection name\"\n              class=\"form-input\"\n              (keyup.enter)=\"createNewCollection()\">\n            <button\n              class=\"btn btn-secondary\"\n              (click)=\"createNewCollection()\"\n              [disabled]=\"isCreatingCollection || !newCollectionName.trim()\">\n              @if (isCreatingCollection) {\n                <i class=\"fas fa-spinner fa-spin\"></i>\n              } @else {\n                <i class=\"fas fa-plus\"></i>\n              }\n              Create\n            </button>\n          </div>\n        </div>\n      </div>\n      <div class=\"modal-footer\">\n        <button class=\"btn btn-secondary\" (click)=\"cancelLibraryDialog()\">\n          Cancel\n        </button>\n        <button\n          class=\"btn btn-primary\"\n          (click)=\"saveToSelectedCollection()\"\n          [disabled]=\"!selectedCollectionId || isSavingToLibrary\">\n          @if (isSavingToLibrary) {\n            <i class=\"fas fa-spinner fa-spin\"></i> Saving...\n          } @else {\n            <i class=\"fas fa-save\"></i> Save to Collection\n          }\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".artifact-viewer-panel {\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n}\n\n.panel-header-left {\n  flex: 1;\n  min-width: 0;\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.panel-header h3 i {\n  color: #6366F1;\n  flex-shrink: 0;\n}\n\n.header-description {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n}\n\n.panel-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable {\n  cursor: pointer;\n}\n\n.version-selector.clickable:hover {\n  background: #E5E7EB;\n}\n\n.version-selector i {\n  font-size: 11px;\n}\n\n.version-selector .dropdown-icon {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector .dropdown-icon.open {\n  transform: rotate(180deg);\n}\n\n.version-label {\n  font-family: monospace;\n}\n\n.version-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option .version-number {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option .version-date {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option i.fa-check {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn.in-collection {\n  color: #F59E0B;\n}\n\n.save-to-collection-btn.in-collection:hover {\n  background: #FEF3C7;\n  color: #D97706;\n}\n\n.save-to-collection-btn i {\n  font-size: 14px;\n}\n\n.close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn i {\n  font-size: 14px;\n}\n\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.artifact-content-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.loading-state,\n.error-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state {\n  color: #DC2626;\n}\n\n.loading-state i {\n  font-size: 24px;\n}\n\n.artifact-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item span {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon i {\n  font-size: 14px;\n}\n\n/* Library Dialog Styles */\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header h3 i {\n  color: #F59E0B;\n}\n\n.modal-body {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section {\n  margin-bottom: 20px;\n}\n\n.form-section label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select,\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select:focus,\n.form-input:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider::before,\n.divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider span {\n  padding: 0 12px;\n}\n\n.create-collection-row {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row .form-input {\n  flex: 1;\n}\n\n.btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n/* Tab Navigation */\n.tab-navigation {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn i {\n  font-size: 14px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.display-toolbar {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content,\n.html-content {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px;\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content .artifact-meta {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content .meta-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.attributes-section {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item span {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n"] }]
+        args: [{ selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\">\n  <div class=\"panel-header\">\n    <div class=\"panel-header-left\">\n      <h3>\n        <i class=\"fas fa-cube\"></i>\n        {{ displayName }}\n      </h3>\n      @if (displayDescription) {\n        <p class=\"header-description\">{{ displayDescription }}</p>\n      }\n    </div>\n    <div class=\"panel-header-right\">\n      <div class=\"version-selector\" [class.clickable]=\"allVersions.length > 1\" (click)=\"toggleVersionDropdown()\">\n        <i class=\"fas fa-history\"></i>\n        <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n        @if (allVersions.length > 1) {\n          <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n        }\n        @if (showVersionDropdown) {\n          <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n            @for (version of allVersions; track version.ID) {\n              <div class=\"version-option\"\n                   [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                   (click)=\"selectVersion(version); $event.stopPropagation()\">\n                <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                @if (version.VersionNumber === selectedVersionNumber) {\n                  <i class=\"fas fa-check\"></i>\n                }\n              </div>\n            }\n          </div>\n        }\n      </div>\n      @if (showSaveToCollection) {\n        <button class=\"save-to-collection-btn\"\n                (click)=\"onSaveToLibrary()\"\n                title=\"Save to Collection\">\n          <i class=\"far fa-bookmark\"></i>\n        </button>\n      }\n      <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"panel-content\">\n    @if (isLoading) {\n      <div class=\"loading-state\">\n        <i class=\"fas fa-spinner fa-spin\"></i>\n        <span>Loading artifact...</span>\n      </div>\n    }\n\n    @if (error) {\n      <div class=\"error-state\">\n        <i class=\"fas fa-exclamation-triangle\"></i>\n        <span>{{ error }}</span>\n      </div>\n    }\n\n    @if (!isLoading && !error && artifact) {\n      <div class=\"artifact-content-wrapper\">\n        <!-- Tab Navigation -->\n        <div class=\"tab-navigation\">\n          @if (hasDisplayTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'display'\" (click)=\"setActiveTab('display')\">\n              <i class=\"fas fa-eye\"></i> Display\n            </button>\n          }\n          @if (hasJsonTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'json'\" (click)=\"setActiveTab('json')\">\n              <i class=\"fas fa-code\"></i> JSON\n            </button>\n          }\n          <button class=\"tab-btn\" [class.active]=\"activeTab === 'details'\" (click)=\"setActiveTab('details')\">\n            <i class=\"fas fa-info-circle\"></i> Details\n          </button>\n          @if (hasLinksTab) {\n            <button class=\"tab-btn\" [class.active]=\"activeTab === 'links'\" (click)=\"setActiveTab('links')\">\n              <i class=\"fas fa-link\"></i> Links\n            </button>\n          }\n        </div>\n\n        <!-- Tab Content -->\n        <div class=\"tab-content\">\n          <!-- Display Tab (uses plugin system OR extracted attributes) -->\n          @if (activeTab === 'display' && hasDisplayTab) {\n            <div class=\"display-content\">\n              @if (hasPlugin && artifactVersion && artifactTypeName) {\n                <!-- Use plugin viewer if available -->\n                <mj-artifact-type-plugin-viewer\n                  [artifactVersion]=\"artifactVersion\"\n                  [artifactTypeName]=\"artifactTypeName\"\n                  [contentType]=\"contentType\"\n                  [readonly]=\"true\">\n                </mj-artifact-type-plugin-viewer>\n              } @else if (displayMarkdown || displayHtml) {\n                <!-- Fallback to extracted markdown/HTML attributes -->\n                <div class=\"display-toolbar\">\n                  <button class=\"btn-icon\" title=\"Print\" (click)=\"onPrintDisplayContent()\">\n                    <i class=\"fas fa-print\"></i> Print\n                  </button>\n                  <button class=\"btn-icon\" title=\"Copy Content\" (click)=\"onCopyDisplayContent()\">\n                    <i class=\"fas fa-copy\"></i> Copy\n                  </button>\n                </div>\n                @if (displayMarkdown) {\n                  <div class=\"markdown-content\">\n                    <markdown [data]=\"displayMarkdown\"></markdown>\n                  </div>\n                } @else if (displayHtml) {\n                  <div class=\"html-content\" [innerHTML]=\"displayHtml\"></div>\n                }\n              }\n            </div>\n          }\n\n          <!-- JSON Tab (only shown for elevated displays with JSON content) -->\n          @if (activeTab === 'json' && hasJsonTab) {\n            <div class=\"json-viewer\">\n              <div class=\"json-toolbar\">\n                <button class=\"btn-icon\" title=\"Copy JSON\" (click)=\"onCopyToClipboard()\">\n                  <i class=\"fas fa-copy\"></i> Copy\n                </button>\n              </div>\n              <div class=\"json-editor-container\">\n                <mj-code-editor\n                  [(ngModel)]=\"jsonContent\"\n                  [language]=\"'json'\"\n                  [readonly]=\"true\"\n                  style=\"width: 100%; height: 100%;\">\n                </mj-code-editor>\n              </div>\n            </div>\n          }\n\n          <!-- Details Tab -->\n          @if (activeTab === 'details') {\n            <div class=\"details-content\">\n              <div class=\"artifact-meta\">\n                <div class=\"meta-item\">\n                  <label>Type</label>\n                  <span>{{ artifact.Type }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Version</label>\n                  <span>{{ artifactVersion?.VersionNumber || 1 }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Created</label>\n                  <span>{{ artifact.__mj_CreatedAt | date:'short' }}</span>\n                </div>\n                <div class=\"meta-item\">\n                  <label>Updated</label>\n                  <span>{{ artifactVersion?.__mj_UpdatedAt | date:'short' }}</span>\n                </div>\n                @if (artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Artifact Description</label>\n                    <span>{{ artifact.Description }}</span>\n                  </div>\n                }\n                @if (artifactVersion?.Description && artifact.Description && artifactVersion?.Description !== artifact.Description) {\n                  <div class=\"meta-item full-width\">\n                    <label>Version Description</label>\n                    <span>{{ artifactVersion?.Description }}</span>\n                  </div>\n                }\n              </div>\n\n              <!-- Version Attributes -->\n              @if (filteredAttributes.length > 0) {\n                <div class=\"attributes-section\">\n                  <h4>Version Attributes</h4>\n                  <div class=\"attributes-list\">\n                    @for (attr of filteredAttributes; track attr.ID) {\n                      <div class=\"attribute-item\">\n                        <label>{{ attr.Name }}</label>\n                        @if (attr.Value) {\n                          <span>{{ attr.Value }}</span>\n                        } @else {\n                          <span class=\"attribute-empty-pill\">Empty</span>\n                        }\n                      </div>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n\n          <!-- Links Tab -->\n          @if (activeTab === 'links') {\n            <div class=\"links-container\">\n              @if (linksToShow.length > 0) {\n                <div class=\"links-section\">\n                  @for (link of linksToShow; track link.id) {\n                    <div class=\"link-item\">\n                      <div class=\"link-icon\">\n                        @if (link.type === 'conversation') {\n                          <i class=\"fas fa-comments\"></i>\n                        } @else {\n                          <i class=\"fas fa-folder\"></i>\n                        }\n                      </div>\n                      <div class=\"link-content\">\n                        <div class=\"link-name\">{{ link.name }}</div>\n                        <div class=\"link-type\">{{ link.type === 'conversation' ? 'Conversation' : 'Collection' }}</div>\n                      </div>\n                      <div class=\"link-actions\">\n                        <button\n                          class=\"link-action-btn\"\n                          [disabled]=\"!link.hasAccess\"\n                          [title]=\"link.hasAccess ? 'Open' : 'No access'\"\n                          (click)=\"onNavigateToLink(link)\">\n                          <i class=\"fas fa-arrow-right\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"empty-state\">\n                  <i class=\"fas fa-link\"></i>\n                  <p>No links available</p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n", styles: [".artifact-viewer-panel {\n  width: 100%;\n  height: 100%;\n  background: white;\n  border-left: 1px solid #E5E7EB;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 12px 16px;\n  border-bottom: 1px solid #E5E7EB;\n  background: white;\n  flex-shrink: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.panel-header-left {\n  flex: 1;\n  min-width: 0;\n  margin-right: 16px;\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header h3 i {\n  color: #6366F1;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.header-description {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: normal;\n  word-wrap: break-word;\n  overflow-wrap: break-word;\n}\n\n.panel-header-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.version-selector {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  background: #F3F4F6;\n  border-radius: 12px;\n  font-size: 12px;\n  color: #6B7280;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.version-selector.clickable {\n  cursor: pointer;\n}\n\n.version-selector.clickable:hover {\n  background: #E5E7EB;\n}\n\n.version-selector i {\n  font-size: 11px;\n}\n\n.version-selector .dropdown-icon {\n  margin-left: 2px;\n  transition: transform 0.2s;\n}\n\n.version-selector .dropdown-icon.open {\n  transform: rotate(180deg);\n}\n\n.version-label {\n  font-family: monospace;\n}\n\n.version-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  z-index: 1000;\n  overflow: hidden;\n}\n\n.version-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px;\n  cursor: pointer;\n  transition: background 0.15s;\n  font-size: 13px;\n}\n\n.version-option:hover {\n  background: #F9FAFB;\n}\n\n.version-option.selected {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.version-option .version-number {\n  font-family: monospace;\n  font-weight: 600;\n  min-width: 35px;\n}\n\n.version-option .version-date {\n  flex: 1;\n  color: #6B7280;\n  font-size: 12px;\n}\n\n.version-option i.fa-check {\n  color: #10B981;\n  margin-left: auto;\n}\n\n.save-to-collection-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #9CA3AF;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.save-to-collection-btn:hover {\n  background: #F3F4F6;\n  color: #6B7280;\n}\n\n.save-to-collection-btn i {\n  font-size: 14px;\n}\n\n.close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: #6B7280;\n  padding: 6px;\n  border-radius: 4px;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n}\n\n.close-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.close-btn i {\n  font-size: 14px;\n}\n\n.panel-content {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.artifact-content-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.loading-state,\n.error-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  padding: 40px 20px;\n  color: #6B7280;\n}\n\n.error-state {\n  color: #DC2626;\n}\n\n.loading-state i {\n  font-size: 24px;\n}\n\n.artifact-meta {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n  gap: 16px;\n  margin-bottom: 16px;\n  padding: 16px;\n  background: #F9FAFB;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.meta-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.meta-item label {\n  font-size: 12px;\n  font-weight: 500;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item span {\n  font-size: 14px;\n  color: #111827;\n}\n\n.artifact-description {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: #EFF6FF;\n  border-left: 3px solid #3B82F6;\n  border-radius: 4px;\n  color: #1E40AF;\n  font-size: 14px;\n  flex-shrink: 0;\n}\n\n.json-viewer {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.json-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 8px 12px;\n  background: #F9FAFB;\n  border-bottom: 1px solid #E5E7EB;\n  flex-shrink: 0;\n}\n\n.btn-icon {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: #374151;\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: #F3F4F6;\n  border-color: #9CA3AF;\n}\n\n.btn-icon.btn-primary {\n  background: #4F46E5;\n  border-color: #4F46E5;\n  color: white;\n}\n\n.btn-icon.btn-primary:hover {\n  background: #4338CA;\n  border-color: #4338CA;\n}\n\n.btn-icon i {\n  font-size: 14px;\n}\n\n/* Library Dialog Styles */\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  display: flex;\n  flex-direction: column;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 16px 20px;\n  border-bottom: 1px solid #E5E7EB;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-header h3 i {\n  color: #F59E0B;\n}\n\n.modal-body {\n  padding: 20px;\n  overflow-y: auto;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 16px 20px;\n  border-top: 1px solid #E5E7EB;\n}\n\n.form-section {\n  margin-bottom: 20px;\n}\n\n.form-section label {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 14px;\n  font-weight: 500;\n  color: #374151;\n}\n\n.form-select,\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  font-size: 14px;\n  color: #111827;\n  background: white;\n  transition: border-color 0.2s;\n}\n\n.form-select:focus,\n.form-input:focus {\n  outline: none;\n  border-color: #4F46E5;\n  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: #9CA3AF;\n  font-size: 12px;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.divider::before,\n.divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #E5E7EB;\n}\n\n.divider span {\n  padding: 0 12px;\n}\n\n.create-collection-row {\n  display: flex;\n  gap: 8px;\n}\n\n.create-collection-row .form-input {\n  flex: 1;\n}\n\n.btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border: none;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n}\n\n.btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.btn-primary {\n  background: #4F46E5;\n  color: white;\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: #4338CA;\n}\n\n.btn-secondary {\n  background: white;\n  border: 1px solid #D1D5DB;\n  color: #374151;\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: #F3F4F6;\n}\n\n/* Tab Navigation */\n.tab-navigation {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid #E5E7EB;\n  padding: 0 16px;\n  background: white;\n}\n\n.tab-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 12px 20px;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -2px;\n  color: #6B7280;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn:hover {\n  color: #1e40af;\n  background: #F9FAFB;\n}\n\n.tab-btn.active {\n  color: #1e40af;\n  border-bottom-color: #1e40af;\n}\n\n.tab-btn i {\n  font-size: 14px;\n}\n\n/* Tab Content */\n.tab-content {\n  flex: 1;\n  overflow: auto;\n  width: 100%;\n  box-sizing: border-box;\n  margin-bottom: 5px;\n  min-width: 0;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  min-width: 0;\n}\n\n.display-toolbar {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  display: flex;\n  gap: 8px;\n  z-index: 10;\n}\n\n.markdown-content,\n.html-content {\n  flex: 1;\n  font-size: 14px;\n  line-height: 1.6;\n  width: 100%;\n  padding: 20px 10px 5px 20px; /* top right bottom left */\n  box-sizing: border-box;\n  overflow: auto;\n  min-height: 0;\n}\n\n.details-content {\n  padding: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.details-content .artifact-meta {\n  margin-bottom: 0;\n  padding: 20px;\n}\n\n.details-content .meta-item.full-width {\n  grid-column: 1 / -1;\n}\n\n.attributes-section {\n  margin-top: 24px;\n  padding: 24px;\n  background: #F9FAFB;\n  border-radius: 8px;\n}\n\n.attributes-section h4 {\n  margin: 0 0 16px 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: #111827;\n}\n\n.attributes-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  gap: 16px;\n}\n\n.attribute-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px;\n  background: white;\n  border-radius: 6px;\n  border: 1px solid #E5E7EB;\n}\n\n.attribute-item label {\n  font-size: 11px;\n  font-weight: 600;\n  color: #6B7280;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item span {\n  font-size: 13px;\n  color: #111827;\n  word-break: break-word;\n}\n\n.attribute-empty-pill {\n  display: inline-block;\n  padding: 2px 8px;\n  background: #F3F4F6;\n  color: #9CA3AF;\n  font-size: 11px;\n  font-weight: 500;\n  border-radius: 4px;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Links Tab */\n.links-container {\n  padding: 20px;\n}\n\n.links-section {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.link-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  background: #F9FAFB;\n  border: 1px solid #E5E7EB;\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n}\n\n.link-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon i {\n  font-size: 18px;\n  color: #1e40af;\n}\n\n.link-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.link-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: #111827;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type {\n  font-size: 12px;\n  color: #6B7280;\n  margin-top: 2px;\n}\n\n.link-actions {\n  display: flex;\n  gap: 8px;\n}\n\n.link-action-btn {\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: white;\n  border: 1px solid #D1D5DB;\n  border-radius: 6px;\n  color: #1e40af;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.link-action-btn:hover:not(:disabled) {\n  background: #EFF6FF;\n  border-color: #1e40af;\n}\n\n.link-action-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  color: #9CA3AF;\n}\n\n.links-container .empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 48px 24px;\n  color: #9CA3AF;\n  text-align: center;\n}\n\n.links-container .empty-state i {\n  font-size: 48px;\n  margin-bottom: 16px;\n  opacity: 0.3;\n}\n\n.links-container .empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n"] }]
     }], null, { artifactId: [{
             type: Input
         }], currentUser: [{
@@ -977,8 +1098,16 @@ export class ArtifactViewerPanelComponent {
             type: Input
         }], refreshTrigger: [{
             type: Input
+        }], viewContext: [{
+            type: Input
+        }], contextCollectionId: [{
+            type: Input
         }], closed: [{
             type: Output
+        }], saveToCollectionRequested: [{
+            type: Output
+        }], navigateToLink: [{
+            type: Output
         }], pluginViewer: [{
             type: ViewChild,
             args: [ArtifactTypePluginViewerComponent]