@bimetal/whiteboard-angular-components 0.35.0 → 0.37.0

package/dist/components/Whiteboard.js

@@ -1,6 +1,6 @@
 import { Component, Input, ViewChild, ElementRef, ChangeDetectionStrategy, NgZone, inject, signal, } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { screenToBoard, boardToScreen, WHITEBOARD_TOOLS, WHITEBOARD_ALIGN, WHITEBOARD_DISTRIBUTE, whiteboardConnectorPath, whiteboardDrawPath, whiteboardDashArray, whiteboardCommentAnchor, } from '@bimetal/whiteboard-headless';
+import { screenToBoard, boardToScreen, WHITEBOARD_TOOLS, WHITEBOARD_ALIGN, WHITEBOARD_DISTRIBUTE, whiteboardConnectorPath, whiteboardDrawPath, whiteboardDashArray, whiteboardCommentAnchor, whiteboardShapeDomId, reportUnroutedWhiteboardError, } from '@bimetal/whiteboard-headless';
 import { createWhiteboardControllerBinding } from '@bimetal/angular';
 import { WhiteboardShapeComponent } from './WhiteboardShape.js';
 import { TransformHandlesComponent } from './TransformHandles.js';
@@ -13,7 +13,7 @@ import * as i1 from "@angular/common";
 const _c0 = ["viewportRef"];
 function WhiteboardComponent_button_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 36);
+    i0.ɵɵelementStart(0, "button", 31);
     i0.ɵɵlistener("click", function WhiteboardComponent_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUndo()); });
     i0.ɵɵtext(1, "\u21B6");
     i0.ɵɵelementEnd();
@@ -24,7 +24,7 @@ function WhiteboardComponent_button_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function WhiteboardComponent_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 37);
+    i0.ɵɵelementStart(0, "button", 32);
     i0.ɵɵlistener("click", function WhiteboardComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRedo()); });
     i0.ɵɵtext(1, "\u21B7");
     i0.ɵɵelementEnd();
@@ -38,7 +38,7 @@ function WhiteboardComponent_span_4_Template(rf, ctx) { if (rf & 1) {
 } }
 function WhiteboardComponent_button_5_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 38);
+    i0.ɵɵelementStart(0, "button", 33);
     i0.ɵɵlistener("click", function WhiteboardComponent_button_5_Template_button_click_0_listener() { const t_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTool(t_r6.id)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -50,175 +50,240 @@ function WhiteboardComponent_button_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(t_r6.glyph);
 } }
-function WhiteboardComponent_button_22_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 8);
-    i0.ɵɵlistener("click", function WhiteboardComponent_button_22_Template_button_click_0_listener() { const a_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onAlign(a_r8.edge)); });
+function WhiteboardComponent_ng_container_7_button_16_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_button_16_Template_button_click_0_listener() { const a_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onAlign(a_r9.edge)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const a_r8 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
+    const a_r9 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", !ctx_r2.canAlign);
-    i0.ɵɵattribute("title", ctx_r2.locale.alignLabels[a_r8.edge])("data-align", a_r8.edge);
+    i0.ɵɵattribute("title", ctx_r2.locale.alignLabels[a_r9.edge])("data-align", a_r9.edge);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(a_r8.glyph);
+    i0.ɵɵtextInterpolate(a_r9.glyph);
 } }
-function WhiteboardComponent_button_23_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 8);
-    i0.ɵɵlistener("click", function WhiteboardComponent_button_23_Template_button_click_0_listener() { const d_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDistribute(d_r10.axis)); });
+function WhiteboardComponent_ng_container_7_button_17_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_button_17_Template_button_click_0_listener() { const d_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onDistribute(d_r11.axis)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const d_r10 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
+    const d_r11 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("disabled", !ctx_r2.canDistribute);
-    i0.ɵɵattribute("title", ctx_r2.locale.distributeLabels[d_r10.axis])("data-distribute", d_r10.axis);
+    i0.ɵɵattribute("title", ctx_r2.locale.distributeLabels[d_r11.axis])("data-distribute", d_r11.axis);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(d_r10.glyph);
+    i0.ɵɵtextInterpolate(d_r11.glyph);
 } }
-function WhiteboardComponent__svg_path_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 39);
+function WhiteboardComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "button", 34);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onBringToFront()); });
+    i0.ɵɵtext(2, "\u2B06");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 34);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSendToBack()); });
+    i0.ɵɵtext(4, "\u2B07");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 35);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onToggleLock()); });
+    i0.ɵɵtext(6, "\uD83D\uDD12");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 36);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onGroup()); });
+    i0.ɵɵtext(8, "\u29C9");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 37);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onUngroup()); });
+    i0.ɵɵtext(10, "\u229F");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 38);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDuplicate()); });
+    i0.ɵɵtext(12, "\u29C9\u207A");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 34);
+    i0.ɵɵlistener("click", function WhiteboardComponent_ng_container_7_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteSelection()); });
+    i0.ɵɵtext(14, "\uD83D\uDDD1");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(15, "span", 7);
+    i0.ɵɵtemplate(16, WhiteboardComponent_ng_container_7_button_16_Template, 2, 4, "button", 39)(17, WhiteboardComponent_ng_container_7_button_17_Template, 2, 4, "button", 39);
+    i0.ɵɵelement(18, "span", 7);
+    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const c_r11 = ctx.$implicit;
-    i0.ɵɵattribute("data-connector-id", c_r11.id)("d", c_r11.d)("stroke", c_r11.stroke)("stroke-width", c_r11.strokeWidth)("stroke-dasharray", c_r11.dash)("opacity", c_r11.opacity)("marker-end", c_r11.markerEnd)("marker-start", c_r11.markerStart);
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", !ctx_r2.hasSel);
+    i0.ɵɵattribute("title", ctx_r2.locale.bringToFront);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.hasSel);
+    i0.ɵɵattribute("title", ctx_r2.locale.sendToBack);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.hasSel);
+    i0.ɵɵattribute("title", ctx_r2.locale.lock);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.canGroup);
+    i0.ɵɵattribute("title", ctx_r2.locale.group);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.canUngroup);
+    i0.ɵɵattribute("title", ctx_r2.locale.ungroup);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.hasSel);
+    i0.ɵɵattribute("title", ctx_r2.locale.duplicate);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.hasSel);
+    i0.ɵɵattribute("title", ctx_r2.locale.delete);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r2.aligns);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.distributes);
 } }
