@memberjunction/ng-conversations 5.42.0 → 5.44.0

package/dist/lib/components/active-tasks/active-tasks-panel.component.d.ts

@@ -11,7 +11,6 @@ export declare class ActiveTasksPanelComponent {
     taskCount$: Observable<number>;
     isExpanded: boolean;
     constructor(activeTasksService: ActiveTasksService);
-    toggleExpanded(): void;
     getElapsedTime(task: ActiveTask): string;
     getTrimmedStatus(status: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ActiveTasksPanelComponent, never>;

package/dist/lib/components/active-tasks/active-tasks-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"active-tasks-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;;AAErF;;;GAGG;AACH,qBAuHa,yBAAyB;IAKxB,OAAO,CAAC,kBAAkB;IAJtC,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,UAAQ;gBAEE,kBAAkB,EAAE,kBAAkB;IAK1D,cAAc,IAAI,IAAI;IAItB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCA3B7B,yBAAyB;2CAAzB,yBAAyB;CAkCrC"}
+{"version":3,"file":"active-tasks-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;;AAErF;;;GAGG;AACH,qBAmGa,yBAAyB;IAKxB,OAAO,CAAC,kBAAkB;IAJtC,MAAM,EAAE,UAAU,CAAC,UAAU,EAAE,CAAC,CAAC;IACjC,UAAU,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC/B,UAAU,UAAQ;gBAEE,kBAAkB,EAAE,kBAAkB;IAK1D,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM;IAaxC,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;yCAvB7B,yBAAyB;2CAAzB,yBAAyB;CA8BrC"}

package/dist/lib/components/active-tasks/active-tasks-panel.component.js

@@ -1,17 +1,29 @@
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/active-tasks.service";
-import * as i2 from "@angular/common";
-function ActiveTasksPanelComponent_Conditional_0_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6);
-    i0.ɵɵelement(2, "i", 7);
-    i0.ɵɵelementStart(3, "span", 8);
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@angular/common";
+function ActiveTasksPanelComponent_Conditional_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 4);
+    i0.ɵɵelementStart(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "async");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Active Tasks (", i0.ɵɵpipeBind1(3, 1, ctx_r1.taskCount$), ")");
+} }
+function ActiveTasksPanelComponent_Conditional_0_ng_template_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7);
+    i0.ɵɵelement(2, "i", 8);
+    i0.ɵɵelementStart(3, "span", 9);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 9);
+    i0.ɵɵelementStart(5, "span", 10);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 10);
+    i0.ɵɵelementStart(7, "div", 11);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -24,9 +36,9 @@ function ActiveTasksPanelComponent_Conditional_0_Conditional_7_For_2_Template(rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.getTrimmedStatus(task_r3.status));
 } }
-function ActiveTasksPanelComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4);
-    i0.ɵɵrepeaterCreate(1, ActiveTasksPanelComponent_Conditional_0_Conditional_7_For_2_Template, 9, 3, "div", 5, i0.ɵɵrepeaterTrackByIdentity);
+function ActiveTasksPanelComponent_Conditional_0_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵrepeaterCreate(1, ActiveTasksPanelComponent_Conditional_0_ng_template_3_For_2_Template, 9, 3, "div", 6, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵpipe(3, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -36,25 +48,15 @@ function ActiveTasksPanelComponent_Conditional_0_Conditional_7_Template(rf, ctx)
 } }
 function ActiveTasksPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-    i0.ɵɵlistener("click", function ActiveTasksPanelComponent_Conditional_0_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleExpanded()); });
