@memberjunction/ng-conversations 6.2.0-edge.2 → 6.2.0-edge.4

package/dist/lib/components/realtime/realtime-composer.component.js

@@ -1,16 +1,17 @@
 import { Component, EventEmitter, HostListener, Input, Output, ViewChild, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { MJButtonDirective } from '@memberjunction/ng-ui-components';
+import { MediaControlsComponent } from '@memberjunction/ng-realtime-media';
 import { RealtimeSessionService } from '../../services/realtime-session.service';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
+import * as i1 from "@angular/forms";
 const _c0 = ["dockInput"];
 function RealtimeComposerComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 17);
+    i0.ɵɵelementStart(0, "button", 16);
     i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); ctx_r2.DetailsToggled.emit(); return i0.ɵɵresetView(ctx_r2.MoreOpen = false); });
-    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵelementStart(2, "small");
     i0.ɵɵtext(3, "Details");
     i0.ɵɵelementEnd()();
@@ -39,13 +40,12 @@ function RealtimeComposerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
     i0.ɵɵelement(11, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 13);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); });
-    i0.ɵɵelement(13, "i", 14);
+    i0.ɵɵelementStart(12, "mj-media-controls", 13);
+    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_MicrophoneToggled_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_CameraToggled_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_ShareRequested_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_StopShareRequested_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StopShareRequested.emit()); })("DeviceSelected", function RealtimeComposerComponent_Conditional_0_Template_mj_media_controls_DeviceSelected_12_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.DeviceSelected.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 15);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
-    i0.ɵɵelement(15, "i", 16);
+    i0.ɵɵelementStart(13, "button", 14);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
+    i0.ɵɵelement(14, "i", 15);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -54,24 +54,18 @@ function RealtimeComposerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.ShowDetails ? 3 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("lean-ctrl--on", ctx_r2.MoreOpen);
+    i0.ɵɵproperty("Variant", ctx_r2.MoreOpen ? "primary" : "secondary");
     i0.ɵɵattribute("aria-expanded", ctx_r2.MoreOpen);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("lean-ctrl--on", ctx_r2.CaptionsOn);
-    i0.ɵɵproperty("title", ctx_r2.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.CaptionsOn);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.CaptionsOn)("title", ctx_r2.CaptionsTitle);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("lean-ctrl--muted", ctx_r2.IsMuted);
-    i0.ɵɵproperty("title", ctx_r2.IsMuted ? "Unmute microphone" : "Mute microphone");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.IsMuted);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.IsMuted ? "fa-microphone-slash" : "fa-microphone");
+    i0.ɵɵproperty("MicrophoneOn", !ctx_r2.IsMuted)("ShowCamera", ctx_r2.ShowCamera)("ShowShare", ctx_r2.ShowShare)("CameraOn", ctx_r2.CameraOn)("Sharing", ctx_r2.Sharing)("SharePanels", ctx_r2.SharePanels)("CameraOptional", true)("ShowDeviceMenu", true)("Devices", ctx_r2.Devices)("SelectedMicrophoneID", ctx_r2.SelectedMicrophoneID)("SelectedCameraID", ctx_r2.SelectedCameraID);
 } }
-function RealtimeComposerComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function RealtimeComposerComponent_Conditional_1_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 19)(1, "button", 20);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.DetailsToggled.emit()); });
-    i0.ɵɵelement(2, "i", 18);
+    i0.ɵɵelementStart(0, "div", 19)(1, "button", 24);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.DetailsToggled.emit()); });
+    i0.ɵɵelement(2, "i", 17);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span", 21);
     i0.ɵɵtext(4, "Details");
@@ -79,115 +73,92 @@ function RealtimeComposerComponent_Conditional_1_Conditional_11_Template(rf, ctx
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("ctrl--on", ctx_r2.DetailsOn);
-    i0.ɵɵproperty("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.DetailsOn);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.DetailsOn)("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
 } }
 function RealtimeComposerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 19)(2, "button", 20);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); });
-    i0.ɵɵelement(3, "i", 14);
+    i0.ɵɵelementStart(0, "div", 2)(1, "mj-media-controls", 18);
+    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_MicrophoneToggled_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_CameraToggled_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_ShareRequested_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_StopShareRequested_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StopShareRequested.emit()); })("DeviceSelected", function RealtimeComposerComponent_Conditional_1_Template_mj_media_controls_DeviceSelected_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.DeviceSelected.emit($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 21);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 19)(7, "button", 20);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
-    i0.ɵɵelement(8, "i", 12);
+    i0.ɵɵelementStart(2, "div", 19)(3, "button", 20);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
+    i0.ɵɵelement(4, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 21);
-    i0.ɵɵtext(10, "Captions");
+    i0.ɵɵelementStart(5, "span", 21);
+    i0.ɵɵtext(6, "Captions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, RealtimeComposerComponent_Conditional_1_Conditional_11_Template, 5, 4, "div", 19);
-    i0.ɵɵelementStart(12, "div", 19)(13, "button", 22);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(true)); });
-    i0.ɵɵelement(14, "i", 8);
+    i0.ɵɵconditionalCreate(7, RealtimeComposerComponent_Conditional_1_Conditional_7_Template, 5, 3, "div", 19);
+    i0.ɵɵelementStart(8, "div", 19)(9, "button", 22);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(true)); });
+    i0.ɵɵelement(10, "i", 8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 21);
-    i0.ɵɵtext(16, "Type");
+    i0.ɵɵelementStart(11, "span", 21);
+    i0.ɵɵtext(12, "Type");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 19)(18, "button", 23);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
-    i0.ɵɵelement(19, "i", 16);
+    i0.ɵɵelementStart(13, "div", 19)(14, "button", 14);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
+    i0.ɵɵelement(15, "i", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 24);
-    i0.ɵɵtext(21, "End call");
+    i0.ɵɵelementStart(16, "span", 23);
+    i0.ɵɵtext(17, "End call");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("ctrl--muted", ctx_r2.IsMuted);
-    i0.ɵɵproperty("title", ctx_r2.IsMuted ? "Unmute microphone" : "Mute microphone");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.IsMuted);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.IsMuted ? "fa-microphone-slash" : "fa-microphone");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r2.IsMuted ? "Unmute" : "Mute");
+    i0.ɵɵproperty("ShowLabels", true)("MicrophoneOn", !ctx_r2.IsMuted)("ShowCamera", ctx_r2.ShowCamera)("ShowShare", ctx_r2.ShowShare)("CameraOn", ctx_r2.CameraOn)("Sharing", ctx_r2.Sharing)("SharePanels", ctx_r2.SharePanels)("CameraOptional", true)("ShowDeviceMenu", true)("Devices", ctx_r2.Devices)("SelectedMicrophoneID", ctx_r2.SelectedMicrophoneID)("SelectedCameraID", ctx_r2.SelectedCameraID);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("ctrl--on", ctx_r2.CaptionsOn);
-    i0.ɵɵproperty("title", ctx_r2.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.CaptionsOn);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.CaptionsOn)("title", ctx_r2.CaptionsTitle);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.ShowDetails ? 11 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowDetails ? 7 : -1);
 } }