-function WhiteboardComponent__svg_path_37_Template(rf, ctx) { if (rf & 1) {
+function WhiteboardComponent__svg_path_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
     i0.ɵɵelement(0, "path", 40);
+} if (rf & 2) {
+    const c_r12 = ctx.$implicit;
+    i0.ɵɵattribute("data-connector-id", c_r12.id)("d", c_r12.d)("stroke", c_r12.stroke)("stroke-width", c_r12.strokeWidth)("stroke-dasharray", c_r12.dash)("opacity", c_r12.opacity)("marker-end", c_r12.markerEnd)("marker-start", c_r12.markerStart);
+} }
+function WhiteboardComponent__svg_path_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 41);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵattribute("d", ctx_r2.connectorPreviewD);
 } }
-function WhiteboardComponent__svg_path_38_Template(rf, ctx) { if (rf & 1) {
+function WhiteboardComponent__svg_path_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "path", 41);
+    i0.ɵɵelement(0, "path", 42);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵattribute("d", ctx_r2.drawPreviewPath);
 } }
-function WhiteboardComponent__svg_line_39_Template(rf, ctx) { if (rf & 1) {
+function WhiteboardComponent__svg_line_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "line", 42);
+    i0.ɵɵelement(0, "line", 43);
 } if (rf & 2) {
-    const g_r12 = ctx.$implicit;
-    i0.ɵɵattribute("data-guide-axis", g_r12.axis)("x1", g_r12.x1)("y1", g_r12.y1)("x2", g_r12.x2)("y2", g_r12.y2);
+    const g_r13 = ctx.$implicit;
+    i0.ɵɵattribute("data-guide-axis", g_r13.axis)("x1", g_r13.x1)("y1", g_r13.y1)("x2", g_r13.x2)("y2", g_r13.y2);
 } }
-function WhiteboardComponent_bm_wb_shape_40_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "bm-wb-shape", 43);
-    i0.ɵɵlistener("shapePointerDown", function WhiteboardComponent_bm_wb_shape_40_Template_bm_wb_shape_shapePointerDown_0_listener($event) { const v_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShapeDown(v_r14.shape.id, $event)); })("shapeDoubleClick", function WhiteboardComponent_bm_wb_shape_40_Template_bm_wb_shape_shapeDoubleClick_0_listener($event) { const v_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShapeDblClick(v_r14.shape.id, $event)); });
+function WhiteboardComponent_bm_wb_shape_23_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-shape", 44);
+    i0.ɵɵlistener("shapePointerDown", function WhiteboardComponent_bm_wb_shape_23_Template_bm_wb_shape_shapePointerDown_0_listener($event) { const v_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShapeDown(v_r15.shape.id, $event)); })("shapeDoubleClick", function WhiteboardComponent_bm_wb_shape_23_Template_bm_wb_shape_shapeDoubleClick_0_listener($event) { const v_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShapeDblClick(v_r15.shape.id, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const v_r14 = ctx.$implicit;
+    const v_r15 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("shape", v_r14.shape)("selected", v_r14.selected)("dropTarget", ctx_r2.snapshot.dropTargetId === v_r14.shape.id)("lockedLabel", ctx_r2.locale.locked);
+    i0.ɵɵproperty("shape", v_r15.shape)("selected", v_r15.selected)("focused", v_r15.focused)("dropTarget", ctx_r2.snapshot.dropTargetId === v_r15.shape.id)("lockedLabel", ctx_r2.locale.locked)("domId", ctx_r2.shapeDomId(v_r15.shape.id))("ariaLabel", v_r15.ariaLabel);
 } }
-function WhiteboardComponent_div_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 44);
+function WhiteboardComponent_div_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 45);
 } if (rf & 2) {
-    const mq_r15 = ctx.ngIf;
-    i0.ɵɵstyleProp("left", mq_r15.x, "px")("top", mq_r15.y, "px")("width", mq_r15.width, "px")("height", mq_r15.height, "px");
+    const mq_r16 = ctx.ngIf;
+    i0.ɵɵstyleProp("left", mq_r16.x, "px")("top", mq_r16.y, "px")("width", mq_r16.width, "px")("height", mq_r16.height, "px");
 } }
-function WhiteboardComponent_div_42_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 45);
+function WhiteboardComponent_div_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 46);
 } if (rf & 2) {
-    const cp_r16 = ctx.ngIf;
-    i0.ɵɵstyleProp("left", cp_r16.x, "px")("top", cp_r16.y, "px")("width", cp_r16.width, "px")("height", cp_r16.height, "px");
+    const cp_r17 = ctx.ngIf;
+    i0.ɵɵstyleProp("left", cp_r17.x, "px")("top", cp_r17.y, "px")("width", cp_r17.width, "px")("height", cp_r17.height, "px");
 } }