-    i0.ɵɵelement(2, "i", 2);
-    i0.ɵɵelementStart(3, "span");
-    i0.ɵɵtext(4);
-    i0.ɵɵpipe(5, "async");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(6, "i", 3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, ActiveTasksPanelComponent_Conditional_0_Conditional_7_Template, 4, 2, "div", 4);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "div", 0)(1, "mj-accordion-panel", 1);
+    i0.ɵɵtwoWayListener("ExpandedChange", function ActiveTasksPanelComponent_Conditional_0_Template_mj_accordion_panel_ExpandedChange_1_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.isExpanded, $event) || (ctx_r1.isExpanded = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(2, ActiveTasksPanelComponent_Conditional_0_ng_template_2_Template, 4, 3, "ng-template", 2)(3, ActiveTasksPanelComponent_Conditional_0_ng_template_3_Template, 4, 2, "ng-template", 3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate1("Active Tasks (", i0.ɵɵpipeBind1(5, 3, ctx_r1.taskCount$), ")");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r1.isExpanded ? "fa-chevron-up" : "fa-chevron-down");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isExpanded ? 7 : -1);
+    i0.ɵɵproperty("FlushBody", true);
+    i0.ɵɵtwoWayProperty("Expanded", ctx_r1.isExpanded);
 } }
 /**
  * Panel component that displays currently running agent tasks.
@@ -70,9 +72,6 @@ export class ActiveTasksPanelComponent {
         this.tasks$ = this.activeTasksService.tasks$;
         this.taskCount$ = this.activeTasksService.taskCount$;
     }
-    toggleExpanded() {
-        this.isExpanded = !this.isExpanded;
-    }
     getElapsedTime(task) {
         const elapsed = Date.now() - task.startTime;
         const seconds = Math.floor(elapsed / 1000);
@@ -91,40 +90,45 @@ export class ActiveTasksPanelComponent {
         return status.substring(0, maxLength) + '...';
     }
     static ɵfac = function ActiveTasksPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActiveTasksPanelComponent)(i0.ɵɵdirectiveInject(i1.ActiveTasksService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveTasksPanelComponent, selectors: [["mj-active-tasks-panel"]], standalone: false, decls: 2, vars: 3, consts: [[1, "active-tasks-panel"], [1, "panel-header", 3, "click"], [1, "fas", "fa-tasks"], [1, "fas", 3, "ngClass"], [1, "panel-content"], [1, "task-item"], [1, "task-header"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "task-agent"], [1, "task-elapsed"], [1, "task-status"]], template: function ActiveTasksPanelComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, ActiveTasksPanelComponent_Conditional_0_Template, 8, 5, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActiveTasksPanelComponent, selectors: [["mj-active-tasks-panel"]], standalone: false, decls: 2, vars: 3, consts: [[1, "active-tasks-panel"], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "fas", "fa-tasks", "active-tasks-title-icon"], [1, "panel-content"], [1, "task-item"], [1, "task-header"], [1, "fas", "fa-circle-notch", "fa-spin"], [1, "task-agent"], [1, "task-elapsed"], [1, "task-status"]], template: function ActiveTasksPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ActiveTasksPanelComponent_Conditional_0_Template, 4, 2, "div", 0);
             i0.ɵɵpipe(1, "async");
         } if (rf & 2) {
             i0.ɵɵconditional(i0.ɵɵpipeBind1(1, 1, ctx.taskCount$) > 0 ? 0 : -1);
-        } }, dependencies: [i2.NgClass, i2.AsyncPipe], styles: [".active-tasks-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\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      z-index: 1000;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      border-radius: 8px 8px 0 0;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      transition: background 150ms ease;\n    }\n\n    .panel-header[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:first-child {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-header[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .panel-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]:last-child {\n      color: var(--mj-text-muted);\n      font-size: 12px;\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .task-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent[_ngcontent-%COMP%] {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }"] });
+        } }, dependencies: [i2.MJAccordionPanelComponent, i2.MJAccordionTitleDirective, i2.MJAccordionBodyDirective, i3.AsyncPipe], styles: [".active-tasks-panel[_ngcontent-%COMP%] {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\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      z-index: 1000;\n    }\n\n    \n\n\n\n    .active-tasks-title-icon[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-content[_ngcontent-%COMP%] {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item[_ngcontent-%COMP%] {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .task-header[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent[_ngcontent-%COMP%] {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActiveTasksPanelComponent, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-active-tasks-panel', template: `
     @if ((taskCount$ | async)! > 0) {
       <div class="active-tasks-panel">
-        <div class="panel-header" (click)="toggleExpanded()">
-          <i class="fas fa-tasks"></i>
-          <span>Active Tasks ({{ taskCount$ | async }})</span>
-          <i class="fas" [ngClass]="isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
-        </div>
-        @if (isExpanded) {
-          <div class="panel-content">
-            @for (task of (tasks$ | async); track task) {
-              <div class="task-item">
-                <div class="task-header">
-                  <i class="fas fa-circle-notch fa-spin"></i>
-                  <span class="task-agent">{{ task.agentName }}</span>
-                  <span class="task-elapsed">{{ getElapsedTime(task) }}</span>
+        <!-- Migrated from a bespoke header/chevron + @if(isExpanded) disclosure to
+             mj-accordion-panel. The floating fixed-position wrapper is preserved; only
+             the header→task-list disclosure became the accordion (content disclosure,
+             not a whole-panel collapse). -->
+        <mj-accordion-panel Size="sm" [FlushBody]="true" [(Expanded)]="isExpanded">
+          <ng-template mjAccordionTitle>
+            <i class="fas fa-tasks active-tasks-title-icon"></i>
+            <span>Active Tasks ({{ taskCount$ | async }})</span>
+          </ng-template>
+          <ng-template mjAccordionBody>
+            <div class="panel-content">
+              @for (task of (tasks$ | async); track task) {
+                <div class="task-item">
+                  <div class="task-header">
+                    <i class="fas fa-circle-notch fa-spin"></i>
+                    <span class="task-agent">{{ task.agentName }}</span>
+                    <span class="task-elapsed">{{ getElapsedTime(task) }}</span>
+                  </div>
+                  <div class="task-status">{{ getTrimmedStatus(task.status) }}</div>
                 </div>
-                <div class="task-status">{{ getTrimmedStatus(task.status) }}</div>
-              </div>
-            }
-          </div>
-        }
+              }
+            </div>
+          </ng-template>
+        </mj-accordion-panel>
       </div>
     }
-    `, styles: ["\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\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      z-index: 1000;\n    }\n\n    .panel-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      border-radius: 8px 8px 0 0;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      transition: background 150ms ease;\n    }\n\n    .panel-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header i:first-child {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-header span {\n      flex: 1;\n    }\n\n    .panel-header i:last-child {\n      color: var(--mj-text-muted);\n      font-size: 12px;\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }\n  "] }]
+    `, styles: ["\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\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      z-index: 1000;\n    }\n\n    /* Removed bespoke .panel-header chrome (header bar, hover, chevron, flex span) \u2014\n       the disclosure header is now owned by mj-accordion-panel. Only the title icon's\n       brand color is preserved below. */\n    .active-tasks-title-icon {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }\n  "] }]
     }], () => [{ type: i1.ActiveTasksService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActiveTasksPanelComponent, { className: "ActiveTasksPanelComponent", filePath: "src/lib/components/active-tasks/active-tasks-panel.component.ts", lineNumber: 128 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ActiveTasksPanelComponent, { className: "ActiveTasksPanelComponent", filePath: "src/lib/components/active-tasks/active-tasks-panel.component.ts", lineNumber: 108 }); })();
 //# sourceMappingURL=active-tasks-panel.component.js.map

