@bimetal/whiteboard-angular-components 0.29.0

package/dist/components/Whiteboard.js

@@ -0,0 +1,845 @@
+import { Component, Input, ViewChild, ElementRef, ChangeDetectionStrategy, NgZone, inject, } 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 { createWhiteboardControllerBinding } from '@bimetal/angular';
+import { WhiteboardShapeComponent } from './WhiteboardShape.js';
+import { TransformHandlesComponent } from './TransformHandles.js';
+import { StylePanelComponent } from './StylePanel.js';
+import { CommentThreadComponent } from './CommentThread.js';
+import { TextDialogComponent } from './TextDialog.js';
+import * as i0 from "@angular/core";
+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", 33);
+    i0.ɵɵlistener("click", function WhiteboardComponent_button_2_Template_button_click_0_listener() { const t_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onTool(t_r3.id)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const t_r3 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r3.toolClass(t_r3.id));
+    i0.ɵɵattribute("title", ctx_r3.locale.tools[t_r3.id])("aria-pressed", ctx_r3.activeTool === t_r3.id)("data-tool", t_r3.id);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(t_r3.glyph);
+} }
+function WhiteboardComponent_button_19_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵlistener("click", function WhiteboardComponent_button_19_Template_button_click_0_listener() { const a_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onAlign(a_r6.edge)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const a_r6 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", !ctx_r3.canAlign);
+    i0.ɵɵattribute("title", ctx_r3.locale.alignLabels[a_r6.edge])("data-align", a_r6.edge);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(a_r6.glyph);
+} }
+function WhiteboardComponent_button_20_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 5);
+    i0.ɵɵlistener("click", function WhiteboardComponent_button_20_Template_button_click_0_listener() { const d_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onDistribute(d_r8.axis)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const d_r8 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", !ctx_r3.canDistribute);
+    i0.ɵɵattribute("title", ctx_r3.locale.distributeLabels[d_r8.axis])("data-distribute", d_r8.axis);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(d_r8.glyph);
+} }
+function WhiteboardComponent__svg_path_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 34);
+} if (rf & 2) {
+    const c_r9 = ctx.$implicit;
+    i0.ɵɵattribute("data-connector-id", c_r9.id)("d", c_r9.d)("stroke", c_r9.stroke)("stroke-width", c_r9.strokeWidth)("stroke-dasharray", c_r9.dash)("opacity", c_r9.opacity)("marker-end", c_r9.markerEnd)("marker-start", c_r9.markerStart);
+} }
+function WhiteboardComponent__svg_path_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 35);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("d", ctx_r3.connectorPreviewD);
+} }
+function WhiteboardComponent__svg_path_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 36);
+} if (rf & 2) {
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵattribute("d", ctx_r3.drawPreviewPath);
+} }
+function WhiteboardComponent__svg_line_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "line", 37);
+} if (rf & 2) {
+    const g_r10 = ctx.$implicit;
+    i0.ɵɵattribute("data-guide-axis", g_r10.axis)("x1", g_r10.x1)("y1", g_r10.y1)("x2", g_r10.x2)("y2", g_r10.y2);
+} }
+function WhiteboardComponent_bm_wb_shape_37_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-shape", 38);
+    i0.ɵɵlistener("shapePointerDown", function WhiteboardComponent_bm_wb_shape_37_Template_bm_wb_shape_shapePointerDown_0_listener($event) { const v_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onShapeDown(v_r12.shape.id, $event)); })("shapeDoubleClick", function WhiteboardComponent_bm_wb_shape_37_Template_bm_wb_shape_shapeDoubleClick_0_listener($event) { const v_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onShapeDblClick(v_r12.shape.id, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const v_r12 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("view", v_r12)("dropTarget", ctx_r3.snapshot.dropTargetId === v_r12.shape.id);
+} }
+function WhiteboardComponent_div_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 39);
+} if (rf & 2) {
+    const mq_r13 = ctx.ngIf;
+    i0.ɵɵstyleProp("left", mq_r13.x, "px")("top", mq_r13.y, "px")("width", mq_r13.width, "px")("height", mq_r13.height, "px");
+} }
+function WhiteboardComponent_div_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "div", 40);
+} if (rf & 2) {
+    const cp_r14 = ctx.ngIf;
+    i0.ɵɵstyleProp("left", cp_r14.x, "px")("top", cp_r14.y, "px")("width", cp_r14.width, "px")("height", cp_r14.height, "px");
+} }
+function WhiteboardComponent_bm_wb_transform_handles_40_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-transform-handles", 41);
+    i0.ɵɵlistener("resize", function WhiteboardComponent_bm_wb_transform_handles_40_Template_bm_wb_transform_handles_resize_0_listener($event) { const tv_r16 = i0.ɵɵrestoreView(_r15).ngIf; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onResizeIntent(tv_r16.shape.id, $event)); })("rotate", function WhiteboardComponent_bm_wb_transform_handles_40_Template_bm_wb_transform_handles_rotate_0_listener($event) { const tv_r16 = i0.ɵɵrestoreView(_r15).ngIf; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onRotate(tv_r16.shape.id, $event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const tv_r16 = ctx.ngIf;
+    i0.ɵɵproperty("view", tv_r16);
+} }
+function WhiteboardComponent_button_41_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("pointerdown", function WhiteboardComponent_button_41_Template_button_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.stop($event)); })("click", function WhiteboardComponent_button_41_Template_button_click_0_listener($event) { const p_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onPinClick(p_r18.id, $event)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const p_r18 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r3.pinClass(p_r18));
+    i0.ɵɵstyleProp("left", p_r18.x, "px")("top", p_r18.y, "px");
+    i0.ɵɵattribute("data-comment-id", p_r18.id)("title", p_r18.text);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(p_r18.glyph);
+} }
+function WhiteboardComponent__svg_svg_42__svg_line_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "line", 45);
+} if (rf & 2) {
+    const seg_r19 = ctx.$implicit;
+    i0.ɵɵattribute("x1", seg_r19.x1)("y1", seg_r19.y1)("x2", seg_r19.x2)("y2", seg_r19.y2)("stroke-opacity", seg_r19.opacity);
+} }
+function WhiteboardComponent__svg_svg_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "svg", 43);
+    i0.ɵɵtemplate(1, WhiteboardComponent__svg_svg_42__svg_line_1_Template, 1, 5, "line", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ls_r20 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ls_r20)("ngForTrackBy", ctx_r3.trackIndex);
+} }
+function WhiteboardComponent_bm_wb_comment_thread_43_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-comment-thread", 46);
+    i0.ɵɵlistener("commit", function WhiteboardComponent_bm_wb_comment_thread_43_Template_bm_wb_comment_thread_commit_0_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCommitDraft($event)); })("close", function WhiteboardComponent_bm_wb_comment_thread_43_Template_bm_wb_comment_thread_close_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCancelDraft()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const at_r22 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("at", at_r22)("initial", "")("existing", false)("resolved", false)("locale", ctx_r3.locale);
+} }
+function WhiteboardComponent_bm_wb_comment_thread_44_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-comment-thread", 47);
+    i0.ɵɵlistener("commit", function WhiteboardComponent_bm_wb_comment_thread_44_Template_bm_wb_comment_thread_commit_0_listener($event) { const ot_r24 = i0.ɵɵrestoreView(_r23).ngIf; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCommitThread(ot_r24.id, $event)); })("close", function WhiteboardComponent_bm_wb_comment_thread_44_Template_bm_wb_comment_thread_close_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCloseThread()); })("resolve", function WhiteboardComponent_bm_wb_comment_thread_44_Template_bm_wb_comment_thread_resolve_0_listener() { const ot_r24 = i0.ɵɵrestoreView(_r23).ngIf; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onResolveThread(ot_r24.id)); })("delete", function WhiteboardComponent_bm_wb_comment_thread_44_Template_bm_wb_comment_thread_delete_0_listener() { const ot_r24 = i0.ɵɵrestoreView(_r23).ngIf; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onDeleteThread(ot_r24.id)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ot_r24 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("at", ot_r24.at)("initial", ot_r24.text)("existing", true)("resolved", ot_r24.resolved)("locale", ctx_r3.locale);
+} }
+function WhiteboardComponent_bm_wb_style_panel_45_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-style-panel", 48);
+    i0.ɵɵlistener("styleInput", function WhiteboardComponent_bm_wb_style_panel_45_Template_bm_wb_style_panel_styleInput_0_listener($event) { i0.ɵɵrestoreView(_r25); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onStyleInput($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ps_r26 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵstyleMap(ps_r26);
+    i0.ɵɵproperty("locale", ctx_r3.locale);
+} }
+function WhiteboardComponent_div_46_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 49)(1, "span");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "button", 50);
+    i0.ɵɵlistener("click", function WhiteboardComponent_div_46_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r27); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onUndo()); });
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const u_r28 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(u_r28.description);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r3.locale.undo);
+} }
+function WhiteboardComponent_bm_wb_text_dialog_47_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "bm-wb-text-dialog", 51);
+    i0.ɵɵlistener("save", function WhiteboardComponent_bm_wb_text_dialog_47_Template_bm_wb_text_dialog_save_0_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSaveShape($event)); })("close", function WhiteboardComponent_bm_wb_text_dialog_47_Template_bm_wb_text_dialog_close_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCloseDialog()); })("delete", function WhiteboardComponent_bm_wb_text_dialog_47_Template_bm_wb_text_dialog_delete_0_listener() { const ds_r30 = i0.ɵɵrestoreView(_r29).ngIf; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onDeleteShape(ds_r30.id)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ds_r30 = ctx.ngIf;
+    const ctx_r3 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("initial", ds_r30.text)("locale", ctx_r3.locale);
+} }
+/** Per-instance SVG marker id counter — document-global ids would collide across
+ *  two mounted boards and `url(#…)` would resolve to the wrong marker. */
+let wbMarkerSeq = 0;
+const mod = (n, m) => ((n % m) + m) % m;
+function isEditableTarget(t) {
+    const el = t;
+    if (!el || !el.tagName)
+        return false;
+    return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable === true;
+}
+/**
+ * The Angular whiteboard — a thin, standalone-component binding over the canonical
+ * `@bimetal/whiteboard-headless` controller. Owns DOM only: it converts
+ * `clientX/Y → boardPoint` through the controller's viewport (`screenToBoard` —
+ * the binding's ONE piece of geometry), wires window pointer + wheel events, and
+ * renders the snapshot. Every interaction decision (tool FSM, create/drag/marquee,
+ * pan/zoom math, input policy) lives in the controller. 1:1 with the React
+ * reference.
+ */
+export class WhiteboardComponent {
+    store;
+    canvasId;
+    config;
+    darkMode = false;
+    /** Surfaces infrastructure errors (a domain rejection is an undo toast). */
+    onError;
+    viewportRef;
+    binding;
+    zone = inject(NgZone, { optional: true }) ?? undefined;
+    tools = WHITEBOARD_TOOLS;
+    aligns = WHITEBOARD_ALIGN;
+    distributes = WHITEBOARD_DISTRIBUTE;
+    arrowId = `bm-wb-arrow-${wbMarkerSeq++}`;
+    markerUrl = `url(#${this.arrowId})`;
+    get ctrl() { return this.binding.ctrl; }
+    get snapshot() { return this.binding.snapshot(); }
+    get viewport() { return this.snapshot.viewport; }
+    get activeTool() { return this.snapshot.activeTool; }
+    get cfg() { return this.snapshot.config; }
+    get locale() { return this.cfg.locale; }
+    get zoomPct() { return Math.round(this.viewport.scale * 100); }
+    get viewportClass() {
+        return 'bm-wb__viewport' + (this.activeTool !== 'select' ? ' bm-wb__viewport--tool' : '');
+    }
+    get sceneTransform() {
+        const v = this.viewport;
+        return `translate(${v.offsetX}px, ${v.offsetY}px) scale(${v.scale})`;
+    }
+    get viewportVars() {
+        const v = this.viewport;
+        const gridPx = this.cfg.gridSize * v.scale;
+        return {
+            '--bmw-grid-px': `${gridPx}px`,
+            '--bmw-grid-x': `${mod(v.offsetX, gridPx)}px`,
+            '--bmw-grid-y': `${mod(v.offsetY, gridPx)}px`,
+        };
+    }
+    // ── Selection-derived toolbar state ──
+    get selectedViews() { return this.snapshot.shapes.filter((v) => v.selected); }
+    get hasSel() { return this.snapshot.selection.length > 0; }
+    get canAlign() { return this.snapshot.selection.length >= 2; } // controller no-ops below 2
+    get canDistribute() { return this.snapshot.selection.length >= 3; } // controller no-ops below 3
+    get canGroup() { return this.snapshot.selection.length >= 2; } // group needs ≥2
+    get canUngroup() { return this.selectedViews.some((v) => v.shape.kind === 'frame' || v.shape.kind === 'group'); }
+    // A group's box is derived from its children — not directly resizable/rotatable.
+    get transformView() {
+        // The controller decides WHICH shape (if any) shows handles via transformHandleId.
+        const id = this.snapshot.transformHandleId;
+        return id ? this.snapshot.shapes.find(v => v.shape.id === id) ?? null : null;
+    }
+    // Guard on the resolved VIEWS, not the raw selection length: a delete/ungroup
+    // transiently leaves `selection` pointing at an already-removed shape.
+    get panelStyle() {
+        const sel = this.selectedViews;
+        return sel.length > 0 ? sel[0].shape.style : null;
+    }
+    get undo() { return this.snapshot.lastAction; }
+    get dialogShape() {
+        const d = this.snapshot.dialog;
+        return d ? { id: d.shape.id, text: d.shape.text } : null;
+    }
+    // ── Connectors / previews / guides (geometry ONLY from headless helpers) ──
+    get connectorViews() {
+        const out = [];
+        for (const c of this.snapshot.connectors) {
+            const d = whiteboardConnectorPath(this.snapshot, c);
+            if (!d)
+                continue;
+            out.push({
+                id: c.id, d, stroke: c.style.stroke, strokeWidth: c.style.strokeWidth,
+                dash: whiteboardDashArray(c.style.dash), opacity: c.style.opacity,
+                markerEnd: c.style.arrowEnd ? this.markerUrl : null,
+                markerStart: c.style.arrowStart ? this.markerUrl : null,
+            });
+        }
+        return out;
+    }
+    get connectorPreviewD() {
+        const p = this.snapshot.connectorPreview;
+        return p ? `M ${p.from.x} ${p.from.y} L ${p.to.x} ${p.to.y}` : null;
+    }
+    get drawPreviewPath() {
+        const dp = this.snapshot.drawPreview;
+        return dp && dp.length > 1 ? whiteboardDrawPath(dp) : null;
+    }
+    get guideLines() {
+        return this.snapshot.guides.map((g) => ({
+            axis: g.axis,
+            x1: g.axis === 'x' ? g.pos : g.start,
+            y1: g.axis === 'x' ? g.start : g.pos,
+            x2: g.axis === 'x' ? g.pos : g.end,
+            y2: g.axis === 'x' ? g.end : g.pos,
+        }));
+    }
+    get commentPins() {
+        const out = [];
+        for (const c of this.snapshot.comments) {
+            const at = whiteboardCommentAnchor(this.snapshot, c);
+            if (!at)
+                continue;
+            out.push({ id: c.id, x: at.x, y: at.y, resolved: c.resolved, text: c.text, glyph: c.resolved ? '✓' : '💬' });
+        }
+        return out;
+    }
+    // Laser is a presentation pointer — painted ABOVE every shape via its own top SVG
+    // (rendered LAST in the scene). null when there is no live trail.
+    get laserSegments() {
+        const laser = this.snapshot.laser;
+        if (!laser || laser.length <= 1)
+            return null;
+        const out = [];
+        for (let i = 1; i < laser.length; i++) {
+            out.push({
+                x1: laser[i - 1].x, y1: laser[i - 1].y, x2: laser[i].x, y2: laser[i].y,
+                opacity: i / laser.length, // faint tail → bright head
+            });
+        }
+        return out;
+    }
+    // ── Comment editors (SCREEN space via boardToScreen) ──
+    get draftAt() {
+        const d = this.snapshot.commentDraft;
+        return d ? boardToScreen(this.viewport, d) : null;
+    }
+    get openThread() {
+        const id = this.snapshot.openCommentId;
+        if (!id)
+            return null;
+        const c = this.snapshot.comments.find((x) => x.id === id);
+        if (!c)
+            return null;
+        const at = whiteboardCommentAnchor(this.snapshot, c);
+        if (!at)
+            return null;
+        return { id: c.id, at: boardToScreen(this.viewport, at), text: c.text, resolved: c.resolved };
+    }
+    toolClass(id) {
+        return 'bm-wb__tool' + (this.activeTool === id ? ' bm-wb__tool--active' : '');
+    }
+    pinClass(p) {
+        return 'bm-wb__comment-pin' + (p.resolved ? ' bm-wb__comment-pin--resolved' : '');
+    }
+    // ── clientX/Y → board point via the live viewport rect + camera ──
+    boardOf(clientX, clientY) {
+        const rect = this.viewportRef?.nativeElement.getBoundingClientRect();
+        const screen = { x: clientX - (rect?.left ?? 0), y: clientY - (rect?.top ?? 0) };
+        return screenToBoard(this.ctrl.getSnapshot().viewport, screen);
+    }
+    // Window pointer move/up/cancel feed the active gesture (pointerId-guarded in the
+    // controller). Wheel is a native non-passive listener so zoom can preventDefault.
+    onMove = (e) => {
+        const el = document.elementFromPoint(e.clientX, e.clientY);
+        const over = el?.closest('.bm-wb__shape')?.dataset['shapeId'] ?? null;
+        this.ctrl.pointerMove(this.boardOf(e.clientX, e.clientY), e.pointerId, over);
+    };
+    onUp = (e) => this.ctrl.pointerUp(e.pointerId);
+    onCancel = (e) => this.ctrl.pointerCancel(e.pointerId);
+    onWheel = (e) => {
+        e.preventDefault();
+        const vp = this.viewportRef?.nativeElement;
+        if (!vp)
+            return;
+        if (e.ctrlKey || e.metaKey) {
+            const rect = vp.getBoundingClientRect();
+            this.ctrl.zoomBy(e.deltaY < 0 ? 1.1 : 0.9, { x: e.clientX - rect.left, y: e.clientY - rect.top });
+        }
+        else {
+            this.ctrl.panBy(-e.deltaX, -e.deltaY);
+        }
+    };
+    ngOnInit() {
+        this.binding = createWhiteboardControllerBinding({
+            store: this.store,
+            canvasId: this.canvasId,
+            config: this.config,
+            onError: (err) => this.onError?.(err),
+        }, this.zone);
+        if (typeof window !== 'undefined') {
+            window.addEventListener('pointermove', this.onMove);
+            window.addEventListener('pointerup', this.onUp);
+            window.addEventListener('pointercancel', this.onCancel);
+        }
+    }
+    ngAfterViewInit() {
+        this.viewportRef?.nativeElement.addEventListener('wheel', this.onWheel, { passive: false });
+    }
+    ngOnChanges(changes) {
+        if (!this.binding)
+            return; // before ngOnInit
+        if (changes['config'] && !changes['config'].firstChange) {
+            this.ctrl.setConfig(this.config);
+        }
+    }
+    ngOnDestroy() {
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('pointermove', this.onMove);
+            window.removeEventListener('pointerup', this.onUp);
+            window.removeEventListener('pointercancel', this.onCancel);
+        }
+        this.viewportRef?.nativeElement.removeEventListener('wheel', this.onWheel);
+        this.binding?.destroy();
+    }
+    // ── Pointer entry points (read the live snapshot for the armed tool) ──
+    onViewportPointerDown(e) {
+        if (e.button !== 0)
+            return;
+        const board = this.boardOf(e.clientX, e.clientY);
+        const tool = this.activeTool;
+        if (tool === 'connector')
+            this.ctrl.beginConnector(null, board, e.pointerId);
+        else if (tool === 'draw')
+            this.ctrl.beginDraw(board, e.pointerId);
+        else if (tool === 'laser')
+            this.ctrl.beginLaser(board, e.pointerId);
+        else if (tool === 'comment')
+            this.ctrl.beginComment(board, null);
+        else if (tool !== 'select')
+            this.ctrl.beginCreate(board, e.pointerId);
+        else
+            this.ctrl.beginMarquee(board, e.shiftKey, e.pointerId); // shapes stopPropagation, so this is empty canvas
+    }
+    onShapeDown(shapeId, e) {
+        if (e.button !== 0)
+            return; // primary button only
+        const tool = this.activeTool;
+        if (tool === 'connector') {
+            e.stopPropagation();
+            this.ctrl.beginConnector(shapeId, this.boardOf(e.clientX, e.clientY), e.pointerId);
+            return;
+        }
+        if (tool === 'comment') {
+            e.stopPropagation();
+            this.ctrl.beginComment(this.boardOf(e.clientX, e.clientY), shapeId);
+            return;
+        }
+        if (tool !== 'select')
+            return; // a shape tool is armed → bubble to the viewport's create
+        e.stopPropagation();
+        this.ctrl.beginShapeDrag(shapeId, this.boardOf(e.clientX, e.clientY), e.shiftKey, e.pointerId);
+    }
+    onShapeDblClick(shapeId, e) {
+        e.stopPropagation();
+        this.ctrl.openEdit(shapeId, e.currentTarget.getBoundingClientRect());
+    }
+    onResizeIntent(shapeId, intent) {
+        if (intent.event.button !== 0)
+            return;
+        intent.event.stopPropagation();
+        this.ctrl.beginResize(shapeId, this.boardOf(intent.event.clientX, intent.event.clientY), intent.event.pointerId, intent.handle);
+    }
+    onRotate(shapeId, e) {
+        if (e.button !== 0)
+            return;
+        e.stopPropagation();
+        this.ctrl.beginRotate(shapeId, this.boardOf(e.clientX, e.clientY), e.pointerId);
+    }
+    onKeydown(e) {
+        this.ctrl.handleKeydown({
+            key: e.key, ctrlKey: e.ctrlKey, metaKey: e.metaKey, shiftKey: e.shiftKey,
+            isEditable: isEditableTarget(e.target), preventDefault: () => e.preventDefault(),
+        });
+    }
+    // ── Thin toolbar/action methods (no arrow functions in the template) ──
+    onTool(id) { this.ctrl.setTool(id); }
+    onBringToFront() { this.ctrl.voidBringToFront(); }
+    onSendToBack() { this.ctrl.voidSendToBack(); }
+    onToggleLock() { this.ctrl.voidToggleLock(); }
+    onGroup() { this.ctrl.voidGroup(); }
+    onUngroup() { this.ctrl.voidUngroup(); }
+    onDuplicate() { this.ctrl.voidDuplicate(); }
+    onDeleteSelection() { this.ctrl.voidDeleteSelection(); }
+    onAlign(edge) { this.ctrl.voidAlignSelection(edge); }
+    onDistribute(axis) { this.ctrl.voidDistributeSelection(axis); }
+    onResetViewport() { this.ctrl.resetViewport(); }
+    onUndo() { this.ctrl.voidUndo(); }
+    onStyleInput(raw) { this.ctrl.voidSetSelectionStyleFromInput(raw); }
+    // ── Comments ──
+    onPinClick(id, e) { e.stopPropagation(); this.ctrl.openCommentThread(id); }
+    onCommitDraft(text) { this.ctrl.voidCommitComment(text); }
+    onCancelDraft() { this.ctrl.cancelComment(); }
+    onCloseThread() { this.ctrl.closeCommentThread(); }
+    onCommitThread(id, text) { this.ctrl.voidSetCommentText(id, text); this.ctrl.closeCommentThread(); }
+    onResolveThread(id) { this.ctrl.voidToggleCommentResolved(id); }
+    onDeleteThread(id) { this.ctrl.voidRemoveComment(id); }
+    // ── Text dialog ──
+    onSaveShape(text) { this.ctrl.voidSaveShape({ text }); }
+    onCloseDialog() { this.ctrl.closeDialog(); }
+    onDeleteShape(id) { this.ctrl.voidDeleteShape(id); }
+    stop(e) { e.stopPropagation(); }
+    trackShape(_i, v) { return v.shape.id; }
+    trackConnector(_i, c) { return c.id; }
+    trackPin(_i, p) { return p.id; }
+    trackIndex(i) { return i; }
+    static ɵfac = function WhiteboardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WhiteboardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WhiteboardComponent, selectors: [["bm-whiteboard"]], viewQuery: function WhiteboardComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.viewportRef = _t.first);
+        } }, hostAttrs: [2, "display", "block", "width", "100%", "height", "100%"], inputs: { store: "store", canvasId: "canvasId", config: "config", darkMode: "darkMode", onError: "onError" }, features: [i0.ɵɵNgOnChangesFeature], decls: 48, vars: 46, consts: [["viewportRef", ""], ["role", "application", "tabindex", "0", 1, "bm-wb", 3, "keydown"], [1, "bm-wb__toolbar"], ["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, "view", "dropTarget", "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", 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", "view", "dropTarget"], [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"], ["type", "button", 1, "bm-wb__toast-btn", 3, "click"], [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, 6, "button", 3);
+            i0.ɵɵelement(3, "span", 4);
+            i0.ɵɵelementStart(4, "button", 5);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBringToFront()); });
+            i0.ɵɵtext(5, "\u2B06");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSendToBack()); });
+            i0.ɵɵtext(7, "\u2B07");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "button", 6);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onToggleLock()); });
+            i0.ɵɵtext(9, "\uD83D\uDD12");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "button", 7);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onGroup()); });
+            i0.ɵɵtext(11, "\u29C9");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "button", 8);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onUngroup()); });
+            i0.ɵɵtext(13, "\u229F");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(14, "button", 9);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDuplicate()); });
+            i0.ɵɵtext(15, "\u29C9\u207A");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "button", 5);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDeleteSelection()); });
+            i0.ɵɵtext(17, "\uD83D\uDDD1");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(18, "span", 4);
+            i0.ɵɵtemplate(19, WhiteboardComponent_button_19_Template, 2, 4, "button", 10)(20, WhiteboardComponent_button_20_Template, 2, 4, "button", 10);
+            i0.ɵɵelement(21, "span", 4);
+            i0.ɵɵelementStart(22, "button", 11);
+            i0.ɵɵlistener("click", function WhiteboardComponent_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onResetViewport()); });
+            i0.ɵɵtext(23, "\u2316");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(24, "span", 12);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(26, "div", 13, 0);
+            i0.ɵɵlistener("pointerdown", function WhiteboardComponent_Template_div_pointerdown_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onViewportPointerDown($event)); });
+            i0.ɵɵelementStart(28, "div", 14);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(29, "svg", 15)(30, "defs")(31, "marker", 16);
+            i0.ɵɵelement(32, "path", 17);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(33, WhiteboardComponent__svg_path_33_Template, 1, 8, "path", 18)(34, WhiteboardComponent__svg_path_34_Template, 1, 1, "path", 19)(35, WhiteboardComponent__svg_path_35_Template, 1, 1, "path", 20)(36, WhiteboardComponent__svg_line_36_Template, 1, 5, "line", 21);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(37, WhiteboardComponent_bm_wb_shape_37_Template, 1, 2, "bm-wb-shape", 22)(38, WhiteboardComponent_div_38_Template, 1, 8, "div", 23)(39, WhiteboardComponent_div_39_Template, 1, 8, "div", 24)(40, WhiteboardComponent_bm_wb_transform_handles_40_Template, 1, 1, "bm-wb-transform-handles", 25)(41, WhiteboardComponent_button_41_Template, 2, 9, "button", 26)(42, WhiteboardComponent__svg_svg_42_Template, 2, 2, "svg", 27);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(43, WhiteboardComponent_bm_wb_comment_thread_43_Template, 1, 5, "bm-wb-comment-thread", 28)(44, WhiteboardComponent_bm_wb_comment_thread_44_Template, 1, 5, "bm-wb-comment-thread", 29);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(45, WhiteboardComponent_bm_wb_style_panel_45_Template, 1, 3, "bm-wb-style-panel", 30)(46, WhiteboardComponent_div_46_Template, 5, 2, "div", 31)(47, WhiteboardComponent_bm_wb_text_dialog_47_Template, 1, 2, "bm-wb-text-dialog", 32);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵattribute("data-theme", ctx.darkMode ? "dark" : null)("aria-label", ctx.snapshot.ariaLabel);
+            i0.ɵɵadvance(2);
+            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.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.distributes);
+            i0.ɵɵadvance(2);
+            i0.ɵɵattribute("title", ctx.locale.resetZoom);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1("", ctx.zoomPct, "%");
+            i0.ɵɵadvance();
+            i0.ɵɵclassMap(ctx.viewportClass);
+            i0.ɵɵproperty("ngStyle", ctx.viewportVars);
+            i0.ɵɵadvance(2);
+            i0.ɵɵstyleProp("transform", ctx.sceneTransform);
+            i0.ɵɵadvance(3);
+            i0.ɵɵattribute("id", ctx.arrowId);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngForOf", ctx.connectorViews)("ngForTrackBy", ctx.trackConnector);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.connectorPreviewD);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.drawPreviewPath);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.guideLines)("ngForTrackBy", ctx.trackIndex);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.snapshot.shapes)("ngForTrackBy", ctx.trackShape);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.snapshot.marquee);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.snapshot.createPreview);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.transformView);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.commentPins)("ngForTrackBy", ctx.trackPin);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.laserSegments);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.draftAt);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.openThread);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.panelStyle);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.undo);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.dialogShape);
+        } }, dependencies: [CommonModule, i1.NgForOf, i1.NgIf, i1.NgStyle, WhiteboardShapeComponent, TransformHandlesComponent,
+            StylePanelComponent, CommentThreadComponent, TextDialogComponent], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WhiteboardComponent, [{
+        type: Component,
+        args: [{
+                selector: 'bm-whiteboard',
+                standalone: true,
+                // The element host defaults to display:inline — `.bm-wb` (height:100%) would then
+                // resolve against an unsized box and the viewport wouldn't clip the scene. Fill the
+                // parent like `.bm-wb` itself, so a consumer sizes the host's parent (same contract
+                // as the React/Vue/Svelte root, where `.bm-wb` IS the root box).
+                host: { style: 'display: block; width: 100%; height: 100%' },
+                imports: [
+                    CommonModule, WhiteboardShapeComponent, TransformHandlesComponent,
+                    StylePanelComponent, CommentThreadComponent, TextDialogComponent,
+                ],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div class="bm-wb" [attr.data-theme]="darkMode ? 'dark' : null" role="application" [attr.aria-label]="snapshot.ariaLabel" tabindex="0" (keydown)="onKeydown($event)">
+      <div class="bm-wb__toolbar">
+        <button
+          *ngFor="let t of tools"
+          type="button"
+          [class]="toolClass(t.id)"
+          [attr.title]="locale.tools[t.id]"
+          [attr.aria-pressed]="activeTool === t.id"
+          [attr.data-tool]="t.id"
+          (click)="onTool(t.id)">{{ t.glyph }}</button>
+        <span class="bm-wb__toolbar-sep"></span>
+        <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>
+        <button type="button" class="bm-wb__btn" [attr.title]="locale.group" data-action="group" [disabled]="!canGroup" (click)="onGroup()">⧉</button>
+        <button type="button" class="bm-wb__btn" [attr.title]="locale.ungroup" data-action="ungroup" [disabled]="!canUngroup" (click)="onUngroup()">⊟</button>
+        <button type="button" class="bm-wb__btn" [attr.title]="locale.duplicate" data-action="duplicate" [disabled]="!hasSel" (click)="onDuplicate()">⧉⁺</button>
+        <button type="button" class="bm-wb__btn" [attr.title]="locale.delete" [disabled]="!hasSel" (click)="onDeleteSelection()">🗑</button>
+        <span class="bm-wb__toolbar-sep"></span>
+        <button
+          *ngFor="let a of aligns"
+          type="button"
+          class="bm-wb__btn"
+          [attr.title]="locale.alignLabels[a.edge]"
+          [attr.data-align]="a.edge"
+          [disabled]="!canAlign"
+          (click)="onAlign(a.edge)">{{ a.glyph }}</button>
+        <button
+          *ngFor="let d of distributes"
+          type="button"
+          class="bm-wb__btn"
+          [attr.title]="locale.distributeLabels[d.axis]"
+          [attr.data-distribute]="d.axis"
+          [disabled]="!canDistribute"
+          (click)="onDistribute(d.axis)">{{ d.glyph }}</button>
+        <span class="bm-wb__toolbar-sep"></span>
+        <button type="button" class="bm-wb__btn" [attr.title]="locale.resetZoom" (click)="onResetViewport()">⌖</button>
+        <span class="bm-wb__toolbar-zoom">{{ zoomPct }}%</span>
+      </div>
+
+      <div
+        #viewportRef
+        [class]="viewportClass"
+        [ngStyle]="viewportVars"
+        data-testid="wb-viewport"
+        (pointerdown)="onViewportPointerDown($event)">
+        <div class="bm-wb__scene" [style.transform]="sceneTransform">
+          <svg class="bm-wb__connectors" data-testid="wb-connectors">
+            <defs>
+              <marker [attr.id]="arrowId" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
+                <path d="M0,0 L7,4 L0,8 Z" fill="context-stroke"></path>
+              </marker>
+            </defs>
+            <path
+              *ngFor="let c of connectorViews; trackBy: trackConnector"
+              class="bm-wb__connector"
+              [attr.data-connector-id]="c.id"
+              [attr.d]="c.d"
+              [attr.stroke]="c.stroke"
+              [attr.stroke-width]="c.strokeWidth"
+              [attr.stroke-dasharray]="c.dash"
+              [attr.opacity]="c.opacity"
+              [attr.marker-end]="c.markerEnd"
+              [attr.marker-start]="c.markerStart"></path>
+            <path *ngIf="connectorPreviewD" class="bm-wb__connector-preview" [attr.d]="connectorPreviewD"></path>
+            <path *ngIf="drawPreviewPath" class="bm-wb__draw-preview" data-testid="wb-draw-preview" [attr.d]="drawPreviewPath"></path>
+            <line
+              *ngFor="let g of guideLines; let i = index; trackBy: trackIndex"
+              class="bm-wb__guide"
+              [attr.data-guide-axis]="g.axis"
+              [attr.x1]="g.x1" [attr.y1]="g.y1" [attr.x2]="g.x2" [attr.y2]="g.y2"></line>
+          </svg>
+
+          <bm-wb-shape
+            *ngFor="let v of snapshot.shapes; trackBy: trackShape"
+            [view]="v"
+            [dropTarget]="snapshot.dropTargetId === v.shape.id"
+            (shapePointerDown)="onShapeDown(v.shape.id, $event)"
+            (shapeDoubleClick)="onShapeDblClick(v.shape.id, $event)"></bm-wb-shape>
+
+          <div *ngIf="snapshot.marquee as mq" class="bm-wb__marquee"
+            [style.left.px]="mq.x" [style.top.px]="mq.y" [style.width.px]="mq.width" [style.height.px]="mq.height"></div>
+          <div *ngIf="snapshot.createPreview as cp" class="bm-wb__create-preview"
+            [style.left.px]="cp.x" [style.top.px]="cp.y" [style.width.px]="cp.width" [style.height.px]="cp.height"></div>
+
+          <bm-wb-transform-handles
+            *ngIf="transformView as tv"
+            [view]="tv"
+            (resize)="onResizeIntent(tv.shape.id, $event)"
+            (rotate)="onRotate(tv.shape.id, $event)"></bm-wb-transform-handles>
+
+          <button
+            *ngFor="let p of commentPins; trackBy: trackPin"
+            type="button"
+            [class]="pinClass(p)"
+            [attr.data-comment-id]="p.id"
+            [style.left.px]="p.x" [style.top.px]="p.y"
+            [attr.title]="p.text"
+            (pointerdown)="stop($event)"
+            (click)="onPinClick(p.id, $event)">{{ p.glyph }}</button>
+
+          <svg *ngIf="laserSegments as ls" class="bm-wb__laser-layer" data-testid="wb-laser-layer">
+            <line
+              *ngFor="let seg of ls; let i = index; trackBy: trackIndex"
+              class="bm-wb__laser"
+              data-testid="wb-laser"
+              [attr.x1]="seg.x1" [attr.y1]="seg.y1" [attr.x2]="seg.x2" [attr.y2]="seg.y2"
+              [attr.stroke-opacity]="seg.opacity"></line>
+          </svg>
+        </div>
+
+        <bm-wb-comment-thread
+          *ngIf="draftAt as at"
+          [at]="at"
+          [initial]="''"
+          [existing]="false"
+          [resolved]="false"
+          [locale]="locale"
+          (commit)="onCommitDraft($event)"
+          (close)="onCancelDraft()"></bm-wb-comment-thread>
+
+        <bm-wb-comment-thread
+          *ngIf="openThread as ot"
+          [at]="ot.at"
+          [initial]="ot.text"
+          [existing]="true"
+          [resolved]="ot.resolved"
+          [locale]="locale"
+          (commit)="onCommitThread(ot.id, $event)"
+          (close)="onCloseThread()"
+          (resolve)="onResolveThread(ot.id)"
+          (delete)="onDeleteThread(ot.id)"></bm-wb-comment-thread>
+      </div>
+
+      <bm-wb-style-panel
+        *ngIf="panelStyle as ps"
+        [style]="ps"
+        [locale]="locale"
+        (styleInput)="onStyleInput($event)"></bm-wb-style-panel>
+
+      <div *ngIf="undo as u" class="bm-wb__toast" role="status">
+        <span>{{ u.description }}</span>
+        <button type="button" class="bm-wb__toast-btn" (click)="onUndo()">{{ locale.undo }}</button>
+      </div>
+
+      <bm-wb-text-dialog
+        *ngIf="dialogShape as ds"
+        [initial]="ds.text"
+        [locale]="locale"
+        (save)="onSaveShape($event)"
+        (close)="onCloseDialog()"
+        (delete)="onDeleteShape(ds.id)"></bm-wb-text-dialog>
+    </div>
+  `,
+            }]
+    }], null, { store: [{
+            type: Input,
+            args: [{ required: true }]
+        }], canvasId: [{
+            type: Input,
+            args: [{ required: true }]
+        }], config: [{
+            type: Input
+        }], darkMode: [{
+            type: Input
+        }], onError: [{
+            type: Input
+        }], viewportRef: [{
+            type: ViewChild,
+            args: ['viewportRef']
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WhiteboardComponent, { className: "WhiteboardComponent", filePath: "components/whiteboard.ts", lineNumber: 229 }); })();
+//# sourceMappingURL=Whiteboard.js.map