-function WhiteboardComponent_bm_wb_transform_handles_43_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "bm-wb-transform-handles", 46);
-    i0.ɵɵlistener("resize", function WhiteboardComponent_bm_wb_transform_handles_43_Template_bm_wb_transform_handles_resize_0_listener($event) { const tv_r18 = i0.ɵɵrestoreView(_r17).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeIntent(tv_r18.shape.id, $event)); })("rotate", function WhiteboardComponent_bm_wb_transform_handles_43_Template_bm_wb_transform_handles_rotate_0_listener($event) { const tv_r18 = i0.ɵɵrestoreView(_r17).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRotate(tv_r18.shape.id, $event)); });
+function WhiteboardComponent_bm_wb_transform_handles_26_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-transform-handles", 47);
+    i0.ɵɵlistener("resize", function WhiteboardComponent_bm_wb_transform_handles_26_Template_bm_wb_transform_handles_resize_0_listener($event) { const tv_r19 = i0.ɵɵrestoreView(_r18).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeIntent(tv_r19.shape.id, $event)); })("rotate", function WhiteboardComponent_bm_wb_transform_handles_26_Template_bm_wb_transform_handles_rotate_0_listener($event) { const tv_r19 = i0.ɵɵrestoreView(_r18).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onRotate(tv_r19.shape.id, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tv_r18 = ctx.ngIf;
-    i0.ɵɵproperty("view", tv_r18);
+    const tv_r19 = ctx.ngIf;
+    i0.ɵɵproperty("view", tv_r19);
 } }
-function WhiteboardComponent_button_44_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 47);
-    i0.ɵɵlistener("pointerdown", function WhiteboardComponent_button_44_Template_button_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.stop($event)); })("click", function WhiteboardComponent_button_44_Template_button_click_0_listener($event) { const p_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPinClick(p_r20.id, $event)); });
+function WhiteboardComponent_button_27_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵlistener("pointerdown", function WhiteboardComponent_button_27_Template_button_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.stop($event)); })("click", function WhiteboardComponent_button_27_Template_button_click_0_listener($event) { const p_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onPinClick(p_r21.id, $event)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const p_r20 = ctx.$implicit;
+    const p_r21 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassMap(ctx_r2.pinClass(p_r20));
-    i0.ɵɵstyleProp("left", p_r20.x, "px")("top", p_r20.y, "px");
-    i0.ɵɵattribute("data-comment-id", p_r20.id)("title", p_r20.text);
+    i0.ɵɵclassMap(ctx_r2.pinClass(p_r21));
+    i0.ɵɵstyleProp("left", p_r21.x, "px")("top", p_r21.y, "px");
+    i0.ɵɵattribute("data-comment-id", p_r21.id)("title", p_r21.text);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(p_r20.glyph);
+    i0.ɵɵtextInterpolate(p_r21.glyph);
 } }
-function WhiteboardComponent__svg_svg_45__svg_line_1_Template(rf, ctx) { if (rf & 1) {
+function WhiteboardComponent__svg_svg_28__svg_line_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelement(0, "line", 50);
+    i0.ɵɵelement(0, "line", 51);
 } if (rf & 2) {
-    const seg_r21 = ctx.$implicit;
-    i0.ɵɵattribute("x1", seg_r21.x1)("y1", seg_r21.y1)("x2", seg_r21.x2)("y2", seg_r21.y2)("stroke-opacity", seg_r21.opacity);
+    const seg_r22 = ctx.$implicit;
+    i0.ɵɵattribute("x1", seg_r22.x1)("y1", seg_r22.y1)("x2", seg_r22.x2)("y2", seg_r22.y2)("stroke-opacity", seg_r22.opacity);
 } }
-function WhiteboardComponent__svg_svg_45_Template(rf, ctx) { if (rf & 1) {
+function WhiteboardComponent__svg_svg_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 48);
-    i0.ɵɵtemplate(1, WhiteboardComponent__svg_svg_45__svg_line_1_Template, 1, 5, "line", 49);
+    i0.ɵɵelementStart(0, "svg", 49);
+    i0.ɵɵtemplate(1, WhiteboardComponent__svg_svg_28__svg_line_1_Template, 1, 5, "line", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ls_r22 = ctx.ngIf;
+    const ls_r23 = ctx.ngIf;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ls_r22)("ngForTrackBy", ctx_r2.trackIndex);
+    i0.ɵɵproperty("ngForOf", ls_r23)("ngForTrackBy", ctx_r2.trackIndex);
 } }
-function WhiteboardComponent_bm_wb_comment_thread_46_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "bm-wb-comment-thread", 51);
-    i0.ɵɵlistener("commit", function WhiteboardComponent_bm_wb_comment_thread_46_Template_bm_wb_comment_thread_commit_0_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCommitDraft($event)); })("close", function WhiteboardComponent_bm_wb_comment_thread_46_Template_bm_wb_comment_thread_close_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCancelDraft()); });
+function WhiteboardComponent_bm_wb_comment_thread_29_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-comment-thread", 52);
+    i0.ɵɵlistener("commit", function WhiteboardComponent_bm_wb_comment_thread_29_Template_bm_wb_comment_thread_commit_0_listener($event) { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCommitDraft($event)); })("close", function WhiteboardComponent_bm_wb_comment_thread_29_Template_bm_wb_comment_thread_close_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCancelDraft()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const at_r24 = ctx.ngIf;
+    const at_r25 = ctx.ngIf;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("at", at_r24)("initial", "")("existing", false)("resolved", false)("locale", ctx_r2.locale);
+    i0.ɵɵproperty("at", at_r25)("initial", "")("existing", false)("resolved", false)("locale", ctx_r2.locale);
 } }
-function WhiteboardComponent_bm_wb_comment_thread_47_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "bm-wb-comment-thread", 52);
-    i0.ɵɵlistener("commit", function WhiteboardComponent_bm_wb_comment_thread_47_Template_bm_wb_comment_thread_commit_0_listener($event) { const ot_r26 = i0.ɵɵrestoreView(_r25).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCommitThread(ot_r26.id, $event)); })("close", function WhiteboardComponent_bm_wb_comment_thread_47_Template_bm_wb_comment_thread_close_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseThread()); })("resolve", function WhiteboardComponent_bm_wb_comment_thread_47_Template_bm_wb_comment_thread_resolve_0_listener() { const ot_r26 = i0.ɵɵrestoreView(_r25).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResolveThread(ot_r26.id)); })("delete", function WhiteboardComponent_bm_wb_comment_thread_47_Template_bm_wb_comment_thread_delete_0_listener() { const ot_r26 = i0.ɵɵrestoreView(_r25).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteThread(ot_r26.id)); });
+function WhiteboardComponent_bm_wb_comment_thread_30_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-comment-thread", 53);
+    i0.ɵɵlistener("commit", function WhiteboardComponent_bm_wb_comment_thread_30_Template_bm_wb_comment_thread_commit_0_listener($event) { const ot_r27 = i0.ɵɵrestoreView(_r26).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCommitThread(ot_r27.id, $event)); })("close", function WhiteboardComponent_bm_wb_comment_thread_30_Template_bm_wb_comment_thread_close_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseThread()); })("resolve", function WhiteboardComponent_bm_wb_comment_thread_30_Template_bm_wb_comment_thread_resolve_0_listener() { const ot_r27 = i0.ɵɵrestoreView(_r26).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResolveThread(ot_r27.id)); })("delete", function WhiteboardComponent_bm_wb_comment_thread_30_Template_bm_wb_comment_thread_delete_0_listener() { const ot_r27 = i0.ɵɵrestoreView(_r26).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteThread(ot_r27.id)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ot_r26 = ctx.ngIf;
+    const ot_r27 = ctx.ngIf;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("at", ot_r26.at)("initial", ot_r26.text)("existing", true)("resolved", ot_r26.resolved)("locale", ctx_r2.locale);
+    i0.ɵɵproperty("at", ot_r27.at)("identity", ot_r27.id)("initial", ot_r27.text)("existing", true)("resolved", ot_r27.resolved)("locale", ctx_r2.locale);
 } }
