@memberjunction/ng-artifacts 2.109.0 → 2.110.0

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

@@ -103,9 +103,9 @@ function ArtifactViewerPanelComponent_Conditional_20_For_3_Conditional_1_Templat
 } }
 function ArtifactViewerPanelComponent_Conditional_20_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵelementStart(0, "button", 42);
     i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_For_3_Template_button_click_0_listener() { const tab_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.SetActiveTab(tab_r7)); });
-    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_For_3_Conditional_1_Template, 1, 2, "i", 36);
+    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_For_3_Conditional_1_Template, 1, 2, "i", 43);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -117,79 +117,83 @@ function ArtifactViewerPanelComponent_Conditional_20_For_3_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", tab_r7, " ");
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-artifact-type-plugin-viewer", 37);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
+    i0.ɵɵelement(1, "mj-artifact-type-plugin-viewer", 45);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("display", ctx_r0.activeTab === "display" ? "block" : "none");
+    i0.ɵɵadvance();
     i0.ɵɵproperty("artifactVersion", ctx_r0.artifactVersion)("artifactTypeName", ctx_r0.artifactTypeName)("contentType", ctx_r0.contentType)("readonly", true);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 43);
-    i0.ɵɵelement(1, "markdown", 45);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "markdown", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵproperty("data", ctx_r0.displayMarkdown);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 44);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 52);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("innerHTML", ctx_r0.displayHtml, i0.ɵɵsanitizeHtml);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "button", 39);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onPrintDisplayContent()); });
-    i0.ɵɵelement(2, "i", 40);
+    i0.ɵɵelementStart(0, "div", 46)(1, "button", 47);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onPrintDisplayContent()); });
+    i0.ɵɵelement(2, "i", 48);
     i0.ɵɵtext(3, " Print ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 41);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onCopyDisplayContent()); });
-    i0.ɵɵelement(5, "i", 42);
+    i0.ɵɵelementStart(4, "button", 49);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onCopyDisplayContent()); });
+    i0.ɵɵelement(5, "i", 50);
     i0.ɵɵtext(6, " Copy ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Conditional_7_Template, 2, 1, "div", 43)(8, ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Conditional_8_Template, 1, 1, "div", 44);
+    i0.ɵɵtemplate(7, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Conditional_7_Template, 2, 1, "div", 51)(8, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_Conditional_8_Template, 1, 1, "div", 52);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(7);
     i0.ɵɵconditional(ctx_r0.displayMarkdown ? 7 : ctx_r0.displayHtml ? 8 : -1);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
-    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_1_Template, 1, 4, "mj-artifact-type-plugin-viewer", 37)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Conditional_2_Template, 9, 1);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_1_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);
+    i0.ɵɵconditional(ctx_r0.displayMarkdown || ctx_r0.displayHtml ? 1 : -1);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48)(1, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "label");
     i0.ɵɵtext(2, "Artifact Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.artifact.Description);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 48)(1, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "label");
     i0.ɵɵtext(2, "Version Description");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_33_For_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -198,16 +202,16 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_2
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(attr_r9.Value);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_33_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 56);
     i0.ɵɵtext(1, "Empty");
     i0.ɵɵelementEnd();
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 51)(1, "label");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_33_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55)(1, "label");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_For_5_Conditional_3_Template, 2, 1, "span")(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_For_5_Conditional_4_Template, 2, 0, "span", 52);
+    i0.ɵɵtemplate(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_33_For_5_Conditional_3_Template, 2, 1, "span")(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_33_For_5_Conditional_4_Template, 2, 0, "span", 56);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const attr_r9 = ctx.$implicit;
@@ -216,86 +220,38 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_2
     i0.ɵɵadvance();
     i0.ɵɵconditional(attr_r9.Value ? 3 : 4);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 49)(1, "h4");
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "h4");
     i0.ɵɵtext(2, "Version Attributes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 50);
-    i0.ɵɵrepeaterCreate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_For_5_Template, 5, 2, "div", 51, _forTrack0);
+    i0.ɵɵelementStart(3, "div", 54);
+    i0.ɵɵrepeaterCreate(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_33_For_5_Template, 5, 2, "div", 55, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r0.filteredAttributes);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33)(1, "div", 46)(2, "div", 47)(3, "label");
-    i0.ɵɵtext(4, "Type");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span");
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 47)(8, "label");
-    i0.ɵɵtext(9, "Version");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span");
-    i0.ɵɵtext(11);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 47)(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", 47)(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_6_Conditional_24_Template, 5, 1, "div", 48)(25, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_25_Template, 5, 1, "div", 48);
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(26, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Conditional_26_Template, 6, 0, "div", 49);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(ctx_r0.artifact.Type);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate((ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.VersionNumber) || 1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(17, 7, ctx_r0.artifact.__mj_CreatedAt, "short"));
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(23, 10, ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.__mj_UpdatedAt, "short"));
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r0.artifact.Description ? 24 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description) && ctx_r0.artifact.Description && (ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description) !== ctx_r0.artifact.Description ? 25 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.filteredAttributes.length > 0 ? 26 : -1);
-} }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 57);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 59);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 58);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56);
-    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Conditional_2_Template, 1, 0, "i", 57)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Conditional_3_Template, 1, 0, "i", 58);
+    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58);
+    i0.ɵɵtemplate(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Conditional_2_Template, 1, 0, "i", 59)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Conditional_3_Template, 1, 0, "i", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 59)(5, "div", 60);
+    i0.ɵɵelementStart(4, "div", 61)(5, "div", 62);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 61);
+    i0.ɵɵelementStart(7, "div", 63);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 62)(10, "button", 63);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Template_button_click_10_listener() { const link_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onNavigateToLink(link_r11)); });
-    i0.ɵɵelement(11, "i", 64);
+    i0.ɵɵelementStart(9, "div", 64)(10, "button", 65);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Template_button_click_10_listener() { const link_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onNavigateToLink(link_r11)); });
+    i0.ɵɵelement(11, "i", 66);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const link_r11 = ctx.$implicit;
@@ -308,70 +264,67 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", !link_r11.hasAccess)("title", link_r11.hasAccess ? "Open" : "No access");
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53);
-    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_For_2_Template, 12, 5, "div", 55, _forTrack1);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵrepeaterCreate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_35_For_2_Template, 12, 5, "div", 57, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r0.linksToShow);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54);
-    i0.ɵɵelement(1, "i", 65);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 67);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No links available");
     i0.ɵɵelementEnd()();
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_1_Template, 3, 0, "div", 53)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Conditional_2_Template, 4, 0, "div", 54);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.linksToShow.length > 0 ? 1 : 2);
-} }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 67);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 69);
 } if (rf & 2) {
     const tabData_r12 = i0.ɵɵnextContext();
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("innerHTML", ctx_r0.RenderMarkdown(tabData_r12.content), i0.ɵɵsanitizeHtml);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_2_Template(rf, ctx) { if (rf & 1) {
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 72)(2, "button", 73);
-    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onCopyToClipboard()); });
-    i0.ɵɵelement(3, "i", 42);
+    i0.ɵɵelementStart(0, "div", 70)(1, "div", 74)(2, "button", 75);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onCopyToClipboard()); });
+    i0.ɵɵelement(3, "i", 50);
     i0.ɵɵtext(4, " Copy ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 74);
-    i0.ɵɵelement(6, "mj-code-editor", 75);
+    i0.ɵɵelementStart(5, "div", 76);
+    i0.ɵɵelement(6, "mj-code-editor", 77);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const tabData_r12 = i0.ɵɵnextContext();
     i0.ɵɵadvance(6);
     i0.ɵɵproperty("value", tabData_r12.content)("language", "json")("readonly", true)("lineWrapping", true);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 69);