-function RealtimeComposerComponent_Conditional_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function RealtimeComposerComponent_Conditional_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.DetailsToggled.emit()); });
-    i0.ɵɵelement(1, "i", 18);
+    i0.ɵɵelementStart(0, "button", 37);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.DetailsToggled.emit()); });
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("mini--on", ctx_r2.DetailsOn);
-    i0.ɵɵproperty("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Show the session panels");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.DetailsOn);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.DetailsOn)("title", ctx_r2.DetailsOn ? "Hide the session panels" : "Show the session panels");
 } }
 function RealtimeComposerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 3)(1, "div", 25)(2, "button", 26);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); });
-    i0.ɵɵelement(3, "i", 14);
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 25)(2, "mj-media-controls", 26);
+    i0.ɵɵlistener("MicrophoneToggled", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_MicrophoneToggled_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleMute()); })("CameraToggled", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_CameraToggled_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CameraToggled.emit($event)); })("ShareRequested", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_ShareRequested_2_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ShareRequested.emit($event)); })("StopShareRequested", function RealtimeComposerComponent_Conditional_2_Template_mj_media_controls_StopShareRequested_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.StopShareRequested.emit()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 26);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
-    i0.ɵɵelement(5, "i", 12);
+    i0.ɵɵelementStart(3, "button", 27);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ToggleCaptions()); });
+    i0.ɵɵelement(4, "i", 12);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, RealtimeComposerComponent_Conditional_2_Conditional_6_Template, 2, 4, "button", 27);
+    i0.ɵɵconditionalCreate(5, RealtimeComposerComponent_Conditional_2_Conditional_5_Template, 2, 3, "button", 28);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 28)(8, "textarea", 29, 0);
-    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_textarea_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Draft, $event) || (ctx_r2.Draft = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_2_Template_textarea_keydown_8_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnKeydown($event)); })("input", function RealtimeComposerComponent_Conditional_2_Template_textarea_input_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoResize()); });
+    i0.ɵɵelementStart(6, "div", 29)(7, "textarea", 30, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_2_Template_textarea_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.Draft, $event) || (ctx_r2.Draft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_2_Template_textarea_keydown_7_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnKeydown($event)); })("input", function RealtimeComposerComponent_Conditional_2_Template_textarea_input_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.AutoResize()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "span", 30);
-    i0.ɵɵtext(11, "\u21B5 send");
+    i0.ɵɵelementStart(9, "span", 31);
+    i0.ɵɵtext(10, "\u21B5 send");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 31);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Send()); });
-    i0.ɵɵelement(13, "i", 32);
+    i0.ɵɵelementStart(11, "button", 32);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Send()); });
+    i0.ɵɵelement(12, "i", 33);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "button", 33);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(false)); });
-    i0.ɵɵelement(15, "i", 34);
+    i0.ɵɵelementStart(13, "button", 34);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenChanged.emit(false)); });
+    i0.ɵɵelement(14, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "button", 35);
-    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
-    i0.ɵɵelement(17, "i", 16);
+    i0.ɵɵelementStart(15, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_2_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.EndRequested.emit()); });
+    i0.ɵɵelement(16, "i", 15);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("mini--muted", ctx_r2.IsMuted);
-    i0.ɵɵproperty("title", ctx_r2.IsMuted ? "Unmute microphone" : "Mute microphone");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.IsMuted);
+    i0.ɵɵproperty("MicrophoneOn", !ctx_r2.IsMuted)("ShowCamera", ctx_r2.ShowCamera)("ShowShare", ctx_r2.ShowShare)("ShowShareMenu", false)("CameraOn", ctx_r2.CameraOn)("Sharing", ctx_r2.Sharing)("CameraOptional", true);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", ctx_r2.IsMuted ? "fa-microphone-slash" : "fa-microphone");
-    i0.ɵɵadvance();
-    i0.ɵɵclassProp("mini--on", ctx_r2.CaptionsOn);
-    i0.ɵɵproperty("title", ctx_r2.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
-    i0.ɵɵattribute("aria-pressed", ctx_r2.CaptionsOn);
+    i0.ɵɵproperty("Toggleable", true)("Selected", ctx_r2.CaptionsOn)("title", ctx_r2.CaptionsTitle);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.ShowDetails ? 6 : -1);
+    i0.ɵɵconditional(ctx_r2.ShowDetails ? 5 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.Draft);
     i0.ɵɵadvance(4);