package/dist/lib/components/active-tasks/active-tasks-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"active-tasks-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;IAuB1B,AADF,8BAAuB,aACI;IACvB,uBAA2C;IAC3C,+BAAyB;IAAA,YAAoB;IAAA,iBAAO;IACpD,+BAA2B;IAAA,YAA0B;IACvD,AADuD,iBAAO,EACxD;IACN,+BAAyB;IAAA,YAAmC;IAC9D,AAD8D,iBAAM,EAC9D;;;;IAJuB,eAAoB;IAApB,uCAAoB;IAClB,eAA0B;IAA1B,oDAA0B;IAE9B,eAAmC;IAAnC,6DAAmC;;;IARlE,8BAA2B;IACzB,0IASC;;IACH,iBAAM;;;IAVJ,cASC;IATD,kDASC;;;;IAhBL,AADF,8BAAgC,aACuB;IAA3B,0LAAS,uBAAgB,KAAC;IAClD,uBAA4B;IAC5B,4BAAM;IAAA,YAAuC;;IAAA,iBAAO;IACpD,uBAAgF;IAClF,iBAAM;IACN,yGAAkB;IAcpB,iBAAM;;;IAjBI,eAAuC;IAAvC,qFAAuC;IAC9B,eAA4D;IAA5D,iFAA4D;IAE7E,cAaC;IAbD,4CAaC;;AA5BT;;;GAGG;AAwHH,MAAM,OAAO,yBAAyB;IAKhB;IAJpB,MAAM,CAA2B;IACjC,UAAU,CAAqB;IAC/B,UAAU,GAAG,IAAI,CAAC;IAElB,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QACxD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC;IACvD,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,cAAc,CAAC,IAAgB;QAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;QAE3C,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;YACjB,OAAO,GAAG,OAAO,GAAG,CAAC;QACvB,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,gBAAgB,GAAG,OAAO,GAAG,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,gBAAgB,CAAC,MAAc;QAC7B,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;IAChD,CAAC;mHAjCU,yBAAyB;6DAAzB,yBAAyB;YAnHlC,2FAAiC;;;YAAjC,mEAsBC;;;iFA6FQ,yBAAyB;cAvHrC,SAAS;6BACI,KAAK,YACP,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;;;;;;KAwBP;;kFA4FQ,yBAAyB","sourcesContent":["import { Component } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';\n\n/**\n * Panel component that displays currently running agent tasks.\n * Shows as a floating panel in bottom-right corner when tasks are active.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-active-tasks-panel',\n  template: `\n    @if ((taskCount$ | async)! > 0) {\n      <div class=\"active-tasks-panel\">\n        <div class=\"panel-header\" (click)=\"toggleExpanded()\">\n          <i class=\"fas fa-tasks\"></i>\n          <span>Active Tasks ({{ taskCount$ | async }})</span>\n          <i class=\"fas\" [ngClass]=\"isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'\"></i>\n        </div>\n        @if (isExpanded) {\n          <div class=\"panel-content\">\n            @for (task of (tasks$ | async); track task) {\n              <div class=\"task-item\">\n                <div class=\"task-header\">\n                  <i class=\"fas fa-circle-notch fa-spin\"></i>\n                  <span class=\"task-agent\">{{ task.agentName }}</span>\n                  <span class=\"task-elapsed\">{{ getElapsedTime(task) }}</span>\n                </div>\n                <div class=\"task-status\">{{ getTrimmedStatus(task.status) }}</div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n    `,\n  styles: [`\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\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      z-index: 1000;\n    }\n\n    .panel-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      border-radius: 8px 8px 0 0;\n      cursor: pointer;\n      font-weight: 600;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n      transition: background 150ms ease;\n    }\n\n    .panel-header:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header i:first-child {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-header span {\n      flex: 1;\n    }\n\n    .panel-header i:last-child {\n      color: var(--mj-text-muted);\n      font-size: 12px;\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }\n  `]\n})\nexport class ActiveTasksPanelComponent {\n  tasks$: Observable<ActiveTask[]>;\n  taskCount$: Observable<number>;\n  isExpanded = true;\n\n  constructor(private activeTasksService: ActiveTasksService) {\n    this.tasks$ = this.activeTasksService.tasks$;\n    this.taskCount$ = this.activeTasksService.taskCount$;\n  }\n\n  toggleExpanded(): void {\n    this.isExpanded = !this.isExpanded;\n  }\n\n  getElapsedTime(task: ActiveTask): string {\n    const elapsed = Date.now() - task.startTime;\n    const seconds = Math.floor(elapsed / 1000);\n\n    if (seconds < 60) {\n      return `${seconds}s`;\n    }\n\n    const minutes = Math.floor(seconds / 60);\n    const remainingSeconds = seconds % 60;\n    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n  }\n\n  getTrimmedStatus(status: string): string {\n    const maxLength = 50;\n    if (status.length <= maxLength) {\n      return status;\n    }\n    return status.substring(0, maxLength) + '...';\n  }\n}\n"]}
+{"version":3,"file":"active-tasks-panel.component.js","sourceRoot":"","sources":["../../../../src/lib/components/active-tasks/active-tasks-panel.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;IAoB9B,uBAAoD;IACpD,4BAAM;IAAA,YAAuC;;IAAA,iBAAO;;;IAA9C,eAAuC;IAAvC,qFAAuC;;;IAMvC,AADF,8BAAuB,aACI;IACvB,uBAA2C;IAC3C,+BAAyB;IAAA,YAAoB;IAAA,iBAAO;IACpD,gCAA2B;IAAA,YAA0B;IACvD,AADuD,iBAAO,EACxD;IACN,+BAAyB;IAAA,YAAmC;IAC9D,AAD8D,iBAAM,EAC9D;;;;IAJuB,eAAoB;IAApB,uCAAoB;IAClB,eAA0B;IAA1B,oDAA0B;IAE9B,eAAmC;IAAnC,6DAAmC;;;IARlE,8BAA2B;IACzB,0IASC;;IACH,iBAAM;;;IAVJ,cASC;IATD,kDASC;;;;IAhBP,AALF,8BAAgC,4BAK6C;IAA1B,oUAAyB;IAKxE,AAJA,wGAA8B,2FAID;IAejC,AADE,iBAAqB,EACjB;;;IApB0B,cAAkB;IAAlB,gCAAkB;IAAC,kDAAyB;;AAdlF;;;GAGG;AAoGH,MAAM,OAAO,yBAAyB;IAKhB;IAJpB,MAAM,CAA2B;IACjC,UAAU,CAAqB;IAC/B,UAAU,GAAG,IAAI,CAAC;IAElB,YAAoB,kBAAsC;QAAtC,uBAAkB,GAAlB,kBAAkB,CAAoB;QACxD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,UAAU,CAAC;IACvD,CAAC;IAED,cAAc,CAAC,IAAgB;QAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;QAE3C,IAAI,OAAO,GAAG,EAAE,EAAE,CAAC;YACjB,OAAO,GAAG,OAAO,GAAG,CAAC;QACvB,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;QACzC,MAAM,gBAAgB,GAAG,OAAO,GAAG,EAAE,CAAC;QACtC,OAAO,GAAG,OAAO,IAAI,gBAAgB,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IACtE,CAAC;IAED,gBAAgB,CAAC,MAAc;QAC7B,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,IAAI,MAAM,CAAC,MAAM,IAAI,SAAS,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC;IAChD,CAAC;mHA7BU,yBAAyB;6DAAzB,yBAAyB;YA/FlC,2FAAiC;;;YAAjC,mEA2BC;;;iFAoEQ,yBAAyB;cAnGrC,SAAS;6BACI,KAAK,YACP,uBAAuB,YACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BP;;kFAmEQ,yBAAyB","sourcesContent":["import { Component } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { ActiveTasksService, ActiveTask } from '../../services/active-tasks.service';\n\n/**\n * Panel component that displays currently running agent tasks.\n * Shows as a floating panel in bottom-right corner when tasks are active.\n */\n@Component({\n  standalone: false,\n  selector: 'mj-active-tasks-panel',\n  template: `\n    @if ((taskCount$ | async)! > 0) {\n      <div class=\"active-tasks-panel\">\n        <!-- Migrated from a bespoke header/chevron + @if(isExpanded) disclosure to\n             mj-accordion-panel. The floating fixed-position wrapper is preserved; only\n             the header→task-list disclosure became the accordion (content disclosure,\n             not a whole-panel collapse). -->\n        <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\" [(Expanded)]=\"isExpanded\">\n          <ng-template mjAccordionTitle>\n            <i class=\"fas fa-tasks active-tasks-title-icon\"></i>\n            <span>Active Tasks ({{ taskCount$ | async }})</span>\n          </ng-template>\n          <ng-template mjAccordionBody>\n            <div class=\"panel-content\">\n              @for (task of (tasks$ | async); track task) {\n                <div class=\"task-item\">\n                  <div class=\"task-header\">\n                    <i class=\"fas fa-circle-notch fa-spin\"></i>\n                    <span class=\"task-agent\">{{ task.agentName }}</span>\n                    <span class=\"task-elapsed\">{{ getElapsedTime(task) }}</span>\n                  </div>\n                  <div class=\"task-status\">{{ getTrimmedStatus(task.status) }}</div>\n                </div>\n              }\n            </div>\n          </ng-template>\n        </mj-accordion-panel>\n      </div>\n    }\n    `,\n  styles: [`\n    .active-tasks-panel {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      width: 320px;\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      z-index: 1000;\n    }\n\n    /* Removed bespoke .panel-header chrome (header bar, hover, chevron, flex span) —\n       the disclosure header is now owned by mj-accordion-panel. Only the title icon's\n       brand color is preserved below. */\n    .active-tasks-title-icon {\n      color: var(--mj-brand-primary);\n    }\n\n    .panel-content {\n      max-height: 300px;\n      overflow-y: auto;\n    }\n\n    .task-item {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .task-item:last-child {\n      border-bottom: none;\n    }\n\n    .task-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 4px;\n    }\n\n    .task-header i {\n      color: var(--mj-brand-primary);\n      font-size: 14px;\n    }\n\n    .task-agent {\n      flex: 1;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      font-size: 14px;\n    }\n\n    .task-elapsed {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      font-weight: 500;\n    }\n\n    .task-status {\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      padding-left: 22px;\n    }\n  `]\n})\nexport class ActiveTasksPanelComponent {\n  tasks$: Observable<ActiveTask[]>;\n  taskCount$: Observable<number>;\n  isExpanded = true;\n\n  constructor(private activeTasksService: ActiveTasksService) {\n    this.tasks$ = this.activeTasksService.tasks$;\n    this.taskCount$ = this.activeTasksService.taskCount$;\n  }\n\n  getElapsedTime(task: ActiveTask): string {\n    const elapsed = Date.now() - task.startTime;\n    const seconds = Math.floor(elapsed / 1000);\n\n    if (seconds < 60) {\n      return `${seconds}s`;\n    }\n\n    const minutes = Math.floor(seconds / 60);\n    const remainingSeconds = seconds % 60;\n    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;\n  }\n\n  getTrimmedStatus(status: string): string {\n    const maxLength = 50;\n    if (status.length <= maxLength) {\n      return status;\n    }\n    return status.substring(0, maxLength) + '...';\n  }\n}\n"]}

package/dist/lib/components/artifact/artifact-share-modal.component.js

@@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MJWindowComponent, MJButtonDirective } from '@memberjunction/ng-ui-components';
+import { MJWindowComponent, MJButtonDirective, MJEmptyStateComponent } from '@memberjunction/ng-ui-components';
 import { UserPickerComponent } from '../shared/user-picker.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/artifact-permission.service";
