@memberjunction/ng-conversations 5.40.1 → 5.41.0

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

@@ -0,0 +1,256 @@
+import { Component, EventEmitter, Input, Output, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+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";
+const _c0 = ["dockInput"];
+function RealtimeComposerComponent_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "button", 4);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DetailsToggled.emit()); });
+    i0.ɵɵelement(2, "i", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 6);
+    i0.ɵɵtext(4, "Details");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("ctrl--on", ctx_r1.DetailsOn);
+    i0.ɵɵproperty("title", ctx_r1.DetailsOn ? "Hide the session panels" : "Peek at the session panels");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.DetailsOn);
+} }
+function RealtimeComposerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 3)(2, "button", 4);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMute()); });
+    i0.ɵɵelement(3, "i", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 6);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 3)(7, "button", 4);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
+    i0.ɵɵelement(8, "i", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 6);
+    i0.ɵɵtext(10, "Captions");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵconditionalCreate(11, RealtimeComposerComponent_Conditional_0_Conditional_11_Template, 5, 4, "div", 3);
+    i0.ɵɵelementStart(12, "div", 3)(13, "button", 8);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenChanged.emit(true)); });
+    i0.ɵɵelement(14, "i", 9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "span", 6);
+    i0.ɵɵtext(16, "Type");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 3)(18, "button", 10);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_0_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.EndRequested.emit()); });
+    i0.ɵɵelement(19, "i", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "span", 12);
+    i0.ɵɵtext(21, "End call");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "span", 13);
+    i0.ɵɵelement(23, "i", 9);
+    i0.ɵɵtext(24, " press ");
+    i0.ɵɵelementStart(25, "kbd");
+    i0.ɵɵtext(26, "T");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(27, " to type");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("ctrl--muted", ctx_r1.IsMuted);
+    i0.ɵɵproperty("title", ctx_r1.IsMuted ? "Unmute microphone" : "Mute microphone");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.IsMuted);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.IsMuted ? "fa-microphone-slash" : "fa-microphone");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.IsMuted ? "Unmute" : "Mute");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("ctrl--on", ctx_r1.CaptionsOn);
+    i0.ɵɵproperty("title", ctx_r1.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.CaptionsOn);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.ShowDetails ? 11 : -1);
+} }
+function RealtimeComposerComponent_Conditional_1_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.DetailsToggled.emit()); });
+    i0.ɵɵelement(1, "i", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("mini--on", ctx_r1.DetailsOn);
+    i0.ɵɵproperty("title", ctx_r1.DetailsOn ? "Hide the session panels" : "Show the session panels");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.DetailsOn);
+} }
+function RealtimeComposerComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 15)(2, "button", 16);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleMute()); });
+    i0.ɵɵelement(3, "i", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 16);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ToggleCaptions()); });
+    i0.ɵɵelement(5, "i", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, RealtimeComposerComponent_Conditional_1_Conditional_6_Template, 2, 4, "button", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 18)(8, "input", 19, 0);
+    i0.ɵɵtwoWayListener("ngModelChange", function RealtimeComposerComponent_Conditional_1_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.Draft, $event) || (ctx_r1.Draft = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown", function RealtimeComposerComponent_Conditional_1_Template_input_keydown_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnKeydown($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "span", 20);
+    i0.ɵɵtext(11, "\u21B5 send");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 21);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Send()); });
+    i0.ɵɵelement(13, "i", 22);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "button", 23);
+    i0.ɵɵlistener("click", function RealtimeComposerComponent_Conditional_1_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OpenChanged.emit(false)); });
+    i0.ɵɵelement(15, "i", 24);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("mini--muted", ctx_r1.IsMuted);
+    i0.ɵɵproperty("title", ctx_r1.IsMuted ? "Unmute microphone" : "Mute microphone");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.IsMuted);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.IsMuted ? "fa-microphone-slash" : "fa-microphone");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("mini--on", ctx_r1.CaptionsOn);
+    i0.ɵɵproperty("title", ctx_r1.CaptionsOn ? "Voice-first \u2014 back to the orb" : "Show the conversation as text");
+    i0.ɵɵattribute("aria-pressed", ctx_r1.CaptionsOn);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.ShowDetails ? 6 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Draft);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", !ctx_r1.CanSend);
+} }
+/**
+ * The call overlay's BOTTOM DOCK — the progressive-disclosure composer
+ * (`plans/realtime/mockups/redesign-a-progressive.html`). One component, two shapes,
+ * keyed off the overlay's disclosure {@link Level}:
+ *
+ *  - **Levels 0–1 (phone-call strip)** — big round call controls, centered: Mute, the
+ *    Captions toggle (level 1+, arriving WITH the text it controls), the Details peek
+ *    (level 0 paths where the surface panel isn't earned yet — lets the user look at the
+ *    Activity/Whiteboard panels on demand), and End call. Level 1 adds the whispered
+ *    "press T to type" hint — typing exists, but there's no visible composer yet.
+ *  - **Level 2+ (the dock)** — mute/captions shrink to compact minis 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.
+ *
+ * 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.
+ */
+export class RealtimeComposerComponent {
+    /**
+     * Whether the typed-input dock is OPEN. A two-way door owned by the user: the strip's
+     * Type control (or the T hotkey) opens it; the dock's hide control closes it — typing
+     * never becomes permanent chrome. Default closed (voice-first), reset per session.
+     */
+    Open = false;
+    /** Emitted when the user opens (Type control / typing) or closes (hide control) the dock. */
+    OpenChanged = new EventEmitter();
+    /** Whether captions are currently shown (drives the captions control's active state). */
+    CaptionsOn = true;
+    /** Whether the Details peek control renders (true until the surface panel is earned). */
+    ShowDetails = false;
+    /** Whether the Details peek is currently open (active state on the control). */
+    DetailsOn = false;
+    /** Emitted when the user toggles captions; the overlay flips its caption state. */
+    CaptionsToggled = new EventEmitter();
+    /** Emitted when the user toggles the Details peek (the on-demand surface panel). */
+    DetailsToggled = new EventEmitter();
+    /** Emitted when the user ends the call from the strip's End control. */
+    EndRequested = new EventEmitter();
+    /** Current draft text in the dock's composer input. */
+    Draft = '';
+    /** Local mic mute state, reflected from the service. */
+    IsMuted = false;
+    dockInput;
+    voice = inject(RealtimeSessionService);
+    /** True when there's non-whitespace text to send. */
+    get CanSend() {
+        return this.Draft.trim().length > 0;
+    }
+    /** True while the big-controls phone-call strip renders (instead of the dock). */
+    get StripMode() {
+        return !this.Open;
+    }
+    /** Toggle the local microphone mute. */
+    ToggleMute() {
+        this.IsMuted = this.voice.ToggleMute();
+    }
+    /** Toggle captions visibility and notify the overlay. */
+    ToggleCaptions() {
+        this.CaptionsOn = !this.CaptionsOn;
+        this.CaptionsToggled.emit(this.CaptionsOn);
+    }
+    /** Focuses the dock's text input (the overlay's T-to-type hotkey lands here). */
+    FocusInput() {
+        this.dockInput?.nativeElement.focus();
+    }
+    /** Send the typed text into the live session, then clear the input. */
+    Send() {
+        if (!this.CanSend) {
+            return;
+        }
+        this.voice.SendText(this.Draft);
+        this.Draft = '';
+    }
+    /** Enter sends (Shift+Enter is free for future multiline if the input becomes a textarea). */
+    OnKeydown(event) {
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.Send();
+        }
+    }
+    static ɵfac = function RealtimeComposerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeComposerComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeComposerComponent, selectors: [["mj-realtime-composer"]], viewQuery: function RealtimeComposerComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dockInput = _t.first);
+        } }, inputs: { Open: "Open", CaptionsOn: "CaptionsOn", ShowDetails: "ShowDetails", DetailsOn: "DetailsOn" }, outputs: { OpenChanged: "OpenChanged", CaptionsToggled: "CaptionsToggled", DetailsToggled: "DetailsToggled", EndRequested: "EndRequested" }, decls: 2, vars: 1, consts: [["dockInput", ""], ["role", "group", "aria-label", "Call controls", 1, "strip"], [1, "dock"], [1, "ctrl-group"], ["type", "button", 1, "ctrl", 3, "click", "title"], ["aria-hidden", "true", 1, "fa-solid", 3, "ngClass"], [1, "ctrl-label"], ["aria-hidden", "true", 1, "fa-solid", "fa-closed-captioning"], ["type", "button", "title", "Type into the live session", "aria-label", "Open the typed-input composer", 1, "ctrl", 3, "click"], ["aria-hidden", "true", 1, "fa-regular", "fa-keyboard"], ["type", "button", "title", "End call", "aria-label", "End call", 1, "ctrl", "ctrl--end", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-phone-slash"], [1, "ctrl-label", "ctrl-label--end"], [1, "thint"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-columns"], [1, "dock__minis"], ["type", "button", 1, "mini", 3, "click", "title"], ["type", "button", 1, "mini", 3, "mini--on", "title"], [1, "dock__box"], ["type", "text", "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", "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"]], template: function RealtimeComposerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, RealtimeComposerComponent_Conditional_0_Template, 28, 11, "div", 1)(1, RealtimeComposerComponent_Conditional_1_Template, 16, 12, "div", 2);
+        } if (rf & 2) {
+            i0.ɵɵconditional(ctx.StripMode ? 0 : 1);
+        } }, dependencies: [CommonModule, i1.NgClass, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel], styles: ["[_nghost-%COMP%] {\n  display: block;\n}\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: 16px 22px 20px;\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\n.thint[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 22px;\n  bottom: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n}\n.thint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\nkbd[_ngcontent-%COMP%] {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n  padding: 0 5px;\n  background: var(--mj-bg-surface-sunken);\n}\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: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 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}\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.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}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeComposerComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-composer', imports: [CommonModule, FormsModule], template: "@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\n    <span class=\"thint\"><i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i> press <kbd>T</kbd> to type</span>\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      <input\n        #dockInput\n        type=\"text\"\n        class=\"dock__input\"\n        placeholder=\"Type into the live session \u2014 joins this same voice call\u2026\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        aria-label=\"Type a message into the live voice session\" />\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  </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: 16px 22px 20px;\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/* The whispered type-to-text hint (level 1: typing exists, no visible composer yet). */\n.thint {\n  position: absolute;\n  right: 22px;\n  bottom: 20px;\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-disabled);\n}\n.thint i {\n  font-size: 12px;\n}\nkbd {\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  font-size: 10px;\n  font-weight: 700;\n  color: var(--mj-text-muted);\n  border: 1px solid var(--mj-border-strong);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n  padding: 0 5px;\n  background: var(--mj-bg-surface-sunken);\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: center;\n  gap: 9px;\n  padding: 5px 6px 5px 14px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n  transition: border-color 140ms ease, box-shadow 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}\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"] }]
+    }], null, { Open: [{
+            type: Input
+        }], OpenChanged: [{
+            type: Output
+        }], CaptionsOn: [{
+            type: Input
+        }], ShowDetails: [{
+            type: Input
+        }], DetailsOn: [{
+            type: Input
+        }], CaptionsToggled: [{
+            type: Output
+        }], DetailsToggled: [{
+            type: Output
+        }], EndRequested: [{
+            type: Output
+        }], dockInput: [{
+            type: ViewChild,
+            args: ['dockInput']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeComposerComponent, { className: "RealtimeComposerComponent", filePath: "src/lib/components/realtime/realtime-composer.component.ts", lineNumber: 31 }); })();
+//# sourceMappingURL=realtime-composer.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-composer.component.js","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-composer.component.ts","../../../../src/lib/components/realtime/realtime-composer.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, ElementRef, EventEmitter, Input, Output, ViewChild, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { RealtimeSessionService } from '../../services/realtime-session.service';\n\n/**\n * The call overlay's BOTTOM DOCK — the progressive-disclosure composer\n * (`plans/realtime/mockups/redesign-a-progressive.html`). One component, two shapes,\n * keyed off the overlay's disclosure {@link Level}:\n *\n *  - **Levels 0–1 (phone-call strip)** — big round call controls, centered: Mute, the\n *    Captions toggle (level 1+, arriving WITH the text it controls), the Details peek\n *    (level 0 paths where the surface panel isn't earned yet — lets the user look at the\n *    Activity/Whiteboard panels on demand), and End call. Level 1 adds the whispered\n *    \"press T to type\" hint — typing exists, but there's no visible composer yet.\n *  - **Level 2+ (the dock)** — mute/captions shrink to compact minis and the in-call text\n *    input docks beside them (one bottom bar, per Redesign A's fused composer+controls).\n *    Submit calls {@link RealtimeSessionService.SendText}, which injects the text as a user\n *    turn into the SAME live voice call.\n *\n * Mute talks to the session service directly (pure local toggle); captions / Details /\n * End are emitted up so the overlay shell owns that state and lifecycle.\n */\n@Component({\n  standalone: true,\n  selector: 'mj-realtime-composer',\n  imports: [CommonModule, FormsModule],\n  templateUrl: './realtime-composer.component.html',\n  styleUrl: './realtime-composer.component.css'\n})\nexport class RealtimeComposerComponent {\n  /**\n   * Whether the typed-input dock is OPEN. A two-way door owned by the user: the strip's\n   * Type control (or the T hotkey) opens it; the dock's hide control closes it — typing\n   * never becomes permanent chrome. Default closed (voice-first), reset per session.\n   */\n  @Input() Open = false;\n\n  /** Emitted when the user opens (Type control / typing) or closes (hide control) the dock. */\n  @Output() OpenChanged = new EventEmitter<boolean>();\n\n  /** Whether captions are currently shown (drives the captions control's active state). */\n  @Input() CaptionsOn = true;\n\n  /** Whether the Details peek control renders (true until the surface panel is earned). */\n  @Input() ShowDetails = false;\n\n  /** Whether the Details peek is currently open (active state on the control). */\n  @Input() DetailsOn = false;\n\n  /** Emitted when the user toggles captions; the overlay flips its caption state. */\n  @Output() CaptionsToggled = new EventEmitter<boolean>();\n\n  /** Emitted when the user toggles the Details peek (the on-demand surface panel). */\n  @Output() DetailsToggled = new EventEmitter<void>();\n\n  /** Emitted when the user ends the call from the strip's End control. */\n  @Output() EndRequested = new EventEmitter<void>();\n\n  /** Current draft text in the dock's composer input. */\n  public Draft = '';\n\n  /** Local mic mute state, reflected from the service. */\n  public IsMuted = false;\n\n  @ViewChild('dockInput') private dockInput?: ElementRef<HTMLInputElement>;\n\n  private voice = inject(RealtimeSessionService);\n\n  /** True when there's non-whitespace text to send. */\n  public get CanSend(): boolean {\n    return this.Draft.trim().length > 0;\n  }\n\n  /** True while the big-controls phone-call strip renders (instead of the dock). */\n  public get StripMode(): boolean {\n    return !this.Open;\n  }\n\n  /** Toggle the local microphone mute. */\n  public ToggleMute(): void {\n    this.IsMuted = this.voice.ToggleMute();\n  }\n\n  /** Toggle captions visibility and notify the overlay. */\n  public ToggleCaptions(): void {\n    this.CaptionsOn = !this.CaptionsOn;\n    this.CaptionsToggled.emit(this.CaptionsOn);\n  }\n\n  /** Focuses the dock's text input (the overlay's T-to-type hotkey lands here). */\n  public FocusInput(): void {\n    this.dockInput?.nativeElement.focus();\n  }\n\n  /** Send the typed text into the live session, then clear the input. */\n  public Send(): void {\n    if (!this.CanSend) {\n      return;\n    }\n    this.voice.SendText(this.Draft);\n    this.Draft = '';\n  }\n\n  /** Enter sends (Shift+Enter is free for future multiline if the input becomes a textarea). */\n  public OnKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && !event.shiftKey) {\n      event.preventDefault();\n      this.Send();\n    }\n  }\n}\n","@if (StripMode) {\n  <!-- Levels 0–1: phone-call strip — 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 — 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\n    <span class=\"thint\"><i class=\"fa-regular fa-keyboard\" aria-hidden=\"true\"></i> press <kbd>T</kbd> to type</span>\n  </div>\n} @else {\n  <!-- Level 2+: the fused dock — 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 — 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      <input\n        #dockInput\n        type=\"text\"\n        class=\"dock__input\"\n        placeholder=\"Type into the live session — joins this same voice call…\"\n        [(ngModel)]=\"Draft\"\n        (keydown)=\"OnKeydown($event)\"\n        aria-label=\"Type a message into the live voice session\" />\n      <span class=\"dock__hint\" aria-hidden=\"true\">↵ 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 — 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  </div>\n}\n"]}