-function WhiteboardComponent_bm_wb_style_panel_48_Template(rf, ctx) { if (rf & 1) {
-    const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "bm-wb-style-panel", 53);
-    i0.ɵɵlistener("styleInput", function WhiteboardComponent_bm_wb_style_panel_48_Template_bm_wb_style_panel_styleInput_0_listener($event) { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onStyleInput($event)); });
+function WhiteboardComponent_bm_wb_style_panel_31_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-style-panel", 54);
+    i0.ɵɵlistener("styleInput", function WhiteboardComponent_bm_wb_style_panel_31_Template_bm_wb_style_panel_styleInput_0_listener($event) { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onStyleInput($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ps_r28 = ctx.ngIf;
+    const ps_r29 = ctx.ngIf;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleMap(ps_r28);
+    i0.ɵɵstyleMap(ps_r29);
     i0.ɵɵproperty("locale", ctx_r2.locale);
 } }
-function WhiteboardComponent_div_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 54)(1, "span");
+function WhiteboardComponent_div_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "span");
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const u_r29 = ctx.ngIf;
+    const u_r30 = ctx.ngIf;
+    i0.ɵɵclassMap("bm-wb__toast" + (u_r30.kind === "error" ? " bm-wb__toast--error" : ""));
+    i0.ɵɵattribute("role", u_r30.kind === "error" ? "alert" : "status");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(u_r29.description);
+    i0.ɵɵtextInterpolate(u_r30.description);
 } }
-function WhiteboardComponent_bm_wb_text_dialog_50_Template(rf, ctx) { if (rf & 1) {
-    const _r30 = i0.ɵɵgetCurrentView();
+function WhiteboardComponent_bm_wb_text_dialog_33_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "bm-wb-text-dialog", 55);
-    i0.ɵɵlistener("save", function WhiteboardComponent_bm_wb_text_dialog_50_Template_bm_wb_text_dialog_save_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveShape($event)); })("close", function WhiteboardComponent_bm_wb_text_dialog_50_Template_bm_wb_text_dialog_close_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseDialog()); })("delete", function WhiteboardComponent_bm_wb_text_dialog_50_Template_bm_wb_text_dialog_delete_0_listener() { const ds_r31 = i0.ɵɵrestoreView(_r30).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteShape(ds_r31.id)); });
+    i0.ɵɵlistener("save", function WhiteboardComponent_bm_wb_text_dialog_33_Template_bm_wb_text_dialog_save_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSaveShape($event)); })("close", function WhiteboardComponent_bm_wb_text_dialog_33_Template_bm_wb_text_dialog_close_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onCloseDialog()); })("delete", function WhiteboardComponent_bm_wb_text_dialog_33_Template_bm_wb_text_dialog_delete_0_listener() { const ds_r32 = i0.ɵɵrestoreView(_r31).ngIf; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteShape(ds_r32.id)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ds_r31 = ctx.ngIf;
+    const ds_r32 = ctx.ngIf;
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("initial", ds_r31.text)("locale", ctx_r2.locale);
+    i0.ɵɵproperty("initial", ds_r32.text)("locale", ctx_r2.locale);
 } }
 /** Per-instance SVG marker id counter — document-global ids would collide across
  *  two mounted boards and `url(#…)` would resolve to the wrong marker. */
