npm - @memberjunction/ng-conversations - Versions diffs - 5.11.0 → 5.13.0 - Mend

@memberjunction/ng-conversations 5.11.0 → 5.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (74) hide show

package/dist/lib/components/collection/collection-view.component.js CHANGED Viewed

@@ -289,7 +289,7 @@ export class CollectionViewComponent {
             i0.ɵɵrepeater(ctx.artifactVersions);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.showArtifactViewer && ctx.selectedArtifactId ? 16 : -1);
-        } }, dependencies: [i1.DropDownListComponent, i2.ArtifactViewerPanelComponent, i3.CollectionArtifactCardComponent], styles: [".collection-view[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: white; }\n\n    .view-header[_ngcontent-%COMP%] { padding: 20px 24px; border-bottom: 1px solid #D9D9D9; display: flex; justify-content: space-between; align-items: center; }\n    .view-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { margin: 0; font-size: 20px; flex: 1; }\n\n    .header-actions[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 12px; }\n\n    .view-mode-toggle[_ngcontent-%COMP%] { display: flex; border: 1px solid #D9D9D9; border-radius: 4px; overflow: hidden; }\n    .mode-btn[_ngcontent-%COMP%] { padding: 8px 12px; background: white; border: none; border-right: 1px solid #D9D9D9; cursor: pointer; color: #666; transition: all 150ms ease; }\n    .mode-btn[_ngcontent-%COMP%]:last-child { border-right: none; }\n    .mode-btn[_ngcontent-%COMP%]:hover { background: #F4F4F4; }\n    .mode-btn.active[_ngcontent-%COMP%] { background: #0076B6; color: white; }\n\n    .btn-add[_ngcontent-%COMP%] { padding: 8px 16px; background: #0076B6; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n    .btn-add[_ngcontent-%COMP%]:hover { background: #005A8C; }\n\n    .view-content[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 24px; }\n    .view-content.grid-mode[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }\n    .view-content.list-mode[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 12px; }\n\n    .empty-state[_ngcontent-%COMP%] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: #999; }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 64px; margin-bottom: 24px; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0 0 24px 0; font-size: 16px; }\n    .btn-add-primary[_ngcontent-%COMP%] { padding: 12px 24px; background: #0076B6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }\n    .btn-add-primary[_ngcontent-%COMP%]:hover { background: #005A8C; }\n\n    .artifact-viewer-overlay[_ngcontent-%COMP%] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }\n    .artifact-viewer-container[_ngcontent-%COMP%] { width: 90%; max-width: 1200px; height: 90vh; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }"] });
+        } }, dependencies: [i1.DropDownListComponent, i2.ArtifactViewerPanelComponent, i3.CollectionArtifactCardComponent], styles: [".collection-view[_ngcontent-%COMP%] { display: flex; flex-direction: column; height: 100%; background: var(--mj-bg-surface); }\n\n    .view-header[_ngcontent-%COMP%] { padding: 20px 24px; border-bottom: 1px solid var(--mj-border-default); display: flex; justify-content: space-between; align-items: center; }\n    .view-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { margin: 0; font-size: 20px; flex: 1; }\n\n    .header-actions[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 12px; }\n\n    .view-mode-toggle[_ngcontent-%COMP%] { display: flex; border: 1px solid var(--mj-border-default); border-radius: 4px; overflow: hidden; }\n    .mode-btn[_ngcontent-%COMP%] { padding: 8px 12px; background: var(--mj-bg-surface); border: none; border-right: 1px solid var(--mj-border-default); cursor: pointer; color: var(--mj-text-muted); transition: all 150ms ease; }\n    .mode-btn[_ngcontent-%COMP%]:last-child { border-right: none; }\n    .mode-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-sunken); }\n    .mode-btn.active[_ngcontent-%COMP%] { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n    .btn-add[_ngcontent-%COMP%] { padding: 8px 16px; background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n    .btn-add[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary-hover); }\n\n    .view-content[_ngcontent-%COMP%] { flex: 1; overflow-y: auto; padding: 24px; }\n    .view-content.grid-mode[_ngcontent-%COMP%] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }\n    .view-content.list-mode[_ngcontent-%COMP%] { display: flex; flex-direction: column; gap: 12px; }\n\n    .empty-state[_ngcontent-%COMP%] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: var(--mj-text-disabled); }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 64px; margin-bottom: 24px; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0 0 24px 0; font-size: 16px; }\n    .btn-add-primary[_ngcontent-%COMP%] { padding: 12px 24px; background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }\n    .btn-add-primary[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary-hover); }\n\n    .artifact-viewer-overlay[_ngcontent-%COMP%] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--mj-bg-overlay); display: flex; align-items: center; justify-content: center; z-index: 10000; }\n    .artifact-viewer-container[_ngcontent-%COMP%] { width: 90%; max-width: 1200px; height: 90vh; background: var(--mj-bg-surface); border-radius: 12px; overflow: hidden; box-shadow: var(--mj-shadow-lg); }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionViewComponent, [{
         type: Component,
@@ -375,7 +375,7 @@ export class CollectionViewComponent {
         </div>
       </div>
     }
-    `, styles: ["\n    .collection-view { display: flex; flex-direction: column; height: 100%; background: white; }\n\n    .view-header { padding: 20px 24px; border-bottom: 1px solid #D9D9D9; display: flex; justify-content: space-between; align-items: center; }\n    .view-header h2 { margin: 0; font-size: 20px; flex: 1; }\n\n    .header-actions { display: flex; align-items: center; gap: 12px; }\n\n    .view-mode-toggle { display: flex; border: 1px solid #D9D9D9; border-radius: 4px; overflow: hidden; }\n    .mode-btn { padding: 8px 12px; background: white; border: none; border-right: 1px solid #D9D9D9; cursor: pointer; color: #666; transition: all 150ms ease; }\n    .mode-btn:last-child { border-right: none; }\n    .mode-btn:hover { background: #F4F4F4; }\n    .mode-btn.active { background: #0076B6; color: white; }\n\n    .btn-add { padding: 8px 16px; background: #0076B6; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n    .btn-add:hover { background: #005A8C; }\n\n    .view-content { flex: 1; overflow-y: auto; padding: 24px; }\n    .view-content.grid-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }\n    .view-content.list-mode { display: flex; flex-direction: column; gap: 12px; }\n\n    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: #999; }\n    .empty-state i { font-size: 64px; margin-bottom: 24px; }\n    .empty-state p { margin: 0 0 24px 0; font-size: 16px; }\n    .btn-add-primary { padding: 12px 24px; background: #0076B6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }\n    .btn-add-primary:hover { background: #005A8C; }\n\n    .artifact-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }\n    .artifact-viewer-container { width: 90%; max-width: 1200px; height: 90vh; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }\n  "] }]
+    `, styles: ["\n    .collection-view { display: flex; flex-direction: column; height: 100%; background: var(--mj-bg-surface); }\n\n    .view-header { padding: 20px 24px; border-bottom: 1px solid var(--mj-border-default); display: flex; justify-content: space-between; align-items: center; }\n    .view-header h2 { margin: 0; font-size: 20px; flex: 1; }\n\n    .header-actions { display: flex; align-items: center; gap: 12px; }\n\n    .view-mode-toggle { display: flex; border: 1px solid var(--mj-border-default); border-radius: 4px; overflow: hidden; }\n    .mode-btn { padding: 8px 12px; background: var(--mj-bg-surface); border: none; border-right: 1px solid var(--mj-border-default); cursor: pointer; color: var(--mj-text-muted); transition: all 150ms ease; }\n    .mode-btn:last-child { border-right: none; }\n    .mode-btn:hover { background: var(--mj-bg-surface-sunken); }\n    .mode-btn.active { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n    .btn-add { padding: 8px 16px; background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n    .btn-add:hover { background: var(--mj-brand-primary-hover); }\n\n    .view-content { flex: 1; overflow-y: auto; padding: 24px; }\n    .view-content.grid-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }\n    .view-content.list-mode { display: flex; flex-direction: column; gap: 12px; }\n\n    .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: var(--mj-text-disabled); }\n    .empty-state i { font-size: 64px; margin-bottom: 24px; }\n    .empty-state p { margin: 0 0 24px 0; font-size: 16px; }\n    .btn-add-primary { padding: 12px 24px; background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }\n    .btn-add-primary:hover { background: var(--mj-brand-primary-hover); }\n\n    .artifact-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--mj-bg-overlay); display: flex; align-items: center; justify-content: center; z-index: 10000; }\n    .artifact-viewer-container { width: 90%; max-width: 1200px; height: 90vh; background: var(--mj-bg-surface); border-radius: 12px; overflow: hidden; box-shadow: var(--mj-shadow-lg); }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { collection: [{
             type: Input
         }], currentUser: [{

package/dist/lib/components/collection/collection-view.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"collection-view.component.js","sourceRoot":"","sources":["../../../../src/lib/components/collection/collection-view.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ChangeDetectorRef } from '@angular/core';\nimport { MJCollectionEntity, MJArtifactEntity, MJArtifactVersionEntity, MJCollectionArtifactEntity } from '@memberjunction/core-entities';\nimport { UserInfo, RunView, Metadata } from '@memberjunction/core';\nimport { MJNotificationService } from '@memberjunction/ng-notifications';\n\ntype ViewMode = 'grid' \| 'list';\ntype SortBy = 'name' \| 'date' \| 'type';\n\n@Component({\n standalone: false,\n selector: 'mj-collection-view',\n template: `\n <div class=\"collection-view\">\n <div class=\"view-header\">\n <h2>{{ collection.Name \|\| 'Collection' }}</h2>\n <div class=\"header-actions\">\n <div class=\"view-mode-toggle\">\n <button\n class=\"mode-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"viewMode = 'grid'\"\n title=\"Grid View\">\n <i class=\"fas fa-grid\"></i>\n </button>\n <button\n class=\"mode-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"viewMode = 'list'\"\n title=\"List View\">\n <i class=\"fas fa-list\"></i>\n </button>\n </div>\n \n <kendo-dropdownlist\n [data]=\"sortOptions\"\n [textField]=\"'label'\"\n [valueField]=\"'value'\"\n [(value)]=\"sortBy\"\n (valueChange)=\"onSortChange()\"\n [style.width.px]=\"150\"\n placeholder=\"Sort by...\">\n </kendo-dropdownlist>\n \n @if (canEdit) {\n <button class=\"btn-add\" (click)=\"onAddArtifact()\" title=\"Add Artifact\">\n <i class=\"fas fa-plus\"></i> Add\n </button>\n }\n </div>\n </div>\n \n <div class=\"view-content\" [class.grid-mode]=\"viewMode === 'grid'\" [class.list-mode]=\"viewMode === 'list'\">\n @if (artifactVersions.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fas fa-folder-open\"></i>\n <p>This collection is empty</p>\n @if (canEdit) {\n <button class=\"btn-add-primary\" (click)=\"onAddArtifact()\">\n <i class=\"fas fa-plus\"></i> Add Artifact\n </button>\n }\n </div>\n }\n \n @for (item of artifactVersions; track item.version.ID) {\n <mj-collection-artifact-card\n [artifact]=\"item.artifact\"\n [version]=\"item.version\"\n (selected)=\"onArtifactSelected(item)\"\n (viewed)=\"onViewArtifact(item)\"\n (edited)=\"onEditArtifact(item)\"\n (removed)=\"onRemoveArtifact(item)\">\n </mj-collection-artifact-card>\n }\n </div>\n </div>\n \n <!-- Artifact Viewer Panel -->\n @if (showArtifactViewer && selectedArtifactId) {\n <div class=\"artifact-viewer-overlay\" (click)=\"onCloseArtifactViewer()\">\n <div class=\"artifact-viewer-container\" (click)=\"$event.stopPropagation()\">\n <mj-artifact-viewer-panel\n [artifactId]=\"selectedArtifactId\"\n [versionNumber]=\"selectedVersionNumber\"\n [currentUser]=\"currentUser\"\n [environmentId]=\"environmentId\"\n [viewContext]=\"'collection'\"\n [contextCollectionId]=\"collection.ID\"\n (closed)=\"onCloseArtifactViewer()\">\n </mj-artifact-viewer-panel>\n </div>\n </div>\n }\n `,\n styles: [`\n .collection-view { display: flex; flex-direction: column; height: 100%; background: white; }\n\n .view-header { padding: 20px 24px; border-bottom: 1px solid #D9D9D9; display: flex; justify-content: space-between; align-items: center; }\n .view-header h2 { margin: 0; font-size: 20px; flex: 1; }\n\n .header-actions { display: flex; align-items: center; gap: 12px; }\n\n .view-mode-toggle { display: flex; border: 1px solid #D9D9D9; border-radius: 4px; overflow: hidden; }\n .mode-btn { padding: 8px 12px; background: white; border: none; border-right: 1px solid #D9D9D9; cursor: pointer; color: #666; transition: all 150ms ease; }\n .mode-btn:last-child { border-right: none; }\n .mode-btn:hover { background: #F4F4F4; }\n .mode-btn.active { background: #0076B6; color: white; }\n\n .btn-add { padding: 8px 16px; background: #0076B6; color: white; border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n .btn-add:hover { background: #005A8C; }\n\n .view-content { flex: 1; overflow-y: auto; padding: 24px; }\n .view-content.grid-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }\n .view-content.list-mode { display: flex; flex-direction: column; gap: 12px; }\n\n .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: #999; }\n .empty-state i { font-size: 64px; margin-bottom: 24px; }\n .empty-state p { margin: 0 0 24px 0; font-size: 16px; }\n .btn-add-primary { padding: 12px 24px; background: #0076B6; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }\n .btn-add-primary:hover { background: #005A8C; }\n\n .artifact-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; }\n .artifact-viewer-container { width: 90%; max-width: 1200px; height: 90vh; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }\n `]\n})\nexport class CollectionViewComponent implements OnInit, OnChanges, OnDestroy {\n @Input() collection!: MJCollectionEntity;\n @Input() currentUser!: UserInfo;\n @Input() environmentId!: string;\n @Input() canEdit: boolean = true;\n\n // Store versions with parent artifact info for display\n public artifactVersions: Array<{\n version: MJArtifactVersionEntity;\n artifact: MJArtifactEntity;\n }> = [];\n public viewMode: ViewMode = 'grid';\n public sortBy: SortBy = 'date';\n public selectedArtifactId: string \| null = null;\n public selectedVersionNumber: number \| undefined = undefined;\n public showArtifactViewer = false;\n\n public sortOptions = [\n { label: 'Name', value: 'name' },\n { label: 'Date Modified', value: 'date' },\n { label: 'Type', value: 'type' }\n ];\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n ngOnInit() {\n this.loadArtifacts();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['collection'] && !changes['collection'].firstChange) {\n this.loadArtifacts();\n }\n }\n\n ngOnDestroy() {\n // Close artifact viewer when navigating away from collection\n if (this.showArtifactViewer) {\n this.onCloseArtifactViewer();\n }\n }\n\n private async loadArtifacts(): Promise<void> {\n if (!this.collection) return;\n\n try {\n const rv = new RunView();\n const md = new Metadata();\n\n // Load ALL VERSIONS in this collection (no DISTINCT - each version is separate)\n const versionResult = await rv.RunView<MJArtifactVersionEntity>({\n EntityName: 'MJ: Artifact Versions',\n ExtraFilter: `ID IN (\n SELECT ca.ArtifactVersionID\n FROM [__mj].[vwCollectionArtifacts] ca\n WHERE ca.CollectionID='${this.collection.ID}'\n )`,\n OrderBy: this.getVersionOrderBy(),\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (versionResult.Success && versionResult.Results) {\n // Get unique artifact IDs\n const artifactIds = [...new Set(versionResult.Results.map(v => v.ArtifactID))];\n\n // Load parent artifact info (just for display metadata - no visibility filtering)\n const artifactMap = new Map<string, MJArtifactEntity>();\n if (artifactIds.length > 0) {\n const artifactFilter = artifactIds.map(id => `ID='${id}'`).join(' OR ');\n const artifactResult = await rv.RunView<MJArtifactEntity>({\n EntityName: 'MJ: Artifacts',\n ExtraFilter: artifactFilter,\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (artifactResult.Success && artifactResult.Results) {\n artifactResult.Results.forEach(a => artifactMap.set(a.ID, a));\n }\n }\n\n // Combine version + artifact info\n this.artifactVersions = versionResult.Results\n .map(version => ({\n version,\n artifact: artifactMap.get(version.ArtifactID)!\n }))\n .filter(item => item.artifact != null); // Filter out any without parent artifact\n } else {\n this.artifactVersions = [];\n }\n } catch (error) {\n console.error('Failed to load collection artifacts:', error);\n this.artifactVersions = [];\n }\n }\n\n private getVersionOrderBy(): string {\n switch (this.sortBy) {\n case 'name':\n return 'Name ASC, VersionNumber DESC';\n case 'type':\n // Will sort by parent artifact type (handled in template)\n return 'ArtifactID ASC, VersionNumber DESC';\n case 'date':\n default:\n return '__mj_UpdatedAt DESC';\n }\n }\n\n onSortChange(): void {\n this.loadArtifacts();\n }\n\n onArtifactSelected(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): void {\n // TODO: Emit event or navigate to artifact detail view\n }\n\n onViewArtifact(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): void {\n this.selectedArtifactId = item.artifact.ID;\n this.selectedVersionNumber = item.version.VersionNumber;\n // Force change detection to ensure Input bindings propagate before component creation\n this.cdr.detectChanges();\n this.showArtifactViewer = true;\n }\n\n onCloseArtifactViewer(): void {\n this.showArtifactViewer = false;\n this.selectedArtifactId = null;\n this.selectedVersionNumber = undefined;\n }\n\n onEditArtifact(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): void {\n // TODO: Open artifact editor\n }\n\n async onRemoveArtifact(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): Promise<void> {\n const versionLabel = `\"${item.artifact.Name}\" v${item.version.VersionNumber}`;\n if (!confirm(`Remove ${versionLabel} from this collection?`)) return;\n\n try {\n // Delete THIS SPECIFIC VERSION from the collection\n const rv = new RunView();\n const result = await rv.RunView({\n EntityName: 'MJ: Collection Artifacts',\n ExtraFilter: `CollectionID='${this.collection.ID}' AND ArtifactVersionID='${item.version.ID}'`,\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (result.Success && result.Results && result.Results.length > 0) {\n // Delete this version association\n for (const joinRecord of result.Results) {\n await joinRecord.Delete();\n }\n await this.loadArtifacts();\n this.cdr.detectChanges();\n MJNotificationService.Instance.CreateSimpleNotification(\n `Removed ${versionLabel} from collection`,\n 'success',\n 3000\n );\n }\n } catch (error) {\n console.error('Failed to remove artifact version from collection:', error);\n MJNotificationService.Instance.CreateSimpleNotification(\n 'Failed to remove artifact version from collection',\n 'error'\n );\n }\n }\n\n async onAddArtifact(): Promise<void> {\n // TODO: Open artifact picker dialog\n // For now, just show a simple prompt\n const name = prompt('Enter artifact name:');\n if (!name) return;\n\n try {\n // Create new artifact\n const md = new Metadata();\n const artifact = await md.GetEntityObject<MJArtifactEntity>('MJ: Artifacts', this.currentUser);\n\n artifact.Name = name;\n // Type is read-only, set via TypeID instead\n // For now, skip setting type - it has a default\n\n const saved = await artifact.Save();\n if (saved) {\n // Get the latest version of this artifact to add to collection\n const rv = new RunView();\n const versionResult = await rv.RunView({\n EntityName: 'MJ: Artifact Versions',\n ExtraFilter: `ArtifactID='${artifact.ID}'`,\n OrderBy: 'VersionNumber DESC',\n MaxRows: 1,\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (!versionResult.Success \|\| !versionResult.Results \|\| versionResult.Results.length === 0) {\n alert('Failed to get artifact version');\n return;\n }\n\n // Add to collection via join table using version ID\n const joinRecord = await md.GetEntityObject<MJCollectionArtifactEntity>('MJ: Collection Artifacts', this.currentUser);\n joinRecord.CollectionID = this.collection.ID;\n joinRecord.ArtifactVersionID = versionResult.Results[0].ID;\n\n await joinRecord.Save();\n await this.loadArtifacts();\n }\n } catch (error) {\n console.error('Failed to add artifact:', error);\n alert('Failed to add artifact');\n }\n }\n}"]}
1	+ {"version":3,"file":"collection-view.component.js","sourceRoot":"","sources":["../../../../src/lib/components/collection/collection-view.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, ChangeDetectorRef } from '@angular/core';\nimport { MJCollectionEntity, MJArtifactEntity, MJArtifactVersionEntity, MJCollectionArtifactEntity } from '@memberjunction/core-entities';\nimport { UserInfo, RunView, Metadata } from '@memberjunction/core';\nimport { MJNotificationService } from '@memberjunction/ng-notifications';\n\ntype ViewMode = 'grid' \| 'list';\ntype SortBy = 'name' \| 'date' \| 'type';\n\n@Component({\n standalone: false,\n selector: 'mj-collection-view',\n template: `\n <div class=\"collection-view\">\n <div class=\"view-header\">\n <h2>{{ collection.Name \|\| 'Collection' }}</h2>\n <div class=\"header-actions\">\n <div class=\"view-mode-toggle\">\n <button\n class=\"mode-btn\"\n [class.active]=\"viewMode === 'grid'\"\n (click)=\"viewMode = 'grid'\"\n title=\"Grid View\">\n <i class=\"fas fa-grid\"></i>\n </button>\n <button\n class=\"mode-btn\"\n [class.active]=\"viewMode === 'list'\"\n (click)=\"viewMode = 'list'\"\n title=\"List View\">\n <i class=\"fas fa-list\"></i>\n </button>\n </div>\n \n <kendo-dropdownlist\n [data]=\"sortOptions\"\n [textField]=\"'label'\"\n [valueField]=\"'value'\"\n [(value)]=\"sortBy\"\n (valueChange)=\"onSortChange()\"\n [style.width.px]=\"150\"\n placeholder=\"Sort by...\">\n </kendo-dropdownlist>\n \n @if (canEdit) {\n <button class=\"btn-add\" (click)=\"onAddArtifact()\" title=\"Add Artifact\">\n <i class=\"fas fa-plus\"></i> Add\n </button>\n }\n </div>\n </div>\n \n <div class=\"view-content\" [class.grid-mode]=\"viewMode === 'grid'\" [class.list-mode]=\"viewMode === 'list'\">\n @if (artifactVersions.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fas fa-folder-open\"></i>\n <p>This collection is empty</p>\n @if (canEdit) {\n <button class=\"btn-add-primary\" (click)=\"onAddArtifact()\">\n <i class=\"fas fa-plus\"></i> Add Artifact\n </button>\n }\n </div>\n }\n \n @for (item of artifactVersions; track item.version.ID) {\n <mj-collection-artifact-card\n [artifact]=\"item.artifact\"\n [version]=\"item.version\"\n (selected)=\"onArtifactSelected(item)\"\n (viewed)=\"onViewArtifact(item)\"\n (edited)=\"onEditArtifact(item)\"\n (removed)=\"onRemoveArtifact(item)\">\n </mj-collection-artifact-card>\n }\n </div>\n </div>\n \n <!-- Artifact Viewer Panel -->\n @if (showArtifactViewer && selectedArtifactId) {\n <div class=\"artifact-viewer-overlay\" (click)=\"onCloseArtifactViewer()\">\n <div class=\"artifact-viewer-container\" (click)=\"$event.stopPropagation()\">\n <mj-artifact-viewer-panel\n [artifactId]=\"selectedArtifactId\"\n [versionNumber]=\"selectedVersionNumber\"\n [currentUser]=\"currentUser\"\n [environmentId]=\"environmentId\"\n [viewContext]=\"'collection'\"\n [contextCollectionId]=\"collection.ID\"\n (closed)=\"onCloseArtifactViewer()\">\n </mj-artifact-viewer-panel>\n </div>\n </div>\n }\n `,\n styles: [`\n .collection-view { display: flex; flex-direction: column; height: 100%; background: var(--mj-bg-surface); }\n\n .view-header { padding: 20px 24px; border-bottom: 1px solid var(--mj-border-default); display: flex; justify-content: space-between; align-items: center; }\n .view-header h2 { margin: 0; font-size: 20px; flex: 1; }\n\n .header-actions { display: flex; align-items: center; gap: 12px; }\n\n .view-mode-toggle { display: flex; border: 1px solid var(--mj-border-default); border-radius: 4px; overflow: hidden; }\n .mode-btn { padding: 8px 12px; background: var(--mj-bg-surface); border: none; border-right: 1px solid var(--mj-border-default); cursor: pointer; color: var(--mj-text-muted); transition: all 150ms ease; }\n .mode-btn:last-child { border-right: none; }\n .mode-btn:hover { background: var(--mj-bg-surface-sunken); }\n .mode-btn.active { background: var(--mj-brand-primary); color: var(--mj-text-inverse); }\n\n .btn-add { padding: 8px 16px; background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 6px; }\n .btn-add:hover { background: var(--mj-brand-primary-hover); }\n\n .view-content { flex: 1; overflow-y: auto; padding: 24px; }\n .view-content.grid-mode { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }\n .view-content.list-mode { display: flex; flex-direction: column; gap: 12px; }\n\n .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; color: var(--mj-text-disabled); }\n .empty-state i { font-size: 64px; margin-bottom: 24px; }\n .empty-state p { margin: 0 0 24px 0; font-size: 16px; }\n .btn-add-primary { padding: 12px 24px; background: var(--mj-brand-primary); color: var(--mj-text-inverse); border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; }\n .btn-add-primary:hover { background: var(--mj-brand-primary-hover); }\n\n .artifact-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--mj-bg-overlay); display: flex; align-items: center; justify-content: center; z-index: 10000; }\n .artifact-viewer-container { width: 90%; max-width: 1200px; height: 90vh; background: var(--mj-bg-surface); border-radius: 12px; overflow: hidden; box-shadow: var(--mj-shadow-lg); }\n `]\n})\nexport class CollectionViewComponent implements OnInit, OnChanges, OnDestroy {\n @Input() collection!: MJCollectionEntity;\n @Input() currentUser!: UserInfo;\n @Input() environmentId!: string;\n @Input() canEdit: boolean = true;\n\n // Store versions with parent artifact info for display\n public artifactVersions: Array<{\n version: MJArtifactVersionEntity;\n artifact: MJArtifactEntity;\n }> = [];\n public viewMode: ViewMode = 'grid';\n public sortBy: SortBy = 'date';\n public selectedArtifactId: string \| null = null;\n public selectedVersionNumber: number \| undefined = undefined;\n public showArtifactViewer = false;\n\n public sortOptions = [\n { label: 'Name', value: 'name' },\n { label: 'Date Modified', value: 'date' },\n { label: 'Type', value: 'type' }\n ];\n\n constructor(private cdr: ChangeDetectorRef) {}\n\n ngOnInit() {\n this.loadArtifacts();\n }\n\n ngOnChanges(changes: SimpleChanges) {\n if (changes['collection'] && !changes['collection'].firstChange) {\n this.loadArtifacts();\n }\n }\n\n ngOnDestroy() {\n // Close artifact viewer when navigating away from collection\n if (this.showArtifactViewer) {\n this.onCloseArtifactViewer();\n }\n }\n\n private async loadArtifacts(): Promise<void> {\n if (!this.collection) return;\n\n try {\n const rv = new RunView();\n const md = new Metadata();\n\n // Load ALL VERSIONS in this collection (no DISTINCT - each version is separate)\n const versionResult = await rv.RunView<MJArtifactVersionEntity>({\n EntityName: 'MJ: Artifact Versions',\n ExtraFilter: `ID IN (\n SELECT ca.ArtifactVersionID\n FROM [__mj].[vwCollectionArtifacts] ca\n WHERE ca.CollectionID='${this.collection.ID}'\n )`,\n OrderBy: this.getVersionOrderBy(),\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (versionResult.Success && versionResult.Results) {\n // Get unique artifact IDs\n const artifactIds = [...new Set(versionResult.Results.map(v => v.ArtifactID))];\n\n // Load parent artifact info (just for display metadata - no visibility filtering)\n const artifactMap = new Map<string, MJArtifactEntity>();\n if (artifactIds.length > 0) {\n const artifactFilter = artifactIds.map(id => `ID='${id}'`).join(' OR ');\n const artifactResult = await rv.RunView<MJArtifactEntity>({\n EntityName: 'MJ: Artifacts',\n ExtraFilter: artifactFilter,\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (artifactResult.Success && artifactResult.Results) {\n artifactResult.Results.forEach(a => artifactMap.set(a.ID, a));\n }\n }\n\n // Combine version + artifact info\n this.artifactVersions = versionResult.Results\n .map(version => ({\n version,\n artifact: artifactMap.get(version.ArtifactID)!\n }))\n .filter(item => item.artifact != null); // Filter out any without parent artifact\n } else {\n this.artifactVersions = [];\n }\n } catch (error) {\n console.error('Failed to load collection artifacts:', error);\n this.artifactVersions = [];\n }\n }\n\n private getVersionOrderBy(): string {\n switch (this.sortBy) {\n case 'name':\n return 'Name ASC, VersionNumber DESC';\n case 'type':\n // Will sort by parent artifact type (handled in template)\n return 'ArtifactID ASC, VersionNumber DESC';\n case 'date':\n default:\n return '__mj_UpdatedAt DESC';\n }\n }\n\n onSortChange(): void {\n this.loadArtifacts();\n }\n\n onArtifactSelected(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): void {\n // TODO: Emit event or navigate to artifact detail view\n }\n\n onViewArtifact(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): void {\n this.selectedArtifactId = item.artifact.ID;\n this.selectedVersionNumber = item.version.VersionNumber;\n // Force change detection to ensure Input bindings propagate before component creation\n this.cdr.detectChanges();\n this.showArtifactViewer = true;\n }\n\n onCloseArtifactViewer(): void {\n this.showArtifactViewer = false;\n this.selectedArtifactId = null;\n this.selectedVersionNumber = undefined;\n }\n\n onEditArtifact(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): void {\n // TODO: Open artifact editor\n }\n\n async onRemoveArtifact(item: { version: MJArtifactVersionEntity; artifact: MJArtifactEntity }): Promise<void> {\n const versionLabel = `\"${item.artifact.Name}\" v${item.version.VersionNumber}`;\n if (!confirm(`Remove ${versionLabel} from this collection?`)) return;\n\n try {\n // Delete THIS SPECIFIC VERSION from the collection\n const rv = new RunView();\n const result = await rv.RunView({\n EntityName: 'MJ: Collection Artifacts',\n ExtraFilter: `CollectionID='${this.collection.ID}' AND ArtifactVersionID='${item.version.ID}'`,\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (result.Success && result.Results && result.Results.length > 0) {\n // Delete this version association\n for (const joinRecord of result.Results) {\n await joinRecord.Delete();\n }\n await this.loadArtifacts();\n this.cdr.detectChanges();\n MJNotificationService.Instance.CreateSimpleNotification(\n `Removed ${versionLabel} from collection`,\n 'success',\n 3000\n );\n }\n } catch (error) {\n console.error('Failed to remove artifact version from collection:', error);\n MJNotificationService.Instance.CreateSimpleNotification(\n 'Failed to remove artifact version from collection',\n 'error'\n );\n }\n }\n\n async onAddArtifact(): Promise<void> {\n // TODO: Open artifact picker dialog\n // For now, just show a simple prompt\n const name = prompt('Enter artifact name:');\n if (!name) return;\n\n try {\n // Create new artifact\n const md = new Metadata();\n const artifact = await md.GetEntityObject<MJArtifactEntity>('MJ: Artifacts', this.currentUser);\n\n artifact.Name = name;\n // Type is read-only, set via TypeID instead\n // For now, skip setting type - it has a default\n\n const saved = await artifact.Save();\n if (saved) {\n // Get the latest version of this artifact to add to collection\n const rv = new RunView();\n const versionResult = await rv.RunView({\n EntityName: 'MJ: Artifact Versions',\n ExtraFilter: `ArtifactID='${artifact.ID}'`,\n OrderBy: 'VersionNumber DESC',\n MaxRows: 1,\n ResultType: 'entity_object'\n }, this.currentUser);\n\n if (!versionResult.Success \|\| !versionResult.Results \|\| versionResult.Results.length === 0) {\n alert('Failed to get artifact version');\n return;\n }\n\n // Add to collection via join table using version ID\n const joinRecord = await md.GetEntityObject<MJCollectionArtifactEntity>('MJ: Collection Artifacts', this.currentUser);\n joinRecord.CollectionID = this.collection.ID;\n joinRecord.ArtifactVersionID = versionResult.Results[0].ID;\n\n await joinRecord.Save();\n await this.loadArtifacts();\n }\n } catch (error) {\n console.error('Failed to add artifact:', error);\n alert('Failed to add artifact');\n }\n }\n}"]}

package/dist/lib/components/collection/collections-full-view.component.js CHANGED Viewed

@@ -1799,7 +1799,7 @@ export class CollectionsFullViewComponent {
             i0.ɵɵproperty("isOpen", ctx.isArtifactModalOpen)("collectionId", ctx.currentCollectionId || "")("environmentId", ctx.environmentId)("currentUser", ctx.currentUser);
             i0.ɵɵadvance();
             i0.ɵɵproperty("isOpen", ctx.isShareModalOpen)("collection", ctx.sharingCollection)("currentUser", ctx.currentUser)("currentUserPermissions", ctx.sharingCollection ? ctx.userPermissions.get(ctx.sharingCollection.ID) || null : null);
-        } }, dependencies: [i6.NgClass, i7.DefaultValueAccessor, i7.NgControlStatus, i7.NgModel, i8.DialogContainerDirective, i9.LoadingComponent, i10.CollectionShareModalComponent, i11.CollectionFormModalComponent, i12.ArtifactCreateModalComponent, i6.DatePipe], styles: ["\n\n    .collections-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #FAFAFA;\n      position: relative;\n    }\n\n    \n\n    .collections-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 12px 20px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n      background: white;\n    }\n\n    .collections-breadcrumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%] {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%]:hover {\n      color: #0076D6;\n    }\n\n    .breadcrumb-link.active[_ngcontent-%COMP%] {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator[_ngcontent-%COMP%] {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    \n\n    .btn-primary[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #007AFF;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 150ms ease;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]:hover {\n      background: #0051D5;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]   i.fa-chevron-down[_ngcontent-%COMP%] {\n      font-size: 10px;\n      margin-left: 2px;\n    }\n\n    .btn-icon[_ngcontent-%COMP%] {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid #D1D5DB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .btn-icon[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n      color: #111827;\n      border-color: #9CA3AF;\n    }\n\n    .btn-icon.active[_ngcontent-%COMP%] {\n      background: #EFF6FF;\n      color: #007AFF;\n      border-color: #007AFF;\n    }\n\n    .btn-icon.active[_ngcontent-%COMP%]:hover {\n      background: #DBEAFE;\n    }\n\n    \n\n    .dropdown-container[_ngcontent-%COMP%] {\n      position: relative;\n    }\n\n    .dropdown-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      min-width: 200px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      padding: 4px;\n      z-index: 1000;\n    }\n\n    .dropdown-menu-right[_ngcontent-%COMP%] {\n      left: auto;\n      right: 0;\n    }\n\n    .dropdown-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: #111827;\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .dropdown-item[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #F3F4F6;\n    }\n\n    .dropdown-item[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .dropdown-item.active[_ngcontent-%COMP%] {\n      background: #EFF6FF;\n      color: #007AFF;\n    }\n\n    .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: #6B7280;\n    }\n\n    .dropdown-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #007AFF;\n    }\n\n    .dropdown-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: #E5E7EB;\n      margin: 4px 0;\n    }\n\n    \n\n    .search-container[_ngcontent-%COMP%] {\n      position: relative;\n      display: flex;\n      align-items: center;\n      min-width: 200px;\n    }\n\n    .search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 10px;\n      color: #9CA3AF;\n      font-size: 13px;\n      pointer-events: none;\n    }\n\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 6px 32px 6px 32px;\n      border: 1px solid #D1D5DB;\n      border-radius: 6px;\n      font-size: 13px;\n      outline: none;\n      transition: all 150ms ease;\n    }\n\n    .search-input[_ngcontent-%COMP%]:focus {\n      border-color: #007AFF;\n      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);\n    }\n\n    .search-clear[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 6px;\n      padding: 4px;\n      background: transparent;\n      border: none;\n      color: #9CA3AF;\n      cursor: pointer;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .search-clear[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n      color: #6B7280;\n    }\n\n    \n\n    .selection-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: #EFF6FF;\n      border-bottom: 1px solid #BFDBFE;\n    }\n\n    .selection-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .selection-count[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: #1E40AF;\n    }\n\n    .selection-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: white;\n      border: 1px solid #D1D5DB;\n      border-radius: 6px;\n      color: #374151;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .btn-toolbar[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n      border-color: #9CA3AF;\n    }\n\n    .btn-toolbar.btn-danger[_ngcontent-%COMP%] {\n      color: #DC2626;\n      border-color: #FCA5A5;\n    }\n\n    .btn-toolbar.btn-danger[_ngcontent-%COMP%]:hover {\n      background: #FEE2E2;\n      border-color: #DC2626;\n    }\n\n    \n\n    .collections-content[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px;\n    }\n\n    \n\n    .loading-state[_ngcontent-%COMP%], .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      min-height: 0;\n      color: #9CA3AF;\n      text-align: center;\n      padding: 24px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n      font-size: 64px;\n      margin-bottom: 24px;\n      opacity: 0.3;\n      color: #D1D5DB;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 8px 0;\n      color: #374151;\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0 0 24px 0;\n      font-size: 14px;\n      color: #6B7280;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   .empty-state-cta[_ngcontent-%COMP%] {\n      padding: 10px 20px;\n      font-size: 14px;\n      border-radius: 8px;\n    }\n\n    .empty-state-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    \n\n    .unified-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n      gap: 16px;\n      padding: 4px;\n    }\n\n    .grid-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      padding: 12px;\n      background: white;\n      border: 2px solid transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n      position: relative;\n      user-select: none;\n    }\n\n    .grid-item[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n      border-color: #D1D5DB;\n    }\n\n    .grid-item.selected[_ngcontent-%COMP%] {\n      background: #EFF6FF;\n      border-color: #007AFF;\n    }\n\n    .grid-item.active[_ngcontent-%COMP%] {\n      background: #FEF3C7;\n      border-color: #F59E0B;\n      box-shadow: 0 0 0 1px #F59E0B;\n    }\n\n    .grid-item.active[_ngcontent-%COMP%]:hover {\n      background: #FDE68A;\n    }\n\n    \n\n    .unified-grid.select-mode[_ngcontent-%COMP%]   .grid-item[_ngcontent-%COMP%] {\n      cursor: pointer;\n    }\n\n    .unified-grid.select-mode[_ngcontent-%COMP%]   .grid-item[_ngcontent-%COMP%]:hover {\n      background: #EFF6FF;\n      border-color: #93C5FD;\n    }\n\n    .item-checkbox[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 8px;\n      right: 8px;\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 10;\n    }\n\n    .item-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: #9CA3AF;\n      transition: color 150ms ease;\n    }\n\n    .grid-item.selected[_ngcontent-%COMP%]   .item-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n   .item-checkbox[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: #007AFF;\n    }\n\n    .grid-item-content[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .grid-icon[_ngcontent-%COMP%] {\n      width: 64px;\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .grid-icon.folder-icon[_ngcontent-%COMP%] {\n      background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);\n    }\n\n    .grid-icon.folder-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 36px;\n      color: white;\n    }\n\n    .grid-icon.artifact-icon[_ngcontent-%COMP%] {\n      background: #F3F4F6;\n    }\n\n    .grid-icon.artifact-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: #6B7280;\n    }\n\n    .shared-badge[_ngcontent-%COMP%] {\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      width: 20px;\n      height: 20px;\n      background: #10B981;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid white;\n    }\n\n    .shared-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: white;\n    }\n\n    .grid-info[_ngcontent-%COMP%] {\n      width: 100%;\n      text-align: center;\n    }\n\n    .grid-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: #111827;\n      line-height: 1.3;\n      margin-bottom: 4px;\n      \n\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-description[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #6B7280;\n      line-height: 1.3;\n      margin-bottom: 4px;\n      \n\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-meta[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #6B7280;\n      margin-top: 4px;\n    }\n\n    .grid-owner[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #6B7280;\n      margin-top: 2px;\n    }\n\n    .grid-owner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      margin-right: 3px;\n    }\n\n    .version-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      background: #FEF3C7;\n      color: #92400E;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      font-family: monospace;\n      margin-right: 4px;\n    }\n\n    .artifact-type-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      background: #DBEAFE;\n      color: #1E40AF;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    \n\n    .unified-list[_ngcontent-%COMP%] {\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .list-table[_ngcontent-%COMP%] {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .list-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n      background: #F9FAFB;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      padding: 10px 16px;\n      text-align: left;\n      font-size: 12px;\n      font-weight: 600;\n      color: #6B7280;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      user-select: none;\n      transition: color 150ms ease;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]:hover {\n      color: #007AFF;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      display: inline-block;\n      margin-right: 6px;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      opacity: 0.5;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      opacity: 1;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n      border-bottom: 1px solid #F3F4F6;\n      transition: background 150ms ease;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n      background: #F9FAFB;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n      background: #EFF6FF;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.active[_ngcontent-%COMP%] {\n      background: #FEF3C7;\n      border-left: 3px solid #F59E0B;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.active[_ngcontent-%COMP%]:hover {\n      background: #FDE68A;\n    }\n\n    .list-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      font-size: 13px;\n      color: #374151;\n    }\n\n    .col-checkbox[_ngcontent-%COMP%] {\n      width: 40px;\n      text-align: center;\n    }\n\n    .col-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: #9CA3AF;\n      cursor: pointer;\n      transition: color 150ms ease;\n    }\n\n    .col-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:hover, \n   .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%]   .col-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #007AFF;\n    }\n\n    .col-name[_ngcontent-%COMP%] {\n      min-width: 300px;\n    }\n\n    .list-name-cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .list-name-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: #6B7280;\n      width: 20px;\n      text-align: center;\n    }\n\n    .list-name-cell[_ngcontent-%COMP%]   .fa-folder[_ngcontent-%COMP%] {\n      color: #3B82F6;\n    }\n\n    .shared-indicator[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #10B981;\n      margin-left: auto;\n    }\n\n    .col-type[_ngcontent-%COMP%] {\n      width: 150px;\n    }\n\n    .col-modified[_ngcontent-%COMP%] {\n      width: 180px;\n    }\n\n    .col-owner[_ngcontent-%COMP%] {\n      width: 150px;\n    }\n\n    \n\n    .toolbar-separator[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 24px;\n      background: #D1D5DB;\n      margin: 0 4px;\n    }\n\n    .toolbar-actions-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .btn-icon-danger[_ngcontent-%COMP%] {\n      color: #DC2626;\n      border-color: #FCA5A5;\n    }\n\n    .btn-icon-danger[_ngcontent-%COMP%]:hover {\n      background: #FEE2E2;\n      color: #DC2626;\n      border-color: #DC2626;\n    }\n\n    \n\n    .context-menu-backdrop[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1999;\n    }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: fixed;\n      min-width: 180px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n      padding: 4px;\n      z-index: 2000;\n    }\n\n    .context-menu-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: #111827;\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .context-menu-item[_ngcontent-%COMP%]:hover {\n      background: #F3F4F6;\n    }\n\n    .context-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: #6B7280;\n    }\n\n    .context-menu-danger[_ngcontent-%COMP%] {\n      color: #DC2626;\n    }\n\n    .context-menu-danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: #DC2626;\n    }\n\n    .context-menu-danger[_ngcontent-%COMP%]:hover {\n      background: #FEE2E2;\n    }\n\n    .context-menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: #E5E7EB;\n      margin: 4px 0;\n    }"] });
+        } }, dependencies: [i6.NgClass, i7.DefaultValueAccessor, i7.NgControlStatus, i7.NgModel, i8.DialogContainerDirective, i9.LoadingComponent, i10.CollectionShareModalComponent, i11.CollectionFormModalComponent, i12.ArtifactCreateModalComponent, i6.DatePipe], styles: ["\n\n    .collections-view[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n      position: relative;\n    }\n\n    \n\n    .collections-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 12px 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      gap: 16px;\n      background: var(--mj-bg-surface);\n    }\n\n    .collections-breadcrumb[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .breadcrumb-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      font-size: 14px;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%] {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-primary);\n    }\n\n    .breadcrumb-link.active[_ngcontent-%COMP%] {\n      color: var(--mj-text-muted);\n      cursor: default;\n    }\n\n    .breadcrumb-path[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator[_ngcontent-%COMP%] {\n      color: var(--mj-border-strong);\n      font-size: 10px;\n    }\n\n    .collections-actions[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    \n\n    .btn-primary[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-brand-primary);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 150ms ease;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .btn-primary[_ngcontent-%COMP%]   i.fa-chevron-down[_ngcontent-%COMP%] {\n      font-size: 10px;\n      margin-left: 2px;\n    }\n\n    .btn-icon[_ngcontent-%COMP%] {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      transition: all 150ms ease;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .btn-icon[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      border-color: var(--mj-text-disabled);\n    }\n\n    .btn-icon.active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .btn-icon.active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    \n\n    .dropdown-container[_ngcontent-%COMP%] {\n      position: relative;\n    }\n\n    .dropdown-menu[_ngcontent-%COMP%] {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 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: 0 4px 12px rgba(0, 0, 0, 0.15);\n      padding: 4px;\n      z-index: 1000;\n    }\n\n    .dropdown-menu-right[_ngcontent-%COMP%] {\n      left: auto;\n      right: 0;\n    }\n\n    .dropdown-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .dropdown-item[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .dropdown-item[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .dropdown-item.active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .dropdown-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .dropdown-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: var(--mj-border-default);\n      margin: 4px 0;\n    }\n\n    \n\n    .search-container[_ngcontent-%COMP%] {\n      position: relative;\n      display: flex;\n      align-items: center;\n      min-width: 200px;\n    }\n\n    .search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 10px;\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n      pointer-events: none;\n    }\n\n    .search-input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 6px 32px 6px 32px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      font-size: 13px;\n      outline: none;\n      transition: all 150ms ease;\n    }\n\n    .search-input[_ngcontent-%COMP%]:focus {\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    .search-clear[_ngcontent-%COMP%] {\n      position: absolute;\n      right: 6px;\n      padding: 4px;\n      background: transparent;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .search-clear[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    \n\n    .selection-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    }\n\n    .selection-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .selection-count[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .selection-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .btn-toolbar[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-text-disabled);\n    }\n\n    .btn-toolbar.btn-danger[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n      border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n    }\n\n    .btn-toolbar.btn-danger[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error);\n    }\n\n    \n\n    .collections-content[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px;\n    }\n\n    \n\n    .loading-state[_ngcontent-%COMP%], .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      min-height: 0;\n      color: var(--mj-text-disabled);\n      text-align: center;\n      padding: 24px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n      font-size: 64px;\n      margin-bottom: 24px;\n      opacity: 0.3;\n      color: var(--mj-border-strong);\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 8px 0;\n      color: var(--mj-text-secondary);\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0 0 24px 0;\n      font-size: 14px;\n      color: var(--mj-text-muted);\n    }\n\n    .empty-state[_ngcontent-%COMP%]   .empty-state-cta[_ngcontent-%COMP%] {\n      padding: 10px 20px;\n      font-size: 14px;\n      border-radius: 8px;\n    }\n\n    .empty-state-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    \n\n    .unified-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n      gap: 16px;\n      padding: 4px;\n    }\n\n    .grid-item[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      padding: 12px;\n      background: var(--mj-bg-surface);\n      border: 2px solid transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n      position: relative;\n      user-select: none;\n    }\n\n    .grid-item[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .grid-item.selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n    }\n\n    .grid-item.active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-warning);\n      box-shadow: 0 0 0 1px var(--mj-status-warning);\n    }\n\n    .grid-item.active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-warning) 25%, var(--mj-bg-surface));\n    }\n\n    \n\n    .unified-grid.select-mode[_ngcontent-%COMP%]   .grid-item[_ngcontent-%COMP%] {\n      cursor: pointer;\n    }\n\n    .unified-grid.select-mode[_ngcontent-%COMP%]   .grid-item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    }\n\n    .item-checkbox[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 8px;\n      right: 8px;\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 10;\n    }\n\n    .item-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      transition: color 150ms ease;\n    }\n\n    .grid-item.selected[_ngcontent-%COMP%]   .item-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n   .item-checkbox[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .grid-item-content[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .grid-icon[_ngcontent-%COMP%] {\n      width: 64px;\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .grid-icon.folder-icon[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n    }\n\n    .grid-icon.folder-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 36px;\n      color: var(--mj-text-inverse);\n    }\n\n    .grid-icon.artifact-icon[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .grid-icon.artifact-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      color: var(--mj-text-muted);\n    }\n\n    .shared-badge[_ngcontent-%COMP%] {\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      width: 20px;\n      height: 20px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-bg-surface);\n    }\n\n    .shared-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-text-inverse);\n    }\n\n    .grid-info[_ngcontent-%COMP%] {\n      width: 100%;\n      text-align: center;\n    }\n\n    .grid-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      line-height: 1.3;\n      margin-bottom: 4px;\n      \n\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-description[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      line-height: 1.3;\n      margin-bottom: 4px;\n      \n\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-meta[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 4px;\n    }\n\n    .grid-owner[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 2px;\n    }\n\n    .grid-owner[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      margin-right: 3px;\n    }\n\n    .version-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      font-family: monospace;\n      margin-right: 4px;\n    }\n\n    .artifact-type-badge[_ngcontent-%COMP%] {\n      display: inline-block;\n      padding: 2px 6px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    \n\n    .unified-list[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .list-table[_ngcontent-%COMP%] {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .list-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .list-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      padding: 10px 16px;\n      text-align: left;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%] {\n      cursor: pointer;\n      user-select: none;\n      transition: color 150ms ease;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]:hover {\n      color: var(--mj-brand-primary);\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      display: inline-block;\n      margin-right: 6px;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n      opacity: 0.5;\n    }\n\n    .list-table[_ngcontent-%COMP%]   th.sortable[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n      opacity: 1;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      transition: background 150ms ease;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-status-warning);\n    }\n\n    .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-warning) 25%, var(--mj-bg-surface));\n    }\n\n    .list-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .col-checkbox[_ngcontent-%COMP%] {\n      width: 40px;\n      text-align: center;\n    }\n\n    .col-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      transition: color 150ms ease;\n    }\n\n    .col-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:hover, \n   .list-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%]   .col-checkbox[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .col-name[_ngcontent-%COMP%] {\n      min-width: 300px;\n    }\n\n    .list-name-cell[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .list-name-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      width: 20px;\n      text-align: center;\n    }\n\n    .list-name-cell[_ngcontent-%COMP%]   .fa-folder[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .shared-indicator[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-status-success);\n      margin-left: auto;\n    }\n\n    .col-type[_ngcontent-%COMP%] {\n      width: 150px;\n    }\n\n    .col-modified[_ngcontent-%COMP%] {\n      width: 180px;\n    }\n\n    .col-owner[_ngcontent-%COMP%] {\n      width: 150px;\n    }\n\n    \n\n    .toolbar-separator[_ngcontent-%COMP%] {\n      width: 1px;\n      height: 24px;\n      background: var(--mj-border-strong);\n      margin: 0 4px;\n    }\n\n    .toolbar-actions-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .btn-icon-danger[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n      border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n    }\n\n    .btn-icon-danger[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    \n\n    .context-menu-backdrop[_ngcontent-%COMP%] {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1999;\n    }\n\n    .context-menu[_ngcontent-%COMP%] {\n      position: fixed;\n      min-width: 180px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n      padding: 4px;\n      z-index: 2000;\n    }\n\n    .context-menu-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .context-menu-item[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .context-menu-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .context-menu-danger[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .context-menu-danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n    }\n\n    .context-menu-danger[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    }\n\n    .context-menu-divider[_ngcontent-%COMP%] {\n      height: 1px;\n      background: var(--mj-border-default);\n      margin: 4px 0;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollectionsFullViewComponent, [{
         type: Component,
@@ -2285,7 +2285,7 @@ export class CollectionsFullViewComponent {
       (saved)="onPermissionsChanged()"
       (cancelled)="onShareModalCancelled()">
     </mj-collection-share-modal>
-    `, styles: ["\n    /* Main container */\n    .collections-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #FAFAFA;\n      position: relative;\n    }\n\n    /* Header */\n    .collections-header {\n      display: flex;\n      align-items: center;\n      padding: 12px 20px;\n      border-bottom: 1px solid #E5E7EB;\n      gap: 16px;\n      background: white;\n    }\n\n    .collections-breadcrumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .breadcrumb-item i {\n      color: #6B7280;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link {\n      color: #111827;\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link:hover {\n      color: #0076D6;\n    }\n\n    .breadcrumb-link.active {\n      color: #6B7280;\n      cursor: default;\n    }\n\n    .breadcrumb-path {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator {\n      color: #D1D5DB;\n      font-size: 10px;\n    }\n\n    .collections-actions {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    /* Button styles */\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: #007AFF;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 150ms ease;\n    }\n\n    .btn-primary:hover {\n      background: #0051D5;\n    }\n\n    .btn-primary i.fa-chevron-down {\n      font-size: 10px;\n      margin-left: 2px;\n    }\n\n    .btn-icon {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid #D1D5DB;\n      border-radius: 6px;\n      cursor: pointer;\n      color: #6B7280;\n      transition: all 150ms ease;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .btn-icon:hover {\n      background: #F9FAFB;\n      color: #111827;\n      border-color: #9CA3AF;\n    }\n\n    .btn-icon.active {\n      background: #EFF6FF;\n      color: #007AFF;\n      border-color: #007AFF;\n    }\n\n    .btn-icon.active:hover {\n      background: #DBEAFE;\n    }\n\n    /* Dropdown menus */\n    .dropdown-container {\n      position: relative;\n    }\n\n    .dropdown-menu {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      min-width: 200px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      padding: 4px;\n      z-index: 1000;\n    }\n\n    .dropdown-menu-right {\n      left: auto;\n      right: 0;\n    }\n\n    .dropdown-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: #111827;\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .dropdown-item:hover:not(:disabled) {\n      background: #F3F4F6;\n    }\n\n    .dropdown-item:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .dropdown-item.active {\n      background: #EFF6FF;\n      color: #007AFF;\n    }\n\n    .dropdown-item i {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: #6B7280;\n    }\n\n    .dropdown-item.active i {\n      color: #007AFF;\n    }\n\n    .dropdown-divider {\n      height: 1px;\n      background: #E5E7EB;\n      margin: 4px 0;\n    }\n\n    /* Search */\n    .search-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      min-width: 200px;\n    }\n\n    .search-container i.fa-search {\n      position: absolute;\n      left: 10px;\n      color: #9CA3AF;\n      font-size: 13px;\n      pointer-events: none;\n    }\n\n    .search-input {\n      width: 100%;\n      padding: 6px 32px 6px 32px;\n      border: 1px solid #D1D5DB;\n      border-radius: 6px;\n      font-size: 13px;\n      outline: none;\n      transition: all 150ms ease;\n    }\n\n    .search-input:focus {\n      border-color: #007AFF;\n      box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);\n    }\n\n    .search-clear {\n      position: absolute;\n      right: 6px;\n      padding: 4px;\n      background: transparent;\n      border: none;\n      color: #9CA3AF;\n      cursor: pointer;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .search-clear:hover {\n      background: #F3F4F6;\n      color: #6B7280;\n    }\n\n    /* Selection toolbar */\n    .selection-toolbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: #EFF6FF;\n      border-bottom: 1px solid #BFDBFE;\n    }\n\n    .selection-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .selection-count {\n      font-size: 13px;\n      font-weight: 600;\n      color: #1E40AF;\n    }\n\n    .selection-actions {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: white;\n      border: 1px solid #D1D5DB;\n      border-radius: 6px;\n      color: #374151;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .btn-toolbar:hover {\n      background: #F9FAFB;\n      border-color: #9CA3AF;\n    }\n\n    .btn-toolbar.btn-danger {\n      color: #DC2626;\n      border-color: #FCA5A5;\n    }\n\n    .btn-toolbar.btn-danger:hover {\n      background: #FEE2E2;\n      border-color: #DC2626;\n    }\n\n    /* Content area */\n    .collections-content {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px;\n    }\n\n    /* Loading and empty states */\n    .loading-state, .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      min-height: 0;\n      color: #9CA3AF;\n      text-align: center;\n      padding: 24px;\n    }\n\n    .empty-state > i {\n      font-size: 64px;\n      margin-bottom: 24px;\n      opacity: 0.3;\n      color: #D1D5DB;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 8px 0;\n      color: #374151;\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .empty-state p {\n      margin: 0 0 24px 0;\n      font-size: 14px;\n      color: #6B7280;\n    }\n\n    .empty-state .empty-state-cta {\n      padding: 10px 20px;\n      font-size: 14px;\n      border-radius: 8px;\n    }\n\n    .empty-state-actions {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    /* Grid view */\n    .unified-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n      gap: 16px;\n      padding: 4px;\n    }\n\n    .grid-item {\n      display: flex;\n      flex-direction: column;\n      padding: 12px;\n      background: white;\n      border: 2px solid transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n      position: relative;\n      user-select: none;\n    }\n\n    .grid-item:hover {\n      background: #F9FAFB;\n      border-color: #D1D5DB;\n    }\n\n    .grid-item.selected {\n      background: #EFF6FF;\n      border-color: #007AFF;\n    }\n\n    .grid-item.active {\n      background: #FEF3C7;\n      border-color: #F59E0B;\n      box-shadow: 0 0 0 1px #F59E0B;\n    }\n\n    .grid-item.active:hover {\n      background: #FDE68A;\n    }\n\n    /* Select mode styling for grid */\n    .unified-grid.select-mode .grid-item {\n      cursor: pointer;\n    }\n\n    .unified-grid.select-mode .grid-item:hover {\n      background: #EFF6FF;\n      border-color: #93C5FD;\n    }\n\n    .item-checkbox {\n      position: absolute;\n      top: 8px;\n      right: 8px;\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 10;\n    }\n\n    .item-checkbox i {\n      font-size: 16px;\n      color: #9CA3AF;\n      transition: color 150ms ease;\n    }\n\n    .grid-item.selected .item-checkbox i,\n    .item-checkbox:hover i {\n      color: #007AFF;\n    }\n\n    .grid-item-content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .grid-icon {\n      width: 64px;\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .grid-icon.folder-icon {\n      background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);\n    }\n\n    .grid-icon.folder-icon i {\n      font-size: 36px;\n      color: white;\n    }\n\n    .grid-icon.artifact-icon {\n      background: #F3F4F6;\n    }\n\n    .grid-icon.artifact-icon i {\n      font-size: 32px;\n      color: #6B7280;\n    }\n\n    .shared-badge {\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      width: 20px;\n      height: 20px;\n      background: #10B981;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid white;\n    }\n\n    .shared-badge i {\n      font-size: 10px;\n      color: white;\n    }\n\n    .grid-info {\n      width: 100%;\n      text-align: center;\n    }\n\n    .grid-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: #111827;\n      line-height: 1.3;\n      margin-bottom: 4px;\n      /* Allow wrapping to 2 lines max */\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-description {\n      font-size: 11px;\n      color: #6B7280;\n      line-height: 1.3;\n      margin-bottom: 4px;\n      /* Allow wrapping to 2 lines max */\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-meta {\n      font-size: 11px;\n      color: #6B7280;\n      margin-top: 4px;\n    }\n\n    .grid-owner {\n      font-size: 11px;\n      color: #6B7280;\n      margin-top: 2px;\n    }\n\n    .grid-owner i {\n      font-size: 10px;\n      margin-right: 3px;\n    }\n\n    .version-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      background: #FEF3C7;\n      color: #92400E;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      font-family: monospace;\n      margin-right: 4px;\n    }\n\n    .artifact-type-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      background: #DBEAFE;\n      color: #1E40AF;\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    /* List view */\n    .unified-list {\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .list-table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .list-table thead {\n      background: #F9FAFB;\n      border-bottom: 1px solid #E5E7EB;\n    }\n\n    .list-table th {\n      padding: 10px 16px;\n      text-align: left;\n      font-size: 12px;\n      font-weight: 600;\n      color: #6B7280;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .list-table th.sortable {\n      cursor: pointer;\n      user-select: none;\n      transition: color 150ms ease;\n    }\n\n    .list-table th.sortable:hover {\n      color: #007AFF;\n    }\n\n    .list-table th.sortable span {\n      display: inline-block;\n      margin-right: 6px;\n    }\n\n    .list-table th.sortable i {\n      font-size: 10px;\n      opacity: 0.5;\n    }\n\n    .list-table th.sortable:hover i {\n      opacity: 1;\n    }\n\n    .list-table tbody tr {\n      border-bottom: 1px solid #F3F4F6;\n      transition: background 150ms ease;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .list-table tbody tr:last-child {\n      border-bottom: none;\n    }\n\n    .list-table tbody tr:hover {\n      background: #F9FAFB;\n    }\n\n    .list-table tbody tr.selected {\n      background: #EFF6FF;\n    }\n\n    .list-table tbody tr.active {\n      background: #FEF3C7;\n      border-left: 3px solid #F59E0B;\n    }\n\n    .list-table tbody tr.active:hover {\n      background: #FDE68A;\n    }\n\n    .list-table td {\n      padding: 12px 16px;\n      font-size: 13px;\n      color: #374151;\n    }\n\n    .col-checkbox {\n      width: 40px;\n      text-align: center;\n    }\n\n    .col-checkbox i {\n      font-size: 16px;\n      color: #9CA3AF;\n      cursor: pointer;\n      transition: color 150ms ease;\n    }\n\n    .col-checkbox i:hover,\n    .list-table tbody tr.selected .col-checkbox i {\n      color: #007AFF;\n    }\n\n    .col-name {\n      min-width: 300px;\n    }\n\n    .list-name-cell {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .list-name-cell i {\n      font-size: 16px;\n      color: #6B7280;\n      width: 20px;\n      text-align: center;\n    }\n\n    .list-name-cell .fa-folder {\n      color: #3B82F6;\n    }\n\n    .shared-indicator {\n      font-size: 12px;\n      color: #10B981;\n      margin-left: auto;\n    }\n\n    .col-type {\n      width: 150px;\n    }\n\n    .col-modified {\n      width: 180px;\n    }\n\n    .col-owner {\n      width: 150px;\n    }\n\n    /* Toolbar separator and action group */\n    .toolbar-separator {\n      width: 1px;\n      height: 24px;\n      background: #D1D5DB;\n      margin: 0 4px;\n    }\n\n    .toolbar-actions-group {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .btn-icon-danger {\n      color: #DC2626;\n      border-color: #FCA5A5;\n    }\n\n    .btn-icon-danger:hover {\n      background: #FEE2E2;\n      color: #DC2626;\n      border-color: #DC2626;\n    }\n\n    /* Context menu */\n    .context-menu-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1999;\n    }\n\n    .context-menu {\n      position: fixed;\n      min-width: 180px;\n      background: white;\n      border: 1px solid #E5E7EB;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n      padding: 4px;\n      z-index: 2000;\n    }\n\n    .context-menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: #111827;\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .context-menu-item:hover {\n      background: #F3F4F6;\n    }\n\n    .context-menu-item i {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: #6B7280;\n    }\n\n    .context-menu-danger {\n      color: #DC2626;\n    }\n\n    .context-menu-danger i {\n      color: #DC2626;\n    }\n\n    .context-menu-danger:hover {\n      background: #FEE2E2;\n    }\n\n    .context-menu-divider {\n      height: 1px;\n      background: #E5E7EB;\n      margin: 4px 0;\n    }\n  "] }]
+    `, styles: ["\n    /* Main container */\n    .collections-view {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--mj-bg-surface-sunken);\n      position: relative;\n    }\n\n    /* Header */\n    .collections-header {\n      display: flex;\n      align-items: center;\n      padding: 12px 20px;\n      border-bottom: 1px solid var(--mj-border-default);\n      gap: 16px;\n      background: var(--mj-bg-surface);\n    }\n\n    .collections-breadcrumb {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      flex: 1;\n      min-width: 0;\n    }\n\n    .breadcrumb-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .breadcrumb-item i {\n      color: var(--mj-text-muted);\n      font-size: 14px;\n    }\n\n    .breadcrumb-link {\n      color: var(--mj-text-primary);\n      font-weight: 500;\n      cursor: pointer;\n      text-decoration: none;\n      white-space: nowrap;\n      transition: color 150ms ease;\n      font-size: 14px;\n    }\n\n    .breadcrumb-link:hover {\n      color: var(--mj-brand-primary);\n    }\n\n    .breadcrumb-link.active {\n      color: var(--mj-text-muted);\n      cursor: default;\n    }\n\n    .breadcrumb-path {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      overflow-x: auto;\n    }\n\n    .breadcrumb-separator {\n      color: var(--mj-border-strong);\n      font-size: 10px;\n    }\n\n    .collections-actions {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    /* Button styles */\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-brand-primary);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 150ms ease;\n    }\n\n    .btn-primary:hover {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .btn-primary i.fa-chevron-down {\n      font-size: 10px;\n      margin-left: 2px;\n    }\n\n    .btn-icon {\n      padding: 6px 10px;\n      background: transparent;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      cursor: pointer;\n      color: var(--mj-text-muted);\n      transition: all 150ms ease;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .btn-icon:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      border-color: var(--mj-text-disabled);\n    }\n\n    .btn-icon.active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n    }\n\n    .btn-icon.active:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    /* Dropdown menus */\n    .dropdown-container {\n      position: relative;\n    }\n\n    .dropdown-menu {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 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: 0 4px 12px rgba(0, 0, 0, 0.15);\n      padding: 4px;\n      z-index: 1000;\n    }\n\n    .dropdown-menu-right {\n      left: auto;\n      right: 0;\n    }\n\n    .dropdown-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .dropdown-item:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .dropdown-item:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .dropdown-item.active {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .dropdown-item i {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .dropdown-item.active i {\n      color: var(--mj-brand-primary);\n    }\n\n    .dropdown-divider {\n      height: 1px;\n      background: var(--mj-border-default);\n      margin: 4px 0;\n    }\n\n    /* Search */\n    .search-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      min-width: 200px;\n    }\n\n    .search-container i.fa-search {\n      position: absolute;\n      left: 10px;\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n      pointer-events: none;\n    }\n\n    .search-input {\n      width: 100%;\n      padding: 6px 32px 6px 32px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      font-size: 13px;\n      outline: none;\n      transition: all 150ms ease;\n    }\n\n    .search-input:focus {\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    .search-clear {\n      position: absolute;\n      right: 6px;\n      padding: 4px;\n      background: transparent;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      border-radius: 4px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .search-clear:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-muted);\n    }\n\n    /* Selection toolbar */\n    .selection-toolbar {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    }\n\n    .selection-info {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .selection-count {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-brand-primary);\n    }\n\n    .selection-actions {\n      display: flex;\n      gap: 8px;\n    }\n\n    .btn-toolbar {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 150ms ease;\n    }\n\n    .btn-toolbar:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-text-disabled);\n    }\n\n    .btn-toolbar.btn-danger {\n      color: var(--mj-status-error);\n      border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n    }\n\n    .btn-toolbar.btn-danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-error);\n    }\n\n    /* Content area */\n    .collections-content {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      overflow-y: auto;\n      padding: 20px;\n    }\n\n    /* Loading and empty states */\n    .loading-state, .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      min-height: 0;\n      color: var(--mj-text-disabled);\n      text-align: center;\n      padding: 24px;\n    }\n\n    .empty-state > i {\n      font-size: 64px;\n      margin-bottom: 24px;\n      opacity: 0.3;\n      color: var(--mj-border-strong);\n    }\n\n    .empty-state h3 {\n      margin: 0 0 8px 0;\n      color: var(--mj-text-secondary);\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .empty-state p {\n      margin: 0 0 24px 0;\n      font-size: 14px;\n      color: var(--mj-text-muted);\n    }\n\n    .empty-state .empty-state-cta {\n      padding: 10px 20px;\n      font-size: 14px;\n      border-radius: 8px;\n    }\n\n    .empty-state-actions {\n      display: flex;\n      gap: 12px;\n      flex-wrap: wrap;\n      justify-content: center;\n    }\n\n    /* Grid view */\n    .unified-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n      gap: 16px;\n      padding: 4px;\n    }\n\n    .grid-item {\n      display: flex;\n      flex-direction: column;\n      padding: 12px;\n      background: var(--mj-bg-surface);\n      border: 2px solid transparent;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 150ms ease;\n      position: relative;\n      user-select: none;\n    }\n\n    .grid-item:hover {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\n    }\n\n    .grid-item.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n    }\n\n    .grid-item.active {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-color: var(--mj-status-warning);\n      box-shadow: 0 0 0 1px var(--mj-status-warning);\n    }\n\n    .grid-item.active:hover {\n      background: color-mix(in srgb, var(--mj-status-warning) 25%, var(--mj-bg-surface));\n    }\n\n    /* Select mode styling for grid */\n    .unified-grid.select-mode .grid-item {\n      cursor: pointer;\n    }\n\n    .unified-grid.select-mode .grid-item:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      border-color: color-mix(in srgb, var(--mj-brand-primary) 30%, var(--mj-bg-surface));\n    }\n\n    .item-checkbox {\n      position: absolute;\n      top: 8px;\n      right: 8px;\n      width: 20px;\n      height: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      z-index: 10;\n    }\n\n    .item-checkbox i {\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      transition: color 150ms ease;\n    }\n\n    .grid-item.selected .item-checkbox i,\n    .item-checkbox:hover i {\n      color: var(--mj-brand-primary);\n    }\n\n    .grid-item-content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .grid-icon {\n      width: 64px;\n      height: 64px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 8px;\n      position: relative;\n    }\n\n    .grid-icon.folder-icon {\n      background: var(--mj-brand-primary);\n    }\n\n    .grid-icon.folder-icon i {\n      font-size: 36px;\n      color: var(--mj-text-inverse);\n    }\n\n    .grid-icon.artifact-icon {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .grid-icon.artifact-icon i {\n      font-size: 32px;\n      color: var(--mj-text-muted);\n    }\n\n    .shared-badge {\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      width: 20px;\n      height: 20px;\n      background: var(--mj-status-success);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--mj-bg-surface);\n    }\n\n    .shared-badge i {\n      font-size: 10px;\n      color: var(--mj-text-inverse);\n    }\n\n    .grid-info {\n      width: 100%;\n      text-align: center;\n    }\n\n    .grid-name {\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-primary);\n      line-height: 1.3;\n      margin-bottom: 4px;\n      /* Allow wrapping to 2 lines max */\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-description {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      line-height: 1.3;\n      margin-bottom: 4px;\n      /* Allow wrapping to 2 lines max */\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n      word-break: break-word;\n    }\n\n    .grid-meta {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 4px;\n    }\n\n    .grid-owner {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      margin-top: 2px;\n    }\n\n    .grid-owner i {\n      font-size: 10px;\n      margin-right: 3px;\n    }\n\n    .version-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 600;\n      font-family: monospace;\n      margin-right: 4px;\n    }\n\n    .artifact-type-badge {\n      display: inline-block;\n      padding: 2px 6px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n      border-radius: 3px;\n      font-size: 10px;\n      font-weight: 500;\n      text-transform: uppercase;\n    }\n\n    /* List view */\n    .unified-list {\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .list-table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .list-table thead {\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .list-table th {\n      padding: 10px 16px;\n      text-align: left;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    .list-table th.sortable {\n      cursor: pointer;\n      user-select: none;\n      transition: color 150ms ease;\n    }\n\n    .list-table th.sortable:hover {\n      color: var(--mj-brand-primary);\n    }\n\n    .list-table th.sortable span {\n      display: inline-block;\n      margin-right: 6px;\n    }\n\n    .list-table th.sortable i {\n      font-size: 10px;\n      opacity: 0.5;\n    }\n\n    .list-table th.sortable:hover i {\n      opacity: 1;\n    }\n\n    .list-table tbody tr {\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      transition: background 150ms ease;\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .list-table tbody tr:last-child {\n      border-bottom: none;\n    }\n\n    .list-table tbody tr:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .list-table tbody tr.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .list-table tbody tr.active {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border-left: 3px solid var(--mj-status-warning);\n    }\n\n    .list-table tbody tr.active:hover {\n      background: color-mix(in srgb, var(--mj-status-warning) 25%, var(--mj-bg-surface));\n    }\n\n    .list-table td {\n      padding: 12px 16px;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n    }\n\n    .col-checkbox {\n      width: 40px;\n      text-align: center;\n    }\n\n    .col-checkbox i {\n      font-size: 16px;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      transition: color 150ms ease;\n    }\n\n    .col-checkbox i:hover,\n    .list-table tbody tr.selected .col-checkbox i {\n      color: var(--mj-brand-primary);\n    }\n\n    .col-name {\n      min-width: 300px;\n    }\n\n    .list-name-cell {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .list-name-cell i {\n      font-size: 16px;\n      color: var(--mj-text-muted);\n      width: 20px;\n      text-align: center;\n    }\n\n    .list-name-cell .fa-folder {\n      color: var(--mj-brand-primary);\n    }\n\n    .shared-indicator {\n      font-size: 12px;\n      color: var(--mj-status-success);\n      margin-left: auto;\n    }\n\n    .col-type {\n      width: 150px;\n    }\n\n    .col-modified {\n      width: 180px;\n    }\n\n    .col-owner {\n      width: 150px;\n    }\n\n    /* Toolbar separator and action group */\n    .toolbar-separator {\n      width: 1px;\n      height: 24px;\n      background: var(--mj-border-strong);\n      margin: 0 4px;\n    }\n\n    .toolbar-actions-group {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n\n    .btn-icon-danger {\n      color: var(--mj-status-error);\n      border-color: color-mix(in srgb, var(--mj-status-error) 30%, var(--mj-bg-surface));\n    }\n\n    .btn-icon-danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n      border-color: var(--mj-status-error);\n    }\n\n    /* Context menu */\n    .context-menu-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1999;\n    }\n\n    .context-menu {\n      position: fixed;\n      min-width: 180px;\n      background: var(--mj-bg-surface);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);\n      padding: 4px;\n      z-index: 2000;\n    }\n\n    .context-menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 8px 12px;\n      background: transparent;\n      border: none;\n      border-radius: 4px;\n      color: var(--mj-text-primary);\n      font-size: 13px;\n      cursor: pointer;\n      text-align: left;\n      transition: background 100ms ease;\n    }\n\n    .context-menu-item:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .context-menu-item i {\n      font-size: 14px;\n      width: 16px;\n      text-align: center;\n      color: var(--mj-text-muted);\n    }\n\n    .context-menu-danger {\n      color: var(--mj-status-error);\n    }\n\n    .context-menu-danger i {\n      color: var(--mj-status-error);\n    }\n\n    .context-menu-danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    }\n\n    .context-menu-divider {\n      height: 1px;\n      background: var(--mj-border-default);\n      margin: 4px 0;\n    }\n  "] }]
     }], () => [{ type: i1.DialogService }, { type: i2.ArtifactStateService }, { type: i3.CollectionStateService }, { type: i4.CollectionPermissionService }, { type: i5.ArtifactIconService }, { type: i0.ChangeDetectorRef }], { environmentId: [{
             type: Input
         }], currentUser: [{