@bimetal/whiteboard-angular-components 0.29.0

package/LICENSE

@@ -0,0 +1,129 @@
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose.  However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software.  Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.  For example:
+
+> Required Notice: Copyright Andreas Biederbeck (https://bimetal.dev)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for
+the benefit of public knowledge, personal study, private
+entertainment, hobby projects, amateur pursuits, or religious
+observance, without any anticipated commercial application,
+is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution,
+public research organization, public safety or health
+organization, environmental protection organization,
+or government institution is use for a permitted purpose
+regardless of the source of funding or obligations resulting
+from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else.  These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or any agreement made under them,
+you have 32 calendar days to come into compliance.  If you come
+into compliance, your licenses revive and continue as if you had
+never violated.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization.  **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

package/README.md

@@ -0,0 +1,52 @@
+# @bimetal/whiteboard-angular-components
+
+The default **Angular whiteboard** for BIMETAL — a thin binding over the canonical
+[`@bimetal/whiteboard-headless`](../whiteboard-headless) controller. Every
+interaction decision (the tool FSM, create/drag/marquee, resize/rotate math, snap
+guides, align/distribute, group cohesion, input parsing) lives in the controller;
+this package owns only the DOM: it converts the single piece of geometry
+(`screenToBoard`), wires pointer + wheel events, and renders the snapshot. Ships as
+standalone components.
+
+## Features
+
+- **Infinite canvas** — pan (wheel/trackpad) and zoom (Ctrl/Cmd + wheel), a
+  grid that tracks the camera, reset-to-100%.
+- **Shapes** — rect / ellipse / diamond / text / note / frame, real
+  drag-move, eight-handle resize, and a 15°-snapped rotate knob.
+- **Connectors** with routed elbow paths + arrowheads, **freehand draw**, a
+  **laser pointer** (transient top overlay), and **smart guides** while dragging.
+- **Align / distribute**, **group / ungroup**, **frames** with reparent-on-drop,
+  **comments** (pins + thread editor), a **style panel**, a **text dialog**, undo.
+- **Keyboard a11y** — the full key map is forwarded to the controller.
+
+Event-sourced: the whole canvas is one aggregate, every change is an event, and
+undo + full history come for free.
+
+## Usage
+
+```ts
+import { Component } from '@angular/core';
+import { WhiteboardComponent } from '@bimetal/whiteboard-angular-components';
+import { createWhiteboardStore } from '@bimetal/whiteboard-data';
+import '@bimetal/whiteboard-angular-components/styles';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [WhiteboardComponent],
+  template: `<bm-whiteboard [store]="store" canvasId="canvas-1"></bm-whiteboard>`,
+})
+export class AppComponent {
+  store = createWhiteboardStore();
+  // …seed the canvas…
+}
+```
+
+The component is `bm-whiteboard`. Pass `[darkMode]="true"` for the dark token set,
+`[config]` for locale/metric overrides, and `[onError]` to surface infrastructure
+errors.
+
+## License
+
+PolyForm-Noncommercial-1.0.0

package/dist/components/CommentThread.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter, OnChanges } from '@angular/core';
+import type { Point, WhiteboardLocale } from '@bimetal/whiteboard-headless';
+import * as i0 from "@angular/core";
+/**
+ * The comment editor popover (new draft OR existing thread), floated in SCREEN
+ * space at `at`. The resolve/delete actions appear only for an EXISTING comment
+ * (`existing`). `commit` owns the persist-and-close decision in the parent (commit
+ * a draft, or update + close a thread); a blank draft commit cancels in the
+ * controller. 1:1 with the React reference.
+ */
+export declare class CommentThreadComponent implements OnChanges {
+    at: Point;
+    initial: string;
+    resolved: boolean;
+    existing: boolean;
+    locale: WhiteboardLocale;
+    commit: EventEmitter<string>;
+    close: EventEmitter<void>;
+    resolve: EventEmitter<void>;
+    delete: EventEmitter<void>;
+    text: string;
+    private seeded;
+    readonly onClose: () => void;
+    get posStyle(): Record<string, string>;
+    ngOnChanges(): void;
+    onInput(e: Event): void;
+    stop(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CommentThreadComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CommentThreadComponent, "bm-wb-comment-thread", never, { "at": { "alias": "at"; "required": true; }; "initial": { "alias": "initial"; "required": false; }; "resolved": { "alias": "resolved"; "required": false; }; "existing": { "alias": "existing"; "required": false; }; "locale": { "alias": "locale"; "required": true; }; }, { "commit": "commit"; "close": "close"; "resolve": "resolve"; "delete": "delete"; }, never, never, true, never>;
+}
+//# sourceMappingURL=CommentThread.d.ts.map

package/dist/components/CommentThread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThread.d.ts","sourceRoot":"","sources":["../../src/components/CommentThread.ts"],"names":[],"mappings":"AAAA,OAAO,EACqB,YAAY,EACtC,SAAS,EACV,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAE5E;;;;;;GAMG;AACH,qBAuBa,sBAAuB,YAAW,SAAS;IAC3B,EAAE,EAAG,KAAK,CAAC;IAC7B,OAAO,SAAM;IACb,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACC,MAAM,EAAG,gBAAgB,CAAC;IAC3C,MAAM,uBAA8B;IACpC,KAAK,qBAA4B;IACjC,OAAO,qBAA4B;IACnC,MAAM,qBAA4B;IAE5C,IAAI,SAAM;IACV,OAAO,CAAC,MAAM,CAAS;IAIvB,QAAQ,CAAC,OAAO,aAA2B;IAE3C,IAAI,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAErC;IAED,WAAW;IAMX,OAAO,CAAC,CAAC,EAAE,KAAK;IAChB,IAAI,CAAC,CAAC,EAAE,KAAK;yCA7BF,sBAAsB;2CAAtB,sBAAsB;CA8BlC"}

package/dist/components/CommentThread.js

@@ -0,0 +1,138 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FocusTrapDirective } from '@bimetal/angular';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+function CommentThreadComponent_button_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function CommentThreadComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.delete.emit()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.locale.delete);
+} }
+function CommentThreadComponent_button_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 6);
+    i0.ɵɵlistener("click", function CommentThreadComponent_button_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resolve.emit()); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.resolved ? ctx_r1.locale.commentReopen : ctx_r1.locale.commentResolve);
+} }
+/**
+ * The comment editor popover (new draft OR existing thread), floated in SCREEN
+ * space at `at`. The resolve/delete actions appear only for an EXISTING comment
+ * (`existing`). `commit` owns the persist-and-close decision in the parent (commit
+ * a draft, or update + close a thread); a blank draft commit cancels in the
+ * controller. 1:1 with the React reference.
+ */
+export class CommentThreadComponent {
+    at;
+    initial = '';
+    resolved = false;
+    existing = false;
+    locale;
+    commit = new EventEmitter();
+    close = new EventEmitter();
+    resolve = new EventEmitter();
+    delete = new EventEmitter();
+    text = '';
+    seeded = false;
+    // v0.29 Tastatur: NON-modal dialog ([bmFocusTrapModal]="false") — focus-on-open + Escape
+    // + restore, Tab may leave. The trap's onEscape closes it. Stable arrow for the template.
+    onClose = () => this.close.emit();
+    get posStyle() {
+        return { left: `${this.at.x}px`, top: `${this.at.y}px` };
+    }
+    ngOnChanges() {
+        // Seed the draft once from `initial` (the thread's stored text stays constant
+        // mid-edit, so we never clobber typing).
+        if (!this.seeded) {
+            this.text = this.initial;
+            this.seeded = true;
+        }
+    }
+    onInput(e) { this.text = e.target.value; }
+    stop(e) { e.stopPropagation(); }
+    static ɵfac = function CommentThreadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommentThreadComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommentThreadComponent, selectors: [["bm-wb-comment-thread"]], hostAttrs: [2, "display", "contents"], inputs: { at: "at", initial: "initial", resolved: "resolved", existing: "existing", locale: "locale" }, outputs: { commit: "commit", close: "close", resolve: "resolve", delete: "delete" }, features: [i0.ɵɵNgOnChangesFeature], decls: 8, vars: 9, consts: [["role", "dialog", "bmFocusTrap", "", 1, "bm-wb__comment-thread", 3, "pointerdown", "ngStyle", "bmFocusTrapOnEscape", "bmFocusTrapModal"], [1, "bm-wb__comment-input", 3, "input", "value"], [1, "bm-wb__comment-actions"], ["type", "button", "class", "bm-wb__btn", 3, "click", 4, "ngIf"], [2, "flex", "1"], ["type", "button", 1, "bm-wb__tool", "bm-wb__tool--active", 3, "click"], ["type", "button", 1, "bm-wb__btn", 3, "click"]], template: function CommentThreadComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("pointerdown", function CommentThreadComponent_Template_div_pointerdown_0_listener($event) { return ctx.stop($event); });
+            i0.ɵɵelementStart(1, "textarea", 1);
+            i0.ɵɵlistener("input", function CommentThreadComponent_Template_textarea_input_1_listener($event) { return ctx.onInput($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵtemplate(3, CommentThreadComponent_button_3_Template, 2, 1, "button", 3)(4, CommentThreadComponent_button_4_Template, 2, 1, "button", 3);
+            i0.ɵɵelement(5, "span", 4);
+            i0.ɵɵelementStart(6, "button", 5);
+            i0.ɵɵlistener("click", function CommentThreadComponent_Template_button_click_6_listener() { return ctx.commit.emit(ctx.text); });
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngStyle", ctx.posStyle)("bmFocusTrapOnEscape", ctx.onClose)("bmFocusTrapModal", false);
+            i0.ɵɵattribute("aria-label", ctx.locale.tools.comment);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.text);
+            i0.ɵɵattribute("placeholder", ctx.locale.commentPlaceholder);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.existing);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.existing);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.save);
+        } }, dependencies: [CommonModule, i1.NgIf, i1.NgStyle, FocusTrapDirective], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommentThreadComponent, [{
+        type: Component,
+        args: [{
+                selector: 'bm-wb-comment-thread',
+                standalone: true,
+                host: { style: 'display: contents' },
+                imports: [CommonModule, FocusTrapDirective],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div class="bm-wb__comment-thread" role="dialog" [attr.aria-label]="locale.tools.comment" [ngStyle]="posStyle" (pointerdown)="stop($event)"
+      bmFocusTrap [bmFocusTrapOnEscape]="onClose" [bmFocusTrapModal]="false">
+      <textarea
+        class="bm-wb__comment-input"
+        [value]="text"
+        [attr.placeholder]="locale.commentPlaceholder"
+        (input)="onInput($event)"></textarea>
+      <div class="bm-wb__comment-actions">
+        <button *ngIf="existing" type="button" class="bm-wb__btn" (click)="delete.emit()">{{ locale.delete }}</button>
+        <button *ngIf="existing" type="button" class="bm-wb__btn" (click)="resolve.emit()">{{ resolved ? locale.commentReopen : locale.commentResolve }}</button>
+        <span style="flex:1"></span>
+        <button type="button" class="bm-wb__tool bm-wb__tool--active" (click)="commit.emit(text)">{{ locale.save }}</button>
+      </div>
+    </div>
+  `,
+            }]
+    }], null, { at: [{
+            type: Input,
+            args: [{ required: true }]
+        }], initial: [{
+            type: Input
+        }], resolved: [{
+            type: Input
+        }], existing: [{
+            type: Input
+        }], locale: [{
+            type: Input,
+            args: [{ required: true }]
+        }], commit: [{
+            type: Output
+        }], close: [{
+            type: Output
+        }], resolve: [{
+            type: Output
+        }], delete: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommentThreadComponent, { className: "CommentThreadComponent", filePath: "components/commentthread.ts", lineNumber: 39 }); })();
+//# sourceMappingURL=CommentThread.js.map

package/dist/components/CommentThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThread.js","sourceRoot":"","sources":["../../src/components/CommentThread.ts"],"names":[],"mappings":"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"}

package/dist/components/StylePanel.d.ts

@@ -0,0 +1,19 @@
+import { EventEmitter } from '@angular/core';
+import type { ShapeStyle, StyleInput, WhiteboardLocale } from '@bimetal/whiteboard-headless';
+import * as i0 from "@angular/core";
+/**
+ * The style editor for the current selection. The inputs forward RAW string
+ * values (`StyleInput`); the controller parses/clamps/validates and batches the
+ * change into ONE `SetShapesStyle` (one undo). No `Number(...)`, cast or min/max
+ * policy here — the DOM min/max are UX hints only. Labels come from the locale.
+ * 1:1 with the React reference.
+ */
+export declare class StylePanelComponent {
+    style: ShapeStyle;
+    locale: WhiteboardLocale;
+    styleInput: EventEmitter<StyleInput>;
+    emit(field: keyof StyleInput, e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StylePanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StylePanelComponent, "bm-wb-style-panel", never, { "style": { "alias": "style"; "required": true; }; "locale": { "alias": "locale"; "required": true; }; }, { "styleInput": "styleInput"; }, never, never, true, never>;
+}
+//# sourceMappingURL=StylePanel.d.ts.map

package/dist/components/StylePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylePanel.d.ts","sourceRoot":"","sources":["../../src/components/StylePanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAA2B,MAAM,eAAe,CAAC;AAEhG,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAE7F;;;;;;GAMG;AACH,qBAuCa,mBAAmB;IACH,KAAK,EAAG,UAAU,CAAC;IACnB,MAAM,EAAG,gBAAgB,CAAC;IAC3C,UAAU,2BAAkC;IAEtD,IAAI,CAAC,KAAK,EAAE,MAAM,UAAU,EAAE,CAAC,EAAE,KAAK;yCAL3B,mBAAmB;2CAAnB,mBAAmB;CAS/B"}

package/dist/components/StylePanel.js

@@ -0,0 +1,150 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as i0 from "@angular/core";
+/**
+ * The style editor for the current selection. The inputs forward RAW string
+ * values (`StyleInput`); the controller parses/clamps/validates and batches the
+ * change into ONE `SetShapesStyle` (one undo). No `Number(...)`, cast or min/max
+ * policy here — the DOM min/max are UX hints only. Labels come from the locale.
+ * 1:1 with the React reference.
+ */
+export class StylePanelComponent {
+    style;
+    locale;
+    styleInput = new EventEmitter();
+    emit(field, e) {
+        const value = e.target.value;
+        this.styleInput.emit({ [field]: value });
+    }
+    static ɵfac = function StylePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StylePanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StylePanelComponent, selectors: [["bm-wb-style-panel"]], hostAttrs: [2, "display", "contents"], inputs: { style: "style", locale: "locale" }, outputs: { styleInput: "styleInput" }, decls: 31, vars: 15, consts: [["data-testid", "wb-style-panel", 1, "bm-wb__panel"], [1, "bm-wb__field"], ["for", "bmw-fill"], ["id", "bmw-fill", "type", "color", "data-style", "fill", 3, "change", "value"], ["for", "bmw-stroke"], ["id", "bmw-stroke", "type", "color", "data-style", "stroke", 3, "change", "value"], ["for", "bmw-strokeWidth"], ["id", "bmw-strokeWidth", "type", "range", "min", "1", "max", "12", "data-style", "strokeWidth", 3, "change", "value"], ["for", "bmw-dash"], ["id", "bmw-dash", "data-style", "dash", 3, "change", "value"], ["value", "solid"], ["value", "dashed"], ["value", "dotted"], ["for", "bmw-opacity"], ["id", "bmw-opacity", "type", "range", "min", "0.1", "max", "1", "step", "0.1", "data-style", "opacity", 3, "change", "value"], ["for", "bmw-fontSize"], ["id", "bmw-fontSize", "type", "number", "min", "8", "max", "96", "data-style", "fontSize", 3, "change", "value"]], template: function StylePanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "label", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "input", 3);
+            i0.ɵɵlistener("change", function StylePanelComponent_Template_input_change_4_listener($event) { return ctx.emit("fill", $event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(5, "div", 1)(6, "label", 4);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "input", 5);
+            i0.ɵɵlistener("change", function StylePanelComponent_Template_input_change_8_listener($event) { return ctx.emit("stroke", $event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 1)(10, "label", 6);
+            i0.ɵɵtext(11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "input", 7);
+            i0.ɵɵlistener("change", function StylePanelComponent_Template_input_change_12_listener($event) { return ctx.emit("strokeWidth", $event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "div", 1)(14, "label", 8);
+            i0.ɵɵtext(15);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "select", 9);
+            i0.ɵɵlistener("change", function StylePanelComponent_Template_select_change_16_listener($event) { return ctx.emit("dash", $event); });
+            i0.ɵɵelementStart(17, "option", 10);
+            i0.ɵɵtext(18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(19, "option", 11);
+            i0.ɵɵtext(20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(21, "option", 12);
+            i0.ɵɵtext(22);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(23, "div", 1)(24, "label", 13);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "input", 14);
+            i0.ɵɵlistener("change", function StylePanelComponent_Template_input_change_26_listener($event) { return ctx.emit("opacity", $event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(27, "div", 1)(28, "label", 15);
+            i0.ɵɵtext(29);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "input", 16);
+            i0.ɵɵlistener("change", function StylePanelComponent_Template_input_change_30_listener($event) { return ctx.emit("fontSize", $event); });
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.styleFill);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", (tmp_1_0 = ctx.style.fill) !== null && tmp_1_0 !== undefined ? tmp_1_0 : "#ffffff");
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.styleStroke);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.style.stroke);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.styleWidth);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.style.strokeWidth);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.styleDash);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.style.dash);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.locale.dashSolid);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.locale.dashDashed);
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.locale.dashDotted);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.styleOpacity);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.style.opacity);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.locale.styleFont);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("value", ctx.style.fontSize);
+        } }, dependencies: [CommonModule], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StylePanelComponent, [{
+        type: Component,
+        args: [{
+                selector: 'bm-wb-style-panel',
+                standalone: true,
+                host: { style: 'display: contents' },
+                imports: [CommonModule],
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                template: `
+    <div class="bm-wb__panel" data-testid="wb-style-panel">
+      <div class="bm-wb__field">
+        <label for="bmw-fill">{{ locale.styleFill }}</label>
+        <input id="bmw-fill" type="color" data-style="fill" [value]="style.fill ?? '#ffffff'" (change)="emit('fill', $event)" />
+      </div>
+      <div class="bm-wb__field">
+        <label for="bmw-stroke">{{ locale.styleStroke }}</label>
+        <input id="bmw-stroke" type="color" data-style="stroke" [value]="style.stroke" (change)="emit('stroke', $event)" />
+      </div>
+      <div class="bm-wb__field">
+        <label for="bmw-strokeWidth">{{ locale.styleWidth }}</label>
+        <input id="bmw-strokeWidth" type="range" min="1" max="12" data-style="strokeWidth" [value]="style.strokeWidth" (change)="emit('strokeWidth', $event)" />
+      </div>
+      <div class="bm-wb__field">
+        <label for="bmw-dash">{{ locale.styleDash }}</label>
+        <select id="bmw-dash" data-style="dash" [value]="style.dash" (change)="emit('dash', $event)">
+          <option value="solid">{{ locale.dashSolid }}</option>
+          <option value="dashed">{{ locale.dashDashed }}</option>
+          <option value="dotted">{{ locale.dashDotted }}</option>
+        </select>
+      </div>
+      <div class="bm-wb__field">
+        <label for="bmw-opacity">{{ locale.styleOpacity }}</label>
+        <input id="bmw-opacity" type="range" min="0.1" max="1" step="0.1" data-style="opacity" [value]="style.opacity" (change)="emit('opacity', $event)" />
+      </div>
+      <div class="bm-wb__field">
+        <label for="bmw-fontSize">{{ locale.styleFont }}</label>
+        <input id="bmw-fontSize" type="number" min="8" max="96" data-style="fontSize" [value]="style.fontSize" (change)="emit('fontSize', $event)" />
+      </div>
+    </div>
+  `,
+            }]
+    }], null, { style: [{
+            type: Input,
+            args: [{ required: true }]
+        }], locale: [{
+            type: Input,
+            args: [{ required: true }]
+        }], styleInput: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StylePanelComponent, { className: "StylePanelComponent", filePath: "components/stylepanel.ts", lineNumber: 51 }); })();
+//# sourceMappingURL=StylePanel.js.map

package/dist/components/StylePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StylePanel.js","sourceRoot":"","sources":["../../src/components/StylePanel.ts"],"names":[],"mappings":"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"}

package/dist/components/TextDialog.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter, OnChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface TextDialogLocale {
+    save: string;
+    cancel: string;
+    delete: string;
+    editShape: string;
+    titlePlaceholder: string;
+}
+/**
+ * The double-click edit dialog for a shape's text. Rendered with a host `*ngIf`;
+ * the draft resets per target on the shape-identity change. 1:1 with the React
+ * reference.
+ */
+export declare class TextDialogComponent implements OnChanges {
+    initial: string;
+    locale: TextDialogLocale;
+    save: EventEmitter<string>;
+    close: EventEmitter<void>;
+    delete: EventEmitter<void>;
+    text: string;
+    private lastInitial;
+    readonly onEscape: () => void;
+    ngOnChanges(): void;
+    onInput(e: Event): void;
+    stop(e: Event): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextDialogComponent, "bm-wb-text-dialog", never, { "initial": { "alias": "initial"; "required": false; }; "locale": { "alias": "locale"; "required": true; }; }, { "save": "save"; "close": "close"; "delete": "delete"; }, never, never, true, never>;
+}
+//# sourceMappingURL=TextDialog.d.ts.map

package/dist/components/TextDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDialog.d.ts","sourceRoot":"","sources":["../../src/components/TextDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EACqB,YAAY,EACtC,SAAS,EACV,MAAM,eAAe,CAAC;;AAIvB,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;;;GAIG;AACH,qBAyBa,mBAAoB,YAAW,SAAS;IAC1C,OAAO,SAAM;IACK,MAAM,EAAG,gBAAgB,CAAC;IAC3C,IAAI,uBAA8B;IAClC,KAAK,qBAA4B;IACjC,MAAM,qBAA4B;IAE5C,IAAI,SAAM;IACV,OAAO,CAAC,WAAW,CAAuB;IAI1C,QAAQ,CAAC,QAAQ,aAA2B;IAE5C,WAAW;IAKX,OAAO,CAAC,CAAC,EAAE,KAAK;IAChB,IAAI,CAAC,CAAC,EAAE,KAAK;yCApBF,mBAAmB;2CAAnB,mBAAmB;CAqB/B"}