@@ -257,11 +322,24 @@ export class WhiteboardComponent {
     unsub;
     zone = inject(NgZone, { optional: true }) ?? undefined;
     resizeObserver;
-    tools = WHITEBOARD_TOOLS;
+    /** mcp-64: im View-Only bleiben nur select/laser. */
+    get tools() { return this.snapshot.config.readOnly ? WHITEBOARD_TOOLS.filter(t => t.id === 'select' || t.id === 'laser') : WHITEBOARD_TOOLS; }
     aligns = WHITEBOARD_ALIGN;
     distributes = WHITEBOARD_DISTRIBUTE;
-    arrowId = `bm-wb-arrow-${wbMarkerSeq++}`;
+    // One instance token worn by every id this board mints: the arrow marker (existing
+    // shape, unchanged) and the shapes (mcp-78).
+    instance = wbMarkerSeq++;
+    arrowId = `bm-wb-arrow-${this.instance}`;
+    uid = `bm-wb-${this.instance}`;
     markerUrl = `url(#${this.arrowId})`;
+    /** The shared id formula — never a per-stack string concat. */
+    shapeDomId(shapeId) { return whiteboardShapeDomId(this.uid, shapeId); }
+    /** aria-activedescendant for the board: the controller publishes the id ONLY while
+     *  that shape is rendered (shapes are culled), so this can never dangle. */
+    activeDescendantDomId() {
+        const id = this.snapshot.activeDescendantId;
+        return id ? this.shapeDomId(id) : null;
+    }
     get ctrl() { return this.ctrlRef; }
     get snapshot() { return this.snapshotSig(); }
     get viewport() { return this.snapshot.viewport; }
@@ -430,13 +508,15 @@ export class WhiteboardComponent {
             this.snapshotSig = sig;
         }
         else {
-            this.binding = createWhiteboardControllerBinding({
+            // bimetal-181: der GETTER ist die Aussage — die Pfeilfunktion liest `this` bei
+            // jedem Callback-Aufruf erneut, statt den Stand von ngOnInit festzunageln.
+            this.binding = createWhiteboardControllerBinding(() => ({
                 store: this.store,
                 canvasId: this.canvasId,
                 config: this.config,
-                onError: (err) => this.onError?.(err),
+                onError: (err) => (this.onError ?? reportUnroutedWhiteboardError)(err),
                 onSelectionChange: this.onSelectionChange,
-            }, this.zone);
+            }), this.zone);
             this.ctrlRef = this.binding.ctrl;
             this.snapshotSig = this.binding.snapshot;
         }
@@ -531,7 +611,9 @@ export class WhiteboardComponent {
     }
     onKeydown(e) {
         this.ctrl.handleKeydown({
-            key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey,
+            key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey, altKey: e.altKey,
+            // isSelfTarget (mcp-78 review R1): the toolbar lives inside this root, so its buttons' keystrokes bubble here. Without this the scene keys swallowed Tab/Enter/Space for every button in the component.
+            isSelfTarget: e.target === e.currentTarget,
             isEditable: isEditableTarget(e.target), preventDefault: () => e.preventDefault(),
         });
     }
@@ -573,103 +655,50 @@ export class WhiteboardComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewportRef = _t.first);
-        } }, hostAttrs: [2, "display", "block", "width", "100%", "height", "100%"], inputs: { controller: "controller", store: "store", canvasId: "canvasId", config: "config", darkMode: "darkMode", dir: "dir", showUndoRedo: "showUndoRedo", onError: "onError", onSelectionChange: "onSelectionChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 51, vars: 50, consts: [["viewportRef", ""], ["role", "application", "tabindex", "0", 1, "bm-wb", 3, "keydown"], [1, "bm-wb__toolbar"], ["type", "button", "class", "bm-wb__btn bm-wb__btn--undo", 3, "disabled", "click", 4, "ngIf"], ["type", "button", "class", "bm-wb__btn bm-wb__btn--redo", 3, "disabled", "click", 4, "ngIf"], ["class", "bm-wb__toolbar-sep", 4, "ngIf"], ["type", "button", 3, "class", "click", 4, "ngFor", "ngForOf"], [1, "bm-wb__toolbar-sep"], ["type", "button", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", 1, "bm-wb__btn", "bm-wb__lock-btn", 3, "click", "disabled"], ["type", "button", "data-action", "group", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", "data-action", "ungroup", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", "data-action", "duplicate", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", "class", "bm-wb__btn", 3, "disabled", "click", 4, "ngFor", "ngForOf"], ["type", "button", 1, "bm-wb__btn", 3, "click"], [1, "bm-wb__toolbar-zoom"], ["data-testid", "wb-viewport", 3, "pointerdown", "ngStyle"], [1, "bm-wb__scene"], ["data-testid", "wb-connectors", 1, "bm-wb__connectors"], ["markerWidth", "8", "markerHeight", "8", "refX", "7", "refY", "4", "orient", "auto"], ["d", "M0,0 L7,4 L0,8 Z", "fill", "context-stroke"], ["class", "bm-wb__connector", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "bm-wb__connector-preview", 4, "ngIf"], ["class", "bm-wb__draw-preview", "data-testid", "wb-draw-preview", 4, "ngIf"], ["class", "bm-wb__guide", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "shape", "selected", "dropTarget", "lockedLabel", "shapePointerDown", "shapeDoubleClick", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "bm-wb__marquee", 3, "left", "top", "width", "height", 4, "ngIf"], ["class", "bm-wb__create-preview", 3, "left", "top", "width", "height", 4, "ngIf"], [3, "view", "resize", "rotate", 4, "ngIf"], ["type", "button", 3, "class", "left", "top", "pointerdown", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "bm-wb__laser-layer", "data-testid", "wb-laser-layer", 4, "ngIf"], [3, "at", "initial", "existing", "resolved", "locale", "commit", "close", 4, "ngIf"], [3, "at", "initial", "existing", "resolved", "locale", "commit", "close", "resolve", "delete", 4, "ngIf"], [3, "style", "locale", "styleInput", 4, "ngIf"], ["class", "bm-wb__toast", "role", "status", 4, "ngIf"], [3, "initial", "locale", "save", "close", "delete", 4, "ngIf"], ["type", "button", 1, "bm-wb__btn", "bm-wb__btn--undo", 3, "click", "disabled"], ["type", "button", 1, "bm-wb__btn", "bm-wb__btn--redo", 3, "click", "disabled"], ["type", "button", 3, "click"], [1, "bm-wb__connector"], [1, "bm-wb__connector-preview"], ["data-testid", "wb-draw-preview", 1, "bm-wb__draw-preview"], [1, "bm-wb__guide"], [3, "shapePointerDown", "shapeDoubleClick", "shape", "selected", "dropTarget", "lockedLabel"], [1, "bm-wb__marquee"], [1, "bm-wb__create-preview"], [3, "resize", "rotate", "view"], ["type", "button", 3, "pointerdown", "click"], ["data-testid", "wb-laser-layer", 1, "bm-wb__laser-layer"], ["class", "bm-wb__laser", "data-testid", "wb-laser", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["data-testid", "wb-laser", 1, "bm-wb__laser"], [3, "commit", "close", "at", "initial", "existing", "resolved", "locale"], [3, "commit", "close", "resolve", "delete", "at", "initial", "existing", "resolved", "locale"], [3, "styleInput", "locale"], ["role", "status", 1, "bm-wb__toast"], [3, "save", "close", "delete", "initial", "locale"]], template: function WhiteboardComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, hostAttrs: [2, "display", "block", "width", "100%", "height", "100%"], inputs: { controller: "controller", store: "store", canvasId: "canvasId", config: "config", darkMode: "darkMode", dir: "dir", showUndoRedo: "showUndoRedo", onError: "onError", onSelectionChange: "onSelectionChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 34, vars: 36, consts: [["viewportRef", ""], ["role", "application", "tabindex", "0", 1, "bm-wb", 3, "keydown"], [1, "bm-wb__toolbar"], ["type", "button", "class", "bm-wb__btn bm-wb__btn--undo", 3, "disabled", "click", 4, "ngIf"], ["type", "button", "class", "bm-wb__btn bm-wb__btn--redo", 3, "disabled", "click", 4, "ngIf"], ["class", "bm-wb__toolbar-sep", 4, "ngIf"], ["type", "button", 3, "class", "click", 4, "ngFor", "ngForOf"], [1, "bm-wb__toolbar-sep"], [4, "ngIf"], ["type", "button", 1, "bm-wb__btn", 3, "click"], [1, "bm-wb__toolbar-zoom"], ["data-testid", "wb-viewport", 3, "pointerdown", "ngStyle"], [1, "bm-wb__scene"], ["data-testid", "wb-connectors", 1, "bm-wb__connectors"], ["markerWidth", "8", "markerHeight", "8", "refX", "7", "refY", "4", "orient", "auto"], ["d", "M0,0 L7,4 L0,8 Z", "fill", "context-stroke"], ["class", "bm-wb__connector", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "bm-wb__connector-preview", 4, "ngIf"], ["class", "bm-wb__draw-preview", "data-testid", "wb-draw-preview", 4, "ngIf"], ["class", "bm-wb__guide", 4, "ngFor", "ngForOf", "ngForTrackBy"], [3, "shape", "selected", "focused", "dropTarget", "lockedLabel", "domId", "ariaLabel", "shapePointerDown", "shapeDoubleClick", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "bm-wb__marquee", 3, "left", "top", "width", "height", 4, "ngIf"], ["class", "bm-wb__create-preview", 3, "left", "top", "width", "height", 4, "ngIf"], [3, "view", "resize", "rotate", 4, "ngIf"], ["type", "button", 3, "class", "left", "top", "pointerdown", "click", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["class", "bm-wb__laser-layer", "data-testid", "wb-laser-layer", 4, "ngIf"], [3, "at", "initial", "existing", "resolved", "locale", "commit", "close", 4, "ngIf"], [3, "at", "identity", "initial", "existing", "resolved", "locale", "commit", "close", "resolve", "delete", 4, "ngIf"], [3, "style", "locale", "styleInput", 4, "ngIf"], [3, "class", 4, "ngIf"], [3, "initial", "locale", "save", "close", "delete", 4, "ngIf"], ["type", "button", 1, "bm-wb__btn", "bm-wb__btn--undo", 3, "click", "disabled"], ["type", "button", 1, "bm-wb__btn", "bm-wb__btn--redo", 3, "click", "disabled"], ["type", "button", 3, "click"], ["type", "button", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", 1, "bm-wb__btn", "bm-wb__lock-btn", 3, "click", "disabled"], ["type", "button", "data-action", "group", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", "data-action", "ungroup", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", "data-action", "duplicate", 1, "bm-wb__btn", 3, "click", "disabled"], ["type", "button", "class", "bm-wb__btn", 3, "disabled", "click", 4, "ngFor", "ngForOf"], [1, "bm-wb__connector"], [1, "bm-wb__connector-preview"], ["data-testid", "wb-draw-preview", 1, "bm-wb__draw-preview"], [1, "bm-wb__guide"], [3, "shapePointerDown", "shapeDoubleClick", "shape", "selected", "focused", "dropTarget", "lockedLabel", "domId", "ariaLabel"], [1, "bm-wb__marquee"], [1, "bm-wb__create-preview"], [3, "resize", "rotate", "view"], ["type", "button", 3, "pointerdown", "click"], ["data-testid", "wb-laser-layer", 1, "bm-wb__laser-layer"], ["class", "bm-wb__laser", "data-testid", "wb-laser", 4, "ngFor", "ngForOf", "ngForTrackBy"], ["data-testid", "wb-laser", 1, "bm-wb__laser"], [3, "commit", "close", "at", "initial", "existing", "resolved", "locale"], [3, "commit", "close", "resolve", "delete", "at", "identity", "initial", "existing", "resolved", "locale"], [3, "styleInput", "locale"], [3, "save", "close", "delete", "initial", "locale"]], template: function WhiteboardComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵlistener("keydown", function WhiteboardComponent_Template_div_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onKeydown($event)); });
             i0.ɵɵelementStart(1, "div", 2);
             i0.ɵɵtemplate(2, WhiteboardComponent_button_2_Template, 2, 3, "button", 3)(3, WhiteboardComponent_button_3_Template, 2, 3, "button", 4)(4, WhiteboardComponent_span_4_Template, 1, 0, "span", 5)(5, WhiteboardComponent_button_5_Template, 2, 6, "button", 6);
             i0.ɵɵelement(6, "span", 7);
-            i0.ɵɵelementStart(7, "button", 8);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBringToFront()); });
-            i0.ɵɵtext(8, "\u2B06");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "button", 8);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSendToBack()); });
-            i0.ɵɵtext(10, "\u2B07");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "button", 9);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToggleLock()); });
-            i0.ɵɵtext(12, "\uD83D\uDD12");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(13, "button", 10);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onGroup()); });
-            i0.ɵɵtext(14, "\u29C9");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(15, "button", 11);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUngroup()); });
-            i0.ɵɵtext(16, "\u229F");
+            i0.ɵɵtemplate(7, WhiteboardComponent_ng_container_7_Template, 19, 16, "ng-container", 8);
+            i0.ɵɵelementStart(8, "button", 9);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onResetViewport()); });
+            i0.ɵɵtext(9, "\u2316");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "button", 12);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDuplicate()); });
-            i0.ɵɵtext(18, "\u29C9\u207A");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "button", 8);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDeleteSelection()); });
-            i0.ɵɵtext(20, "\uD83D\uDDD1");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelement(21, "span", 7);
-            i0.ɵɵtemplate(22, WhiteboardComponent_button_22_Template, 2, 4, "button", 13)(23, WhiteboardComponent_button_23_Template, 2, 4, "button", 13);
-            i0.ɵɵelement(24, "span", 7);
-            i0.ɵɵelementStart(25, "button", 14);
-            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onResetViewport()); });
-            i0.ɵɵtext(26, "\u2316");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "span", 15);
-            i0.ɵɵtext(28);
+            i0.ɵɵelementStart(10, "span", 10);
+            i0.ɵɵtext(11);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(29, "div", 16, 0);
-            i0.ɵɵlistener("pointerdown", function WhiteboardComponent_Template_div_pointerdown_29_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onViewportPointerDown($event)); });
-            i0.ɵɵelementStart(31, "div", 17);
+            i0.ɵɵelementStart(12, "div", 11, 0);
+            i0.ɵɵlistener("pointerdown", function WhiteboardComponent_Template_div_pointerdown_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onViewportPointerDown($event)); });
+            i0.ɵɵelementStart(14, "div", 12);
             i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(32, "svg", 18)(33, "defs")(34, "marker", 19);