@@ -204,11 +175,17 @@ function RealtimeComposerComponent_Conditional_2_Template(rf, ctx) { if (rf & 1)
  *    Activity/Whiteboard panels on demand), the Type control, and End call. There's no visible
  *    composer yet — the Type control opens it, and so does simply starting to type (the overlay
  *    captures the first printable keystroke and seeds it via {@link AppendAndFocus}).
- *  - **Level 2+ (the dock)** — mute/captions shrink to compact minis and the in-call text
+ *  - **Level 2+ (the dock)** — mute/captions shrink to small circles and the in-call text
  *    input docks beside them (one bottom bar, per Redesign A's fused composer+controls).
  *    Submit calls {@link RealtimeSessionService.SendText}, which injects the text as a user
  *    turn into the SAME live voice call.
  *
+ * The controls are the design system's: the microphone, the camera and Share are `mj-media-controls` (the call controls
+ * the LiveKit room uses too) and every other control an `mjButton` circle, sized per shape (52, 44 or 32 px). The camera
+ * and Share show only when the overlay says the call offers them; the camera is optional here, so it is neutral while off.
+ * In the strip and the lean dock the microphone carries the device chevron, whose menu picks the microphone and, while the
+ * camera is open, the camera ({@link Devices}); the fused dock, short of room, leaves it out, as it does the Share arrow.
+ *
  * Mute talks to the session service directly (pure local toggle); captions / Details /
  * End are emitted up so the overlay shell owns that state and lifecycle.
  */
