@memberjunction/ng-artifacts 5.11.0 → 5.12.0

package/dist/lib/artifacts.module.d.ts

@@ -21,6 +21,7 @@ import * as i19 from "@memberjunction/ng-notifications";
 import * as i20 from "@memberjunction/ng-query-viewer";
 import * as i21 from "@memberjunction/ng-shared-generic";
 import * as i22 from "@memberjunction/ng-trees";
+import * as i23 from "./components/plugins/component-feedback-panel/component-feedback-panel.component";
 /**
  * Module for artifact viewer plugin system.
  * Provides components for viewing different types of artifacts (JSON, Code, Markdown, HTML, SVG, Components).
@@ -31,7 +32,7 @@ import * as i22 from "@memberjunction/ng-trees";
 export declare class ArtifactsModule {
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ArtifactsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ArtifactsModule, [typeof i1.ArtifactTypePluginViewerComponent, typeof i2.ArtifactViewerPanelComponent, typeof i3.ArtifactVersionHistoryComponent, typeof i4.ArtifactMessageCardComponent, typeof i5.JsonArtifactViewerComponent, typeof i6.CodeArtifactViewerComponent, typeof i7.MarkdownArtifactViewerComponent, typeof i8.HtmlArtifactViewerComponent, typeof i9.SvgArtifactViewerComponent, typeof i10.ComponentArtifactViewerComponent, typeof i11.DataArtifactViewerComponent, typeof i12.SaveQueryPanelComponent, typeof i13.DataRequirementsViewerComponent], [typeof i14.CommonModule, typeof i15.FormsModule, typeof i16.MarkdownModule, typeof i17.CodeEditorModule, typeof i18.MJReactModule, typeof i19.MJNotificationsModule, typeof i20.QueryViewerModule, typeof i21.SharedGenericModule, typeof i22.NgTreesModule], [typeof i1.ArtifactTypePluginViewerComponent, typeof i2.ArtifactViewerPanelComponent, typeof i3.ArtifactVersionHistoryComponent, typeof i4.ArtifactMessageCardComponent, typeof i5.JsonArtifactViewerComponent, typeof i6.CodeArtifactViewerComponent, typeof i7.MarkdownArtifactViewerComponent, typeof i8.HtmlArtifactViewerComponent, typeof i9.SvgArtifactViewerComponent, typeof i10.ComponentArtifactViewerComponent, typeof i11.DataArtifactViewerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ArtifactsModule, [typeof i1.ArtifactTypePluginViewerComponent, typeof i2.ArtifactViewerPanelComponent, typeof i3.ArtifactVersionHistoryComponent, typeof i4.ArtifactMessageCardComponent, typeof i5.JsonArtifactViewerComponent, typeof i6.CodeArtifactViewerComponent, typeof i7.MarkdownArtifactViewerComponent, typeof i8.HtmlArtifactViewerComponent, typeof i9.SvgArtifactViewerComponent, typeof i10.ComponentArtifactViewerComponent, typeof i11.DataArtifactViewerComponent, typeof i12.SaveQueryPanelComponent, typeof i13.DataRequirementsViewerComponent], [typeof i14.CommonModule, typeof i15.FormsModule, typeof i16.MarkdownModule, typeof i17.CodeEditorModule, typeof i18.MJReactModule, typeof i19.MJNotificationsModule, typeof i20.QueryViewerModule, typeof i21.SharedGenericModule, typeof i22.NgTreesModule, typeof i23.ComponentFeedbackPanelComponent], [typeof i1.ArtifactTypePluginViewerComponent, typeof i2.ArtifactViewerPanelComponent, typeof i3.ArtifactVersionHistoryComponent, typeof i4.ArtifactMessageCardComponent, typeof i5.JsonArtifactViewerComponent, typeof i6.CodeArtifactViewerComponent, typeof i7.MarkdownArtifactViewerComponent, typeof i8.HtmlArtifactViewerComponent, typeof i9.SvgArtifactViewerComponent, typeof i10.ComponentArtifactViewerComponent, typeof i11.DataArtifactViewerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ArtifactsModule>;
 }
 //# sourceMappingURL=artifacts.module.d.ts.map

package/dist/lib/artifacts.module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"artifacts.module.d.ts","sourceRoot":"","sources":["../../src/lib/artifacts.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BA;;;;;;GAMG;AACH,qBAwDa,eAAe;;yCAAf,eAAe;0CAAf,eAAe;0CAAf,eAAe;CAc3B"}
+{"version":3,"file":"artifacts.module.d.ts","sourceRoot":"","sources":["../../src/lib/artifacts.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+BA;;;;;;GAMG;AACH,qBAyDa,eAAe;;yCAAf,eAAe;0CAAf,eAAe;0CAAf,eAAe;CAc3B"}

package/dist/lib/artifacts.module.js

@@ -19,6 +19,7 @@ import { ComponentArtifactViewerComponent } from './components/plugins/component
 import { DataArtifactViewerComponent } from './components/plugins/data-artifact-viewer.component';
 import { SaveQueryPanelComponent } from './components/plugins/save-query-dialog.component';
 import { DataRequirementsViewerComponent } from './components/plugins/data-requirements-viewer/data-requirements-viewer.component';
+import { ComponentFeedbackPanelComponent } from './components/plugins/component-feedback-panel/component-feedback-panel.component';
 // Import artifact type plugin viewer component
 import { ArtifactTypePluginViewerComponent } from './components/artifact-type-plugin-viewer.component';
 import { ArtifactVersionHistoryComponent } from './components/artifact-version-history.component';
@@ -56,7 +57,8 @@ export class ArtifactsModule {
             MJNotificationsModule,
             QueryViewerModule,
             SharedGenericModule,
-            NgTreesModule] });
+            NgTreesModule,
+            ComponentFeedbackPanelComponent] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactsModule, [{
         type: NgModule,
@@ -89,7 +91,8 @@ export class ArtifactsModule {
                     MJNotificationsModule,
                     QueryViewerModule,
                     SharedGenericModule,
-                    NgTreesModule
+                    NgTreesModule,
+                    ComponentFeedbackPanelComponent
                 ],
                 exports: [
                     // Export artifact type plugin viewer
@@ -137,7 +140,8 @@ export class ArtifactsModule {
         MJNotificationsModule,
         QueryViewerModule,
         SharedGenericModule,
-        NgTreesModule], exports: [
+        NgTreesModule,
+        ComponentFeedbackPanelComponent], exports: [
         // Export artifact type plugin viewer
         ArtifactTypePluginViewerComponent,
         // Export artifact viewer UI components

package/dist/lib/artifacts.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"artifacts.module.js","sourceRoot":"","sources":["../../src/lib/artifacts.module.ts"],"names":[],"mappings":"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","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MarkdownModule } from '@memberjunction/ng-markdown';\n\n// Import MJ modules\nimport { CodeEditorModule } from '@memberjunction/ng-code-editor';\nimport { MJReactModule } from '@memberjunction/ng-react';\nimport { MJNotificationsModule } from '@memberjunction/ng-notifications';\nimport { QueryViewerModule } from '@memberjunction/ng-query-viewer';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\nimport { NgTreesModule } from '@memberjunction/ng-trees';\n\n// Import plugin components (note: base component is abstract and NOT declared)\nimport { JsonArtifactViewerComponent } from './components/plugins/json-artifact-viewer.component';\nimport { CodeArtifactViewerComponent } from './components/plugins/code-artifact-viewer.component';\nimport { MarkdownArtifactViewerComponent } from './components/plugins/markdown-artifact-viewer.component';\nimport { HtmlArtifactViewerComponent } from './components/plugins/html-artifact-viewer.component';\nimport { SvgArtifactViewerComponent } from './components/plugins/svg-artifact-viewer.component';\nimport { ComponentArtifactViewerComponent } from './components/plugins/component-artifact-viewer.component';\nimport { DataArtifactViewerComponent } from './components/plugins/data-artifact-viewer.component';\nimport { SaveQueryPanelComponent } from './components/plugins/save-query-dialog.component';\nimport { DataRequirementsViewerComponent } from './components/plugins/data-requirements-viewer/data-requirements-viewer.component';\n\n// Import artifact type plugin viewer component\nimport { ArtifactTypePluginViewerComponent } from './components/artifact-type-plugin-viewer.component';\nimport { ArtifactVersionHistoryComponent } from './components/artifact-version-history.component';\nimport { ArtifactViewerPanelComponent } from './components/artifact-viewer-panel.component';\nimport { ArtifactMessageCardComponent } from './components/artifact-message-card.component';\n\n/**\n * Module for artifact viewer plugin system.\n * Provides components for viewing different types of artifacts (JSON, Code, Markdown, HTML, SVG, Components).\n *\n * Plugins are automatically registered via @RegisterClass decorator and can be instantiated\n * using MJGlobal.Instance.ClassFactory.CreateInstance('PluginClassName').\n */\n@NgModule({\n  declarations: [\n    // Artifact type plugin viewer (loads appropriate plugin based on DriverClass)\n    ArtifactTypePluginViewerComponent,\n\n    // Artifact viewer UI components\n    ArtifactViewerPanelComponent,\n    ArtifactVersionHistoryComponent,\n    ArtifactMessageCardComponent,\n\n    // Plugin components\n    JsonArtifactViewerComponent,\n    CodeArtifactViewerComponent,\n    MarkdownArtifactViewerComponent,\n    HtmlArtifactViewerComponent,\n    SvgArtifactViewerComponent,\n    ComponentArtifactViewerComponent,\n    DataArtifactViewerComponent,\n    SaveQueryPanelComponent,\n\n    // Custom tab components (used by plugins via dynamic component tabs)\n    DataRequirementsViewerComponent\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    MarkdownModule,\n    CodeEditorModule,\n    MJReactModule,\n    MJNotificationsModule,\n    QueryViewerModule,\n    SharedGenericModule,\n    NgTreesModule\n  ],\n  exports: [\n    // Export artifact type plugin viewer\n    ArtifactTypePluginViewerComponent,\n\n    // Export artifact viewer UI components\n    ArtifactViewerPanelComponent,\n    ArtifactVersionHistoryComponent,\n    ArtifactMessageCardComponent,\n\n    // Export plugin components\n    JsonArtifactViewerComponent,\n    CodeArtifactViewerComponent,\n    MarkdownArtifactViewerComponent,\n    HtmlArtifactViewerComponent,\n    SvgArtifactViewerComponent,\n    ComponentArtifactViewerComponent,\n    DataArtifactViewerComponent\n  ],\n  providers: [\n    // Plugins are registered via @RegisterClass decorator on component classes, no providers needed\n  ]\n})\nexport class ArtifactsModule {\n  constructor() {\n    // Ensure plugin components are registered on module load by referencing their classes\n    // The @RegisterClass decorator on each component handles the actual registration with MJGlobal\n    [\n      JsonArtifactViewerComponent,\n      CodeArtifactViewerComponent,\n      MarkdownArtifactViewerComponent,\n      HtmlArtifactViewerComponent,\n      SvgArtifactViewerComponent,\n      ComponentArtifactViewerComponent,\n      DataArtifactViewerComponent\n    ];\n  }\n}\n"]}
+{"version":3,"file":"artifacts.module.js","sourceRoot":"","sources":["../../src/lib/artifacts.module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,oBAAoB;AACpB,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,+EAA+E;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,qDAAqD,CAAC;AAClG,OAAO,EAAE,2BAA2B,EAAE,MAAM,qDAAqD,CAAC;AAClG,OAAO,EAAE,+BAA+B,EAAE,MAAM,yDAAyD,CAAC;AAC1G,OAAO,EAAE,2BAA2B,EAAE,MAAM,qDAAqD,CAAC;AAClG,OAAO,EAAE,0BAA0B,EAAE,MAAM,oDAAoD,CAAC;AAChG,OAAO,EAAE,gCAAgC,EAAE,MAAM,0DAA0D,CAAC;AAC5G,OAAO,EAAE,2BAA2B,EAAE,MAAM,qDAAqD,CAAC;AAClG,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,+BAA+B,EAAE,MAAM,kFAAkF,CAAC;AACnI,OAAO,EAAE,+BAA+B,EAAE,MAAM,kFAAkF,CAAC;AAEnI,+CAA+C;AAC/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,oDAAoD,CAAC;AACvG,OAAO,EAAE,+BAA+B,EAAE,MAAM,iDAAiD,CAAC;AAClG,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAC5F,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;;AAE5F;;;;;;GAMG;AA0DH,MAAM,OAAO,eAAe;IAC1B;QACE,sFAAsF;QACtF,+FAA+F;QAC/F;YACE,2BAA2B;YAC3B,2BAA2B;YAC3B,+BAA+B;YAC/B,2BAA2B;YAC3B,0BAA0B;YAC1B,gCAAgC;YAChC,2BAA2B;SAC5B,CAAC;IACJ,CAAC;yGAbU,eAAe;4DAAf,eAAe;gEAjCxB,YAAY;YACZ,WAAW;YACX,cAAc;YACd,gBAAgB;YAChB,aAAa;YACb,qBAAqB;YACrB,iBAAiB;YACjB,mBAAmB;YACnB,aAAa;YACb,+BAA+B;;iFAwBtB,eAAe;cAzD3B,QAAQ;eAAC;gBACR,YAAY,EAAE;oBACZ,8EAA8E;oBAC9E,iCAAiC;oBAEjC,gCAAgC;oBAChC,4BAA4B;oBAC5B,+BAA+B;oBAC/B,4BAA4B;oBAE5B,oBAAoB;oBACpB,2BAA2B;oBAC3B,2BAA2B;oBAC3B,+BAA+B;oBAC/B,2BAA2B;oBAC3B,0BAA0B;oBAC1B,gCAAgC;oBAChC,2BAA2B;oBAC3B,uBAAuB;oBAEvB,qEAAqE;oBACrE,+BAA+B;iBAChC;gBACD,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,cAAc;oBACd,gBAAgB;oBAChB,aAAa;oBACb,qBAAqB;oBACrB,iBAAiB;oBACjB,mBAAmB;oBACnB,aAAa;oBACb,+BAA+B;iBAChC;gBACD,OAAO,EAAE;oBACP,qCAAqC;oBACrC,iCAAiC;oBAEjC,uCAAuC;oBACvC,4BAA4B;oBAC5B,+BAA+B;oBAC/B,4BAA4B;oBAE5B,2BAA2B;oBAC3B,2BAA2B;oBAC3B,2BAA2B;oBAC3B,+BAA+B;oBAC/B,2BAA2B;oBAC3B,0BAA0B;oBAC1B,gCAAgC;oBAChC,2BAA2B;iBAC5B;gBACD,SAAS,EAAE;gBACT,gGAAgG;iBACjG;aACF;;wFACY,eAAe;QAvDxB,8EAA8E;QAC9E,iCAAiC;QAEjC,gCAAgC;QAChC,4BAA4B;QAC5B,+BAA+B;QAC/B,4BAA4B;QAE5B,oBAAoB;QACpB,2BAA2B;QAC3B,2BAA2B;QAC3B,+BAA+B;QAC/B,2BAA2B;QAC3B,0BAA0B;QAC1B,gCAAgC;QAChC,2BAA2B;QAC3B,uBAAuB;QAEvB,qEAAqE;QACrE,+BAA+B,aAG/B,YAAY;QACZ,WAAW;QACX,cAAc;QACd,gBAAgB;QAChB,aAAa;QACb,qBAAqB;QACrB,iBAAiB;QACjB,mBAAmB;QACnB,aAAa;QACb,+BAA+B;QAG/B,qCAAqC;QACrC,iCAAiC;QAEjC,uCAAuC;QACvC,4BAA4B;QAC5B,+BAA+B;QAC/B,4BAA4B;QAE5B,2BAA2B;QAC3B,2BAA2B;QAC3B,2BAA2B;QAC3B,+BAA+B;QAC/B,2BAA2B;QAC3B,0BAA0B;QAC1B,gCAAgC;QAChC,2BAA2B","sourcesContent":["import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MarkdownModule } from '@memberjunction/ng-markdown';\n\n// Import MJ modules\nimport { CodeEditorModule } from '@memberjunction/ng-code-editor';\nimport { MJReactModule } from '@memberjunction/ng-react';\nimport { MJNotificationsModule } from '@memberjunction/ng-notifications';\nimport { QueryViewerModule } from '@memberjunction/ng-query-viewer';\nimport { SharedGenericModule } from '@memberjunction/ng-shared-generic';\nimport { NgTreesModule } from '@memberjunction/ng-trees';\n\n// Import plugin components (note: base component is abstract and NOT declared)\nimport { JsonArtifactViewerComponent } from './components/plugins/json-artifact-viewer.component';\nimport { CodeArtifactViewerComponent } from './components/plugins/code-artifact-viewer.component';\nimport { MarkdownArtifactViewerComponent } from './components/plugins/markdown-artifact-viewer.component';\nimport { HtmlArtifactViewerComponent } from './components/plugins/html-artifact-viewer.component';\nimport { SvgArtifactViewerComponent } from './components/plugins/svg-artifact-viewer.component';\nimport { ComponentArtifactViewerComponent } from './components/plugins/component-artifact-viewer.component';\nimport { DataArtifactViewerComponent } from './components/plugins/data-artifact-viewer.component';\nimport { SaveQueryPanelComponent } from './components/plugins/save-query-dialog.component';\nimport { DataRequirementsViewerComponent } from './components/plugins/data-requirements-viewer/data-requirements-viewer.component';\nimport { ComponentFeedbackPanelComponent } from './components/plugins/component-feedback-panel/component-feedback-panel.component';\n\n// Import artifact type plugin viewer component\nimport { ArtifactTypePluginViewerComponent } from './components/artifact-type-plugin-viewer.component';\nimport { ArtifactVersionHistoryComponent } from './components/artifact-version-history.component';\nimport { ArtifactViewerPanelComponent } from './components/artifact-viewer-panel.component';\nimport { ArtifactMessageCardComponent } from './components/artifact-message-card.component';\n\n/**\n * Module for artifact viewer plugin system.\n * Provides components for viewing different types of artifacts (JSON, Code, Markdown, HTML, SVG, Components).\n *\n * Plugins are automatically registered via @RegisterClass decorator and can be instantiated\n * using MJGlobal.Instance.ClassFactory.CreateInstance('PluginClassName').\n */\n@NgModule({\n  declarations: [\n    // Artifact type plugin viewer (loads appropriate plugin based on DriverClass)\n    ArtifactTypePluginViewerComponent,\n\n    // Artifact viewer UI components\n    ArtifactViewerPanelComponent,\n    ArtifactVersionHistoryComponent,\n    ArtifactMessageCardComponent,\n\n    // Plugin components\n    JsonArtifactViewerComponent,\n    CodeArtifactViewerComponent,\n    MarkdownArtifactViewerComponent,\n    HtmlArtifactViewerComponent,\n    SvgArtifactViewerComponent,\n    ComponentArtifactViewerComponent,\n    DataArtifactViewerComponent,\n    SaveQueryPanelComponent,\n\n    // Custom tab components (used by plugins via dynamic component tabs)\n    DataRequirementsViewerComponent\n  ],\n  imports: [\n    CommonModule,\n    FormsModule,\n    MarkdownModule,\n    CodeEditorModule,\n    MJReactModule,\n    MJNotificationsModule,\n    QueryViewerModule,\n    SharedGenericModule,\n    NgTreesModule,\n    ComponentFeedbackPanelComponent\n  ],\n  exports: [\n    // Export artifact type plugin viewer\n    ArtifactTypePluginViewerComponent,\n\n    // Export artifact viewer UI components\n    ArtifactViewerPanelComponent,\n    ArtifactVersionHistoryComponent,\n    ArtifactMessageCardComponent,\n\n    // Export plugin components\n    JsonArtifactViewerComponent,\n    CodeArtifactViewerComponent,\n    MarkdownArtifactViewerComponent,\n    HtmlArtifactViewerComponent,\n    SvgArtifactViewerComponent,\n    ComponentArtifactViewerComponent,\n    DataArtifactViewerComponent\n  ],\n  providers: [\n    // Plugins are registered via @RegisterClass decorator on component classes, no providers needed\n  ]\n})\nexport class ArtifactsModule {\n  constructor() {\n    // Ensure plugin components are registered on module load by referencing their classes\n    // The @RegisterClass decorator on each component handles the actual registration with MJGlobal\n    [\n      JsonArtifactViewerComponent,\n      CodeArtifactViewerComponent,\n      MarkdownArtifactViewerComponent,\n      HtmlArtifactViewerComponent,\n      SvgArtifactViewerComponent,\n      ComponentArtifactViewerComponent,\n      DataArtifactViewerComponent\n    ];\n  }\n}\n"]}

package/dist/lib/components/artifact-message-card.component.js

@@ -210,7 +210,7 @@ export class ArtifactMessageCardComponent {
             i0.ɵɵclassProp("loading", ctx.loading)("error", ctx.error);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loading ? 1 : ctx.error ? 2 : ctx.artifact ? 3 : -1);
-        } }, dependencies: [i2.NgClass], styles: [".artifact-message-card[_ngcontent-%COMP%] {\n      margin: 12px 0;\n    }\n\n    .artifact-skeleton[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n    }\n\n    .skeleton-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      background: #E5E7EB;\n      border-radius: 6px;\n      animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n    }\n\n    .skeleton-text[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 32px;\n      background: #E5E7EB;\n      border-radius: 4px;\n      animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .artifact-error[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #FEE2E2;\n      border: 1px solid #FECACA;\n      border-radius: 6px;\n      color: #DC2626;\n      font-size: 14px;\n    }\n\n    .artifact-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n    }\n\n    .artifact-info-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 200ms ease;\n    }\n\n    .artifact-info-bar[_ngcontent-%COMP%]:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(30, 64, 175, 0.1);\n    }\n\n    .artifact-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #F3F4F6;\n      border-radius: 6px;\n      flex-shrink: 0;\n      color: #6B7280;\n      font-size: 16px;\n    }\n\n    .artifact-info[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .artifact-name[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .artifact-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .artifact-type-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      color: white;\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.5px;\n      border-radius: 3px;\n      text-transform: uppercase;\n    }\n\n    .artifact-version[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #6B7280;\n      font-weight: 500;\n    }\n\n    .open-icon[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      color: #9CA3AF;\n      font-size: 14px;\n      transition: color 200ms ease;\n    }\n\n    .artifact-info-bar[_ngcontent-%COMP%]:hover   .open-icon[_ngcontent-%COMP%] {\n      color: #1e40af;\n    }"] });
+        } }, dependencies: [i2.NgClass], styles: [".artifact-message-card[_ngcontent-%COMP%] {\n      margin: 12px 0;\n    }\n\n    .artifact-skeleton[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n    }\n\n    .skeleton-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      background: var(--mj-border-default);\n      border-radius: 6px;\n      animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n    }\n\n    .skeleton-text[_ngcontent-%COMP%] {\n      flex: 1;\n      height: 32px;\n      background: var(--mj-border-default);\n      border-radius: 4px;\n      animation: _ngcontent-%COMP%_pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes _ngcontent-%COMP%_pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .artifact-error[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n      border-radius: 6px;\n      color: var(--mj-status-error);\n      font-size: 14px;\n    }\n\n    .artifact-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n    }\n\n    .artifact-info-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 200ms ease;\n    }\n\n    .artifact-info-bar[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .artifact-icon[_ngcontent-%COMP%] {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      flex-shrink: 0;\n      color: var(--mj-text-muted);\n      font-size: 16px;\n    }\n\n    .artifact-info[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .artifact-name[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .artifact-meta[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .artifact-type-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 8px;\n      color: var(--mj-text-inverse);\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.5px;\n      border-radius: 3px;\n      text-transform: uppercase;\n    }\n\n    .artifact-version[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .open-icon[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      color: var(--mj-text-disabled);\n      font-size: 14px;\n      transition: color 200ms ease;\n    }\n\n    .artifact-info-bar[_ngcontent-%COMP%]:hover   .open-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactMessageCardComponent, [{
         type: Component,
@@ -246,7 +246,7 @@ export class ArtifactMessageCardComponent {
         </div>
       }
     </div>
-  `, styles: ["\n    .artifact-message-card {\n      margin: 12px 0;\n    }\n\n    .artifact-skeleton {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n    }\n\n    .skeleton-icon {\n      width: 32px;\n      height: 32px;\n      background: #E5E7EB;\n      border-radius: 6px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .skeleton-text {\n      flex: 1;\n      height: 32px;\n      background: #E5E7EB;\n      border-radius: 4px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .artifact-error {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #FEE2E2;\n      border: 1px solid #FECACA;\n      border-radius: 6px;\n      color: #DC2626;\n      font-size: 14px;\n    }\n\n    .artifact-error i {\n      font-size: 16px;\n    }\n\n    .artifact-info-bar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 200ms ease;\n    }\n\n    .artifact-info-bar:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(30, 64, 175, 0.1);\n    }\n\n    .artifact-icon {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #F3F4F6;\n      border-radius: 6px;\n      flex-shrink: 0;\n      color: #6B7280;\n      font-size: 16px;\n    }\n\n    .artifact-info {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .artifact-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .artifact-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .artifact-type-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      color: white;\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.5px;\n      border-radius: 3px;\n      text-transform: uppercase;\n    }\n\n    .artifact-version {\n      font-size: 11px;\n      color: #6B7280;\n      font-weight: 500;\n    }\n\n    .open-icon {\n      flex-shrink: 0;\n      color: #9CA3AF;\n      font-size: 14px;\n      transition: color 200ms ease;\n    }\n\n    .artifact-info-bar:hover .open-icon {\n      color: #1e40af;\n    }\n  "] }]
+  `, styles: ["\n    .artifact-message-card {\n      margin: 12px 0;\n    }\n\n    .artifact-skeleton {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n    }\n\n    .skeleton-icon {\n      width: 32px;\n      height: 32px;\n      background: var(--mj-border-default);\n      border-radius: 6px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .skeleton-text {\n      flex: 1;\n      height: 32px;\n      background: var(--mj-border-default);\n      border-radius: 4px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .artifact-error {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n      border-radius: 6px;\n      color: var(--mj-status-error);\n      font-size: 14px;\n    }\n\n    .artifact-error i {\n      font-size: 16px;\n    }\n\n    .artifact-info-bar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 200ms ease;\n    }\n\n    .artifact-info-bar:hover {\n      border-color: var(--mj-brand-primary);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .artifact-icon {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      flex-shrink: 0;\n      color: var(--mj-text-muted);\n      font-size: 16px;\n    }\n\n    .artifact-info {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .artifact-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .artifact-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .artifact-type-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      color: var(--mj-text-inverse);\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.5px;\n      border-radius: 3px;\n      text-transform: uppercase;\n    }\n\n    .artifact-version {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .open-icon {\n      flex-shrink: 0;\n      color: var(--mj-text-disabled);\n      font-size: 14px;\n      transition: color 200ms ease;\n    }\n\n    .artifact-info-bar:hover .open-icon {\n      color: var(--mj-brand-primary);\n    }\n  "] }]
     }], () => [{ type: i1.ArtifactIconService }], { artifactId: [{
             type: Input
         }], versionNumber: [{

package/dist/lib/components/artifact-message-card.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"artifact-message-card.component.js","sourceRoot":"","sources":["../../../src/lib/components/artifact-message-card.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { MJArtifactEntity, MJArtifactVersionEntity } from '@memberjunction/core-entities';\nimport { UserInfo, RunView } from '@memberjunction/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ArtifactIconService } from '../services/artifact-icon.service';\n\n/**\n * Artifact message card component - displays a simple info bar for artifacts in conversation messages.\n * Shows artifact icon, name, type badge, and version. Click to open full artifact viewer.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-artifact-message-card',\n  template: `\n    <div class=\"artifact-message-card\" [class.loading]=\"loading\" [class.error]=\"error\">\n      @if (loading) {\n        <div class=\"artifact-skeleton\">\n          <div class=\"skeleton-icon\"></div>\n          <div class=\"skeleton-text\"></div>\n        </div>\n      } @else if (error) {\n        <div class=\"artifact-error\">\n          <i class=\"fa-solid fa-exclamation-circle\"></i>\n          <span>Failed to load artifact</span>\n        </div>\n      } @else if (artifact) {\n        <div class=\"artifact-info-bar\" (click)=\"openFullView()\">\n          <div class=\"artifact-icon\">\n            <i class=\"fa-solid\" [ngClass]=\"getArtifactIcon()\"></i>\n          </div>\n          <div class=\"artifact-info\">\n            <span class=\"artifact-name\">{{ displayName }}</span>\n            <div class=\"artifact-meta\">\n              <span class=\"artifact-type-badge\" [style.background]=\"getTypeBadgeColor()\">\n                {{ artifact.Type }}\n              </span>\n              <span class=\"artifact-version\">v{{ currentVersion?.VersionNumber || 1 }}</span>\n            </div>\n          </div>\n          <div class=\"open-icon\">\n            <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n          </div>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    .artifact-message-card {\n      margin: 12px 0;\n    }\n\n    .artifact-skeleton {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: #F9FAFB;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n    }\n\n    .skeleton-icon {\n      width: 32px;\n      height: 32px;\n      background: #E5E7EB;\n      border-radius: 6px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .skeleton-text {\n      flex: 1;\n      height: 32px;\n      background: #E5E7EB;\n      border-radius: 4px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .artifact-error {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: #FEE2E2;\n      border: 1px solid #FECACA;\n      border-radius: 6px;\n      color: #DC2626;\n      font-size: 14px;\n    }\n\n    .artifact-error i {\n      font-size: 16px;\n    }\n\n    .artifact-info-bar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 200ms ease;\n    }\n\n    .artifact-info-bar:hover {\n      border-color: #1e40af;\n      box-shadow: 0 2px 8px rgba(30, 64, 175, 0.1);\n    }\n\n    .artifact-icon {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: #F3F4F6;\n      border-radius: 6px;\n      flex-shrink: 0;\n      color: #6B7280;\n      font-size: 16px;\n    }\n\n    .artifact-info {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .artifact-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: #111827;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .artifact-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .artifact-type-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      color: white;\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.5px;\n      border-radius: 3px;\n      text-transform: uppercase;\n    }\n\n    .artifact-version {\n      font-size: 11px;\n      color: #6B7280;\n      font-weight: 500;\n    }\n\n    .open-icon {\n      flex-shrink: 0;\n      color: #9CA3AF;\n      font-size: 14px;\n      transition: color 200ms ease;\n    }\n\n    .artifact-info-bar:hover .open-icon {\n      color: #1e40af;\n    }\n  `]\n})\nexport class ArtifactMessageCardComponent implements OnInit, OnDestroy {\n  @Input() artifactId!: string;\n  @Input() versionNumber?: number;\n  @Input() currentUser!: UserInfo;\n  @Input() artifact?: MJArtifactEntity; // Optional - if provided, skips loading\n  @Input() artifactVersion?: MJArtifactVersionEntity; // Optional - if provided, skips loading\n  @Output() actionPerformed = new EventEmitter<{action: string; artifact: MJArtifactEntity; version?: MJArtifactVersionEntity}>();\n\n  public _artifact: MJArtifactEntity | null = null;\n  public _currentVersion: MJArtifactVersionEntity | null = null;\n  public loading = true;\n  public error = false;\n\n  private destroy$ = new Subject<void>();\n\n  constructor(private artifactIconService: ArtifactIconService) {}\n\n  async ngOnInit(): Promise<void> {\n    // If entities are provided, use them directly\n    if (this.artifact && this.artifactVersion) {\n      this._artifact = this.artifact;\n      this._currentVersion = this.artifactVersion;\n      this.loading = false;\n    } else {\n      // Otherwise load from database\n      await this.loadArtifact();\n    }\n  }\n\n  // Getters to access the internal properties\n  public get artifactEntity(): MJArtifactEntity | null {\n    return this._artifact;\n  }\n\n  public get currentVersion(): MJArtifactVersionEntity | null {\n    return this._currentVersion;\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  private async loadArtifact(): Promise<void> {\n    if (!this.artifactId) {\n      this.error = true;\n      this.loading = false;\n      return;\n    }\n\n    try {\n      this.loading = true;\n      this.error = false;\n\n      // Load artifact directly\n      const rv = new RunView();\n      const result = await rv.RunView<MJArtifactEntity>({\n        EntityName: 'MJ: Conversation Artifacts',\n        ExtraFilter: `ID='${this.artifactId}'`,\n        MaxRows: 1,\n        ResultType: 'entity_object'\n      }, this.currentUser);\n\n      if (result.Success && result.Results && result.Results.length > 0) {\n        this._artifact = result.Results[0];\n        // Load version content\n        await this.loadVersionContent();\n      } else {\n        this.error = true;\n      }\n\n    } catch (err) {\n      console.error('Error loading artifact:', err);\n      this.error = true;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private async loadVersionContent(): Promise<void> {\n    if (!this._artifact) return;\n\n    try {\n      const rv = new RunView();\n      const filter = this.versionNumber\n        ? `ArtifactID='${this._artifact.ID}' AND VersionNumber=${this.versionNumber}`\n        : `ArtifactID='${this._artifact.ID}'`;\n\n      const result = await rv.RunView<MJArtifactVersionEntity>({\n        EntityName: 'MJ: Artifact Versions',\n        ExtraFilter: filter,\n        OrderBy: 'VersionNumber DESC',\n        MaxRows: 1,\n        ResultType: 'entity_object'\n      }, this.currentUser);\n\n      if (result.Success && result.Results && result.Results.length > 0) {\n        this._currentVersion = result.Results[0];\n      }\n    } catch (err) {\n      console.error('Error loading version content:', err);\n    }\n  }\n\n  /**\n   * Get the display name - prefer version-specific name if available, otherwise use artifact name\n   */\n  public get displayName(): string {\n    if (this._currentVersion?.Name) {\n      return this._currentVersion.Name;\n    }\n    return this._artifact?.Name || 'Untitled';\n  }\n\n  /**\n   * Get the display description - prefer version-specific description if available, otherwise use artifact description\n   */\n  public get displayDescription(): string | null {\n    if (this._currentVersion?.Description) {\n      return this._currentVersion.Description;\n    }\n    return this._artifact?.Description || null;\n  }\n\n  public get isCodeArtifact(): boolean {\n    if (!this._artifact) return false;\n    const name = this._artifact.Name?.toLowerCase() || '';\n    const codeExtensions = ['.js', '.ts', '.jsx', '.tsx', '.py', '.java', '.cs', '.cpp', '.c', '.go', '.rs', '.sql', '.html', '.css', '.scss'];\n    return codeExtensions.some(ext => name.endsWith(ext));\n  }\n\n  /**\n   * Get the icon for this artifact using the centralized icon service.\n   * Fallback priority: Plugin icon > Metadata icon > Hardcoded mapping > Generic icon\n   */\n  public getArtifactIcon(): string {\n    if (!this._artifact) return 'fa-file';\n    return this.artifactIconService.getArtifactIcon(this._artifact);\n  }\n\n  public getTypeBadgeColor(): string {\n    if (!this._artifact) return '#6B7280';\n\n    const type = this._artifact.Type?.toLowerCase() || '';\n\n    if (type.includes('code')) return '#8B5CF6'; // Purple\n    if (type.includes('report')) return '#3B82F6'; // Blue\n    if (type.includes('dashboard')) return '#10B981'; // Green\n    if (type.includes('document')) return '#F59E0B'; // Orange\n\n    return '#6B7280'; // Gray\n  }\n\n  public openFullView(): void {\n    if (this._artifact) {\n      this.actionPerformed.emit({ action: 'open', artifact: this._artifact, version: this._currentVersion || undefined });\n    }\n  }\n}\n"]}
+{"version":3,"file":"artifact-message-card.component.js","sourceRoot":"","sources":["../../../src/lib/components/artifact-message-card.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';\nimport { MJArtifactEntity, MJArtifactVersionEntity } from '@memberjunction/core-entities';\nimport { UserInfo, RunView } from '@memberjunction/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { ArtifactIconService } from '../services/artifact-icon.service';\n\n/**\n * Artifact message card component - displays a simple info bar for artifacts in conversation messages.\n * Shows artifact icon, name, type badge, and version. Click to open full artifact viewer.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-artifact-message-card',\n  template: `\n    <div class=\"artifact-message-card\" [class.loading]=\"loading\" [class.error]=\"error\">\n      @if (loading) {\n        <div class=\"artifact-skeleton\">\n          <div class=\"skeleton-icon\"></div>\n          <div class=\"skeleton-text\"></div>\n        </div>\n      } @else if (error) {\n        <div class=\"artifact-error\">\n          <i class=\"fa-solid fa-exclamation-circle\"></i>\n          <span>Failed to load artifact</span>\n        </div>\n      } @else if (artifact) {\n        <div class=\"artifact-info-bar\" (click)=\"openFullView()\">\n          <div class=\"artifact-icon\">\n            <i class=\"fa-solid\" [ngClass]=\"getArtifactIcon()\"></i>\n          </div>\n          <div class=\"artifact-info\">\n            <span class=\"artifact-name\">{{ displayName }}</span>\n            <div class=\"artifact-meta\">\n              <span class=\"artifact-type-badge\" [style.background]=\"getTypeBadgeColor()\">\n                {{ artifact.Type }}\n              </span>\n              <span class=\"artifact-version\">v{{ currentVersion?.VersionNumber || 1 }}</span>\n            </div>\n          </div>\n          <div class=\"open-icon\">\n            <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n          </div>\n        </div>\n      }\n    </div>\n  `,\n  styles: [`\n    .artifact-message-card {\n      margin: 12px 0;\n    }\n\n    .artifact-skeleton {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n    }\n\n    .skeleton-icon {\n      width: 32px;\n      height: 32px;\n      background: var(--mj-border-default);\n      border-radius: 6px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    .skeleton-text {\n      flex: 1;\n      height: 32px;\n      background: var(--mj-border-default);\n      border-radius: 4px;\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    .artifact-error {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border: 1px solid color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n      border-radius: 6px;\n      color: var(--mj-status-error);\n      font-size: 14px;\n    }\n\n    .artifact-error i {\n      font-size: 16px;\n    }\n\n    .artifact-info-bar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      cursor: pointer;\n      transition: all 200ms ease;\n    }\n\n    .artifact-info-bar:hover {\n      border-color: var(--mj-brand-primary);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .artifact-icon {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: var(--mj-bg-surface-sunken);\n      border-radius: 6px;\n      flex-shrink: 0;\n      color: var(--mj-text-muted);\n      font-size: 16px;\n    }\n\n    .artifact-info {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      min-width: 0;\n    }\n\n    .artifact-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .artifact-meta {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .artifact-type-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      color: var(--mj-text-inverse);\n      font-size: 10px;\n      font-weight: 600;\n      letter-spacing: 0.5px;\n      border-radius: 3px;\n      text-transform: uppercase;\n    }\n\n    .artifact-version {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .open-icon {\n      flex-shrink: 0;\n      color: var(--mj-text-disabled);\n      font-size: 14px;\n      transition: color 200ms ease;\n    }\n\n    .artifact-info-bar:hover .open-icon {\n      color: var(--mj-brand-primary);\n    }\n  `]\n})\nexport class ArtifactMessageCardComponent implements OnInit, OnDestroy {\n  @Input() artifactId!: string;\n  @Input() versionNumber?: number;\n  @Input() currentUser!: UserInfo;\n  @Input() artifact?: MJArtifactEntity; // Optional - if provided, skips loading\n  @Input() artifactVersion?: MJArtifactVersionEntity; // Optional - if provided, skips loading\n  @Output() actionPerformed = new EventEmitter<{action: string; artifact: MJArtifactEntity; version?: MJArtifactVersionEntity}>();\n\n  public _artifact: MJArtifactEntity | null = null;\n  public _currentVersion: MJArtifactVersionEntity | null = null;\n  public loading = true;\n  public error = false;\n\n  private destroy$ = new Subject<void>();\n\n  constructor(private artifactIconService: ArtifactIconService) {}\n\n  async ngOnInit(): Promise<void> {\n    // If entities are provided, use them directly\n    if (this.artifact && this.artifactVersion) {\n      this._artifact = this.artifact;\n      this._currentVersion = this.artifactVersion;\n      this.loading = false;\n    } else {\n      // Otherwise load from database\n      await this.loadArtifact();\n    }\n  }\n\n  // Getters to access the internal properties\n  public get artifactEntity(): MJArtifactEntity | null {\n    return this._artifact;\n  }\n\n  public get currentVersion(): MJArtifactVersionEntity | null {\n    return this._currentVersion;\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n  }\n\n  private async loadArtifact(): Promise<void> {\n    if (!this.artifactId) {\n      this.error = true;\n      this.loading = false;\n      return;\n    }\n\n    try {\n      this.loading = true;\n      this.error = false;\n\n      // Load artifact directly\n      const rv = new RunView();\n      const result = await rv.RunView<MJArtifactEntity>({\n        EntityName: 'MJ: Conversation Artifacts',\n        ExtraFilter: `ID='${this.artifactId}'`,\n        MaxRows: 1,\n        ResultType: 'entity_object'\n      }, this.currentUser);\n\n      if (result.Success && result.Results && result.Results.length > 0) {\n        this._artifact = result.Results[0];\n        // Load version content\n        await this.loadVersionContent();\n      } else {\n        this.error = true;\n      }\n\n    } catch (err) {\n      console.error('Error loading artifact:', err);\n      this.error = true;\n    } finally {\n      this.loading = false;\n    }\n  }\n\n  private async loadVersionContent(): Promise<void> {\n    if (!this._artifact) return;\n\n    try {\n      const rv = new RunView();\n      const filter = this.versionNumber\n        ? `ArtifactID='${this._artifact.ID}' AND VersionNumber=${this.versionNumber}`\n        : `ArtifactID='${this._artifact.ID}'`;\n\n      const result = await rv.RunView<MJArtifactVersionEntity>({\n        EntityName: 'MJ: Artifact Versions',\n        ExtraFilter: filter,\n        OrderBy: 'VersionNumber DESC',\n        MaxRows: 1,\n        ResultType: 'entity_object'\n      }, this.currentUser);\n\n      if (result.Success && result.Results && result.Results.length > 0) {\n        this._currentVersion = result.Results[0];\n      }\n    } catch (err) {\n      console.error('Error loading version content:', err);\n    }\n  }\n\n  /**\n   * Get the display name - prefer version-specific name if available, otherwise use artifact name\n   */\n  public get displayName(): string {\n    if (this._currentVersion?.Name) {\n      return this._currentVersion.Name;\n    }\n    return this._artifact?.Name || 'Untitled';\n  }\n\n  /**\n   * Get the display description - prefer version-specific description if available, otherwise use artifact description\n   */\n  public get displayDescription(): string | null {\n    if (this._currentVersion?.Description) {\n      return this._currentVersion.Description;\n    }\n    return this._artifact?.Description || null;\n  }\n\n  public get isCodeArtifact(): boolean {\n    if (!this._artifact) return false;\n    const name = this._artifact.Name?.toLowerCase() || '';\n    const codeExtensions = ['.js', '.ts', '.jsx', '.tsx', '.py', '.java', '.cs', '.cpp', '.c', '.go', '.rs', '.sql', '.html', '.css', '.scss'];\n    return codeExtensions.some(ext => name.endsWith(ext));\n  }\n\n  /**\n   * Get the icon for this artifact using the centralized icon service.\n   * Fallback priority: Plugin icon > Metadata icon > Hardcoded mapping > Generic icon\n   */\n  public getArtifactIcon(): string {\n    if (!this._artifact) return 'fa-file';\n    return this.artifactIconService.getArtifactIcon(this._artifact);\n  }\n\n  public getTypeBadgeColor(): string {\n    if (!this._artifact) return '#6B7280';\n\n    const type = this._artifact.Type?.toLowerCase() || '';\n\n    if (type.includes('code')) return '#8B5CF6'; // Purple\n    if (type.includes('report')) return '#3B82F6'; // Blue\n    if (type.includes('dashboard')) return '#10B981'; // Green\n    if (type.includes('document')) return '#F59E0B'; // Orange\n\n    return '#6B7280'; // Gray\n  }\n\n  public openFullView(): void {\n    if (this._artifact) {\n      this.actionPerformed.emit({ action: 'open', artifact: this._artifact, version: this._currentVersion || undefined });\n    }\n  }\n}\n"]}

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

@@ -1532,11 +1532,11 @@ export class ArtifactViewerPanelComponent {
             i0.ɵɵconditional(ctx.error ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.error && ctx.artifact ? 5 : -1);
-        } }, dependencies: [i4.NgClass, i4.NgComponentOutlet, i5.MarkdownComponent, i6.CodeEditorComponent, i7.ArtifactTypePluginViewerComponent, i4.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.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n  color: #6366F1; \n\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.share-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.share-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #6366F1;\n}\n\n.share-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.maximize-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.maximize-btn[_ngcontent-%COMP%]:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.maximize-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  min-height: 0;\n}\n\n\n\n.plugin-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.plugin-container.plugin-hidden[_ngcontent-%COMP%], \n.tab-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.plugin-container[_ngcontent-%COMP%]   mj-artifact-type-plugin-viewer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  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.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n  background: #F3F4F6;\n}\n\n.link-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\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  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.link-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #6B7280;\n  transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover   .link-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #1e40af;\n  transform: translateX(2px);\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\n\n.component-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\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}\n\n\n\n@media (max-width: 768px) {\n  \n\n  .artifact-viewer-panel[_ngcontent-%COMP%] {\n    border-top: 3px solid #3B82F6;\n    position: relative;\n  }\n\n  \n\n  .artifact-viewer-panel[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: -8px;\n    left: 0;\n    right: 0;\n    height: 8px;\n    background: #092340; \n\n  }\n\n  .tab-navigation[_ngcontent-%COMP%] {\n    padding: 0 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n\n  .tab-navigation[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tab-btn[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .panel-header[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .dynamic-tab-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .markdown-viewer[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .tab-navigation[_ngcontent-%COMP%] {\n    padding: 0 4px;\n  }\n\n  .tab-btn[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n    font-size: 11px;\n    gap: 4px;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .panel-header[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n\n  .dynamic-tab-content[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n\n  .markdown-viewer[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n}"] });
+        } }, dependencies: [i4.NgClass, i4.NgComponentOutlet, i5.MarkdownComponent, i6.CodeEditorComponent, i7.ArtifactTypePluginViewerComponent, i4.DatePipe], styles: [".artifact-viewer-panel[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n  border-radius: 12px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\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: var(--mj-border-default);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-bg-surface-sunken);\n}\n\n.version-option.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.version-option[_ngcontent-%COMP%]   i.fa-check[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  margin-left: auto;\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.save-to-collection-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.save-to-collection-btn.in-collection[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.share-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\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.share-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.share-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.maximize-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\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.maximize-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.maximize-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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\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: var(--mj-text-muted);\n}\n\n.error-state[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\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: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\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: var(--mj-text-primary);\n}\n\n.artifact-description[_ngcontent-%COMP%] {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: 4px;\n  color: var(--mj-brand-primary);\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 var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-text-disabled);\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-icon.btn-primary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\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: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\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: var(--mj-status-warning);\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 var(--mj-border-default);\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: var(--mj-text-secondary);\n}\n\n.form-select[_ngcontent-%COMP%], \n.form-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.divider[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: var(--mj-text-disabled);\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: var(--mj-border-default);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n}\n\n\n\n.tab-navigation[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid var(--mj-border-default);\n  padding: 0 16px;\n  background: var(--mj-bg-surface);\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: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\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  min-height: 0;\n}\n\n\n\n.plugin-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.plugin-container.plugin-hidden[_ngcontent-%COMP%], \n.tab-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.plugin-container[_ngcontent-%COMP%]   mj-artifact-type-plugin-viewer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.display-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  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: var(--mj-bg-surface-sunken);\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: var(--mj-text-primary);\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: var(--mj-bg-surface);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.attribute-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\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: var(--mj-text-primary);\n  word-break: break-word;\n}\n\n.attribute-empty-pill[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.link-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.link-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\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: var(--mj-bg-surface);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n.link-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.link-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  transition: all 0.15s;\n}\n\n.link-item.clickable[_ngcontent-%COMP%]:hover   .link-actions[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: translateX(2px);\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: var(--mj-text-disabled);\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\n\n.component-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.markdown-viewer[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: var(--mj-bg-surface);\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: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\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 var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface);\n}\n\n\n\n@media (max-width: 768px) {\n  \n\n  .artifact-viewer-panel[_ngcontent-%COMP%] {\n    border-top: 3px solid var(--mj-brand-primary);\n    position: relative;\n  }\n\n  \n\n  .artifact-viewer-panel[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: -8px;\n    left: 0;\n    right: 0;\n    height: 8px;\n    background: var(--mj-brand-secondary);\n  }\n\n  .tab-navigation[_ngcontent-%COMP%] {\n    padding: 0 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n\n  .tab-navigation[_ngcontent-%COMP%]::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tab-btn[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    font-size: 12px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 13px;\n  }\n\n  .panel-header[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .dynamic-tab-content[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n\n  .markdown-viewer[_ngcontent-%COMP%] {\n    padding: 12px;\n  }\n}\n\n\n\n@media (max-width: 480px) {\n  .tab-navigation[_ngcontent-%COMP%] {\n    padding: 0 4px;\n  }\n\n  .tab-btn[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n    font-size: 11px;\n    gap: 4px;\n  }\n\n  .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n  }\n\n  .panel-header[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n\n  .dynamic-tab-content[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n\n  .markdown-viewer[_ngcontent-%COMP%] {\n    padding: 8px;\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactViewerPanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\" [class.no-header]=\"!showHeader\">\n  @if (showHeader) {\n    <div class=\"panel-header\">\n      <div class=\"panel-header-left\">\n        <h3>\n          <i class=\"fas\" [ngClass]=\"getArtifactIcon()\"></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\"\n             [class.clickable]=\"allVersions.length > 1 && viewContext !== 'collection'\"\n             (click)=\"viewContext !== 'collection' && toggleVersionDropdown()\">\n          <i class=\"fas fa-history\"></i>\n          <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n          @if (allVersions.length > 1 && viewContext !== 'collection') {\n            <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n          }\n          @if (showVersionDropdown) {\n            <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n              @for (version of allVersions; track version.ID) {\n                <div class=\"version-option\"\n                     [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                     (click)=\"selectVersion(version); $event.stopPropagation()\">\n                  <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                  <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                  @if (version.VersionNumber === selectedVersionNumber) {\n                    <i class=\"fas fa-check\"></i>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (showSaveToCollection) {\n          <button class=\"save-to-collection-btn\"\n                  [class.in-collection]=\"isInCollection\"\n                  (click)=\"onSaveToLibrary()\"\n                  [title]=\"isInCollection ? 'Current version saved to ' + currentVersionCollections.length + ' collection(s)' : 'Save to Collection'\">\n            <i [class]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n          </button>\n        }\n        @if (canShare) {\n          <button class=\"share-btn\"\n                  (click)=\"onShare()\"\n                  title=\"Share\">\n            <i class=\"fas fa-share-nodes\"></i>\n          </button>\n        }\n        @if (showMaximizeButton) {\n          <button class=\"maximize-btn\"\n                  (click)=\"onMaximizeToggle()\"\n                  [title]=\"isMaximized ? 'Restore Width' : 'Maximize Width'\">\n            <i class=\"fas\" [ngClass]=\"isMaximized ? 'fa-compress-arrows-alt' : 'fa-arrows-left-right'\"></i>\n          </button>\n        }\n        @if (showCloseButton) {\n          <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  }\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\" [class.no-tabs]=\"!showTabs\">\n        <!-- Tab Navigation (Dynamic) - Hidden when showTabs is false -->\n        @if (showTabs) {\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\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\" [class.plugin-hidden]=\"activeTab !== 'display'\">\n              <mj-artifact-type-plugin-viewer\n                [artifactVersion]=\"artifactVersion\"\n                [artifactTypeName]=\"artifactTypeName\"\n                [contentType]=\"contentType\"\n                [readonly]=\"true\"\n                (openEntityRecord)=\"onOpenEntityRecord($event)\"\n                (navigationRequest)=\"onNavigationRequest($event)\"\n                (pluginLoaded)=\"onPluginLoaded()\"\n                (tabsChanged)=\"onTabsChanged()\">\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                    <mj-markdown [data]=\"displayMarkdown\"\n                                 [enableCollapsibleHeadings]=\"true\"\n                                 [enableLineNumbers]=\"true\"\n                                 [enableSmartypants]=\"true\"\n                                 [enableHtml]=\"true\"></mj-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\" [class.tab-hidden]=\"activeTab !== 'details'\">\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\" [class.tab-hidden]=\"activeTab !== 'links'\">\n            @if (linksToShow.length > 0) {\n              <div class=\"links-section\">\n                @for (link of linksToShow; track link.id) {\n                  <div class=\"link-item\"\n                       [class.disabled]=\"!link.hasAccess\"\n                       [class.clickable]=\"link.hasAccess\"\n                       (click)=\"link.hasAccess ? onNavigateToLink(link) : null\"\n                       [title]=\"link.hasAccess ? 'Click to open' : 'No access'\">\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                      <i class=\"fas fa-arrow-right\"></i>\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            <!-- Check if this is a component tab -->\n            @if (GetComponentTabType(activeTab); as componentType) {\n              <div class=\"component-tab-content\">\n                <ng-container *ngComponentOutlet=\"componentType; inputs: GetComponentInputs(activeTab)\"></ng-container>\n              </div>\n            } @else {\n              @if (GetTabContent(activeTab); as tabData) {\n                <div class=\"dynamic-tab-content\">\n                  @switch (tabData.type) {\n                    @case ('markdown') {\n                      <div class=\"markdown-viewer\">\n                        <mj-markdown [data]=\"tabData.content\"\n                                     [enableCollapsibleHeadings]=\"true\"\n                                     [enableLineNumbers]=\"true\"\n                                     [enableSmartypants]=\"true\"\n                                     [enableHtml]=\"true\"></mj-markdown>\n                      </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          }\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.save-to-collection-btn.in-collection {\n  color: #6366F1; /* Indigo color to indicate it's saved */\n}\n\n.save-to-collection-btn.in-collection:hover {\n  background: #EEF2FF;\n  color: #4F46E5;\n}\n\n.share-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.share-btn:hover {\n  background: #F3F4F6;\n  color: #6366F1;\n}\n\n.share-btn i {\n  font-size: 14px;\n}\n\n.maximize-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.maximize-btn:hover {\n  background: #F3F4F6;\n  color: #111827;\n}\n\n.maximize-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  min-height: 0;\n}\n\n/* Plugin Container */\n.plugin-container {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.plugin-container.plugin-hidden,\n.tab-hidden {\n  display: none;\n}\n\n/* Ensure artifact viewer component takes full height */\n.plugin-container mj-artifact-type-plugin-viewer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  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.clickable {\n  cursor: pointer;\n}\n\n.link-item.clickable:hover {\n  border-color: #1e40af;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n  background: #F3F4F6;\n}\n\n.link-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\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  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.link-actions i {\n  font-size: 14px;\n  color: #6B7280;\n  transition: all 0.15s;\n}\n\n.link-item.clickable:hover .link-actions i {\n  color: #1e40af;\n  transform: translateX(2px);\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/* Custom component tab content */\n.component-tab-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\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\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  /* Add top border with slight visual separation from top nav */\n  .artifact-viewer-panel {\n    border-top: 3px solid #3B82F6;\n    position: relative;\n  }\n\n  /* Create a small dark strip above the blue border to separate from top nav */\n  .artifact-viewer-panel::before {\n    content: '';\n    position: absolute;\n    top: -8px;\n    left: 0;\n    right: 0;\n    height: 8px;\n    background: #092340; /* Match the top nav dark background color */\n  }\n\n  .tab-navigation {\n    padding: 0 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n\n  .tab-navigation::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tab-btn {\n    padding: 10px 12px;\n    font-size: 12px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .tab-btn i {\n    font-size: 13px;\n  }\n\n  .panel-header {\n    padding: 12px;\n  }\n\n  .dynamic-tab-content {\n    padding: 12px;\n  }\n\n  .markdown-viewer {\n    padding: 12px;\n  }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .tab-navigation {\n    padding: 0 4px;\n  }\n\n  .tab-btn {\n    padding: 8px 10px;\n    font-size: 11px;\n    gap: 4px;\n  }\n\n  .tab-btn i {\n    font-size: 12px;\n  }\n\n  .panel-header {\n    padding: 8px;\n  }\n\n  .dynamic-tab-content {\n    padding: 8px;\n  }\n\n  .markdown-viewer {\n    padding: 8px;\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-artifact-viewer-panel', template: "<div class=\"artifact-viewer-panel\" [class.no-header]=\"!showHeader\">\n  @if (showHeader) {\n    <div class=\"panel-header\">\n      <div class=\"panel-header-left\">\n        <h3>\n          <i class=\"fas\" [ngClass]=\"getArtifactIcon()\"></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\"\n             [class.clickable]=\"allVersions.length > 1 && viewContext !== 'collection'\"\n             (click)=\"viewContext !== 'collection' && toggleVersionDropdown()\">\n          <i class=\"fas fa-history\"></i>\n          <span class=\"version-label\">v{{ selectedVersionNumber }}</span>\n          @if (allVersions.length > 1 && viewContext !== 'collection') {\n            <i class=\"fas fa-chevron-down dropdown-icon\" [class.open]=\"showVersionDropdown\"></i>\n          }\n          @if (showVersionDropdown) {\n            <div class=\"version-dropdown\" (click)=\"$event.stopPropagation()\">\n              @for (version of allVersions; track version.ID) {\n                <div class=\"version-option\"\n                     [class.selected]=\"version.VersionNumber === selectedVersionNumber\"\n                     (click)=\"selectVersion(version); $event.stopPropagation()\">\n                  <span class=\"version-number\">v{{ version.VersionNumber }}</span>\n                  <span class=\"version-date\">{{ version.__mj_CreatedAt | date:'short' }}</span>\n                  @if (version.VersionNumber === selectedVersionNumber) {\n                    <i class=\"fas fa-check\"></i>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (showSaveToCollection) {\n          <button class=\"save-to-collection-btn\"\n                  [class.in-collection]=\"isInCollection\"\n                  (click)=\"onSaveToLibrary()\"\n                  [title]=\"isInCollection ? 'Current version saved to ' + currentVersionCollections.length + ' collection(s)' : 'Save to Collection'\">\n            <i [class]=\"isInCollection ? 'fas fa-bookmark' : 'far fa-bookmark'\"></i>\n          </button>\n        }\n        @if (canShare) {\n          <button class=\"share-btn\"\n                  (click)=\"onShare()\"\n                  title=\"Share\">\n            <i class=\"fas fa-share-nodes\"></i>\n          </button>\n        }\n        @if (showMaximizeButton) {\n          <button class=\"maximize-btn\"\n                  (click)=\"onMaximizeToggle()\"\n                  [title]=\"isMaximized ? 'Restore Width' : 'Maximize Width'\">\n            <i class=\"fas\" [ngClass]=\"isMaximized ? 'fa-compress-arrows-alt' : 'fa-arrows-left-right'\"></i>\n          </button>\n        }\n        @if (showCloseButton) {\n          <button class=\"close-btn\" (click)=\"onClose()\" title=\"Close\">\n            <i class=\"fas fa-times\"></i>\n          </button>\n        }\n      </div>\n    </div>\n  }\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\" [class.no-tabs]=\"!showTabs\">\n        <!-- Tab Navigation (Dynamic) - Hidden when showTabs is false -->\n        @if (showTabs) {\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\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\" [class.plugin-hidden]=\"activeTab !== 'display'\">\n              <mj-artifact-type-plugin-viewer\n                [artifactVersion]=\"artifactVersion\"\n                [artifactTypeName]=\"artifactTypeName\"\n                [contentType]=\"contentType\"\n                [readonly]=\"true\"\n                (openEntityRecord)=\"onOpenEntityRecord($event)\"\n                (navigationRequest)=\"onNavigationRequest($event)\"\n                (pluginLoaded)=\"onPluginLoaded()\"\n                (tabsChanged)=\"onTabsChanged()\">\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                    <mj-markdown [data]=\"displayMarkdown\"\n                                 [enableCollapsibleHeadings]=\"true\"\n                                 [enableLineNumbers]=\"true\"\n                                 [enableSmartypants]=\"true\"\n                                 [enableHtml]=\"true\"></mj-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\" [class.tab-hidden]=\"activeTab !== 'details'\">\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\" [class.tab-hidden]=\"activeTab !== 'links'\">\n            @if (linksToShow.length > 0) {\n              <div class=\"links-section\">\n                @for (link of linksToShow; track link.id) {\n                  <div class=\"link-item\"\n                       [class.disabled]=\"!link.hasAccess\"\n                       [class.clickable]=\"link.hasAccess\"\n                       (click)=\"link.hasAccess ? onNavigateToLink(link) : null\"\n                       [title]=\"link.hasAccess ? 'Click to open' : 'No access'\">\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                      <i class=\"fas fa-arrow-right\"></i>\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            <!-- Check if this is a component tab -->\n            @if (GetComponentTabType(activeTab); as componentType) {\n              <div class=\"component-tab-content\">\n                <ng-container *ngComponentOutlet=\"componentType; inputs: GetComponentInputs(activeTab)\"></ng-container>\n              </div>\n            } @else {\n              @if (GetTabContent(activeTab); as tabData) {\n                <div class=\"dynamic-tab-content\">\n                  @switch (tabData.type) {\n                    @case ('markdown') {\n                      <div class=\"markdown-viewer\">\n                        <mj-markdown [data]=\"tabData.content\"\n                                     [enableCollapsibleHeadings]=\"true\"\n                                     [enableLineNumbers]=\"true\"\n                                     [enableSmartypants]=\"true\"\n                                     [enableHtml]=\"true\"></mj-markdown>\n                      </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          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n\n", styles: [".artifact-viewer-panel {\n  width: 100%;\n  height: 100%;\n  background: var(--mj-bg-surface);\n  border-left: 1px solid var(--mj-border-default);\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 var(--mj-border-default);\n  background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\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: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n  border-radius: 12px;\n  font-size: 12px;\n  color: var(--mj-text-muted);\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: var(--mj-border-default);\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: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  box-shadow: var(--mj-shadow-md);\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: var(--mj-bg-surface-sunken);\n}\n\n.version-option.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\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: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n.version-option i.fa-check {\n  color: var(--mj-status-success);\n  margin-left: auto;\n}\n\n.save-to-collection-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.save-to-collection-btn i {\n  font-size: 14px;\n}\n\n.save-to-collection-btn.in-collection {\n  color: var(--mj-brand-primary);\n}\n\n.save-to-collection-btn.in-collection:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.share-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\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.share-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.share-btn i {\n  font-size: 14px;\n}\n\n.maximize-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\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.maximize-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.maximize-btn i {\n  font-size: 14px;\n}\n\n.close-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-muted);\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: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\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: var(--mj-text-muted);\n}\n\n.error-state {\n  color: var(--mj-status-error);\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: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.meta-item span {\n  font-size: 14px;\n  color: var(--mj-text-primary);\n}\n\n.artifact-description {\n  padding: 12px;\n  margin-bottom: 16px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: 4px;\n  color: var(--mj-brand-primary);\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 var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.btn-icon {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 6px 12px;\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 14px;\n  transition: all 0.2s;\n}\n\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-text-disabled);\n}\n\n.btn-icon.btn-primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-icon.btn-primary:hover {\n  background: var(--mj-brand-primary-hover);\n  border-color: var(--mj-brand-primary-hover);\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: var(--mj-bg-overlay);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 10000;\n}\n\n.modal-content {\n  background: var(--mj-bg-surface);\n  border-radius: 12px;\n  box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\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: var(--mj-status-warning);\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 var(--mj-border-default);\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: var(--mj-text-secondary);\n}\n\n.form-select,\n.form-input {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.2s;\n}\n\n.form-select:focus,\n.form-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.divider {\n  display: flex;\n  align-items: center;\n  margin: 24px 0;\n  color: var(--mj-text-disabled);\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: var(--mj-border-default);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.btn-primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  color: var(--mj-text-secondary);\n}\n\n.btn-secondary:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n}\n\n/* Tab Navigation */\n.tab-navigation {\n  display: flex;\n  gap: 0;\n  border-bottom: 2px solid var(--mj-border-default);\n  padding: 0 16px;\n  background: var(--mj-bg-surface);\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: var(--mj-text-muted);\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.tab-btn:hover {\n  color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.tab-btn.active {\n  color: var(--mj-brand-primary);\n  border-bottom-color: var(--mj-brand-primary);\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  min-height: 0;\n}\n\n/* Plugin Container */\n.plugin-container {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.plugin-container.plugin-hidden,\n.tab-hidden {\n  display: none;\n}\n\n/* Ensure artifact viewer component takes full height */\n.plugin-container mj-artifact-type-plugin-viewer {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n}\n\n.display-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  min-height: 0;\n  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: var(--mj-bg-surface-sunken);\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: var(--mj-text-primary);\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: var(--mj-bg-surface);\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.attribute-item label {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.attribute-item span {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  word-break: break-word;\n}\n\n.attribute-empty-pill {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-disabled);\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: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  transition: all 0.15s;\n}\n\n.link-item.clickable {\n  cursor: pointer;\n}\n\n.link-item.clickable:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.link-item.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.link-item:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.link-icon {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface);\n  border-radius: 8px;\n  flex-shrink: 0;\n}\n\n.link-icon i {\n  font-size: 18px;\n  color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.link-type {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n  margin-top: 2px;\n}\n\n.link-actions {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  flex-shrink: 0;\n}\n\n.link-actions i {\n  font-size: 14px;\n  color: var(--mj-text-muted);\n  transition: all 0.15s;\n}\n\n.link-item.clickable:hover .link-actions i {\n  color: var(--mj-brand-primary);\n  transform: translateX(2px);\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: var(--mj-text-disabled);\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/* Custom component tab content */\n.component-tab-content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 16px;\n}\n\n.markdown-viewer {\n  flex: 1;\n  overflow: auto;\n  padding: 20px;\n  background: var(--mj-bg-surface);\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: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface-sunken);\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 var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-bg-surface-sunken);\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: var(--mj-bg-surface);\n}\n\n/* Mobile adjustments: 481px - 768px */\n@media (max-width: 768px) {\n  /* Add top border with slight visual separation from top nav */\n  .artifact-viewer-panel {\n    border-top: 3px solid var(--mj-brand-primary);\n    position: relative;\n  }\n\n  /* Create a small dark strip above the blue border to separate from top nav */\n  .artifact-viewer-panel::before {\n    content: '';\n    position: absolute;\n    top: -8px;\n    left: 0;\n    right: 0;\n    height: 8px;\n    background: var(--mj-brand-secondary);\n  }\n\n  .tab-navigation {\n    padding: 0 8px;\n    overflow-x: auto;\n    overflow-y: hidden;\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n  }\n\n  .tab-navigation::-webkit-scrollbar {\n    display: none;\n  }\n\n  .tab-btn {\n    padding: 10px 12px;\n    font-size: 12px;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .tab-btn i {\n    font-size: 13px;\n  }\n\n  .panel-header {\n    padding: 12px;\n  }\n\n  .dynamic-tab-content {\n    padding: 12px;\n  }\n\n  .markdown-viewer {\n    padding: 12px;\n  }\n}\n\n/* Small Phone adjustments: <= 480px */\n@media (max-width: 480px) {\n  .tab-navigation {\n    padding: 0 4px;\n  }\n\n  .tab-btn {\n    padding: 8px 10px;\n    font-size: 11px;\n    gap: 4px;\n  }\n\n  .tab-btn i {\n    font-size: 12px;\n  }\n\n  .panel-header {\n    padding: 8px;\n  }\n\n  .dynamic-tab-content {\n    padding: 8px;\n  }\n\n  .markdown-viewer {\n    padding: 8px;\n  }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MJNotificationService }, { type: i2.DomSanitizer }, { type: i3.ArtifactIconService }], { artifactId: [{
             type: Input
         }], currentUser: [{

package/dist/lib/components/plugins/component-artifact-viewer.component.d.ts

@@ -29,6 +29,7 @@ export declare class ComponentArtifactViewerComponent extends BaseArtifactViewer
      */
     private _cachedResolvedSpec;
     get resolvedComponentSpec(): ComponentSpec | null;
+    ShowFeedbackPanel: boolean;
     hasError: boolean;
     errorMessage: string;
     errorDetails: string;
@@ -85,6 +86,7 @@ export declare class ComponentArtifactViewerComponent extends BaseArtifactViewer
         entityName: string;
         key: CompositeKey;
     }): void;