@@ -88,14 +88,10 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_7_Template(rf, ct
     i0.ɵɵproperty("disabled", !ctx_r1.selectedUser);
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "i", 33);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "Not shared with anyone yet");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 10);
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelementStart(0, "span", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -104,24 +100,24 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditio
     i0.ɵɵtextInterpolate1("shared by ", permission_r6.sharedByUserName);
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵelement(1, "i", 31);
     i0.ɵɵtext(2, " Share ");
     i0.ɵɵelementEnd();
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelementStart(0, "span", 40);
     i0.ɵɵelement(1, "i", 32);
     i0.ɵɵtext(2, " Edit ");
     i0.ɵɵelementEnd();
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38)(1, "span", 41);
+    i0.ɵɵelementStart(0, "div", 37)(1, "span", 40);
     i0.ɵɵelement(2, "i", 24);
     i0.ɵɵtext(3, " Read ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Conditional_4_Template, 3, 0, "span", 41);
-    i0.ɵɵconditionalCreate(5, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Conditional_5_Template, 3, 0, "span", 41);
+    i0.ɵɵconditionalCreate(4, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Conditional_4_Template, 3, 0, "span", 40);
+    i0.ɵɵconditionalCreate(5, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Conditional_5_Template, 3, 0, "span", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const permission_r6 = i0.ɵɵnextContext().$implicit;
@@ -132,7 +128,7 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditio
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 43)(1, "input", 30);
+    i0.ɵɵelementStart(0, "label", 42)(1, "input", 30);
     i0.ɵɵtwoWayListener("ngModelChange", function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_5_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const permission_r6 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵtwoWayBindingSet(permission_r6.editingPermissions.canShare, $event) || (permission_r6.editingPermissions.canShare = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "span");
@@ -145,7 +141,7 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditio
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 43)(1, "input", 30);
+    i0.ɵɵelementStart(0, "label", 42)(1, "input", 30);
     i0.ɵɵtwoWayListener("ngModelChange", function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_6_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r8); const permission_r6 = i0.ɵɵnextContext(2).$implicit; i0.ɵɵtwoWayBindingSet(permission_r6.editingPermissions.canEdit, $event) || (permission_r6.editingPermissions.canEdit = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "span");
@@ -157,13 +153,13 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditio
     i0.ɵɵtwoWayProperty("ngModel", permission_r6.editingPermissions.canEdit);
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39)(1, "label", 42);
+    i0.ɵɵelementStart(0, "div", 38)(1, "label", 41);
     i0.ɵɵelement(2, "input", 22);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Read");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(5, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_5_Template, 4, 1, "label", 43);