-            i0.ɵɵelement(35, "path", 20);
+            i0.ɵɵelementStart(15, "svg", 13)(16, "defs")(17, "marker", 14);
+            i0.ɵɵelement(18, "path", 15);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(36, WhiteboardComponent__svg_path_36_Template, 1, 8, "path", 21)(37, WhiteboardComponent__svg_path_37_Template, 1, 1, "path", 22)(38, WhiteboardComponent__svg_path_38_Template, 1, 1, "path", 23)(39, WhiteboardComponent__svg_line_39_Template, 1, 5, "line", 24);
+            i0.ɵɵtemplate(19, WhiteboardComponent__svg_path_19_Template, 1, 8, "path", 16)(20, WhiteboardComponent__svg_path_20_Template, 1, 1, "path", 17)(21, WhiteboardComponent__svg_path_21_Template, 1, 1, "path", 18)(22, WhiteboardComponent__svg_line_22_Template, 1, 5, "line", 19);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(40, WhiteboardComponent_bm_wb_shape_40_Template, 1, 4, "bm-wb-shape", 25)(41, WhiteboardComponent_div_41_Template, 1, 8, "div", 26)(42, WhiteboardComponent_div_42_Template, 1, 8, "div", 27)(43, WhiteboardComponent_bm_wb_transform_handles_43_Template, 1, 1, "bm-wb-transform-handles", 28)(44, WhiteboardComponent_button_44_Template, 2, 9, "button", 29)(45, WhiteboardComponent__svg_svg_45_Template, 2, 2, "svg", 30);
+            i0.ɵɵtemplate(23, WhiteboardComponent_bm_wb_shape_23_Template, 1, 7, "bm-wb-shape", 20)(24, WhiteboardComponent_div_24_Template, 1, 8, "div", 21)(25, WhiteboardComponent_div_25_Template, 1, 8, "div", 22)(26, WhiteboardComponent_bm_wb_transform_handles_26_Template, 1, 1, "bm-wb-transform-handles", 23)(27, WhiteboardComponent_button_27_Template, 2, 9, "button", 24)(28, WhiteboardComponent__svg_svg_28_Template, 2, 2, "svg", 25);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(46, WhiteboardComponent_bm_wb_comment_thread_46_Template, 1, 5, "bm-wb-comment-thread", 31)(47, WhiteboardComponent_bm_wb_comment_thread_47_Template, 1, 5, "bm-wb-comment-thread", 32);
+            i0.ɵɵtemplate(29, WhiteboardComponent_bm_wb_comment_thread_29_Template, 1, 5, "bm-wb-comment-thread", 26)(30, WhiteboardComponent_bm_wb_comment_thread_30_Template, 1, 6, "bm-wb-comment-thread", 27);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(48, WhiteboardComponent_bm_wb_style_panel_48_Template, 1, 3, "bm-wb-style-panel", 33)(49, WhiteboardComponent_div_49_Template, 3, 1, "div", 34)(50, WhiteboardComponent_bm_wb_text_dialog_50_Template, 1, 2, "bm-wb-text-dialog", 35);
+            i0.ɵɵtemplate(31, WhiteboardComponent_bm_wb_style_panel_31_Template, 1, 3, "bm-wb-style-panel", 28)(32, WhiteboardComponent_div_32_Template, 3, 4, "div", 29)(33, WhiteboardComponent_bm_wb_text_dialog_33_Template, 1, 2, "bm-wb-text-dialog", 30);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             let tmp_2_0;
-            i0.ɵɵattribute("data-theme", ctx.darkMode ? "dark" : null)("dir", (tmp_2_0 = ctx.dir) !== null && tmp_2_0 !== undefined ? tmp_2_0 : null)("aria-label", ctx.snapshot.ariaLabel);
+            i0.ɵɵattribute("data-theme", ctx.darkMode ? "dark" : null)("dir", (tmp_2_0 = ctx.dir) !== null && tmp_2_0 !== undefined ? tmp_2_0 : null)("aria-label", ctx.snapshot.ariaLabel)("aria-activedescendant", ctx.activeDescendantDomId());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.showUndoRedo);
+            i0.ɵɵproperty("ngIf", ctx.showUndoRedo && !ctx.snapshot.config.readOnly);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showUndoRedo);
+            i0.ɵɵproperty("ngIf", ctx.showUndoRedo && !ctx.snapshot.config.readOnly);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showUndoRedo);
+            i0.ɵɵproperty("ngIf", ctx.showUndoRedo && !ctx.snapshot.config.readOnly);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.tools);
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.hasSel);
-            i0.ɵɵattribute("title", ctx.locale.bringToFront);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.hasSel);
-            i0.ɵɵattribute("title", ctx.locale.sendToBack);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.hasSel);
-            i0.ɵɵattribute("title", ctx.locale.lock);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.canGroup);
-            i0.ɵɵattribute("title", ctx.locale.group);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.canUngroup);
-            i0.ɵɵattribute("title", ctx.locale.ungroup);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.hasSel);
-            i0.ɵɵattribute("title", ctx.locale.duplicate);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("disabled", !ctx.hasSel);
-            i0.ɵɵattribute("title", ctx.locale.delete);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngForOf", ctx.aligns);
+            i0.ɵɵproperty("ngIf", !ctx.snapshot.config.readOnly);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.distributes);
-            i0.ɵɵadvance(2);
             i0.ɵɵattribute("title", ctx.locale.resetZoom);
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate1("", ctx.zoomPct, "%");
@@ -705,7 +734,7 @@ export class WhiteboardComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.openThread);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.panelStyle);
+            i0.ɵɵproperty("ngIf", !ctx.snapshot.config.readOnly && ctx.panelStyle);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.undo);
             i0.ɵɵadvance();