-    i0.ɵɵelement(1, "mj-code-editor", 75);
-    i0.ɵɵelementEnd();
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 71)(1, "div", 78)(2, "button", 79);
+    i0.ɵɵlistener("click", function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r14); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.onCopyToClipboard()); });
+    i0.ɵɵelement(3, "i", 50);
+    i0.ɵɵtext(4, " Copy ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 80);
+    i0.ɵɵelement(6, "mj-code-editor", 77);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const tabData_r12 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(6);
     i0.ɵɵproperty("value", tabData_r12.content)("language", tabData_r12.language || "typescript")("readonly", true)("lineWrapping", true);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 70);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 72);
 } if (rf & 2) {
     const tabData_r12 = i0.ɵɵnextContext();
     i0.ɵɵproperty("innerHTML", tabData_r12.content, i0.ɵɵsanitizeHtml);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "pre", 71);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "pre", 73);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -379,17 +332,17 @@ function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(tabData_r12.content);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_1_Template, 1, 1, "div", 67)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_2_Template, 7, 4, "div", 68)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_3_Template, 2, 4, "div", 69)(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_4_Template, 1, 1, "div", 70)(5, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Case_5_Template, 2, 1, "pre", 71);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵtemplate(1, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_1_Template, 1, 1, "div", 69)(2, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_2_Template, 7, 4, "div", 70)(3, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_3_Template, 7, 4, "div", 71)(4, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_4_Template, 1, 1, "div", 72)(5, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Case_5_Template, 2, 1, "pre", 73);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_4_0;
     i0.ɵɵadvance();
     i0.ɵɵconditional((tmp_4_0 = ctx.type) === "markdown" ? 1 : tmp_4_0 === "json" ? 2 : tmp_4_0 === "code" ? 3 : tmp_4_0 === "html" ? 4 : tmp_4_0 === "plaintext" ? 5 : -1);
 } }