-    i0.ɵɵconditionalCreate(6, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_6_Template, 4, 1, "label", 43);
+    i0.ɵɵconditionalCreate(5, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_5_Template, 4, 1, "label", 42);
+    i0.ɵɵconditionalCreate(6, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Conditional_6_Template, 4, 1, "label", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -176,28 +172,28 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditio
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 43);
     i0.ɵɵlistener("click", function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const permission_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEditPermission(permission_r6)); });
-    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelement(1, "i", 44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 46);
+    i0.ɵɵelementStart(2, "button", 45);
     i0.ɵɵlistener("click", function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r9); const permission_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onRevokePermission(permission_r6)); });
-    i0.ɵɵelement(3, "i", 47);
+    i0.ɵɵelement(3, "i", 46);
     i0.ɵɵelementEnd();
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵelementStart(0, "button", 47);
     i0.ɵɵlistener("click", function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const permission_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSavePermission(permission_r6)); });
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 48);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 50);
+    i0.ɵɵelementStart(2, "button", 49);
     i0.ɵɵlistener("click", function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r10); const permission_r6 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onCancelEdit(permission_r6)); });
-    i0.ɵɵelement(3, "i", 47);
+    i0.ɵɵelement(3, "i", 46);
     i0.ɵɵelementEnd();
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelementStart(0, "div", 39);
     i0.ɵɵconditionalCreate(1, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_1_Template, 4, 0)(2, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Conditional_2_Template, 4, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -206,17 +202,17 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditio
     i0.ɵɵconditional(!permission_r6.isEditing ? 1 : 2);
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 15);
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 15);
     i0.ɵɵelement(2, "i", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 35)(4, "div", 36)(5, "span", 18);