@@ -729,11 +758,12 @@ export class WhiteboardComponent {
                 ],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
-    <div class="bm-wb" [attr.data-theme]="darkMode ? 'dark' : null" [attr.dir]="dir ?? null" role="application" [attr.aria-label]="snapshot.ariaLabel" tabindex="0" (keydown)="onKeydown($event)">
+    <div class="bm-wb" [attr.data-theme]="darkMode ? 'dark' : null" [attr.dir]="dir ?? null" role="application" [attr.aria-label]="snapshot.ariaLabel" tabindex="0"
+      [attr.aria-activedescendant]="activeDescendantDomId()" (keydown)="onKeydown($event)">
       <div class="bm-wb__toolbar">
-        <button *ngIf="showUndoRedo" type="button" class="bm-wb__btn bm-wb__btn--undo" [attr.aria-label]="locale.undo" [attr.title]="locale.undo" [disabled]="!snapshot.canUndo" (click)="onUndo()">↶</button>
-        <button *ngIf="showUndoRedo" type="button" class="bm-wb__btn bm-wb__btn--redo" [attr.aria-label]="locale.redo" [attr.title]="locale.redo" [disabled]="!snapshot.canRedo" (click)="onRedo()">↷</button>
-        <span *ngIf="showUndoRedo" class="bm-wb__toolbar-sep"></span>
+        <button *ngIf="showUndoRedo && !snapshot.config.readOnly" type="button" class="bm-wb__btn bm-wb__btn--undo" [attr.aria-label]="locale.undo" [attr.title]="locale.undo" [disabled]="!snapshot.canUndo" (click)="onUndo()">↶</button>
+        <button *ngIf="showUndoRedo && !snapshot.config.readOnly" type="button" class="bm-wb__btn bm-wb__btn--redo" [attr.aria-label]="locale.redo" [attr.title]="locale.redo" [disabled]="!snapshot.canRedo" (click)="onRedo()">↷</button>
+        <span *ngIf="showUndoRedo && !snapshot.config.readOnly" class="bm-wb__toolbar-sep"></span>
         <button
           *ngFor="let t of tools"
           type="button"
