@forgeroute/ui 0.4.70 → 0.4.71

package/fesm2022/forgeroute-ui.mjs

@@ -869,7 +869,7 @@ var QuickFilterTabsComponent = class QuickFilterTabsComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:block;min-width:0}.tabs-outer{position:relative;display:inline-flex;align-items:center;max-width:100%;min-width:0}.tabs{display:flex;align-items:center;gap:2px;background:#f1f5f9;border-radius:8px;padding:3px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}.tabs::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;border:none;background:transparent;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;font-family:inherit;transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}.tab:hover{color:#1e293b}.tab.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px #00000014}.tab:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.tab.tab-disabled{opacity:.45;cursor:default;pointer-events:none}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:.6875rem;font-weight:700;background:#e2e8f0;color:#475569;line-height:1}.active .tab-count,.active-count{background:#1e293b;color:#fff}.more-btn{gap:4px}.more-dropdown{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:180px;padding:4px;max-height:260px;overflow-y:auto}.more-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;border-radius:5px;transition:background .1s;text-align:left;gap:12px}.more-option:hover{background:#f8fafc}.more-option.more-option-active{background:#f1f5f9;color:#1e293b;font-weight:500}.more-option:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.more-option-label{flex:1}.more-option-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:.6875rem;font-weight:700;line-height:1;background:#e2e8f0;color:#475569}.more-option-active .more-option-count{background:#1e293b;color:#fff}@media(max-width:1024px){.tab{padding:7px 12px}}@media(pointer:coarse){.tab{min-height:44px}}@media(max-width:640px){:host{align-self:flex-start;max-width:100%}.tab{padding:10px 12px;font-size:.8125rem;min-height:44px}.more-option{padding:12px 14px}}\n"],
+			styles: [":host{display:block;min-width:0}.tabs-outer{position:relative;display:inline-flex;align-items:center;max-width:100%;min-width:0}.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;background:#f1f5f9;border-radius:8px;padding:3px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}.tabs::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;border:none;background:transparent;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;font-family:inherit;transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}.tab:hover{color:#1e293b}.tab.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px #00000014}.tab:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.tab.tab-disabled{opacity:.45;cursor:default;pointer-events:none}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:.6875rem;font-weight:700;background:#e2e8f0;color:#475569;line-height:1}.active .tab-count,.active-count{background:#1e293b;color:#fff}.more-btn{gap:4px}.more-dropdown{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:180px;padding:4px;max-height:260px;overflow-y:auto}.more-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;border-radius:5px;transition:background .1s;text-align:left;gap:12px}.more-option:hover{background:#f8fafc}.more-option.more-option-active{background:#f1f5f9;color:#1e293b;font-weight:500}.more-option:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.more-option-label{flex:1}.more-option-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:.6875rem;font-weight:700;line-height:1;background:#e2e8f0;color:#475569}.more-option-active .more-option-count{background:#1e293b;color:#fff}@media(max-width:1024px){.tab{padding:7px 12px}}@media(pointer:coarse){.tab{min-height:44px}}@media(max-width:640px){:host{align-self:flex-start;max-width:100%}.tab{padding:10px 12px;font-size:.8125rem;min-height:44px}.more-option{padding:12px 14px}}\n"],
 			dependencies: [{
 				kind: "pipe",
 				type: DecimalPipe,
@@ -964,7 +964,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:block;min-width:0}.tabs-outer{position:relative;display:inline-flex;align-items:center;max-width:100%;min-width:0}.tabs{display:flex;align-items:center;gap:2px;background:#f1f5f9;border-radius:8px;padding:3px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}.tabs::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;border:none;background:transparent;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;font-family:inherit;transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}.tab:hover{color:#1e293b}.tab.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px #00000014}.tab:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.tab.tab-disabled{opacity:.45;cursor:default;pointer-events:none}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:.6875rem;font-weight:700;background:#e2e8f0;color:#475569;line-height:1}.active .tab-count,.active-count{background:#1e293b;color:#fff}.more-btn{gap:4px}.more-dropdown{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:180px;padding:4px;max-height:260px;overflow-y:auto}.more-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;border-radius:5px;transition:background .1s;text-align:left;gap:12px}.more-option:hover{background:#f8fafc}.more-option.more-option-active{background:#f1f5f9;color:#1e293b;font-weight:500}.more-option:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.more-option-label{flex:1}.more-option-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:.6875rem;font-weight:700;line-height:1;background:#e2e8f0;color:#475569}.more-option-active .more-option-count{background:#1e293b;color:#fff}@media(max-width:1024px){.tab{padding:7px 12px}}@media(pointer:coarse){.tab{min-height:44px}}@media(max-width:640px){:host{align-self:flex-start;max-width:100%}.tab{padding:10px 12px;font-size:.8125rem;min-height:44px}.more-option{padding:12px 14px}}\n"]
+			styles: [":host{display:block;min-width:0}.tabs-outer{position:relative;display:inline-flex;align-items:center;max-width:100%;min-width:0}.tabs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;background:#f1f5f9;border-radius:8px;padding:3px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}.tabs::-webkit-scrollbar{display:none}.tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;border:none;background:transparent;font-size:.8125rem;font-weight:500;color:#475569;cursor:pointer;font-family:inherit;transition:background .1s,color .1s;white-space:nowrap;flex-shrink:0}.tab:hover{color:#1e293b}.tab.active{background:#fff;color:#1e293b;box-shadow:0 1px 3px #00000014}.tab:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}.tab.tab-disabled{opacity:.45;cursor:default;pointer-events:none}.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:.6875rem;font-weight:700;background:#e2e8f0;color:#475569;line-height:1}.active .tab-count,.active-count{background:#1e293b;color:#fff}.more-btn{gap:4px}.more-dropdown{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 16px #0000001a;min-width:180px;padding:4px;max-height:260px;overflow-y:auto}.more-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;background:none;border:none;cursor:pointer;font-size:.875rem;color:#334155;font-family:inherit;border-radius:5px;transition:background .1s;text-align:left;gap:12px}.more-option:hover{background:#f8fafc}.more-option.more-option-active{background:#f1f5f9;color:#1e293b;font-weight:500}.more-option:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}.more-option-label{flex:1}.more-option-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:.6875rem;font-weight:700;line-height:1;background:#e2e8f0;color:#475569}.more-option-active .more-option-count{background:#1e293b;color:#fff}@media(max-width:1024px){.tab{padding:7px 12px}}@media(pointer:coarse){.tab{min-height:44px}}@media(max-width:640px){:host{align-self:flex-start;max-width:100%}.tab{padding:10px 12px;font-size:.8125rem;min-height:44px}.more-option{padding:12px 14px}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -2524,6 +2524,7 @@ var ModalComponent = class ModalComponent {
 		this.open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
 		this.title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
 		this.description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+		this.describedBy = input(null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
 		this.maxWidth = input("460px", ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
 		this.bodyOverflow = input("auto", ...ngDevMode ? [{ debugName: "bodyOverflow" }] : /* istanbul ignore next */ []);
 		this.dialogTestId = input("", ...ngDevMode ? [{ debugName: "dialogTestId" }] : /* istanbul ignore next */ []);
@@ -2537,6 +2538,8 @@ var ModalComponent = class ModalComponent {
 		this.returnFocusTo = input(null, ...ngDevMode ? [{ debugName: "returnFocusTo" }] : /* istanbul ignore next */ []);
 		this.kiosk = computed(() => this.layout() === "kiosk", ...ngDevMode ? [{ debugName: "kiosk" }] : /* istanbul ignore next */ []);
 		this.titleId = `m-title-${Math.random().toString(36).slice(2, 8)}`;
+		this.descId = `m-desc-${Math.random().toString(36).slice(2, 8)}`;
+		this.describedById = computed(() => this.describedBy()?.trim() || (this.description() ? this.descId : null), ...ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []);
 		this.el = inject(ElementRef);
 		this.ren = inject(Renderer2);
 		this.doc = inject(DOCUMENT);
@@ -2674,6 +2677,13 @@ var ModalComponent = class ModalComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				describedBy: {
+					classPropertyName: "describedBy",
+					publicName: "describedBy",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				maxWidth: {
 					classPropertyName: "maxWidth",
 					publicName: "maxWidth",
@@ -2751,13 +2761,13 @@ var ModalComponent = class ModalComponent {
 			template: `
     @if (open()) {
       <div class="m-backdrop" [class.m-kiosk-backdrop]="kiosk()" (click)="dismiss('backdrop')"></div>
-      <div class="m-modal" [class.m-kiosk]="kiosk()" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-busy]="busy() ? 'true' : null" [attr.data-testid]="dialogTestId() || null" [style.max-width]="maxWidth()">
+      <div class="m-modal" [class.m-kiosk]="kiosk()" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="describedById()" [attr.aria-busy]="busy() ? 'true' : null" [attr.data-testid]="dialogTestId() || null" [style.max-width]="maxWidth()">
         <span class="m-focus-guard" data-ui-focus-guard="start" tabindex="0" (focus)="onGuardFocus('start', $event)"></span>
         <div class="m-header">
           <div class="m-header-text">
             <h3 class="m-title" [id]="titleId">{{ title() }}</h3>
             @if (description()) {
-              <p class="m-description">{{ description() }}</p>
+              <p class="m-description" [id]="descId">{{ description() }}</p>
             }
           </div>
           <ng-content select="[modal-header-end]" />
@@ -2802,13 +2812,13 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (open()) {
       <div class="m-backdrop" [class.m-kiosk-backdrop]="kiosk()" (click)="dismiss('backdrop')"></div>
-      <div class="m-modal" [class.m-kiosk]="kiosk()" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-busy]="busy() ? 'true' : null" [attr.data-testid]="dialogTestId() || null" [style.max-width]="maxWidth()">
+      <div class="m-modal" [class.m-kiosk]="kiosk()" role="dialog" aria-modal="true" tabindex="-1" [attr.aria-labelledby]="titleId" [attr.aria-describedby]="describedById()" [attr.aria-busy]="busy() ? 'true' : null" [attr.data-testid]="dialogTestId() || null" [style.max-width]="maxWidth()">
         <span class="m-focus-guard" data-ui-focus-guard="start" tabindex="0" (focus)="onGuardFocus('start', $event)"></span>
         <div class="m-header">
           <div class="m-header-text">
             <h3 class="m-title" [id]="titleId">{{ title() }}</h3>
             @if (description()) {
-              <p class="m-description">{{ description() }}</p>
+              <p class="m-description" [id]="descId">{{ description() }}</p>
             }
           </div>
           <ng-content select="[modal-header-end]" />
@@ -2861,6 +2871,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
 		maxWidth: [{
 			type: i0.Input,
 			args: [{
@@ -6276,6 +6294,7 @@ var TableToolbarComponent = class TableToolbarComponent {
 						"open",
 						"title",
 						"description",
+						"describedBy",
 						"maxWidth",
 						"bodyOverflow",
 						"dialogTestId",
@@ -10491,6 +10510,7 @@ var ImportExportComponent = class ImportExportComponent {
 						"open",
 						"title",
 						"description",
+						"describedBy",
 						"maxWidth",
 						"bodyOverflow",
 						"dialogTestId",
@@ -10973,6 +10993,10 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 	constructor() {
 		this.svc = inject(ConfirmService);
 		this._isPrimary = computed(() => this.svc.primaryOutlet() === this, ...ngDevMode ? [{ debugName: "_isPrimary" }] : /* istanbul ignore next */ []);
+		this._uid = Math.random().toString(36).slice(2, 8);
+		this.msgId = `ui-confirm-msg-${this._uid}`;
+		this.detailsId = `ui-confirm-details-${this._uid}`;
+		this._describedBy = computed(() => this.svc.active()?.details.length ? `${this.msgId} ${this.detailsId}` : this.msgId, ...ngDevMode ? [{ debugName: "_describedBy" }] : /* istanbul ignore next */ []);
 	}
 	ngOnInit() {
 		this.svc.registerOutlet(this);
@@ -11005,10 +11029,11 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
         [open]="svc.open()"
         [title]="svc.active()!.title"
         maxWidth="420px"
+        [describedBy]="_describedBy()"
         (close)="svc.dismiss(false)">
-        <p class="confirm-msg" data-testid="confirm-message">{{ svc.active()!.message }}</p>
+        <p class="confirm-msg" data-testid="confirm-message" [id]="msgId">{{ svc.active()!.message }}</p>
         @if (svc.active()!.details.length) {
-          <ul class="confirm-details" data-testid="confirm-details" aria-label="What will happen">
+          <ul class="confirm-details" data-testid="confirm-details" aria-label="What will happen" [id]="detailsId">
             @for (d of svc.active()!.details; track $index) { <li>{{ d }}</li> }
           </ul>
         }
@@ -11036,6 +11061,7 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 					"open",
 					"title",
 					"description",
+					"describedBy",
 					"maxWidth",
 					"bodyOverflow",
 					"dialogTestId",
@@ -11101,10 +11127,11 @@ i0.ɵɵngDeclareClassMetadata({
         [open]="svc.open()"
         [title]="svc.active()!.title"
         maxWidth="420px"
+        [describedBy]="_describedBy()"
         (close)="svc.dismiss(false)">
-        <p class="confirm-msg" data-testid="confirm-message">{{ svc.active()!.message }}</p>
+        <p class="confirm-msg" data-testid="confirm-message" [id]="msgId">{{ svc.active()!.message }}</p>
         @if (svc.active()!.details.length) {
-          <ul class="confirm-details" data-testid="confirm-details" aria-label="What will happen">
+          <ul class="confirm-details" data-testid="confirm-details" aria-label="What will happen" [id]="detailsId">
             @for (d of svc.active()!.details; track $index) { <li>{{ d }}</li> }
           </ul>
         }
@@ -12365,6 +12392,9 @@ var DataTableComponent = class DataTableComponent {
 		this._confirmingBulk = false;
 		this._rowDeleteTarget = signal(null, ...ngDevMode ? [{ debugName: "_rowDeleteTarget" }] : /* istanbul ignore next */ []);
 		this._rowDeleting = signal(false, ...ngDevMode ? [{ debugName: "_rowDeleting" }] : /* istanbul ignore next */ []);
+		this._confirmUid = Math.random().toString(36).slice(2, 8);
+		this._confirmMsgId = `dt-confirm-msg-${this._confirmUid}`;
+		this._confirmDetailsId = `dt-confirm-details-${this._confirmUid}`;
 		this._rowDeleteConfig = signal({
 			title: "Delete",
 			message: "Delete this record? This cannot be undone.",
@@ -13931,10 +13961,11 @@ var DataTableComponent = class DataTableComponent {
           [open]="true"
           [title]="_rowDeleteConfig().title"
           maxWidth="420px"
+          [describedBy]="_rowDeleteConfig().details?.length ? _confirmMsgId + ' ' + _confirmDetailsId : _confirmMsgId"
           (close)="_rowDeleteTarget.set(null)">
-          <p class="dt-confirm-msg" data-testid="confirm-message">{{ _rowDeleteConfig().message }}</p>
+          <p class="dt-confirm-msg" data-testid="confirm-message" [id]="_confirmMsgId">{{ _rowDeleteConfig().message }}</p>
           @if (_rowDeleteConfig().details?.length) {
-            <ul class="dt-confirm-details" data-testid="confirm-details" aria-label="What will happen">
+            <ul class="dt-confirm-details" data-testid="confirm-details" aria-label="What will happen" [id]="_confirmDetailsId">
               @for (d of _rowDeleteConfig().details; track $index) { <li>{{ d }}</li> }
             </ul>
           }
@@ -14274,6 +14305,7 @@ var DataTableComponent = class DataTableComponent {
 						"open",
 						"title",
 						"description",
+						"describedBy",
 						"maxWidth",
 						"bodyOverflow",
 						"dialogTestId",
@@ -15014,10 +15046,11 @@ i0.ɵɵngDeclareClassMetadata({
           [open]="true"
           [title]="_rowDeleteConfig().title"
           maxWidth="420px"
+          [describedBy]="_rowDeleteConfig().details?.length ? _confirmMsgId + ' ' + _confirmDetailsId : _confirmMsgId"
           (close)="_rowDeleteTarget.set(null)">
-          <p class="dt-confirm-msg" data-testid="confirm-message">{{ _rowDeleteConfig().message }}</p>
+          <p class="dt-confirm-msg" data-testid="confirm-message" [id]="_confirmMsgId">{{ _rowDeleteConfig().message }}</p>
           @if (_rowDeleteConfig().details?.length) {
-            <ul class="dt-confirm-details" data-testid="confirm-details" aria-label="What will happen">
+            <ul class="dt-confirm-details" data-testid="confirm-details" aria-label="What will happen" [id]="_confirmDetailsId">
               @for (d of _rowDeleteConfig().details; track $index) { <li>{{ d }}</li> }
             </ul>
           }
@@ -29500,8 +29533,8 @@ var NotesComponent = class NotesComponent {
       <ui-pagination [page]="page() + 1" [pageSize]="pageSize" [totalItems]="totalElements()" (pageChange)="loadPage($event - 1)" />
     }
 
-    <ui-modal [open]="!!deletingId()" title="Delete Note" maxWidth="420px" dialogTestId="delete-note-modal" (close)="deletingId.set(null)">
-      <p class="note-delete-msg" data-testid="delete-note-message">Delete this note? It is permanently removed from this record and cannot be undone.</p>
+    <ui-modal [open]="!!deletingId()" title="Delete Note" maxWidth="420px" dialogTestId="delete-note-modal" describedBy="ui-note-delete-msg" (close)="deletingId.set(null)">
+      <p class="note-delete-msg" id="ui-note-delete-msg" data-testid="delete-note-message">Delete this note? It is permanently removed from this record and cannot be undone.</p>
       <ui-button modal-footer-left variant="secondary" size="sm" data-testid="delete-note-cancel" (click)="deletingId.set(null)">Cancel</ui-button>
       <ui-button modal-footer-right variant="danger" size="sm" data-testid="delete-note-confirm" [loading]="saving()" (click)="deleteNote()">Delete Note</ui-button>
     </ui-modal>
@@ -29575,6 +29608,7 @@ var NotesComponent = class NotesComponent {
 						"open",
 						"title",
 						"description",
+						"describedBy",
 						"maxWidth",
 						"bodyOverflow",
 						"dialogTestId",
@@ -29750,8 +29784,8 @@ i0.ɵɵngDeclareClassMetadata({
       <ui-pagination [page]="page() + 1" [pageSize]="pageSize" [totalItems]="totalElements()" (pageChange)="loadPage($event - 1)" />
     }
 
-    <ui-modal [open]="!!deletingId()" title="Delete Note" maxWidth="420px" dialogTestId="delete-note-modal" (close)="deletingId.set(null)">
-      <p class="note-delete-msg" data-testid="delete-note-message">Delete this note? It is permanently removed from this record and cannot be undone.</p>
+    <ui-modal [open]="!!deletingId()" title="Delete Note" maxWidth="420px" dialogTestId="delete-note-modal" describedBy="ui-note-delete-msg" (close)="deletingId.set(null)">
+      <p class="note-delete-msg" id="ui-note-delete-msg" data-testid="delete-note-message">Delete this note? It is permanently removed from this record and cannot be undone.</p>
       <ui-button modal-footer-left variant="secondary" size="sm" data-testid="delete-note-cancel" (click)="deletingId.set(null)">Cancel</ui-button>
       <ui-button modal-footer-right variant="danger" size="sm" data-testid="delete-note-confirm" [loading]="saving()" (click)="deleteNote()">Delete Note</ui-button>
     </ui-modal>
@@ -45250,6 +45284,7 @@ var ImageGalleryDialogComponent = class ImageGalleryDialogComponent {
 						"open",
 						"title",
 						"description",
+						"describedBy",
 						"maxWidth",
 						"bodyOverflow",
 						"dialogTestId",
@@ -52522,6 +52557,17 @@ var ConversationsComponent = class ConversationsComponent {
 		this.send = output();
 		this.filesSelected = output();
 		this.attachmentRemove = output();
+		this.linkGroups = input(null, ...ngDevMode ? [{ debugName: "linkGroups" }] : /* istanbul ignore next */ []);
+		this.linkLoading = input(false, ...ngDevMode ? [{ debugName: "linkLoading" }] : /* istanbul ignore next */ []);
+		this.link = model(null, ...ngDevMode ? [{ debugName: "link" }] : /* istanbul ignore next */ []);
+		this.linkLabel = input("Link a record", ...ngDevMode ? [{ debugName: "linkLabel" }] : /* istanbul ignore next */ []);
+		this.linkPickerTitle = input("Link a Record", ...ngDevMode ? [{ debugName: "linkPickerTitle" }] : /* istanbul ignore next */ []);
+		this.linkSearchPlaceholder = input("Search...", ...ngDevMode ? [{ debugName: "linkSearchPlaceholder" }] : /* istanbul ignore next */ []);
+		this.linkSearchLabel = input("Search records", ...ngDevMode ? [{ debugName: "linkSearchLabel" }] : /* istanbul ignore next */ []);
+		this.linkEmptyText = input("No records found.", ...ngDevMode ? [{ debugName: "linkEmptyText" }] : /* istanbul ignore next */ []);
+		this.linkLoadingText = input("Loading...", ...ngDevMode ? [{ debugName: "linkLoadingText" }] : /* istanbul ignore next */ []);
+		this.removeLinkLabel = input("Remove link", ...ngDevMode ? [{ debugName: "removeLinkLabel" }] : /* istanbul ignore next */ []);
+		this.linkPickerOpened = output();
 		this.mediaOpen = output();
 		this.messageAction = output();
 		this.loadEarlier = output();
@@ -52555,7 +52601,18 @@ var ConversationsComponent = class ConversationsComponent {
 		this.emptyText = computed(() => this.filtering() ? this.filteredEmptyMessage() : this.canWrite() ? this.emptyMessage() : this.emptyReadOnlyMessage(), ...ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []);
 		this.messageRows = computed(() => groupMessagesByDay(this.messages(), this.clock()), ...ngDevMode ? [{ debugName: "messageRows" }] : /* istanbul ignore next */ []);
 		this.contextVisible = computed(() => this.hasContext() && this.contextOpen() && !!this.selected(), ...ngDevMode ? [{ debugName: "contextVisible" }] : /* istanbul ignore next */ []);
-		this.canSend = computed(() => !this.composerDisabled() && !this.sendBlocked() && !this.sending() && (this.draft().trim().length > 0 || !!this.attachment()) && this.draft().trim().length <= this.maxLength(), ...ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []);
+		this.canSend = computed(() => !this.composerDisabled() && !this.sendBlocked() && !this.sending() && (this.draft().trim().length > 0 || !!this.attachment() || !!this.link()) && this.draft().trim().length <= this.maxLength(), ...ngDevMode ? [{ debugName: "canSend" }] : /* istanbul ignore next */ []);
+		this.pickerOpen = signal(false, ...ngDevMode ? [{ debugName: "pickerOpen" }] : /* istanbul ignore next */ []);
+		this.linkQuery = signal("", ...ngDevMode ? [{ debugName: "linkQuery" }] : /* istanbul ignore next */ []);
+		this.visibleLinkGroups = computed(() => {
+			const q = this.linkQuery().trim().toLowerCase();
+			const groups = this.linkGroups() ?? [];
+			if (!q) return groups.filter((g) => g.items.length > 0);
+			return groups.map((g) => ({
+				...g,
+				items: g.items.filter((i) => i.label.toLowerCase().includes(q))
+			})).filter((g) => g.items.length > 0);
+		}, ...ngDevMode ? [{ debugName: "visibleLinkGroups" }] : /* istanbul ignore next */ []);
 		this.editorHtml = signal("", ...ngDevMode ? [{ debugName: "editorHtml" }] : /* istanbul ignore next */ []);
 		this.richHide = RICH_COMPOSER_HIDE;
 		effect(() => {
@@ -52632,10 +52689,31 @@ var ConversationsComponent = class ConversationsComponent {
 	}
 	sendMessage() {
 		if (!this.canSend()) return;
-		this.send.emit(this.richText() ? {
+		const link = this.link();
+		const base = this.richText() ? {
 			text: this.draft().trim(),
 			html: sanitizeRichTextHtml(this.editorHtml(), { mode: "paste" })
-		} : { text: this.draft().trim() });
+		} : { text: this.draft().trim() };
+		this.send.emit(link ? {
+			...base,
+			link
+		} : base);
+	}
+	openLinkPicker() {
+		this.linkQuery.set("");
+		this.pickerOpen.set(true);
+		this.linkPickerOpened.emit();
+	}
+	closeLinkPicker() {
+		this.pickerOpen.set(false);
+	}
+	pickLink(group, item) {
+		this.link.set({
+			type: group.type,
+			id: item.id,
+			label: item.label
+		});
+		this.pickerOpen.set(false);
 	}
 	clock() {
 		return this.now() ?? /* @__PURE__ */ new Date();
@@ -53261,6 +53339,76 @@ var ConversationsComponent = class ConversationsComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				linkGroups: {
+					classPropertyName: "linkGroups",
+					publicName: "linkGroups",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkLoading: {
+					classPropertyName: "linkLoading",
+					publicName: "linkLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				link: {
+					classPropertyName: "link",
+					publicName: "link",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkLabel: {
+					classPropertyName: "linkLabel",
+					publicName: "linkLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkPickerTitle: {
+					classPropertyName: "linkPickerTitle",
+					publicName: "linkPickerTitle",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkSearchPlaceholder: {
+					classPropertyName: "linkSearchPlaceholder",
+					publicName: "linkSearchPlaceholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkSearchLabel: {
+					classPropertyName: "linkSearchLabel",
+					publicName: "linkSearchLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkEmptyText: {
+					classPropertyName: "linkEmptyText",
+					publicName: "linkEmptyText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				linkLoadingText: {
+					classPropertyName: "linkLoadingText",
+					publicName: "linkLoadingText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				removeLinkLabel: {
+					classPropertyName: "removeLinkLabel",
+					publicName: "removeLinkLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: {
@@ -53280,6 +53428,8 @@ var ConversationsComponent = class ConversationsComponent {
 				send: "send",
 				filesSelected: "filesSelected",
 				attachmentRemove: "attachmentRemove",
+				link: "linkChange",
+				linkPickerOpened: "linkPickerOpened",
 				mediaOpen: "mediaOpen",
 				messageAction: "messageAction",
 				loadEarlier: "loadEarlier",
@@ -53495,6 +53645,13 @@ var ConversationsComponent = class ConversationsComponent {
                   }
                   @if (row.message.bodyHtml) { <ui-conversation-rich-body [html]="row.message.bodyHtml" data-testid="msg-rich-body" /> }
                   @else if (row.message.body) { <p class="cv-body">{{ row.message.body }}</p> }
+                  @if (row.message.link; as msgLink) {
+                    @if (msgLink.url) {
+                      <a class="cv-link-chip" [href]="msgLink.url" data-testid="msg-link"><svg class="cv-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg><span class="cv-link-label">{{ msgLink.label }}</span></a>
+                    } @else {
+                      <span class="cv-link-chip" data-testid="msg-link"><svg class="cv-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg><span class="cv-link-label">{{ msgLink.label }}</span></span>
+                    }
+                  }
                   <span class="cv-meta">
                     @if (row.message.sender) { <span class="cv-sender" data-testid="msg-sender">{{ row.message.sender }}</span> }
                     {{ time(row.message) }}
@@ -53527,7 +53684,20 @@ var ConversationsComponent = class ConversationsComponent {
                   </ui-button>
                 </div>
               }
+              @if (link(); as chosen) {
+                <div class="cv-link-preview" data-testid="link-preview">
+                  <span class="cv-link-chip cv-link-chip-compose"><svg class="cv-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg><span class="cv-link-label" data-testid="link-preview-label">{{ chosen.label }}</span></span>
+                  <ui-button class="cv-link-remove" variant="icon-danger" [ariaLabel]="removeLinkLabel()" [disabled]="sending()" (click)="link.set(null)" data-testid="link-remove">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </ui-button>
+                </div>
+              }
               <div class="cv-compose-row">
+                @if (linkGroups() !== null) {
+                  <ui-button class="cv-link-btn" variant="icon" [ariaLabel]="linkLabel()" [uiTooltip]="linkLabel()" [disabled]="sending() || composerDisabled()" (click)="openLinkPicker()" data-testid="link-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>
+                  </ui-button>
+                }
                 @if (attachEnabled()) {
                   <ui-button class="cv-attach-btn" variant="icon" [ariaLabel]="attachLabel()" [disabled]="uploading() || composerDisabled()" [loading]="uploading()" (click)="openFilePicker()" data-testid="attach-btn">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
@@ -53560,6 +53730,28 @@ var ConversationsComponent = class ConversationsComponent {
         }
       </section>
 
+      @if (linkGroups() !== null) {
+        <ui-modal [open]="pickerOpen()" [title]="linkPickerTitle()" maxWidth="480px" bodyOverflow="hidden" dialogTestId="link-picker" (close)="closeLinkPicker()">
+          <ui-search-input [placeholder]="linkSearchPlaceholder()" [ariaLabel]="linkSearchLabel()" [(value)]="linkQuery" data-testid="link-search" />
+          <div class="cv-link-list" data-testid="link-list">
+            @if (linkLoading()) {
+              <p class="cv-link-note" role="status" data-testid="link-loading">{{ linkLoadingText() }}</p>
+            } @else if (visibleLinkGroups().length === 0) {
+              <p class="cv-link-note" data-testid="link-empty">{{ linkEmptyText() }}</p>
+            } @else {
+              @for (group of visibleLinkGroups(); track group.type) {
+                <div class="cv-link-section" role="group" [attr.aria-label]="group.label" data-testid="link-section">
+                  <div class="cv-link-section-label" aria-hidden="true">{{ group.label }}</div>
+                  @for (item of group.items; track item.id) {
+                    <button type="button" class="cv-link-item" data-testid="link-item" (click)="pickLink(group, item)">{{ item.label }}</button>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </ui-modal>
+      }
+
       <!-- RIGHT: contact panel (the host's content) -->
       @if (contextVisible()) {
         <aside class="cv-context" #contextPanel tabindex="-1" [attr.aria-label]="contextTitle()" (keydown.escape)="closeContext(true)" data-testid="context-panel">
@@ -53575,7 +53767,7 @@ var ConversationsComponent = class ConversationsComponent {
     </div>
   `,
 			isInline: true,
-			styles: [":host{display:flex;flex:1;min-height:0;min-width:0}.cv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cv-layout{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000f;border:1px solid #e2e8f0}.cv-layout.has-context{grid-template-columns:340px 1fr 280px}.cv-list-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e2e8f0;background:#f8fafc;overflow:hidden}.cv-list-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}.cv-list-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e293b}.cv-search,.cv-filters{padding:0 16px 12px}.cv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cv-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s}.cv-item.unread{background:#fffbeb}.cv-item.selected{background:#eff6ff;box-shadow:inset 3px 0 #2563eb}.cv-item-info{flex:1;min-width:0}.cv-row-arrow{flex:0 0 auto;align-self:center;color:#94a3b8}.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cv-name{font-size:.875rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-time{font-size:.6875rem;color:#64748b;flex-shrink:0;margin-left:8px}.cv-subtitle{font-size:.6875rem;color:#64748b;display:block;margin-bottom:2px}.cv-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.cv-preview{margin:0;font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cv-item-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.cv-delete-btn{opacity:0;transition:opacity .15s}.cv-item:hover .cv-delete-btn,.cv-item:focus-within .cv-delete-btn,.cv-delete-btn:focus-within{opacity:1}@media(hover:none){.cv-delete-btn{opacity:1}}.cv-loading{padding:8px 0}.cv-skeleton{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #f1f5f9}.cv-skel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.cv-skel-row{display:flex;justify-content:space-between;gap:8px}.cv-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-thread-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.cv-thread-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.cv-back-btn{display:none}.cv-thread-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cv-thread-header-text{min-width:0;display:flex;flex-direction:column}.cv-thread-name{margin:0;font-size:.9375rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-thread-name:focus{outline:none}.cv-thread-name:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}.cv-thread-subtitle{font-size:.75rem;color:#64748b}.cv-thread-actions{display:flex;align-items:center;gap:8px}.cv-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.cv-messages:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-messages-loading{display:flex;flex-direction:column;gap:12px;padding:20px 0}.cv-msg-skeleton{display:flex}.cv-msg-skeleton.outbound{justify-content:flex-end}.cv-messages-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-load-earlier{display:flex;justify-content:center;padding:4px 0 12px}.cv-sender{font-weight:600}.cv-msg-action{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.cv-msg-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}.cv-messages-empty{display:flex;align-items:center;justify-content:center;flex:1}.cv-messages-empty p{margin:0;font-size:.875rem;color:#64748b;text-align:center}.cv-date-separator{display:flex;align-items:center;justify-content:center;padding:16px 0 8px}.cv-date-separator span{padding:4px 14px;border-radius:12px;background:#e2e8f0;font-size:.6875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px}.cv-bubble{max-width:70%;padding:10px 14px;border-radius:16px;position:relative;word-break:break-word;overflow-wrap:break-word}.cv-bubble.inbound{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.cv-bubble.inbound .cv-body,.cv-bubble.inbound .cv-rich{color:#1e293b}.cv-bubble.inbound .cv-meta{color:#64748b}.cv-bubble.outbound{align-self:flex-end;background:#2563eb;border-bottom-right-radius:4px}.cv-bubble.outbound .cv-body,.cv-bubble.outbound .cv-rich,.cv-bubble.outbound .cv-meta{color:#fff}@media(prefers-reduced-motion:no-preference){.cv-bubble{animation:cv-appear .2s ease}.cv-context{animation:cv-slide-in .25s ease}}.cv-body{margin:0;font-size:.875rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.cv-media{margin-bottom:6px}.cv-image-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}.cv-image-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #2563eb}.cv-image{display:block;max-width:240px;max-height:240px;border-radius:8px;object-fit:cover}.cv-video{max-width:240px;max-height:200px;border-radius:8px}.cv-file-link{font-size:.8125rem;color:#fff;text-decoration:underline}.cv-bubble.inbound .cv-file-link{color:#2563eb}.cv-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.6875rem;margin-top:4px}.cv-status{font-weight:500}.cv-status.failed{color:#fff;font-weight:700}.cv-bubble.inbound .cv-status.failed{color:#dc2626}.cv-compose{display:flex;flex-direction:column;padding:12px 20px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#fff}.cv-compose-row{display:flex;align-items:flex-end;gap:10px}.cv-compose-input{flex:1;min-width:0}.cv-attach-btn,.cv-send-btn{flex-shrink:0}.cv-attachment{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.cv-attachment-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px}.cv-attachment-name{font-size:.8125rem;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-attachment-remove{flex-shrink:0}.cv-compose-status{margin:4px 0 0;font-size:.8125rem;color:#64748b}.cv-compose-status:empty{margin:0}.cv-context-backdrop{display:none}.cv-context{width:100%;min-width:0;border-left:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.cv-context-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}.cv-context-header h3{margin:0;font-size:.875rem;font-weight:700;color:#1e293b}.cv-context-body{padding:20px;display:flex;flex-direction:column;gap:16px}@keyframes cv-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cv-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1100px){.cv-layout.has-context{grid-template-columns:280px 1fr 240px}}@media(max-width:768px){.cv-layout,.cv-layout.has-context{grid-template-columns:1fr;height:100%}.cv-hidden-mobile{display:none!important}.cv-back-btn{display:inline-flex}.cv-context-backdrop{display:block;position:fixed;inset:0;background:#00000059;z-index:99}.cv-context{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:100;box-shadow:-4px 0 20px #0000001a}.cv-bubble{max-width:85%}.cv-messages,.cv-thread-header{padding:12px 16px}}@media(max-width:480px){.cv-thread-subtitle{display:none}.cv-compose{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.cv-compose-row{flex-wrap:wrap}.cv-compose-input{order:-1;flex:1 1 100%}.cv-send-btn{margin-inline-start:auto}.cv-list-header{padding:12px 16px 10px}.cv-context{width:100%;max-width:100vw}}\n"],
+			styles: [":host{display:flex;flex:1;min-height:0;min-width:0}.cv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cv-layout{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000f;border:1px solid #e2e8f0}.cv-layout.has-context{grid-template-columns:340px 1fr 280px}.cv-list-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e2e8f0;background:#f8fafc;overflow:hidden}.cv-list-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}.cv-list-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e293b}.cv-search,.cv-filters{padding:0 16px 12px}.cv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cv-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s}.cv-item.unread{background:#fffbeb}.cv-item.selected{background:#eff6ff;box-shadow:inset 3px 0 #2563eb}.cv-item-info{flex:1;min-width:0}.cv-row-arrow{flex:0 0 auto;align-self:center;color:#94a3b8}.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cv-name{font-size:.875rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-time{font-size:.6875rem;color:#64748b;flex-shrink:0;margin-left:8px}.cv-subtitle{font-size:.6875rem;color:#64748b;display:block;margin-bottom:2px}.cv-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.cv-preview{margin:0;font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cv-item-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.cv-delete-btn{opacity:0;transition:opacity .15s}.cv-item:hover .cv-delete-btn,.cv-item:focus-within .cv-delete-btn,.cv-delete-btn:focus-within{opacity:1}@media(hover:none){.cv-delete-btn{opacity:1}}.cv-loading{padding:8px 0}.cv-skeleton{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #f1f5f9}.cv-skel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.cv-skel-row{display:flex;justify-content:space-between;gap:8px}.cv-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-thread-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.cv-thread-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.cv-back-btn{display:none}.cv-thread-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cv-thread-header-text{min-width:0;display:flex;flex-direction:column}.cv-thread-name{margin:0;font-size:.9375rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-thread-name:focus{outline:none}.cv-thread-name:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}.cv-thread-subtitle{font-size:.75rem;color:#64748b}.cv-thread-actions{display:flex;align-items:center;gap:8px}.cv-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.cv-messages:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-messages-loading{display:flex;flex-direction:column;gap:12px;padding:20px 0}.cv-msg-skeleton{display:flex}.cv-msg-skeleton.outbound{justify-content:flex-end}.cv-messages-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-load-earlier{display:flex;justify-content:center;padding:4px 0 12px}.cv-sender{font-weight:600}.cv-link-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:6px;padding:3px 10px;border-radius:999px;border:1px solid transparent;font-size:.8rem;font-weight:600;text-decoration:none}.cv-link-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.cv-link-icon{flex:none}.cv-bubble.inbound .cv-link-chip{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.cv-bubble.outbound .cv-link-chip{background:#ffffff2e;border-color:#ffffff73;color:#fff}.cv-link-chip:is(a):hover{filter:brightness(.96);text-decoration:underline}.cv-link-chip:is(a):focus-visible{outline:2px solid currentColor;outline-offset:2px}.cv-link-preview{display:flex;align-items:center;gap:4px;margin-bottom:8px}.cv-link-chip-compose{margin-top:0;background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.cv-link-list{display:flex;flex-direction:column;gap:4px;margin-top:12px;max-height:320px;overflow-y:auto}.cv-link-section-label{padding:8px 4px 4px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b}.cv-link-item{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;text-align:start;font:inherit;font-size:.875rem;color:#1e293b;cursor:pointer}.cv-link-item:hover{background:#f1f5f9}.cv-link-item:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-link-note{margin:16px 0;text-align:center;font-size:.875rem;color:#64748b}@media(pointer:coarse),(max-width:480px){.cv-link-item{min-height:44px}}.cv-msg-action{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.cv-msg-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}.cv-messages-empty{display:flex;align-items:center;justify-content:center;flex:1}.cv-messages-empty p{margin:0;font-size:.875rem;color:#64748b;text-align:center}.cv-date-separator{display:flex;align-items:center;justify-content:center;padding:16px 0 8px}.cv-date-separator span{padding:4px 14px;border-radius:12px;background:#e2e8f0;font-size:.6875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px}.cv-bubble{max-width:70%;padding:10px 14px;border-radius:16px;position:relative;word-break:break-word;overflow-wrap:break-word}.cv-bubble.inbound{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.cv-bubble.inbound .cv-body,.cv-bubble.inbound .cv-rich{color:#1e293b}.cv-bubble.inbound .cv-meta{color:#64748b}.cv-bubble.outbound{align-self:flex-end;background:#2563eb;border-bottom-right-radius:4px}.cv-bubble.outbound .cv-body,.cv-bubble.outbound .cv-rich,.cv-bubble.outbound .cv-meta{color:#fff}@media(prefers-reduced-motion:no-preference){.cv-bubble{animation:cv-appear .2s ease}.cv-context{animation:cv-slide-in .25s ease}}.cv-body{margin:0;font-size:.875rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.cv-media{margin-bottom:6px}.cv-image-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}.cv-image-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #2563eb}.cv-image{display:block;max-width:240px;max-height:240px;border-radius:8px;object-fit:cover}.cv-video{max-width:240px;max-height:200px;border-radius:8px}.cv-file-link{font-size:.8125rem;color:#fff;text-decoration:underline}.cv-bubble.inbound .cv-file-link{color:#2563eb}.cv-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.6875rem;margin-top:4px}.cv-status{font-weight:500}.cv-status.failed{color:#fff;font-weight:700}.cv-bubble.inbound .cv-status.failed{color:#dc2626}.cv-compose{display:flex;flex-direction:column;padding:12px 20px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#fff}.cv-compose-row{display:flex;align-items:flex-end;gap:10px}.cv-compose-input{flex:1;min-width:0}.cv-attach-btn,.cv-send-btn{flex-shrink:0}.cv-attachment{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.cv-attachment-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px}.cv-attachment-name{font-size:.8125rem;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-attachment-remove{flex-shrink:0}.cv-compose-status{margin:4px 0 0;font-size:.8125rem;color:#64748b}.cv-compose-status:empty{margin:0}.cv-context-backdrop{display:none}.cv-context{width:100%;min-width:0;border-left:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.cv-context-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}.cv-context-header h3{margin:0;font-size:.875rem;font-weight:700;color:#1e293b}.cv-context-body{padding:20px;display:flex;flex-direction:column;gap:16px}@keyframes cv-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cv-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1100px){.cv-layout.has-context{grid-template-columns:280px 1fr 240px}}@media(max-width:768px){.cv-layout,.cv-layout.has-context{grid-template-columns:1fr;height:100%}.cv-hidden-mobile{display:none!important}.cv-back-btn{display:inline-flex}.cv-context-backdrop{display:block;position:fixed;inset:0;background:#00000059;z-index:99}.cv-context{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:100;box-shadow:-4px 0 20px #0000001a}.cv-bubble{max-width:85%}.cv-messages,.cv-thread-header{padding:12px 16px}}@media(max-width:480px){.cv-thread-subtitle{display:none}.cv-compose{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.cv-compose-row{flex-wrap:wrap}.cv-compose-input{order:-1;flex:1 1 100%}.cv-send-btn{margin-inline-start:auto}.cv-list-header{padding:12px 16px 10px}.cv-context{width:100%;max-width:100vw}}\n"],
 			dependencies: [
 				{
 					kind: "ngmodule",
@@ -53861,6 +54053,28 @@ var ConversationsComponent = class ConversationsComponent {
 					type: ConversationRichBodyComponent,
 					selector: "ui-conversation-rich-body",
 					inputs: ["html"]
+				},
+				{
+					kind: "component",
+					type: ModalComponent,
+					selector: "ui-modal",
+					inputs: [
+						"open",
+						"title",
+						"description",
+						"describedBy",
+						"maxWidth",
+						"bodyOverflow",
+						"dialogTestId",
+						"hideClose",
+						"closable",
+						"layout",
+						"closeOnBackdrop",
+						"closeOnEscape",
+						"busy",
+						"returnFocusTo"
+					],
+					outputs: ["close"]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
@@ -53894,7 +54108,8 @@ i0.ɵɵngDeclareClassMetadata({
 				SkeletonComponent,
 				TextareaInputComponent,
 				TooltipDirective,
-				ConversationRichBodyComponent
+				ConversationRichBodyComponent,
+				ModalComponent
 			],
 			template: `
     <div class="cv-layout" [class.has-context]="contextVisible()" data-testid="conversations">
@@ -54075,6 +54290,13 @@ i0.ɵɵngDeclareClassMetadata({
                   }
                   @if (row.message.bodyHtml) { <ui-conversation-rich-body [html]="row.message.bodyHtml" data-testid="msg-rich-body" /> }
                   @else if (row.message.body) { <p class="cv-body">{{ row.message.body }}</p> }
+                  @if (row.message.link; as msgLink) {
+                    @if (msgLink.url) {
+                      <a class="cv-link-chip" [href]="msgLink.url" data-testid="msg-link"><svg class="cv-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg><span class="cv-link-label">{{ msgLink.label }}</span></a>
+                    } @else {
+                      <span class="cv-link-chip" data-testid="msg-link"><svg class="cv-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg><span class="cv-link-label">{{ msgLink.label }}</span></span>
+                    }
+                  }
                   <span class="cv-meta">
                     @if (row.message.sender) { <span class="cv-sender" data-testid="msg-sender">{{ row.message.sender }}</span> }
                     {{ time(row.message) }}
@@ -54107,7 +54329,20 @@ i0.ɵɵngDeclareClassMetadata({
                   </ui-button>
                 </div>
               }
+              @if (link(); as chosen) {
+                <div class="cv-link-preview" data-testid="link-preview">
+                  <span class="cv-link-chip cv-link-chip-compose"><svg class="cv-link-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg><span class="cv-link-label" data-testid="link-preview-label">{{ chosen.label }}</span></span>
+                  <ui-button class="cv-link-remove" variant="icon-danger" [ariaLabel]="removeLinkLabel()" [disabled]="sending()" (click)="link.set(null)" data-testid="link-remove">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </ui-button>
+                </div>
+              }
               <div class="cv-compose-row">
+                @if (linkGroups() !== null) {
+                  <ui-button class="cv-link-btn" variant="icon" [ariaLabel]="linkLabel()" [uiTooltip]="linkLabel()" [disabled]="sending() || composerDisabled()" (click)="openLinkPicker()" data-testid="link-btn">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.5-1.5"/></svg>
+                  </ui-button>
+                }
                 @if (attachEnabled()) {
                   <ui-button class="cv-attach-btn" variant="icon" [ariaLabel]="attachLabel()" [disabled]="uploading() || composerDisabled()" [loading]="uploading()" (click)="openFilePicker()" data-testid="attach-btn">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
@@ -54140,6 +54375,28 @@ i0.ɵɵngDeclareClassMetadata({
         }
       </section>
 
+      @if (linkGroups() !== null) {
+        <ui-modal [open]="pickerOpen()" [title]="linkPickerTitle()" maxWidth="480px" bodyOverflow="hidden" dialogTestId="link-picker" (close)="closeLinkPicker()">
+          <ui-search-input [placeholder]="linkSearchPlaceholder()" [ariaLabel]="linkSearchLabel()" [(value)]="linkQuery" data-testid="link-search" />
+          <div class="cv-link-list" data-testid="link-list">
+            @if (linkLoading()) {
+              <p class="cv-link-note" role="status" data-testid="link-loading">{{ linkLoadingText() }}</p>
+            } @else if (visibleLinkGroups().length === 0) {
+              <p class="cv-link-note" data-testid="link-empty">{{ linkEmptyText() }}</p>
+            } @else {
+              @for (group of visibleLinkGroups(); track group.type) {
+                <div class="cv-link-section" role="group" [attr.aria-label]="group.label" data-testid="link-section">
+                  <div class="cv-link-section-label" aria-hidden="true">{{ group.label }}</div>
+                  @for (item of group.items; track item.id) {
+                    <button type="button" class="cv-link-item" data-testid="link-item" (click)="pickLink(group, item)">{{ item.label }}</button>
+                  }
+                </div>
+              }
+            }
+          </div>
+        </ui-modal>
+      }
+
       <!-- RIGHT: contact panel (the host's content) -->
       @if (contextVisible()) {
         <aside class="cv-context" #contextPanel tabindex="-1" [attr.aria-label]="contextTitle()" (keydown.escape)="closeContext(true)" data-testid="context-panel">
@@ -54154,7 +54411,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: [":host{display:flex;flex:1;min-height:0;min-width:0}.cv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cv-layout{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000f;border:1px solid #e2e8f0}.cv-layout.has-context{grid-template-columns:340px 1fr 280px}.cv-list-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e2e8f0;background:#f8fafc;overflow:hidden}.cv-list-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}.cv-list-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e293b}.cv-search,.cv-filters{padding:0 16px 12px}.cv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cv-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s}.cv-item.unread{background:#fffbeb}.cv-item.selected{background:#eff6ff;box-shadow:inset 3px 0 #2563eb}.cv-item-info{flex:1;min-width:0}.cv-row-arrow{flex:0 0 auto;align-self:center;color:#94a3b8}.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cv-name{font-size:.875rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-time{font-size:.6875rem;color:#64748b;flex-shrink:0;margin-left:8px}.cv-subtitle{font-size:.6875rem;color:#64748b;display:block;margin-bottom:2px}.cv-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.cv-preview{margin:0;font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cv-item-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.cv-delete-btn{opacity:0;transition:opacity .15s}.cv-item:hover .cv-delete-btn,.cv-item:focus-within .cv-delete-btn,.cv-delete-btn:focus-within{opacity:1}@media(hover:none){.cv-delete-btn{opacity:1}}.cv-loading{padding:8px 0}.cv-skeleton{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #f1f5f9}.cv-skel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.cv-skel-row{display:flex;justify-content:space-between;gap:8px}.cv-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-thread-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.cv-thread-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.cv-back-btn{display:none}.cv-thread-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cv-thread-header-text{min-width:0;display:flex;flex-direction:column}.cv-thread-name{margin:0;font-size:.9375rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-thread-name:focus{outline:none}.cv-thread-name:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}.cv-thread-subtitle{font-size:.75rem;color:#64748b}.cv-thread-actions{display:flex;align-items:center;gap:8px}.cv-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.cv-messages:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-messages-loading{display:flex;flex-direction:column;gap:12px;padding:20px 0}.cv-msg-skeleton{display:flex}.cv-msg-skeleton.outbound{justify-content:flex-end}.cv-messages-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-load-earlier{display:flex;justify-content:center;padding:4px 0 12px}.cv-sender{font-weight:600}.cv-msg-action{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.cv-msg-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}.cv-messages-empty{display:flex;align-items:center;justify-content:center;flex:1}.cv-messages-empty p{margin:0;font-size:.875rem;color:#64748b;text-align:center}.cv-date-separator{display:flex;align-items:center;justify-content:center;padding:16px 0 8px}.cv-date-separator span{padding:4px 14px;border-radius:12px;background:#e2e8f0;font-size:.6875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px}.cv-bubble{max-width:70%;padding:10px 14px;border-radius:16px;position:relative;word-break:break-word;overflow-wrap:break-word}.cv-bubble.inbound{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.cv-bubble.inbound .cv-body,.cv-bubble.inbound .cv-rich{color:#1e293b}.cv-bubble.inbound .cv-meta{color:#64748b}.cv-bubble.outbound{align-self:flex-end;background:#2563eb;border-bottom-right-radius:4px}.cv-bubble.outbound .cv-body,.cv-bubble.outbound .cv-rich,.cv-bubble.outbound .cv-meta{color:#fff}@media(prefers-reduced-motion:no-preference){.cv-bubble{animation:cv-appear .2s ease}.cv-context{animation:cv-slide-in .25s ease}}.cv-body{margin:0;font-size:.875rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.cv-media{margin-bottom:6px}.cv-image-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}.cv-image-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #2563eb}.cv-image{display:block;max-width:240px;max-height:240px;border-radius:8px;object-fit:cover}.cv-video{max-width:240px;max-height:200px;border-radius:8px}.cv-file-link{font-size:.8125rem;color:#fff;text-decoration:underline}.cv-bubble.inbound .cv-file-link{color:#2563eb}.cv-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.6875rem;margin-top:4px}.cv-status{font-weight:500}.cv-status.failed{color:#fff;font-weight:700}.cv-bubble.inbound .cv-status.failed{color:#dc2626}.cv-compose{display:flex;flex-direction:column;padding:12px 20px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#fff}.cv-compose-row{display:flex;align-items:flex-end;gap:10px}.cv-compose-input{flex:1;min-width:0}.cv-attach-btn,.cv-send-btn{flex-shrink:0}.cv-attachment{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.cv-attachment-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px}.cv-attachment-name{font-size:.8125rem;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-attachment-remove{flex-shrink:0}.cv-compose-status{margin:4px 0 0;font-size:.8125rem;color:#64748b}.cv-compose-status:empty{margin:0}.cv-context-backdrop{display:none}.cv-context{width:100%;min-width:0;border-left:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.cv-context-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}.cv-context-header h3{margin:0;font-size:.875rem;font-weight:700;color:#1e293b}.cv-context-body{padding:20px;display:flex;flex-direction:column;gap:16px}@keyframes cv-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cv-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1100px){.cv-layout.has-context{grid-template-columns:280px 1fr 240px}}@media(max-width:768px){.cv-layout,.cv-layout.has-context{grid-template-columns:1fr;height:100%}.cv-hidden-mobile{display:none!important}.cv-back-btn{display:inline-flex}.cv-context-backdrop{display:block;position:fixed;inset:0;background:#00000059;z-index:99}.cv-context{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:100;box-shadow:-4px 0 20px #0000001a}.cv-bubble{max-width:85%}.cv-messages,.cv-thread-header{padding:12px 16px}}@media(max-width:480px){.cv-thread-subtitle{display:none}.cv-compose{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.cv-compose-row{flex-wrap:wrap}.cv-compose-input{order:-1;flex:1 1 100%}.cv-send-btn{margin-inline-start:auto}.cv-list-header{padding:12px 16px 10px}.cv-context{width:100%;max-width:100vw}}\n"]
+			styles: [":host{display:flex;flex:1;min-height:0;min-width:0}.cv-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.cv-layout{display:grid;grid-template-columns:340px 1fr;flex:1;min-height:0;min-width:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000000f;border:1px solid #e2e8f0}.cv-layout.has-context{grid-template-columns:340px 1fr 280px}.cv-list-panel{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e2e8f0;background:#f8fafc;overflow:hidden}.cv-list-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}.cv-list-title{margin:0;font-size:1.125rem;font-weight:700;color:#1e293b}.cv-search,.cv-filters{padding:0 16px 12px}.cv-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.cv-item{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid #f1f5f9;transition:background .15s}.cv-item.unread{background:#fffbeb}.cv-item.selected{background:#eff6ff;box-shadow:inset 3px 0 #2563eb}.cv-item-info{flex:1;min-width:0}.cv-row-arrow{flex:0 0 auto;align-self:center;color:#94a3b8}.cv-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.cv-name{font-size:.875rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-time{font-size:.6875rem;color:#64748b;flex-shrink:0;margin-left:8px}.cv-subtitle{font-size:.6875rem;color:#64748b;display:block;margin-bottom:2px}.cv-item-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}.cv-preview{margin:0;font-size:.8125rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.cv-item-right{display:flex;align-items:center;gap:6px;flex-shrink:0}.cv-delete-btn{opacity:0;transition:opacity .15s}.cv-item:hover .cv-delete-btn,.cv-item:focus-within .cv-delete-btn,.cv-delete-btn:focus-within{opacity:1}@media(hover:none){.cv-delete-btn{opacity:1}}.cv-loading{padding:8px 0}.cv-skeleton{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-bottom:1px solid #f1f5f9}.cv-skel-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-top:2px}.cv-skel-row{display:flex;justify-content:space-between;gap:8px}.cv-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-thread-panel{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#fff}.cv-thread-header{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.cv-back-btn{display:none}.cv-thread-header-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.cv-thread-header-text{min-width:0;display:flex;flex-direction:column}.cv-thread-name{margin:0;font-size:.9375rem;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cv-thread-name:focus{outline:none}.cv-thread-name:focus-visible{outline:2px solid #2563eb;outline-offset:2px;border-radius:4px}.cv-thread-subtitle{font-size:.75rem;color:#64748b}.cv-thread-actions{display:flex;align-items:center;gap:8px}.cv-messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:20px 24px;display:flex;flex-direction:column;gap:4px;background:#f8fafc}.cv-messages:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-messages-loading{display:flex;flex-direction:column;gap:12px;padding:20px 0}.cv-msg-skeleton{display:flex}.cv-msg-skeleton.outbound{justify-content:flex-end}.cv-messages-error{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 16px;text-align:center}.cv-load-earlier{display:flex;justify-content:center;padding:4px 0 12px}.cv-sender{font-weight:600}.cv-link-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:6px;padding:3px 10px;border-radius:999px;border:1px solid transparent;font-size:.8rem;font-weight:600;text-decoration:none}.cv-link-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.cv-link-icon{flex:none}.cv-bubble.inbound .cv-link-chip{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.cv-bubble.outbound .cv-link-chip{background:#ffffff2e;border-color:#ffffff73;color:#fff}.cv-link-chip:is(a):hover{filter:brightness(.96);text-decoration:underline}.cv-link-chip:is(a):focus-visible{outline:2px solid currentColor;outline-offset:2px}.cv-link-preview{display:flex;align-items:center;gap:4px;margin-bottom:8px}.cv-link-chip-compose{margin-top:0;background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}.cv-link-list{display:flex;flex-direction:column;gap:4px;margin-top:12px;max-height:320px;overflow-y:auto}.cv-link-section-label{padding:8px 4px 4px;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#64748b}.cv-link-item{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;text-align:start;font:inherit;font-size:.875rem;color:#1e293b;cursor:pointer}.cv-link-item:hover{background:#f1f5f9}.cv-link-item:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.cv-link-note{margin:16px 0;text-align:center;font-size:.875rem;color:#64748b}@media(pointer:coarse),(max-width:480px){.cv-link-item{min-height:44px}}.cv-msg-action{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}.cv-msg-action:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}.cv-messages-empty{display:flex;align-items:center;justify-content:center;flex:1}.cv-messages-empty p{margin:0;font-size:.875rem;color:#64748b;text-align:center}.cv-date-separator{display:flex;align-items:center;justify-content:center;padding:16px 0 8px}.cv-date-separator span{padding:4px 14px;border-radius:12px;background:#e2e8f0;font-size:.6875rem;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:.3px}.cv-bubble{max-width:70%;padding:10px 14px;border-radius:16px;position:relative;word-break:break-word;overflow-wrap:break-word}.cv-bubble.inbound{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.cv-bubble.inbound .cv-body,.cv-bubble.inbound .cv-rich{color:#1e293b}.cv-bubble.inbound .cv-meta{color:#64748b}.cv-bubble.outbound{align-self:flex-end;background:#2563eb;border-bottom-right-radius:4px}.cv-bubble.outbound .cv-body,.cv-bubble.outbound .cv-rich,.cv-bubble.outbound .cv-meta{color:#fff}@media(prefers-reduced-motion:no-preference){.cv-bubble{animation:cv-appear .2s ease}.cv-context{animation:cv-slide-in .25s ease}}.cv-body{margin:0;font-size:.875rem;line-height:1.45;word-break:break-word;white-space:pre-wrap}.cv-media{margin-bottom:6px}.cv-image-btn{display:block;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}.cv-image-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 4px #2563eb}.cv-image{display:block;max-width:240px;max-height:240px;border-radius:8px;object-fit:cover}.cv-video{max-width:240px;max-height:200px;border-radius:8px}.cv-file-link{font-size:.8125rem;color:#fff;text-decoration:underline}.cv-bubble.inbound .cv-file-link{color:#2563eb}.cv-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;font-size:.6875rem;margin-top:4px}.cv-status{font-weight:500}.cv-status.failed{color:#fff;font-weight:700}.cv-bubble.inbound .cv-status.failed{color:#dc2626}.cv-compose{display:flex;flex-direction:column;padding:12px 20px 16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #e2e8f0;background:#fff}.cv-compose-row{display:flex;align-items:flex-end;gap:10px}.cv-compose-input{flex:1;min-width:0}.cv-attach-btn,.cv-send-btn{flex-shrink:0}.cv-attachment{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px}.cv-attachment-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px}.cv-attachment-name{font-size:.8125rem;color:#475569;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cv-attachment-remove{flex-shrink:0}.cv-compose-status{margin:4px 0 0;font-size:.8125rem;color:#64748b}.cv-compose-status:empty{margin:0}.cv-context-backdrop{display:none}.cv-context{width:100%;min-width:0;border-left:1px solid #e2e8f0;background:#fff;display:flex;flex-direction:column;overflow-y:auto}.cv-context-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e2e8f0}.cv-context-header h3{margin:0;font-size:.875rem;font-weight:700;color:#1e293b}.cv-context-body{padding:20px;display:flex;flex-direction:column;gap:16px}@keyframes cv-appear{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes cv-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1100px){.cv-layout.has-context{grid-template-columns:280px 1fr 240px}}@media(max-width:768px){.cv-layout,.cv-layout.has-context{grid-template-columns:1fr;height:100%}.cv-hidden-mobile{display:none!important}.cv-back-btn{display:inline-flex}.cv-context-backdrop{display:block;position:fixed;inset:0;background:#00000059;z-index:99}.cv-context{position:fixed;top:0;right:0;bottom:0;width:300px;max-width:85vw;z-index:100;box-shadow:-4px 0 20px #0000001a}.cv-bubble{max-width:85%}.cv-messages,.cv-thread-header{padding:12px 16px}}@media(max-width:480px){.cv-thread-subtitle{display:none}.cv-compose{padding:8px 12px 12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.cv-compose-row{flex-wrap:wrap}.cv-compose-input{order:-1;flex:1 1 100%}.cv-send-btn{margin-inline-start:auto}.cv-list-header{padding:12px 16px 10px}.cv-context{width:100%;max-width:100vw}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -54900,6 +55157,93 @@ i0.ɵɵngDeclareClassMetadata({
 			type: i0.Output,
 			args: ["attachmentRemove"]
 		}],
+		linkGroups: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkGroups",
+				required: false
+			}]
+		}],
+		linkLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkLoading",
+				required: false
+			}]
+		}],
+		link: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "link",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["linkChange"]
+		}],
+		linkLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkLabel",
+				required: false
+			}]
+		}],
+		linkPickerTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkPickerTitle",
+				required: false
+			}]
+		}],
+		linkSearchPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkSearchPlaceholder",
+				required: false
+			}]
+		}],
+		linkSearchLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkSearchLabel",
+				required: false
+			}]
+		}],
+		linkEmptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkEmptyText",
+				required: false
+			}]
+		}],
+		linkLoadingText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkLoadingText",
+				required: false
+			}]
+		}],
+		removeLinkLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLinkLabel",
+				required: false
+			}]
+		}],
+		linkPickerOpened: [{
+			type: i0.Output,
+			args: ["linkPickerOpened"]
+		}],
 		mediaOpen: [{
 			type: i0.Output,
 			args: ["mediaOpen"]