@memberjunction/ng-artifacts 5.22.0 → 5.24.0

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

@@ -142,7 +142,7 @@ function ArtifactViewerPanelComponent_Conditional_1_Template(rf, ctx) { if (rf &
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngClass", ctx_r1.getArtifactIcon());
+    i0.ɵɵproperty("ngClass", ctx_r1.artifactIcon);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.displayName, " ");
     i0.ɵɵadvance();
@@ -734,20 +734,23 @@ export class ArtifactViewerPanelComponent {
         if (changes['versionNumber'] && !changes['versionNumber'].firstChange) {
             const newVersionNumber = changes['versionNumber'].currentValue;
             if (newVersionNumber != null) {
-                // Check if we already have this version loaded (avoid reload if possible)
+                // Check if we have metadata for this version (allVersions has lightweight metadata)
                 const targetVersion = this.allVersions.find(v => v.VersionNumber === newVersionNumber);
                 if (targetVersion) {
-                    // Just switch to the version we already have
-                    this.artifactVersion = targetVersion;
                     this.selectedVersionNumber = targetVersion.VersionNumber || 1;
-                    this.jsonContent = this.FormatJSON(targetVersion.Content || '{}');
-                    // Load version attributes
-                    await this.loadVersionAttributes();
-                    // Reload collection associations for this version
-                    await this.loadCollectionAssociations();
-                    // Reload links data
-                    await this.loadLinksData();
-                    this.cdr.detectChanges(); // zone.js 0.15: async chain doesn't trigger CD
+                    // Load full content for the selected version
+                    const fullVersion = await this.loadVersionContent(targetVersion.ID);
+                    if (fullVersion) {
+                        this.artifactVersion = fullVersion;
+                        this.jsonContent = this.FormatJSON(fullVersion.Content || '{}');
+                    }
+                    // Load attributes and collection data in parallel
+                    await Promise.all([
+                        this.loadVersionAttributes(),
+                        this.loadCollectionAssociations(),
+                        this.loadLinksData()
+                    ]);
+                    this.cdr.detectChanges();
                 }
                 else {
                     // Need to reload to get this version (shouldn't normally happen)
@@ -767,56 +770,81 @@ export class ArtifactViewerPanelComponent {
             // Clear links data from previous artifact to prevent stale Links tab
             this.clearLinksData();
             const md = new Metadata();
-            // Load artifact
-            this.artifact = await md.GetEntityObject('MJ: Artifacts', this.currentUser);
-            const loaded = await this.artifact.Load(this.artifactId);
+            // Load artifact — assign to local first to avoid mid-cycle icon flicker
+            const artifactEntity = await md.GetEntityObject('MJ: Artifacts', this.currentUser);
+            const loaded = await artifactEntity.Load(this.artifactId);
             if (!loaded) {
                 this.error = 'Failed to load artifact';
                 return;
             }
-            // Load artifact type to check for DriverClass
-            await this.loadArtifactType();
-            // Load ALL versions
+            this.artifact = artifactEntity;
+            // PERF: Batch load version metadata, collection associations, and conversation links
+            // in a single RunViews call. Content is excluded here — loaded on-demand for the selected version.
             const rv = new RunView();
-            const result = await rv.RunView({
-                EntityName: 'MJ: Artifact Versions',
-                ExtraFilter: `ArtifactID='${this.artifactId}'`,
-                OrderBy: 'VersionNumber DESC',
-                ResultType: 'entity_object'
-            }, this.currentUser);
-            if (result.Success && result.Results && result.Results.length > 0) {
-                this.allVersions = result.Results;
-                // If target version specified, try to load it
-                if (targetVersionNumber) {
-                    const targetVersion = this.allVersions.find(v => v.VersionNumber === targetVersionNumber);
-                    if (targetVersion) {
-                        this.artifactVersion = targetVersion;
-                        this.selectedVersionNumber = targetVersion.VersionNumber || 1;
-                        this.jsonContent = this.FormatJSON(targetVersion.Content || '{}');
-                    }
-                    else {
-                        // Target version not found, default to latest
-                        this.artifactVersion = result.Results[0];
-                        this.selectedVersionNumber = this.artifactVersion.VersionNumber || 1;
-                        this.jsonContent = this.FormatJSON(this.artifactVersion.Content || '{}');
-                    }
-                }
-                else {
-                    // No target version, default to latest version (first in DESC order)
-                    this.artifactVersion = result.Results[0];
-                    this.selectedVersionNumber = this.artifactVersion.VersionNumber || 1;
-                    this.jsonContent = this.FormatJSON(this.artifactVersion.Content || '{}');
+            const batchResults = await rv.RunViews([
+                {
+                    // [0] Version metadata (lightweight — no Content field)
+                    EntityName: 'MJ: Artifact Versions',
+                    ExtraFilter: `ArtifactID='${this.artifactId}'`,
+                    OrderBy: 'VersionNumber DESC',
+                    Fields: ['ID', 'ArtifactID', 'VersionNumber', 'Name', 'Description', '__mj_CreatedAt', '__mj_UpdatedAt'],
+                    ResultType: 'simple'
+                },
+                {
+                    // [1] Collection associations for all versions of this artifact
+                    EntityName: 'MJ: Collection Artifacts',
+                    ExtraFilter: `ArtifactVersionID IN (
+            SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
+          )`,
+                    Fields: ['ID', 'CollectionID', 'ArtifactVersionID', 'Sequence'],
+                    ResultType: 'simple'
+                },
+                {
+                    // [2] Conversation detail artifact links (for Links tab)
+                    EntityName: 'MJ: Conversation Detail Artifacts',
+                    ExtraFilter: `ArtifactVersionID IN (
+            SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
+          )`,
+                    Fields: ['ID', 'ConversationDetailID', 'ArtifactVersionID'],
+                    MaxRows: 1,
+                    ResultType: 'simple'
                 }
-                // Load version attributes
-                await this.loadVersionAttributes();
-                // Load collection associations
-                await this.loadCollectionAssociations();
-                // Load links data
-                await this.loadLinksData();
+            ], this.currentUser);
+            const [versionsResult, collectionsResult, convDetailResult] = batchResults;
+            if (!versionsResult.Success || !versionsResult.Results || versionsResult.Results.length === 0) {
+                this.error = 'No artifact version found';
+                return;
+            }
+            // Store version metadata as simple objects (used for dropdown display)
+            this.allVersions = versionsResult.Results;
+            // Determine which version to display
+            let selectedVersion;
+            if (targetVersionNumber) {
+                selectedVersion = versionsResult.Results.find((v) => v.VersionNumber === targetVersionNumber);
+            }
+            // Fall back to latest version (first in DESC order)
+            const versionToLoad = selectedVersion || versionsResult.Results[0];
+            this.selectedVersionNumber = versionToLoad.VersionNumber || 1;
+            // PERF: Start artifact type resolution and selected version content load in parallel
+            const [, selectedVersionEntity] = await Promise.all([
+                this.loadArtifactType(),
+                this.loadVersionContent(versionToLoad.ID)
+            ]);
+            if (selectedVersionEntity) {
+                this.artifactVersion = selectedVersionEntity;
+                this.jsonContent = this.FormatJSON(selectedVersionEntity.Content || '{}');
             }
             else {
-                this.error = 'No artifact version found';
+                this.error = 'Failed to load artifact version content';
+                return;
             }
+            // PERF: Process collection and links data in parallel (uses already-fetched batch data)
+            await Promise.all([
+                this.processCollectionAssociations(collectionsResult),
+                this.processLinksData(collectionsResult, convDetailResult)
+            ]);
+            // Load version attributes (depends on selected version being set)
+            await this.loadVersionAttributes();
         }
         catch (err) {
             console.error('Error loading artifact:', err);
@@ -824,9 +852,26 @@ export class ArtifactViewerPanelComponent {
         }
         finally {
             this.isLoading = false;
+            this.updateArtifactIcon();
             this.cdr.detectChanges();
         }
     }
+    /**
+     * Load full content for a single version by ID.
+     * This avoids downloading Content for ALL versions when only one is displayed.
+     */
+    async loadVersionContent(versionId) {
+        try {
+            const md = new Metadata();
+            const versionEntity = await md.GetEntityObject('MJ: Artifact Versions', this.currentUser);
+            const loaded = await versionEntity.Load(versionId);
+            return loaded ? versionEntity : null;
+        }
+        catch (err) {
+            console.error('Error loading version content:', err);
+            return null;
+        }
+    }
     /**
      * Clear all links-related data to prevent stale data when switching artifacts
      */
@@ -861,7 +906,7 @@ export class ArtifactViewerPanelComponent {
             const result = await rv.RunView({
                 EntityName: 'MJ: Artifact Version Attributes',
                 ExtraFilter: `ArtifactVersionID='${this.artifactVersion.ID}'`,
-                ResultType: 'entity_object'
+                ResultType: 'simple'
             }, this.currentUser);
             if (result.Success && result.Results) {
                 this.versionAttributes = result.Results;
@@ -1013,53 +1058,73 @@ export class ArtifactViewerPanelComponent {
         cleaned = cleaned.replace(/\\\\n/g, '');
         return cleaned;
     }
-    async loadCollectionAssociations() {
+    /**
+     * Process pre-fetched collection association data.
+     * Accepts the batch result from loadArtifact() to avoid duplicate queries.
+     */
+    async processCollectionAssociations(collectionsResult) {
         if (!this.artifactId)
             return;
         try {
-            const rv = new RunView();
-            // Load ALL collection associations for ALL versions of this artifact
-            const result = await rv.RunView({
-                EntityName: 'MJ: Collection Artifacts',
-                ExtraFilter: `ArtifactVersionID IN (
-          SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
-        )`,
-                ResultType: 'entity_object'
-            }, this.currentUser);
-            if (result.Success && result.Results) {
-                this.artifactCollections = result.Results;
-                // Filter to get only collections containing the CURRENT version
-                const currentVersionId = this.artifactVersion?.ID;
-                if (currentVersionId) {
-                    // Type-safe comparison: ensure both IDs are strings and match exactly
-                    const currentIdStr = String(currentVersionId).toLowerCase();
-                    this.currentVersionCollections = result.Results.filter(ca => {
-                        const versionIdStr = String(ca.ArtifactVersionID || '').toLowerCase();
-                        return versionIdStr && currentIdStr && versionIdStr === currentIdStr;
-                    });
-                }
-                else {
-                    this.currentVersionCollections = [];
-                }
-                // Load the primary collection details if exists
-                if (this.artifactCollections.length > 0) {
-                    const collectionId = this.artifactCollections[0].CollectionID;
+            // If no pre-fetched data, fetch it (used by selectVersion/saveToCollections reload)
+            let collectionRows;
+            if (collectionsResult?.Success && collectionsResult.Results) {
+                collectionRows = collectionsResult.Results;
+            }
+            else {
+                const rv = new RunView();
+                const result = await rv.RunView({
+                    EntityName: 'MJ: Collection Artifacts',
+                    ExtraFilter: `ArtifactVersionID IN (
+            SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
+          )`,
+                    Fields: ['ID', 'CollectionID', 'ArtifactVersionID', 'Sequence'],
+                    ResultType: 'simple'
+                }, this.currentUser);
+                collectionRows = (result.Success ? result.Results : []);
+            }
+            // Store as simple objects — these are read-only display data
+            this.artifactCollections = collectionRows;
+            // Filter to get only collections containing the CURRENT version
+            const currentVersionId = this.artifactVersion?.ID;
+            if (currentVersionId) {
+                const currentIdStr = String(currentVersionId).toLowerCase();
+                this.currentVersionCollections = collectionRows.filter(ca => {
+                    const versionIdStr = String(ca['ArtifactVersionID'] || ca.ArtifactVersionID || '').toLowerCase();
+                    return versionIdStr && currentIdStr && versionIdStr === currentIdStr;
+                });
+            }
+            else {
+                this.currentVersionCollections = [];
+            }
+            // Load the primary collection details if exists
+            if (this.artifactCollections.length > 0) {
+                const collectionId = collectionRows[0].CollectionID ||
+                    this.artifactCollections[0].CollectionID;
+                if (collectionId) {
                     const md = new Metadata();
                     this.primaryCollection = await md.GetEntityObject('MJ: Collections', this.currentUser);
                     await this.primaryCollection.Load(collectionId);
                 }
-                else {
-                    this.primaryCollection = null;
-                }
+            }
+            else {
+                this.primaryCollection = null;
             }
         }
         catch (err) {
-            console.error('Error loading collection associations:', err);
+            console.error('Error processing collection associations:', err);
         }
         finally {
-            this.cdr.detectChanges(); // zone.js 0.15: async RunView doesn't trigger CD
+            this.cdr.detectChanges();
         }
     }
+    /**
+     * @deprecated Use processCollectionAssociations() instead. Kept as a shim for callers
+     * that don't have pre-fetched data (e.g., selectVersion, saveToCollections).
+     */
+    async loadCollectionAssociations() {
+        return this.processCollectionAssociations();
+    }
     get isInCollection() {
         return this.currentVersionCollections.length > 0;
     }
@@ -1139,18 +1204,21 @@ export class ArtifactViewerPanelComponent {
         }
     }
     async selectVersion(version) {
-        this.artifactVersion = version;
         this.selectedVersionNumber = version.VersionNumber || 1;
-        this.jsonContent = this.FormatJSON(version.Content || '{}');
         this.showVersionDropdown = false;
-        // Load attributes for the selected version
-        await this.loadVersionAttributes();
-        // CRITICAL FIX: Reload collection associations for this version
-        // This ensures bookmark button and Links tab reflect the correct state
-        await this.loadCollectionAssociations();
-        // Also reload links data to update conversation/collection links
-        await this.loadLinksData();
-        this.cdr.detectChanges(); // zone.js 0.15: async chain doesn't trigger CD
+        // Load full content for the selected version (allVersions only has metadata)
+        const fullVersion = await this.loadVersionContent(version.ID);
+        if (fullVersion) {
+            this.artifactVersion = fullVersion;
+            this.jsonContent = this.FormatJSON(fullVersion.Content || '{}');
+        }
+        // Load attributes and collection data in parallel
+        await Promise.all([
+            this.loadVersionAttributes(),
+            this.loadCollectionAssociations(),
+            this.loadLinksData()
+        ]);
+        this.cdr.detectChanges();
     }
     async onSaveToLibrary() {
         // Always show the collection picker modal
@@ -1230,9 +1298,10 @@ export class ArtifactViewerPanelComponent {
         }
     }
     /**
-     * Load links data: origin conversation and all collections containing this artifact
+     * Process links data using pre-fetched batch results from loadArtifact().
+     * Reuses collection data from the same batch to avoid duplicate queries.
      */
-    async loadLinksData() {
+    async processLinksData(collectionsResult, convDetailResult) {
         if (!this.artifactId)
             return;
         // Clear old links data first to prevent stale data from previous artifact
@@ -1240,68 +1309,81 @@ export class ArtifactViewerPanelComponent {
         try {
             const md = new Metadata();
             const rv = new RunView();
-            // Load all collections containing any version of this artifact
-            const collArtifactsResult = await rv.RunView({
-                EntityName: 'MJ: Collection Artifacts',
-                ExtraFilter: `ArtifactVersionID IN (
-          SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
-        )`,
-                ResultType: 'entity_object'
-            }, this.currentUser);
-            if (collArtifactsResult.Success && collArtifactsResult.Results) {
-                // Get unique collection IDs
-                const collectionIds = [...new Set(collArtifactsResult.Results.map(ca => ca.CollectionID))];
-                if (collectionIds.length > 0) {
-                    const collectionsFilter = collectionIds.map(id => `ID='${id}'`).join(' OR ');
-                    const collectionsResult = await rv.RunView({
-                        EntityName: 'MJ: Collections',
-                        ExtraFilter: collectionsFilter,
-                        ResultType: 'entity_object'
+            // Use pre-fetched collection data or fetch if not provided
+            let collectionRows = [];
+            if (collectionsResult?.Success && collectionsResult.Results) {
+                collectionRows = collectionsResult.Results;
+            }
+            else {
+                const result = await rv.RunView({
+                    EntityName: 'MJ: Collection Artifacts',
+                    ExtraFilter: `ArtifactVersionID IN (
+            SELECT ID FROM [__mj].[vwArtifactVersions] WHERE ArtifactID='${this.artifactId}'
+          )`,
+                    Fields: ['ID', 'CollectionID', 'ArtifactVersionID'],
+                    ResultType: 'simple'
+                }, this.currentUser);
+                collectionRows = (result.Success ? result.Results : []);
+            }
+            // Get unique collection IDs and load collection details
+            const collectionIds = [...new Set(collectionRows.map(ca => (ca['CollectionID'] || ca.CollectionID)))].filter(Boolean);
+            if (collectionIds.length > 0) {
+                const collectionsFilter = collectionIds.map(id => `ID='${id}'`).join(' OR ');
+                const collectionsEntityResult = await rv.RunView({
+                    EntityName: 'MJ: Collections',
+                    ExtraFilter: collectionsFilter,
+                    Fields: ['ID', 'Name', 'UserID', 'Description'],
+                    ResultType: 'simple'
+                }, this.currentUser);
+                if (collectionsEntityResult.Success && collectionsEntityResult.Results) {
+                    this.allCollections = collectionsEntityResult.Results;
+                }
+            }
+            // Use pre-fetched conversation detail artifact data or fetch if not provided
+            let convDetailRows = [];
+            if (convDetailResult?.Success && convDetailResult.Results) {
+                convDetailRows = convDetailResult.Results;
+            }
+            else {
+                const versionIds = this.allVersions.map(v => v.ID);
+                if (versionIds.length > 0) {
+                    const versionFilter = versionIds.map(id => `ArtifactVersionID='${id}'`).join(' OR ');
+                    const result = await rv.RunView({
+                        EntityName: 'MJ: Conversation Detail Artifacts',
+                        ExtraFilter: versionFilter,
+                        Fields: ['ID', 'ConversationDetailID', 'ArtifactVersionID'],
+                        MaxRows: 1,
+                        ResultType: 'simple'
                     }, this.currentUser);
-                    if (collectionsResult.Success && collectionsResult.Results) {
-                        this.allCollections = collectionsResult.Results;
-                    }
+                    convDetailRows = (result.Success ? result.Results : []);
                 }
             }
-            // Load origin conversation (if artifact came from conversation)
-            // Artifacts are linked to conversations via ConversationDetailArtifact -> ConversationDetail -> Conversation
-            // Get all version IDs for this artifact
-            const versionIds = this.allVersions.map(v => v.ID);
-            if (versionIds.length > 0) {
-                const versionFilter = versionIds.map(id => `ArtifactVersionID='${id}'`).join(' OR ');
-                const convDetailArtifactsResult = await rv.RunView({
-                    EntityName: 'MJ: Conversation Detail Artifacts',
-                    ExtraFilter: versionFilter,
-                    MaxRows: 1,
-                    ResultType: 'entity_object'
-                }, this.currentUser);
-                if (convDetailArtifactsResult.Success && convDetailArtifactsResult.Results && convDetailArtifactsResult.Results.length > 0) {
-                    const conversationDetailId = convDetailArtifactsResult.Results[0].ConversationDetailID;
-                    const artifactVersionId = convDetailArtifactsResult.Results[0].ArtifactVersionID;
-                    // Store which version came from the origin conversation
-                    this.originConversationVersionId = artifactVersionId;
-                    // Load the conversation detail to get the conversation ID
-                    const conversationDetail = await md.GetEntityObject('MJ: Conversation Details', this.currentUser);
-                    const detailLoaded = await conversationDetail.Load(conversationDetailId);
-                    if (detailLoaded && conversationDetail.ConversationID) {
-                        const conversation = await md.GetEntityObject('MJ: Conversations', this.currentUser);
-                        const loaded = await conversation.Load(conversationDetail.ConversationID);
-                        if (loaded) {
-                            this.originConversation = conversation;
-                            // Check if user has access (is owner or participant)
-                            const userIsOwner = UUIDsEqual(conversation.UserID, this.currentUser.ID);
-                            // Check if user is a participant
-                            const participantResult = await rv.RunView({
-                                EntityName: 'MJ: Conversation Details',
-                                ExtraFilter: `ConversationID='${conversation.ID}' AND UserID='${this.currentUser.ID}'`,
-                                MaxRows: 1,
-                                ResultType: 'simple'
-                            }, this.currentUser);
-                            const userIsParticipant = participantResult.Success &&
-                                participantResult.Results &&
-                                participantResult.Results.length > 0;
-                            this.hasAccessToOriginConversation = userIsOwner || userIsParticipant;
-                        }
+            // Load origin conversation if we have a link
+            if (convDetailRows.length > 0) {
+                const conversationDetailId = (convDetailRows[0]['ConversationDetailID'] || convDetailRows[0].ConversationDetailID);
+                const artifactVersionId = (convDetailRows[0]['ArtifactVersionID'] || convDetailRows[0].ArtifactVersionID);
+                this.originConversationVersionId = artifactVersionId;
+                // Load conversation detail to get conversation ID
+                const conversationDetail = await md.GetEntityObject('MJ: Conversation Details', this.currentUser);
+                const detailLoaded = await conversationDetail.Load(conversationDetailId);
+                if (detailLoaded && conversationDetail.ConversationID) {
+                    const conversation = await md.GetEntityObject('MJ: Conversations', this.currentUser);
+                    const loaded = await conversation.Load(conversationDetail.ConversationID);
+                    if (loaded) {
+                        this.originConversation = conversation;
+                        // Check if user has access (is owner or participant)
+                        const userIsOwner = UUIDsEqual(conversation.UserID, this.currentUser.ID);
+                        const participantResult = await rv.RunView({
+                            EntityName: 'MJ: Conversation Details',
+                            ExtraFilter: `ConversationID='${conversation.ID}' AND UserID='${this.currentUser.ID}'`,
+                            MaxRows: 1,
+                            Fields: ['ID'],
+                            ResultType: 'simple'
+                        }, this.currentUser);
+                        const userIsParticipant = participantResult.Success &&
+                            participantResult.Results &&
+                            participantResult.Results.length > 0;
+                        this.hasAccessToOriginConversation = userIsOwner || userIsParticipant;
                     }
                 }
             }
@@ -1310,9 +1392,15 @@ export class ArtifactViewerPanelComponent {
             console.error('Error loading links data:', error);
         }
         finally {
-            this.cdr.detectChanges(); // zone.js 0.15: async chain doesn't trigger CD
+            this.cdr.detectChanges();
         }
     }
+    /**
+     * @deprecated Use processLinksData() instead. Kept as shim for callers without pre-fetched data.
+     */
+    async loadLinksData() {
+        return this.processLinksData();
+    }
     get linksToShow() {
         const links = [];
         // Get current version ID being viewed
@@ -1513,10 +1601,13 @@ export class ArtifactViewerPanelComponent {
      * Get the icon for this artifact using the centralized icon service.
      * Fallback priority: Plugin icon > Metadata icon > Hardcoded mapping > Generic icon
      */
-    getArtifactIcon() {
-        if (!this.artifact)
-            return 'fa-file';
-        return this.artifactIconService.getArtifactIcon(this.artifact);
+    /** Cached icon class — set once after artifact loads to avoid mid-cycle flicker */
+    artifactIcon = 'fa-file';
+    /** Update the cached icon from the loaded artifact */
+    updateArtifactIcon() {
+        this.artifactIcon = this.artifact
+            ? this.artifactIconService.getArtifactIcon(this.artifact)
+            : 'fa-file';
     }
     static ɵfac = function ArtifactViewerPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ArtifactViewerPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MJNotificationService), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i3.ArtifactIconService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactViewerPanelComponent, selectors: [["mj-artifact-viewer-panel"]], viewQuery: function ArtifactViewerPanelComponent_Query(rf, ctx) { if (rf & 1) {
@@ -1546,7 +1637,7 @@ export class ArtifactViewerPanelComponent {
 }
 (() => { (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 (pluginViewer?.SupportsFeedback) {\n          <button class=\"feedback-btn\"\n                  (click)=\"pluginViewer?.AskUserForFeedback()\"\n                  title=\"Inspect & rate components\">\n            <i class=\"fas fa-star-half-stroke\"></i>\n          </button>\n        }\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.feedback-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.feedback-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.feedback-btn i {\n  font-size: 14px;\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"] }]
+        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]=\"artifactIcon\"></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 (pluginViewer?.SupportsFeedback) {\n          <button class=\"feedback-btn\"\n                  (click)=\"pluginViewer?.AskUserForFeedback()\"\n                  title=\"Inspect & rate components\">\n            <i class=\"fas fa-star-half-stroke\"></i>\n          </button>\n        }\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.feedback-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.feedback-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-brand-primary);\n}\n\n.feedback-btn i {\n  font-size: 14px;\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: [{