-function ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Conditional_0_Template, 6, 1, "div", 66);
+function ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Conditional_0_Template, 6, 1, "div", 68);
 } if (rf & 2) {
     let tmp_2_0;
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -400,20 +353,72 @@ function ArtifactViewerPanelComponent_Conditional_20_Template(rf, ctx) { if (rf
     i0.ɵɵrepeaterCreate(2, ArtifactViewerPanelComponent_Conditional_20_For_3_Template, 3, 4, "button", 30, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "div", 31);
-    i0.ɵɵtemplate(5, ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Template, 3, 1, "div", 32)(6, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Template, 27, 13, "div", 33)(7, ArtifactViewerPanelComponent_Conditional_20_Conditional_7_Template, 3, 1, "div", 34)(8, ArtifactViewerPanelComponent_Conditional_20_Conditional_8_Template, 1, 1);
+    i0.ɵɵtemplate(5, ArtifactViewerPanelComponent_Conditional_20_Conditional_5_Template, 2, 6, "div", 32)(6, ArtifactViewerPanelComponent_Conditional_20_Conditional_6_Template, 2, 1, "div", 33);
+    i0.ɵɵelementStart(7, "div", 34)(8, "div", 35)(9, "div", 36)(10, "label");
+    i0.ɵɵtext(11, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 36)(15, "label");
+    i0.ɵɵtext(16, "Version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(19, "div", 36)(20, "label");
+    i0.ɵɵtext(21, "Created");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "span");
+    i0.ɵɵtext(23);
+    i0.ɵɵpipe(24, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(25, "div", 36)(26, "label");
+    i0.ɵɵtext(27, "Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(28, "span");
+    i0.ɵɵtext(29);
+    i0.ɵɵpipe(30, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(31, ArtifactViewerPanelComponent_Conditional_20_Conditional_31_Template, 5, 1, "div", 37)(32, ArtifactViewerPanelComponent_Conditional_20_Conditional_32_Template, 5, 1, "div", 37);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(33, ArtifactViewerPanelComponent_Conditional_20_Conditional_33_Template, 6, 0, "div", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "div", 39);
+    i0.ɵɵtemplate(35, ArtifactViewerPanelComponent_Conditional_20_Conditional_35_Template, 3, 0, "div", 40)(36, ArtifactViewerPanelComponent_Conditional_20_Conditional_36_Template, 4, 0, "div", 41);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(37, ArtifactViewerPanelComponent_Conditional_20_Conditional_37_Template, 1, 1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.allTabs);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r0.activeTab === "display" ? 5 : -1);
+    i0.ɵɵconditional(ctx_r0.hasPlugin && ctx_r0.artifactVersion && ctx_r0.artifactTypeName ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.activeTab === "display" && (!ctx_r0.hasPlugin || !ctx_r0.artifactVersion) ? 6 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("display", ctx_r0.activeTab === "details" ? "block" : "none");
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r0.artifact.Type);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate((ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.VersionNumber) || 1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(24, 15, ctx_r0.artifact.__mj_CreatedAt, "short"));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(30, 18, ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.__mj_UpdatedAt, "short"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.artifact.Description ? 31 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description) && ctx_r0.artifact.Description && (ctx_r0.artifactVersion == null ? null : ctx_r0.artifactVersion.Description) !== ctx_r0.artifact.Description ? 32 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "details" ? 6 : -1);
+    i0.ɵɵconditional(ctx_r0.filteredAttributes.length > 0 ? 33 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab === "links" ? 7 : -1);
+    i0.ɵɵstyleProp("display", ctx_r0.activeTab === "links" ? "block" : "none");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r0.activeTab !== "display" && ctx_r0.activeTab !== "details" && ctx_r0.activeTab !== "links" ? 8 : -1);
+    i0.ɵɵconditional(ctx_r0.linksToShow.length > 0 ? 35 : 36);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r0.activeTab !== "display" && ctx_r0.activeTab !== "details" && ctx_r0.activeTab !== "links" ? 37 : -1);
 } }
 export class ArtifactViewerPanelComponent {
     notificationService;
@@ -451,52 +456,47 @@ export class ArtifactViewerPanelComponent {
     originConversation = null;
     allCollections = [];
     hasAccessToOriginConversation = false;
-    // Cache plugin state to avoid losing it when switching tabs
-    cachedPluginShouldShowRaw = false;
-    cachedPluginIsElevated = false;
-    // Cache plugin tabs (populated once when plugin loads)
-    cachedPluginTabs = [];
     // Dynamic tabs from plugin
     get allTabs() {
-        // Start with Display tab
+        // Start with Display tab (cannot be removed)
         const tabs = ['Display'];
-        // Add cached plugin tabs
-        if (this.cachedPluginTabs.length > 0) {
-            const pluginTabLabels = this.cachedPluginTabs.map((t) => t.label);
+        // Get plugin tabs directly from plugin instance (no caching needed - plugin always exists)
+        if (this.pluginViewer?.pluginInstance?.GetAdditionalTabs) {
+            const pluginTabs = this.pluginViewer.pluginInstance.GetAdditionalTabs();
+            const pluginTabLabels = pluginTabs.map((t) => t.label);
             tabs.push(...pluginTabLabels);
         }
-        // Add base tabs
-        tabs.push('JSON', 'Details');
-        // Conditionally add Links tab if there are links to show
-        if (this.hasLinksTab) {
-            tabs.push('Links');
+        // Get tabs to remove from plugin (case-insensitive)
+        const removals = this.pluginViewer?.pluginInstance?.GetStandardTabRemovals?.() || [];
+        const removalsLower = removals.map(r => r.toLowerCase());
+        // Add standard tabs (unless plugin removed them)
+        if (!removalsLower.includes('json')) {
+            tabs.push('JSON');
         }
-        return tabs;
-    }
-    /**
-     * Called when plugin is loaded/changed to cache its tabs (avoids binding issues)
-     */
-    CachePluginTabs() {
-        const plugin = this.pluginViewer?.pluginInstance;
-        if (plugin?.GetAdditionalTabs) {
-            this.cachedPluginTabs = plugin.GetAdditionalTabs();
+        if (!removalsLower.includes('details')) {
+            tabs.push('Details');
         }
-        else {
-            this.cachedPluginTabs = [];
+        // Conditionally add Links tab if has links AND not removed by plugin
+        if (this.hasLinksTab && !removalsLower.includes('links')) {
+            tabs.push('Links');
         }
+        return tabs;
     }
     GetTabContent(tabName) {
-        // Check if this is a plugin-provided tab (use cached tabs - case-insensitive match)
-        const pluginTab = this.cachedPluginTabs.find((t) => t.label.toLowerCase() === tabName.toLowerCase());
-        if (pluginTab) {
-            const content = typeof pluginTab.content === 'function'
-                ? pluginTab.content()
-                : pluginTab.content;
-            return {
-                type: pluginTab.contentType,
-                content: content,
-                language: pluginTab.language
-            };
+        // Check if this is a plugin-provided tab (query directly from plugin - no cache needed)
+        if (this.pluginViewer?.pluginInstance?.GetAdditionalTabs) {
+            const pluginTabs = this.pluginViewer.pluginInstance.GetAdditionalTabs();
+            const pluginTab = pluginTabs.find((t) => t.label.toLowerCase() === tabName.toLowerCase());
+            if (pluginTab) {
+                const content = typeof pluginTab.content === 'function'
+                    ? pluginTab.content()
+                    : pluginTab.content;
+                return {
+                    type: pluginTab.contentType,
+                    content: content,
+                    language: pluginTab.language
+                };
+            }
         }
         // Handle base tabs
         switch (tabName.toLowerCase()) {
@@ -562,9 +562,6 @@ export class ArtifactViewerPanelComponent {
         try {
             this.isLoading = true;
             this.error = null;
-            // Reset cached plugin state when loading new artifact
-            this.cachedPluginShouldShowRaw = false;
-            this.cachedPluginIsElevated = false;
             const md = new Metadata();
             // Load artifact
             this.artifact = await md.GetEntityObject('MJ: Artifacts', this.currentUser);
@@ -626,10 +623,6 @@ export class ArtifactViewerPanelComponent {
         }
         finally {
             this.isLoading = false;
-            // Cache plugin tabs after loading (use setTimeout to ensure plugin is fully initialized)
-            setTimeout(() => {
-                this.CachePluginTabs();
-            }, 100);
         }
     }
     async loadArtifactType() {
@@ -714,16 +707,9 @@ export class ArtifactViewerPanelComponent {
         return !!this.artifactTypeDriverClass;
     }
     get hasJsonTab() {
-        // Try to get fresh plugin state if plugin viewer is available
+        // Query plugin directly (no cache needed - plugin always exists when it should)
         const pluginInstance = this.pluginViewer?.pluginInstance;
-        if (pluginInstance) {
-            // Update cache with current values
-            this.cachedPluginShouldShowRaw = pluginInstance.parentShouldShowRawContent;
-            this.cachedPluginIsElevated = pluginInstance.isShowingElevatedDisplay;
-        }
-        // Use cached value (or current value if plugin is available)
-        // This ensures the JSON tab doesn't disappear when switching to it
-        return this.cachedPluginShouldShowRaw;
+        return pluginInstance?.parentShouldShowRawContent || false;
     }
     get artifactTypeName() {
         return this.artifact?.Type || '';
@@ -877,10 +863,6 @@ export class ArtifactViewerPanelComponent {
         this.showVersionDropdown = false;
         // Load attributes for the selected version
         await this.loadVersionAttributes();
-        // Recache plugin tabs (version may have different metadata)
-        setTimeout(() => {
-            this.CachePluginTabs();
-        }, 100);
     }
     async onSaveToLibrary() {
         // Always show the collection picker modal
@@ -1203,7 +1185,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", 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-content"], [1, "display-content"], [1, "details-content"], [1, "links-container"], [1, "tab-btn", 3, "click"], [3, "class"], [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, "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"], [1, "fas", "fa-link"], [1, "dynamic-tab-content"], [1, "markdown-viewer", 3, "innerHTML"], [1, "json-viewer"], [1, "code-viewer"], [1, "html-viewer", 3, "innerHTML"], [1, "plaintext-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "value", "language", "readonly", "lineWrapping"]], 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-content"], [1, "plugin-container", 3, "display"], [1, "display-content"], [1, "details-content"], [1, "artifact-meta"], [1, "meta-item"], [1, "meta-item", "full-width"], [1, "attributes-section"], [1, "links-container"], [1, "links-section"], [1, "empty-state"], [1, "tab-btn", 3, "click"], [3, "class"], [1, "plugin-container"], [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, "attributes-list"], [1, "attribute-item"], [1, "attribute-empty-pill"], [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"], [1, "fas", "fa-link"], [1, "dynamic-tab-content"], [1, "markdown-viewer", 3, "innerHTML"], [1, "json-viewer"], [1, "code-viewer"], [1, "html-viewer", 3, "innerHTML"], [1, "plaintext-viewer"], [1, "json-toolbar"], ["title", "Copy JSON", 1, "btn-icon", 3, "click"], [1, "json-editor-container"], [2, "width", "100%", "height", "100%", 3, "value", "language", "readonly", "lineWrapping"], [1, "code-toolbar"], ["title", "Copy Code", 1, "btn-icon", 3, "click"], [1, "code-editor-container"]], 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);
@@ -1224,7 +1206,7 @@ export class ArtifactViewerPanelComponent {
             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, 9, 4, "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, 38, 21, "div", 17);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(5);
@@ -1247,11 +1229,11 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵconditional(ctx.error ? 19 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 20 : -1);
-        } }, dependencies: [i3.MarkdownComponent, i4.CodeEditorComponent, i5.ArtifactTypePluginViewerComponent, i6.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  padding: 7px;\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}\n\n\n\n.dynamic-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 24px; }\n.markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { font-size: 20px; }\n.markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 18px; }\n\n.markdown-viewer[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: none;\n  padding: 0;\n}\n\n.code-viewer[_ngcontent-%COMP%], .plaintext-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n}"] });
+        } }, dependencies: [i3.MarkdownComponent, i4.CodeEditorComponent, i5.ArtifactTypePluginViewerComponent, i6.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  padding: 7px;\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}\n\n\n\n.dynamic-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 24px; }\n.markdown-viewer[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { font-size: 20px; }\n.markdown-viewer[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] { font-size: 18px; }\n\n.markdown-viewer[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], .markdown-viewer[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n  background: none;\n  padding: 0;\n}\n\n.code-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.code-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.code-editor-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.plaintext-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\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                (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 (Dynamic) -->\n        <div class=\"tab-navigation\">\n          @for (tab of allTabs; track tab) {\n            <button class=\"tab-btn\"\n                    [class.active]=\"activeTab === tab.toLowerCase()\"\n                    (click)=\"SetActiveTab(tab)\">\n              @if (GetTabIcon(tab)) {\n                <i [class]=\"GetTabIcon(tab)!\"></i>\n              }\n              {{ tab }}\n            </button>\n          }\n        </div>\n\n        <!-- Tab Content (Dynamic) -->\n        <div class=\"tab-content\">\n          <!-- Display Tab - Special case for plugin rendering -->\n          @if (activeTab === 'display') {\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          <!-- Details Tab - Artifact metadata -->\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 - Conversations and Collections -->\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\n          <!-- Dynamic Plugin Tabs and Base Tabs (JSON, etc.) -->\n          @if (activeTab !== 'display' && activeTab !== 'details' && activeTab !== 'links') {\n            @if (GetTabContent(activeTab); as tabData) {\n              <div class=\"dynamic-tab-content\">\n                @switch (tabData.type) {\n                  @case ('markdown') {\n                    <div class=\"markdown-viewer\" [innerHTML]=\"RenderMarkdown(tabData.content)\"></div>\n                  }\n                  @case ('json') {\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                          [value]=\"tabData.content\"\n                          [language]=\"'json'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('code') {\n                    <div class=\"code-viewer\">\n                      <mj-code-editor\n                        [value]=\"tabData.content\"\n                        [language]=\"tabData.language || 'typescript'\"\n                        [readonly]=\"true\"\n                        [lineWrapping]=\"true\"\n                        style=\"width: 100%; height: 100%;\">\n                      </mj-code-editor>\n                    </div>\n                  }\n                  @case ('html') {\n                    <div class=\"html-viewer\" [innerHTML]=\"tabData.content\"></div>\n                  }\n                  @case ('plaintext') {\n                    <pre class=\"plaintext-viewer\">{{ tabData.content }}</pre>\n                  }\n                }\n              </div>\n            }\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  padding: 7px;\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\n/* Dynamic Tab Content Styles */\n.dynamic-tab-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer h1, .markdown-viewer h2, .markdown-viewer h3 {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer h1 { font-size: 24px; }\n.markdown-viewer h2 { font-size: 20px; }\n.markdown-viewer h3 { font-size: 18px; }\n\n.markdown-viewer p {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer ul, .markdown-viewer ol {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer code {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer pre {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer pre code {\n  background: none;\n  padding: 0;\n}\n\n.code-viewer, .plaintext-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\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 (Dynamic) -->\n        <div class=\"tab-navigation\">\n          @for (tab of allTabs; track tab) {\n            <button class=\"tab-btn\"\n                    [class.active]=\"activeTab === tab.toLowerCase()\"\n                    (click)=\"SetActiveTab(tab)\">\n              @if (GetTabIcon(tab)) {\n                <i [class]=\"GetTabIcon(tab)!\"></i>\n              }\n              {{ tab }}\n            </button>\n          }\n        </div>\n\n        <!-- Tab Content (Dynamic) -->\n        <div class=\"tab-content\">\n          <!-- Plugin Viewer - Created once, kept alive, shown/hidden with CSS -->\n          @if (hasPlugin && artifactVersion && artifactTypeName) {\n            <div class=\"plugin-container\" [style.display]=\"activeTab === 'display' ? 'block' : 'none'\">\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            </div>\n          }\n\n          <!-- Display Tab - Fallback content when no plugin -->\n          @if (activeTab === 'display' && (!hasPlugin || !artifactVersion)) {\n            <div class=\"display-content\">\n              @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          <!-- Details Tab - Artifact metadata (always in DOM, hidden with CSS) -->\n          <div class=\"details-content\" [style.display]=\"activeTab === 'details' ? 'block' : 'none'\">\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          <!-- Links Tab - Conversations and Collections (always in DOM, hidden with CSS) -->\n          <div class=\"links-container\" [style.display]=\"activeTab === 'links' ? 'block' : 'none'\">\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          <!-- Dynamic Plugin Tabs and Base Tabs (JSON, etc.) -->\n          @if (activeTab !== 'display' && activeTab !== 'details' && activeTab !== 'links') {\n            @if (GetTabContent(activeTab); as tabData) {\n              <div class=\"dynamic-tab-content\">\n                @switch (tabData.type) {\n                  @case ('markdown') {\n                    <div class=\"markdown-viewer\" [innerHTML]=\"RenderMarkdown(tabData.content)\"></div>\n                  }\n                  @case ('json') {\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                          [value]=\"tabData.content\"\n                          [language]=\"'json'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('code') {\n                    <div class=\"code-viewer\">\n                      <div class=\"code-toolbar\">\n                        <button class=\"btn-icon\" title=\"Copy Code\" (click)=\"onCopyToClipboard()\">\n                          <i class=\"fas fa-copy\"></i> Copy\n                        </button>\n                      </div>\n                      <div class=\"code-editor-container\">\n                        <mj-code-editor\n                          [value]=\"tabData.content\"\n                          [language]=\"tabData.language || 'typescript'\"\n                          [readonly]=\"true\"\n                          [lineWrapping]=\"true\"\n                          style=\"width: 100%; height: 100%;\">\n                        </mj-code-editor>\n                      </div>\n                    </div>\n                  }\n                  @case ('html') {\n                    <div class=\"html-viewer\" [innerHTML]=\"tabData.content\"></div>\n                  }\n                  @case ('plaintext') {\n                    <pre class=\"plaintext-viewer\">{{ tabData.content }}</pre>\n                  }\n                }\n              </div>\n            }\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  padding: 7px;\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\n/* Dynamic Tab Content Styles */\n.dynamic-tab-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  padding: 16px;\n}\n\n.markdown-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n  line-height: 1.6;\n}\n\n.markdown-viewer h1, .markdown-viewer h2, .markdown-viewer h3 {\n  margin-top: 24px;\n  margin-bottom: 12px;\n  font-weight: 600;\n}\n\n.markdown-viewer h1 { font-size: 24px; }\n.markdown-viewer h2 { font-size: 20px; }\n.markdown-viewer h3 { font-size: 18px; }\n\n.markdown-viewer p {\n  margin-bottom: 12px;\n}\n\n.markdown-viewer ul, .markdown-viewer ol {\n  margin-bottom: 12px;\n  padding-left: 24px;\n}\n\n.markdown-viewer code {\n  background: #f3f4f6;\n  padding: 2px 6px;\n  border-radius: 3px;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n}\n\n.markdown-viewer pre {\n  background: #f3f4f6;\n  padding: 12px;\n  border-radius: 6px;\n  overflow-x: auto;\n  margin-bottom: 12px;\n}\n\n.markdown-viewer pre code {\n  background: none;\n  padding: 0;\n}\n\n.code-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.code-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.code-editor-container {\n  flex: 1;\n  overflow: hidden;\n  min-height: 0;\n}\n\n.plaintext-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 12px;\n  background: #f9fafb;\n  font-family: 'Courier New', monospace;\n  font-size: 13px;\n  white-space: pre-wrap;\n}\n\n.html-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: white;\n}\n"] }]
     }], () => [{ type: i1.MJNotificationService }, { type: i2.DomSanitizer }], { artifactId: [{
             type: Input
         }], currentUser: [{