@memberjunction/ng-whiteboard 0.0.1 → 5.42.0

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

@@ -0,0 +1,2357 @@
+import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UUIDsEqual } from '@memberjunction/global';
+import { MarkdownModule } from '@memberjunction/ng-markdown';
+import { CodeEditorModule } from '@memberjunction/ng-code-editor';
+import { BuildResizeCommitPatch, IsResizableKind, WHITEBOARD_DEFAULTS, WhiteboardState } from './whiteboard-state';
+import { WHITEBOARD_PEN_COLORS } from './whiteboard-toolbar.component';
+import { EvaluateWidgetInteractionMessage, EvaluateWidgetSubmitMessage, WHITEBOARD_WIDGET_INTERACTION_MAX_CHARS, WHITEBOARD_WIDGET_SUBMIT_MAX_CHARS } from './whiteboard-widget-bridge';
+import { WhiteboardWidgetSrcdocPipe } from './whiteboard-srcdoc.pipe';
+import { BuildWhiteboardContextMenu, BuildWhiteboardPageContextMenu } from './whiteboard-context-menu';
+import { RealtimeWhiteboardPagesComponent } from './whiteboard-pages.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-markdown";
+import * as i2 from "@memberjunction/ng-code-editor";
+const _c0 = ["canvas"];
+const _forTrack0 = ($index, $item) => $item.ID;
+function RealtimeWhiteboardBoardComponent_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "path", 21);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_5_Template_path_pointerdown_0_listener($event) { const ink_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, ink_r3)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_5_Template_path_contextmenu_0_listener($event) { const ink_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, ink_r3)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ink_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("ink-sage", ink_r3.Author === "agent")("wb-erasable", ctx_r3.Tool === "eraser" || ctx_r3.Tool === "select")("wb-ink-selected", ctx_r3.IsSelected(ink_r3));
+    i0.ɵɵattribute("d", ctx_r3.InkPath(ink_r3.Points))("stroke", ink_r3.Author === "agent" ? null : ink_r3.Color)("stroke-width", ink_r3.StrokeWidth);
+} }
+function RealtimeWhiteboardBoardComponent_For_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g")(1, "path", 22);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_7_Template_path_pointerdown_1_listener($event) { const conn_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, conn_r6)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_7_Template_path_contextmenu_1_listener($event) { const conn_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, conn_r6)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "path", 23);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const conn_r6 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("conn-sage", conn_r6.Author === "agent")("conn-user", conn_r6.Author === "user");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("draw-in", ctx_r3.PopInIDs.has(conn_r6.ID))("wb-erasable", ctx_r3.Tool === "eraser" || ctx_r3.Tool === "select");
+    i0.ɵɵattribute("d", ctx_r3.ConnectorPath(conn_r6));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("d", ctx_r3.ConnectorArrow(conn_r6));
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 10);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("d", ctx_r3.LivePenPath)("stroke", ctx_r3.PenColor)("stroke-width", ctx_r3.PenWidth);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 11);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("d", ctx_r3.PendingConnectorPath);
+} }
+function RealtimeWhiteboardBoardComponent_For_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_11_Template_div_pointerdown_0_listener($event) { const hl_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHighlightClick($event, hl_r8)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_11_Template_div_contextmenu_0_listener($event) { const hl_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, hl_r8)); });
+    i0.ɵɵelementStart(1, "span", 25);
+    i0.ɵɵelement(2, "i", 26);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const hl_r8 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(hl_r8), "px")("top", ctx_r3.ItemY(hl_r8), "px")("width", ctx_r3.ItemW(hl_r8), "px")("height", ctx_r3.ItemH(hl_r8), "px");
+    i0.ɵɵclassProp("user-highlight", hl_r8.Author === "user");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r3.HighlightTag(hl_r8));
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 27);
+} if (rf & 2) {
+    const ghost_r9 = ctx;
+    i0.ɵɵstyleProp("left", ghost_r9.X, "px")("top", ghost_r9.Y, "px")("width", ghost_r9.W, "px")("height", ghost_r9.H, "px");
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 28);
+} if (rf & 2) {
+    const preview_r10 = ctx;
+    i0.ɵɵstyleProp("left", preview_r10.X, "px")("top", preview_r10.Y, "px")("width", preview_r10.W, "px")("height", preview_r10.H, "px");
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 29);
+} if (rf & 2) {
+    const mq_r11 = ctx;
+    i0.ɵɵstyleProp("left", mq_r11.X, "px")("top", mq_r11.Y, "px")("width", mq_r11.W, "px")("height", mq_r11.H, "px");
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r3.AgentName);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " You");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 42, 1);
+    i0.ɵɵlistener("keydown", function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_3_Template_textarea_keydown_0_listener($event) { i0.ɵɵrestoreView(_r14); const edit_r15 = i0.ɵɵreference(1); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.OnEditKeydown($event, edit_r15.value)); })("blur", function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_3_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r14); const edit_r15 = i0.ɵɵreference(1); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.CommitEdit(edit_r15.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", item_r13.Text);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵtextInterpolate1(" ", item_r13.Text, " ");
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_5_For_1_Template_span_pointerdown_0_listener($event) { const h_r17 = i0.ɵɵrestoreView(_r16).$implicit; const item_r13 = i0.ɵɵnextContext(3).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHandlePointerDown($event, item_r13, h_r17)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r17 = ctx.$implicit;
+    i0.ɵɵclassMap("sel-h " + h_r17);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_5_For_1_Template, 1, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r3.Handles);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_0_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r12); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, item_r13)); })("dblclick", function RealtimeWhiteboardBoardComponent_For_16_Case_0_Template_div_dblclick_0_listener($event) { i0.ɵɵrestoreView(_r12); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.BeginItemEdit($event, item_r13)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_16_Case_0_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r12); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, item_r13)); });
+    i0.ɵɵconditionalCreate(1, RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_1_Template, 3, 1, "span", 37)(2, RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_2_Template, 3, 0, "span", 38);
+    i0.ɵɵconditionalCreate(3, RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_3_Template, 2, 1, "textarea", 39)(4, RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_4_Template, 1, 1);
+    i0.ɵɵconditionalCreate(5, RealtimeWhiteboardBoardComponent_For_16_Case_0_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap("bi sticky " + ctx_r3.StickyTintClass(item_r13));
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(item_r13), "px")("top", ctx_r3.ItemY(item_r13), "px")("width", ctx_r3.ItemW(item_r13), "px")("font-size", ctx_r3.ItemFontSize(item_r13))("font-family", ctx_r3.ItemFontFamily(item_r13))("font-weight", ctx_r3.ItemFontWeight(item_r13))("transform", ctx_r3.IsDragging(item_r13) ? "" : ctx_r3.StickyRotation(item_r13));
+    i0.ɵɵclassProp("selected", ctx_r3.IsSelected(item_r13))("dragging", ctx_r3.IsDragging(item_r13))("pop-in", ctx_r3.PopInIDs.has(item_r13.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Author === "agent" ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.EditingID === item_r13.ID ? 3 : 4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.ShowHandles(item_r13) && !ctx_r3.IsDragging(item_r13) ? 5 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r3.AgentName);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " You");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "textarea", 47, 2);
+    i0.ɵɵlistener("keydown", function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_3_Template_textarea_keydown_0_listener($event) { i0.ɵɵrestoreView(_r19); const editShape_r20 = i0.ɵɵreference(1); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.OnEditKeydown($event, editShape_r20.value)); })("blur", function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_3_Template_textarea_blur_0_listener() { i0.ɵɵrestoreView(_r19); const editShape_r20 = i0.ɵɵreference(1); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.CommitEdit(editShape_r20.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", item_r13.Label);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(3).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r13.Sub);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵconditionalCreate(2, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_4_Conditional_2_Template, 2, 1, "span", 48);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r13.Label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Sub ? 2 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_5_For_1_Template_span_pointerdown_0_listener($event) { const h_r22 = i0.ɵɵrestoreView(_r21).$implicit; const item_r13 = i0.ɵɵnextContext(3).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHandlePointerDown($event, item_r13, h_r22)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r22 = ctx.$implicit;
+    i0.ɵɵclassMap("sel-h " + h_r22);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_5_For_1_Template, 1, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r3.Handles);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_1_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_1_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r18); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, item_r13)); })("dblclick", function RealtimeWhiteboardBoardComponent_For_16_Case_1_Template_div_dblclick_0_listener($event) { i0.ɵɵrestoreView(_r18); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.BeginItemEdit($event, item_r13)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_16_Case_1_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r18); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, item_r13)); });
+    i0.ɵɵconditionalCreate(1, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_1_Template, 3, 1, "span", 37)(2, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_2_Template, 3, 0, "span", 38);
+    i0.ɵɵconditionalCreate(3, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_3_Template, 2, 1, "textarea", 46)(4, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_4_Template, 3, 2, "span");
+    i0.ɵɵconditionalCreate(5, RealtimeWhiteboardBoardComponent_For_16_Case_1_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(item_r13), "px")("top", ctx_r3.ItemY(item_r13), "px")("width", ctx_r3.ItemW(item_r13), "px")("height", ctx_r3.ItemH(item_r13), "px");
+    i0.ɵɵclassProp("shape-box--ellipse", item_r13.Shape === "ellipse")("shape-box--diamond", item_r13.Shape === "diamond")("shape-box--sage", item_r13.Author === "agent")("selected", ctx_r3.IsSelected(item_r13))("dragging", ctx_r3.IsDragging(item_r13))("pop-in", ctx_r3.PopInIDs.has(item_r13.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Author === "agent" ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.EditingID === item_r13.ID ? 3 : 4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.ShowHandles(item_r13) && !ctx_r3.IsDragging(item_r13) ? 5 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 40);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 51, 3);
+    i0.ɵɵlistener("keydown", function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_2_Template_input_keydown_0_listener($event) { i0.ɵɵrestoreView(_r24); const editText_r25 = i0.ɵɵreference(1); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.OnEditKeydown($event, editText_r25.value)); })("blur", function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_2_Template_input_blur_0_listener() { i0.ɵɵrestoreView(_r24); const editText_r25 = i0.ɵɵreference(1); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.CommitEdit(editText_r25.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("value", item_r13.Text);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵtextInterpolate1(" ", item_r13.Text, " ");
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_4_For_1_Template_span_pointerdown_0_listener($event) { const h_r27 = i0.ɵɵrestoreView(_r26).$implicit; const item_r13 = i0.ɵɵnextContext(3).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHandlePointerDown($event, item_r13, h_r27)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r27 = ctx.$implicit;
+    i0.ɵɵclassMap("sel-h " + h_r27);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_4_For_1_Template, 1, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r3.Handles);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_2_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_2_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r23); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, item_r13)); })("dblclick", function RealtimeWhiteboardBoardComponent_For_16_Case_2_Template_div_dblclick_0_listener($event) { i0.ɵɵrestoreView(_r23); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.BeginItemEdit($event, item_r13)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_16_Case_2_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r23); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, item_r13)); });
+    i0.ɵɵconditionalCreate(1, RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_1_Template, 1, 0, "i", 40);
+    i0.ɵɵconditionalCreate(2, RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_2_Template, 2, 1, "input", 50)(3, RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_3_Template, 1, 1);
+    i0.ɵɵconditionalCreate(4, RealtimeWhiteboardBoardComponent_For_16_Case_2_Conditional_4_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(item_r13), "px")("top", ctx_r3.ItemY(item_r13), "px")("width", ctx_r3.TextWrapWidth(item_r13), "px")("max-width", ctx_r3.TextWrapWidth(item_r13), "px")("font-size", ctx_r3.ItemFontSize(item_r13))("font-family", ctx_r3.ItemFontFamily(item_r13))("font-weight", ctx_r3.ItemFontWeight(item_r13))("color", ctx_r3.ItemTextColor(item_r13));
+    i0.ɵɵclassProp("tlabel--user", item_r13.Author === "user")("selected", ctx_r3.IsSelected(item_r13))("dragging", ctx_r3.IsDragging(item_r13))("pop-in", ctx_r3.PopInIDs.has(item_r13.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Author === "agent" ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r3.EditingID === item_r13.ID ? 2 : 3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.ShowHandles(item_r13) && !ctx_r3.IsDragging(item_r13) ? 4 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r3.AgentName);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵtext(2, " You");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_5_For_1_Template_span_pointerdown_0_listener($event) { const h_r30 = i0.ɵɵrestoreView(_r29).$implicit; const item_r13 = i0.ɵɵnextContext(3).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHandlePointerDown($event, item_r13, h_r30)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r30 = ctx.$implicit;
+    i0.ɵɵclassMap("sel-h " + h_r30);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_5_For_1_Template, 1, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r3.Handles);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_3_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_3_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r28); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, item_r13)); })("dblclick", function RealtimeWhiteboardBoardComponent_For_16_Case_3_Template_div_dblclick_0_listener($event) { i0.ɵɵrestoreView(_r28); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.BeginRichEdit($event, item_r13)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_16_Case_3_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r28); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, item_r13)); });
+    i0.ɵɵconditionalCreate(1, RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_1_Template, 3, 1, "span", 37)(2, RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_2_Template, 3, 0, "span", 38);
+    i0.ɵɵelementStart(3, "div", 53);
+    i0.ɵɵelement(4, "mj-markdown", 54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, RealtimeWhiteboardBoardComponent_For_16_Case_3_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(item_r13), "px")("top", ctx_r3.ItemY(item_r13), "px")("width", ctx_r3.ItemW(item_r13), "px");
+    i0.ɵɵclassProp("md-card--sage", item_r13.Author === "agent")("selected", ctx_r3.IsSelected(item_r13))("dragging", ctx_r3.IsDragging(item_r13))("pop-in", ctx_r3.PopInIDs.has(item_r13.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Author === "agent" ? 1 : 2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("max-height", ctx_r3.MarkdownMaxHeight(item_r13), "px");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", item_r13.Markdown)("enableMermaid", false)("enableCodeCopy", false)("enableCollapsibleHeadings", false);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r3.ShowHandles(item_r13) && !ctx_r3.IsDragging(item_r13) ? 5 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r3.AgentName);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 61);
+    i0.ɵɵelement(1, "i", 41);
+    i0.ɵɵtext(2, " You");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 65);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_7_Template_button_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r32); return i0.ɵɵresetView($event.stopPropagation()); })("click", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r32); const item_r13 = i0.ɵɵnextContext(2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.BeginRichEdit($event, item_r13)); });
+    i0.ɵɵelement(1, "i", 66);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 67);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_7_Template_button_pointerdown_2_listener($event) { i0.ɵɵrestoreView(_r32); return i0.ɵɵresetView($event.stopPropagation()); })("click", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_7_Template_button_click_2_listener($event) { i0.ɵɵrestoreView(_r32); const item_r13 = i0.ɵɵnextContext(2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.RemoveItemClick($event, item_r13)); });
+    i0.ɵɵelement(3, "i", 68);
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "iframe", 63);
+    i0.ɵɵpipe(1, "wbWidgetSrcdoc");
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("srcdoc", i0.ɵɵpipeBind1(1, 3, item_r13.Html), i0.ɵɵsanitizeHtml);
+    i0.ɵɵattribute("data-item-id", item_r13.ID)("title", ctx_r3.HtmlTitle(item_r13));
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 64);
+    i0.ɵɵelement(1, "i", 69);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r3.HtmlTitle(item_r13));
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_11_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_11_For_1_Template_span_pointerdown_0_listener($event) { const h_r34 = i0.ɵɵrestoreView(_r33).$implicit; const item_r13 = i0.ɵɵnextContext(3).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHandlePointerDown($event, item_r13, h_r34)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r34 = ctx.$implicit;
+    i0.ɵɵclassMap("sel-h " + h_r34);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_11_For_1_Template, 1, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r3.Handles);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 56);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r31); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, item_r13)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r31); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, item_r13)); });
+    i0.ɵɵelementStart(1, "div", 57);
+    i0.ɵɵlistener("dblclick", function RealtimeWhiteboardBoardComponent_For_16_Case_4_Template_div_dblclick_1_listener($event) { i0.ɵɵrestoreView(_r31); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.BeginRichEdit($event, item_r13)); });
+    i0.ɵɵelement(2, "i", 58);
+    i0.ɵɵelementStart(3, "span", 59);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_5_Template, 3, 1, "span", 60)(6, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_6_Template, 3, 0, "span", 61);
+    i0.ɵɵconditionalCreate(7, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_7_Template, 4, 0);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 62);
+    i0.ɵɵconditionalCreate(9, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_9_Template, 2, 5, "iframe", 63)(10, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_10_Template, 4, 1, "div", 64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(11, RealtimeWhiteboardBoardComponent_For_16_Case_4_Conditional_11_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(item_r13), "px")("top", ctx_r3.ItemY(item_r13), "px")("width", ctx_r3.ItemW(item_r13), "px")("height", ctx_r3.ItemH(item_r13), "px");
+    i0.ɵɵclassProp("html-card--sage", item_r13.Author === "agent")("selected", ctx_r3.IsSelected(item_r13))("dragging", ctx_r3.IsDragging(item_r13))("pop-in", ctx_r3.PopInIDs.has(item_r13.ID));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r3.HtmlTitle(item_r13));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Author === "agent" ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!ctx_r3.ReadOnly ? 7 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.IsNearViewport(item_r13) ? 9 : 10);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r3.ShowHandles(item_r13) && !ctx_r3.IsDragging(item_r13) ? 11 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 37);
+    i0.ɵɵelement(1, "i", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r3.AgentName);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 38);
+    i0.ɵɵelement(1, "i", 76);
+    i0.ɵɵtext(2, " You \u00B7 pasted");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "img", 72);
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵproperty("src", item_r13.Url, i0.ɵɵsanitizeUrl)("alt", item_r13.Name);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 73);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_9_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r36 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_9_For_1_Template_span_pointerdown_0_listener($event) { const h_r37 = i0.ɵɵrestoreView(_r36).$implicit; const item_r13 = i0.ɵɵnextContext(3).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnHandlePointerDown($event, item_r13, h_r37)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const h_r37 = ctx.$implicit;
+    i0.ɵɵclassMap("sel-h " + h_r37);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_9_For_1_Template, 1, 2, "span", 43, i0.ɵɵrepeaterTrackByIdentity);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext(3);
+    i0.ɵɵrepeater(ctx_r3.Handles);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Case_5_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_For_16_Case_5_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r35); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemPointerDown($event, item_r13)); })("contextmenu", function RealtimeWhiteboardBoardComponent_For_16_Case_5_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r35); const item_r13 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnItemContextMenu($event, item_r13)); });
+    i0.ɵɵconditionalCreate(1, RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_1_Template, 3, 1, "span", 37)(2, RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_2_Template, 3, 0, "span", 38);
+    i0.ɵɵelementStart(3, "div", 71);
+    i0.ɵɵconditionalCreate(4, RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_4_Template, 1, 2, "img", 72)(5, RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_5_Template, 1, 0, "i", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 74);
+    i0.ɵɵelement(7, "i", 75);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(9, RealtimeWhiteboardBoardComponent_For_16_Case_5_Conditional_9_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.ItemX(item_r13), "px")("top", ctx_r3.ItemY(item_r13), "px")("width", ctx_r3.ItemW(item_r13), "px");
+    i0.ɵɵclassProp("selected", ctx_r3.IsSelected(item_r13))("dragging", ctx_r3.IsDragging(item_r13))("pop-in", ctx_r3.PopInIDs.has(item_r13.ID));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(item_r13.Author === "agent" ? 1 : 2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(item_r13.Url ? 4 : 5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", item_r13.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r3.ShowHandles(item_r13) && !ctx_r3.IsDragging(item_r13) ? 9 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_For_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, RealtimeWhiteboardBoardComponent_For_16_Case_0_Template, 6, 25, "div", 30)(1, RealtimeWhiteboardBoardComponent_For_16_Case_1_Template, 6, 23, "div", 31)(2, RealtimeWhiteboardBoardComponent_For_16_Case_2_Template, 5, 27, "div", 32)(3, RealtimeWhiteboardBoardComponent_For_16_Case_3_Template, 6, 22, "div", 33)(4, RealtimeWhiteboardBoardComponent_For_16_Case_4_Template, 12, 21, "div", 34)(5, RealtimeWhiteboardBoardComponent_For_16_Case_5_Template, 10, 16, "div", 35);
+} if (rf & 2) {
+    let tmp_11_0;
+    const item_r13 = ctx.$implicit;
+    i0.ɵɵconditional((tmp_11_0 = item_r13.Kind) === "sticky" ? 0 : tmp_11_0 === "shape" ? 1 : tmp_11_0 === "text" ? 2 : tmp_11_0 === "markdown" ? 3 : tmp_11_0 === "html" ? 4 : tmp_11_0 === "image" ? 5 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "span", 78);
+    i0.ɵɵelement(2, "i", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 79);
+    i0.ɵɵelement(4, "i", 66);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", ctx_r3.AgentPresence.X, "px")("top", ctx_r3.AgentPresence.Y, "px");
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r3.AgentPresence.Label);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r39 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 55);
+    i0.ɵɵelementStart(1, "span", 91);
+    i0.ɵɵtext(2, "Markdown panel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 92)(4, "button", 93);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r39); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.RichEditorSetPreview(false)); });
+    i0.ɵɵtext(5, "Edit");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 93);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_2_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r39); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.RichEditorSetPreview(true)); });
+    i0.ɵɵtext(7, "Preview");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ed_r40 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassProp("on", !ed_r40.Preview);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("on", ed_r40.Preview);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r41 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelement(0, "i", 69);
+    i0.ɵɵelementStart(1, "span", 91);
+    i0.ɵɵtext(2, "HTML widget");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "input", 94, 4);
+    i0.ɵɵlistener("input", function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_3_Template_input_input_3_listener() { i0.ɵɵrestoreView(_r41); const reTitle_r42 = i0.ɵɵreference(4); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.OnRichEditorTitleChange(reTitle_r42.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ed_r40 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ed_r40.TitleDraft);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵelement(1, "mj-markdown", 54);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ed_r40 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("data", ed_r40.Draft)("enableMermaid", false)("enableCodeCopy", false)("enableCollapsibleHeadings", false);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r43 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-code-editor", 95);
+    i0.ɵɵlistener("change", function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_6_Template_mj_code_editor_change_0_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.OnRichEditorDraftChange($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ed_r40 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("value", ed_r40.Draft)("language", ed_r40.Kind === "markdown" ? "markdown" : "html");
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85);
+    i0.ɵɵelement(1, "i", 96);
+    i0.ɵɵtext(2, " Renders in a sandboxed frame \u2014 scripts run isolated, no app or network access guaranteed. ");
+    i0.ɵɵelementEnd();
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r38 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 80);
+    i0.ɵɵlistener("keydown", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r38); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.OnRichEditorKeydown($event)); })("pointerdown", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r38); return i0.ɵɵresetView($event.stopPropagation()); })("dblclick", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_div_dblclick_0_listener($event) { i0.ɵɵrestoreView(_r38); return i0.ɵɵresetView($event.stopPropagation()); })("wheel", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_div_wheel_0_listener($event) { i0.ɵɵrestoreView(_r38); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "div", 81);
+    i0.ɵɵconditionalCreate(2, RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_2_Template, 8, 4)(3, RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_3_Template, 5, 1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 82);
+    i0.ɵɵconditionalCreate(5, RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_5_Template, 2, 4, "div", 83)(6, RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_6_Template, 1, 2, "mj-code-editor", 84);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(7, RealtimeWhiteboardBoardComponent_Conditional_18_Conditional_7_Template, 3, 0, "div", 85);
+    i0.ɵɵelementStart(8, "div", 86)(9, "button", 87);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r38); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.RichEditorDone()); });
+    i0.ɵɵtext(10, "Done");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 88);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r38); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.RichEditorApply()); });
+    i0.ɵɵtext(12, "Apply");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(13, "span", 89);
+    i0.ɵɵelementStart(14, "button", 90);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardBoardComponent_Conditional_18_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r38); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.RichEditorCancel()); });
+    i0.ɵɵtext(15, "Cancel");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ed_r40 = ctx;
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ed_r40.Kind === "markdown" ? 2 : 3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ed_r40.Kind === "markdown" && ed_r40.Preview ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ed_r40.Kind === "html" ? 7 : -1);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_19_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 98);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r45 = i0.ɵɵgetCurrentView();
+    i0.ɵɵconditionalCreate(0, RealtimeWhiteboardBoardComponent_Conditional_19_For_2_Conditional_0_Template, 1, 0, "div", 98);
+    i0.ɵɵelementStart(1, "button", 99);
+    i0.ɵɵlistener("click", function RealtimeWhiteboardBoardComponent_Conditional_19_For_2_Template_button_click_1_listener() { const action_r46 = i0.ɵɵrestoreView(_r45).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.OnContextMenuAction(action_r46.ID)); });
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const action_r46 = ctx.$implicit;
+    i0.ɵɵconditional(action_r46.SeparatorBefore ? 0 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("wb-context-menu__item--danger", action_r46.Danger);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(action_r46.Icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", action_r46.Label, " ");
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r44 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_Conditional_19_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r44); return i0.ɵɵresetView($event.stopPropagation()); })("contextmenu", function RealtimeWhiteboardBoardComponent_Conditional_19_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r44); $event.preventDefault(); return i0.ɵɵresetView($event.stopPropagation()); })("wheel", function RealtimeWhiteboardBoardComponent_Conditional_19_Template_div_wheel_0_listener($event) { i0.ɵɵrestoreView(_r44); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵrepeaterCreate(1, RealtimeWhiteboardBoardComponent_Conditional_19_For_2_Template, 4, 6, null, null, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const menu_r47 = ctx;
+    i0.ɵɵstyleProp("left", menu_r47.Left, "px")("top", menu_r47.Top, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(menu_r47.Actions);
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_21_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "rect", 101);
+} if (rf & 2) {
+    const mi_r48 = ctx.$implicit;
+    i0.ɵɵattribute("x", mi_r48.X)("y", mi_r48.Y)("width", mi_r48.W)("height", mi_r48.H)("class", mi_r48.Agent ? "mm-item mm-item--sage" : "mm-item");
+} }
+function RealtimeWhiteboardBoardComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(1, "svg", 100);
+    i0.ɵɵrepeaterCreate(2, RealtimeWhiteboardBoardComponent_Conditional_21_For_3_Template, 1, 5, ":svg:rect", 101, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelement(4, "rect", 102);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("viewBox", ctx_r3.MinimapViewBox);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r3.MinimapItems);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("x", ctx_r3.MinimapViewport.X)("y", ctx_r3.MinimapViewport.Y)("width", ctx_r3.MinimapViewport.W)("height", ctx_r3.MinimapViewport.H);
+} }
+/**
+ * Starter document placed by the HTML-widget tool (user click-place) — a one-question
+ * quiz that demos the `MJWhiteboard.submit` input bridge: the Submit button posts the
+ * picked answer to the host, which surfaces it to the session agent as a context note.
+ * (Hardcoded colors are fine here: this is an isolated sandboxed document — the app's
+ * design tokens cannot reach inside the opaque-origin frame.)
+ */
+export const WHITEBOARD_WIDGET_STARTER_HTML = `<!doctype html>
+<html>
+<head>
+<style>
+  body { font-family: system-ui, sans-serif; margin: 14px; color: #1f2937; }
+  h3 { margin: 0 0 6px; }
+  label { display: block; margin: 4px 0; }
+  button { margin-top: 8px; padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #f1f5f9; cursor: pointer; }
+  .hint { margin-top: 8px; color: #6b7280; font-size: 12px; }
+</style>
+</head>
+<body>
+<h3>Quick quiz</h3>
+<p>Which planet is closest to the sun?</p>
+<label><input type="radio" name="q" value="Mercury"> Mercury</label>
+<label><input type="radio" name="q" value="Venus"> Venus</label>
+<label><input type="radio" name="q" value="Mars"> Mars</label>
+<button id="go">Submit answer</button>
+<p class="hint">Submitting sends your answer to the agent via MJWhiteboard.submit.</p>
+<script>
+  document.getElementById('go').addEventListener('click', function () {
+    var picked = document.querySelector('input[name="q"]:checked');
+    MJWhiteboard.submit({ question: 'closest planet to the sun', answer: picked ? picked.value : null });
+  });
+</script>
+</body>
+</html>`;
+/** Starter markdown placed by the markdown-panel tool (user click-place). */
+const STARTER_MARKDOWN = '## New note\n\n- point one';
+/** Zoom presets stepped by the zoom cluster (25%–200%, matching the mockup's range). */
+const ZOOM_STEPS = [0.25, 0.5, 0.75, 0.9, 1, 1.25, 1.5, 2];
+const GRID_SIZE = 22;
+/** How long an agent-added item keeps its pop-in/flash class. */
+const POP_IN_MS = 3200;
+/**
+ * The LIVE WHITEBOARD canvas surface (`mj-realtime-whiteboard`): dotted-grid board with
+ * pan/zoom, per-tool pointer interactions (select/move with ghost + handles, pan, smoothed
+ * freehand pen, drag-create shapes, click-place stickies/text with inline edit, image paste,
+ * item→item connectors with floating-point fallback, eraser, dismissible highlights),
+ * ownership chips, agent pop-in flash and the input-driven agent presence cursor.
+ *
+ * All mutations go through the shared {@link WhiteboardState} engine — the same API the
+ * agent's channel tools use — so undo/redo and the perception feed see one history.
+ */
+export class RealtimeWhiteboardBoardComponent {
+    constructor() {
+        /** Display name of the session's agent ("Sage") — chips, highlight tags, presence label. */
+        this.AgentName = 'Agent';
+        /** Selected pen ink color. */
+        this.PenColor = WHITEBOARD_PEN_COLORS[0];
+        /** Selected pen stroke width. */
+        this.PenWidth = 4;
+        /** Selected shape kind for drag-create. */
+        this.ShapeKind = 'rect';
+        /** Selected text font size for click-placed text (curated steps; 12 = CSS default). */
+        this.TextSize = 12;
+        /** Selected text font family for click-placed text. */
+        this.TextFamily = 'sans';
+        /** Selected text bold state for click-placed text (labels render bold by default). */
+        this.TextBold = true;
+        /** Selected text color for click-placed text (null = theme default). */
+        this.TextColor = null;
+        /** Agent presence cursor (pulsing ring + "… is drawing" label), driven by the host. */
+        this.AgentPresence = null;
+        /**
+         * Read-only mode (artifact viewer / session review): all mutating pointer interactions,
+         * paste, and inline editing are disabled; pan + zoom remain available for navigation.
+         */
+        this.ReadOnly = false;
+        /** Requests a tool switch decided by a board gesture (e.g. Esc → select). */
+        this.ToolChangeRequest = new EventEmitter();
+        /**
+         * Cancelable BEFORE event: a sandboxed HTML widget called `MJWhiteboard.submit(data)`
+         * and the payload passed validation (marker + tracked source window + size cap).
+         * Handlers run synchronously — set `Cancel = true` on the args to drop the submission
+         * ({@link WidgetSubmitted} then never fires).
+         */
+        this.WidgetSubmitting = new EventEmitter();
+        /**
+         * AFTER event: a validated widget submission was accepted (not canceled). Integration
+         * layers forward this to their agent/automation runtime — e.g. MJ's realtime channel
+         * plugin surfaces it to the live agent as a `[whiteboard]` context note.
+         */
+        this.WidgetSubmitted = new EventEmitter();
+        /**
+         * AMBIENT widget telemetry: the injected recorder observed passive form activity
+         * (clicks / changes / typing / focus) inside a sandboxed HTML widget — no widget-authored
+         * script involved. The batch was validated (marker + tracked source + size cap + shape)
+         * and pre-summarized into one compact human line. Integration layers forward it to their
+         * agent runtime as low-priority background context (MJ's channel plugin throttles per
+         * widget and frames it as a do-not-respond `[whiteboard]` note).
+         */
+        this.WidgetInteraction = new EventEmitter();
+        /**
+         * Cancelable BEFORE event: an in-board editor commit (inline sticky/text/shape edit or
+         * the markdown/HTML rich editor's Apply/Done) is about to write to the state engine.
+         * Set `Cancel = true` synchronously to discard the commit; handlers may also rewrite
+         * the args' `Content` / `Title`.
+         */
+        this.ContentApplying = new EventEmitter();
+        /** AFTER event: an editor commit applied to the state engine. */
+        this.ContentApplied = new EventEmitter();
+        // viewport
+        this.PanX = 0;
+        this.PanY = 0;
+        this.Zoom = 0.9;
+        this.MinimapOpen = false;
+        // transient interaction state
+        this.Interaction = null;
+        this.PendingConnector = null;
+        this.EditingID = null;
+        /** The rich-content editor panel state (markdown / html items), or null when closed. */
+        this.RichEditor = null;
+        /** The open right-click context menu (canvas-relative position + model), or null. */
+        this.ContextMenu = null;
+        this.editIsNew = false;
+        this.pendingFocus = false;
+        this.userStickyCount = 0;
+        /** Agent items that just popped in (drive the .pop-in violet flash). */
+        this.PopInIDs = new Set();
+        this.popInTimers = [];
+        this._tool = 'select';
+        this.cdr = inject(ChangeDetectorRef);
+        // ── Precomputed render buckets ──────────────────────────────────────────────
+        // `State.Items` allocates (Array.from + sort) on every access, and the four
+        // template-bound getters below each used to call it and re-filter the whole
+        // array — so a single change-detection pass on this high-interaction drag
+        // surface re-sorted + re-scanned the item list 4×. We partition State.Items
+        // into these four buckets ONCE whenever the items/state actually change
+        // (initial load + every Changed$ emission, which covers adds/updates/removes
+        // AND page switches), and the template binds to the plain array fields.
+        this._boxItems = [];
+        this._inkItems = [];
+        this._connectorItems = [];
+        this._highlightItems = [];
+        /** Whether the single window 'message' listener (the widget input bridge) is attached. */
+        this.widgetMessageListenerAttached = false;
+        // ── Hidden-host layout recovery ─────────────────────────────────────────────
+        //
+        // The board is often CREATED inside a display:none tab pane (a review session's
+        // Whiteboard tab, a collapsed surface panel): the canvas measures 0×0, so the
+        // viewport-lazy culling computes everything as off-screen and the board renders
+        // BLANK until some interaction forces a re-measure. A ResizeObserver watches for
+        // the first REAL layout: it re-runs change detection (fixing the culling) and —
+        // when the viewport is still untouched — frames the content via FitToContent so a
+        // reviewed board opens centered instead of wherever pan (0,0) happens to land.
+        /** Observer driving {@link onCanvasResize}; created once the canvas element exists. */
+        this.canvasResizeObserver = null;
+        /** True once the canvas has had a real (non-zero) layout. */
+        this.hadRealLayout = false;
+        /** True once the user pans/zooms — the auto-fit must never fight a chosen viewport. */
+        this.viewportTouched = false;
+        this.Handles = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+        /**
+         * The widget input bridge's host-side listener. The sandboxed frames have OPAQUE
+         * origins (their helper posts with `'*'`), so validation happens HERE: the payload
+         * must carry the bridge marker AND `event.source` must be the contentWindow of one of
+         * this board's tracked widget iframes — anything else is dropped. Accepted payloads
+         * are JSON-capped and surfaced through the {@link WidgetSubmitting} (cancelable) /
+         * {@link WidgetSubmitted} event pair.
+         */
+        this.onWindowMessage = (event) => {
+            const widget = this.resolveWidgetFromSource(event.source);
+            const outcome = EvaluateWidgetSubmitMessage(event.data, widget);
+            if (outcome.Kind === 'submit') {
+                const submitting = { Event: outcome.Event, Cancel: false };
+                this.WidgetSubmitting.emit(submitting);
+                if (!submitting.Cancel) {
+                    this.WidgetSubmitted.emit(outcome.Event);
+                }
+                this.cdr.markForCheck();
+                return;
+            }
+            if (outcome.Reason === 'oversize') {
+                console.warn(`Whiteboard widget submit dropped: payload exceeds ${WHITEBOARD_WIDGET_SUBMIT_MAX_CHARS} chars.`);
+            }
+            else if (outcome.Reason === 'unknown-source') {
+                console.warn('Whiteboard widget submit dropped: message source is not a tracked widget frame.');
+            }
+            else {
+                // 'not-submit' — may be the injected recorder's AMBIENT interaction batch instead.
+                this.handleInteractionMessage(event.data, widget);
+            }
+        };
+    }
+    /** Active tool (owned by the host; toolbar + keyboard drive it). */
+    set Tool(value) {
+        if (value !== this._tool) {
+            this._tool = value;
+            this.CancelTransient();
+        }
+    }
+    get Tool() {
+        return this._tool;
+    }
+    ngOnInit() {
+        this.changedSub = this.State.Changed$.subscribe((change) => {
+            if (change.Op === 'add' && change.Author === 'agent') {
+                this.PopInIDs.add(change.ItemID);
+                this.popInTimers.push(setTimeout(() => {
+                    this.PopInIDs.delete(change.ItemID);
+                    this.cdr.markForCheck();
+                }, POP_IN_MS));
+            }
+            // NOTE: HTML-widget srcdoc payloads need no invalidation here — the
+            // `wbWidgetSrcdoc` pipe is view-scoped (rebuilt per mount, memoized per source),
+            // so journal ops can neither leave a re-mounted frame a stale document nor
+            // force-reload a still-mounted widget whose Html didn't change.
+            // close the rich editor when its target item no longer exists (erased / undone)
+            if (this.RichEditor && !this.State.GetItem(this.RichEditor.ItemID)) {
+                this.RichEditor = null;
+            }
+            // close the context menu when its target item / page no longer exists
+            if (this.ContextMenu?.ItemID && !this.State.GetItem(this.ContextMenu.ItemID)) {
+                this.ContextMenu = null;
+            }
+            if (this.ContextMenu?.PageID && !this.State.FindPage(this.ContextMenu.PageID)) {
+                this.ContextMenu = null;
+            }
+            this.recomputeRenderBuckets();
+            this.syncWidgetMessageListener();
+            this.cdr.markForCheck();
+        });
+        this.recomputeRenderBuckets();
+        this.syncWidgetMessageListener();
+    }
+    /**
+     * Partition `State.Items` (one Array.from + sort) into the four render buckets
+     * the template binds to. Called on init and on every {@link WhiteboardState.Changed$}
+     * emission — the engine emits there for adds/updates/removes and page switches, so
+     * the buckets always reflect the active page's current items.
+     */
+    recomputeRenderBuckets() {
+        const box = [];
+        const ink = [];
+        const connectors = [];
+        const highlights = [];
+        for (const i of this.State.Items) {
+            switch (i.Kind) {
+                case 'sticky':
+                case 'shape':
+                case 'text':
+                case 'image':
+                case 'markdown':
+                case 'html':
+                    box.push(i);
+                    break;
+                case 'ink':
+                    ink.push(i);
+                    break;
+                case 'connector':
+                    connectors.push(i);
+                    break;
+                case 'highlight':
+                    highlights.push(i);
+                    break;
+            }
+        }
+        this._boxItems = box;
+        this._inkItems = ink;
+        this._connectorItems = connectors;
+        this._highlightItems = highlights;
+    }
+    ngOnDestroy() {
+        this.changedSub?.unsubscribe();
+        for (const t of this.popInTimers) {
+            clearTimeout(t);
+        }
+        if (this.widgetMessageListenerAttached) {
+            window.removeEventListener('message', this.onWindowMessage);
+            this.widgetMessageListenerAttached = false;
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.pendingFocus) {
+            this.pendingFocus = false;
+            const editor = this.canvasRef?.nativeElement.querySelector('.wb-edit');
+            editor?.focus();
+        }
+        this.observeCanvasSize();
+    }
+    /** Attaches the ResizeObserver exactly once (no-op where ResizeObserver is unavailable). */
+    observeCanvasSize() {
+        const el = this.canvasRef?.nativeElement;
+        if (!el || this.canvasResizeObserver || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        this.canvasResizeObserver = new ResizeObserver(() => this.onCanvasResize());
+        this.canvasResizeObserver.observe(el);
+        this.onCanvasResize();
+    }
+    /** First non-zero layout: recompute culling and (if untouched) frame the content. */
+    onCanvasResize() {
+        const el = this.canvasRef?.nativeElement;
+        if (!el || el.clientWidth === 0 || el.clientHeight === 0 || this.hadRealLayout) {
+            return;
+        }
+        this.hadRealLayout = true;
+        if (!this.viewportTouched) {
+            this.FitToContent();
+        }
+        this.cdr.markForCheck();
+    }
+    // ────────────────────────────────────────────── render-model getters
+    // These four return precomputed buckets (see recomputeRenderBuckets); they are
+    // refreshed only when the items/state change, not re-filtered every CD pass.
+    get BoxItems() {
+        return this._boxItems;
+    }
+    get InkItems() {
+        return this._inkItems;
+    }
+    get ConnectorItems() {
+        return this._connectorItems;
+    }
+    get HighlightItems() {
+        return this._highlightItems;
+    }
+    get ViewportTransform() {
+        return `translate(${this.PanX}px, ${this.PanY}px) scale(${this.Zoom})`;
+    }
+    get GridBackgroundSize() {
+        const s = GRID_SIZE * this.Zoom;
+        return `${s}px ${s}px`;
+    }
+    get GridBackgroundPosition() {
+        return `${this.PanX}px ${this.PanY}px`;
+    }
+    get ZoomPercent() {
+        return Math.round(this.Zoom * 100);
+    }
+    get CursorClass() {
+        switch (this.Tool) {
+            case 'pan': return 'cur-pan';
+            case 'pen':
+            case 'shape':
+            case 'connector': return 'cur-cross';
+            case 'sticky':
+            case 'image':
+            case 'markdown':
+            case 'html': return 'cur-copy';
+            case 'text': return 'cur-text';
+            case 'eraser': return 'cur-eraser';
+            default: return '';
+        }
+    }
+    TrackItem(index, item) {
+        return item.ID;
+    }
+    /**
+     * Explicit wrap width for a text label (resize / tool w) — null lets the CSS max-width
+     * wrap. Honors an in-flight RESIZE transient so the live preview tracks the handle drag
+     * (a move transient is deliberately ignored: its W is the rough bounds ESTIMATE, and
+     * stamping it inline would re-wrap an unsized label mid-drag).
+     */
+    TextWrapWidth(item) {
+        if (item.Kind !== 'text') {
+            return null;
+        }
+        if (this.Interaction?.Type === 'resize' && this.Interaction.ItemID === item.ID) {
+            return this.Interaction.CurBounds.W;
+        }
+        return item.W ?? null;
+    }
+    /** Left position of an item, honoring an in-flight move/resize transient. */
+    ItemX(item) {
+        const t = this.transientBounds(item.ID);
+        return t ? t.X : this.State.ItemBounds(item).X;
+    }
+    ItemY(item) {
+        const t = this.transientBounds(item.ID);
+        return t ? t.Y : this.State.ItemBounds(item).Y;
+    }
+    ItemW(item) {
+        const t = this.transientBounds(item.ID);
+        if (t) {
+            return t.W;
+        }
+        if (item.Kind === 'shape' || item.Kind === 'highlight') {
+            return item.W;
+        }
+        if (item.Kind === 'sticky') {
+            return item.W ?? WHITEBOARD_DEFAULTS.StickyW;
+        }
+        if (item.Kind === 'image') {
+            return item.W ?? WHITEBOARD_DEFAULTS.ImageW;
+        }
+        if (item.Kind === 'markdown' || item.Kind === 'html') {
+            return item.W;
+        }
+        return null;
+    }
+    ItemH(item) {
+        const t = this.transientBounds(item.ID);
+        if (t && (item.Kind === 'shape' || item.Kind === 'highlight' || item.Kind === 'html')) {
+            return t.H;
+        }
+        if (item.Kind === 'shape' || item.Kind === 'highlight' || item.Kind === 'html') {
+            return item.H;
+        }
+        return null;
+    }
+    /** A markdown panel's optional max height (its rendered height stays content-driven). */
+    MarkdownMaxHeight(item) {
+        return item.H ?? null;
+    }
+    /** Whether the item is part of the current (single OR multi) selection. */
+    IsSelected(item) {
+        return this.State.IsItemSelected(item.ID);
+    }
+    /** Dragging visuals: the grabbed item, plus every other member during a GROUP drag. */
+    IsDragging(item) {
+        const i = this.Interaction;
+        if (i?.Type !== 'move' || !i.Moved) {
+            return false;
+        }
+        return UUIDsEqual(i.ItemID, item.ID) || (i.Group && this.State.IsItemSelected(item.ID));
+    }
+    /**
+     * 8 handles render on the selected, resizable item (gate: {@link IsResizableKind}) —
+     * but only for a SINGLE selection; a multi-selection shows the outline treatment only.
+     */
+    ShowHandles(item) {
+        return this.IsSelected(item) && this.State.SelectedIDs.length === 1 && IsResizableKind(item.Kind);
+    }
+    /** The drag ghost rectangle ("from here") at the moved item's original bounds. */
+    get DragGhost() {
+        return this.Interaction?.Type === 'move' && this.Interaction.Moved ? this.Interaction.OrigBounds : null;
+    }
+    /** Live shape-create preview rectangle. */
+    get ShapePreview() {
+        if (this.Interaction?.Type !== 'shape') {
+            return null;
+        }
+        const s = this.Interaction;
+        return {
+            X: Math.min(s.StartX, s.CurX),
+            Y: Math.min(s.StartY, s.CurY),
+            W: Math.abs(s.CurX - s.StartX),
+            H: Math.abs(s.CurY - s.StartY)
+        };
+    }
+    /** Live marquee (rubber-band) selection rectangle, or null when none is in flight. */
+    get MarqueeRect() {
+        if (this.Interaction?.Type !== 'marquee') {
+            return null;
+        }
+        const m = this.Interaction;
+        const rect = {
+            X: Math.min(m.StartX, m.CurX),
+            Y: Math.min(m.StartY, m.CurY),
+            W: Math.abs(m.CurX - m.StartX),
+            H: Math.abs(m.CurY - m.StartY)
+        };
+        return rect.W >= 3 || rect.H >= 3 ? rect : null;
+    }
+    StickyRotation(item) {
+        return `rotate(${item.Rotation ?? 0}deg)`;
+    }
+    StickyTintClass(item) {
+        if (item.Author === 'agent') {
+            return 'sticky--sage';
+        }
+        return item.Tint === 'amber-light' ? 'sticky--amber2' : 'sticky--amber';
+    }
+    HighlightTag(item) {
+        return item.Label || `${item.Author === 'agent' ? this.AgentName : 'You'} highlighted`;
+    }
+    // ────────────────────────────────────────────── text styling
+    /** Family key → CSS font stack ('sans' = null so the board's default font cascades). */
+    static { this.FontStacks = {
+        sans: null,
+        serif: 'Georgia, "Times New Roman", serif',
+        mono: 'var(--mj-font-mono, ui-monospace, "SF Mono", Menlo, monospace)'
+    }; }
+    /** Inline font-size for a styled text/sticky item (null = the kind's CSS default). */
+    ItemFontSize(item) {
+        return item.FontSize != null ? `${item.FontSize}px` : null;
+    }
+    /** Inline font-family stack for a styled text/sticky item (null = inherit). */
+    ItemFontFamily(item) {
+        return item.FontFamily ? RealtimeWhiteboardBoardComponent.FontStacks[item.FontFamily] : null;
+    }
+    /** Inline font-weight for a styled text/sticky item (null = the kind's CSS default). */
+    ItemFontWeight(item) {
+        return item.FontWeight != null ? `${item.FontWeight}` : null;
+    }
+    /**
+     * Inline color for a USER text label. Agent labels keep their violet authorship
+     * treatment from CSS — `Color` never overrides it.
+     */
+    ItemTextColor(item) {
+        return item.Author === 'user' && item.Color ? item.Color : null;
+    }
+    /**
+     * Apply a toolbar style pick to the selected text/sticky item (the "restyle existing"
+     * path — the toolbar emits `StyleSelection`, the host routes it here). No-op when
+     * nothing applicable is selected; color only applies to user text labels.
+     */
+    ApplyTextStyleToSelection(style) {
+        const id = this.State.SelectedID;
+        const item = id ? this.State.GetItem(id) : undefined;
+        if (!id || !item || (item.Kind !== 'sticky' && item.Kind !== 'text')) {
+            return;
+        }
+        const patch = {};
+        if (style.FontSize !== undefined) {
+            patch.FontSize = style.FontSize;
+        }
+        if (style.FontFamily !== undefined) {
+            patch.FontFamily = style.FontFamily;
+        }
+        if (style.Bold !== undefined) {
+            patch.FontWeight = style.Bold ? 700 : 400;
+        }
+        if (style.Color !== undefined && item.Kind === 'text') {
+            patch.Color = style.Color;
+        }
+        if (Object.keys(patch).length > 0) {
+            this.State.UpdateItem(id, patch, 'user');
+        }
+    }
+    // ────────────────────────────────────────────── svg path builders
+    /** Smoothed freehand path (quadratic curves through segment midpoints). */
+    InkPath(points) {
+        if (points.length === 0) {
+            return '';
+        }
+        if (points.length < 3) {
+            const last = points[points.length - 1];
+            return `M ${points[0].X} ${points[0].Y} L ${last.X} ${last.Y}`;
+        }
+        let d = `M ${points[0].X} ${points[0].Y}`;
+        for (let i = 1; i < points.length - 1; i++) {
+            const midX = (points[i].X + points[i + 1].X) / 2;
+            const midY = (points[i].Y + points[i + 1].Y) / 2;
+            d += ` Q ${points[i].X} ${points[i].Y} ${midX} ${midY}`;
+        }
+        const last = points[points.length - 1];
+        d += ` L ${last.X} ${last.Y}`;
+        return d;
+    }
+    /** Curved connector path between resolved (edge-clipped) endpoints. */
+    ConnectorPath(conn) {
+        const { from, to } = this.connectorEndpoints(conn);
+        return this.curveBetween(from, to);
+    }
+    /** Two short arrowhead strokes at the connector's target end. */
+    ConnectorArrow(conn) {
+        const { from, to } = this.connectorEndpoints(conn);
+        return this.arrowAt(from, to);
+    }
+    get PendingConnectorPath() {
+        if (!this.PendingConnector) {
+            return '';
+        }
+        const from = this.pendingFromPoint();
+        return this.curveBetween(from, { X: this.PendingConnector.CurX, Y: this.PendingConnector.CurY });
+    }
+    get LivePenPath() {
+        return this.Interaction?.Type === 'pen' ? this.InkPath(this.Interaction.Points) : '';
+    }
+    connectorEndpoints(conn) {
+        let from = this.State.ResolveEndpoint(conn, 'from');
+        let to = this.State.ResolveEndpoint(conn, 'to');
+        // clip anchored endpoints to the referenced item's bounds edge
+        const fromItem = conn.FromItemID ? this.State.GetItem(conn.FromItemID) : undefined;
+        const toItem = conn.ToItemID ? this.State.GetItem(conn.ToItemID) : undefined;
+        if (fromItem) {
+            from = this.edgePoint(this.State.ItemBounds(fromItem), to);
+        }
+        if (toItem) {
+            to = this.edgePoint(this.State.ItemBounds(toItem), from);
+        }
+        return { from, to };
+    }
+    /** Intersect the segment bounds-center → towards with the bounds rectangle edge. */
+    edgePoint(b, towards) {
+        const cx = b.X + b.W / 2;
+        const cy = b.Y + b.H / 2;
+        const dx = towards.X - cx;
+        const dy = towards.Y - cy;
+        if (dx === 0 && dy === 0) {
+            return { X: cx, Y: cy };
+        }
+        const sx = dx !== 0 ? (b.W / 2) / Math.abs(dx) : Infinity;
+        const sy = dy !== 0 ? (b.H / 2) / Math.abs(dy) : Infinity;
+        const s = Math.min(sx, sy);
+        return { X: cx + dx * s, Y: cy + dy * s };
+    }
+    curveBetween(from, to) {
+        const dx = to.X - from.X;
+        const dy = to.Y - from.Y;
+        if (Math.abs(dy) >= Math.abs(dx)) {
+            // vertical bias (matches the mockup's email→webinar curve)
+            return `M ${from.X} ${from.Y} C ${from.X + dx * 0.08} ${from.Y + dy * 0.45}, ${to.X - dx * 0.08} ${to.Y - dy * 0.45}, ${to.X} ${to.Y}`;
+        }
+        return `M ${from.X} ${from.Y} C ${from.X + dx * 0.45} ${from.Y + dy * 0.08}, ${to.X - dx * 0.45} ${to.Y - dy * 0.08}, ${to.X} ${to.Y}`;
+    }
+    arrowAt(from, to) {
+        const angle = Math.atan2(to.Y - from.Y, to.X - from.X);
+        const len = 13;
+        const spread = 0.46; // ~26°
+        const a1 = angle + Math.PI - spread;
+        const a2 = angle + Math.PI + spread;
+        const p1 = { X: to.X + Math.cos(a1) * len, Y: to.Y + Math.sin(a1) * len };
+        const p2 = { X: to.X + Math.cos(a2) * len, Y: to.Y + Math.sin(a2) * len };
+        return `M ${to.X} ${to.Y} L ${p1.X.toFixed(1)} ${p1.Y.toFixed(1)} M ${to.X} ${to.Y} L ${p2.X.toFixed(1)} ${p2.Y.toFixed(1)}`;
+    }
+    // ────────────────────────────────────────────── pointer interactions
+    OnCanvasPointerDown(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        if (this.ReadOnly) {
+            // Pan stays available for read navigation; every other tool is inert.
+            if (this.Tool === 'pan') {
+                this.Interaction = { Type: 'pan', StartClientX: event.clientX, StartClientY: event.clientY, OrigPanX: this.PanX, OrigPanY: this.PanY };
+            }
+            return;
+        }
+        this.canvasRef?.nativeElement.focus();
+        const p = this.toBoard(event);
+        switch (this.Tool) {
+            case 'select':
+                // marquee (rubber-band) selection starts on empty canvas; a tiny drag (a plain
+                // click) clears the selection at pointerup unless shift is held (additive)
+                this.Interaction = { Type: 'marquee', StartX: p.X, StartY: p.Y, CurX: p.X, CurY: p.Y, Additive: event.shiftKey };
+                break;
+            case 'pan':
+                this.Interaction = { Type: 'pan', StartClientX: event.clientX, StartClientY: event.clientY, OrigPanX: this.PanX, OrigPanY: this.PanY };
+                break;
+            case 'pen':
+                this.Interaction = { Type: 'pen', Points: [p] };
+                break;
+            case 'shape':
+                this.Interaction = { Type: 'shape', StartX: p.X, StartY: p.Y, CurX: p.X, CurY: p.Y };
+                break;
+            case 'sticky':
+                this.placeSticky(p);
+                break;
+            case 'text':
+                this.placeText(p);
+                break;
+            case 'markdown':
+                this.placeMarkdown(p);
+                break;
+            case 'html':
+                this.placeHtml(p);
+                break;
+            case 'image':
+                this.placeImage(p, 'pasted-image.png', null);
+                break;
+            case 'connector':
+                this.connectorClick(null, p);
+                break;
+            case 'eraser':
+                break;
+        }
+    }
+    OnItemPointerDown(event, item) {
+        if (this.ReadOnly) {
+            return;
+        }
+        if (event.button !== 0) {
+            return;
+        }
+        if (UUIDsEqual(this.EditingID, item.ID)) {
+            event.stopPropagation();
+            return;
+        }
+        switch (this.Tool) {
+            case 'select': {
+                event.stopPropagation();
+                if (event.shiftKey) {
+                    // shift-click toggles membership in the multi-selection (no drag from it)
+                    this.State.ToggleSelect(item.ID);
+                    break;
+                }
+                // pointerdown on an already multi-selected item keeps the selection and drags
+                // the whole GROUP; a click without movement collapses to that item at pointerup
+                const group = this.State.IsItemSelected(item.ID) && this.State.SelectedIDs.length > 1;
+                if (!group) {
+                    this.State.Select(item.ID);
+                }
+                const p = this.toBoard(event);
+                const bounds = this.State.ItemBounds(item);
+                this.Interaction = { Type: 'move', ItemID: item.ID, StartX: p.X, StartY: p.Y, OrigBounds: bounds, DX: 0, DY: 0, Moved: false, Group: group };
+                break;
+            }
+            case 'eraser':
+                event.stopPropagation();
+                this.State.RemoveItem(item.ID, 'user');
+                break;
+            case 'connector': {
+                event.stopPropagation();
+                this.connectorClick(item.ID, this.toBoard(event));
+                break;
+            }
+            default:
+                // pen / shape / sticky / text / image gestures begin on the canvas — let it bubble
+                break;
+        }
+    }
+    OnHandlePointerDown(event, item, handle) {
+        if (this.ReadOnly) {
+            return;
+        }
+        if (event.button !== 0 || this.Tool !== 'select') {
+            return;
+        }
+        event.stopPropagation();
+        const p = this.toBoard(event);
+        const bounds = this.State.ItemBounds(item);
+        this.Interaction = { Type: 'resize', ItemID: item.ID, Handle: handle, StartX: p.X, StartY: p.Y, OrigBounds: bounds, CurBounds: { ...bounds } };
+    }
+    /** Click on a highlight region dismisses it (mockup: "click dismisses"). */
+    OnHighlightClick(event, item) {
+        event.stopPropagation();
+        this.State.RemoveItem(item.ID, 'user');
+    }
+    OnWindowPointerMove(event) {
+        if (!this.Interaction && !this.PendingConnector) {
+            return;
+        }
+        const p = this.toBoard(event);
+        if (this.PendingConnector) {
+            this.PendingConnector.CurX = p.X;
+            this.PendingConnector.CurY = p.Y;
+        }
+        const i = this.Interaction;
+        if (!i) {
+            return;
+        }
+        switch (i.Type) {
+            case 'move': {
+                i.DX = p.X - i.StartX;
+                i.DY = p.Y - i.StartY;
+                if (!i.Moved && Math.hypot(i.DX, i.DY) > 3) {
+                    i.Moved = true;
+                }
+                break;
+            }
+            case 'resize':
+                i.CurBounds = this.resizeBounds(i.OrigBounds, i.Handle, p.X - i.StartX, p.Y - i.StartY);
+                break;
+            case 'pen': {
+                const last = i.Points[i.Points.length - 1];
+                if (Math.hypot(p.X - last.X, p.Y - last.Y) > 2.2) {
+                    i.Points.push(p);
+                }
+                break;
+            }
+            case 'shape':
+                i.CurX = p.X;
+                i.CurY = p.Y;
+                break;
+            case 'marquee':
+                i.CurX = p.X;
+                i.CurY = p.Y;
+                break;
+            case 'pan':
+                this.viewportTouched = true; // a chosen viewport — the first-layout auto-fit must not fight it
+                this.PanX = i.OrigPanX + (event.clientX - i.StartClientX);
+                this.PanY = i.OrigPanY + (event.clientY - i.StartClientY);
+                break;
+        }
+    }
+    OnWindowPointerUp() {
+        const i = this.Interaction;
+        if (!i) {
+            return;
+        }
+        this.Interaction = null;
+        switch (i.Type) {
+            case 'move':
+                if (i.Moved) {
+                    if (i.Group) {
+                        // group drag: every selected item moves by the same delta — ONE undo step
+                        this.State.MoveSelectedBy(i.DX, i.DY, 'user');
+                    }
+                    else {
+                        this.State.MoveItem(i.ItemID, i.OrigBounds.X + i.DX, i.OrigBounds.Y + i.DY, 'user');
+                    }
+                }
+                else if (i.Group) {
+                    // click (no drag) on a multi-selected item collapses the selection to it
+                    this.State.Select(i.ItemID);
+                }
+                break;
+            case 'marquee': {
+                const rect = {
+                    X: Math.min(i.StartX, i.CurX),
+                    Y: Math.min(i.StartY, i.CurY),
+                    W: Math.abs(i.CurX - i.StartX),
+                    H: Math.abs(i.CurY - i.StartY)
+                };
+                if (rect.W < 3 && rect.H < 3) {
+                    // a plain click on empty canvas clears the selection (shift-click keeps it)
+                    if (!i.Additive) {
+                        this.State.Select(null);
+                    }
+                    break;
+                }
+                const hits = this.State.ItemsIntersecting(rect).map((it) => it.ID);
+                this.State.SelectMany(i.Additive ? [...this.State.SelectedIDs, ...hits] : hits);
+                break;
+            }
+            case 'resize': {
+                const item = this.State.GetItem(i.ItemID);
+                // per-kind commit: full-box kinds take X/Y/W/H; content-driven-height kinds
+                // (sticky/text/image/markdown) take X/Y/W only — see BuildResizeCommitPatch.
+                const patch = item ? BuildResizeCommitPatch(item.Kind, i.CurBounds) : null;
+                if (patch) {
+                    this.State.UpdateItem(i.ItemID, patch, 'user');
+                }
+                break;
+            }
+            case 'pen':
+                if (i.Points.length >= 2) {
+                    this.State.AddItem({ Kind: 'ink', Points: i.Points, Color: this.PenColor, StrokeWidth: this.PenWidth }, 'user');
+                }
+                break;
+            case 'shape': {
+                const r = {
+                    X: Math.min(i.StartX, i.CurX),
+                    Y: Math.min(i.StartY, i.CurY),
+                    W: Math.abs(i.CurX - i.StartX),
+                    H: Math.abs(i.CurY - i.StartY)
+                };
+                if (r.W >= 16 && r.H >= 16) {
+                    const item = this.State.AddItem({ Kind: 'shape', Shape: this.ShapeKind, X: r.X, Y: r.Y, W: Math.max(r.W, 60), H: Math.max(r.H, WHITEBOARD_DEFAULTS.ShapeMinH), Label: '' }, 'user');
+                    if (item) {
+                        this.State.Select(item.ID);
+                        this.beginEdit(item.ID, true);
+                    }
+                }
+                break;
+            }
+            case 'pan':
+                break;
+        }
+    }
+    OnWheel(event) {
+        event.preventDefault();
+        if (event.ctrlKey || event.metaKey) {
+            const factor = event.deltaY < 0 ? 1.1 : 1 / 1.1;
+            this.zoomAt(this.clampZoom(this.Zoom * factor), event.clientX, event.clientY);
+        }
+        else {
+            this.PanX -= event.deltaX;
+            this.PanY -= event.deltaY;
+        }
+    }
+    /** Paste an image from the clipboard onto the board (mockup: pasted-image card). */
+    OnPaste(event) {
+        if (this.ReadOnly) {
+            return;
+        }
+        const files = event.clipboardData?.files;
+        if (!files || files.length === 0) {
+            return;
+        }
+        for (let n = 0; n < files.length; n++) {
+            const file = files[n];
+            if (file.type.startsWith('image/')) {
+                event.preventDefault();
+                const center = this.viewportCenter();
+                this.placeImage({ X: center.X - WHITEBOARD_DEFAULTS.ImageW / 2, Y: center.Y - WHITEBOARD_DEFAULTS.ImageH / 2 }, file.name || 'pasted-image.png', URL.createObjectURL(file));
+                return;
+            }
+        }
+    }
+    // ────────────────────────────────────────────── inline editing
+    BeginItemEdit(event, item) {
+        if (item.Kind !== 'sticky' && item.Kind !== 'text' && item.Kind !== 'shape') {
+            return;
+        }
+        event.stopPropagation();
+        this.beginEdit(item.ID, false);
+    }
+    /**
+     * Commit the inline editor's value to the edited sticky / text / shape item. Routes
+     * through the {@link ContentApplying} (cancelable) / {@link ContentApplied} event pair;
+     * an empty commit on a JUST-PLACED sticky/text abandons the placement instead (the item
+     * is removed — that path raises the engine's remove events, not the content pair).
+     */
+    CommitEdit(value) {
+        const id = this.EditingID;
+        if (!id) {
+            return;
+        }
+        this.EditingID = null;
+        const item = this.State.GetItem(id);
+        if (!item) {
+            return;
+        }
+        const text = value.trim();
+        if (text.length === 0 && this.editIsNew && (item.Kind === 'sticky' || item.Kind === 'text')) {
+            this.State.RemoveItem(id, 'user'); // abandoned placement
+            return;
+        }
+        if (item.Kind === 'shape') {
+            this.applyContent(id, 'shape', text);
+        }
+        else if (item.Kind === 'sticky' || item.Kind === 'text') {
+            this.applyContent(id, item.Kind, text);
+        }
+        this.editIsNew = false;
+    }
+    /**
+     * Run one editor commit through the {@link ContentApplying} / {@link ContentApplied}
+     * pair: raise the cancelable BEFORE event, apply the (possibly handler-edited) content
+     * via the state engine when not canceled, and raise the AFTER event when the engine
+     * applied it (an engine-level `ItemUpdating$` veto also suppresses the AFTER event).
+     */
+    applyContent(itemId, kind, content, title) {
+        const applying = { ItemID: itemId, Kind: kind, Content: content, Title: title, Cancel: false };
+        this.ContentApplying.emit(applying);
+        if (applying.Cancel) {
+            return;
+        }
+        let patch;
+        switch (kind) {
+            case 'shape':
+                patch = { Label: applying.Content };
+                break;
+            case 'markdown':
+                patch = { Markdown: applying.Content };
+                break;
+            case 'html':
+                patch = { Html: applying.Content, Title: applying.Title };
+                break;
+            default:
+                patch = { Text: applying.Content };
+                break; // sticky / text
+        }
+        if (this.State.UpdateItem(itemId, patch, 'user')) {
+            this.ContentApplied.emit({ ItemID: itemId, Kind: kind, Content: applying.Content, Title: applying.Title });
+        }
+    }
+    OnEditKeydown(event, value) {
+        event.stopPropagation();
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            this.CommitEdit(value);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.CommitEdit(value);
+        }
+    }
+    // ────────────────────────────────────────────── rich widgets (markdown / html)
+    // The sandboxed iframe's `srcdoc` is produced by the view-scoped `wbWidgetSrcdoc`
+    // pipe (see whiteboard-srcdoc.pipe.ts for the per-mount lifecycle contract and the
+    // full security rationale for bypassing Angular's sanitizer into the sandbox).
+    // ────────────────────────────────────────────── widget input bridge (MJWhiteboard.submit)
+    /** Attach/detach the SINGLE window 'message' listener so it only runs while widgets exist. */
+    syncWidgetMessageListener() {
+        const hasWidgets = this.State.Items.some((i) => i.Kind === 'html');
+        if (hasWidgets && !this.widgetMessageListenerAttached) {
+            window.addEventListener('message', this.onWindowMessage);
+            this.widgetMessageListenerAttached = true;
+        }
+        else if (!hasWidgets && this.widgetMessageListenerAttached) {
+            window.removeEventListener('message', this.onWindowMessage);
+            this.widgetMessageListenerAttached = false;
+        }
+    }
+    /**
+     * Second leg of the message listener: evaluate a non-submit message against the ambient
+     * interaction contract and surface accepted batches through {@link WidgetInteraction}.
+     * `'not-interaction'` is unrelated postMessage traffic — ignored silently, like the
+     * submit path's `'not-submit'`.
+     */
+    handleInteractionMessage(messageData, widget) {
+        const outcome = EvaluateWidgetInteractionMessage(messageData, widget);
+        if (outcome.Kind === 'interaction') {
+            this.WidgetInteraction.emit(outcome.Event);
+            this.cdr.markForCheck();
+            return;
+        }
+        if (outcome.Reason === 'oversize') {
+            console.warn(`Whiteboard widget interaction dropped: batch exceeds ${WHITEBOARD_WIDGET_INTERACTION_MAX_CHARS} chars.`);
+        }
+        else if (outcome.Reason === 'unknown-source') {
+            console.warn('Whiteboard widget interaction dropped: message source is not a tracked widget frame.');
+        }
+        else if (outcome.Reason === 'bad-shape') {
+            console.warn('Whiteboard widget interaction dropped: events batch is malformed.');
+        }
+    }
+    /** Resolve a message `event.source` to the tracked widget iframe (window → item) it belongs to. */
+    resolveWidgetFromSource(source) {
+        if (!source) {
+            return null;
+        }
+        const frames = this.canvasRef?.nativeElement.querySelectorAll('iframe.html-card__frame[data-item-id]');
+        if (!frames) {
+            return null;
+        }
+        for (const frame of Array.from(frames)) {
+            if (frame.contentWindow === source) {
+                const id = frame.dataset['itemId'];
+                const item = id ? this.State.GetItem(id) : undefined;
+                if (item && item.Kind === 'html') {
+                    return { ItemID: item.ID, Title: item.Title };
+                }
+            }
+        }
+        return null;
+    }
+    /**
+     * Cheap "on-screen-ish" check that gates iframe instantiation for HTML widgets: only
+     * widgets within (or near) the current viewport get a live sandboxed frame; the rest
+     * render a static placeholder until panned/zoomed into view. Re-entering view re-creates
+     * the frame (any internal widget state resets — acceptable for board decorations).
+     */
+    IsNearViewport(item) {
+        const el = this.canvasRef?.nativeElement;
+        if (!el || el.clientWidth === 0 || el.clientHeight === 0) {
+            // Before the first layout — or while the host pane is display:none (an
+            // unfocused tab) — there is no real viewport to cull against: render rather
+            // than blank out (culling resumes on the first real layout).
+            return true;
+        }
+        const margin = 320;
+        const b = this.State.ItemBounds(item);
+        const vx = -this.PanX / this.Zoom;
+        const vy = -this.PanY / this.Zoom;
+        const vw = el.clientWidth / this.Zoom;
+        const vh = el.clientHeight / this.Zoom;
+        return b.X < vx + vw + margin && b.X + b.W > vx - margin
+            && b.Y < vy + vh + margin && b.Y + b.H > vy - margin;
+    }
+    /** Header title for an HTML widget. */
+    HtmlTitle(item) {
+        return item.Title || 'HTML widget';
+    }
+    /** Open the rich editor for a markdown panel / HTML widget (dblclick or header edit). */
+    BeginRichEdit(event, item) {
+        if (this.ReadOnly || (item.Kind !== 'markdown' && item.Kind !== 'html')) {
+            return;
+        }
+        event.stopPropagation();
+        this.openRichEditor(item);
+    }
+    /** Delete affordance on the HTML widget header (the user removing their own widget). */
+    RemoveItemClick(event, item) {
+        if (this.ReadOnly) {
+            return;
+        }
+        event.stopPropagation();
+        this.State.RemoveItem(item.ID, 'user');
+    }
+    /** Markdown editor: flip between the source editor and the rendered preview. */
+    RichEditorSetPreview(preview) {
+        if (this.RichEditor) {
+            this.RichEditor.Preview = preview;
+        }
+    }
+    OnRichEditorDraftChange(value) {
+        if (this.RichEditor) {
+            this.RichEditor.Draft = value;
+        }
+    }
+    OnRichEditorTitleChange(value) {
+        if (this.RichEditor) {
+            this.RichEditor.TitleDraft = value;
+        }
+    }
+    /**
+     * Commit the draft to the item (ONE update = one undo step) and keep the panel open.
+     * Routes through the {@link ContentApplying} (cancelable) / {@link ContentApplied} pair.
+     */
+    RichEditorApply() {
+        const editor = this.RichEditor;
+        if (!editor || !this.State.GetItem(editor.ItemID)) {
+            return;
+        }
+        if (editor.Kind === 'markdown') {
+            this.applyContent(editor.ItemID, 'markdown', editor.Draft);
+        }
+        else {
+            // empty title clears the header label (UpdateItem skips undefined, so pass '' to clear)
+            this.applyContent(editor.ItemID, 'html', editor.Draft, editor.TitleDraft.trim());
+        }
+    }
+    /** Commit the draft and close the editor panel. */
+    RichEditorDone() {
+        this.RichEditorApply();
+        this.RichEditor = null;
+    }
+    /** Close the editor, discarding any uncommitted draft changes. */
+    RichEditorCancel() {
+        this.RichEditor = null;
+    }
+    /** Esc inside the editor panel closes it; keys must not leak to the board shortcuts. */
+    OnRichEditorKeydown(event) {
+        event.stopPropagation();
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.RichEditorCancel();
+        }
+    }
+    openRichEditor(item) {
+        this.RichEditor = item.Kind === 'markdown'
+            ? { ItemID: item.ID, Kind: 'markdown', Draft: item.Markdown, TitleDraft: '', Preview: false }
+            : { ItemID: item.ID, Kind: 'html', Draft: item.Html, TitleDraft: item.Title ?? '', Preview: false };
+    }
+    // ────────────────────────────────────────────── context menu (right-click)
+    /** Right-click on empty canvas → the "add … here" menu (suppresses the native menu). */
+    OnCanvasContextMenu(event) {
+        if (this.ReadOnly) {
+            return; // no board menu in read-only — the native browser menu stays available
+        }
+        event.preventDefault();
+        this.openContextMenu(event, null);
+    }
+    /** Right-click on a board item → the item action menu (selects the item first). */
+    OnItemContextMenu(event, item) {
+        if (this.ReadOnly) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (item.Kind !== 'highlight') {
+            this.State.Select(item.ID);
+        }
+        this.openContextMenu(event, item);
+    }
+    /** Dispatch one picked context-menu action, then close the menu. */
+    OnContextMenuAction(actionId) {
+        const menu = this.ContextMenu;
+        this.ContextMenu = null;
+        if (!menu) {
+            return;
+        }
+        const item = menu.ItemID ? this.State.GetItem(menu.ItemID) : undefined;
+        switch (actionId) {
+            case 'edit':
+                // same paths as dblclick: inline edit for sticky/text/shape, rich editor for md/html
+                if (item && (item.Kind === 'sticky' || item.Kind === 'text' || item.Kind === 'shape')) {
+                    this.State.Select(item.ID);
+                    this.beginEdit(item.ID, false);
+                }
+                else if (item && (item.Kind === 'markdown' || item.Kind === 'html')) {
+                    this.openRichEditor(item);
+                }
+                break;
+            case 'restyle':
+                // open the toolbar's text-style flyout with the item selected — style picks
+                // restyle the selection through the existing StyleSelection path
+                if (item) {
+                    this.State.Select(item.ID);
+                    this.ToolChangeRequest.emit('text');
+                }
+                break;
+            case 'duplicate':
+                if (item) {
+                    const copy = this.State.DuplicateItem(item.ID, 'user');
+                    if (copy) {
+                        this.State.Select(copy.ID);
+                    }
+                }
+                break;
+            case 'bring-front':
+                if (item) {
+                    this.State.BringToFront(item.ID, 'user');
+                }
+                break;
+            case 'send-back':
+                if (item) {
+                    this.State.SendToBack(item.ID, 'user');
+                }
+                break;
+            case 'delete':
+                if (item) {
+                    this.State.RemoveItem(item.ID, 'user');
+                }
+                break;
+            case 'add-sticky':
+                this.placeSticky(menu.Point);
+                break;
+            case 'add-text':
+                this.placeText(menu.Point);
+                break;
+            case 'add-markdown':
+                this.placeMarkdown(menu.Point);
+                break;
+            case 'add-html':
+                this.placeHtml(menu.Point);
+                break;
+            case 'add-page':
+                // same path as the strip's "+" — an auto-named page the engine switches to
+                this.State.AddPage(undefined, 'user');
+                break;
+            case 'page-rename':
+                if (menu.PageID) {
+                    this.pagesStrip?.BeginRename(menu.PageID);
+                }
+                break;
+            case 'page-delete':
+                if (menu.PageID) {
+                    this.State.RemovePage(menu.PageID, 'user'); // engine guards the last page
+                }
+                break;
+        }
+    }
+    /** Click-away closes the menu (the menu root stops pointerdown propagation for itself). */
+    CloseContextMenu() {
+        if (this.ContextMenu) {
+            this.ContextMenu = null;
+        }
+    }
+    /**
+     * Right-click on a PAGE CHIP in the page strip (forwarded by the strip's
+     * `ChipContextMenu` output) → the page action menu: Rename (routes back into the
+     * strip's inline-rename editor) and Delete (offered only when more than one page
+     * exists — the engine's last-page guard). Never opens in ReadOnly.
+     */
+    OnPageChipContextMenu(payload) {
+        if (this.ReadOnly) {
+            return;
+        }
+        const actions = BuildWhiteboardPageContextMenu(payload.Page, {
+            CanDelete: this.State.Pages.length > 1,
+            ReadOnly: this.ReadOnly
+        });
+        if (actions.length === 0) {
+            return;
+        }
+        this.showContextMenu(payload.Event, actions, null, payload.Page.ID);
+    }
+    openContextMenu(event, item) {
+        this.showContextMenu(event, BuildWhiteboardContextMenu(item), item ? item.ID : null, null);
+    }
+    /** Position + open the shared context-menu panel for any target (item / canvas / page chip). */
+    showContextMenu(event, actions, itemId, pageId) {
+        const el = this.canvasRef?.nativeElement;
+        const rect = el ? el.getBoundingClientRect() : { left: 0, top: 0, width: 0, height: 0 };
+        // keep the menu inside the canvas (estimate: ~200px wide, ~31px per row + padding)
+        const menuW = 200;
+        const menuH = actions.length * 31 + 12;
+        const left = Math.max(4, Math.min(event.clientX - rect.left, Math.max(menuW, rect.width) - menuW));
+        const top = Math.max(4, Math.min(event.clientY - rect.top, Math.max(menuH, rect.height) - menuH));
+        this.ContextMenu = {
+            Left: left,
+            Top: top,
+            Point: this.toBoard(event),
+            ItemID: itemId,
+            PageID: pageId,
+            Actions: actions
+        };
+    }
+    // ────────────────────────────────────────────── zoom / fit / minimap
+    ZoomIn() {
+        const next = ZOOM_STEPS.find((z) => z > this.Zoom + 0.001);
+        this.zoomCentered(next ?? ZOOM_STEPS[ZOOM_STEPS.length - 1]);
+    }
+    /**
+     * Continuous zoom by a multiplicative factor at the viewport center — the
+     * hold-to-zoom tick path (the zoom cluster emits ~3.5% factors every 50 ms while a
+     * +/− button is held). Clamped to the same 25%–200% limits as the stepped zoom.
+     */
+    ZoomByFactor(factor) {
+        if (!Number.isFinite(factor) || factor <= 0) {
+            return;
+        }
+        this.zoomCentered(this.clampZoom(this.Zoom * factor));
+    }
+    ZoomOut() {
+        const lower = [...ZOOM_STEPS].reverse().find((z) => z < this.Zoom - 0.001);
+        this.zoomCentered(lower ?? ZOOM_STEPS[0]);
+    }
+    /** Fit all content into the viewport (25%–200%, 60px padding). */
+    FitToContent() {
+        const bounds = this.State.ContentBounds();
+        const el = this.canvasRef?.nativeElement;
+        if (!bounds || !el || bounds.W === 0 || bounds.H === 0 || el.clientWidth === 0 || el.clientHeight === 0) {
+            return; // a hidden (0×0) host cannot be fit against — wait for a real layout
+        }
+        const pad = 60;
+        const zoom = this.clampZoom(Math.min((el.clientWidth - pad * 2) / bounds.W, (el.clientHeight - pad * 2) / bounds.H));
+        this.Zoom = zoom;
+        this.PanX = (el.clientWidth - bounds.W * zoom) / 2 - bounds.X * zoom;
+        this.PanY = (el.clientHeight - bounds.H * zoom) / 2 - bounds.Y * zoom;
+    }
+    ToggleMinimap() {
+        this.MinimapOpen = !this.MinimapOpen;
+    }
+    /** Cancel any in-flight transient gesture (tool switch, Esc) — incl. the rich editor + context menu. */
+    CancelTransient() {
+        this.Interaction = null;
+        this.PendingConnector = null;
+        this.RichEditor = null;
+        this.ContextMenu = null;
+    }
+    // minimap render model
+    get MinimapViewBox() {
+        const world = this.minimapWorld();
+        return `${world.X} ${world.Y} ${world.W} ${world.H}`;
+    }
+    get MinimapItems() {
+        return this.State.Items
+            .filter((i) => i.Kind !== 'highlight')
+            .map((i) => {
+            const b = this.State.ItemBounds(i);
+            return { X: b.X, Y: b.Y, W: Math.max(b.W, 8), H: Math.max(b.H, 8), Agent: i.Author === 'agent' };
+        });
+    }
+    get MinimapViewport() {
+        const el = this.canvasRef?.nativeElement;
+        const w = el ? el.clientWidth : 0;
+        const h = el ? el.clientHeight : 0;
+        return { X: -this.PanX / this.Zoom, Y: -this.PanY / this.Zoom, W: w / this.Zoom, H: h / this.Zoom };
+    }
+    minimapWorld() {
+        const content = this.State.ContentBounds();
+        const vp = this.MinimapViewport;
+        const minX = Math.min(content?.X ?? vp.X, vp.X) - 40;
+        const minY = Math.min(content?.Y ?? vp.Y, vp.Y) - 40;
+        const maxX = Math.max(content ? content.X + content.W : vp.X + vp.W, vp.X + vp.W) + 40;
+        const maxY = Math.max(content ? content.Y + content.H : vp.Y + vp.H, vp.Y + vp.H) + 40;
+        return { X: minX, Y: minY, W: Math.max(maxX - minX, 1), H: Math.max(maxY - minY, 1) };
+    }
+    // ────────────────────────────────────────────── internals
+    toBoard(event) {
+        const el = this.canvasRef?.nativeElement;
+        const rect = el ? el.getBoundingClientRect() : { left: 0, top: 0 };
+        return {
+            X: (event.clientX - rect.left - this.PanX) / this.Zoom,
+            Y: (event.clientY - rect.top - this.PanY) / this.Zoom
+        };
+    }
+    viewportCenter() {
+        const el = this.canvasRef?.nativeElement;
+        const w = el ? el.clientWidth : 0;
+        const h = el ? el.clientHeight : 0;
+        return { X: (w / 2 - this.PanX) / this.Zoom, Y: (h / 2 - this.PanY) / this.Zoom };
+    }
+    clampZoom(z) {
+        return Math.min(2, Math.max(0.25, z));
+    }
+    zoomCentered(next) {
+        this.viewportTouched = true; // user-driven zoom — disable the first-layout auto-fit
+        const el = this.canvasRef?.nativeElement;
+        if (!el) {
+            this.Zoom = next;
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        this.zoomAt(next, rect.left + rect.width / 2, rect.top + rect.height / 2);
+    }
+    zoomAt(next, clientX, clientY) {
+        const el = this.canvasRef?.nativeElement;
+        if (!el) {
+            this.Zoom = next;
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const px = clientX - rect.left;
+        const py = clientY - rect.top;
+        const bx = (px - this.PanX) / this.Zoom;
+        const by = (py - this.PanY) / this.Zoom;
+        this.Zoom = next;
+        this.PanX = px - bx * next;
+        this.PanY = py - by * next;
+    }
+    resizeBounds(orig, handle, dx, dy) {
+        let { X, Y, W, H } = orig;
+        if (handle.includes('w')) {
+            X = orig.X + dx;
+            W = orig.W - dx;
+        }
+        if (handle.includes('e')) {
+            W = orig.W + dx;
+        }
+        if (handle.includes('n')) {
+            Y = orig.Y + dy;
+            H = orig.H - dy;
+        }
+        if (handle.includes('s')) {
+            H = orig.H + dy;
+        }
+        const minSize = 24;
+        if (W < minSize) {
+            if (handle.includes('w')) {
+                X -= minSize - W;
+            }
+            W = minSize;
+        }
+        if (H < minSize) {
+            if (handle.includes('n')) {
+                Y -= minSize - H;
+            }
+            H = minSize;
+        }
+        return { X, Y, W, H };
+    }
+    transientBounds(itemId) {
+        const i = this.Interaction;
+        if (i?.Type === 'move' && i.Moved) {
+            if (i.ItemID === itemId) {
+                return { X: i.OrigBounds.X + i.DX, Y: i.OrigBounds.Y + i.DY, W: i.OrigBounds.W, H: i.OrigBounds.H };
+            }
+            // GROUP drag: every other selected member previews at the same live delta
+            // (state is untouched mid-drag, so ItemBounds still reports the original spot)
+            if (i.Group && this.State.IsItemSelected(itemId)) {
+                const item = this.State.GetItem(itemId);
+                if (item) {
+                    const b = this.State.ItemBounds(item);
+                    return { X: b.X + i.DX, Y: b.Y + i.DY, W: b.W, H: b.H };
+                }
+            }
+        }
+        if (i?.Type === 'resize' && i.ItemID === itemId) {
+            return i.CurBounds;
+        }
+        return null;
+    }
+    placeSticky(p) {
+        const tint = this.userStickyCount % 2 === 0 ? 'amber' : 'amber-light';
+        const rotation = this.userStickyCount % 2 === 0 ? -1 : 0.8;
+        this.userStickyCount++;
+        const item = this.State.AddItem({ Kind: 'sticky', X: p.X - WHITEBOARD_DEFAULTS.StickyW / 2, Y: p.Y - 24, Text: '', Tint: tint, Rotation: rotation }, 'user');
+        if (!item) {
+            return; // canceled via ItemAdding
+        }
+        this.State.Select(item.ID);
+        this.beginEdit(item.ID, true);
+    }
+    placeText(p) {
+        // Stamp only non-default style choices so an untouched flyout keeps the default look
+        // (and the compact perception payloads stay free of noise fields).
+        const item = this.State.AddItem({
+            Kind: 'text',
+            X: p.X,
+            Y: p.Y - 9,
+            Text: '',
+            FontSize: this.TextSize !== 12 ? this.TextSize : undefined,
+            FontFamily: this.TextFamily !== 'sans' ? this.TextFamily : undefined,
+            FontWeight: this.TextBold ? undefined : 400,
+            Color: this.TextColor ?? undefined
+        }, 'user');
+        if (!item) {
+            return; // canceled via ItemAdding
+        }
+        this.State.Select(item.ID);
+        this.beginEdit(item.ID, true);
+    }
+    placeImage(p, name, url) {
+        const item = this.State.AddItem({ Kind: 'image', X: p.X, Y: p.Y, Name: name, Url: url }, 'user');
+        if (item) {
+            this.State.Select(item.ID);
+        }
+    }
+    /** Click-place a starter markdown panel and open its editor. */
+    placeMarkdown(p) {
+        const item = this.State.AddItem({
+            Kind: 'markdown',
+            X: p.X - WHITEBOARD_DEFAULTS.MarkdownW / 2,
+            Y: p.Y - 20,
+            W: WHITEBOARD_DEFAULTS.MarkdownW,
+            Markdown: STARTER_MARKDOWN
+        }, 'user');
+        if (!item) {
+            return; // canceled via ItemAdding
+        }
+        this.State.Select(item.ID);
+        this.openRichEditor(item);
+    }
+    /** Click-place a starter HTML widget (sandboxed) and open its editor. */
+    placeHtml(p) {
+        const item = this.State.AddItem({
+            Kind: 'html',
+            X: p.X - WHITEBOARD_DEFAULTS.HtmlW / 2,
+            Y: p.Y - 20,
+            W: WHITEBOARD_DEFAULTS.HtmlW,
+            H: WHITEBOARD_DEFAULTS.HtmlH,
+            Html: WHITEBOARD_WIDGET_STARTER_HTML,
+            Title: 'New widget'
+        }, 'user');
+        if (!item) {
+            return; // canceled via ItemAdding
+        }
+        this.State.Select(item.ID);
+        this.openRichEditor(item);
+    }
+    beginEdit(id, isNew) {
+        this.EditingID = id;
+        this.editIsNew = isNew;
+        this.pendingFocus = true;
+    }
+    connectorClick(itemId, p) {
+        if (!this.PendingConnector) {
+            this.PendingConnector = {
+                FromItemID: itemId,
+                FromPoint: itemId ? null : p,
+                CurX: p.X,
+                CurY: p.Y
+            };
+            return;
+        }
+        const pending = this.PendingConnector;
+        this.PendingConnector = null;
+        if (itemId && pending.FromItemID === itemId) {
+            return; // self-connector — ignore
+        }
+        this.State.AddItem({
+            Kind: 'connector',
+            FromItemID: pending.FromItemID,
+            ToItemID: itemId,
+            FromPoint: pending.FromPoint,
+            ToPoint: itemId ? null : p
+        }, 'user');
+    }
+    pendingFromPoint() {
+        const pc = this.PendingConnector;
+        if (!pc) {
+            return { X: 0, Y: 0 };
+        }
+        if (pc.FromItemID) {
+            const item = this.State.GetItem(pc.FromItemID);
+            if (item) {
+                const b = this.State.ItemBounds(item);
+                return { X: b.X + b.W / 2, Y: b.Y + b.H / 2 };
+            }
+        }
+        return pc.FromPoint ?? { X: 0, Y: 0 };
+    }
+    static { this.ɵfac = function RealtimeWhiteboardBoardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RealtimeWhiteboardBoardComponent)(); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RealtimeWhiteboardBoardComponent, selectors: [["mj-realtime-whiteboard"]], viewQuery: function RealtimeWhiteboardBoardComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5)(RealtimeWhiteboardPagesComponent, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pagesStrip = _t.first);
+        } }, hostBindings: function RealtimeWhiteboardBoardComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("pointermove", function RealtimeWhiteboardBoardComponent_pointermove_HostBindingHandler($event) { return ctx.OnWindowPointerMove($event); }, i0.ɵɵresolveWindow)("pointerup", function RealtimeWhiteboardBoardComponent_pointerup_HostBindingHandler() { return ctx.OnWindowPointerUp(); }, i0.ɵɵresolveWindow)("pointerdown", function RealtimeWhiteboardBoardComponent_pointerdown_HostBindingHandler() { return ctx.CloseContextMenu(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { State: "State", AgentName: "AgentName", Tool: "Tool", PenColor: "PenColor", PenWidth: "PenWidth", ShapeKind: "ShapeKind", TextSize: "TextSize", TextFamily: "TextFamily", TextBold: "TextBold", TextColor: "TextColor", AgentPresence: "AgentPresence", ReadOnly: "ReadOnly" }, outputs: { ToolChangeRequest: "ToolChangeRequest", WidgetSubmitting: "WidgetSubmitting", WidgetSubmitted: "WidgetSubmitted", WidgetInteraction: "WidgetInteraction", ContentApplying: "ContentApplying", ContentApplied: "ContentApplied" }, decls: 22, vars: 23, consts: [["canvas", ""], ["edit", ""], ["editShape", ""], ["editText", ""], ["reTitle", ""], ["tabindex", "0", 3, "pointerdown", "contextmenu", "wheel", "paste"], [1, "board-viewport"], [1, "ink-layer"], ["fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round", 3, "ink-sage", "wb-erasable", "wb-ink-selected"], [3, "conn-sage", "conn-user"], ["fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round", 1, "wb-live-pen"], ["stroke-width", "2", "fill", "none", "stroke-linecap", "round", 1, "wb-pending-conn"], ["title", "Click to dismiss", 1, "sage-highlight", 3, "user-highlight", "left", "top", "width", "height"], [1, "drag-ghost", 3, "left", "top", "width", "height"], [1, "shape-preview", 3, "left", "top", "width", "height"], [1, "wb-marquee", 3, "left", "top", "width", "height"], [1, "cursor", "cursor--sage", 3, "left", "top"], [1, "rich-editor"], [1, "wb-context-menu", 3, "left", "top"], [3, "ChipContextMenu", "State", "ReadOnly"], [1, "minimap"], ["fill", "none", "stroke-linecap", "round", "stroke-linejoin", "round", 3, "pointerdown", "contextmenu"], ["stroke-width", "2.5", "fill", "none", "stroke-linecap", "round", 3, "pointerdown", "contextmenu"], ["stroke-width", "2.5", "fill", "none", "stroke-linecap", "round"], ["title", "Click to dismiss", 1, "sage-highlight", 3, "pointerdown", "contextmenu"], [1, "hl-tag"], [1, "fa-solid", "fa-highlighter"], [1, "drag-ghost"], [1, "shape-preview"], [1, "wb-marquee"], [3, "class", "selected", "dragging", "pop-in", "left", "top", "width", "fontSize", "fontFamily", "fontWeight", "transform"], [1, "bi", "shape-box", 3, "shape-box--ellipse", "shape-box--diamond", "shape-box--sage", "selected", "dragging", "pop-in", "left", "top", "width", "height"], [1, "bi", "tlabel", 3, "tlabel--user", "selected", "dragging", "pop-in", "left", "top", "width", "maxWidth", "fontSize", "fontFamily", "fontWeight", "color"], [1, "bi", "md-card", 3, "md-card--sage", "selected", "dragging", "pop-in", "left", "top", "width"], [1, "bi", "html-card", 3, "html-card--sage", "selected", "dragging", "pop-in", "left", "top", "width", "height"], [1, "bi", "img-card", 3, "selected", "dragging", "pop-in", "left", "top", "width"], [3, "pointerdown", "dblclick", "contextmenu"], [1, "author-chip", "author-chip--sage"], [1, "author-chip", "author-chip--you"], ["rows", "3", 1, "wb-edit", 3, "value"], [1, "fa-solid", "fa-feather"], [1, "fa-solid", "fa-user"], ["rows", "3", 1, "wb-edit", 3, "keydown", "blur", "value"], [3, "class"], [3, "pointerdown"], [1, "bi", "shape-box", 3, "pointerdown", "dblclick", "contextmenu"], ["rows", "1", 1, "wb-edit", "wb-edit--shape", 3, "value"], ["rows", "1", 1, "wb-edit", "wb-edit--shape", 3, "keydown", "blur", "value"], [1, "sub"], [1, "bi", "tlabel", 3, "pointerdown", "dblclick", "contextmenu"], ["type", "text", 1, "wb-edit", "wb-edit--text", 3, "value"], ["type", "text", 1, "wb-edit", "wb-edit--text", 3, "keydown", "blur", "value"], [1, "bi", "md-card", 3, "pointerdown", "dblclick", "contextmenu"], [1, "md-card__body"], [3, "data", "enableMermaid", "enableCodeCopy", "enableCollapsibleHeadings"], [1, "fa-brands", "fa-markdown"], [1, "bi", "html-card", 3, "pointerdown", "contextmenu"], [1, "html-card__head", 3, "dblclick"], [1, "fa-solid", "fa-code", "html-card__glyph"], [1, "html-card__title"], [1, "author-chip", "author-chip--sage", "author-chip--inline"], [1, "author-chip", "author-chip--you", "author-chip--inline"], [1, "html-card__body"], ["sandbox", "allow-scripts", 1, "html-card__frame", 3, "srcdoc"], [1, "html-card__lazy"], ["type", "button", "title", "Edit HTML", 1, "html-card__btn", 3, "pointerdown", "click"], [1, "fa-solid", "fa-pen"], ["type", "button", "title", "Remove widget", 1, "html-card__btn", 3, "pointerdown", "click"], [1, "fa-solid", "fa-trash-can"], [1, "fa-solid", "fa-code"], [1, "bi", "img-card", 3, "pointerdown", "contextmenu"], [1, "img-card__body"], [3, "src", "alt"], [1, "fa-regular", "fa-image"], [1, "img-card__name"], [1, "fa-solid", "fa-chart-area"], [1, "fa-solid", "fa-paste"], [1, "cursor", "cursor--sage"], [1, "tip"], [1, "lbl"], [1, "rich-editor", 3, "keydown", "pointerdown", "dblclick", "wheel"], [1, "rich-editor__head"], [1, "rich-editor__body"], [1, "rich-editor__preview"], [1, "rich-editor__code", 3, "value", "language"], [1, "rich-editor__note"], [1, "rich-editor__foot"], ["type", "button", 1, "re-btn", "re-btn--primary", 3, "click"], ["type", "button", "title", "Apply without closing \u2014 re-renders the widget", 1, "re-btn", 3, "click"], [1, "re-spacer"], ["type", "button", "title", "Close without applying draft changes", 1, "re-btn", 3, "click"], [1, "rich-editor__label"], [1, "rich-editor__modes"], ["type", "button", 1, "re-mode", 3, "click"], ["type", "text", "placeholder", "Title", 1, "rich-editor__title", 3, "input", "value"], [1, "rich-editor__code", 3, "change", "value", "language"], [1, "fa-solid", "fa-shield-halved"], [1, "wb-context-menu", 3, "pointerdown", "contextmenu", "wheel"], [1, "wb-context-menu__sep"], ["type", "button", 1, "wb-context-menu__item", 3, "click"], ["preserveAspectRatio", "xMidYMid meet"], ["rx", "6"], ["rx", "8", 1, "mm-viewport"]], template: function RealtimeWhiteboardBoardComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 5, 0);
+            i0.ɵɵlistener("pointerdown", function RealtimeWhiteboardBoardComponent_Template_div_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasPointerDown($event)); })("contextmenu", function RealtimeWhiteboardBoardComponent_Template_div_contextmenu_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnCanvasContextMenu($event)); })("wheel", function RealtimeWhiteboardBoardComponent_Template_div_wheel_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnWheel($event)); })("paste", function RealtimeWhiteboardBoardComponent_Template_div_paste_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPaste($event)); });
+            i0.ɵɵelementStart(2, "div", 6);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(3, "svg", 7);
+            i0.ɵɵrepeaterCreate(4, RealtimeWhiteboardBoardComponent_For_5_Template, 1, 9, ":svg:path", 8, _forTrack0);
+            i0.ɵɵrepeaterCreate(6, RealtimeWhiteboardBoardComponent_For_7_Template, 3, 10, ":svg:g", 9, _forTrack0);
+            i0.ɵɵconditionalCreate(8, RealtimeWhiteboardBoardComponent_Conditional_8_Template, 1, 3, ":svg:path", 10);
+            i0.ɵɵconditionalCreate(9, RealtimeWhiteboardBoardComponent_Conditional_9_Template, 1, 1, ":svg:path", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(10, RealtimeWhiteboardBoardComponent_For_11_Template, 4, 11, "div", 12, _forTrack0);
+            i0.ɵɵconditionalCreate(12, RealtimeWhiteboardBoardComponent_Conditional_12_Template, 1, 8, "div", 13);
+            i0.ɵɵconditionalCreate(13, RealtimeWhiteboardBoardComponent_Conditional_13_Template, 1, 8, "div", 14);
+            i0.ɵɵconditionalCreate(14, RealtimeWhiteboardBoardComponent_Conditional_14_Template, 1, 8, "div", 15);
+            i0.ɵɵrepeaterCreate(15, RealtimeWhiteboardBoardComponent_For_16_Template, 6, 1, null, null, _forTrack0);
+            i0.ɵɵconditionalCreate(17, RealtimeWhiteboardBoardComponent_Conditional_17_Template, 6, 5, "div", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(18, RealtimeWhiteboardBoardComponent_Conditional_18_Template, 16, 3, "div", 17);
+            i0.ɵɵconditionalCreate(19, RealtimeWhiteboardBoardComponent_Conditional_19_Template, 3, 4, "div", 18);
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(20, "mj-realtime-whiteboard-pages", 19);
+            i0.ɵɵlistener("ChipContextMenu", function RealtimeWhiteboardBoardComponent_Template_mj_realtime_whiteboard_pages_ChipContextMenu_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnPageChipContextMenu($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(21, RealtimeWhiteboardBoardComponent_Conditional_21_Template, 5, 5, "div", 20);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            let tmp_12_0;
+            let tmp_13_0;
+            let tmp_14_0;
+            let tmp_17_0;
+            let tmp_18_0;
+            i0.ɵɵclassMap("board-canvas " + ctx.CursorClass);
+            i0.ɵɵstyleProp("background-size", ctx.GridBackgroundSize)("background-position", ctx.GridBackgroundPosition);
+            i0.ɵɵclassProp("is-panning", (ctx.Interaction == null ? null : ctx.Interaction.Type) === "pan")("is-interacting", ctx.Interaction !== null || ctx.PendingConnector !== null);
+            i0.ɵɵadvance(2);
+            i0.ɵɵstyleProp("transform", ctx.ViewportTransform);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.InkItems);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.ConnectorItems);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.LivePenPath ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.PendingConnector ? 9 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.HighlightItems);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional((tmp_12_0 = ctx.DragGhost) ? 12 : -1, tmp_12_0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_13_0 = ctx.ShapePreview) ? 13 : -1, tmp_13_0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_14_0 = ctx.MarqueeRect) ? 14 : -1, tmp_14_0);
+            i0.ɵɵadvance();
+            i0.ɵɵrepeater(ctx.BoxItems);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional((ctx.AgentPresence == null ? null : ctx.AgentPresence.Active) ? 17 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_17_0 = ctx.RichEditor) ? 18 : -1, tmp_17_0);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_18_0 = ctx.ContextMenu) ? 19 : -1, tmp_18_0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("State", ctx.State)("ReadOnly", ctx.ReadOnly);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.MinimapOpen ? 21 : -1);
+        } }, dependencies: [CommonModule, MarkdownModule, i1.MarkdownComponent, CodeEditorModule, i2.CodeEditorComponent, RealtimeWhiteboardPagesComponent, WhiteboardWidgetSrcdocPipe], styles: ["\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: block;\n  position: absolute;\n  inset: 0;\n}\n\n\n\n.board-canvas[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  outline: none;\n  background-color: var(--mj-bg-surface-sunken);\n  background-image: radial-gradient(color-mix(in srgb, var(--mj-color-neutral-400, #94a3b8) 15%, transparent) 1px, transparent 1px);\n  background-size: 22px 22px;\n  cursor: default;\n  touch-action: none;\n}\n.cur-pan[_ngcontent-%COMP%] { cursor: grab; }\n.cur-pan.is-panning[_ngcontent-%COMP%] { cursor: grabbing; }\n.cur-cross[_ngcontent-%COMP%] { cursor: crosshair; }\n.cur-copy[_ngcontent-%COMP%] { cursor: copy; }\n.cur-text[_ngcontent-%COMP%] { cursor: text; }\n.cur-eraser[_ngcontent-%COMP%] { cursor: cell; }\n\n.board-viewport[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  transform-origin: 0 0;\n  overflow: visible;\n}\n\n\n\n.ink-layer[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 1px;\n  pointer-events: none;\n  overflow: visible;\n}\n.ink-layer[_ngcontent-%COMP%]   path[_ngcontent-%COMP%] {\n  pointer-events: none;\n}\n.ink-layer[_ngcontent-%COMP%]   path.wb-erasable[_ngcontent-%COMP%] {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n.ink-sage[_ngcontent-%COMP%] { stroke: var(--sage) !important; }\n.wb-ink-selected[_ngcontent-%COMP%] { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mj-brand-primary) 60%, transparent)); }\n\n.conn-user[_ngcontent-%COMP%]   path[_ngcontent-%COMP%] { stroke: var(--mj-color-neutral-300, #cbd5e1); }\n.conn-sage[_ngcontent-%COMP%]   path[_ngcontent-%COMP%] {\n  stroke: var(--sage);\n  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sage) 35%, transparent));\n}\n.draw-in[_ngcontent-%COMP%] {\n  stroke-dasharray: 420;\n  stroke-dashoffset: 420;\n  animation: _ngcontent-%COMP%_wb-conn-draw 1.4s ease-out forwards;\n}\n@keyframes _ngcontent-%COMP%_wb-conn-draw { to { stroke-dashoffset: 0; } }\n\n.wb-live-pen[_ngcontent-%COMP%] { opacity: 0.95; }\n.wb-pending-conn[_ngcontent-%COMP%] {\n  stroke: var(--mj-text-disabled);\n  stroke-dasharray: 4 4;\n}\n\n\n\n.bi[_ngcontent-%COMP%] {\n  position: absolute;\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  \n\n  user-select: none;\n  -webkit-user-select: none;\n}\n.author-chip[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -9px;\n  left: 8px;\n  z-index: 3;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 1px 7px;\n  font-size: 9px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  border-radius: var(--mj-radius-full, 9999px);\n  line-height: 1.5;\n  white-space: nowrap;\n  pointer-events: none;\n}\n.author-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 7.5px; }\n.author-chip--you[_ngcontent-%COMP%] {\n  background: var(--mj-color-neutral-700, #334155);\n  border: 1px solid var(--mj-border-strong);\n  color: var(--mj-color-neutral-300, #cbd5e1);\n}\n.author-chip--sage[_ngcontent-%COMP%] {\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage);\n  color: var(--mj-color-violet-300, #c4b5fd);\n}\n\n\n\n.sticky[_ngcontent-%COMP%] {\n  width: 172px;\n  padding: 14px 13px 12px;\n  border-radius: 4px 4px 14px 4px;\n  font-size: 12.5px;\n  line-height: 1.45;\n  font-weight: 500;\n  cursor: default;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.sticky--amber[_ngcontent-%COMP%] { background: linear-gradient(180deg, #fcd34d, #f5b831); color: #3f2d04; }\n.sticky--amber2[_ngcontent-%COMP%] { background: linear-gradient(180deg, #fde68a, #f8ca4d); color: #3f2d04; }\n.sticky--sage[_ngcontent-%COMP%] {\n  background: linear-gradient(180deg, #38306b, #2c2455);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  border: 1px solid var(--sage);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent), var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n}\n\n\n\n.shape-box[_ngcontent-%COMP%] {\n  min-width: 60px;\n  min-height: 56px;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  padding: 10px 12px;\n  border: 2px solid var(--mj-color-neutral-400, #94a3b8);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-color-neutral-800, #1e293b) 88%, transparent);\n  font-size: 12.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: default;\n}\n.shape-box[_ngcontent-%COMP%]   .sub[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n  margin-top: 2px;\n}\n.shape-box--ellipse[_ngcontent-%COMP%] { border-radius: 50%; }\n.shape-box--diamond[_ngcontent-%COMP%] {\n  border-radius: 10px;\n  transform: rotate(45deg);\n}\n.shape-box--diamond[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] { transform: rotate(-45deg); }\n.shape-box--sage[_ngcontent-%COMP%] {\n  border-color: var(--sage);\n  background: color-mix(in srgb, var(--sage) 12%, var(--mj-bg-surface-sunken));\n  color: var(--mj-color-violet-300, #c4b5fd);\n}\n\n\n\n.shape-preview[_ngcontent-%COMP%] {\n  position: absolute;\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n  pointer-events: none;\n}\n\n\n\n.wb-marquee[_ngcontent-%COMP%] {\n  position: absolute;\n  border: 1px dashed var(--mj-brand-primary);\n  border-radius: 3px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  pointer-events: none;\n  z-index: 40;\n}\n\n\n\n.tlabel[_ngcontent-%COMP%] {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-color-violet-300, #c4b5fd);\n  background: transparent;\n  box-shadow: none;\n  letter-spacing: 0.01em;\n  text-shadow: 0 1px 6px rgba(2, 6, 23, 0.8);\n  \n\n\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  max-width: 380px;\n  cursor: default;\n}\n.tlabel[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  margin-right: 4px;\n  opacity: 0.8;\n}\n.tlabel--user[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n\n\n\n\n\n.md-card[_ngcontent-%COMP%] {\n  border-radius: 10px;\n  border: 1.5px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n}\n.md-card__body[_ngcontent-%COMP%] {\n  padding: 16px 12px 10px;\n  font-size: 12px;\n  line-height: 1.45;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  border-radius: 8.5px; \n\n}\n.md-card--sage[_ngcontent-%COMP%] {\n  border-color: var(--sage);\n  background: color-mix(in srgb, var(--sage) 8%, var(--mj-bg-surface-card));\n}\n\n\n\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container h1 { font-size: 16px; margin: 4px 0 6px; }\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container h2 { font-size: 14px; margin: 4px 0 6px; }\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container h3, \n.md-card[_ngcontent-%COMP%]     .mj-markdown-container h4 { font-size: 12.5px; margin: 4px 0 4px; }\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container p { margin: 0 0 6px; }\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container ul, \n.md-card[_ngcontent-%COMP%]     .mj-markdown-container ol { margin: 0 0 6px; padding-left: 18px; }\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container pre { font-size: 10.5px; padding: 6px 8px; margin: 0 0 6px; overflow: auto; }\n.md-card[_ngcontent-%COMP%]     .mj-markdown-container code { font-size: 10.5px; }\n\n\n\n\n\n\n.html-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  border-radius: 10px;\n  border: 1.5px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n  min-width: 160px;\n  min-height: 90px;\n}\n.html-card--sage[_ngcontent-%COMP%] {\n  border-color: var(--sage);\n}\n.html-card__head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  border-radius: 8.5px 8.5px 0 0; \n\n  cursor: grab;\n  user-select: none;\n}\n.html-card--sage[_ngcontent-%COMP%]   .html-card__head[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--sage) 14%, var(--mj-bg-surface-sunken));\n}\n.html-card__glyph[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n.html-card--sage[_ngcontent-%COMP%]   .html-card__glyph[_ngcontent-%COMP%] { color: var(--sage); }\n.html-card__title[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.author-chip--inline[_ngcontent-%COMP%] {\n  position: static;\n  flex-shrink: 0;\n}\n.html-card__btn[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--mj-radius-sm, 4px);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 10px;\n  cursor: pointer;\n}\n.html-card__btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.html-card__body[_ngcontent-%COMP%] {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  border-radius: 0 0 8.5px 8.5px; \n\n}\n.html-card__frame[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  display: block;\n  background: #ffffff; \n\n}\n\n\n\n.board-canvas.is-interacting[_ngcontent-%COMP%]   .html-card__frame[_ngcontent-%COMP%] {\n  pointer-events: none;\n}\n.html-card__lazy[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  \n\n\n  cursor: grab;\n}\n.html-card__lazy[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 16px; color: var(--mj-text-disabled); }\n\n\n\n.rich-editor[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  bottom: 14px;\n  z-index: 12;\n  width: min(480px, 62%);\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.3));\n  overflow: hidden;\n  cursor: default;\n}\n.rich-editor__head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.rich-editor__label[_ngcontent-%COMP%] {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n}\n.rich-editor__modes[_ngcontent-%COMP%] {\n  margin-left: auto;\n  display: inline-flex;\n  gap: 2px;\n  padding: 2px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n}\n.re-mode[_ngcontent-%COMP%] {\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 10.5px;\n  font-weight: 700;\n  padding: 2px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n}\n.re-mode.on[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.rich-editor__title[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  margin-left: 4px;\n  padding: 3px 8px;\n  font-size: 11.5px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 4px);\n  outline: none;\n}\n.rich-editor__title[_ngcontent-%COMP%]:focus { border-color: var(--mj-border-focus, var(--mj-brand-primary)); }\n.rich-editor__body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.rich-editor__code[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  display: block;\n  overflow: auto;\n  font-size: 12px;\n}\n.rich-editor__preview[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 12px 14px;\n  font-size: 12.5px;\n  color: var(--mj-text-primary);\n}\n.rich-editor__note[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 6px 10px;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n}\n.rich-editor__foot[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.re-spacer[_ngcontent-%COMP%] { flex: 1; }\n.re-btn[_ngcontent-%COMP%] {\n  padding: 4px 14px;\n  font-size: 11.5px;\n  font-weight: 700;\n  border-radius: var(--mj-radius-md, 6px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n.re-btn[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-hover); }\n.re-btn--primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.re-btn--primary[_ngcontent-%COMP%]:hover { background: var(--mj-brand-primary-hover, var(--mj-brand-primary)); }\n\n\n\n\n\n.img-card[_ngcontent-%COMP%] {\n  width: 198px;\n  border-radius: 10px;\n  border: 1.5px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n}\n.img-card__body[_ngcontent-%COMP%] {\n  height: 104px;\n  display: grid;\n  place-items: center;\n  overflow: hidden;\n  border-radius: 8.5px 8.5px 0 0; \n\n  background:\n    linear-gradient(160deg, color-mix(in srgb, var(--mj-brand-primary) 30%, transparent) 0%, color-mix(in srgb, var(--mj-brand-primary) 10%, transparent) 38%, transparent 39%),\n    linear-gradient(200deg, color-mix(in srgb, var(--mj-brand-accent, var(--mj-brand-primary)) 22%, transparent) 0%, color-mix(in srgb, var(--mj-brand-accent, var(--mj-brand-primary)) 8%, transparent) 60%, transparent 61%),\n    var(--mj-color-neutral-900, #0f172a);\n  color: var(--mj-text-disabled);\n  font-size: 22px;\n}\n.img-card__body[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  \n\n\n  pointer-events: none;\n  -webkit-user-drag: none;\n}\n.img-card__name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 6px 10px;\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  border-top: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.img-card__name[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { color: var(--mj-brand-accent, var(--mj-brand-primary)); }\n\n\n\n.pop-in[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_wb-bi-pop 600ms cubic-bezier(0.34, 1.4, 0.64, 1) both, _ngcontent-%COMP%_wb-sage-flash 2.4s ease-out;\n}\n@keyframes _ngcontent-%COMP%_wb-bi-pop {\n  0% { scale: 0.55; opacity: 0; }\n  70% { scale: 1.06; }\n  100% { scale: 1; opacity: 1; }\n}\n@keyframes _ngcontent-%COMP%_wb-sage-flash {\n  0% {\n    box-shadow: 0 0 0 12px color-mix(in srgb, var(--sage) 45%, transparent),\n                0 0 36px color-mix(in srgb, var(--sage) 50%, transparent),\n                var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  }\n  100% {\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent),\n                var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .pop-in[_ngcontent-%COMP%] { animation: none; }\n  .draw-in[_ngcontent-%COMP%] { animation: none; stroke-dashoffset: 0; }\n}\n\n\n\n.bi.selected[_ngcontent-%COMP%] {\n  outline: 1.5px solid var(--mj-brand-primary);\n  outline-offset: 3px;\n}\n.bi.dragging[_ngcontent-%COMP%] {\n  transform: rotate(-1.6deg) scale(1.02);\n  box-shadow: var(--mj-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.45));\n  cursor: grabbing;\n  z-index: 5;\n  border-color: var(--mj-brand-primary);\n}\n.sel-h[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n  background: var(--mj-bg-surface);\n  border: 1.5px solid var(--mj-brand-primary);\n  z-index: 4;\n}\n.sel-h.nw[_ngcontent-%COMP%] { top: -8px; left: -8px; cursor: nwse-resize; }\n.sel-h.n[_ngcontent-%COMP%] { top: -8px; left: calc(50% - 4px); cursor: ns-resize; }\n.sel-h.ne[_ngcontent-%COMP%] { top: -8px; right: -8px; cursor: nesw-resize; }\n.sel-h.e[_ngcontent-%COMP%] { top: calc(50% - 4px); right: -8px; cursor: ew-resize; }\n.sel-h.se[_ngcontent-%COMP%] { bottom: -8px; right: -8px; cursor: nwse-resize; }\n.sel-h.s[_ngcontent-%COMP%] { bottom: -8px; left: calc(50% - 4px); cursor: ns-resize; }\n.sel-h.sw[_ngcontent-%COMP%] { bottom: -8px; left: -8px; cursor: nesw-resize; }\n.sel-h.w[_ngcontent-%COMP%] { top: calc(50% - 4px); left: -8px; cursor: ew-resize; }\n\n.drag-ghost[_ngcontent-%COMP%] {\n  position: absolute;\n  border: 1.5px dashed var(--mj-border-strong);\n  border-radius: 10px;\n  opacity: 0.55;\n  pointer-events: none;\n}\n.drag-ghost[_ngcontent-%COMP%]::after {\n  content: \"from here\";\n  position: absolute;\n  bottom: -18px;\n  left: 4px;\n  font-size: 9px;\n  color: var(--mj-text-disabled);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n\n\n.sage-highlight[_ngcontent-%COMP%] {\n  position: absolute;\n  border: 2px dashed var(--sage);\n  border-radius: 16px;\n  background: color-mix(in srgb, var(--sage) 6%, transparent);\n  animation: _ngcontent-%COMP%_wb-hl-pulse 2.2s ease-in-out infinite;\n  cursor: pointer;\n}\n@keyframes _ngcontent-%COMP%_wb-hl-pulse {\n  0%, 100% { box-shadow: 0 0 0 0 transparent; }\n  50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--sage) 25%, transparent); }\n}\n.sage-highlight[_ngcontent-%COMP%]   .hl-tag[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -11px;\n  right: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 1px 8px;\n  font-size: 9.5px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  border-radius: var(--mj-radius-full, 9999px);\n  white-space: nowrap;\n}\n.sage-highlight.user-highlight[_ngcontent-%COMP%] {\n  border-color: var(--mj-border-strong);\n  background: color-mix(in srgb, var(--mj-text-secondary) 5%, transparent);\n}\n.sage-highlight.user-highlight[_ngcontent-%COMP%]   .hl-tag[_ngcontent-%COMP%] {\n  background: var(--mj-color-neutral-700, #334155);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-color-neutral-300, #cbd5e1);\n}\n\n\n\n.cursor[_ngcontent-%COMP%] {\n  position: absolute;\n  z-index: 8;\n  pointer-events: none;\n}\n.cursor--sage[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  transition: left 700ms cubic-bezier(0.33, 1, 0.68, 1), top 700ms cubic-bezier(0.33, 1, 0.68, 1);\n  animation: _ngcontent-%COMP%_wb-sage-cursor-drift 5s ease-in-out infinite alternate;\n}\n.cursor--sage[_ngcontent-%COMP%]   .tip[_ngcontent-%COMP%] {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 50% 50% 50% 4px;\n  display: grid;\n  place-items: center;\n  background: var(--sage);\n  color: #1b1438;\n  font-size: 11px;\n  box-shadow: 0 0 14px color-mix(in srgb, var(--sage) 60%, transparent);\n}\n.cursor--sage[_ngcontent-%COMP%]   .tip[_ngcontent-%COMP%]::after {\n  content: \"\";\n  position: absolute;\n  inset: -5px;\n  border-radius: inherit;\n  border: 2px solid color-mix(in srgb, var(--sage) 45%, transparent);\n  animation: _ngcontent-%COMP%_wb-orb-ring 1.8s ease-out infinite;\n}\n.cursor--sage[_ngcontent-%COMP%]   .lbl[_ngcontent-%COMP%] {\n  margin-top: 14px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  white-space: nowrap;\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  font-size: 10.5px;\n  font-weight: 700;\n}\n.cursor--sage[_ngcontent-%COMP%]   .lbl[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_wb-pen-wiggle 0.9s ease-in-out infinite;\n  display: inline-block;\n  margin-right: 3px;\n  font-size: 9px;\n}\n@keyframes _ngcontent-%COMP%_wb-pen-wiggle {\n  0%, 100% { transform: rotate(0); }\n  50% { transform: rotate(-14deg); }\n}\n@keyframes _ngcontent-%COMP%_wb-sage-cursor-drift {\n  from { transform: translate(0, 0); }\n  to { transform: translate(-26px, 20px); }\n}\n@keyframes _ngcontent-%COMP%_wb-orb-ring {\n  0% { transform: scale(1); opacity: 0.6; }\n  100% { transform: scale(1.5); opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .cursor--sage[_ngcontent-%COMP%] { animation: none; }\n  .sage-highlight[_ngcontent-%COMP%] { animation: none; }\n}\n\n\n\n.wb-edit[_ngcontent-%COMP%] {\n  display: block;\n  width: 100%;\n  background: transparent;\n  border: 0;\n  outline: none;\n  resize: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  padding: 0;\n  \n\n  user-select: text;\n  -webkit-user-select: text;\n}\n.wb-edit--shape[_ngcontent-%COMP%] { text-align: center; }\n.wb-edit--text[_ngcontent-%COMP%] { min-width: 110px; }\n\n\n\n.minimap[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 14px;\n  bottom: 58px;\n  z-index: 10;\n  width: 176px;\n  height: 118px;\n  padding: 6px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.3));\n}\n.minimap[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.mm-item[_ngcontent-%COMP%] {\n  fill: color-mix(in srgb, var(--mj-text-secondary) 45%, transparent);\n}\n.mm-item--sage[_ngcontent-%COMP%] {\n  fill: color-mix(in srgb, var(--sage) 60%, transparent);\n}\n.mm-viewport[_ngcontent-%COMP%] {\n  fill: none;\n  stroke: var(--mj-brand-primary);\n  stroke-width: 6;\n  vector-effect: non-scaling-stroke;\n}\n\n\n\n.wb-context-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  z-index: 40;\n  min-width: 178px;\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  cursor: default;\n}\n.wb-context-menu__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.wb-context-menu__item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.wb-context-menu__item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 14px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.wb-context-menu__item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.wb-context-menu__item--danger[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.wb-context-menu__item--danger[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n  color: var(--mj-status-error-text, var(--mj-status-error));\n}\n.wb-context-menu__item--danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.wb-context-menu__item--danger[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n.wb-context-menu__sep[_ngcontent-%COMP%] {\n  height: 1px;\n  margin: 4px 6px;\n  background: var(--mj-border-subtle, var(--mj-border-default));\n}"] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RealtimeWhiteboardBoardComponent, [{
+        type: Component,
+        args: [{ standalone: true, selector: 'mj-realtime-whiteboard', imports: [CommonModule, MarkdownModule, CodeEditorModule, RealtimeWhiteboardPagesComponent, WhiteboardWidgetSrcdocPipe], template: "<div #canvas\n     [class]=\"'board-canvas ' + CursorClass\"\n     [class.is-panning]=\"Interaction?.Type === 'pan'\"\n     [class.is-interacting]=\"Interaction !== null || PendingConnector !== null\"\n     [style.backgroundSize]=\"GridBackgroundSize\"\n     [style.backgroundPosition]=\"GridBackgroundPosition\"\n     tabindex=\"0\"\n     (pointerdown)=\"OnCanvasPointerDown($event)\"\n     (contextmenu)=\"OnCanvasContextMenu($event)\"\n     (wheel)=\"OnWheel($event)\"\n     (paste)=\"OnPaste($event)\">\n\n  <div class=\"board-viewport\" [style.transform]=\"ViewportTransform\">\n\n    <!-- ink + connectors -->\n    <svg class=\"ink-layer\">\n      @for (ink of InkItems; track ink.ID) {\n        <path [attr.d]=\"InkPath(ink.Points)\"\n              [class.ink-sage]=\"ink.Author === 'agent'\"\n              [class.wb-erasable]=\"Tool === 'eraser' || Tool === 'select'\"\n              [class.wb-ink-selected]=\"IsSelected(ink)\"\n              [attr.stroke]=\"ink.Author === 'agent' ? null : ink.Color\"\n              [attr.stroke-width]=\"ink.StrokeWidth\"\n              fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n              (pointerdown)=\"OnItemPointerDown($event, ink)\"\n              (contextmenu)=\"OnItemContextMenu($event, ink)\"/>\n      }\n      @for (conn of ConnectorItems; track conn.ID) {\n        <g [class.conn-sage]=\"conn.Author === 'agent'\" [class.conn-user]=\"conn.Author === 'user'\">\n          <path [attr.d]=\"ConnectorPath(conn)\"\n                [class.draw-in]=\"PopInIDs.has(conn.ID)\"\n                [class.wb-erasable]=\"Tool === 'eraser' || Tool === 'select'\"\n                stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\"\n                (pointerdown)=\"OnItemPointerDown($event, conn)\"\n                (contextmenu)=\"OnItemContextMenu($event, conn)\"/>\n          <path [attr.d]=\"ConnectorArrow(conn)\" stroke-width=\"2.5\" fill=\"none\" stroke-linecap=\"round\"/>\n        </g>\n      }\n      <!-- live transients -->\n      @if (LivePenPath) {\n        <path class=\"wb-live-pen\" [attr.d]=\"LivePenPath\" [attr.stroke]=\"PenColor\" [attr.stroke-width]=\"PenWidth\"\n              fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n      }\n      @if (PendingConnector) {\n        <path class=\"wb-pending-conn\" [attr.d]=\"PendingConnectorPath\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"/>\n      }\n    </svg>\n\n    <!-- highlight regions (agent \"pointing without touching\"; click dismisses) -->\n    @for (hl of HighlightItems; track hl.ID) {\n      <div class=\"sage-highlight\"\n           [class.user-highlight]=\"hl.Author === 'user'\"\n           [style.left.px]=\"ItemX(hl)\" [style.top.px]=\"ItemY(hl)\"\n           [style.width.px]=\"ItemW(hl)\" [style.height.px]=\"ItemH(hl)\"\n           title=\"Click to dismiss\"\n           (pointerdown)=\"OnHighlightClick($event, hl)\"\n           (contextmenu)=\"OnItemContextMenu($event, hl)\">\n        <span class=\"hl-tag\"><i class=\"fa-solid fa-highlighter\"></i> {{ HighlightTag(hl) }}</span>\n      </div>\n    }\n\n    <!-- drag ghost (\"from here\") -->\n    @if (DragGhost; as ghost) {\n      <div class=\"drag-ghost\"\n           [style.left.px]=\"ghost.X\" [style.top.px]=\"ghost.Y\"\n           [style.width.px]=\"ghost.W\" [style.height.px]=\"ghost.H\"></div>\n    }\n\n    <!-- shape drag-create preview -->\n    @if (ShapePreview; as preview) {\n      <div class=\"shape-preview\"\n           [style.left.px]=\"preview.X\" [style.top.px]=\"preview.Y\"\n           [style.width.px]=\"preview.W\" [style.height.px]=\"preview.H\"></div>\n    }\n\n    <!-- marquee (rubber-band) multi-selection rectangle -->\n    @if (MarqueeRect; as mq) {\n      <div class=\"wb-marquee\"\n           [style.left.px]=\"mq.X\" [style.top.px]=\"mq.Y\"\n           [style.width.px]=\"mq.W\" [style.height.px]=\"mq.H\"></div>\n    }\n\n    <!-- board items -->\n    @for (item of BoxItems; track item.ID) {\n      @switch (item.Kind) {\n\n        @case ('sticky') {\n          <div [class]=\"'bi sticky ' + StickyTintClass(item)\"\n               [class.selected]=\"IsSelected(item)\"\n               [class.dragging]=\"IsDragging(item)\"\n               [class.pop-in]=\"PopInIDs.has(item.ID)\"\n               [style.left.px]=\"ItemX(item)\" [style.top.px]=\"ItemY(item)\"\n               [style.width.px]=\"ItemW(item)\"\n               [style.fontSize]=\"ItemFontSize(item)\"\n               [style.fontFamily]=\"ItemFontFamily(item)\"\n               [style.fontWeight]=\"ItemFontWeight(item)\"\n               [style.transform]=\"IsDragging(item) ? '' : StickyRotation(item)\"\n               (pointerdown)=\"OnItemPointerDown($event, item)\"\n               (dblclick)=\"BeginItemEdit($event, item)\"\n               (contextmenu)=\"OnItemContextMenu($event, item)\">\n            @if (item.Author === 'agent') {\n              <span class=\"author-chip author-chip--sage\"><i class=\"fa-solid fa-feather\"></i> {{ AgentName }}</span>\n            } @else {\n              <span class=\"author-chip author-chip--you\"><i class=\"fa-solid fa-user\"></i> You</span>\n            }\n            @if (EditingID === item.ID) {\n              <textarea class=\"wb-edit\" rows=\"3\"\n                        [value]=\"item.Text\"\n                        (keydown)=\"OnEditKeydown($event, edit.value)\"\n                        (blur)=\"CommitEdit(edit.value)\"\n                        #edit></textarea>\n            } @else {\n              {{ item.Text }}\n            }\n            @if (ShowHandles(item) && !IsDragging(item)) {\n              @for (h of Handles; track h) {\n                <span [class]=\"'sel-h ' + h\" (pointerdown)=\"OnHandlePointerDown($event, item, h)\"></span>\n              }\n            }\n          </div>\n        }\n\n        @case ('shape') {\n          <div class=\"bi shape-box\"\n               [class.shape-box--ellipse]=\"item.Shape === 'ellipse'\"\n               [class.shape-box--diamond]=\"item.Shape === 'diamond'\"\n               [class.shape-box--sage]=\"item.Author === 'agent'\"\n               [class.selected]=\"IsSelected(item)\"\n               [class.dragging]=\"IsDragging(item)\"\n               [class.pop-in]=\"PopInIDs.has(item.ID)\"\n               [style.left.px]=\"ItemX(item)\" [style.top.px]=\"ItemY(item)\"\n               [style.width.px]=\"ItemW(item)\" [style.height.px]=\"ItemH(item)\"\n               (pointerdown)=\"OnItemPointerDown($event, item)\"\n               (dblclick)=\"BeginItemEdit($event, item)\"\n               (contextmenu)=\"OnItemContextMenu($event, item)\">\n            @if (item.Author === 'agent') {\n              <span class=\"author-chip author-chip--sage\"><i class=\"fa-solid fa-feather\"></i> {{ AgentName }}</span>\n            } @else {\n              <span class=\"author-chip author-chip--you\"><i class=\"fa-solid fa-user\"></i> You</span>\n            }\n            @if (EditingID === item.ID) {\n              <textarea class=\"wb-edit wb-edit--shape\" rows=\"1\"\n                        [value]=\"item.Label\"\n                        (keydown)=\"OnEditKeydown($event, editShape.value)\"\n                        (blur)=\"CommitEdit(editShape.value)\"\n                        #editShape></textarea>\n            } @else {\n              <span>{{ item.Label }}@if (item.Sub) {<span class=\"sub\">{{ item.Sub }}</span>}</span>\n            }\n            @if (ShowHandles(item) && !IsDragging(item)) {\n              @for (h of Handles; track h) {\n                <span [class]=\"'sel-h ' + h\" (pointerdown)=\"OnHandlePointerDown($event, item, h)\"></span>\n              }\n            }\n          </div>\n        }\n\n        @case ('text') {\n          <div class=\"bi tlabel\"\n               [class.tlabel--user]=\"item.Author === 'user'\"\n               [class.selected]=\"IsSelected(item)\"\n               [class.dragging]=\"IsDragging(item)\"\n               [class.pop-in]=\"PopInIDs.has(item.ID)\"\n               [style.left.px]=\"ItemX(item)\" [style.top.px]=\"ItemY(item)\"\n               [style.width.px]=\"TextWrapWidth(item)\"\n               [style.maxWidth.px]=\"TextWrapWidth(item)\"\n               [style.fontSize]=\"ItemFontSize(item)\"\n               [style.fontFamily]=\"ItemFontFamily(item)\"\n               [style.fontWeight]=\"ItemFontWeight(item)\"\n               [style.color]=\"ItemTextColor(item)\"\n               (pointerdown)=\"OnItemPointerDown($event, item)\"\n               (dblclick)=\"BeginItemEdit($event, item)\"\n               (contextmenu)=\"OnItemContextMenu($event, item)\">\n            @if (item.Author === 'agent') {\n              <i class=\"fa-solid fa-feather\"></i>\n            }\n            @if (EditingID === item.ID) {\n              <input class=\"wb-edit wb-edit--text\" type=\"text\"\n                     [value]=\"item.Text\"\n                     (keydown)=\"OnEditKeydown($event, editText.value)\"\n                     (blur)=\"CommitEdit(editText.value)\"\n                     #editText/>\n            } @else {\n              {{ item.Text }}\n            }\n            @if (ShowHandles(item) && !IsDragging(item)) {\n              @for (h of Handles; track h) {\n                <span [class]=\"'sel-h ' + h\" (pointerdown)=\"OnHandlePointerDown($event, item, h)\"></span>\n              }\n            }\n          </div>\n        }\n\n        @case ('markdown') {\n          <div class=\"bi md-card\"\n               [class.md-card--sage]=\"item.Author === 'agent'\"\n               [class.selected]=\"IsSelected(item)\"\n               [class.dragging]=\"IsDragging(item)\"\n               [class.pop-in]=\"PopInIDs.has(item.ID)\"\n               [style.left.px]=\"ItemX(item)\" [style.top.px]=\"ItemY(item)\"\n               [style.width.px]=\"ItemW(item)\"\n               (pointerdown)=\"OnItemPointerDown($event, item)\"\n               (dblclick)=\"BeginRichEdit($event, item)\"\n               (contextmenu)=\"OnItemContextMenu($event, item)\">\n            @if (item.Author === 'agent') {\n              <span class=\"author-chip author-chip--sage\"><i class=\"fa-solid fa-feather\"></i> {{ AgentName }}</span>\n            } @else {\n              <span class=\"author-chip author-chip--you\"><i class=\"fa-brands fa-markdown\"></i> You</span>\n            }\n            <!-- the BODY clips (overflow + max height) so the out-jutting selection\n                 handles and author chip on the card root are never clipped away -->\n            <div class=\"md-card__body\"\n                 [style.maxHeight.px]=\"MarkdownMaxHeight(item)\">\n              <!-- rendered through the shared mj-markdown component (sanitize defaults ON \u2014 no raw HTML passthrough) -->\n              <mj-markdown [data]=\"item.Markdown\"\n                           [enableMermaid]=\"false\"\n                           [enableCodeCopy]=\"false\"\n                           [enableCollapsibleHeadings]=\"false\"/>\n            </div>\n            @if (ShowHandles(item) && !IsDragging(item)) {\n              @for (h of Handles; track h) {\n                <span [class]=\"'sel-h ' + h\" (pointerdown)=\"OnHandlePointerDown($event, item, h)\"></span>\n              }\n            }\n          </div>\n        }\n\n        @case ('html') {\n          <div class=\"bi html-card\"\n               [class.html-card--sage]=\"item.Author === 'agent'\"\n               [class.selected]=\"IsSelected(item)\"\n               [class.dragging]=\"IsDragging(item)\"\n               [class.pop-in]=\"PopInIDs.has(item.ID)\"\n               [style.left.px]=\"ItemX(item)\" [style.top.px]=\"ItemY(item)\"\n               [style.width.px]=\"ItemW(item)\" [style.height.px]=\"ItemH(item)\"\n               (pointerdown)=\"OnItemPointerDown($event, item)\"\n               (contextmenu)=\"OnItemContextMenu($event, item)\">\n            <!-- Drag/select wiring lives on the CARD ROOT: pointer events from the header,\n                 the border ring and the lazy placeholder all bubble here, while events\n                 inside the sandboxed iframe never reach the parent document \u2014 so the\n                 widget body stays fully interactive and everything else drags the card. -->\n            <div class=\"html-card__head\"\n                 (dblclick)=\"BeginRichEdit($event, item)\">\n              <i class=\"fa-solid fa-code html-card__glyph\"></i>\n              <span class=\"html-card__title\">{{ HtmlTitle(item) }}</span>\n              @if (item.Author === 'agent') {\n                <span class=\"author-chip author-chip--sage author-chip--inline\"><i class=\"fa-solid fa-feather\"></i> {{ AgentName }}</span>\n              } @else {\n                <span class=\"author-chip author-chip--you author-chip--inline\"><i class=\"fa-solid fa-user\"></i> You</span>\n              }\n              @if (!ReadOnly) {\n                <button type=\"button\" class=\"html-card__btn\" title=\"Edit HTML\"\n                        (pointerdown)=\"$event.stopPropagation()\"\n                        (click)=\"BeginRichEdit($event, item)\"><i class=\"fa-solid fa-pen\"></i></button>\n                <button type=\"button\" class=\"html-card__btn\" title=\"Remove widget\"\n                        (pointerdown)=\"$event.stopPropagation()\"\n                        (click)=\"RemoveItemClick($event, item)\"><i class=\"fa-solid fa-trash-can\"></i></button>\n              }\n            </div>\n            <div class=\"html-card__body\">\n              @if (IsNearViewport(item)) {\n                <!-- SANDBOXED: allow-scripts ONLY (no allow-same-origin) \u2014 opaque origin,\n                     no access to the app DOM, session, cookies or storage. The srcdoc is\n                     built by the view-scoped wbWidgetSrcdoc pipe: rebuilt per MOUNT (page\n                     switches / lazy toggle / board re-creation always render fresh) and\n                     identity-stable while mounted (no reload churn). See whiteboard-srcdoc.pipe.ts. -->\n                <iframe class=\"html-card__frame\"\n                        sandbox=\"allow-scripts\"\n                        [srcdoc]=\"item.Html | wbWidgetSrcdoc\"\n                        [attr.data-item-id]=\"item.ID\"\n                        [attr.title]=\"HtmlTitle(item)\"></iframe>\n              } @else {\n                <div class=\"html-card__lazy\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  <span>{{ HtmlTitle(item) }}</span>\n                </div>\n              }\n            </div>\n            @if (ShowHandles(item) && !IsDragging(item)) {\n              @for (h of Handles; track h) {\n                <span [class]=\"'sel-h ' + h\" (pointerdown)=\"OnHandlePointerDown($event, item, h)\"></span>\n              }\n            }\n          </div>\n        }\n\n        @case ('image') {\n          <div class=\"bi img-card\"\n               [class.selected]=\"IsSelected(item)\"\n               [class.dragging]=\"IsDragging(item)\"\n               [class.pop-in]=\"PopInIDs.has(item.ID)\"\n               [style.left.px]=\"ItemX(item)\" [style.top.px]=\"ItemY(item)\"\n               [style.width.px]=\"ItemW(item)\"\n               (pointerdown)=\"OnItemPointerDown($event, item)\"\n               (contextmenu)=\"OnItemContextMenu($event, item)\">\n            @if (item.Author === 'agent') {\n              <span class=\"author-chip author-chip--sage\"><i class=\"fa-solid fa-feather\"></i> {{ AgentName }}</span>\n            } @else {\n              <span class=\"author-chip author-chip--you\"><i class=\"fa-solid fa-paste\"></i> You \u00B7 pasted</span>\n            }\n            <div class=\"img-card__body\">\n              @if (item.Url) {\n                <img [src]=\"item.Url\" [alt]=\"item.Name\"/>\n              } @else {\n                <i class=\"fa-regular fa-image\"></i>\n              }\n            </div>\n            <div class=\"img-card__name\"><i class=\"fa-solid fa-chart-area\"></i> {{ item.Name }}</div>\n            @if (ShowHandles(item) && !IsDragging(item)) {\n              @for (h of Handles; track h) {\n                <span [class]=\"'sel-h ' + h\" (pointerdown)=\"OnHandlePointerDown($event, item, h)\"></span>\n              }\n            }\n          </div>\n        }\n      }\n    }\n\n    <!-- agent presence cursor -->\n    @if (AgentPresence?.Active) {\n      <div class=\"cursor cursor--sage\" [style.left.px]=\"AgentPresence!.X\" [style.top.px]=\"AgentPresence!.Y\">\n        <span class=\"tip\"><i class=\"fa-solid fa-feather\"></i></span>\n        <span class=\"lbl\"><i class=\"fa-solid fa-pen\"></i>{{ AgentPresence!.Label }}</span>\n      </div>\n    }\n  </div>\n\n  <!-- in-board rich-content editor panel (markdown / html items) -->\n  @if (RichEditor; as ed) {\n    <div class=\"rich-editor\"\n         (keydown)=\"OnRichEditorKeydown($event)\"\n         (pointerdown)=\"$event.stopPropagation()\"\n         (dblclick)=\"$event.stopPropagation()\"\n         (wheel)=\"$event.stopPropagation()\">\n      <div class=\"rich-editor__head\">\n        @if (ed.Kind === 'markdown') {\n          <i class=\"fa-brands fa-markdown\"></i>\n          <span class=\"rich-editor__label\">Markdown panel</span>\n          <span class=\"rich-editor__modes\">\n            <button type=\"button\" class=\"re-mode\" [class.on]=\"!ed.Preview\" (click)=\"RichEditorSetPreview(false)\">Edit</button>\n            <button type=\"button\" class=\"re-mode\" [class.on]=\"ed.Preview\" (click)=\"RichEditorSetPreview(true)\">Preview</button>\n          </span>\n        } @else {\n          <i class=\"fa-solid fa-code\"></i>\n          <span class=\"rich-editor__label\">HTML widget</span>\n          <input class=\"rich-editor__title\" type=\"text\" placeholder=\"Title\" #reTitle\n                 [value]=\"ed.TitleDraft\" (input)=\"OnRichEditorTitleChange(reTitle.value)\"/>\n        }\n      </div>\n      <div class=\"rich-editor__body\">\n        @if (ed.Kind === 'markdown' && ed.Preview) {\n          <div class=\"rich-editor__preview\">\n            <mj-markdown [data]=\"ed.Draft\"\n                         [enableMermaid]=\"false\"\n                         [enableCodeCopy]=\"false\"\n                         [enableCollapsibleHeadings]=\"false\"/>\n          </div>\n        } @else {\n          <mj-code-editor class=\"rich-editor__code\"\n                          [value]=\"ed.Draft\"\n                          [language]=\"ed.Kind === 'markdown' ? 'markdown' : 'html'\"\n                          (change)=\"OnRichEditorDraftChange($event)\"/>\n        }\n      </div>\n      @if (ed.Kind === 'html') {\n        <div class=\"rich-editor__note\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          Renders in a sandboxed frame \u2014 scripts run isolated, no app or network access guaranteed.\n        </div>\n      }\n      <div class=\"rich-editor__foot\">\n        <button type=\"button\" class=\"re-btn re-btn--primary\" (click)=\"RichEditorDone()\">Done</button>\n        <button type=\"button\" class=\"re-btn\" title=\"Apply without closing \u2014 re-renders the widget\" (click)=\"RichEditorApply()\">Apply</button>\n        <span class=\"re-spacer\"></span>\n        <button type=\"button\" class=\"re-btn\" title=\"Close without applying draft changes\" (click)=\"RichEditorCancel()\">Cancel</button>\n      </div>\n    </div>\n  }\n\n  <!-- right-click context menu (item actions / \"add \u2026 here\") -->\n  @if (ContextMenu; as menu) {\n    <div class=\"wb-context-menu\"\n         [style.left.px]=\"menu.Left\" [style.top.px]=\"menu.Top\"\n         (pointerdown)=\"$event.stopPropagation()\"\n         (contextmenu)=\"$event.preventDefault(); $event.stopPropagation()\"\n         (wheel)=\"$event.stopPropagation()\">\n      @for (action of menu.Actions; track action.ID) {\n        @if (action.SeparatorBefore) {\n          <div class=\"wb-context-menu__sep\"></div>\n        }\n        <button type=\"button\" class=\"wb-context-menu__item\"\n                [class.wb-context-menu__item--danger]=\"action.Danger\"\n                (click)=\"OnContextMenuAction(action.ID)\">\n          <i [class]=\"action.Icon\"></i> {{ action.Label }}\n        </button>\n      }\n    </div>\n  }\n\n  <!-- page strip (OneNote-style tabs; switching works in ReadOnly, mutations don't) -->\n  <mj-realtime-whiteboard-pages [State]=\"State\" [ReadOnly]=\"ReadOnly\"\n                                (ChipContextMenu)=\"OnPageChipContextMenu($event)\"/>\n\n  <!-- minimap -->\n  @if (MinimapOpen) {\n    <div class=\"minimap\">\n      <svg [attr.viewBox]=\"MinimapViewBox\" preserveAspectRatio=\"xMidYMid meet\">\n        @for (mi of MinimapItems; track $index) {\n          <rect [attr.x]=\"mi.X\" [attr.y]=\"mi.Y\" [attr.width]=\"mi.W\" [attr.height]=\"mi.H\"\n                [attr.class]=\"mi.Agent ? 'mm-item mm-item--sage' : 'mm-item'\" rx=\"6\"/>\n        }\n        <rect class=\"mm-viewport\"\n              [attr.x]=\"MinimapViewport.X\" [attr.y]=\"MinimapViewport.Y\"\n              [attr.width]=\"MinimapViewport.W\" [attr.height]=\"MinimapViewport.H\" rx=\"8\"/>\n      </svg>\n    </div>\n  }\n</div>\n", styles: ["/* LIVE WHITEBOARD canvas \u2014 ported pixel-faithfully from\n   plans/realtime/mockups/whiteboard.html (.board-canvas, .bi, .sticky, .shape-box,\n   .tlabel, .img-card, .sage-highlight, .cursor--sage, selection chrome, animations).\n   Sticky/ink hues are categorical content colors (like chart palettes) and stay literal;\n   all chrome colors are design tokens. The violet agent accent is derived exactly the way\n   the sibling realtime components derive it. */\n\n:host {\n  /* agent (violet) accent \u2014 reserved for the agent's marks, never the user's */\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: block;\n  position: absolute;\n  inset: 0;\n}\n\n/* ---------- the canvas + dotted grid (scales/offsets with the viewport) ---------- */\n.board-canvas {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  outline: none;\n  background-color: var(--mj-bg-surface-sunken);\n  background-image: radial-gradient(color-mix(in srgb, var(--mj-color-neutral-400, #94a3b8) 15%, transparent) 1px, transparent 1px);\n  background-size: 22px 22px;\n  cursor: default;\n  touch-action: none;\n}\n.cur-pan { cursor: grab; }\n.cur-pan.is-panning { cursor: grabbing; }\n.cur-cross { cursor: crosshair; }\n.cur-copy { cursor: copy; }\n.cur-text { cursor: text; }\n.cur-eraser { cursor: cell; }\n\n.board-viewport {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  transform-origin: 0 0;\n  overflow: visible;\n}\n\n/* ---------- ink + connector svg layer ---------- */\n.ink-layer {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 1px;\n  height: 1px;\n  pointer-events: none;\n  overflow: visible;\n}\n.ink-layer path {\n  pointer-events: none;\n}\n.ink-layer path.wb-erasable {\n  pointer-events: stroke;\n  cursor: pointer;\n}\n.ink-sage { stroke: var(--sage) !important; }\n.wb-ink-selected { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mj-brand-primary) 60%, transparent)); }\n\n.conn-user path { stroke: var(--mj-color-neutral-300, #cbd5e1); }\n.conn-sage path {\n  stroke: var(--sage);\n  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sage) 35%, transparent));\n}\n.draw-in {\n  stroke-dasharray: 420;\n  stroke-dashoffset: 420;\n  animation: wb-conn-draw 1.4s ease-out forwards;\n}\n@keyframes wb-conn-draw { to { stroke-dashoffset: 0; } }\n\n.wb-live-pen { opacity: 0.95; }\n.wb-pending-conn {\n  stroke: var(--mj-text-disabled);\n  stroke-dasharray: 4 4;\n}\n\n/* ---------- board items: shared chrome ---------- */\n.bi {\n  position: absolute;\n  box-shadow: var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  /* drag-to-move must never fight native text selection (inline editors re-enable it) */\n  user-select: none;\n  -webkit-user-select: none;\n}\n.author-chip {\n  position: absolute;\n  top: -9px;\n  left: 8px;\n  z-index: 3;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 1px 7px;\n  font-size: 9px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  border-radius: var(--mj-radius-full, 9999px);\n  line-height: 1.5;\n  white-space: nowrap;\n  pointer-events: none;\n}\n.author-chip i { font-size: 7.5px; }\n.author-chip--you {\n  background: var(--mj-color-neutral-700, #334155);\n  border: 1px solid var(--mj-border-strong);\n  color: var(--mj-color-neutral-300, #cbd5e1);\n}\n.author-chip--sage {\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage);\n  color: var(--mj-color-violet-300, #c4b5fd);\n}\n\n/* ---------- sticky notes (amber tints are categorical content colors) ---------- */\n.sticky {\n  width: 172px;\n  padding: 14px 13px 12px;\n  border-radius: 4px 4px 14px 4px;\n  font-size: 12.5px;\n  line-height: 1.45;\n  font-weight: 500;\n  cursor: default;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.sticky--amber { background: linear-gradient(180deg, #fcd34d, #f5b831); color: #3f2d04; }\n.sticky--amber2 { background: linear-gradient(180deg, #fde68a, #f8ca4d); color: #3f2d04; }\n.sticky--sage {\n  background: linear-gradient(180deg, #38306b, #2c2455);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  border: 1px solid var(--sage);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent), var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n}\n\n/* ---------- shape boxes ---------- */\n.shape-box {\n  min-width: 60px;\n  min-height: 56px;\n  display: grid;\n  place-items: center;\n  text-align: center;\n  padding: 10px 12px;\n  border: 2px solid var(--mj-color-neutral-400, #94a3b8);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-color-neutral-800, #1e293b) 88%, transparent);\n  font-size: 12.5px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: default;\n}\n.shape-box .sub {\n  display: block;\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  font-weight: 500;\n  margin-top: 2px;\n}\n.shape-box--ellipse { border-radius: 50%; }\n.shape-box--diamond {\n  border-radius: 10px;\n  transform: rotate(45deg);\n}\n.shape-box--diamond > span { transform: rotate(-45deg); }\n.shape-box--sage {\n  border-color: var(--sage);\n  background: color-mix(in srgb, var(--sage) 12%, var(--mj-bg-surface-sunken));\n  color: var(--mj-color-violet-300, #c4b5fd);\n}\n\n/* shape drag-create preview */\n.shape-preview {\n  position: absolute;\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n  pointer-events: none;\n}\n\n/* marquee (rubber-band) multi-selection rectangle \u2014 select tool drag on empty canvas */\n.wb-marquee {\n  position: absolute;\n  border: 1px dashed var(--mj-brand-primary);\n  border-radius: 3px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n  pointer-events: none;\n  z-index: 40;\n}\n\n/* ---------- text labels ---------- */\n.tlabel {\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--mj-color-violet-300, #c4b5fd);\n  background: transparent;\n  box-shadow: none;\n  letter-spacing: 0.01em;\n  text-shadow: 0 1px 6px rgba(2, 6, 23, 0.8);\n  /* WRAP by default: long labels fold at the default max width; an explicit item\n     width (resize / the tool's w param) binds inline and wins. */\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  max-width: 380px;\n  cursor: default;\n}\n.tlabel i {\n  font-size: 9px;\n  margin-right: 4px;\n  opacity: 0.8;\n}\n.tlabel--user {\n  color: var(--mj-text-primary);\n}\n\n/* ---------- markdown panel ----------\n   NOTE: the card ROOT must NOT clip (no overflow:hidden) \u2014 the selection handles and the\n   author chip jut OUTSIDE its box (\u22128/\u22129px) and clipping made them invisible/ungrabbable.\n   The BODY does the clipping (overflow + the template's max-height binding) instead. */\n.md-card {\n  border-radius: 10px;\n  border: 1.5px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n}\n.md-card__body {\n  padding: 16px 12px 10px;\n  font-size: 12px;\n  line-height: 1.45;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  border-radius: 8.5px; /* outer 10px radius minus the 1.5px border */\n}\n.md-card--sage {\n  border-color: var(--sage);\n  background: color-mix(in srgb, var(--sage) 8%, var(--mj-bg-surface-card));\n}\n/* compact the shared markdown renderer's defaults inside the small board card\n   (mj-markdown uses encapsulation:None, so ::ng-deep reaches its rendered content) */\n.md-card ::ng-deep .mj-markdown-container h1 { font-size: 16px; margin: 4px 0 6px; }\n.md-card ::ng-deep .mj-markdown-container h2 { font-size: 14px; margin: 4px 0 6px; }\n.md-card ::ng-deep .mj-markdown-container h3,\n.md-card ::ng-deep .mj-markdown-container h4 { font-size: 12.5px; margin: 4px 0 4px; }\n.md-card ::ng-deep .mj-markdown-container p { margin: 0 0 6px; }\n.md-card ::ng-deep .mj-markdown-container ul,\n.md-card ::ng-deep .mj-markdown-container ol { margin: 0 0 6px; padding-left: 18px; }\n.md-card ::ng-deep .mj-markdown-container pre { font-size: 10.5px; padding: 6px 8px; margin: 0 0 6px; overflow: auto; }\n.md-card ::ng-deep .mj-markdown-container code { font-size: 10.5px; }\n\n/* ---------- interactive HTML widget (sandboxed iframe in a mini window) ----------\n   NOTE: the card ROOT must NOT clip (no overflow:hidden) \u2014 the selection handles jut\n   OUTSIDE its box (\u22128px) and clipping made them invisible/ungrabbable. The head/body\n   carry the rounded-corner clipping instead. */\n.html-card {\n  display: flex;\n  flex-direction: column;\n  border-radius: 10px;\n  border: 1.5px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n  min-width: 160px;\n  min-height: 90px;\n}\n.html-card--sage {\n  border-color: var(--sage);\n}\n.html-card__head {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 5px 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  border-radius: 8.5px 8.5px 0 0; /* outer 10px radius minus the 1.5px border */\n  cursor: grab;\n  user-select: none;\n}\n.html-card--sage .html-card__head {\n  background: color-mix(in srgb, var(--sage) 14%, var(--mj-bg-surface-sunken));\n}\n.html-card__glyph {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n.html-card--sage .html-card__glyph { color: var(--sage); }\n.html-card__title {\n  flex: 1;\n  min-width: 0;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.author-chip--inline {\n  position: static;\n  flex-shrink: 0;\n}\n.html-card__btn {\n  flex-shrink: 0;\n  display: grid;\n  place-items: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--mj-radius-sm, 4px);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 10px;\n  cursor: pointer;\n}\n.html-card__btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.html-card__body {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  background: var(--mj-bg-surface);\n  overflow: hidden;\n  border-radius: 0 0 8.5px 8.5px; /* clips the iframe's square corners */\n}\n.html-card__frame {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n  display: block;\n  background: #ffffff; /* widgets author against a plain document background */\n}\n/* While a board gesture is in flight, frames must not swallow pointermove \u2014\n   otherwise dragging a widget by its header dies the moment the pointer crosses an iframe. */\n.board-canvas.is-interacting .html-card__frame {\n  pointer-events: none;\n}\n.html-card__lazy {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  /* off-viewport placeholder is a plain div \u2014 pointerdown bubbles to the card root,\n     so the whole placeholder is a drag surface (unlike the live iframe body) */\n  cursor: grab;\n}\n.html-card__lazy i { font-size: 16px; color: var(--mj-text-disabled); }\n\n/* ---------- in-board rich-content editor panel ---------- */\n.rich-editor {\n  position: absolute;\n  top: 14px;\n  right: 14px;\n  bottom: 14px;\n  z-index: 12;\n  width: min(480px, 62%);\n  display: flex;\n  flex-direction: column;\n  background: var(--mj-bg-surface-elevated, var(--mj-bg-surface));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.3));\n  overflow: hidden;\n  cursor: default;\n}\n.rich-editor__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n  font-size: 11px;\n  color: var(--mj-text-muted);\n}\n.rich-editor__label {\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n}\n.rich-editor__modes {\n  margin-left: auto;\n  display: inline-flex;\n  gap: 2px;\n  padding: 2px;\n  border-radius: var(--mj-radius-full, 9999px);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n}\n.re-mode {\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 10.5px;\n  font-weight: 700;\n  padding: 2px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n}\n.re-mode.on {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.rich-editor__title {\n  flex: 1;\n  min-width: 0;\n  margin-left: 4px;\n  padding: 3px 8px;\n  font-size: 11.5px;\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 4px);\n  outline: none;\n}\n.rich-editor__title:focus { border-color: var(--mj-border-focus, var(--mj-brand-primary)); }\n.rich-editor__body {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n.rich-editor__code {\n  flex: 1;\n  min-height: 0;\n  display: block;\n  overflow: auto;\n  font-size: 12px;\n}\n.rich-editor__preview {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 12px 14px;\n  font-size: 12.5px;\n  color: var(--mj-text-primary);\n}\n.rich-editor__note {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 6px 10px;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  border-top: 1px solid var(--mj-border-subtle, var(--mj-border-default));\n}\n.rich-editor__foot {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 10px;\n  border-top: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n.re-spacer { flex: 1; }\n.re-btn {\n  padding: 4px 14px;\n  font-size: 11.5px;\n  font-weight: 700;\n  border-radius: var(--mj-radius-md, 6px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n}\n.re-btn:hover { background: var(--mj-bg-surface-hover); }\n.re-btn--primary {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #fff);\n}\n.re-btn--primary:hover { background: var(--mj-brand-primary-hover, var(--mj-brand-primary)); }\n\n/* ---------- pasted image card ----------\n   NOTE: the card ROOT must NOT clip (no overflow:hidden) \u2014 selection handles + author\n   chip jut outside its box. The body clips the photo's top corners instead. */\n.img-card {\n  width: 198px;\n  border-radius: 10px;\n  border: 1.5px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n}\n.img-card__body {\n  height: 104px;\n  display: grid;\n  place-items: center;\n  overflow: hidden;\n  border-radius: 8.5px 8.5px 0 0; /* outer 10px radius minus the 1.5px border */\n  background:\n    linear-gradient(160deg, color-mix(in srgb, var(--mj-brand-primary) 30%, transparent) 0%, color-mix(in srgb, var(--mj-brand-primary) 10%, transparent) 38%, transparent 39%),\n    linear-gradient(200deg, color-mix(in srgb, var(--mj-brand-accent, var(--mj-brand-primary)) 22%, transparent) 0%, color-mix(in srgb, var(--mj-brand-accent, var(--mj-brand-primary)) 8%, transparent) 60%, transparent 61%),\n    var(--mj-color-neutral-900, #0f172a);\n  color: var(--mj-text-disabled);\n  font-size: 22px;\n}\n.img-card__body img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  /* the photo is presentational \u2014 without this, the browser's NATIVE image drag\n     hijacks the pointer gesture and kills the board's move interaction */\n  pointer-events: none;\n  -webkit-user-drag: none;\n}\n.img-card__name {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n  padding: 6px 10px;\n  font-size: 10.5px;\n  color: var(--mj-text-muted);\n  font-family: var(--mj-font-mono, ui-monospace, monospace);\n  border-top: 1px solid var(--mj-border-default);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.img-card__name i { color: var(--mj-brand-accent, var(--mj-brand-primary)); }\n\n/* ---------- agent pop-in (just-added item) ---------- */\n.pop-in {\n  animation: wb-bi-pop 600ms cubic-bezier(0.34, 1.4, 0.64, 1) both, wb-sage-flash 2.4s ease-out;\n}\n@keyframes wb-bi-pop {\n  0% { scale: 0.55; opacity: 0; }\n  70% { scale: 1.06; }\n  100% { scale: 1; opacity: 1; }\n}\n@keyframes wb-sage-flash {\n  0% {\n    box-shadow: 0 0 0 12px color-mix(in srgb, var(--sage) 45%, transparent),\n                0 0 36px color-mix(in srgb, var(--sage) 50%, transparent),\n                var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  }\n  100% {\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage) 20%, transparent),\n                var(--mj-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .pop-in { animation: none; }\n  .draw-in { animation: none; stroke-dashoffset: 0; }\n}\n\n/* ---------- selection + drag state ---------- */\n.bi.selected {\n  outline: 1.5px solid var(--mj-brand-primary);\n  outline-offset: 3px;\n}\n.bi.dragging {\n  transform: rotate(-1.6deg) scale(1.02);\n  box-shadow: var(--mj-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.45));\n  cursor: grabbing;\n  z-index: 5;\n  border-color: var(--mj-brand-primary);\n}\n.sel-h {\n  position: absolute;\n  width: 8px;\n  height: 8px;\n  border-radius: 2px;\n  background: var(--mj-bg-surface);\n  border: 1.5px solid var(--mj-brand-primary);\n  z-index: 4;\n}\n.sel-h.nw { top: -8px; left: -8px; cursor: nwse-resize; }\n.sel-h.n { top: -8px; left: calc(50% - 4px); cursor: ns-resize; }\n.sel-h.ne { top: -8px; right: -8px; cursor: nesw-resize; }\n.sel-h.e { top: calc(50% - 4px); right: -8px; cursor: ew-resize; }\n.sel-h.se { bottom: -8px; right: -8px; cursor: nwse-resize; }\n.sel-h.s { bottom: -8px; left: calc(50% - 4px); cursor: ns-resize; }\n.sel-h.sw { bottom: -8px; left: -8px; cursor: nesw-resize; }\n.sel-h.w { top: calc(50% - 4px); left: -8px; cursor: ew-resize; }\n\n.drag-ghost {\n  position: absolute;\n  border: 1.5px dashed var(--mj-border-strong);\n  border-radius: 10px;\n  opacity: 0.55;\n  pointer-events: none;\n}\n.drag-ghost::after {\n  content: \"from here\";\n  position: absolute;\n  bottom: -18px;\n  left: 4px;\n  font-size: 9px;\n  color: var(--mj-text-disabled);\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* ---------- agent highlight region (click dismisses) ---------- */\n.sage-highlight {\n  position: absolute;\n  border: 2px dashed var(--sage);\n  border-radius: 16px;\n  background: color-mix(in srgb, var(--sage) 6%, transparent);\n  animation: wb-hl-pulse 2.2s ease-in-out infinite;\n  cursor: pointer;\n}\n@keyframes wb-hl-pulse {\n  0%, 100% { box-shadow: 0 0 0 0 transparent; }\n  50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--sage) 25%, transparent); }\n}\n.sage-highlight .hl-tag {\n  position: absolute;\n  top: -11px;\n  right: 12px;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 1px 8px;\n  font-size: 9.5px;\n  font-weight: 800;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  border-radius: var(--mj-radius-full, 9999px);\n  white-space: nowrap;\n}\n.sage-highlight.user-highlight {\n  border-color: var(--mj-border-strong);\n  background: color-mix(in srgb, var(--mj-text-secondary) 5%, transparent);\n}\n.sage-highlight.user-highlight .hl-tag {\n  background: var(--mj-color-neutral-700, #334155);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-color-neutral-300, #cbd5e1);\n}\n\n/* ---------- agent presence cursor ---------- */\n.cursor {\n  position: absolute;\n  z-index: 8;\n  pointer-events: none;\n}\n.cursor--sage {\n  display: flex;\n  align-items: flex-start;\n  gap: 6px;\n  transition: left 700ms cubic-bezier(0.33, 1, 0.68, 1), top 700ms cubic-bezier(0.33, 1, 0.68, 1);\n  animation: wb-sage-cursor-drift 5s ease-in-out infinite alternate;\n}\n.cursor--sage .tip {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 50% 50% 50% 4px;\n  display: grid;\n  place-items: center;\n  background: var(--sage);\n  color: #1b1438;\n  font-size: 11px;\n  box-shadow: 0 0 14px color-mix(in srgb, var(--sage) 60%, transparent);\n}\n.cursor--sage .tip::after {\n  content: \"\";\n  position: absolute;\n  inset: -5px;\n  border-radius: inherit;\n  border: 2px solid color-mix(in srgb, var(--sage) 45%, transparent);\n  animation: wb-orb-ring 1.8s ease-out infinite;\n}\n.cursor--sage .lbl {\n  margin-top: 14px;\n  padding: 3px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  white-space: nowrap;\n  background: var(--sage-chip-bg);\n  border: 1px solid var(--sage);\n  color: var(--mj-color-violet-300, #c4b5fd);\n  font-size: 10.5px;\n  font-weight: 700;\n}\n.cursor--sage .lbl i {\n  animation: wb-pen-wiggle 0.9s ease-in-out infinite;\n  display: inline-block;\n  margin-right: 3px;\n  font-size: 9px;\n}\n@keyframes wb-pen-wiggle {\n  0%, 100% { transform: rotate(0); }\n  50% { transform: rotate(-14deg); }\n}\n@keyframes wb-sage-cursor-drift {\n  from { transform: translate(0, 0); }\n  to { transform: translate(-26px, 20px); }\n}\n@keyframes wb-orb-ring {\n  0% { transform: scale(1); opacity: 0.6; }\n  100% { transform: scale(1.5); opacity: 0; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .cursor--sage { animation: none; }\n  .sage-highlight { animation: none; }\n}\n\n/* ---------- inline editors ---------- */\n.wb-edit {\n  display: block;\n  width: 100%;\n  background: transparent;\n  border: 0;\n  outline: none;\n  resize: none;\n  color: inherit;\n  font: inherit;\n  line-height: inherit;\n  padding: 0;\n  /* re-enable selection inside the editors (.bi disables it for drag-to-move) */\n  user-select: text;\n  -webkit-user-select: text;\n}\n.wb-edit--shape { text-align: center; }\n.wb-edit--text { min-width: 110px; }\n\n/* ---------- minimap ---------- */\n.minimap {\n  position: absolute;\n  right: 14px;\n  bottom: 58px;\n  z-index: 10;\n  width: 176px;\n  height: 118px;\n  padding: 6px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.3));\n}\n.minimap svg {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n.mm-item {\n  fill: color-mix(in srgb, var(--mj-text-secondary) 45%, transparent);\n}\n.mm-item--sage {\n  fill: color-mix(in srgb, var(--sage) 60%, transparent);\n}\n.mm-viewport {\n  fill: none;\n  stroke: var(--mj-brand-primary);\n  stroke-width: 6;\n  vector-effect: non-scaling-stroke;\n}\n\n/* \u2500\u2500 right-click context menu \u2014 matches the export-menu / flyout chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.wb-context-menu {\n  position: absolute;\n  z-index: 40;\n  min-width: 178px;\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  cursor: default;\n}\n.wb-context-menu__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.wb-context-menu__item:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n.wb-context-menu__item i {\n  width: 14px;\n  text-align: center;\n  color: var(--mj-text-muted);\n}\n.wb-context-menu__item:hover i {\n  color: var(--mj-brand-accent, var(--mj-brand-primary));\n}\n.wb-context-menu__item--danger {\n  color: var(--mj-status-error);\n}\n.wb-context-menu__item--danger:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface-elevated));\n  color: var(--mj-status-error-text, var(--mj-status-error));\n}\n.wb-context-menu__item--danger i,\n.wb-context-menu__item--danger:hover i {\n  color: var(--mj-status-error);\n}\n.wb-context-menu__sep {\n  height: 1px;\n  margin: 4px 6px;\n  background: var(--mj-border-subtle, var(--mj-border-default));\n}\n"] }]
+    }], null, { State: [{
+            type: Input,
+            args: [{ required: true }]
+        }], AgentName: [{
+            type: Input
+        }], Tool: [{
+            type: Input
+        }], PenColor: [{
+            type: Input
+        }], PenWidth: [{
+            type: Input
+        }], ShapeKind: [{
+            type: Input
+        }], TextSize: [{
+            type: Input
+        }], TextFamily: [{
+            type: Input
+        }], TextBold: [{
+            type: Input
+        }], TextColor: [{
+            type: Input
+        }], AgentPresence: [{
+            type: Input
+        }], ReadOnly: [{
+            type: Input
+        }], ToolChangeRequest: [{
+            type: Output
+        }], WidgetSubmitting: [{
+            type: Output
+        }], WidgetSubmitted: [{
+            type: Output
+        }], WidgetInteraction: [{
+            type: Output
+        }], ContentApplying: [{
+            type: Output
+        }], ContentApplied: [{
+            type: Output
+        }], canvasRef: [{
+            type: ViewChild,
+            args: ['canvas']
+        }], pagesStrip: [{
+            type: ViewChild,
+            args: [RealtimeWhiteboardPagesComponent]
+        }], OnWindowPointerMove: [{
+            type: HostListener,
+            args: ['window:pointermove', ['$event']]
+        }], OnWindowPointerUp: [{
+            type: HostListener,
+            args: ['window:pointerup']
+        }], CloseContextMenu: [{
+            type: HostListener,
+            args: ['document:pointerdown']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RealtimeWhiteboardBoardComponent, { className: "RealtimeWhiteboardBoardComponent", filePath: "src/lib/whiteboard-board.component.ts", lineNumber: 164 }); })();
+//# sourceMappingURL=whiteboard-board.component.js.map