@@ -743,6 +773,8 @@ export class WhiteboardComponent {
           [attr.data-tool]="t.id"
           (click)="onTool(t.id)">{{ t.glyph }}</button>
         <span class="bm-wb__toolbar-sep"></span>
+        <!-- mcp-64: Mutations-Cluster fällt im View-Only-Modus. -->
+        <ng-container *ngIf="!snapshot.config.readOnly">
         <button type="button" class="bm-wb__btn" [attr.title]="locale.bringToFront" [disabled]="!hasSel" (click)="onBringToFront()">⬆</button>
         <button type="button" class="bm-wb__btn" [attr.title]="locale.sendToBack" [disabled]="!hasSel" (click)="onSendToBack()">⬇</button>
         <button type="button" class="bm-wb__btn bm-wb__lock-btn" [attr.title]="locale.lock" [disabled]="!hasSel" (click)="onToggleLock()">🔒</button>
@@ -768,6 +800,7 @@ export class WhiteboardComponent {
           [disabled]="!canDistribute"
           (click)="onDistribute(d.axis)">{{ d.glyph }}</button>
         <span class="bm-wb__toolbar-sep"></span>
+        </ng-container>
         <button type="button" class="bm-wb__btn" [attr.title]="locale.resetZoom" (click)="onResetViewport()">⌖</button>
         <span class="bm-wb__toolbar-zoom">{{ zoomPct }}%</span>
       </div>
@@ -809,8 +842,11 @@ export class WhiteboardComponent {
             *ngFor="let v of snapshot.shapes; trackBy: trackShape"
             [shape]="v.shape"
             [selected]="v.selected"
+            [focused]="v.focused"
             [dropTarget]="snapshot.dropTargetId === v.shape.id"
             [lockedLabel]="locale.locked"
+            [domId]="shapeDomId(v.shape.id)"
+            [ariaLabel]="v.ariaLabel"
             (shapePointerDown)="onShapeDown(v.shape.id, $event)"
             (shapeDoubleClick)="onShapeDblClick(v.shape.id, $event)"></bm-wb-shape>
 
@@ -858,6 +894,7 @@ export class WhiteboardComponent {
         <bm-wb-comment-thread
           *ngIf="openThread as ot"
           [at]="ot.at"
+          [identity]="ot.id"
           [initial]="ot.text"
           [existing]="true"
           [resolved]="ot.resolved"
@@ -868,15 +905,16 @@ export class WhiteboardComponent {
           (delete)="onDeleteThread(ot.id)"></bm-wb-comment-thread>
       </div>
 
+      <!-- mcp-64 R1 (Review F7): das Stil-Panel ist eine reine Mutations-Fläche — im View-Only fällt es ganz. -->
       <bm-wb-style-panel
-        *ngIf="panelStyle as ps"
+        *ngIf="!snapshot.config.readOnly && panelStyle as ps"
         [style]="ps"
         [locale]="locale"
         (styleInput)="onStyleInput($event)"></bm-wb-style-panel>
 
       <!-- Feedback-only now (ticket-15): the undo/redo affordance moved to the persistent
            toolbar buttons; the toast just narrates the last outcome. -->
-      <div *ngIf="undo as u" class="bm-wb__toast" role="status">
+      <div *ngIf="undo as u" [class]="'bm-wb__toast' + (u.kind === 'error' ? ' bm-wb__toast--error' : '')" [attr.role]="u.kind === 'error' ? 'alert' : 'status'">
         <span>{{ u.description }}</span>
       </div>
 
@@ -914,5 +952,5 @@ export class WhiteboardComponent {
             type: ViewChild,
             args: ['viewportRef']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WhiteboardComponent, { className: "WhiteboardComponent", filePath: "components/whiteboard.ts", lineNumber: 233 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WhiteboardComponent, { className: "WhiteboardComponent", filePath: "components/whiteboard.ts", lineNumber: 243 }); })();
 //# sourceMappingURL=Whiteboard.js.map