@@ -245,6 +222,36 @@ export class RealtimeComposerComponent {
     MuteChanged = new EventEmitter();
     /** Current draft text in the dock's composer input. */
     Draft = '';
+    /** Show the camera button: the call offers the camera (the runtime's `CaptureOffers$`). */
+    ShowCamera = false;
+    /** Show the Share button: the call offers a screen share. */
+    ShowShare = false;
+    /** Whether the camera is on (or starting). */
+    CameraOn = false;
+    /** Whether the user is sharing (or choosing what to share). */
+    Sharing = false;
+    /**
+     * The panels of the page the Share menu offers under "This panel" (the overlay's on-screen panels). The typed-input
+     * dock, whose Share button has no menu, leaves them out.
+     */
+    SharePanels = [];
+    /**
+     * The microphones and cameras the device menu offers: the call's microphones, and its cameras while the camera is
+     * open. With none there is no device chevron. The typed-input dock leaves the chevron out.
+     */
+    Devices = [];
+    /** The microphone the device menu shows as picked. */
+    SelectedMicrophoneID = null;
+    /** The camera the device menu shows as picked. */
+    SelectedCameraID = null;
+    /** The user asked to turn the camera on (`true`) or off (`false`). The overlay starts or stops it. */
+    CameraToggled = new EventEmitter();
+    /** The user asked to share a screen, window or tab, or one of {@link SharePanels}. */
+    ShareRequested = new EventEmitter();
+    /** The user asked to stop sharing. */
+    StopShareRequested = new EventEmitter();
+    /** The user picked a microphone or a camera in the device menu. The overlay switches to it. */
+    DeviceSelected = new EventEmitter();
     /**
      * The mic mute state. A two-way reflection: the overlay may push it down (e.g. its
      * `SetMuted()` / focus-pill toggle) so all mute affordances stay in sync, and this
@@ -253,6 +260,10 @@ export class RealtimeComposerComponent {
     IsMuted = false;
     dockInput;
     realtime = inject(RealtimeSessionService);
+    /** The captions control's tooltip: what a click does. */
+    get CaptionsTitle() {
+        return this.CaptionsOn ? 'Voice-first — back to the orb' : 'Show the conversation as text';
+    }
     /** True when there's non-whitespace text to send. */
     get CanSend() {
         return this.Draft.trim().length > 0;
@@ -346,15 +357,15 @@ export class RealtimeComposerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dockInput = _t.first);
         } }, hostBindings: function RealtimeComposerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function RealtimeComposerComponent_click_HostBindingHandler() { return ctx.OnDocumentClick(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Open: "Open", Compact: "Compact", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged" }, decls: 3, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "dock-lean"], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "lean-more"], ["role", "menu", "aria-label", "More call controls", 1, "lean-sheet", 3, "click"], ["type", "button", 1, "lean-sheet__btn", 3, "lean-sheet__btn--on", "title"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "lean-sheet__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "title", "More controls", "aria-label", "More call controls", 1, "lean-ctrl", "lean-ctrl--more", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--more", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", 1, "lean-ctrl", "lean-ctrl--lg", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "lean-ctrl", "lean-ctrl--lg", "lean-ctrl--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["type", "button", 1, "lean-sheet__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], [1, "ctrl-group"], ["type", "button", 1, "ctrl", 3, "click", "title"], [1, "ctrl-label"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "ctrl", 3, "click"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "ctrl", "ctrl--end", 3, "click"], [1, "ctrl-label", "ctrl-label--end"], [1, "dock__minis"], ["type", "button", 1, "mini", 3, "click", "title"], ["type", "button", 1, "mini", 3, "mini--on", "title"], [1, "dock__box"], ["rows", "1", "placeholder", "Type into the live session \u2014 joins this same voice call\u2026", "aria-label", "Type a message into the live voice session", 1, "dock__input", 3, "ngModelChange", "keydown", "input", "ngModel"], ["aria-hidden", "true", 1, "dock__hint"], ["type", "button", "title", "Send into live session", "aria-label", "Send", 1, "dock__send", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-paper-plane"], ["type", "button", "title", "Hide typing \u2014 back to the voice controls", "aria-label", "Close the typed-input composer", 1, "mini", "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "mini", "mini--end", 3, "click"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 16, 15, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 22, 11, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 18, 12, "div", 3);
+        } }, inputs: { Open: "Open", Compact: "Compact", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn", ShowCamera: "ShowCamera", ShowShare: "ShowShare", CameraOn: "CameraOn", Sharing: "Sharing", SharePanels: "SharePanels", Devices: "Devices", SelectedMicrophoneID: "SelectedMicrophoneID", SelectedCameraID: "SelectedCameraID", IsMuted: "IsMuted" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested", MuteChanged: "MuteChanged", CameraToggled: "CameraToggled", ShareRequested: "ShareRequested", StopShareRequested: "StopShareRequested", DeviceSelected: "DeviceSelected" }, decls: 3, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "dock-lean"], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "lean-more"], ["role", "menu", "aria-label", "More call controls", 1, "lean-sheet", 3, "click"], ["type", "button", 1, "lean-sheet__btn", 3, "lean-sheet__btn--on", "title"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "lean-sheet__btn", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "mjButton", "", "Shape", "circle", "AriaLabel", "More call controls", "title", "More controls", 3, "click", "Variant"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis"], ["type", "button", "mjButton", "", "Shape", "circle", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["Size", "lg", 1, "lean__media", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "MicrophoneOn", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional", "ShowDeviceMenu", "Devices", "SelectedMicrophoneID", "SelectedCameraID"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "Variant", "danger", "AriaLabel", "End call", "title", "End call", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], ["type", "button", 1, "lean-sheet__btn", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], ["Size", "lg", 1, "strip__media", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "DeviceSelected", "ShowLabels", "MicrophoneOn", "ShowCamera", "ShowShare", "CameraOn", "Sharing", "SharePanels", "CameraOptional", "ShowDeviceMenu", "Devices", "SelectedMicrophoneID", "SelectedCameraID"], [1, "ctrl-group"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["aria-hidden", "true", 1, "ctrl-label"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Open the typed-input composer", "title", "Type into the live session", 3, "click"], ["aria-hidden", "true", 1, "ctrl-label", "ctrl-label--end"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "lg", "AriaLabel", "Details", 3, "click", "Toggleable", "Selected", "title"], [1, "dock__minis"], ["Size", "sm", 3, "MicrophoneToggled", "CameraToggled", "ShareRequested", "StopShareRequested", "MicrophoneOn", "ShowCamera", "ShowShare", "ShowShareMenu", "CameraOn", "Sharing", "CameraOptional"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Captions", 3, "click", "Toggleable", "Selected", "title"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Details", 3, "Toggleable", "Selected", "title"], [1, "dock__box"], ["rows", "1", "placeholder", "Type into the live session \u2014 joins this same voice call\u2026", "aria-label", "Type a message into the live voice session", 1, "dock__input", 3, "ngModelChange", "keydown", "input", "ngModel"], ["aria-hidden", "true", 1, "dock__hint"], ["type", "button", "title", "Send into live session", "aria-label", "Send", 1, "dock__send", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-paper-plane"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Close the typed-input composer", "title", "Hide typing \u2014 back to the voice controls", 1, "dock__hide", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "Variant", "danger", "AriaLabel", "End call", "title", "End call", 3, "click"], ["type", "button", "mjButton", "", "Shape", "circle", "Size", "sm", "AriaLabel", "Details", 3, "click", "Toggleable", "Selected", "title"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 15, 19, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 18, 16, "div", 2)(2, RealtimeComposerComponent_Conditional_2_Template, 17, 13, "div", 3);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.StripMode && ctx.Compact ? 0 : ctx.StripMode ? 1 : 2);
-        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\n\n\n.strip[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.ctrl[_ngcontent-%COMP%] {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.dock[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n.mini[_ngcontent-%COMP%] {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.mini--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n.dock__box[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n.dock__hide[_ngcontent-%COMP%] {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.mini--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  flex-shrink: 0;\n}\n.mini--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg[_ngcontent-%COMP%] {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more[_ngcontent-%COMP%] {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted[_ngcontent-%COMP%] {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end[_ngcontent-%COMP%] {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end[_ngcontent-%COMP%]:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\n}\n\n\n.lean-more[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open[_ngcontent-%COMP%]   .lean-sheet[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
+        } }, dependencies: [CommonModule, FormsModule, i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, MJButtonDirective, MediaControlsComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  \n  container-type: inline-size;\n}\n\n\n.strip[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\n\n.ctrl-label[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: var(--mj-space-1-5);\n  font-weight: 500;\n}\n\n\n.strip__media[_ngcontent-%COMP%] {\n  align-items: flex-start;\n  gap: 22px;\n}\n\n\n@container (max-width: 600px) {\n  .strip[_ngcontent-%COMP%], \n   .strip__media[_ngcontent-%COMP%] {\n    gap: 12px;\n  }\n}\n@container (max-width: 480px) {\n  .strip[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n}\n.ctrl-label--end[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n.dock[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: _ngcontent-%COMP%_dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes _ngcontent-%COMP%_dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n\n.dock__box[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n\n@container (max-width: 520px) {\n  .dock[_ngcontent-%COMP%] {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .dock__box[_ngcontent-%COMP%] {\n    order: 1;\n    flex-basis: 100%;\n  }\n}\n\n.dock__box[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint[_ngcontent-%COMP%] {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send[_ngcontent-%COMP%]:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n\n\n\n\n.dock-lean[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  row-gap: 10px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n\n\n\n@container (max-width: 490px) {\n  .dock-lean[_ngcontent-%COMP%] {\n    gap: 6px;\n    row-gap: 10px;\n    padding-inline: 12px;\n  }\n  .lean__media[_ngcontent-%COMP%] {\n    gap: 4px;\n  }\n}\n\n\n\n.lean-more[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open[_ngcontent-%COMP%]   .lean-sheet[_ngcontent-%COMP%] {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn[_ngcontent-%COMP%] {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on[_ngcontent-%COMP%]   small[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeComposerComponent, [{
         type: Component,
-        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule], template: "@if (StripMode && Compact) {\n  <!-- COMPACT (Calm Orb \u00B7 overlay): the lean dock \u2014 Mute + End + a first-class Captions toggle\n       (kept out of the \"\u2022\u2022\u2022\" so text stays ONE TAP in the overlay, where the banner no longer\n       carries a duplicate CC) + a \"\u2022\u2022\u2022\" that blooms a small sheet with the remaining secondary\n       actions (Details / Type). Round controls, red End \u2014 matches the mockup. -->\n  <div class=\"dock-lean\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"lean-more\" [class.lean-more--open]=\"MoreOpen\">\n      <div class=\"lean-sheet\" (click)=\"$event.stopPropagation()\" role=\"menu\" aria-label=\"More call controls\">\n        @if (ShowDetails) {\n          <button type=\"button\" class=\"lean-sheet__btn\" [class.lean-sheet__btn--on]=\"DetailsOn\"\n                  (click)=\"DetailsToggled.emit(); MoreOpen = false\"\n                  [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                  [attr.aria-pressed]=\"DetailsOn\">\n            <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n            <small>Details</small>\n          </button>\n        }\n        <button type=\"button\" class=\"lean-sheet__btn\"\n                (click)=\"OpenChanged.emit(true); MoreOpen = false\"\n                title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n          <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n          <small>Type</small>\n        </button>\n      </div>\n      <button type=\"button\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\"\n              title=\"More controls\" aria-label=\"More call controls\"\n              [attr.aria-expanded]=\"MoreOpen\">\n        <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- Captions: first-class in the lean dock (the overlay's only text toggle now). -->\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--more\" [class.lean-ctrl--on]=\"CaptionsOn\"\n            (click)=\"ToggleCaptions()\"\n            [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n            [attr.aria-pressed]=\"CaptionsOn\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg\" [class.lean-ctrl--muted]=\"IsMuted\"\n            (click)=\"ToggleMute()\"\n            [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n            [attr.aria-pressed]=\"IsMuted\">\n      <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n    </button>\n\n    <button type=\"button\" class=\"lean-ctrl lean-ctrl--lg lean-ctrl--end\" (click)=\"EndRequested.emit()\"\n            title=\"End call\" aria-label=\"End call\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n} @else if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big round controls, nothing to configure.\n       Captions arrives at level 1 WITH the text it controls; Details peeks at the\n       surface panels on demand; End stays the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">{{ IsMuted ? 'Unmute' : 'Mute' }}</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" class=\"ctrl\" [class.ctrl--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"ctrl-label\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl\" (click)=\"OpenChanged.emit(true)\"\n              title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n        <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" class=\"ctrl ctrl--end\" (click)=\"EndRequested.emit()\"\n              title=\"End call\" aria-label=\"End call\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 compact minis + the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <button type=\"button\" class=\"mini\" [class.mini--muted]=\"IsMuted\"\n              (click)=\"ToggleMute()\"\n              [title]=\"IsMuted ? 'Unmute microphone' : 'Mute microphone'\"\n              [attr.aria-pressed]=\"IsMuted\">\n        <i class=\"fa-solid\" [ngClass]=\"IsMuted ? 'fa-microphone-slash' : 'fa-microphone'\" aria-hidden=\"true\"></i>\n      </button>\n      <button type=\"button\" class=\"mini\" [class.mini--on]=\"CaptionsOn\"\n              (click)=\"ToggleCaptions()\"\n              [title]=\"CaptionsOn ? 'Voice-first \u2014 back to the orb' : 'Show the conversation as text'\"\n              [attr.aria-pressed]=\"CaptionsOn\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" class=\"mini\" [class.mini--on]=\"DetailsOn\"\n                (click)=\"DetailsToggled.emit()\"\n                [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                [attr.aria-pressed]=\"DetailsOn\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <textarea\n        #dockInput\n        class=\"dock__input\"\n        rows=\"1\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        (input)=\"AutoResize()\"\n        aria-label=\"Type a message into the live voice session\"></textarea>\n      <span class=\"dock__hint\" aria-hidden=\"true\">\u21B5 send</span>\n      <button\n        class=\"dock__send\"\n        type=\"button\"\n        [disabled]=\"!CanSend\"\n        (click)=\"Send()\"\n        title=\"Send into live session\"\n        aria-label=\"Send\">\n        <i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    <button type=\"button\" class=\"mini dock__hide\" (click)=\"OpenChanged.emit(false)\"\n            title=\"Hide typing \u2014 back to the voice controls\"\n            aria-label=\"Close the typed-input composer\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n    <button type=\"button\" class=\"mini mini--end\" (click)=\"EndRequested.emit()\"\n            title=\"End call\" aria-label=\"End call\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\n}\n\n/* ---------- Levels 0\u20131: phone-call strip (big round controls, centered) ---------- */\n.strip {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.ctrl {\n  width: 52px;\n  height: 52px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  font-size: 18px;\n  transition: all 150ms ease;\n}\n.ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.ctrl--end {\n  width: 60px;\n  height: 60px;\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 6px 20px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n.ctrl-label {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: 6px;\n  font-weight: 500;\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* ---------- Level 2+: the fused dock (minis + composer in one bar) ---------- */\n.dock {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n.mini {\n  width: 38px;\n  height: 38px;\n  border-radius: 50%;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 13.5px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  transition: all 140ms ease;\n}\n.mini:hover {\n  background: var(--mj-bg-surface-hover);\n}\n.mini--on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.mini--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n\n.dock__box {\n  flex: 1;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n.dock__box:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n/* The dock's hide control \u2014 typing is a two-way door, never permanent chrome. */\n.dock__hide {\n  border-style: dashed;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n.dock__hide:hover {\n  color: var(--mj-text-primary);\n}\n\n.mini--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  flex-shrink: 0;\n}\n.mini--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.92);\n}\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 Mute + End + a \"\u2022\u2022\u2022\" that blooms a small sheet (Captions / Details / Type).\n   Round controls, red End \u2014 matches the mockup. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n.lean-ctrl {\n  display: grid;\n  place-items: center;\n  border-radius: 50%;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n.lean-ctrl:hover {\n  background: var(--mj-bg-surface-hover);\n  transform: translateY(-1px);\n}\n.lean-ctrl--lg {\n  width: 58px;\n  height: 58px;\n  font-size: 19px;\n}\n.lean-ctrl--more {\n  width: 46px;\n  height: 46px;\n  font-size: 16px;\n}\n.lean-ctrl--on {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.lean-ctrl--muted {\n  background: var(--mj-status-warning-bg);\n  border-color: var(--mj-status-warning);\n  color: var(--mj-status-warning);\n}\n.lean-ctrl--end {\n  background: var(--mj-status-error);\n  border-color: var(--mj-status-error);\n  color: var(--mj-text-inverse, #fff);\n  font-size: 20px;\n  box-shadow: 0 8px 24px color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n}\n.lean-ctrl--end:hover {\n  background: var(--mj-status-error);\n  filter: brightness(0.94);\n}\n\n/* The \"\u2022\u2022\u2022\" overflow + its blooming sheet. */\n.lean-more {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open .lean-sheet {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn small {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on small {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
+        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule, MJButtonDirective, MediaControlsComponent], template: "@if (StripMode && Compact) {\n  <!-- COMPACT (Calm Orb \u00B7 overlay): the lean dock \u2014 a \"\u2022\u2022\u2022\" that blooms a small sheet with the secondary actions\n       (Details / Type), a first-class Captions toggle (text stays ONE TAP in the overlay), the call's media controls\n       (the microphone with its device chevron, and the camera and Share when offered) and a red End. Circles from the\n       design system. -->\n  <div class=\"dock-lean\" role=\"group\" aria-label=\"Call controls\">\n    <div class=\"lean-more\" [class.lean-more--open]=\"MoreOpen\">\n      <div class=\"lean-sheet\" (click)=\"$event.stopPropagation()\" role=\"menu\" aria-label=\"More call controls\">\n        @if (ShowDetails) {\n          <button type=\"button\" class=\"lean-sheet__btn\" [class.lean-sheet__btn--on]=\"DetailsOn\"\n                  (click)=\"DetailsToggled.emit(); MoreOpen = false\"\n                  [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                  [attr.aria-pressed]=\"DetailsOn\">\n            <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n            <small>Details</small>\n          </button>\n        }\n        <button type=\"button\" class=\"lean-sheet__btn\"\n                (click)=\"OpenChanged.emit(true); MoreOpen = false\"\n                title=\"Type into the live session\" aria-label=\"Open the typed-input composer\">\n          <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n          <small>Type</small>\n        </button>\n      </div>\n      <button type=\"button\" mjButton Shape=\"circle\" [Variant]=\"MoreOpen ? 'primary' : 'secondary'\"\n              AriaLabel=\"More call controls\" title=\"More controls\"\n              [attr.aria-expanded]=\"MoreOpen\"\n              (click)=\"ToggleMore($event)\">\n        <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- Captions: first-class in the lean dock (the overlay's only text toggle now). -->\n    <button type=\"button\" mjButton Shape=\"circle\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n            AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n            (click)=\"ToggleCaptions()\">\n      <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n    </button>\n\n    <mj-media-controls class=\"lean__media\"\n                       Size=\"lg\"\n                       [MicrophoneOn]=\"!IsMuted\"\n                       [ShowCamera]=\"ShowCamera\"\n                       [ShowShare]=\"ShowShare\"\n                       [CameraOn]=\"CameraOn\"\n                       [Sharing]=\"Sharing\"\n                       [SharePanels]=\"SharePanels\"\n                       [CameraOptional]=\"true\"\n                       [ShowDeviceMenu]=\"true\"\n                       [Devices]=\"Devices\"\n                       [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n                       [SelectedCameraID]=\"SelectedCameraID\"\n                       (MicrophoneToggled)=\"ToggleMute()\"\n                       (CameraToggled)=\"CameraToggled.emit($event)\"\n                       (ShareRequested)=\"ShareRequested.emit($event)\"\n                       (StopShareRequested)=\"StopShareRequested.emit()\"\n                       (DeviceSelected)=\"DeviceSelected.emit($event)\"></mj-media-controls>\n\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" Variant=\"danger\"\n            AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n} @else if (StripMode) {\n  <!-- Levels 0\u20131: phone-call strip \u2014 big labelled circles: the call's media controls (the microphone with its device\n       chevron, and the camera and Share when the call offers them), Captions (level 1+, arriving WITH the text it\n       controls), the Details peek at the surface panels, Type, and End call, the deliberate rightmost action. -->\n  <div class=\"strip\" role=\"group\" aria-label=\"Call controls\">\n    <mj-media-controls class=\"strip__media\"\n                       Size=\"lg\"\n                       [ShowLabels]=\"true\"\n                       [MicrophoneOn]=\"!IsMuted\"\n                       [ShowCamera]=\"ShowCamera\"\n                       [ShowShare]=\"ShowShare\"\n                       [CameraOn]=\"CameraOn\"\n                       [Sharing]=\"Sharing\"\n                       [SharePanels]=\"SharePanels\"\n                       [CameraOptional]=\"true\"\n                       [ShowDeviceMenu]=\"true\"\n                       [Devices]=\"Devices\"\n                       [SelectedMicrophoneID]=\"SelectedMicrophoneID\"\n                       [SelectedCameraID]=\"SelectedCameraID\"\n                       (MicrophoneToggled)=\"ToggleMute()\"\n                       (CameraToggled)=\"CameraToggled.emit($event)\"\n                       (ShareRequested)=\"ShareRequested.emit($event)\"\n                       (StopShareRequested)=\"StopShareRequested.emit()\"\n                       (DeviceSelected)=\"DeviceSelected.emit($event)\"></mj-media-controls>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n              AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n              (click)=\"ToggleCaptions()\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\" aria-hidden=\"true\">Captions</span>\n    </div>\n\n    @if (ShowDetails) {\n      <div class=\"ctrl-group\">\n        <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" [Toggleable]=\"true\" [Selected]=\"DetailsOn\"\n                AriaLabel=\"Details\" [title]=\"DetailsOn ? 'Hide the session panels' : 'Peek at the session panels'\"\n                (click)=\"DetailsToggled.emit()\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"ctrl-label\" aria-hidden=\"true\">Details</span>\n      </div>\n    }\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\"\n              AriaLabel=\"Open the typed-input composer\" title=\"Type into the live session\"\n              (click)=\"OpenChanged.emit(true)\">\n        <i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label\" aria-hidden=\"true\">Type</span>\n    </div>\n\n    <div class=\"ctrl-group\">\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"lg\" Variant=\"danger\"\n              AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n        <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n      </button>\n      <span class=\"ctrl-label ctrl-label--end\" aria-hidden=\"true\">End call</span>\n    </div>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock \u2014 small circles and the in-call composer in ONE bottom bar. -->\n  <div class=\"dock\">\n    <div class=\"dock__minis\">\n      <!-- No Share arrow and no device chevron in the dock, which is short of room: the browser's picker still offers\n           every kind of surface, and Hide brings back the strip, which has the device menu. -->\n      <mj-media-controls Size=\"sm\"\n                         [MicrophoneOn]=\"!IsMuted\"\n                         [ShowCamera]=\"ShowCamera\"\n                         [ShowShare]=\"ShowShare\"\n                         [ShowShareMenu]=\"false\"\n                         [CameraOn]=\"CameraOn\"\n                         [Sharing]=\"Sharing\"\n                         [CameraOptional]=\"true\"\n                         (MicrophoneToggled)=\"ToggleMute()\"\n                         (CameraToggled)=\"CameraToggled.emit($event)\"\n                         (ShareRequested)=\"ShareRequested.emit($event)\"\n                         (StopShareRequested)=\"StopShareRequested.emit()\"></mj-media-controls>\n      <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" [Toggleable]=\"true\" [Selected]=\"CaptionsOn\"\n              AriaLabel=\"Captions\" [title]=\"CaptionsTitle\"\n              (click)=\"ToggleCaptions()\">\n        <i class=\"fa-solid fa-closed-captioning\" aria-hidden=\"true\"></i>\n      </button>\n      @if (ShowDetails) {\n        <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" [Toggleable]=\"true\" [Selected]=\"DetailsOn\"\n                AriaLabel=\"Details\" [title]=\"DetailsOn ? 'Hide the session panels' : 'Show the session panels'\"\n                (click)=\"DetailsToggled.emit()\">\n          <i class=\"fa-solid fa-table-columns\" aria-hidden=\"true\"></i>\n        </button>\n      }\n    </div>\n    <div class=\"dock__box\">\n      <textarea\n        #dockInput\n        class=\"dock__input\"\n        rows=\"1\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        (input)=\"AutoResize()\"\n        aria-label=\"Type a message into the live voice session\"></textarea>\n      <span class=\"dock__hint\" aria-hidden=\"true\">\u21B5 send</span>\n      <button\n        class=\"dock__send\"\n        type=\"button\"\n        [disabled]=\"!CanSend\"\n        (click)=\"Send()\"\n        title=\"Send into live session\"\n        aria-label=\"Send\">\n        <i class=\"fa-solid fa-paper-plane\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" class=\"dock__hide\"\n            AriaLabel=\"Close the typed-input composer\" title=\"Hide typing \u2014 back to the voice controls\"\n            (click)=\"OpenChanged.emit(false)\">\n      <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n    </button>\n    <button type=\"button\" mjButton Shape=\"circle\" Size=\"sm\" Variant=\"danger\"\n            AriaLabel=\"End call\" title=\"End call\" (click)=\"EndRequested.emit()\">\n      <i class=\"fa-solid fa-phone-slash\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n}\n", styles: [":host {\n  display: block;\n  /* The fused dock reflows by its own width, not the window's (the call column narrows when the panel opens). */\n  container-type: inline-size;\n}\n\n/* ---------- Levels 0\u20131: phone-call strip (big round controls, centered) ---------- */\n.strip {\n  position: relative;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 22px;\n  padding: 20px 22px;\n  border-top: 1px solid var(--mj-border-subtle);\n}\n\n.ctrl-group {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n\n/* Matches mj-media-controls' own labels, so every control in the strip is named alike. */\n.ctrl-label {\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-muted);\n  text-align: center;\n  margin-top: var(--mj-space-1-5);\n  font-weight: 500;\n}\n\n/* The call's media controls sit in the strip like its other groups. */\n.strip__media {\n  align-items: flex-start;\n  gap: 22px;\n}\n\n/* A narrow strip tightens its gaps, then wraps onto a second row, rather than cutting off its first and last controls. */\n@container (max-width: 600px) {\n  .strip,\n  .strip__media {\n    gap: 12px;\n  }\n}\n@container (max-width: 480px) {\n  .strip {\n    flex-wrap: wrap;\n    row-gap: 12px;\n  }\n}\n.ctrl-label--end {\n  color: var(--mj-status-error);\n}\n\n/* ---------- Level 2+: the fused dock (minis + composer in one bar) ---------- */\n.dock {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  animation: dock-in 320ms cubic-bezier(0.2, 0.8, 0.3, 1);\n}\n@keyframes dock-in {\n  from { opacity: 0; transform: translateY(10px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.dock__minis {\n  display: flex;\n  gap: 7px;\n  flex-shrink: 0;\n}\n\n/* min-width: 0 lets the box (and its text) give way to the controls on a narrow dock instead of pushing End out. */\n.dock__box {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: flex-end;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 20px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 140ms ease, border-radius 140ms ease;\n}\n/* On a narrow dock the text box takes a row of its own under the controls, so neither is squeezed. */\n@container (max-width: 520px) {\n  .dock {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .dock__box {\n    order: 1;\n    flex-basis: 100%;\n  }\n}\n\n.dock__box:focus-within {\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.dock__input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: 0;\n  outline: none;\n  color: var(--mj-text-primary);\n  font-family: inherit;\n  font-size: 13.5px;\n  line-height: 1.45;\n  resize: none;\n  height: 24px;\n  max-height: 140px;\n  overflow-y: auto;\n  padding: 3px 0 4px 0;\n  scrollbar-width: thin;\n  scrollbar-color: var(--mj-border-strong) transparent;\n}\n.dock__input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.dock__hint {\n  font-size: 10.5px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n  white-space: nowrap;\n}\n\n.dock__send {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n  border: 0;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  font-size: 12px;\n  flex-shrink: 0;\n  transition: background 150ms ease;\n}\n.dock__send:hover:not(:disabled) {\n  background: var(--mj-brand-primary-hover, var(--mj-brand-primary));\n}\n.dock__send:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n\n\n/* ============================================================= COMPACT (Calm Orb \u00B7 overlay)\n   The lean dock \u2014 a \"\u2022\u2022\u2022\" that blooms a small sheet (Details / Type), Captions, the microphone and a red End.\n   Design-system circles. No 5-button bar, no overlapping hint. */\n.dock-lean {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  row-gap: 10px;\n  padding: 16px 18px 20px;\n  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mj-bg-page) 35%, transparent));\n}\n\n/* A narrow lean dock (the call column is at least 420px wide) tightens its gaps, so the microphone's device chevron and\n   the Share arrow fit beside the other controls; where even that is not enough (larger touch targets), it wraps onto a\n   second row rather than cutting off its first and last controls. */\n@container (max-width: 490px) {\n  .dock-lean {\n    gap: 6px;\n    row-gap: 10px;\n    padding-inline: 12px;\n  }\n  .lean__media {\n    gap: 4px;\n  }\n}\n\n\n/* The \"\u2022\u2022\u2022\" overflow + its blooming sheet. */\n.lean-more {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.lean-sheet {\n  position: absolute;\n  bottom: calc(100% + 12px);\n  left: 50%;\n  transform: translateX(-50%) translateY(8px);\n  display: flex;\n  gap: 10px;\n  padding: 10px;\n  border-radius: var(--mj-radius-lg, 16px);\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-default);\n  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.6);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 200ms ease, transform 200ms ease;\n  z-index: 5;\n}\n.lean-more--open .lean-sheet {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(-50%) translateY(0);\n}\n.lean-sheet__btn {\n  display: grid;\n  place-items: center;\n  gap: 3px;\n  width: 56px;\n  padding: 8px 4px;\n  border-radius: var(--mj-radius-md, 10px);\n  border: 1px solid transparent;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 16px;\n  transition: all 140ms ease;\n}\n.lean-sheet__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.lean-sheet__btn--on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 16%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.lean-sheet__btn small {\n  font-size: 9px;\n  font-weight: 600;\n  color: var(--mj-text-muted);\n}\n.lean-sheet__btn--on small {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n"] }]
     }], null, { Open: [{
             type: Input
         }], Compact: [{
@@ -375,6 +386,30 @@ export class RealtimeComposerComponent {
             type: Output
         }], MuteChanged: [{
             type: Output
+        }], ShowCamera: [{
+            type: Input
+        }], ShowShare: [{
+            type: Input
+        }], CameraOn: [{
+            type: Input
+        }], Sharing: [{
+            type: Input
+        }], SharePanels: [{
+            type: Input
+        }], Devices: [{
+            type: Input
+        }], SelectedMicrophoneID: [{
+            type: Input
+        }], SelectedCameraID: [{
+            type: Input
+        }], CameraToggled: [{
+            type: Output
+        }], ShareRequested: [{
+            type: Output
+        }], StopShareRequested: [{
+            type: Output
+        }], DeviceSelected: [{
+            type: Output
         }], IsMuted: [{
             type: Input
         }], dockInput: [{
@@ -384,5 +419,5 @@ export class RealtimeComposerComponent {
             type: HostListener,
             args: ['document:click']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeComposerComponent, { className: "RealtimeComposerComponent", filePath: "src/lib/components/realtime/realtime-composer.component.ts", lineNumber: 32 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeComposerComponent, { className: "RealtimeComposerComponent", filePath: "src/lib/components/realtime/realtime-composer.component.ts", lineNumber: 41 }); })();
 //# sourceMappingURL=realtime-composer.component.js.map