package/dist/lib/components/realtime/realtime-delegation-card.component.d.ts

@@ -0,0 +1,71 @@
+import { EventEmitter } from '@angular/core';
+import { RealtimeDelegationCardVM } from './realtime-session-state';
+import { ParsedDelegationArtifact } from '../../services/delegation-result-parser';
+import * as i0 from "@angular/core";
+/**
+ * Renders a single delegation in the live session thread:
+ *  - **Working**: a compact card — agent avatar, "<agent> is working…", the CURRENT
+ *    friendly step label, the latest raw message indented + muted beneath it, and a
+ *    thin progress bar (determinate when the server supplies a percentage,
+ *    indeterminate shimmer otherwise).
+ *  - **Done**: COLLAPSED to a single-line chip — `✓ <agent> · <one-line result preview>
+ *    · via <agent>` — expandable inline (click / chevron) to the full result text.
+ *    Failures render the `✗` variant.
+ *
+ * Provenance is a small `via <agent>` badge + a shield icon whose `title` tooltip
+ * carries the full provenance sentence (no repeated sentence under every card).
+ *
+ * DEVELOPER MODE (gear-gated by the overlay shell): when {@link DevMode} is on and the
+ * card knows its delegated run id, an "Open run" link is revealed that emits
+ * {@link OpenRunRequested} so the shell can navigate to the `MJ: AI Agent Runs` record.
+ */
+export declare class RealtimeDelegationCardComponent {
+    /** Maximum characters of the result shown in the collapsed done chip. */
+    private static readonly PreviewMaxChars;
+    /** The delegation card view-model to render (immutable — replaced on every update). */
+    Card: RealtimeDelegationCardVM;
+    /** Whether developer affordances (the "Open run" link) are revealed. */
+    DevMode: boolean;
+    /** Emitted with the delegated run's ID when the dev "Open run" link is clicked. */
+    OpenRunRequested: EventEmitter<string>;
+    /** Emitted when a "View" artifact chip is clicked (the overlay focuses the artifact's tab). */
+    OpenArtifactRequested: EventEmitter<ParsedDelegationArtifact>;
+    /**
+     * Emitted with the call's ID when the WORKING card's ✕ cancel affordance is clicked —
+     * EXPLICIT user intent to kill the in-flight delegated run (by deliberate host policy,
+     * barge-in alone never cancels delegations; only this button does). The overlay routes
+     * it to `RealtimeSessionService.CancelDelegation`, which flips this card to a failed
+     * "Cancelled by user" result.
+     */
+    CancelRequested: EventEmitter<string>;
+    /** Whether the done chip is expanded inline to show the full result text. */
+    Expanded: boolean;
+    /** The artifacts this (done) delegation produced (empty array while running / when none). */
+    get Artifacts(): ParsedDelegationArtifact[];
+    /** Emits the open-artifact request for one of this card's produced artifacts. */
+    OpenArtifact(event: MouseEvent, artifact: ParsedDelegationArtifact): void;
+    /** True when the dev "Open run" link should render (gear on + run id known). */
+    get ShowOpenRun(): boolean;
+    /** Emits the open-run request for this card's delegated run. */
+    OpenRun(event: MouseEvent): void;
+    /** Emits the cancel request for this (still-working) delegation. */
+    CancelWork(event: MouseEvent): void;
+    /** Friendly label for the current delegation step (raw message as fallback). */
+    get StepLabel(): string;
+    /**
+     * Whether to render the latest raw message as the indented detail line. Hidden when
+     * it would just repeat the step label (the unknown-step fallback maps label = message).
+     */
+    get ShowDetailLine(): boolean;
+    /** Full result text (falls back to the last progress message / a generic line). */
+    get ResultText(): string;
+    /** One-line, ~120-char preview of the result for the collapsed chip. */
+    get ResultPreview(): string;
+    /** Tooltip text for the provenance shield icon. */
+    get ProvenanceTitle(): string;
+    /** Toggles the done chip's inline expansion. */
+    ToggleExpanded(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RealtimeDelegationCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RealtimeDelegationCardComponent, "mj-realtime-delegation-card", never, { "Card": { "alias": "Card"; "required": true; }; "DevMode": { "alias": "DevMode"; "required": false; }; }, { "OpenRunRequested": "OpenRunRequested"; "OpenArtifactRequested": "OpenArtifactRequested"; "CancelRequested": "CancelRequested"; }, never, never, true, never>;
+}
+//# sourceMappingURL=realtime-delegation-card.component.d.ts.map

package/dist/lib/components/realtime/realtime-delegation-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"realtime-delegation-card.component.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/realtime/realtime-delegation-card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAAiB,MAAM,eAAe,CAAC;AAEvE,OAAO,EAAE,wBAAwB,EAAqB,MAAM,0BAA0B,CAAC;AACvF,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;;AAEnF;;;;;;;;;;;;;;;;GAgBG;AACH,qBAOa,+BAA+B;IAC1C,yEAAyE;IACzE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAO;IAE9C,uFAAuF;IAC5D,IAAI,EAAG,wBAAwB,CAAC;IAE3D,wEAAwE;IAC/D,OAAO,UAAS;IAEzB,mFAAmF;IACzE,gBAAgB,uBAA8B;IAExD,+FAA+F;IACrF,qBAAqB,yCAAgD;IAE/E;;;;;;OAMG;IACO,eAAe,uBAA8B;IAEvD,6EAA6E;IACtE,QAAQ,UAAS;IAExB,6FAA6F;IAC7F,IAAW,SAAS,IAAI,wBAAwB,EAAE,CAEjD;IAED,iFAAiF;IAC1E,YAAY,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,wBAAwB,GAAG,IAAI;IAKhF,gFAAgF;IAChF,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,gEAAgE;IACzD,OAAO,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAOvC,oEAAoE;IAC7D,UAAU,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,gFAAgF;IAChF,IAAW,SAAS,IAAI,MAAM,CAE7B;IAED;;;OAGG;IACH,IAAW,cAAc,IAAI,OAAO,CAEnC;IAED,mFAAmF;IACnF,IAAW,UAAU,IAAI,MAAM,CAI9B;IAED,wEAAwE;IACxE,IAAW,aAAa,IAAI,MAAM,CAIjC;IAED,mDAAmD;IACnD,IAAW,eAAe,IAAI,MAAM,CAGnC;IAED,gDAAgD;IACzC,cAAc,IAAI,IAAI;yCA9FlB,+BAA+B;2CAA/B,+BAA+B;CAiG3C"}