@memberjunction/ng-whiteboard 0.0.1 → 5.42.0

package/dist/lib/whiteboard-host.component.js

@@ -0,0 +1,758 @@
+import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { WhiteboardState } from './whiteboard-state';
+import { BuildWhiteboardExportHtml, BuildWhiteboardExportHtmlAllPages, BuildWhiteboardExportSvg, BuildWhiteboardExportSvgPages } from './whiteboard-export';
+import { ApplyWhiteboardAgentTool, WHITEBOARD_TOOL_NAMES } from './whiteboard-tools';
+import { RealtimeWhiteboardBoardComponent } from './whiteboard-board.component';
+import { RealtimeWhiteboardToolbarComponent, WHITEBOARD_PEN_COLORS } from './whiteboard-toolbar.component';
+import { RealtimeWhiteboardZoomComponent } from './whiteboard-zoom.component';
+import { RealtimeWhiteboardAgentSeesPopoverComponent } from './whiteboard-agent-sees-popover.component';
+import * as i0 from "@angular/core";
+function RealtimeWhiteboardHostComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-realtime-whiteboard-agent-sees-popover", 14);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("AgentName", ctx_r1.AgentName)("DeltaJson", ctx_r1.LastDeltaJson)("DebounceMs", ctx_r1.SceneDeltaDebounceMs)("ElementCount", ctx_r1.ElementCount)("LastDeltaLabel", ctx_r1.LastDeltaLabel);
+} }
+function RealtimeWhiteboardHostComponent_Conditional_25_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_25_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExportDownloadHtmlAllPages()); });
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵtext(2, " Download HTML \u2014 all pages ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardHostComponent_Conditional_25_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 43);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_25_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ExportDownloadSvgAllPages()); });
+    i0.ɵɵelement(1, "i", 39);
+    i0.ɵɵtext(2, " Download SVG \u2014 all pages ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardHostComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_25_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ExportDownloadHtml()); });
+    i0.ɵɵelement(2, "i", 37);
+    i0.ɵɵtext(3, " Download HTML ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(4, RealtimeWhiteboardHostComponent_Conditional_25_Conditional_4_Template, 3, 0, "button", 38);
+    i0.ɵɵelementStart(5, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_25_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ExportDownloadSvg()); });
+    i0.ɵɵelement(6, "i", 39);
+    i0.ɵɵtext(7, " Download SVG ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, RealtimeWhiteboardHostComponent_Conditional_25_Conditional_8_Template, 3, 0, "button", 40);
+    i0.ɵɵelementStart(9, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_25_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ExportPrint()); });
+    i0.ɵɵelement(10, "i", 41);
+    i0.ɵɵtext(11, " Print ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 36);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_25_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ExportSaveToArtifacts()); });
+    i0.ɵɵelement(13, "i", 42);
+    i0.ɵɵtext(14, " Save to artifacts ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.HasMultiplePages ? 4 : -1);
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional(ctx_r1.HasMultiplePages ? 8 : -1);
+} }
+function RealtimeWhiteboardHostComponent_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelementStart(2, "span", 45);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 46);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Conditional_36_Template_span_click_4_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnToastUndo($event)); });
+    i0.ɵɵelement(5, "i", 47);
+    i0.ɵɵtext(6, " Undo");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.ToastText);
+} }
+/** Debounce window for the perception feed (the popover's "debounce 750 ms" stat). */
+const SCENE_DELTA_DEBOUNCE_MS = 750;
+/** How long the agent-action toast stays up (coalescing further actions while visible). */
+const TOAST_MS = 6000;
+/** How long the presence cursor lingers after the agent's last board action. */
+const PRESENCE_MS = 4200;
+/**
+ * LIVE WHITEBOARD host (`mj-realtime-whiteboard-host`): board header (title / saved chip /
+ * ownership legend / "What [Agent] sees" popover / Focus toggle), the board surface with its
+ * floating toolbar + zoom cluster, the agent action toast with Undo, and the status footer —
+ * everything EXCEPT the overlay/tab chrome, which the session shell owns.
+ *
+ * Integration contract:
+ *  - `State` is created by the integration layer (channel state of record) and passed in;
+ *  - `SceneDelta` emits the debounced (750 ms), coalesced scene-delta JSON on user changes —
+ *    the perception feed the integration pipes into the live agent context;
+ *  - `ApplyAgentTool(toolName, argsJson)` executes one agent channel tool
+ *    (`Whiteboard_AddNote` … see `WHITEBOARD_TOOL_DEFINITIONS`) with the violet pop-in,
+ *    toast and presence-cursor garnish, returning the result JSON for the tool round-trip;
+ *  - `AgentUndo` fires when the user clicks Undo on the agent-action toast;
+ *  - `FocusModeChange` asks the shell to collapse/restore the call rail ("Focus board").
+ *
+ * Extensibility (before/after events): the host mirrors the engine's cancelable
+ * BEFORE / AFTER mutation pairs as outputs (`ItemAdding`/`ItemAdded`,
+ * `ItemUpdating`/`ItemUpdated`, `ItemRemoving`/`ItemRemoved`) and forwards the board's
+ * editor + widget pairs (`ContentApplying`/`ContentApplied`,
+ * `WidgetSubmitting`/`WidgetSubmitted`). All BEFORE events honor `Cancel = true` set
+ * synchronously by a handler.
+ */
+export class RealtimeWhiteboardHostComponent {
+    constructor() {
+        /** Display name of the session's agent (legend, chips, popover, toast). */
+        this.AgentName = 'Agent';
+        /** Board title shown in the header. */
+        this.BoardTitle = 'Whiteboard';
+        /** Persistence chip text (e.g. "Saved to session · v14"). */
+        this.SavedLabel = 'Saved to session';
+        /** Debounced (750 ms), coalesced scene-delta JSON — the live perception feed. */
+        this.SceneDelta = new EventEmitter();
+        /** The user clicked Undo on the agent-action toast (the undo itself already applied). */
+        this.AgentUndo = new EventEmitter();
+        /** Focus-board toggle — the session shell collapses/restores the call rail. */
+        this.FocusModeChange = new EventEmitter();
+        /** Emitted when the user picks "Save to artifacts" — the channel plugin persists via its host context. */
+        this.SaveToArtifactsRequested = new EventEmitter();
+        /**
+         * Cancelable BEFORE event (forwarded from the board): a sandboxed HTML widget submitted
+         * input via `MJWhiteboard.submit` and it passed validation. Set `Cancel = true`
+         * synchronously to drop it before {@link WidgetSubmitted} fires.
+         */
+        this.WidgetSubmitting = new EventEmitter();
+        /**
+         * AFTER event: a sandboxed HTML widget submitted user input via `MJWhiteboard.submit`
+         * (validated + size-capped by the board, not canceled). Integration layers forward it
+         * to their agent runtime — e.g. MJ's channel plugin sends a `[whiteboard]` context note.
+         */
+        this.WidgetSubmitted = new EventEmitter();
+        /**
+         * AMBIENT widget telemetry (forwarded from the board): the injected recorder observed
+         * passive form activity (clicks / changes / typing / focus) inside a sandboxed HTML
+         * widget, validated + pre-summarized. Integration layers forward it to their agent
+         * runtime as throttled, low-priority background context — e.g. MJ's channel plugin sends
+         * an "ambient activity" `[whiteboard]` note at most once per widget per few seconds.
+         */
+        this.WidgetInteraction = new EventEmitter();
+        /**
+         * Cancelable BEFORE event (forwarded from the board): an in-board editor commit is
+         * about to write to the state engine. Set `Cancel = true` synchronously to discard it.
+         */
+        this.ContentApplying = new EventEmitter();
+        /** AFTER event (forwarded from the board): an editor commit applied. */
+        this.ContentApplied = new EventEmitter();
+        // Engine mutation mirrors — the same before/after events {@link WhiteboardState} raises,
+        // re-emitted as component outputs so template-driven consumers can bind them without
+        // subscribing to the engine directly. Emission is synchronous, so cancelable BEFORE
+        // mirrors (`ItemAdding` / `ItemUpdating` / `ItemRemoving`) honor `Cancel = true` set by
+        // a template handler exactly like a direct engine subscription would.
+        /** Cancelable BEFORE mirror of {@link WhiteboardState.ItemAdding$}. */
+        this.ItemAdding = new EventEmitter();
+        /** AFTER mirror of {@link WhiteboardState.ItemAdded$}. */
+        this.ItemAdded = new EventEmitter();
+        /** Cancelable BEFORE mirror of {@link WhiteboardState.ItemUpdating$} (update / move / reorder). */
+        this.ItemUpdating = new EventEmitter();
+        /** AFTER mirror of {@link WhiteboardState.ItemUpdated$}. */
+        this.ItemUpdated = new EventEmitter();
+        /** Cancelable BEFORE mirror of {@link WhiteboardState.ItemRemoving$}. */
+        this.ItemRemoving = new EventEmitter();
+        /** AFTER mirror of {@link WhiteboardState.ItemRemoved$}. */
+        this.ItemRemoved = new EventEmitter();
+        // tool state (host-owned; toolbar + keyboard drive it, board consumes it)
+        this.Tool = 'select';
+        this.PenColor = WHITEBOARD_PEN_COLORS[0];
+        this.PenWidth = 4;
+        this.ShapeKind = 'rect';
+        this.TextSize = 12;
+        this.TextFamily = 'sans';
+        this.TextBold = true;
+        this.TextColor = null;
+        // header state
+        this.SeesOpen = false;
+        this.FocusMode = false;
+        this.ExportOpen = false;
+        // agent garnish state
+        this.AgentPresence = null;
+        this.ToastText = null;
+        this.toastPhrases = [];
+        this.toastTimer = null;
+        this.presenceTimer = null;
+        // perception feed state
+        this.LastDeltaJson = '';
+        this.lastDeltaToken = 0;
+        this.lastDeltaAt = null;
+        this.deltaTimer = null;
+        // "synced n s ago" ticker
+        this.NowTick = Date.now();
+        this.ticker = null;
+        this.mirrorSubs = [];
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    ngOnInit() {
+        this.changedSub = this.State.Changed$.subscribe((change) => {
+            // perception feed: user edits (and scene replacements like undo) schedule a delta
+            if (change.Author === 'user' || change.Op === 'replace') {
+                this.scheduleSceneDelta();
+            }
+            this.cdr.markForCheck();
+        });
+        // Mirror the engine's before/after mutation events as component outputs. The re-emit
+        // runs synchronously inside the engine's emit, so Cancel set by an output handler
+        // still vetoes the mutation.
+        this.mirrorSubs.push(this.State.ItemAdding$.subscribe((e) => this.ItemAdding.emit(e)), this.State.ItemAdded$.subscribe((e) => this.ItemAdded.emit(e)), this.State.ItemUpdating$.subscribe((e) => this.ItemUpdating.emit(e)), this.State.ItemUpdated$.subscribe((e) => this.ItemUpdated.emit(e)), this.State.ItemRemoving$.subscribe((e) => this.ItemRemoving.emit(e)), this.State.ItemRemoved$.subscribe((e) => this.ItemRemoved.emit(e)));
+        this.ticker = setInterval(() => {
+            this.NowTick = Date.now();
+            this.cdr.markForCheck();
+        }, 1000);
+    }
+    ngOnDestroy() {
+        this.changedSub?.unsubscribe();
+        for (const sub of this.mirrorSubs) {
+            sub.unsubscribe();
+        }
+        this.mirrorSubs = [];
+        if (this.deltaTimer) {
+            clearTimeout(this.deltaTimer);
+        }
+        if (this.toastTimer) {
+            clearTimeout(this.toastTimer);
+        }
+        if (this.presenceTimer) {
+            clearTimeout(this.presenceTimer);
+        }
+        if (this.ticker) {
+            clearInterval(this.ticker);
+        }
+    }
+    // ────────────────────────────────────────────── AGENT tool entry point
+    /**
+     * Execute one agent whiteboard tool (author `'agent'`, one undo batch), with the UI
+     * garnish: presence cursor glides to the mutation point, the new item pops in violet,
+     * and the action toast (with Undo) appears. Returns the result JSON string that the
+     * integration layer feeds back to the realtime model as the `tool_response`.
+     */
+    ApplyAgentTool(toolName, argsJson) {
+        const resultJson = ApplyWhiteboardAgentTool(this.State, toolName, argsJson);
+        let result = null;
+        try {
+            result = JSON.parse(resultJson);
+        }
+        catch {
+            result = null;
+        }
+        if (result?.success) {
+            this.showAgentPresence(result.itemId);
+            this.pushToastPhrase(RealtimeWhiteboardHostComponent.toolPhrase(toolName));
+        }
+        this.cdr.markForCheck();
+        return resultJson;
+    }
+    // ────────────────────────────────────────────── header actions
+    ToggleSees(event) {
+        event.stopPropagation();
+        this.SeesOpen = !this.SeesOpen;
+    }
+    CloseSees() {
+        if (this.SeesOpen) {
+            this.SeesOpen = false;
+        }
+    }
+    ToggleFocus() {
+        this.FocusMode = !this.FocusMode;
+        this.FocusModeChange.emit(this.FocusMode);
+    }
+    // ────────────────────────────────────────────── export menu
+    ToggleExport(event) {
+        event.stopPropagation();
+        this.ExportOpen = !this.ExportOpen;
+    }
+    CloseExport() {
+        if (this.ExportOpen) {
+            this.ExportOpen = false;
+        }
+    }
+    /** Download the board as one self-contained HTML document. */
+    /** Request a first-class artifact snapshot of the board (handled by the channel plugin). */
+    ExportSaveToArtifacts() {
+        this.ExportOpen = false;
+        this.SaveToArtifactsRequested.emit();
+    }
+    ExportDownloadHtml() {
+        this.downloadBlob(this.buildExportHtml(), 'text/html', `whiteboard-${RealtimeWhiteboardHostComponent.exportDateStamp()}.html`);
+        this.ExportOpen = false;
+    }
+    /** Download ONE self-contained HTML document containing EVERY page (titled sections). */
+    ExportDownloadHtmlAllPages() {
+        const html = BuildWhiteboardExportHtmlAllPages(this.State, this.exportOptions());
+        this.downloadBlob(html, 'text/html', `whiteboard-all-pages-${RealtimeWhiteboardHostComponent.exportDateStamp()}.html`);
+        this.ExportOpen = false;
+    }
+    /** Download the ACTIVE page as a standalone SVG document. */
+    ExportDownloadSvg() {
+        this.downloadBlob(BuildWhiteboardExportSvg(this.State), 'image/svg+xml', `whiteboard-${RealtimeWhiteboardHostComponent.exportDateStamp()}.svg`);
+        this.ExportOpen = false;
+    }
+    /**
+     * Download EVERY page as its own standalone SVG document (SVG is single-image, so
+     * "all pages" is one file per page, downloaded sequentially with the page name
+     * slug-suffixed into each filename).
+     */
+    ExportDownloadSvgAllPages() {
+        const stamp = RealtimeWhiteboardHostComponent.exportDateStamp();
+        for (const page of BuildWhiteboardExportSvgPages(this.State)) {
+            const slug = RealtimeWhiteboardHostComponent.fileNameSlug(page.PageName) || page.PageID;
+            this.downloadBlob(page.Content, 'image/svg+xml', `whiteboard-${stamp}-${slug}.svg`);
+        }
+        this.ExportOpen = false;
+    }
+    /** Whether the board has more than one page (gates the "all pages" export entries). */
+    get HasMultiplePages() {
+        return this.State.Pages.length > 1;
+    }
+    /**
+     * Print the board: open a blank window, write the self-contained export document and
+     * invoke the print dialog (same precedent as the artifact viewer's print path). When the
+     * popup is blocked this is a logged no-op — nothing breaks, the user can retry.
+     */
+    ExportPrint() {
+        this.ExportOpen = false;
+        const printWindow = window.open('about:blank', '_blank');
+        if (!printWindow) {
+            console.warn('Whiteboard print: popup was blocked — allow popups for this site and retry.');
+            return;
+        }
+        printWindow.document.write(this.buildExportHtml());
+        printWindow.document.close();
+        printWindow.focus();
+        // let the document lay out before invoking the dialog (artifact-viewer precedent)
+        setTimeout(() => printWindow.print(), 250);
+    }
+    buildExportHtml() {
+        return BuildWhiteboardExportHtml(this.State, this.exportOptions());
+    }
+    /** Shared options for the HTML export builders (single page + all pages). */
+    exportOptions() {
+        return {
+            Title: this.BoardTitle,
+            AgentName: this.AgentName,
+            GeneratedAt: new Date().toLocaleString()
+        };
+    }
+    /** Safe filename fragment from a page name (lowercased, non-alphanumerics collapse to '-'). */
+    static fileNameSlug(name) {
+        return (name ?? '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, 40);
+    }
+    downloadBlob(content, mimeType, fileName) {
+        const url = URL.createObjectURL(new Blob([content], { type: mimeType }));
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = fileName;
+        anchor.click();
+        URL.revokeObjectURL(url);
+    }
+    static exportDateStamp() {
+        return new Date().toISOString().slice(0, 10);
+    }
+    // ────────────────────────────────────────────── toast
+    OnToastUndo(event) {
+        event.stopPropagation();
+        // The agent's tool call ran as ONE undo batch, so a single Undo reverts it whole.
+        this.State.Undo();
+        this.hideToast();
+        this.AgentUndo.emit();
+    }
+    // ────────────────────────────────────────────── keyboard shortcuts
+    OnKeydown(event) {
+        const target = event.target;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+            return;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.State.Redo();
+            }
+            else {
+                this.State.Undo();
+            }
+            return;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'y') {
+            event.preventDefault();
+            this.State.Redo();
+            return;
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                this.Tool = 'select';
+                this.Board?.CancelTransient();
+                this.State.Select(null);
+                break;
+            case 'Delete':
+            case 'Backspace':
+                if (this.State.SelectedIDs.length > 0) {
+                    event.preventDefault();
+                    // removes the WHOLE (single or multi) selection as one undo step
+                    this.State.RemoveSelected('user');
+                }
+                break;
+            default: {
+                const tool = RealtimeWhiteboardHostComponent.toolForKey(event.key);
+                if (tool) {
+                    this.Tool = tool;
+                }
+                break;
+            }
+        }
+    }
+    // ────────────────────────────────────────────── status footer / popover bindings
+    get ElementCount() {
+        return this.State.ElementCount;
+    }
+    get UserCount() {
+        return this.State.CountByAuthor('user');
+    }
+    get AgentCount() {
+        return this.State.CountByAuthor('agent');
+    }
+    get CurrentSeq() {
+        return this.State.CurrentSeq;
+    }
+    /** "2 s ago" style age of the last emitted delta (the ticker keeps it fresh). */
+    get LastDeltaLabel() {
+        if (this.lastDeltaAt == null) {
+            return '—';
+        }
+        const seconds = Math.max(0, Math.round((this.NowTick - this.lastDeltaAt) / 1000));
+        if (seconds < 60) {
+            return `${seconds} s ago`;
+        }
+        return `${Math.floor(seconds / 60)} min ago`;
+    }
+    get SceneDeltaDebounceMs() {
+        return SCENE_DELTA_DEBOUNCE_MS;
+    }
+    // ────────────────────────────────────────────── internals
+    scheduleSceneDelta() {
+        if (this.deltaTimer) {
+            clearTimeout(this.deltaTimer);
+        }
+        this.deltaTimer = setTimeout(() => {
+            this.deltaTimer = null;
+            this.emitSceneDelta();
+        }, SCENE_DELTA_DEBOUNCE_MS);
+    }
+    emitSceneDelta() {
+        const delta = this.State.BuildSceneDelta(this.lastDeltaToken);
+        this.lastDeltaToken = this.State.CurrentSeq;
+        this.lastDeltaAt = Date.now();
+        this.LastDeltaJson = JSON.stringify(delta, null, 2);
+        this.SceneDelta.emit(JSON.stringify(delta));
+        this.cdr.markForCheck();
+    }
+    showAgentPresence(itemId) {
+        let x = 480;
+        let y = 220;
+        const item = itemId ? this.State.GetItem(itemId) : undefined;
+        if (item) {
+            const b = this.State.ItemBounds(item);
+            x = b.X + b.W + 14;
+            y = b.Y + b.H / 2 - 13;
+        }
+        this.AgentPresence = { Active: true, X: x, Y: y, Label: `${this.AgentName} is drawing…` };
+        if (this.presenceTimer) {
+            clearTimeout(this.presenceTimer);
+        }
+        this.presenceTimer = setTimeout(() => {
+            this.AgentPresence = null;
+            this.cdr.markForCheck();
+        }, PRESENCE_MS);
+    }
+    pushToastPhrase(phrase) {
+        if (!this.ToastText) {
+            this.toastPhrases = [];
+        }
+        if (!this.toastPhrases.includes(phrase)) {
+            this.toastPhrases.push(phrase);
+        }
+        const joined = this.toastPhrases.length > 1
+            ? `${this.toastPhrases.slice(0, -1).join(', ')} & ${this.toastPhrases[this.toastPhrases.length - 1]}`
+            : this.toastPhrases[0];
+        this.ToastText = `${this.AgentName} ${joined} · just now`;
+        if (this.toastTimer) {
+            clearTimeout(this.toastTimer);
+        }
+        this.toastTimer = setTimeout(() => this.hideToast(), TOAST_MS);
+    }
+    hideToast() {
+        this.ToastText = null;
+        this.toastPhrases = [];
+        if (this.toastTimer) {
+            clearTimeout(this.toastTimer);
+            this.toastTimer = null;
+        }
+        this.cdr.markForCheck();
+    }
+    static toolPhrase(toolName) {
+        switch (toolName) {
+            case WHITEBOARD_TOOL_NAMES.AddNote: return 'added a note';
+            case WHITEBOARD_TOOL_NAMES.AddShape: return 'added a shape';
+            case WHITEBOARD_TOOL_NAMES.AddText: return 'added a label';
+            case WHITEBOARD_TOOL_NAMES.AddMarkdown: return 'added a markdown panel';
+            case WHITEBOARD_TOOL_NAMES.AddHtml: return 'added an HTML widget';
+            case WHITEBOARD_TOOL_NAMES.UpdateContent: return 'edited an item';
+            case WHITEBOARD_TOOL_NAMES.DrawConnector: return 'added a connector';
+            case WHITEBOARD_TOOL_NAMES.Highlight: return 'highlighted a region';
+            case WHITEBOARD_TOOL_NAMES.MoveItem: return 'moved an item';
+            case WHITEBOARD_TOOL_NAMES.RemoveItem: return 'removed an item';
+            case WHITEBOARD_TOOL_NAMES.StyleItem: return 'restyled an item';
+            case WHITEBOARD_TOOL_NAMES.AddPage: return 'created a page';
+            case WHITEBOARD_TOOL_NAMES.SwitchPage: return 'switched pages';
+            case WHITEBOARD_TOOL_NAMES.RenamePage: return 'renamed a page';
+            default: return 'updated the board';
+        }
+    }
+    static toolForKey(key) {
+        switch (key.toLowerCase()) {
+            case 'v': return 'select';
+            case 'h': return 'pan';
+            case 'p': return 'pen';
+            case 'r': return 'shape';
+            case 's': return 'sticky';
+            case 't': return 'text';
+            case 'm': return 'markdown';
+            case 'w': return 'html';
+            case 'i': return 'image';
+            case 'c': return 'connector';
+            case 'e': return 'eraser';
+            default: return null;
+        }
+    }
+    static { this.ɵfac = function RealtimeWhiteboardHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeWhiteboardHostComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeWhiteboardHostComponent, selectors: [["mj-realtime-whiteboard-host"]], viewQuery: function RealtimeWhiteboardHostComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(RealtimeWhiteboardBoardComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.Board = _t.first);
+        } }, hostBindings: function RealtimeWhiteboardHostComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_click_HostBindingHandler() { return ctx.CloseExport(); }, i0.ɵɵresolveDocument)("keydown", function RealtimeWhiteboardHostComponent_keydown_HostBindingHandler($event) { return ctx.OnKeydown($event); }, i0.ɵɵresolveDocument);
+        } }, inputs: { State: "State", AgentName: "AgentName", BoardTitle: "BoardTitle", SavedLabel: "SavedLabel" }, outputs: { SceneDelta: "SceneDelta", AgentUndo: "AgentUndo", FocusModeChange: "FocusModeChange", SaveToArtifactsRequested: "SaveToArtifactsRequested", WidgetSubmitting: "WidgetSubmitting", WidgetSubmitted: "WidgetSubmitted", WidgetInteraction: "WidgetInteraction", ContentApplying: "ContentApplying", ContentApplied: "ContentApplied", ItemAdding: "ItemAdding", ItemAdded: "ItemAdded", ItemUpdating: "ItemUpdating", ItemUpdated: "ItemUpdated", ItemRemoving: "ItemRemoving", ItemRemoved: "ItemRemoved" }, decls: 70, vars: 48, consts: [["board", ""], [1, "board-head"], [1, "bt"], [1, "fa-solid", "fa-chalkboard"], [1, "board-save"], [1, "fa-solid", "fa-circle-check"], [1, "board-legend"], [1, "sw", "sw--you"], [1, "sw", "sw--sage"], [1, "fa-solid", "fa-feather", "legend-feather"], [1, "head-end"], ["type", "button", 1, "head-btn", "head-btn--sees", 3, "click"], [1, "eye-pulse"], [1, "fa-regular", "fa-eye"], [3, "AgentName", "DeltaJson", "DebounceMs", "ElementCount", "LastDeltaLabel"], [1, "export-wrap"], ["type", "button", 1, "head-btn", 3, "click"], [1, "fa-solid", "fa-file-export"], [1, "export-menu"], ["type", "button", "title", "More", 1, "head-btn", "head-btn--more"], [1, "fa-solid", "fa-ellipsis"], [1, "board-wrap"], [3, "ToolChangeRequest", "WidgetSubmitting", "WidgetSubmitted", "WidgetInteraction", "ContentApplying", "ContentApplied", "State", "AgentName", "Tool", "PenColor", "PenWidth", "ShapeKind", "TextSize", "TextFamily", "TextBold", "TextColor", "AgentPresence"], [3, "ToolChange", "PenColorChange", "PenWidthChange", "ShapeKindChange", "TextSizeChange", "TextFamilyChange", "TextBoldChange", "TextColorChange", "StyleSelection", "Undo", "Redo", "ActiveTool", "PenColor", "PenWidth", "ShapeKind", "TextSize", "TextFamily", "TextBold", "TextColor", "CanUndo", "CanRedo", "AgentName"], [3, "ZoomOut", "ZoomIn", "ZoomBy", "Fit", "ToggleMinimap", "ZoomPercent", "MinimapOpen"], [1, "board-toast"], [1, "board-status"], [1, "stat"], [1, "seg-r"], [1, "stat", "ctx-live", 3, "title"], [1, "d"], [1, "ctx-live__text"], ["title", "Persists as a session artifact when the call ends", 1, "stat", "persist"], ["aria-hidden", "true", 1, "fa-solid", "fa-box-archive"], [1, "persist__long"], [1, "persist__short"], ["type", "button", 1, "export-item", 3, "click"], [1, "fa-solid", "fa-file-code"], ["type", "button", 1, "export-item"], [1, "fa-solid", "fa-bezier-curve"], ["type", "button", "title", "One SVG file per page", 1, "export-item"], [1, "fa-solid", "fa-print"], [1, "fa-solid", "fa-box-archive"], ["type", "button", "title", "One SVG file per page", 1, "export-item", 3, "click"], [1, "fa-solid", "fa-feather"], [1, "board-toast__text"], [1, "undo", 3, "click"], [1, "fa-solid", "fa-rotate-left"]], template: function RealtimeWhiteboardHostComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "span", 2);
+            i0.ɵɵelement(2, "i", 3);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "span", 4);
+            i0.ɵɵelement(5, "i", 5);
+            i0.ɵɵtext(6);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "span", 6)(8, "span");
+            i0.ɵɵelement(9, "span", 7);
+            i0.ɵɵtext(10, "You");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "span");
+            i0.ɵɵelement(12, "span", 8);
+            i0.ɵɵtext(13);
+            i0.ɵɵelement(14, "i", 9);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(15, "div", 10)(16, "button", 11);
+            i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Template_button_click_16_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleSees($event)); });
+            i0.ɵɵelement(17, "span", 12)(18, "i", 13);
+            i0.ɵɵtext(19);
+            i0.ɵɵconditionalCreate(20, RealtimeWhiteboardHostComponent_Conditional_20_Template, 1, 5, "mj-realtime-whiteboard-agent-sees-popover", 14);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "span", 15)(22, "button", 16);
+            i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Template_button_click_22_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleExport($event)); });
+            i0.ɵɵelement(23, "i", 17);
+            i0.ɵɵtext(24, " Export ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(25, RealtimeWhiteboardHostComponent_Conditional_25_Template, 15, 2, "div", 18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "button", 16);
+            i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ToggleFocus()); });
+            i0.ɵɵelement(27, "i");
+            i0.ɵɵtext(28);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "button", 19);
+            i0.ɵɵelement(30, "i", 20);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(31, "div", 21)(32, "mj-realtime-whiteboard", 22, 0);
+            i0.ɵɵlistener("ToolChangeRequest", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_ToolChangeRequest_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Tool = $event); })("WidgetSubmitting", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_WidgetSubmitting_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.WidgetSubmitting.emit($event)); })("WidgetSubmitted", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_WidgetSubmitted_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.WidgetSubmitted.emit($event)); })("WidgetInteraction", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_WidgetInteraction_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.WidgetInteraction.emit($event)); })("ContentApplying", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_ContentApplying_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ContentApplying.emit($event)); })("ContentApplied", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_ContentApplied_32_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ContentApplied.emit($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "mj-realtime-whiteboard-toolbar", 23);
+            i0.ɵɵlistener("ToolChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_ToolChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.Tool = $event); })("PenColorChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_PenColorChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.PenColor = $event); })("PenWidthChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_PenWidthChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.PenWidth = $event); })("ShapeKindChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_ShapeKindChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.ShapeKind = $event); })("TextSizeChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_TextSizeChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.TextSize = $event); })("TextFamilyChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_TextFamilyChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.TextFamily = $event); })("TextBoldChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_TextBoldChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.TextBold = $event); })("TextColorChange", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_TextColorChange_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.TextColor = $event); })("StyleSelection", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_StyleSelection_34_listener($event) { i0.ɵɵrestoreView(_r1); const board_r6 = i0.ɵɵreference(33); return i0.ɵɵresetView(board_r6.ApplyTextStyleToSelection($event)); })("Undo", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_Undo_34_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.State.Undo()); })("Redo", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_toolbar_Redo_34_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.State.Redo()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(35, "mj-realtime-whiteboard-zoom", 24);
+            i0.ɵɵlistener("ZoomOut", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_zoom_ZoomOut_35_listener() { i0.ɵɵrestoreView(_r1); const board_r6 = i0.ɵɵreference(33); return i0.ɵɵresetView(board_r6.ZoomOut()); })("ZoomIn", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_zoom_ZoomIn_35_listener() { i0.ɵɵrestoreView(_r1); const board_r6 = i0.ɵɵreference(33); return i0.ɵɵresetView(board_r6.ZoomIn()); })("ZoomBy", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_zoom_ZoomBy_35_listener($event) { i0.ɵɵrestoreView(_r1); const board_r6 = i0.ɵɵreference(33); return i0.ɵɵresetView(board_r6.ZoomByFactor($event)); })("Fit", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_zoom_Fit_35_listener() { i0.ɵɵrestoreView(_r1); const board_r6 = i0.ɵɵreference(33); return i0.ɵɵresetView(board_r6.FitToContent()); })("ToggleMinimap", function RealtimeWhiteboardHostComponent_Template_mj_realtime_whiteboard_zoom_ToggleMinimap_35_listener() { i0.ɵɵrestoreView(_r1); const board_r6 = i0.ɵɵreference(33); return i0.ɵɵresetView(board_r6.ToggleMinimap()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(36, RealtimeWhiteboardHostComponent_Conditional_36_Template, 7, 1, "div", 25);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(37, "div", 26)(38, "span", 27)(39, "b");
+            i0.ɵɵtext(40);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(41, " elements");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "span", 27);
+            i0.ɵɵtext(43, "you ");
+            i0.ɵɵelementStart(44, "b");
+            i0.ɵɵtext(45);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(46);
+            i0.ɵɵelementStart(47, "b");
+            i0.ɵɵtext(48);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(49, "span", 27);
+            i0.ɵɵtext(50, "synced ");
+            i0.ɵɵelementStart(51, "b");
+            i0.ɵɵtext(52);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(53, " \u00B7 seq ");
+            i0.ɵɵelementStart(54, "b");
+            i0.ɵɵtext(55);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(56, "span", 28)(57, "span", 29);
+            i0.ɵɵelement(58, "span", 30);
+            i0.ɵɵelementStart(59, "span", 31);
+            i0.ɵɵtext(60);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(61, "span", 32);
+            i0.ɵɵelement(62, "i", 33);
+            i0.ɵɵelementStart(63, "span", 34);
+            i0.ɵɵtext(64, "persists as ");
+            i0.ɵɵelementStart(65, "b");
+            i0.ɵɵtext(66, "session artifact");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(67, " when the call ends");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(68, "span", 35);
+            i0.ɵɵtext(69, "session artifact");
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            const board_r6 = i0.ɵɵreference(33);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", ctx.BoardTitle);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", ctx.SavedLabel);
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate1("", ctx.AgentName, " ");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("on", ctx.SeesOpen);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" What ", ctx.AgentName, " sees ");
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.SeesOpen ? 20 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("on", ctx.ExportOpen);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.ExportOpen ? 25 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("on", ctx.FocusMode);
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.FocusMode ? "fa-solid fa-compress" : "fa-solid fa-expand");
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" ", ctx.FocusMode ? "Show thread" : "Focus board", " ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("State", ctx.State)("AgentName", ctx.AgentName)("Tool", ctx.Tool)("PenColor", ctx.PenColor)("PenWidth", ctx.PenWidth)("ShapeKind", ctx.ShapeKind)("TextSize", ctx.TextSize)("TextFamily", ctx.TextFamily)("TextBold", ctx.TextBold)("TextColor", ctx.TextColor)("AgentPresence", ctx.AgentPresence);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ActiveTool", ctx.Tool)("PenColor", ctx.PenColor)("PenWidth", ctx.PenWidth)("ShapeKind", ctx.ShapeKind)("TextSize", ctx.TextSize)("TextFamily", ctx.TextFamily)("TextBold", ctx.TextBold)("TextColor", ctx.TextColor)("CanUndo", ctx.State.CanUndo)("CanRedo", ctx.State.CanRedo)("AgentName", ctx.AgentName);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ZoomPercent", board_r6.ZoomPercent)("MinimapOpen", board_r6.MinimapOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.ToastText ? 36 : -1);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.ElementCount);
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate(ctx.UserCount);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" \u00B7 ", ctx.AgentName, " ");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.AgentCount);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.LastDeltaLabel);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.CurrentSeq);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("title", ctx.AgentName + "\u2019s live context: current");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", ctx.AgentName, "'s live context: current");
+        } }, dependencies: [CommonModule,
+            RealtimeWhiteboardBoardComponent,
+            RealtimeWhiteboardToolbarComponent,
+            RealtimeWhiteboardZoomComponent,
+            RealtimeWhiteboardAgentSeesPopoverComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  \n\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 14%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 45%, transparent);\n  --sage-chip-bg: color-mix(in srgb, var(--mj-color-violet-500, #8b5cf6) 32%, var(--mj-bg-surface-sunken));\n\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  \n\n  container-type: inline-size;\n  container-name: wb-host;\n}\n\n\n\n.board-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 9px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n.board-head[_ngcontent-%COMP%]   .bt[_ngcontent-%COMP%] {\n  font-weight: 700;\n  font-size: 13.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n.board-head[_ngcontent-%COMP%]   .bt[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n  font-size: 13px;\n}\n.board-save[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n.board-save[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  font-size: 10px;\n}\n\n.board-legend[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-left: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n}\n.board-legend[_ngcontent-%COMP%]   .sw[_ngcontent-%COMP%] {\n  width: 10px;\n  height: 10px;\n  border-radius: 3px;\n  display: inline-block;\n  vertical-align: -1px;\n  margin-right: 5px;\n}\n.board-legend[_ngcontent-%COMP%]   .sw--you[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-strong);\n}\n.board-legend[_ngcontent-%COMP%]   .sw--sage[_ngcontent-%COMP%] {\n  background: var(--sage-bg);\n  border: 1px solid var(--sage);\n}\n.legend-feather[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--sage);\n}\n\n.head-end[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n}\n\n.head-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 11px;\n  font-size: 11.5px;\n  font-weight: 600;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  transition: all 140ms ease;\n  font-family: inherit;\n}\n.head-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n.head-btn.on[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.head-btn--sees[_ngcontent-%COMP%] {\n  position: relative;\n}\n.head-btn--sees[_ngcontent-%COMP%]   .eye-pulse[_ngcontent-%COMP%] {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--sage);\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 50%, transparent);\n  animation: _ngcontent-%COMP%_wb-pulse-ring 2s infinite;\n}\n.head-btn--more[_ngcontent-%COMP%] {\n  padding: 5px 9px;\n}\n\n\n\n.export-wrap[_ngcontent-%COMP%] {\n  position: relative;\n  display: inline-flex;\n}\n.export-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  z-index: 30;\n  min-width: 168px;\n  display: flex;\n  flex-direction: column;\n  padding: 5px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-elevated);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n}\n.export-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  font-size: 11.5px;\n  font-weight: 600;\n  font-family: inherit;\n  text-align: left;\n  border: none;\n  border-radius: var(--mj-radius-sm, 5px);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.export-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.export-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 14px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.export-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n@keyframes _ngcontent-%COMP%_wb-pulse-ring {\n  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 50%, transparent); }\n  70% { box-shadow: 0 0 0 6px transparent; }\n  100% { box-shadow: 0 0 0 0 transparent; }\n}\n\n\n\n.board-wrap[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n\n\n\n\n\n.board-toast[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 50%;\n  bottom: 64px;\n  transform: translateX(-50%);\n  z-index: 9;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 16px;\n  max-width: calc(100% - 32px);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage-border);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  font-size: 12px;\n  font-weight: 600;\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  animation: _ngcontent-%COMP%_wb-toast-fade 300ms ease both;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.board-toast[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n.board-toast__text[_ngcontent-%COMP%] {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.board-toast[_ngcontent-%COMP%]   .undo[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n@keyframes _ngcontent-%COMP%_wb-toast-fade {\n  from { opacity: 0; transform: translate(-50%, 4px); }\n  to { opacity: 1; transform: translate(-50%, 0); }\n}\n.board-toast[_ngcontent-%COMP%]   .undo[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  cursor: pointer;\n  margin-left: 4px;\n}\n.board-toast[_ngcontent-%COMP%]   .undo[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n\n\n.board-status[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 18px;\n  padding: 6px 16px;\n  flex-shrink: 0;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n.board-status[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n.board-status[_ngcontent-%COMP%]   .seg-r[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 18px;\n}\n.board-status[_ngcontent-%COMP%]   .ctx-live[_ngcontent-%COMP%] {\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.board-status[_ngcontent-%COMP%]   .ctx-live[_ngcontent-%COMP%]   .d[_ngcontent-%COMP%] {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--sage);\n  animation: _ngcontent-%COMP%_wb-pulse-ring 2s infinite;\n}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeWhiteboardHostComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-whiteboard-host', imports: [
+                    CommonModule,
+                    RealtimeWhiteboardBoardComponent,
+                    RealtimeWhiteboardToolbarComponent,
+                    RealtimeWhiteboardZoomComponent,
+                    RealtimeWhiteboardAgentSeesPopoverComponent
+                ], template: "<!-- board header -->\n<div class=\"board-head\">\n  <span class=\"bt\"><i class=\"fa-solid fa-chalkboard\"></i> {{ BoardTitle }}</span>\n  <span class=\"board-save\"><i class=\"fa-solid fa-circle-check\"></i> {{ SavedLabel }}</span>\n  <span class=\"board-legend\">\n    <span><span class=\"sw sw--you\"></span>You</span>\n    <span><span class=\"sw sw--sage\"></span>{{ AgentName }} <i class=\"fa-solid fa-feather legend-feather\"></i></span>\n  </span>\n  <div class=\"head-end\">\n    <button type=\"button\" class=\"head-btn head-btn--sees\" [class.on]=\"SeesOpen\" (click)=\"ToggleSees($event)\">\n      <span class=\"eye-pulse\"></span><i class=\"fa-regular fa-eye\"></i> What {{ AgentName }} sees\n      @if (SeesOpen) {\n        <mj-realtime-whiteboard-agent-sees-popover\n          [AgentName]=\"AgentName\"\n          [DeltaJson]=\"LastDeltaJson\"\n          [DebounceMs]=\"SceneDeltaDebounceMs\"\n          [ElementCount]=\"ElementCount\"\n          [LastDeltaLabel]=\"LastDeltaLabel\"/>\n      }\n    </button>\n    <span class=\"export-wrap\">\n      <button type=\"button\" class=\"head-btn\" [class.on]=\"ExportOpen\" (click)=\"ToggleExport($event)\">\n        <i class=\"fa-solid fa-file-export\"></i> Export\n      </button>\n      @if (ExportOpen) {\n        <div class=\"export-menu\">\n          <button type=\"button\" class=\"export-item\" (click)=\"ExportDownloadHtml()\">\n            <i class=\"fa-solid fa-file-code\"></i> Download HTML\n          </button>\n          @if (HasMultiplePages) {\n            <button type=\"button\" class=\"export-item\" (click)=\"ExportDownloadHtmlAllPages()\">\n              <i class=\"fa-solid fa-file-code\"></i> Download HTML \u2014 all pages\n            </button>\n          }\n          <button type=\"button\" class=\"export-item\" (click)=\"ExportDownloadSvg()\">\n            <i class=\"fa-solid fa-bezier-curve\"></i> Download SVG\n          </button>\n          @if (HasMultiplePages) {\n            <button type=\"button\" class=\"export-item\" title=\"One SVG file per page\"\n                    (click)=\"ExportDownloadSvgAllPages()\">\n              <i class=\"fa-solid fa-bezier-curve\"></i> Download SVG \u2014 all pages\n            </button>\n          }\n          <button type=\"button\" class=\"export-item\" (click)=\"ExportPrint()\">\n            <i class=\"fa-solid fa-print\"></i> Print\n          </button>\n          <button type=\"button\" class=\"export-item\" (click)=\"ExportSaveToArtifacts()\">\n            <i class=\"fa-solid fa-box-archive\"></i> Save to artifacts\n          </button>\n        </div>\n      }\n    </span>\n    <button type=\"button\" class=\"head-btn\" [class.on]=\"FocusMode\" (click)=\"ToggleFocus()\">\n      <i [class]=\"FocusMode ? 'fa-solid fa-compress' : 'fa-solid fa-expand'\"></i>\n      {{ FocusMode ? 'Show thread' : 'Focus board' }}\n    </button>\n    <button type=\"button\" class=\"head-btn head-btn--more\" title=\"More\"><i class=\"fa-solid fa-ellipsis\"></i></button>\n  </div>\n</div>\n\n<!-- the board -->\n<div class=\"board-wrap\">\n  <mj-realtime-whiteboard #board\n    [State]=\"State\"\n    [AgentName]=\"AgentName\"\n    [Tool]=\"Tool\"\n    [PenColor]=\"PenColor\"\n    [PenWidth]=\"PenWidth\"\n    [ShapeKind]=\"ShapeKind\"\n    [TextSize]=\"TextSize\"\n    [TextFamily]=\"TextFamily\"\n    [TextBold]=\"TextBold\"\n    [TextColor]=\"TextColor\"\n    [AgentPresence]=\"AgentPresence\"\n    (ToolChangeRequest)=\"Tool = $event\"\n    (WidgetSubmitting)=\"WidgetSubmitting.emit($event)\"\n    (WidgetSubmitted)=\"WidgetSubmitted.emit($event)\"\n    (WidgetInteraction)=\"WidgetInteraction.emit($event)\"\n    (ContentApplying)=\"ContentApplying.emit($event)\"\n    (ContentApplied)=\"ContentApplied.emit($event)\"/>\n\n  <mj-realtime-whiteboard-toolbar\n    [ActiveTool]=\"Tool\"\n    [PenColor]=\"PenColor\"\n    [PenWidth]=\"PenWidth\"\n    [ShapeKind]=\"ShapeKind\"\n    [TextSize]=\"TextSize\"\n    [TextFamily]=\"TextFamily\"\n    [TextBold]=\"TextBold\"\n    [TextColor]=\"TextColor\"\n    [CanUndo]=\"State.CanUndo\"\n    [CanRedo]=\"State.CanRedo\"\n    [AgentName]=\"AgentName\"\n    (ToolChange)=\"Tool = $event\"\n    (PenColorChange)=\"PenColor = $event\"\n    (PenWidthChange)=\"PenWidth = $event\"\n    (ShapeKindChange)=\"ShapeKind = $event\"\n    (TextSizeChange)=\"TextSize = $event\"\n    (TextFamilyChange)=\"TextFamily = $event\"\n    (TextBoldChange)=\"TextBold = $event\"\n    (TextColorChange)=\"TextColor = $event\"\n    (StyleSelection)=\"board.ApplyTextStyleToSelection($event)\"\n    (Undo)=\"State.Undo()\"\n    (Redo)=\"State.Redo()\"/>\n\n  <mj-realtime-whiteboard-zoom\n    [ZoomPercent]=\"board.ZoomPercent\"\n    [MinimapOpen]=\"board.MinimapOpen\"\n    (ZoomOut)=\"board.ZoomOut()\"\n    (ZoomIn)=\"board.ZoomIn()\"\n    (ZoomBy)=\"board.ZoomByFactor($event)\"\n    (Fit)=\"board.FitToContent()\"\n    (ToggleMinimap)=\"board.ToggleMinimap()\"/>\n\n  <!-- agent action toast -->\n  @if (ToastText) {\n    <div class=\"board-toast\">\n      <i class=\"fa-solid fa-feather\"></i>\n      <span class=\"board-toast__text\">{{ ToastText }}</span>\n      <span class=\"undo\" (click)=\"OnToastUndo($event)\"><i class=\"fa-solid fa-rotate-left\"></i> Undo</span>\n    </div>\n  }\n</div>\n\n<!-- board status footer: ONE row, never wraps \u2014 items ellipsize, and the long\n     persistence prose collapses to an icon chip (full text on its tooltip) when\n     the host is narrow (container query on the host width). -->\n<div class=\"board-status\">\n  <span class=\"stat\"><b>{{ ElementCount }}</b> elements</span>\n  <span class=\"stat\">you <b>{{ UserCount }}</b> \u00B7 {{ AgentName }} <b>{{ AgentCount }}</b></span>\n  <span class=\"stat\">synced <b>{{ LastDeltaLabel }}</b> \u00B7 seq <b>{{ CurrentSeq }}</b></span>\n  <span class=\"seg-r\">\n    <span class=\"stat ctx-live\" [title]=\"AgentName + '\u2019s live context: current'\">\n      <span class=\"d\"></span><span class=\"ctx-live__text\"> {{ AgentName }}'s live context: current</span>\n    </span>\n    <span class=\"stat persist\" title=\"Persists as a session artifact when the call ends\">\n      <i class=\"fa-solid fa-box-archive\" aria-hidden=\"true\"></i>\n      <span class=\"persist__long\">persists as <b>session artifact</b> when the call ends</span>\n      <span class=\"persist__short\">session artifact</span>\n    </span>\n  </span>\n</div>\n", styles: ["/* LIVE WHITEBOARD host chrome \u2014 board header, board wrap, agent toast, status footer.\n   Ported pixel-faithfully from plans/realtime/mockups/whiteboard.html\n   (.board-head, .head-btn, .board-legend, .board-toast, .board-status). */\n\n:host {\n  /* agent (violet) accent \u2014 same derivation as the sibling realtime components */\n  --sage: var(--mj-color-violet-400, #a78bfa);\n  --sage-bg: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 14%, transparent);\n  --sage-border: color-mix(in srgb, var(--mj-color-violet-400, #a78bfa) 45%, transparent);\n  --sage-chip-bg: color-mix(in srgb, var(--mj-color-violet-500, #8b5cf6) 32%, var(--mj-bg-surface-sunken));\n\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  height: 100%;\n  /* width container \u2014 drives the status footer's narrow-width collapse rules */\n  container-type: inline-size;\n  container-name: wb-host;\n}\n\n/* ---------- board header row ---------- */\n.board-head {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 9px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n.board-head .bt {\n  font-weight: 700;\n  font-size: 13.5px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-text-primary);\n}\n.board-head .bt i {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n  font-size: 13px;\n}\n.board-save {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n.board-save i {\n  color: var(--mj-status-success);\n  font-size: 10px;\n}\n\n.board-legend {\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  margin-left: 6px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface-card);\n}\n.board-legend .sw {\n  width: 10px;\n  height: 10px;\n  border-radius: 3px;\n  display: inline-block;\n  vertical-align: -1px;\n  margin-right: 5px;\n}\n.board-legend .sw--you {\n  background: var(--mj-bg-surface-elevated);\n  border: 1px solid var(--mj-border-strong);\n}\n.board-legend .sw--sage {\n  background: var(--sage-bg);\n  border: 1px solid var(--sage);\n}\n.legend-feather {\n  font-size: 9px;\n  color: var(--sage);\n}\n\n.head-end {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n}\n\n.head-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 11px;\n  font-size: 11.5px;\n  font-weight: 600;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  transition: all 140ms ease;\n  font-family: inherit;\n}\n.head-btn:hover {\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-strong);\n}\n.head-btn.on {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, transparent);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.head-btn--sees {\n  position: relative;\n}\n.head-btn--sees .eye-pulse {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--sage);\n  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 50%, transparent);\n  animation: wb-pulse-ring 2s infinite;\n}\n.head-btn--more {\n  padding: 5px 9px;\n}\n\n/* ---------- export menu (Download HTML / Download SVG / Print) ---------- */\n.export-wrap {\n  position: relative;\n  display: inline-flex;\n}\n.export-menu {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  z-index: 30;\n  min-width: 168px;\n  display: flex;\n  flex-direction: column;\n  padding: 5px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-elevated);\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n}\n.export-item {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 7px 10px;\n  font-size: 11.5px;\n  font-weight: 600;\n  font-family: inherit;\n  text-align: left;\n  border: none;\n  border-radius: var(--mj-radius-sm, 5px);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  white-space: nowrap;\n}\n.export-item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.export-item i {\n  width: 14px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.export-item:hover i {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n@keyframes wb-pulse-ring {\n  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 50%, transparent); }\n  70% { box-shadow: 0 0 0 6px transparent; }\n  100% { box-shadow: 0 0 0 0 transparent; }\n}\n\n/* ---------- the board ---------- */\n.board-wrap {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ---------- agent action toast ----------\n   Bottom-center, raised ABOVE the zoom cluster's row (cluster: bottom 14px + ~38px\n   tall) so the two can never collide, and width-capped clear of the cluster at the\n   board's right edge. Sits just above the status footer per the mockup. */\n.board-toast {\n  position: absolute;\n  left: 50%;\n  bottom: 64px;\n  transform: translateX(-50%);\n  z-index: 9;\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  padding: 8px 16px;\n  max-width: calc(100% - 32px);\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage-border);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  font-size: 12px;\n  font-weight: 600;\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  animation: wb-toast-fade 300ms ease both;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.board-toast > i {\n  flex-shrink: 0;\n}\n.board-toast__text {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.board-toast .undo {\n  flex-shrink: 0;\n}\n@keyframes wb-toast-fade {\n  from { opacity: 0; transform: translate(-50%, 4px); }\n  to { opacity: 1; transform: translate(-50%, 0); }\n}\n.board-toast .undo {\n  color: var(--mj-text-muted);\n  font-weight: 600;\n  cursor: pointer;\n  margin-left: 4px;\n}\n.board-toast .undo:hover {\n  color: var(--mj-text-primary);\n}\n\n/* ---------- board status footer ---------- */\n.board-status {\n  display: flex;\n  align-items: center;\n  gap: 18px;\n  padding: 6px 16px;\n  flex-shrink: 0;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n}\n.board-status b {\n  color: var(--mj-text-secondary);\n  font-weight: 600;\n}\n.board-status .seg-r {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n  gap: 18px;\n}\n.board-status .ctx-live {\n  color: var(--mj-color-violet-300, var(--mj-text-secondary));\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 600;\n}\n.board-status .ctx-live .d {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--sage);\n  animation: wb-pulse-ring 2s infinite;\n}\n"] }]
+    }], null, { State: [{
+            type: Input,
+            args: [{ required: true }]
+        }], AgentName: [{
+            type: Input
+        }], BoardTitle: [{
+            type: Input
+        }], SavedLabel: [{
+            type: Input
+        }], SceneDelta: [{
+            type: Output
+        }], AgentUndo: [{
+            type: Output
+        }], FocusModeChange: [{
+            type: Output
+        }], SaveToArtifactsRequested: [{
+            type: Output
+        }], WidgetSubmitting: [{
+            type: Output
+        }], WidgetSubmitted: [{
+            type: Output
+        }], WidgetInteraction: [{
+            type: Output
+        }], ContentApplying: [{
+            type: Output
+        }], ContentApplied: [{
+            type: Output
+        }], ItemAdding: [{
+            type: Output
+        }], ItemAdded: [{
+            type: Output
+        }], ItemUpdating: [{
+            type: Output
+        }], ItemUpdated: [{
+            type: Output
+        }], ItemRemoving: [{
+            type: Output
+        }], ItemRemoved: [{
+            type: Output
+        }], Board: [{
+            type: ViewChild,
+            args: [RealtimeWhiteboardBoardComponent]
+        }], CloseSees: [{
+            type: HostListener,
+            args: ['document:click']
+        }], CloseExport: [{
+            type: HostListener,
+            args: ['document:click']
+        }], OnKeydown: [{
+            type: HostListener,
+            args: ['document:keydown', ['$event']]
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeWhiteboardHostComponent, { className: "RealtimeWhiteboardHostComponent", filePath: "src/lib/whiteboard-host.component.ts", lineNumber: 71 }); })();
+//# sourceMappingURL=whiteboard-host.component.js.map