+    i0.ɵɵelementStart(3, "div", 34)(4, "div", 35)(5, "span", 18);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_7_Template, 2, 1, "span", 37);
+    i0.ɵɵconditionalCreate(7, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_7_Template, 2, 1, "span", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Template, 6, 2, "div", 38)(9, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Template, 7, 3, "div", 39);
+    i0.ɵɵconditionalCreate(8, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_8_Template, 6, 2, "div", 37)(9, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_9_Template, 7, 3, "div", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(10, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Template, 3, 1, "div", 40);
+    i0.ɵɵconditionalCreate(10, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Conditional_10_Template, 3, 1, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const permission_r6 = ctx.$implicit;
@@ -232,7 +228,7 @@ function ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Template
 } }
 function ArtifactShareModalComponent_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵrepeaterCreate(1, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Template, 11, 4, "div", 34, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, ArtifactShareModalComponent_Conditional_0_Conditional_13_For_2_Template, 11, 4, "div", 33, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -256,7 +252,7 @@ function ArtifactShareModalComponent_Conditional_0_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(10, "i", 9);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, ArtifactShareModalComponent_Conditional_0_Conditional_12_Template, 4, 0, "div", 10)(13, ArtifactShareModalComponent_Conditional_0_Conditional_13_Template, 3, 0, "div", 11);
