@memberjunction/ng-artifacts 2.107.0 → 2.109.0

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

@@ -4,25 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, Output, EventEmitter } from '@angular/core';
 import { RegisterClass, SafeJSONParse } from '@memberjunction/global';
 import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
 import { BuildComponentCompleteCode } from '@memberjunction/interactive-component-types';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-react";
 import * as i2 from "@angular/common";
-import * as i3 from "@angular/forms";
-import * as i4 from "@memberjunction/ng-code-editor";
 const _c0 = ["reactComponent"];
-function ComponentArtifactViewerComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 10);
-    i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopy()); });
-    i0.ɵɵelement(1, "i", 11);
-    i0.ɵɵtext(2, " Copy ");
-    i0.ɵɵelementEnd();
-} }
-function ComponentArtifactViewerComponent_Conditional_10_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function ComponentArtifactViewerComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "details")(1, "summary");
     i0.ɵɵtext(2, "Technical Details");
     i0.ɵɵelementEnd();
@@ -30,40 +20,40 @@ function ComponentArtifactViewerComponent_Conditional_10_Conditional_1_Condition
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(ctx_r1.errorDetails);
+    i0.ɵɵtextInterpolate(ctx_r0.errorDetails);
 } }
-function ComponentArtifactViewerComponent_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "i", 13);
+function ComponentArtifactViewerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 4);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "Component Error");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "p");
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, ComponentArtifactViewerComponent_Conditional_10_Conditional_1_Conditional_6_Template, 5, 1, "details");
+    i0.ɵɵtemplate(6, ComponentArtifactViewerComponent_Conditional_2_Conditional_6_Template, 5, 1, "details");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(ctx_r1.errorMessage);
+    i0.ɵɵtextInterpolate(ctx_r0.errorMessage);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.errorDetails ? 6 : -1);
+    i0.ɵɵconditional(ctx_r0.errorDetails ? 6 : -1);
 } }
-function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-react-component", 15, 0);
-    i0.ɵɵlistener("componentEvent", function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_0_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onComponentEvent($event)); })("stateChange", function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_0_Template_mj_react_component_stateChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStateChange($event)); })("openEntityRecord", function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_0_Template_mj_react_component_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-react-component", 6, 0);
+    i0.ɵɵlistener("componentEvent", function ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template_mj_react_component_componentEvent_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onComponentEvent($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("component", ctx_r1.component);
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("component", ctx_r0.component);
 } }
-function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "i", 16);
+function ComponentArtifactViewerComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵelement(1, "i", 7);
     i0.ɵɵelementStart(2, "h3");
     i0.ɵɵtext(3, "No Component Loaded");
     i0.ɵɵelementEnd();
@@ -71,41 +61,29 @@ function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Condition
     i0.ɵɵtext(5, "The component data is missing or invalid.");
     i0.ɵɵelementEnd()();
 } }
-function ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_0_Template, 2, 1, "mj-react-component", 14)(1, ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Conditional_1_Template, 6, 0, "div", 12);
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵconditional(ctx_r1.component ? 0 : 1);
-} }
-function ComponentArtifactViewerComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵtemplate(1, ComponentArtifactViewerComponent_Conditional_10_Conditional_1_Template, 7, 2, "div", 12)(2, ComponentArtifactViewerComponent_Conditional_10_Conditional_2_Template, 2, 1);
-    i0.ɵɵelementEnd();
+function ComponentArtifactViewerComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ComponentArtifactViewerComponent_Conditional_3_Conditional_0_Template, 2, 1, "mj-react-component", 5)(1, ComponentArtifactViewerComponent_Conditional_3_Conditional_1_Template, 6, 0, "div", 3);
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.hasError ? 1 : 2);
-} }
-function ComponentArtifactViewerComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-code-editor", 17);
-    i0.ɵɵtwoWayListener("ngModelChange", function ComponentArtifactViewerComponent_Conditional_11_Template_mj_code_editor_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.componentCode, $event) || (ctx_r1.componentCode = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.componentCode);
-    i0.ɵɵproperty("language", "typescript")("readonly", ctx_r1.readonly);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.component ? 0 : 1);
 } }
 /**
  * Viewer component for interactive Component artifacts (React-based UI components)
+ *
+ * Features:
+ * - Live component preview with React rendering
+ * - Dynamic tabs for component metadata (via GetAdditionalTabs)
+ * - Provides tabs for: Code, Functional Requirements, Technical Design, Data Requirements
  */
 let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent extends BaseArtifactViewerPluginComponent {
     adapter;
     reactComponent;
+    tabsChanged = new EventEmitter();
+    // Component data
     component = null;
     componentCode = "";
     componentName = '';
-    viewMode = 'preview';
+    // Error state
     hasError = false;
     errorMessage = '';
     errorDetails = '';
@@ -113,15 +91,34 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
         super();
         this.adapter = adapter;
     }
