@memberjunction/ng-whiteboard 5.51.1 → 5.51.3

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

@@ -1,6 +1,7 @@
-import { ChangeDetectorRef, Component, EventEmitter, HostListener, Input, Output, ViewChild, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, ViewChild, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { WhiteboardState } from './whiteboard-state';
+import { ClampToolToRoster, IsToolAllowed } from './whiteboard-tool-roster';
 import { BuildWhiteboardExportHtml, BuildWhiteboardExportHtmlAllPages, BuildWhiteboardExportSvg, BuildWhiteboardExportSvgPages } from './whiteboard-export';
 import { ApplyWhiteboardAgentTool, WHITEBOARD_TOOL_NAMES } from './whiteboard-tools';
 import { RealtimeWhiteboardBoardComponent } from './whiteboard-board.component';
@@ -115,6 +116,24 @@ export class RealtimeWhiteboardHostComponent {
         this.BoardTitle = 'Whiteboard';
         /** Persistence chip text (e.g. "Saved to session · v14"). */
         this.SavedLabel = 'Saved to session';
+        /**
+         * Opt back in to DOCUMENT-WIDE keyboard shortcuts.
+         *
+         * The host binds eleven bare single-character tool shortcuts (v h p r s t m w i c e). While
+         * those listened on `document` unconditionally they fired wherever the user was on the page,
+         * which fails WCAG 2.1.4 (Character Key Shortcuts): a speech-input user saying an ordinary
+         * word, or anyone typing in a non-input control elsewhere, silently switched the board tool.
+         * They are now scoped to focus being inside this host, which satisfies the criterion's
+         * "active only on focus" branch.
+         *
+         * Scoping covers the host's ENTIRE keydown handler, not only the letters: undo/redo
+         * (Cmd/Ctrl+Z, +Y), Escape and Delete/Backspace are focus-gated as well.
+         *
+         * Set `true` only for a surface where the whiteboard is the entire page AND the 2.1.4
+         * exposure has been accepted — it is an accessibility regression, not a convenience flag.
+         */
+        this.EnableGlobalShortcuts = false;
+        this._toolRoster = null;
         /** 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). */
@@ -167,8 +186,7 @@ export class RealtimeWhiteboardHostComponent {
         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._tool = 'select';
         this.PenColor = WHITEBOARD_PEN_COLORS[0];
         this.PenWidth = 4;
         this.ShapeKind = 'rect';
@@ -196,6 +214,68 @@ export class RealtimeWhiteboardHostComponent {
         this.ticker = null;
         this.mirrorSubs = [];
         this.cdr = inject(ChangeDetectorRef);
+        // ────────────────────────────────────────────── keyboard shortcuts
+        /**
+         * The board is made focusable so its shortcuts have a focus scope to be bound to. `-1`, not
+         * `0`: the canvas has no keyboard interaction model yet (see the whiteboard keyboard-
+         * operability work), so adding a real Tab stop would put a stop in the page that a keyboard
+         * user can reach and do nothing with. Click focuses it; that is the whole contract today.
+         */
+        this.HostTabIndex = '-1';
+        this.host = inject(ElementRef);
+    }
+    /**
+     * Which tools this surface offers. `null` (default) is all eleven: today's rendering.
+     *
+     * The roster governs which tools are AVAILABLE, closing every door to a tool it leaves out:
+     * the toolbar button, the single-letter shortcut, and the canvas "add … here" action. It is
+     * deliberately not a content policy — it does not restrict what already exists on the board,
+     * what the agent places, or authoring on existing items (Restyle, Duplicate, paste). An empty
+     * roster narrows the palette to nothing; it does NOT make the board read-only, which is a
+     * separate input.
+     *
+     * A setter rather than `ngOnChanges` (packages/Angular/CLAUDE.md): a realtime channel's
+     * `BindSurface` assigns this property directly on a dynamically-created component, and
+     * Angular fires no `ngOnChanges` for a plain assignment, so a clamp implemented there would
+     * silently never run on the path real consumers use.
+     */
+    set ToolRoster(value) {
+        const next = value ?? null;
+        // Identity compare, per the Angular rule: a consumer binding a freshly-built array literal
+        // re-fires this setter every change-detection pass, and re-running the clamp on every pass
+        // would fight the user for the active tool.
+        if (next === this._toolRoster) {
+            return;
+        }
+        this._toolRoster = next;
+        // Re-validate the CURRENT tool through the same chokepoint every other write uses.
+        this.Tool = this._tool;
+    }
+    get ToolRoster() {
+        return this._toolRoster;
+    }
+    // tool state (host-owned; toolbar + keyboard drive it, board consumes it)
+    /**
+     * The active tool, and the ONE place the roster invariant is enforced on a write.
+     *
+     * "The active tool is always one the roster allows" is a property of every write, not of the
+     * handful of call sites that exist today (the roster setter, Escape, the key map, and the two
+     * template `Tool = $event` bindings). Guarding each of those would leave the next writer —
+     * a new shortcut, a gesture, a host API — to remember the rule. Guarding here closes them all
+     * by construction, and makes assignment order irrelevant: setting `ToolRoster` and `Tool` in
+     * either order still lands on an allowed tool.
+     *
+     * A DISALLOWED request is ignored rather than clamped: pressing Escape under `['pen','eraser']`
+     * should leave you on pen, not bounce you to the roster's fallback. The clamp is only for the
+     * case where the tool you are already holding stopped being allowed.
+     */
+    get Tool() {
+        return this._tool;
+    }
+    set Tool(value) {
+        this._tool = IsToolAllowed(this._toolRoster, value)
+            ? value
+            : ClampToolToRoster(this._tool, this._toolRoster);
     }
     ngOnInit() {
         this.changedSub = this.State.Changed$.subscribe((change) => {
@@ -370,8 +450,34 @@ export class RealtimeWhiteboardHostComponent {
         this.hideToast();
         this.AgentUndo.emit();
     }
-    // ────────────────────────────────────────────── keyboard shortcuts
+    /**
+     * Clicking the board takes focus, so the shortcuts below apply. The browser would usually do
+     * this on its own by focusing the nearest focusable ancestor, but the board's pointer
+     * pipeline is elaborate enough (drag, marquee, handles, transient shapes) that relying on
+     * that default is fragile — one `preventDefault()` added later would silently kill every
+     * shortcut. This makes it explicit.
+     */
+    OnHostPointerDown() {
+        if (!this.hasFocusWithin()) {
+            this.host.nativeElement.focus({ preventScroll: true });
+        }
+    }
+    /** Whether focus currently sits on, or inside, this whiteboard host. */
+    hasFocusWithin() {
+        const el = this.host.nativeElement;
+        const active = document.activeElement;
+        return !!active && (active === el || el.contains(active));
+    }
     OnKeydown(event) {
+        // WCAG 2.1.4: only live while focus is on the board. NOTE this gates the WHOLE handler,
+        // not just the single-character tool keys that 2.1.4 is about — undo/redo (Cmd/Ctrl+Z,
+        // +Y), Escape and Delete/Backspace are scoped too. That is deliberate: a board that
+        // swallows the document's Cmd+Z from anywhere on the page is its own bug, and "the board
+        // responds to keys when you are on the board" is the only model that stays predictable.
+        // See {@link EnableGlobalShortcuts} for the (discouraged) opt-out.
+        if (!this.EnableGlobalShortcuts && !this.hasFocusWithin()) {
+            return;
+        }
         const target = event.target;
         if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
             return;
@@ -410,6 +516,8 @@ export class RealtimeWhiteboardHostComponent {
                 break;
             default: {
                 const tool = RealtimeWhiteboardHostComponent.toolForKey(event.key);
+                // No roster check here: the Tool setter ignores a disallowed write, so a key for a
+                // hidden tool is a no-op by construction rather than by a remembered guard.
                 if (tool) {
                     this.Tool = tool;
                 }
@@ -546,9 +654,11 @@ export class RealtimeWhiteboardHostComponent {
         } 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) {
+        } }, hostVars: 1, hostBindings: function RealtimeWhiteboardHostComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function RealtimeWhiteboardHostComponent_click_HostBindingHandler() { return ctx.CloseExport(); }, i0.ɵɵresolveDocument)("pointerdown", function RealtimeWhiteboardHostComponent_pointerdown_HostBindingHandler() { return ctx.OnHostPointerDown(); })("keydown", function RealtimeWhiteboardHostComponent_keydown_HostBindingHandler($event) { return ctx.OnKeydown($event); }, i0.ɵɵresolveDocument);
+        } if (rf & 2) {
+            i0.ɵɵattribute("tabindex", ctx.HostTabIndex);
+        } }, inputs: { State: "State", AgentName: "AgentName", BoardTitle: "BoardTitle", SavedLabel: "SavedLabel", EnableGlobalShortcuts: "EnableGlobalShortcuts", ToolRoster: "ToolRoster" }, 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: 50, 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", "ToolRoster", "PenColor", "PenWidth", "ShapeKind", "TextSize", "TextFamily", "TextBold", "TextColor", "AgentPresence"], [3, "ToolChange", "PenColorChange", "PenWidthChange", "ShapeKindChange", "TextSizeChange", "TextFamilyChange", "TextBoldChange", "TextColorChange", "StyleSelection", "Undo", "Redo", "ActiveTool", "ToolRoster", "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);
@@ -664,9 +774,9 @@ export class RealtimeWhiteboardHostComponent {
             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.ɵɵproperty("State", ctx.State)("AgentName", ctx.AgentName)("Tool", ctx.Tool)("ToolRoster", ctx.ToolRoster)("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.ɵɵproperty("ActiveTool", ctx.Tool)("ToolRoster", ctx.ToolRoster)("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();
@@ -691,7 +801,7 @@ export class RealtimeWhiteboardHostComponent {
             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}"] }); }
+            RealtimeWhiteboardAgentSeesPopoverComponent], styles: ["\n\n\n\n[_nghost-%COMP%]:focus:not(:focus-visible) {\n  outline: none;\n}\n\n\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,
@@ -701,7 +811,7 @@ export class RealtimeWhiteboardHostComponent {
                     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"] }]
+                ], 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    [ToolRoster]=\"ToolRoster\"\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    [ToolRoster]=\"ToolRoster\"\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: ["/* The host carries tabindex=\"-1\" so the board has a focus scope for its keyboard\n   shortcuts (WCAG 2.1.4). Suppress the ring for the pointer path only \u2014 a keyboard\n   focus, if the board ever becomes tab-reachable, must still show one (2.4.7). */\n:host:focus:not(:focus-visible) {\n  outline: none;\n}\n\n/* 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 }]
@@ -711,6 +821,10 @@ export class RealtimeWhiteboardHostComponent {
             type: Input
         }], SavedLabel: [{
             type: Input
+        }], EnableGlobalShortcuts: [{
+            type: Input
+        }], ToolRoster: [{
+            type: Input
         }], SceneDelta: [{
             type: Output
         }], AgentUndo: [{
@@ -750,9 +864,15 @@ export class RealtimeWhiteboardHostComponent {
         }], CloseExport: [{
             type: HostListener,
             args: ['document:click']
+        }], HostTabIndex: [{
+            type: HostBinding,
+            args: ['attr.tabindex']
+        }], OnHostPointerDown: [{
+            type: HostListener,
+            args: ['pointerdown']
         }], 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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeWhiteboardHostComponent, { className: "RealtimeWhiteboardHostComponent", filePath: "src/lib/whiteboard-host.component.ts", lineNumber: 72 }); })();
 //# sourceMappingURL=whiteboard-host.component.js.map