+    i0.ɵɵconditionalCreate(12, ArtifactShareModalComponent_Conditional_0_Conditional_12_Template, 1, 0, "mj-empty-state", 10)(13, ArtifactShareModalComponent_Conditional_0_Conditional_13_Template, 3, 0, "div", 11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(14, "div", 12)(15, "button", 13);
     i0.ɵɵlistener("click", function ArtifactShareModalComponent_Conditional_0_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
@@ -457,15 +453,15 @@ export class ArtifactShareModalComponent {
         this.cancelled.emit();
     }
     static ɵfac = function ArtifactShareModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ArtifactShareModalComponent)(i0.ɵɵdirectiveInject(i1.ArtifactPermissionService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactShareModalComponent, selectors: [["mj-artifact-share-modal"]], inputs: { isOpen: "isOpen", artifact: "artifact", currentUser: "currentUser" }, outputs: { saved: "saved", cancelled: "cancelled" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "Title", "Width", "Height", "MinWidth", "MinHeight", "Visible"], [3, "Close", "Title", "Width", "Height", "MinWidth", "MinHeight", "Visible"], [1, "share-modal-content"], [1, "add-user-section"], [1, "section-title"], [1, "fa-solid", "fa-user-plus"], [3, "userSelected", "currentUser", "excludeUserIds"], [1, "permissions-form"], [1, "permissions-list-section"], [1, "fa-solid", "fa-users"], [1, "empty-state"], [1, "permissions-list"], [1, "modal-actions"], ["mjButton", "", 3, "click"], [1, "selected-user-info"], [1, "user-avatar"], [1, "fa-solid", "fa-user"], [1, "user-details"], [1, "user-name"], [1, "user-email"], [1, "permissions-grid"], [1, "permission-checkbox", "disabled"], ["type", "checkbox", "disabled", "", 3, "checked"], [1, "permission-label"], [1, "fa-solid", "fa-eye"], [1, "permission-desc"], [1, "permission-checkbox"], [1, "form-actions"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-share-nodes"], [1, "fa-solid", "fa-pen-to-square"], [1, "fa-solid", "fa-user-slash"], [1, "permission-item"], [1, "permission-details"], [1, "permission-user"], [1, "shared-by"], [1, "permission-badges"], [1, "permissions-edit-grid"], [1, "permission-actions"], [1, "permission-badge"], [1, "permission-checkbox-small", "disabled"], [1, "permission-checkbox-small"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-pen"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Remove", 3, "click"], [1, "fa-solid", "fa-xmark"], ["mjButton", "", "variant", "success", "size", "sm", "title", "Save", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Cancel", 3, "click"]], template: function ArtifactShareModalComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ArtifactShareModalComponent, selectors: [["mj-artifact-share-modal"]], inputs: { isOpen: "isOpen", artifact: "artifact", currentUser: "currentUser" }, outputs: { saved: "saved", cancelled: "cancelled" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[3, "Title", "Width", "Height", "MinWidth", "MinHeight", "Visible"], [3, "Close", "Title", "Width", "Height", "MinWidth", "MinHeight", "Visible"], [1, "share-modal-content"], [1, "add-user-section"], [1, "section-title"], [1, "fa-solid", "fa-user-plus"], [3, "userSelected", "currentUser", "excludeUserIds"], [1, "permissions-form"], [1, "permissions-list-section"], [1, "fa-solid", "fa-users"], ["Icon", "fa-solid fa-user-slash", "Title", "Not shared with anyone yet", "Size", "compact"], [1, "permissions-list"], [1, "modal-actions"], ["mjButton", "", 3, "click"], [1, "selected-user-info"], [1, "user-avatar"], [1, "fa-solid", "fa-user"], [1, "user-details"], [1, "user-name"], [1, "user-email"], [1, "permissions-grid"], [1, "permission-checkbox", "disabled"], ["type", "checkbox", "disabled", "", 3, "checked"], [1, "permission-label"], [1, "fa-solid", "fa-eye"], [1, "permission-desc"], [1, "permission-checkbox"], [1, "form-actions"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-plus"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [1, "fa-solid", "fa-share-nodes"], [1, "fa-solid", "fa-pen-to-square"], [1, "permission-item"], [1, "permission-details"], [1, "permission-user"], [1, "shared-by"], [1, "permission-badges"], [1, "permissions-edit-grid"], [1, "permission-actions"], [1, "permission-badge"], [1, "permission-checkbox-small", "disabled"], [1, "permission-checkbox-small"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-pen"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Remove", 3, "click"], [1, "fa-solid", "fa-xmark"], ["mjButton", "", "variant", "success", "size", "sm", "title", "Save", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Cancel", 3, "click"]], template: function ArtifactShareModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, ArtifactShareModalComponent_Conditional_0_Template, 17, 11, "mj-window", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.isOpen && ctx.artifact ? 0 : -1);
-        } }, dependencies: [FormsModule, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, MJWindowComponent, MJButtonDirective, UserPickerComponent], styles: [".share-modal-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 16px 0;\n}\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-user-section[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  padding-bottom: 24px;\n}\n\n.selected-user-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 16px 0;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.user-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n.user-details[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n.user-details[_ngcontent-%COMP%]   .user-email[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\n}\n\n.permissions-form[_ngcontent-%COMP%] {\n  margin-top: 16px;\n}\n\n.permissions-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 12px;\n  margin: 16px 0;\n}\n\n.permission-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.permission-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n.permission-checkbox[_ngcontent-%COMP%]   .permission-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-checkbox[_ngcontent-%COMP%]   .permission-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.permission-checkbox[_ngcontent-%COMP%]   .permission-desc[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: 28px;\n}\n\n.form-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-top: 16px;\n}\n\n.permissions-list-section[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.permissions-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.permission-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  transition: background 0.2s;\n}\n.permission-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.permission-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.permission-user[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n.permission-user[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-user[_ngcontent-%COMP%]   .shared-by[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.permission-badges[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.permission-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.permission-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.permissions-edit-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.permission-checkbox-small[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.permission-checkbox-small.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.permission-checkbox-small[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  margin: 0;\n}\n.permission-checkbox-small[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.permission-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 12px;\n}\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary) !important;\n  color: var(--mj-text-inverse) !important;\n  border: none !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover) !important;\n}\n.btn-primary[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface) !important;\n  color: var(--mj-text-secondary) !important;\n  border: 1px solid var(--mj-border-default) !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken) !important;\n  border-color: var(--mj-border-strong) !important;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.btn-icon.btn-success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n.btn-icon.btn-success[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-success-bg);\n}\n.btn-icon.btn-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n.btn-icon.btn-danger[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-bg);\n}\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.modal-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}"] });
+        } }, dependencies: [FormsModule, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, MJWindowComponent, MJButtonDirective, MJEmptyStateComponent, UserPickerComponent], styles: [".share-modal-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 16px 0;\n}\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.add-user-section[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  padding-bottom: 24px;\n}\n\n.selected-user-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 16px 0;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.user-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n.user-details[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n.user-details[_ngcontent-%COMP%]   .user-email[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\n}\n\n.permissions-form[_ngcontent-%COMP%] {\n  margin-top: 16px;\n}\n\n.permissions-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 12px;\n  margin: 16px 0;\n}\n\n.permission-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.permission-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  margin-right: 8px;\n}\n.permission-checkbox[_ngcontent-%COMP%]   .permission-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-checkbox[_ngcontent-%COMP%]   .permission-label[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.permission-checkbox[_ngcontent-%COMP%]   .permission-desc[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: 28px;\n}\n\n.form-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-top: 16px;\n}\n\n.permissions-list-section[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.permissions-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.permission-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  transition: background 0.2s;\n}\n.permission-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.permission-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.permission-user[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n.permission-user[_ngcontent-%COMP%]   .user-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-user[_ngcontent-%COMP%]   .shared-by[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.permission-badges[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.permission-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.permission-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.permissions-edit-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.permission-checkbox-small[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.permission-checkbox-small.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.permission-checkbox-small[_ngcontent-%COMP%]   input[type=checkbox][_ngcontent-%COMP%] {\n  margin: 0;\n}\n.permission-checkbox-small[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.permission-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary) !important;\n  color: var(--mj-text-inverse) !important;\n  border: none !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover) !important;\n}\n.btn-primary[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface) !important;\n  color: var(--mj-text-secondary) !important;\n  border: 1px solid var(--mj-border-default) !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.btn-secondary[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken) !important;\n  border-color: var(--mj-border-strong) !important;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.btn-icon[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.btn-icon.btn-success[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n.btn-icon.btn-success[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-success-bg);\n}\n.btn-icon.btn-danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n.btn-icon.btn-danger[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error-bg);\n}\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.modal-actions[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ArtifactShareModalComponent, [{
         type: Component,
-        args: [{ selector: 'mj-artifact-share-modal', standalone: true, imports: [FormsModule, MJWindowComponent, MJButtonDirective, UserPickerComponent], template: `
+        args: [{ selector: 'mj-artifact-share-modal', standalone: true, imports: [FormsModule, MJWindowComponent, MJButtonDirective, MJEmptyStateComponent, UserPickerComponent], template: `
         @if (isOpen && artifact) {
             <mj-window
                 [Title]="'Share: ' + artifact.Name"
@@ -556,10 +552,10 @@ export class ArtifactShareModalComponent {
                         </h3>
 
                         @if (permissions.length === 0) {
-                            <div class="empty-state">
-                                <i class="fa-solid fa-user-slash"></i>
-                                <p>Not shared with anyone yet</p>
-                            </div>
+                            <mj-empty-state
+                                Icon="fa-solid fa-user-slash"
+                                Title="Not shared with anyone yet"
+                                Size="compact" />
                         } @else {
                             <div class="permissions-list">
                                 @for (permission of permissions; track permission.id) {
@@ -644,7 +640,7 @@ export class ArtifactShareModalComponent {
                 </div>
             </mj-window>
         }
-    `, styles: [".share-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 16px 0;\n}\n.section-title i {\n  color: var(--mj-brand-primary);\n}\n\n.add-user-section {\n  border-bottom: 1px solid var(--mj-border-default);\n  padding-bottom: 24px;\n}\n\n.selected-user-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 16px 0;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.user-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.user-details {\n  flex: 1;\n  min-width: 0;\n}\n.user-details .user-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n.user-details .user-email {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\n}\n\n.permissions-form {\n  margin-top: 16px;\n}\n\n.permissions-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 12px;\n  margin: 16px 0;\n}\n\n.permission-checkbox {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.permission-checkbox:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox input[type=checkbox] {\n  margin-right: 8px;\n}\n.permission-checkbox .permission-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-checkbox .permission-label i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.permission-checkbox .permission-desc {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: 28px;\n}\n\n.form-actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 16px;\n}\n\n.permissions-list-section {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.permissions-list {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.permission-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  transition: background 0.2s;\n}\n.permission-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.permission-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.permission-user {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n.permission-user .user-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-user .shared-by {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.permission-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.permission-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.permission-badge i {\n  font-size: 10px;\n}\n\n.permissions-edit-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.permission-checkbox-small {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.permission-checkbox-small.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.permission-checkbox-small input[type=checkbox] {\n  margin: 0;\n}\n.permission-checkbox-small span {\n  color: var(--mj-text-primary);\n}\n\n.permission-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  color: var(--mj-text-muted);\n}\n.empty-state i {\n  font-size: 48px;\n  margin-bottom: 12px;\n}\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n}\n\n.btn-primary {\n  background: var(--mj-brand-primary) !important;\n  color: var(--mj-text-inverse) !important;\n  border: none !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.btn-primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover) !important;\n}\n.btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.btn-primary i {\n  font-size: 12px;\n}\n\n.btn-secondary {\n  background: var(--mj-bg-surface) !important;\n  color: var(--mj-text-secondary) !important;\n  border: 1px solid var(--mj-border-default) !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.btn-secondary:hover {\n  background: var(--mj-bg-surface-sunken) !important;\n  border-color: var(--mj-border-strong) !important;\n}\n\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.btn-icon.btn-success {\n  color: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n.btn-icon.btn-success:hover {\n  background: var(--mj-status-success-bg);\n}\n.btn-icon.btn-danger {\n  color: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n.btn-icon.btn-danger:hover {\n  background: var(--mj-status-error-bg);\n}\n.btn-icon i {\n  font-size: 14px;\n}\n\n.modal-actions {\n  display: flex;\n  justify-content: flex-end;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n"] }]
+    `, styles: [".share-modal-content {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  padding: 20px;\n  height: 100%;\n  overflow-y: auto;\n}\n\n.section-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin: 0 0 16px 0;\n}\n.section-title i {\n  color: var(--mj-brand-primary);\n}\n\n.add-user-section {\n  border-bottom: 1px solid var(--mj-border-default);\n  padding-bottom: 24px;\n}\n\n.selected-user-info {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  margin: 16px 0;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 8px;\n}\n\n.user-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-text-inverse);\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.user-details {\n  flex: 1;\n  min-width: 0;\n}\n.user-details .user-name {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n.user-details .user-email {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-top: 2px;\n}\n\n.permissions-form {\n  margin-top: 16px;\n}\n\n.permissions-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 12px;\n  margin: 16px 0;\n}\n\n.permission-checkbox {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.permission-checkbox:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-sunken);\n}\n.permission-checkbox input[type=checkbox] {\n  margin-right: 8px;\n}\n.permission-checkbox .permission-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-checkbox .permission-label i {\n  color: var(--mj-brand-primary);\n  font-size: 12px;\n}\n.permission-checkbox .permission-desc {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: 28px;\n}\n\n.form-actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 16px;\n}\n\n.permissions-list-section {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.permissions-list {\n  flex: 1;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.permission-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  transition: background 0.2s;\n}\n.permission-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.permission-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.permission-user {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n.permission-user .user-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  font-size: 14px;\n}\n.permission-user .shared-by {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.permission-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.permission-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 500;\n}\n.permission-badge i {\n  font-size: 10px;\n}\n\n.permissions-edit-grid {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.permission-checkbox-small {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  cursor: pointer;\n}\n.permission-checkbox-small.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n.permission-checkbox-small input[type=checkbox] {\n  margin: 0;\n}\n.permission-checkbox-small span {\n  color: var(--mj-text-primary);\n}\n\n.permission-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.btn-primary {\n  background: var(--mj-brand-primary) !important;\n  color: var(--mj-text-inverse) !important;\n  border: none !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.btn-primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover) !important;\n}\n.btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.btn-primary i {\n  font-size: 12px;\n}\n\n.btn-secondary {\n  background: var(--mj-bg-surface) !important;\n  color: var(--mj-text-secondary) !important;\n  border: 1px solid var(--mj-border-default) !important;\n  padding: 8px 16px;\n  border-radius: 6px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.btn-secondary:hover {\n  background: var(--mj-bg-surface-sunken) !important;\n  border-color: var(--mj-border-strong) !important;\n}\n\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border-radius: 6px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n.btn-icon:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n.btn-icon.btn-success {\n  color: var(--mj-status-success);\n  border-color: var(--mj-status-success);\n}\n.btn-icon.btn-success:hover {\n  background: var(--mj-status-success-bg);\n}\n.btn-icon.btn-danger {\n  color: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n}\n.btn-icon.btn-danger:hover {\n  background: var(--mj-status-error-bg);\n}\n.btn-icon i {\n  font-size: 14px;\n}\n\n.modal-actions {\n  display: flex;\n  justify-content: flex-end;\n  padding: 16px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n"] }]
     }], () => [{ type: i1.ArtifactPermissionService }, { type: i0.ChangeDetectorRef }], { isOpen: [{
             type: Input
         }], artifact: [{