+    ToggleFeedbackPanel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentArtifactViewerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ComponentArtifactViewerComponent, "mj-component-artifact-viewer", never, {}, { "tabsChanged": "tabsChanged"; "openEntityRecord": "openEntityRecord"; }, never, never, false, never>;
 }

package/dist/lib/components/plugins/component-artifact-viewer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/component-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AAE5H,OAAO,EAAE,iCAAiC,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAA8B,aAAa,EAAE,MAAM,6CAA6C,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAGpD;;;;;;;GAOG;AACH,qBAOa,gCAAiC,SAAQ,iCAAkC,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IA0CrH,OAAO,CAAC,OAAO;IAzCE,cAAc,CAAC,EAAE,gBAAgB,CAAC;IACrD,WAAW,qBAA4B;IACvC,gBAAgB;oBAAiC,MAAM;sBAAgB,YAAY;OAAK;IAG3F,SAAS,EAAE,aAAa,GAAG,IAAI,CAAQ;IACvC,aAAa,EAAE,MAAM,CAAM;IAC3B,aAAa,EAAE,MAAM,CAAM;IAElC;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAA8B;IAEzD,IAAW,qBAAqB,IAAI,aAAa,GAAG,IAAI,CAKvD;IAGM,QAAQ,UAAS;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAEzB;;;;;;;;OAQG;IACH,IAAoB,iBAAiB,IAAI,OAAO,CAG/C;gBAEmB,OAAO,EAAE,qBAAqB;IAI5C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAWxD;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAmBzB;;;;;OAKG;IACG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAYzB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAItC;;OAEG;IACI,iBAAiB,IAAI,iBAAiB,EAAE;IA+D/C;;;OAGG;IACI,sBAAsB,IAAI,MAAM,EAAE;IAIzC,OAAO,CAAC,qBAAqB;IAS7B;;;;;;OAMG;IACH,2BAA2B,IAAI,IAAI;IASnC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAYtC;;;OAGG;IACH,kBAAkB,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,YAAY,CAAA;KAAC,GAAG,IAAI;yCA1N7D,gCAAgC;2CAAhC,gCAAgC;CAiO5C"}
+{"version":3,"file":"component-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/component-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAU,YAAY,EAAE,MAAM,eAAe,CAAC;AAE5H,OAAO,EAAE,iCAAiC,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACzG,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACnF,OAAO,EAA8B,aAAa,EAAE,MAAM,6CAA6C,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAIpD;;;;;;;GAOG;AACH,qBAOa,gCAAiC,SAAQ,iCAAkC,YAAW,MAAM,EAAE,aAAa,EAAE,SAAS;IA6CrH,OAAO,CAAC,OAAO;IA5CE,cAAc,CAAC,EAAE,gBAAgB,CAAC;IACrD,WAAW,qBAA4B;IACvC,gBAAgB;oBAAiC,MAAM;sBAAgB,YAAY;OAAK;IAG3F,SAAS,EAAE,aAAa,GAAG,IAAI,CAAQ;IACvC,aAAa,EAAE,MAAM,CAAM;IAC3B,aAAa,EAAE,MAAM,CAAM;IAElC;;;OAGG;IACH,OAAO,CAAC,mBAAmB,CAA8B;IAEzD,IAAW,qBAAqB,IAAI,aAAa,GAAG,IAAI,CAKvD;IAGM,iBAAiB,UAAS;IAG1B,QAAQ,UAAS;IACjB,YAAY,SAAM;IAClB,YAAY,SAAM;IAEzB;;;;;;;;OAQG;IACH,IAAoB,iBAAiB,IAAI,OAAO,CAG/C;gBAEmB,OAAO,EAAE,qBAAqB;IAI5C,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAWxD;;;;OAIG;IACH,OAAO,CAAC,iBAAiB;IAmBzB;;;;;OAKG;IACG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAYzB,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAItC;;OAEG;IACI,iBAAiB,IAAI,iBAAiB,EAAE;IA+D/C;;;OAGG;IACI,sBAAsB,IAAI,MAAM,EAAE;IAIzC,OAAO,CAAC,qBAAqB;IAS7B;;;;;;OAMG;IACH,2BAA2B,IAAI,IAAI;IASnC,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAYtC;;;OAGG;IACH,kBAAkB,CAAC,KAAK,EAAE;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,YAAY,CAAA;KAAC,GAAG,IAAI;IAQxE,mBAAmB,IAAI,IAAI;yCArOhB,gCAAgC;2CAAhC,gCAAgC;CAwO5C"}