-    async ngOnInit() {
-        // Extract component name from the code
-        if (this.artifactVersion.Content) {
-            this.component = SafeJSONParse(this.artifactVersion.Content);
+    async ngOnChanges(changes) {
+        // When artifactVersion input changes, reload the component spec
+        if (changes['artifactVersion'] && !changes['artifactVersion'].firstChange) {
+            await this.loadComponentSpec();
+            // Notify parent that tabs may have changed
+            this.tabsChanged.emit();
         }
-        else {
-            throw new Error('Artifact content is empty');
+    }
+    async loadComponentSpec() {
+        try {
+            if (this.artifactVersion.Content) {
+                this.component = SafeJSONParse(this.artifactVersion.Content);
+                this.extractComponentParts();
+            }
+            else {
+                throw new Error('Artifact content is empty');
+            }
+        }
+        catch (error) {
+            console.error('Failed to load component spec:', error);
+            this.hasError = true;
+            this.errorMessage = 'Failed to load component';
+            this.errorDetails = error instanceof Error ? error.message : String(error);
         }
-        this.extractComponentParts();
+    }
+    async ngOnInit() {
+        // Load initial component spec
+        await this.loadComponentSpec();
         // Initialize Angular adapter for React components
         try {
             await this.adapter.initialize();
@@ -137,53 +134,61 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
         // Component initialization happens automatically via mj-react-component
     }
     /**
-     * Component plugin always shows elevated display (interactive React component).
+     * Provide additional tabs for viewing component metadata
      */
-    get isShowingElevatedDisplay() {
-        return true;
-    }
-    /**
-     * Component plugin should tell parent to show JSON tab so users can view the component spec source.
-     */
-    get parentShouldShowRawContent() {
-        return true;
+    GetAdditionalTabs() {
+        const tabs = [];
+        if (!this.component) {
+            return tabs;
+        }
+        // Functional Requirements tab
+        if (this.component.functionalRequirements) {
+            tabs.push({
+                label: 'Functional',
+                icon: 'fa-clipboard-list',
+                contentType: 'markdown',
+                content: this.component.functionalRequirements
+            });
+        }
+        // Technical Design tab
+        if (this.component.technicalDesign) {
+            tabs.push({
+                label: 'Technical',
+                icon: 'fa-wrench',
+                contentType: 'markdown',
+                content: this.component.technicalDesign
+            });
+        }
+        // Data Requirements tab
+        if (this.component.dataRequirements) {
+            tabs.push({
+                label: 'Data',
+                icon: 'fa-database',
+                contentType: 'json',
+                content: JSON.stringify(this.component.dataRequirements, null, 2),
+                language: 'json'
+            });
+        }
+        // Code tab (lazy-loaded)
+        tabs.push({
+            label: 'Code',
+            icon: 'fa-code',
+            contentType: 'code',
+            language: 'typescript',
+            content: () => BuildComponentCompleteCode(this.component)
+        });
+        return tabs;
     }
     extractComponentParts() {
         if (this.component?.name) {
-            this.componentName = this.component?.name;
+            this.componentName = this.component.name;
         }
         if (this.component?.code) {
             this.componentCode = BuildComponentCompleteCode(this.component);
         }
     }
-    onCopy() {
-        if (this.componentCode) {
-            navigator.clipboard.writeText(this.componentCode).then(() => {
-                console.log('✅ Copied component code to clipboard');
-            }).catch(err => {
-                console.error('Failed to copy to clipboard:', err);
-            });
-        }
-    }
     onComponentEvent(event) {
-        if (event.type === 'error') {
-            this.hasError = true;
-            this.errorMessage = event.payload?.error || 'An unknown error occurred';
-            this.errorDetails = event.payload?.errorInfo || event.payload?.stackTrace || '';
-            console.error('Component error:', event.payload);
-        }
-        else {
-            console.log('Component event:', event.type, event.payload);
-        }
-    }
-    onStateChange(event) {
-        console.log('Component state change:', event);
-        // Could update componentContext here if needed for persistence
-    }
-    onOpenEntityRecord(event) {
-        console.log('Open entity record requested:', event);
-        // This would typically be handled by a parent component to open entity forms
-        // For now just log it
+        console.log('Component event:', event);
     }
     static ɵfac = function ComponentArtifactViewerComponent_Factory(t) { return new (t || ComponentArtifactViewerComponent)(i0.ɵɵdirectiveInject(i1.AngularAdapterService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentArtifactViewerComponent, selectors: [["mj-component-artifact-viewer"]], viewQuery: function ComponentArtifactViewerComponent_Query(rf, ctx) { if (rf & 1) {
@@ -191,32 +196,15 @@ let ComponentArtifactViewerComponent = class ComponentArtifactViewerComponent ex
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.reactComponent = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 12, vars: 6, consts: [["reactComponent", ""], [1, "component-artifact-viewer", 3, "ngClass"], [1, "component-toolbar"], [1, "component-badge"], [1, "fas", "fa-cube"], ["title", "View Source Code", 1, "btn-icon", 3, "click"], ["title", "Copy Code", 1, "btn-icon"], [1, "component-content-container"], [1, "component-preview"], [2, "width", "100%", "height", "100%", 3, "ngModel", "language", "readonly"], ["title", "Copy Code", 1, "btn-icon", 3, "click"], [1, "fas", "fa-copy"], [1, "error-state"], [1, "fas", "fa-exclamation-triangle"], [3, "component"], [3, "componentEvent", "stateChange", "openEntityRecord", "component"], [1, "fas", "fa-exclamation-circle"], [2, "width", "100%", "height", "100%", 3, "ngModelChange", "ngModel", "language", "readonly"]], template: function ComponentArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
-            i0.ɵɵelement(3, "i", 4);
-            i0.ɵɵtext(4, " Interactive Component ");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "button", 5);
-            i0.ɵɵlistener("click", function ComponentArtifactViewerComponent_Template_button_click_5_listener() { return ctx.viewMode = ctx.viewMode === "preview" ? "source" : "preview"; });
-            i0.ɵɵelement(6, "i");
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(8, ComponentArtifactViewerComponent_Conditional_8_Template, 3, 0, "button", 6);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "div", 7);
-            i0.ɵɵtemplate(10, ComponentArtifactViewerComponent_Conditional_10_Template, 3, 1, "div", 8)(11, ComponentArtifactViewerComponent_Conditional_11_Template, 1, 3, "mj-code-editor", 9);
+        } }, outputs: { tabsChanged: "tabsChanged" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 4, vars: 2, consts: [["reactComponent", ""], [1, "component-artifact-viewer", 3, "ngClass"], [1, "component-preview"], [1, "error-state"], [1, "fa-solid", "fa-exclamation-triangle"], [3, "component"], [3, "componentEvent", "component"], [1, "fa-solid", "fa-exclamation-circle"]], template: function ComponentArtifactViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
+            i0.ɵɵtemplate(2, ComponentArtifactViewerComponent_Conditional_2_Template, 7, 2, "div", 3)(3, ComponentArtifactViewerComponent_Conditional_3_Template, 2, 1);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("ngClass", ctx.cssClass);
-            i0.ɵɵadvance(6);
-            i0.ɵɵclassMap(ctx.viewMode === "preview" ? "fas fa-code" : "fas fa-eye");
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", ctx.viewMode === "preview" ? "Source" : "Preview", " ");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.viewMode === "source" ? 8 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.viewMode === "preview" ? 10 : 11);
-        } }, dependencies: [i2.NgClass, i3.NgControlStatus, i3.NgModel, i4.CodeEditorComponent, i1.MJReactComponent], styles: [".component-artifact-viewer[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .component-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px;\n      background: #f5f5f5;\n      border-bottom: 1px solid #ddd;\n      gap: 8px;\n    }\n\n    .component-badge[_ngcontent-%COMP%] {\n      padding: 6px 12px;\n      background: #28a745;\n      color: white;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .btn-icon[_ngcontent-%COMP%] {\n      padding: 6px 12px;\n      background: white;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .btn-icon[_ngcontent-%COMP%]:hover {\n      background: #e9ecef;\n      border-color: #999;\n    }\n\n    .component-content-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .component-preview[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: white;\n      height: 100%;\n      overflow: auto;\n    }\n\n    .error-state[_ngcontent-%COMP%] {\n      padding: 20px;\n      text-align: center;\n      color: #dc3545;\n    }\n\n    .error-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 48px;\n      margin-bottom: 16px;\n    }\n\n    .error-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 12px;\n      font-size: 20px;\n      font-weight: 600;\n    }\n\n    .error-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0 0 12px;\n      color: #6c757d;\n    }\n\n    .error-state[_ngcontent-%COMP%]   details[_ngcontent-%COMP%] {\n      margin-top: 16px;\n      text-align: left;\n      background: #f8f9fa;\n      padding: 12px;\n      border-radius: 4px;\n    }\n\n    .error-state[_ngcontent-%COMP%]   summary[_ngcontent-%COMP%] {\n      cursor: pointer;\n      font-weight: 600;\n      color: #495057;\n    }\n\n    .error-state[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n      margin-top: 8px;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      font-size: 12px;\n      color: #212529;\n    }"] });
+            i0.ɵɵconditional(ctx.hasError ? 2 : 3);
+        } }, dependencies: [i2.NgClass, i1.MJReactComponent], styles: [".component-artifact-viewer[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background: white;\n}\n\n.component-preview[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.error-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  text-align: center;\n  color: #dc3545;\n\n  i {\n    font-size: 48px;\n    margin-bottom: 16px;\n  }\n\n  h3 {\n    margin: 0 0 8px 0;\n    font-size: 20px;\n  }\n\n  p {\n    margin: 0 0 12px 0;\n    color: #6c757d;\n  }\n\n  details {\n    margin-top: 16px;\n    text-align: left;\n    max-width: 600px;\n\n    summary {\n      cursor: pointer;\n      color: #495057;\n      font-weight: 500;\n      margin-bottom: 8px;\n\n      &:hover {\n        color: #212529;\n      }\n    }\n\n    pre {\n      background: #f8f9fa;\n      padding: 12px;\n      border-radius: 4px;\n      overflow-x: auto;\n      font-size: 12px;\n      color: #495057;\n      margin: 0;\n    }\n  }\n}"] });
 };
 ComponentArtifactViewerComponent = __decorate([
     RegisterClass(BaseArtifactViewerPluginComponent, 'ComponentArtifactViewerPlugin')
@@ -224,70 +212,12 @@ ComponentArtifactViewerComponent = __decorate([
 export { ComponentArtifactViewerComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentArtifactViewerComponent, [{
         type: Component,
-        args: [{ selector: 'mj-component-artifact-viewer', template: `
-    <div class="component-artifact-viewer" [ngClass]="cssClass">
-      <div class="component-toolbar">
-        <div class="component-badge">
-          <i class="fas fa-cube"></i> Interactive Component
-        </div>
-        <button class="btn-icon" title="View Source Code" (click)="viewMode = viewMode === 'preview' ? 'source' : 'preview'">
-          <i [class]="viewMode === 'preview' ? 'fas fa-code' : 'fas fa-eye'"></i>
-          {{ viewMode === 'preview' ? 'Source' : 'Preview' }}
-        </button>
-        @if (viewMode === 'source') {
-          <button class="btn-icon" title="Copy Code" (click)="onCopy()">
-            <i class="fas fa-copy"></i> Copy
-          </button>
-        }
-      </div>
-      <div class="component-content-container">
-        @if (viewMode === 'preview') {
-          <div class="component-preview">
-            @if (hasError) {
-              <div class="error-state">
-                <i class="fas fa-exclamation-triangle"></i>
-                <h3>Component Error</h3>
-                <p>{{ errorMessage }}</p>
-                @if (errorDetails) {
-                  <details>
-                    <summary>Technical Details</summary>
-                    <pre>{{ errorDetails }}</pre>
-                  </details>
-                }
-              </div>
-            } @else {
-              @if (component) {
-                <mj-react-component
-                  #reactComponent
-                  [component]="component"
-                  (componentEvent)="onComponentEvent($event)"
-                  (stateChange)="onStateChange($event)"
-                  (openEntityRecord)="onOpenEntityRecord($event)">
-                </mj-react-component>
-              }
-              @else {
-                <div class="error-state">
-                  <i class="fas fa-exclamation-circle"></i>
-                  <h3>No Component Loaded</h3>
-                  <p>The component data is missing or invalid.</p>
-                </div>
-              }
-            }
-          </div>
-        } @else {
-          <mj-code-editor
-            [(ngModel)]="componentCode"
-            [language]="'typescript'"
-            [readonly]="readonly"
-            style="width: 100%; height: 100%;">
-          </mj-code-editor>
-        }
-      </div>
-    </div>
-  `, styles: ["\n    .component-artifact-viewer {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    .component-toolbar {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px;\n      background: #f5f5f5;\n      border-bottom: 1px solid #ddd;\n      gap: 8px;\n    }\n\n    .component-badge {\n      padding: 6px 12px;\n      background: #28a745;\n      color: white;\n      border-radius: 12px;\n      font-size: 11px;\n      font-weight: 600;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .btn-icon {\n      padding: 6px 12px;\n      background: white;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .btn-icon:hover {\n      background: #e9ecef;\n      border-color: #999;\n    }\n\n    .component-content-container {\n      flex: 1;\n      overflow: auto;\n    }\n\n    .component-preview {\n      padding: 20px;\n      background: white;\n      height: 100%;\n      overflow: auto;\n    }\n\n    .error-state {\n      padding: 20px;\n      text-align: center;\n      color: #dc3545;\n    }\n\n    .error-state i {\n      font-size: 48px;\n      margin-bottom: 16px;\n    }\n\n    .error-state h3 {\n      margin: 0 0 12px;\n      font-size: 20px;\n      font-weight: 600;\n    }\n\n    .error-state p {\n      margin: 0 0 12px;\n      color: #6c757d;\n    }\n\n    .error-state details {\n      margin-top: 16px;\n      text-align: left;\n      background: #f8f9fa;\n      padding: 12px;\n      border-radius: 4px;\n    }\n\n    .error-state summary {\n      cursor: pointer;\n      font-weight: 600;\n      color: #495057;\n    }\n\n    .error-state pre {\n      margin-top: 8px;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      font-size: 12px;\n      color: #212529;\n    }\n  "] }]
+        args: [{ selector: 'mj-component-artifact-viewer', template: "<div class=\"component-artifact-viewer\" [ngClass]=\"cssClass\">\n  <!-- Component Preview (full screen) -->\n  <div class=\"component-preview\">\n    @if (hasError) {\n      <div class=\"error-state\">\n        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n        <h3>Component Error</h3>\n        <p>{{ errorMessage }}</p>\n        @if (errorDetails) {\n          <details>\n            <summary>Technical Details</summary>\n            <pre>{{ errorDetails }}</pre>\n          </details>\n        }\n      </div>\n    } @else {\n      @if (component) {\n        <mj-react-component\n          #reactComponent\n          [component]=\"component\"\n          (componentEvent)=\"onComponentEvent($event)\">\n        </mj-react-component>\n      } @else {\n        <div class=\"error-state\">\n          <i class=\"fa-solid fa-exclamation-circle\"></i>\n          <h3>No Component Loaded</h3>\n          <p>The component data is missing or invalid.</p>\n        </div>\n      }\n    }\n  </div>\n</div>\n\n", styles: [".component-artifact-viewer {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background: white;\n}\n\n.component-preview {\n  flex: 1;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n\n.error-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px;\n  text-align: center;\n  color: #dc3545;\n\n  i {\n    font-size: 48px;\n    margin-bottom: 16px;\n  }\n\n  h3 {\n    margin: 0 0 8px 0;\n    font-size: 20px;\n  }\n\n  p {\n    margin: 0 0 12px 0;\n    color: #6c757d;\n  }\n\n  details {\n    margin-top: 16px;\n    text-align: left;\n    max-width: 600px;\n\n    summary {\n      cursor: pointer;\n      color: #495057;\n      font-weight: 500;\n      margin-bottom: 8px;\n\n      &:hover {\n        color: #212529;\n      }\n    }\n\n    pre {\n      background: #f8f9fa;\n      padding: 12px;\n      border-radius: 4px;\n      overflow-x: auto;\n      font-size: 12px;\n      color: #495057;\n      margin: 0;\n    }\n  }\n}\n"] }]
     }], () => [{ type: i1.AngularAdapterService }], { reactComponent: [{
             type: ViewChild,
             args: ['reactComponent']
+        }], tabsChanged: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentArtifactViewerComponent, { className: "ComponentArtifactViewerComponent", filePath: "src/lib/components/plugins/component-artifact-viewer.component.ts", lineNumber: 177 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentArtifactViewerComponent, { className: "ComponentArtifactViewerComponent", filePath: "src/lib/components/plugins/component-artifact-viewer.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=component-artifact-viewer.component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component-artifact-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/plugins/component-artifact-viewer.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"component-artifact-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/plugins/component-artifact-viewer.component.ts","../../../../src/lib/components/plugins/component-artifact-viewer.component.html"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAmD,MAAM,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5H,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,iCAAiC,EAAqB,MAAM,mCAAmC,CAAC;AAEzG,OAAO,EAAE,0BAA0B,EAAiB,MAAM,6CAA6C,CAAC;;;;;;ICM5F,AADF,+BAAS,cACE;IAAA,iCAAiB;IAAA,iBAAU;IACpC,2BAAK;IAAA,YAAkB;IACzB,AADyB,iBAAM,EACrB;;;IADH,eAAkB;IAAlB,yCAAkB;;;IAP7B,8BAAyB;IACvB,uBAAgD;IAChD,0BAAI;IAAA,+BAAe;IAAA,iBAAK;IACxB,yBAAG;IAAA,YAAkB;IAAA,iBAAI;IACzB,wGAAoB;IAMtB,iBAAM;;;IAPD,eAAkB;IAAlB,yCAAkB;IACrB,cAKC;IALD,8CAKC;;;;IAID,gDAG8C;IAA5C,uPAAkB,+BAAwB,KAAC;IAC7C,iBAAqB;;;IAFnB,4CAAuB;;;IAIzB,8BAAyB;IACvB,uBAA8C;IAC9C,0BAAI;IAAA,mCAAmB;IAAA,iBAAK;IAC5B,yBAAG;IAAA,yDAAyC;IAC9C,AAD8C,iBAAI,EAC5C;;;IALN,AANF,sHAAiB,0FAMR;;;IANT,0CAYC;;ADtBP;;;;;;;GAOG;AAOI,IAAM,gCAAgC,GAAtC,MAAM,gCAAiC,SAAQ,iCAAiC;IAcjE;IAbS,cAAc,CAAoB;IACrD,WAAW,GAAG,IAAI,YAAY,EAAQ,CAAC;IAEjD,iBAAiB;IACV,SAAS,GAAyB,IAAI,CAAC;IACvC,aAAa,GAAW,EAAE,CAAC;IAC3B,aAAa,GAAW,EAAE,CAAC;IAElC,cAAc;IACP,QAAQ,GAAG,KAAK,CAAC;IACjB,YAAY,GAAG,EAAE,CAAC;IAClB,YAAY,GAAG,EAAE,CAAC;IAEzB,YAAoB,OAA8B;QAChD,KAAK,EAAE,CAAC;QADU,YAAO,GAAP,OAAO,CAAuB;IAElD,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAsB;QACtC,gEAAgE;QAChE,IAAI,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,WAAW,EAAE,CAAC;YAC1E,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC/B,2CAA2C;YAC3C,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,iBAAiB;QAC7B,IAAI,CAAC;YACH,IAAI,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;gBACjC,IAAI,CAAC,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAkB,CAAC;gBAC9E,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,YAAY,GAAG,0BAA0B,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,KAAK,CAAC,QAAQ;QACZ,8BAA8B;QAC9B,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAE/B,kDAAkD;QAClD,IAAI,CAAC;YACH,MAAM,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAClC,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;YAC9D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,YAAY,GAAG,wCAAwC,CAAC;YAC7D,IAAI,CAAC,YAAY,GAAG,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,KAAK,CAAC,eAAe;QACnB,wEAAwE;IAC1E,CAAC;IAED;;OAEG;IACI,iBAAiB;QACtB,MAAM,IAAI,GAAwB,EAAE,CAAC;QAErC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,8BAA8B;QAC9B,IAAI,IAAI,CAAC,SAAS,CAAC,sBAAsB,EAAE,CAAC;YAC1C,IAAI,CAAC,IAAI,CAAC;gBACR,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE,mBAAmB;gBACzB,WAAW,EAAE,UAAU;gBACvB,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,sBAAsB;aAC/C,CAAC,CAAC;QACL,CAAC;QAED,uBAAuB;QACvB,IAAI,IAAI,CAAC,SAAS,CAAC,eAAe,EAAE,CAAC;YACnC,IAAI,CAAC,IAAI,CAAC;gBACR,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE,WAAW;gBACjB,WAAW,EAAE,UAAU;gBACvB,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,eAAe;aACxC,CAAC,CAAC;QACL,CAAC;QAED,wBAAwB;QACxB,IAAI,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,CAAC;YACpC,IAAI,CAAC,IAAI,CAAC;gBACR,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,aAAa;gBACnB,WAAW,EAAE,MAAM;gBACnB,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;gBACjE,QAAQ,EAAE,MAAM;aACjB,CAAC,CAAC;QACL,CAAC;QAED,yBAAyB;QACzB,IAAI,CAAC,IAAI,CAAC;YACR,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,MAAM;YACnB,QAAQ,EAAE,YAAY;YACtB,OAAO,EAAE,GAAG,EAAE,CAAC,0BAA0B,CAAC,IAAI,CAAC,SAAU,CAAC;SAC3D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,qBAAqB;QAC3B,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAC3C,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;YACzB,IAAI,CAAC,aAAa,GAAG,0BAA0B,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,KAAc;QAC7B,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;0FA9HU,gCAAgC;6DAAhC,gCAAgC;;;;;;YClB3C,AAFF,8BAA4D,aAE3B;YAa3B,AAZF,yFAAgB,kEAYP;YAgBb,AADE,iBAAM,EACF;;YA/BiC,sCAAoB;YAGvD,eA0BC;YA1BD,sCA0BC;;;ADTQ,gCAAgC;IAD5C,aAAa,CAAC,iCAAiC,EAAE,+BAA+B,CAAC;GACrE,gCAAgC,CA+H5C;;iFA/HY,gCAAgC;cAN5C,SAAS;2BACE,8BAA8B;sDAMX,cAAc;kBAA1C,SAAS;mBAAC,gBAAgB;YACjB,WAAW;kBAApB,MAAM;;kFAFI,gCAAgC"}

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

@@ -1 +1 @@
-{"version":3,"file":"html-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/html-artifact-viewer.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;;AAEtF;;GAEG;AACH,qBAuFa,2BAA4B,SAAQ,iCAAiC;IAKpE,OAAO,CAAC,SAAS;IAJtB,WAAW,SAAM;IACjB,eAAe,EAAE,QAAQ,CAAM;IAC/B,QAAQ,EAAE,SAAS,GAAG,QAAQ,CAAa;gBAE9B,SAAS,EAAE,YAAY;IAI3C,QAAQ,IAAI,IAAI;IAKhB,MAAM,IAAI,IAAI;yCAdH,2BAA2B;2CAA3B,2BAA2B;CAuBvC"}
+{"version":3,"file":"html-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/html-artifact-viewer.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;;AAEtF;;GAEG;AACH,qBAuFa,2BAA4B,SAAQ,iCAAiC;IAKpE,OAAO,CAAC,SAAS;IAJtB,WAAW,SAAM;IACjB,eAAe,EAAE,QAAQ,CAAM;IAC/B,QAAQ,EAAE,SAAS,GAAG,QAAQ,CAAa;gBAE9B,SAAS,EAAE,YAAY;IAI3C,QAAQ,IAAI,IAAI;IAqBhB,MAAM,IAAI,IAAI;yCA9BH,2BAA2B;2CAA3B,2BAA2B;CAuCvC"}

package/dist/lib/components/plugins/html-artifact-viewer.component.js

@@ -44,7 +44,19 @@ let HtmlArtifactViewerComponent = class HtmlArtifactViewerComponent extends Base
         this.sanitizer = sanitizer;
     }
     ngOnInit() {
-        this.htmlContent = this.getContent();
+        // Get content and clean up double-escaped characters that can appear in LLM-generated HTML
+        // These appear as literal "\\n", "\\t", "\\\"" in the string and cause rendering issues
+        let content = this.getContent();
+        // Remove escaped quotes (\" becomes ")
+        content = content.replace(/\\"/g, '"');
+        // Remove double-escaped newlines (\\n becomes nothing)
+        // HTML doesn't need whitespace for formatting, and these cause display issues
+        content = content.replace(/\\n/g, '');
+        content = content.replace(/\\\\n/g, '');
+        // Also remove double-escaped tabs if present
+        content = content.replace(/\\t/g, '');
+        content = content.replace(/\\\\t/g, '');
+        this.htmlContent = content;
         this.safeHtmlContent = this.sanitizer.sanitize(1, this.htmlContent) || '';
     }
     onCopy() {

package/dist/lib/components/plugins/html-artifact-viewer.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"html-artifact-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/plugins/html-artifact-viewer.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;;;;;;;IAwB5E,8BAA0B;IACxB,0BAAyC;IAC3C,iBAAM;;;IADC,cAA6B;IAA7B,qEAA6B;;;;IAGpC,0CAIqC;IAHnC,mUAAyB;IAI3B,iBAAiB;;;IAJf,kDAAyB;IAEzB,AADA,iCAAmB,6BACE;;AA7BjC;;GAEG;AAwFI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,iCAAiC;IAK5D;IAJb,WAAW,GAAG,EAAE,CAAC;IACjB,eAAe,GAAa,EAAE,CAAC;IAC/B,QAAQ,GAAyB,SAAS,CAAC;IAElD,YAAoB,SAAuB;QACzC,KAAK,EAAE,CAAC;QADU,cAAS,GAAT,SAAS,CAAc;IAE3C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QACrC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC5E,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;gBACxD,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,GAAG,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;qFAtBU,2BAA2B;6DAA3B,2BAA2B;YAlFhC,AADF,AADF,8BAAuD,aAC3B,gBAE+B;YAA/B,uHAAoB,SAAS,IAAC;YACpD,uBAA0B;YAAC,yBAC7B;YAAA,iBAAS;YACT,iCACqD;YAA9B,uHAAoB,QAAQ,IAAC;YAClD,uBAA2B;YAAC,wBAC9B;YAAA,iBAAS;YACT,iCAA8D;YAAnB,wGAAS,YAAQ,IAAC;YAC3D,uBAA2B;YAAC,uBAC9B;YACF,AADE,iBAAS,EACL;YACN,+BAAoC;YAKhC,AAJF,sFAA8B,qFAIrB;YASb,AADE,iBAAM,EACF;;YA5B4B,sCAAoB;YAEzB,eAAuC;YAAvC,oDAAuC;YAIvC,eAAsC;YAAtC,mDAAsC;YAS/D,eAWC;YAXD,sDAWC;;;AA0DI,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,EAAE,0BAA0B,CAAC;GAChE,2BAA2B,CAuBvC;;iFAvBY,2BAA2B;cAvFvC,SAAS;2BACE,yBAAyB,YACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BT;;kFAuDU,2BAA2B"}
+{"version":3,"file":"html-artifact-viewer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/plugins/html-artifact-viewer.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;;;;;;;IAwB5E,8BAA0B;IACxB,0BAAyC;IAC3C,iBAAM;;;IADC,cAA6B;IAA7B,qEAA6B;;;;IAGpC,0CAIqC;IAHnC,mUAAyB;IAI3B,iBAAiB;;;IAJf,kDAAyB;IAEzB,AADA,iCAAmB,6BACE;;AA7BjC;;GAEG;AAwFI,IAAM,2BAA2B,GAAjC,MAAM,2BAA4B,SAAQ,iCAAiC;IAK5D;IAJb,WAAW,GAAG,EAAE,CAAC;IACjB,eAAe,GAAa,EAAE,CAAC;IAC/B,QAAQ,GAAyB,SAAS,CAAC;IAElD,YAAoB,SAAuB;QACzC,KAAK,EAAE,CAAC;QADU,cAAS,GAAT,SAAS,CAAc;IAE3C,CAAC;IAED,QAAQ;QACN,2FAA2F;QAC3F,wFAAwF;QACxF,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAEhC,uCAAuC;QACvC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAEvC,uDAAuD;QACvD,8EAA8E;QAC9E,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACtC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAExC,6CAA6C;QAC7C,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACtC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAExC,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC5E,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;gBACxD,OAAO,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;YAC5C,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;gBACb,OAAO,CAAC,KAAK,CAAC,8BAA8B,EAAE,GAAG,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;qFAtCU,2BAA2B;6DAA3B,2BAA2B;YAlFhC,AADF,AADF,8BAAuD,aAC3B,gBAE+B;YAA/B,uHAAoB,SAAS,IAAC;YACpD,uBAA0B;YAAC,yBAC7B;YAAA,iBAAS;YACT,iCACqD;YAA9B,uHAAoB,QAAQ,IAAC;YAClD,uBAA2B;YAAC,wBAC9B;YAAA,iBAAS;YACT,iCAA8D;YAAnB,wGAAS,YAAQ,IAAC;YAC3D,uBAA2B;YAAC,uBAC9B;YACF,AADE,iBAAS,EACL;YACN,+BAAoC;YAKhC,AAJF,sFAA8B,qFAIrB;YASb,AADE,iBAAM,EACF;;YA5B4B,sCAAoB;YAEzB,eAAuC;YAAvC,oDAAuC;YAIvC,eAAsC;YAAtC,mDAAsC;YAS/D,eAWC;YAXD,sDAWC;;;AA0DI,2BAA2B;IADvC,aAAa,CAAC,iCAAiC,EAAE,0BAA0B,CAAC;GAChE,2BAA2B,CAuCvC;;iFAvCY,2BAA2B;cAvFvC,SAAS;2BACE,yBAAyB,YACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BT;;kFAuDU,2BAA2B"}

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

@@ -1,5 +1,5 @@
-import { OnInit, ChangeDetectorRef } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { OnInit, OnDestroy, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';
 import { BaseArtifactViewerPluginComponent } from '../base-artifact-viewer.component';
 import * as i0 from "@angular/core";
 /**
@@ -7,18 +7,22 @@ import * as i0 from "@angular/core";
  * Supports extract rules - shows displayMarkdown, displayHtml, or raw JSON editor (in that priority order).
  * All content is displayed in the parent's Display tab.
  */
-export declare class JsonArtifactViewerComponent extends BaseArtifactViewerPluginComponent implements OnInit {
+export declare class JsonArtifactViewerComponent extends BaseArtifactViewerPluginComponent implements OnInit, OnDestroy {
     private cdr;
     private sanitizer;
+    htmlFrame?: ElementRef<HTMLIFrameElement>;
     jsonContent: string;
     displayMarkdown: string | null;
     displayHtml: string | null;
+    htmlBlobUrl: SafeResourceUrl | null;
     renderedMarkdown: SafeHtml | null;
     private versionAttributes;
+    private unsafeBlobUrl;
     constructor(cdr: ChangeDetectorRef, sanitizer: DomSanitizer);
+    ngOnDestroy(): void;
     ngOnInit(): Promise<void>;
     /**
-     * Override to return true when showing extracted displayMarkdown or displayHtml.
+     * Override to return true when showing extracted displayHtml or displayMarkdown.
      * Returns false when showing raw JSON editor (no extract rules available).
      */
     get isShowingElevatedDisplay(): boolean;
@@ -30,7 +34,16 @@ export declare class JsonArtifactViewerComponent extends BaseArtifactViewerPlugi
     get parentShouldShowRawContent(): boolean;
     private loadVersionAttributes;
     private parseAttributeValue;
+    onIframeLoad(): void;
+    private resizeIframeToContent;
+    openInNewWindow(): void;
+    printHtml(): void;
     onCopy(): void;
+    /**
+     * Clean up double-escaped characters that appear in LLM-generated HTML
+     * Removes literal "\\n", "\\t", and "\\\"" which cause rendering issues
+     */
+    private cleanEscapedCharacters;
     static ɵfac: i0.ɵɵFactoryDeclaration<JsonArtifactViewerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<JsonArtifactViewerComponent, "mj-json-artifact-viewer", never, {}, {}, never, never, false, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"json-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/json-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;;AAKtF;;;;GAIG;AACH,qBAuFa,2BAA4B,SAAQ,iCAAkC,YAAW,MAAM;IAQhG,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IARZ,WAAW,SAAM;IACjB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClC,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAChD,OAAO,CAAC,iBAAiB,CAAwC;gBAGvD,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,YAAY;IAK3B,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAU/B;;;OAGG;IACH,IAAoB,wBAAwB,IAAI,OAAO,CAEtD;IAED;;;;OAIG;IACH,IAAoB,0BAA0B,IAAI,OAAO,CAExD;YAEa,qBAAqB;IAyDnC,OAAO,CAAC,mBAAmB;IAgB3B,MAAM,IAAI,IAAI;yCAlHH,2BAA2B;2CAA3B,2BAA2B;CA6HvC"}
+{"version":3,"file":"json-artifact-viewer.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/plugins/json-artifact-viewer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAa,UAAU,EAAE,MAAM,eAAe,CAAC;AACvG,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEpF,OAAO,EAAE,iCAAiC,EAAE,MAAM,mCAAmC,CAAC;;AAKtF;;;;GAIG;AACH,qBA8Ga,2BAA4B,SAAQ,iCAAkC,YAAW,MAAM,EAAE,SAAS;IAY3G,OAAO,CAAC,GAAG;IACX,OAAO,CAAC,SAAS;IAZK,SAAS,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE3D,WAAW,SAAM;IACjB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAClC,WAAW,EAAE,eAAe,GAAG,IAAI,CAAQ;IAC3C,gBAAgB,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAChD,OAAO,CAAC,iBAAiB,CAAwC;IACjE,OAAO,CAAC,aAAa,CAAuB;gBAGlC,GAAG,EAAE,iBAAiB,EACtB,SAAS,EAAE,YAAY;IAKjC,WAAW,IAAI,IAAI;IASb,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;IAU/B;;;OAGG;IACH,IAAoB,wBAAwB,IAAI,OAAO,CAEtD;IAED;;;;OAIG;IACH,IAAoB,0BAA0B,IAAI,OAAO,CAExD;YAEa,qBAAqB;IAuEnC,OAAO,CAAC,mBAAmB;IAyB3B,YAAY,IAAI,IAAI;IAsDpB,OAAO,CAAC,qBAAqB;IAqC7B,eAAe,IAAI,IAAI;IAUvB,SAAS,IAAI,IAAI;IAWjB,MAAM,IAAI,IAAI;IAYd;;;OAGG;IACH,OAAO,CAAC,sBAAsB;yCAtRnB,2BAA2B;2CAA3B,2BAA2B;CAySvC"}