@xplor-education/core-stencil-components 3.1.2 → 3.1.4

package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.js

@@ -0,0 +1,520 @@
+import { Host, h, } from "@stencil/core";
+let canvasIdCounter = 0;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export class XplorCanvasEditor {
+    constructor() {
+        this.componentId = `xplor-canvas-${++canvasIdCounter}`;
+        // Drawing state (non-reactive, no need to trigger re-render)
+        this.isDrawing = false;
+        this.drawStart = null;
+        // Resize state
+        this.isResizing = false;
+        this.resizeHandle = null;
+        this.resizeStart = null;
+        // -------------------------------------------------------------------------
+        // Props
+        // -------------------------------------------------------------------------
+        /** Width of the SVG canvas in pixels */
+        this.width = 800;
+        /** Height of the SVG canvas in pixels */
+        this.height = 500;
+        /**
+         * Initially active tool. The consumer can switch tool programmatically by
+         * updating this prop; the internal `activeTool` state takes over once the
+         * component mounts.
+         */
+        this.tool = 'select';
+        // -------------------------------------------------------------------------
+        // State
+        // -------------------------------------------------------------------------
+        this.shapes = [];
+        this.selectedId = null;
+        this.activeTool = 'select';
+        this.draftShape = null;
+        // -------------------------------------------------------------------------
+        // Private: Drawing handlers (SVG events)
+        // -------------------------------------------------------------------------
+        this.onSvgMouseDown = (event) => {
+            // Only draw if target is the SVG itself or the background rect
+            const target = event.target;
+            const isBackground = target === this.svgEl ||
+                target.classList.contains('xplor-canvas__bg');
+            if (this.activeTool === 'select') {
+                // Clicking background clears selection
+                if (isBackground) {
+                    this.selectedId = null;
+                }
+                return;
+            }
+            if (!isBackground)
+                return;
+            const point = this.getSvgPoint(event);
+            this.isDrawing = true;
+            this.drawStart = point;
+            this.draftShape = {
+                id: '__draft__',
+                type: this.activeTool,
+                x: point.x,
+                y: point.y,
+                width: 0,
+                height: 0,
+                fill: 'rgba(33, 150, 243, 0.15)',
+                stroke: '#2196f3',
+            };
+            event.preventDefault();
+        };
+        this.onSvgMouseMove = (event) => {
+            if (!this.isDrawing || !this.drawStart || !this.draftShape)
+                return;
+            const point = this.getSvgPoint(event);
+            const x = Math.min(point.x, this.drawStart.x);
+            const y = Math.min(point.y, this.drawStart.y);
+            const width = Math.abs(point.x - this.drawStart.x);
+            const height = Math.abs(point.y - this.drawStart.y);
+            // Spread to a new object to trigger re-render
+            this.draftShape = Object.assign(Object.assign({}, this.draftShape), { x, y, width, height });
+        };
+        this.onSvgMouseUp = (_event) => {
+            if (!this.isDrawing || !this.draftShape) {
+                this.isDrawing = false;
+                return;
+            }
+            this.isDrawing = false;
+            // Discard draws smaller than 5 px in either dimension
+            if (this.draftShape.width < 5 || this.draftShape.height < 5) {
+                this.draftShape = null;
+                this.drawStart = null;
+                return;
+            }
+            const newShape = Object.assign(Object.assign({}, this.draftShape), { id: this.generateId(), fill: 'rgba(33, 150, 243, 0.25)', stroke: '#1976d2' });
+            this.shapes = [...this.shapes, newShape];
+            this.draftShape = null;
+            this.drawStart = null;
+            this.xplorShapeAdd.emit(newShape);
+        };
+        this.onShapeClick = (event, shape) => {
+            if (this.activeTool !== 'select')
+                return;
+            event.stopPropagation();
+            this.selectedId = shape.id;
+        };
+        // -------------------------------------------------------------------------
+        // Private: Resize handlers
+        // -------------------------------------------------------------------------
+        this.onResizeHandleMouseDown = (event, handleName) => {
+            event.stopPropagation();
+            event.preventDefault();
+            const selectedShape = this.shapes.find(s => s.id === this.selectedId);
+            if (!selectedShape)
+                return;
+            const point = this.getSvgPoint(event);
+            this.isResizing = true;
+            this.resizeHandle = handleName;
+            this.resizeStart = { x: point.x, y: point.y, shape: Object.assign({}, selectedShape) };
+            const onMouseMove = (e) => this.onResizeMouseMove(e);
+            const onMouseUp = (e) => {
+                this.onResizeMouseUp(e);
+                window.removeEventListener('mousemove', onMouseMove);
+                window.removeEventListener('mouseup', onMouseUp);
+            };
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', onMouseUp);
+        };
+        this.onResizeMouseMove = (event) => {
+            if (!this.isResizing || !this.resizeStart || !this.resizeHandle)
+                return;
+            const point = this.getSvgPoint(event);
+            const dx = point.x - this.resizeStart.x;
+            const dy = point.y - this.resizeStart.y;
+            const orig = this.resizeStart.shape;
+            const MIN = 10;
+            let { x, y, width, height } = orig;
+            if (this.resizeHandle.includes('e')) {
+                width = Math.max(MIN, orig.width + dx);
+            }
+            if (this.resizeHandle.includes('w')) {
+                const newWidth = Math.max(MIN, orig.width - dx);
+                x = orig.x + (orig.width - newWidth);
+                width = newWidth;
+            }
+            if (this.resizeHandle.includes('s')) {
+                height = Math.max(MIN, orig.height + dy);
+            }
+            if (this.resizeHandle.includes('n')) {
+                const newHeight = Math.max(MIN, orig.height - dy);
+                y = orig.y + (orig.height - newHeight);
+                height = newHeight;
+            }
+            this.shapes = this.shapes.map(s => s.id === this.selectedId ? Object.assign(Object.assign({}, s), { x, y, width, height }) : s);
+        };
+        this.onResizeMouseUp = (_event) => {
+            if (!this.isResizing)
+                return;
+            this.isResizing = false;
+            this.resizeHandle = null;
+            this.resizeStart = null;
+            const updatedShape = this.shapes.find(s => s.id === this.selectedId);
+            if (updatedShape) {
+                this.xplorShapeChange.emit(Object.assign({}, updatedShape));
+            }
+        };
+        // -------------------------------------------------------------------------
+        // Private: Keyboard handler (on the wrapper div)
+        // -------------------------------------------------------------------------
+        this.onKeyDown = (event) => {
+            if (event.key === 'Delete' || event.key === 'Backspace') {
+                event.preventDefault();
+                this.deleteSelected();
+            }
+        };
+    }
+    // -------------------------------------------------------------------------
+    // Lifecycle
+    // -------------------------------------------------------------------------
+    componentWillLoad() {
+        this.activeTool = this.tool;
+    }
+    // -------------------------------------------------------------------------
+    // Public methods
+    // -------------------------------------------------------------------------
+    /** Removes all shapes and clears the selection */
+    async clearAll() {
+        this.shapes = [];
+        this.selectedId = null;
+    }
+    /** Returns a shallow copy of all current shapes */
+    async getShapes() {
+        return [...this.shapes];
+    }
+    // -------------------------------------------------------------------------
+    // Private: Utilities
+    // -------------------------------------------------------------------------
+    generateId() {
+        return `shape-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    getSvgPoint(event) {
+        const rect = this.svgEl.getBoundingClientRect();
+        return {
+            x: Math.max(0, Math.min(this.width, event.clientX - rect.left)),
+            y: Math.max(0, Math.min(this.height, event.clientY - rect.top)),
+        };
+    }
+    setActiveTool(tool) {
+        this.activeTool = tool;
+        this.draftShape = null;
+        this.isDrawing = false;
+    }
+    deleteSelected() {
+        if (!this.selectedId)
+            return;
+        const id = this.selectedId;
+        this.shapes = this.shapes.filter(s => s.id !== id);
+        this.selectedId = null;
+        this.xplorShapeRemove.emit(id);
+    }
+    // -------------------------------------------------------------------------
+    // Private: SVG render helpers
+    // -------------------------------------------------------------------------
+    renderShape(shape, isDraft = false) {
+        const isSelected = !isDraft && shape.id === this.selectedId;
+        const commonProps = {
+            class: {
+                'xplor-canvas__shape': true,
+                'xplor-canvas__shape--selected': isSelected,
+                'xplor-canvas__shape--draft': isDraft,
+            },
+            fill: shape.fill,
+            stroke: shape.stroke,
+            'stroke-width': '2',
+            style: {
+                cursor: this.activeTool === 'select' && !isDraft ? 'pointer' : 'default',
+            },
+            onClick: !isDraft
+                ? (e) => this.onShapeClick(e, shape)
+                : undefined,
+        };
+        if (shape.type === 'rect') {
+            return (h("rect", Object.assign({}, commonProps, { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: "2" })));
+        }
+        if (shape.type === 'circle') {
+            return (h("ellipse", Object.assign({}, commonProps, { cx: shape.x + shape.width / 2, cy: shape.y + shape.height / 2, rx: shape.width / 2, ry: shape.height / 2 })));
+        }
+        if (shape.type === 'line') {
+            return (h("line", Object.assign({}, commonProps, { x1: shape.x, y1: shape.y, x2: shape.x + shape.width, y2: shape.y + shape.height, fill: "none" })));
+        }
+        return null;
+    }
+    renderSelectionOverlay(shape) {
+        const overlayProps = {
+            class: 'xplor-canvas__selection-overlay',
+            stroke: 'var(--selection-color, #2196f3)',
+            'stroke-dasharray': '5,3',
+            'stroke-width': '2',
+            fill: 'none',
+            style: { pointerEvents: 'none' },
+        };
+        if (shape.type === 'line') {
+            return (h("line", Object.assign({}, overlayProps, { x1: shape.x, y1: shape.y, x2: shape.x + shape.width, y2: shape.y + shape.height })));
+        }
+        if (shape.type === 'circle') {
+            return (h("ellipse", Object.assign({}, overlayProps, { cx: shape.x + shape.width / 2, cy: shape.y + shape.height / 2, rx: shape.width / 2, ry: shape.height / 2 })));
+        }
+        // rect (default)
+        return (h("rect", Object.assign({}, overlayProps, { x: shape.x, y: shape.y, width: shape.width, height: shape.height, rx: "2" })));
+    }
+    renderResizeHandles(shape) {
+        const { x, y, width, height } = shape;
+        const mx = x + width / 2;
+        const my = y + height / 2;
+        const handles = [
+            { name: 'nw', cx: x, cy: y, cursor: 'nwse-resize' },
+            { name: 'n', cx: mx, cy: y, cursor: 'ns-resize' },
+            { name: 'ne', cx: x + width, cy: y, cursor: 'nesw-resize' },
+            { name: 'e', cx: x + width, cy: my, cursor: 'ew-resize' },
+            { name: 'se', cx: x + width, cy: y + height, cursor: 'nwse-resize' },
+            { name: 's', cx: mx, cy: y + height, cursor: 'ns-resize' },
+            { name: 'sw', cx: x, cy: y + height, cursor: 'nesw-resize' },
+            { name: 'w', cx: x, cy: my, cursor: 'ew-resize' },
+        ];
+        return handles.map(h => (h("circle", { key: h.name, class: "xplor-canvas__handle", cx: h.cx, cy: h.cy, r: "var(--handle-size, 5)", style: { cursor: h.cursor }, onMouseDown: (e) => this.onResizeHandleMouseDown(e, h.name), "aria-label": `Resize ${h.name.toUpperCase()} handle`, role: "button" })));
+    }
+    // -------------------------------------------------------------------------
+    // Private: Toolbar render
+    // -------------------------------------------------------------------------
+    renderToolbar() {
+        const tools = [
+            {
+                id: 'select',
+                label: 'Select tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M4 0 L20 12 L12.5 14.5 L10 24 Z" }))),
+            },
+            {
+                id: 'rect',
+                label: 'Rectangle tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("rect", { x: "3", y: "3", width: "18", height: "18", rx: "1" }))),
+            },
+            {
+                id: 'circle',
+                label: 'Circle / Ellipse tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("ellipse", { cx: "12", cy: "12", rx: "9", ry: "9" }))),
+            },
+            {
+                id: 'line',
+                label: 'Line tool',
+                icon: (h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("line", { x1: "3", y1: "21", x2: "21", y2: "3" }))),
+            },
+        ];
+        return (h("div", { class: "xplor-canvas__toolbar", role: "toolbar", "aria-label": "Canvas drawing tools", id: `${this.componentId}-toolbar` }, h("div", { class: "xplor-canvas__toolbar-group", role: "group", "aria-label": "Drawing tools" }, tools.map(t => (h("button", { type: "button", key: t.id, class: {
+                'xplor-canvas__toolbar-btn': true,
+                'xplor-canvas__toolbar-btn--active': this.activeTool === t.id,
+            }, "aria-label": t.label, "aria-pressed": String(this.activeTool === t.id), title: t.label, onClick: () => this.setActiveTool(t.id) }, t.icon)))), h("div", { class: "xplor-canvas__toolbar-divider", "aria-hidden": "true" }), h("div", { class: "xplor-canvas__toolbar-group", role: "group", "aria-label": "Canvas actions" }, h("button", { type: "button", class: {
+                'xplor-canvas__toolbar-btn': true,
+                'xplor-canvas__toolbar-btn--danger': !!this.selectedId,
+            }, "aria-label": "Delete selected shape", title: "Delete selected (Del)", disabled: !this.selectedId, onClick: () => this.deleteSelected() }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }))), h("button", { type: "button", class: "xplor-canvas__toolbar-btn", "aria-label": "Clear all shapes", title: "Clear all", onClick: () => this.clearAll() }, h("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { d: "M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z" }), h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }))))));
+    }
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    render() {
+        const selectedShape = this.selectedId
+            ? this.shapes.find(s => s.id === this.selectedId)
+            : null;
+        const svgCursor = this.activeTool !== 'select' ? 'crosshair' : 'default';
+        return (h(Host, { key: '14f6878d3a4a6de64d1862ab998f2acdf00004d5' }, h("div", { key: '62a4fff983faeea8884d30df8a3bc3e39e6931a6', class: "xplor-canvas", role: "application", "aria-label": "Canvas editor", "aria-describedby": `${this.componentId}-desc`, tabIndex: 0, onKeyDown: this.onKeyDown }, h("span", { key: 'cb962f76307036784990f491e9b55f38baa0b660', id: `${this.componentId}-desc`, class: "xplor-canvas__sr-only" }, "Interactive canvas editor. Use toolbar to select a drawing tool, then click and drag on the canvas to draw shapes. Press Delete to remove a selected shape."), this.renderToolbar(), h("div", { key: 'e46429cfb82d2804ad97f474469e307d4cedc61a', class: "xplor-canvas__svg-wrapper" }, h("svg", { key: '01f59f5ad95af1854ce8883b79fbcb382b8c910f', ref: el => (this.svgEl = el), class: "xplor-canvas__svg", width: this.width, height: this.height, style: { cursor: svgCursor }, "aria-label": `Drawing canvas, ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}`, role: "img", onMouseDown: this.onSvgMouseDown, onMouseMove: this.onSvgMouseMove, onMouseUp: this.onSvgMouseUp }, h("rect", { key: '831a519b540b5dd36c15edec85ad67bcb6d1dc03', class: "xplor-canvas__bg", x: "0", y: "0", width: this.width, height: this.height, fill: "transparent" }), this.shapes.map(shape => this.renderShape(shape)), selectedShape && this.renderSelectionOverlay(selectedShape), selectedShape &&
+            this.activeTool === 'select' &&
+            this.renderResizeHandles(selectedShape), this.draftShape && this.renderShape(this.draftShape, true))), h("div", { key: '5758ccf14f88614a1732085e287bad7f29ea0030', class: "xplor-canvas__sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.shapes.length > 0
+            ? `Canvas contains ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}.`
+            : 'Canvas is empty.'))));
+    }
+    static get is() { return "xplor-canvas-editor"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-canvas-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-canvas-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "number",
+                "attribute": "width",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the SVG canvas in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "800"
+            },
+            "height": {
+                "type": "number",
+                "attribute": "height",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the SVG canvas in pixels"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "500"
+            },
+            "tool": {
+                "type": "string",
+                "attribute": "tool",
+                "mutable": false,
+                "complexType": {
+                    "original": "'select' | 'rect' | 'circle' | 'line'",
+                    "resolved": "\"circle\" | \"line\" | \"rect\" | \"select\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initially active tool. The consumer can switch tool programmatically by\nupdating this prop; the internal `activeTool` state takes over once the\ncomponent mounts."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'select'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "shapes": {},
+            "selectedId": {},
+            "activeTool": {},
+            "draftShape": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "xplorShapeAdd",
+                "name": "xplorShapeAdd",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a new shape is committed to the canvas"
+                },
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "Shape",
+                    "references": {
+                        "Shape": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-canvas-editor/xplor-canvas-editor.tsx",
+                            "id": "src/components/xplor-canvas-editor/xplor-canvas-editor.tsx::Shape"
+                        }
+                    }
+                }
+            }, {
+                "method": "xplorShapeRemove",
+                "name": "xplorShapeRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a shape is removed; payload is the shape id"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "xplorShapeChange",
+                "name": "xplorShapeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a shape's bounds are updated via resize"
+                },
+                "complexType": {
+                    "original": "Shape",
+                    "resolved": "Shape",
+                    "references": {
+                        "Shape": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-canvas-editor/xplor-canvas-editor.tsx",
+                            "id": "src/components/xplor-canvas-editor/xplor-canvas-editor.tsx::Shape"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clearAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes all shapes and clears the selection",
+                    "tags": []
+                }
+            },
+            "getShapes": {
+                "complexType": {
+                    "signature": "() => Promise<Shape[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Shape": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-canvas-editor/xplor-canvas-editor.tsx",
+                            "id": "src/components/xplor-canvas-editor/xplor-canvas-editor.tsx::Shape"
+                        }
+                    },
+                    "return": "Promise<Shape[]>"
+                },
+                "docs": {
+                    "text": "Returns a shallow copy of all current shapes",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xplor-canvas-editor.js.map

package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-canvas-editor.js","sourceRoot":"","sources":["../../../src/components/xplor-canvas-editor/xplor-canvas-editor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Method,\n  Element,\n} from '@stencil/core';\n\n// ---------------------------------------------------------------------------\n// Shape interface\n// ---------------------------------------------------------------------------\n\nexport interface Shape {\n  id: string;\n  type: 'rect' | 'circle' | 'line';\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  fill: string;\n  stroke: string;\n}\n\nlet canvasIdCounter = 0;\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@Component({\n  tag: 'xplor-canvas-editor',\n  styleUrl: 'xplor-canvas-editor.scss',\n  scoped: true,\n})\nexport class XplorCanvasEditor {\n  // -------------------------------------------------------------------------\n  // Internal refs & IDs\n  // -------------------------------------------------------------------------\n\n  @Element() el: HTMLElement;\n\n  private readonly componentId = `xplor-canvas-${++canvasIdCounter}`;\n  private svgEl!: SVGSVGElement;\n\n  // Drawing state (non-reactive, no need to trigger re-render)\n  private isDrawing = false;\n  private drawStart: { x: number; y: number } | null = null;\n\n  // Resize state\n  private isResizing = false;\n  private resizeHandle: string | null = null;\n  private resizeStart: { x: number; y: number; shape: Shape } | null = null;\n\n  // -------------------------------------------------------------------------\n  // Props\n  // -------------------------------------------------------------------------\n\n  /** Width of the SVG canvas in pixels */\n  @Prop() width: number = 800;\n\n  /** Height of the SVG canvas in pixels */\n  @Prop() height: number = 500;\n\n  /**\n   * Initially active tool. The consumer can switch tool programmatically by\n   * updating this prop; the internal `activeTool` state takes over once the\n   * component mounts.\n   */\n  @Prop() tool: 'select' | 'rect' | 'circle' | 'line' = 'select';\n\n  // -------------------------------------------------------------------------\n  // State\n  // -------------------------------------------------------------------------\n\n  @State() private shapes: Shape[] = [];\n  @State() private selectedId: string | null = null;\n  @State() private activeTool: 'select' | 'rect' | 'circle' | 'line' = 'select';\n  @State() private draftShape: Shape | null = null;\n\n  // -------------------------------------------------------------------------\n  // Events\n  // -------------------------------------------------------------------------\n\n  /** Emitted when a new shape is committed to the canvas */\n  @Event() xplorShapeAdd: EventEmitter<Shape>;\n\n  /** Emitted when a shape is removed; payload is the shape id */\n  @Event() xplorShapeRemove: EventEmitter<string>;\n\n  /** Emitted when a shape's bounds are updated via resize */\n  @Event() xplorShapeChange: EventEmitter<Shape>;\n\n  // -------------------------------------------------------------------------\n  // Lifecycle\n  // -------------------------------------------------------------------------\n\n  componentWillLoad() {\n    this.activeTool = this.tool;\n  }\n\n  // -------------------------------------------------------------------------\n  // Public methods\n  // -------------------------------------------------------------------------\n\n  /** Removes all shapes and clears the selection */\n  @Method()\n  async clearAll(): Promise<void> {\n    this.shapes = [];\n    this.selectedId = null;\n  }\n\n  /** Returns a shallow copy of all current shapes */\n  @Method()\n  async getShapes(): Promise<Shape[]> {\n    return [...this.shapes];\n  }\n\n  // -------------------------------------------------------------------------\n  // Private: Utilities\n  // -------------------------------------------------------------------------\n\n  private generateId(): string {\n    return `shape-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n  }\n\n  private getSvgPoint(event: MouseEvent): { x: number; y: number } {\n    const rect = this.svgEl.getBoundingClientRect();\n    return {\n      x: Math.max(0, Math.min(this.width, event.clientX - rect.left)),\n      y: Math.max(0, Math.min(this.height, event.clientY - rect.top)),\n    };\n  }\n\n  private setActiveTool(tool: 'select' | 'rect' | 'circle' | 'line') {\n    this.activeTool = tool;\n    this.draftShape = null;\n    this.isDrawing = false;\n  }\n\n  private deleteSelected() {\n    if (!this.selectedId) return;\n    const id = this.selectedId;\n    this.shapes = this.shapes.filter(s => s.id !== id);\n    this.selectedId = null;\n    this.xplorShapeRemove.emit(id);\n  }\n\n  // -------------------------------------------------------------------------\n  // Private: Drawing handlers (SVG events)\n  // -------------------------------------------------------------------------\n\n  private onSvgMouseDown = (event: MouseEvent) => {\n    // Only draw if target is the SVG itself or the background rect\n    const target = event.target as SVGElement;\n    const isBackground =\n      target === this.svgEl ||\n      target.classList.contains('xplor-canvas__bg');\n\n    if (this.activeTool === 'select') {\n      // Clicking background clears selection\n      if (isBackground) {\n        this.selectedId = null;\n      }\n      return;\n    }\n\n    if (!isBackground) return;\n\n    const point = this.getSvgPoint(event);\n    this.isDrawing = true;\n    this.drawStart = point;\n\n    this.draftShape = {\n      id: '__draft__',\n      type: this.activeTool as 'rect' | 'circle' | 'line',\n      x: point.x,\n      y: point.y,\n      width: 0,\n      height: 0,\n      fill: 'rgba(33, 150, 243, 0.15)',\n      stroke: '#2196f3',\n    };\n\n    event.preventDefault();\n  };\n\n  private onSvgMouseMove = (event: MouseEvent) => {\n    if (!this.isDrawing || !this.drawStart || !this.draftShape) return;\n\n    const point = this.getSvgPoint(event);\n    const x = Math.min(point.x, this.drawStart.x);\n    const y = Math.min(point.y, this.drawStart.y);\n    const width = Math.abs(point.x - this.drawStart.x);\n    const height = Math.abs(point.y - this.drawStart.y);\n\n    // Spread to a new object to trigger re-render\n    this.draftShape = { ...this.draftShape, x, y, width, height };\n  };\n\n  private onSvgMouseUp = (_event: MouseEvent) => {\n    if (!this.isDrawing || !this.draftShape) {\n      this.isDrawing = false;\n      return;\n    }\n\n    this.isDrawing = false;\n\n    // Discard draws smaller than 5 px in either dimension\n    if (this.draftShape.width < 5 || this.draftShape.height < 5) {\n      this.draftShape = null;\n      this.drawStart = null;\n      return;\n    }\n\n    const newShape: Shape = {\n      ...this.draftShape,\n      id: this.generateId(),\n      fill: 'rgba(33, 150, 243, 0.25)',\n      stroke: '#1976d2',\n    };\n\n    this.shapes = [...this.shapes, newShape];\n    this.draftShape = null;\n    this.drawStart = null;\n    this.xplorShapeAdd.emit(newShape);\n  };\n\n  private onShapeClick = (event: MouseEvent, shape: Shape) => {\n    if (this.activeTool !== 'select') return;\n    event.stopPropagation();\n    this.selectedId = shape.id;\n  };\n\n  // -------------------------------------------------------------------------\n  // Private: Resize handlers\n  // -------------------------------------------------------------------------\n\n  private onResizeHandleMouseDown = (event: MouseEvent, handleName: string) => {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const selectedShape = this.shapes.find(s => s.id === this.selectedId);\n    if (!selectedShape) return;\n\n    const point = this.getSvgPoint(event);\n    this.isResizing = true;\n    this.resizeHandle = handleName;\n    this.resizeStart = { x: point.x, y: point.y, shape: { ...selectedShape } };\n\n    const onMouseMove = (e: MouseEvent) => this.onResizeMouseMove(e);\n    const onMouseUp = (e: MouseEvent) => {\n      this.onResizeMouseUp(e);\n      window.removeEventListener('mousemove', onMouseMove);\n      window.removeEventListener('mouseup', onMouseUp);\n    };\n\n    window.addEventListener('mousemove', onMouseMove);\n    window.addEventListener('mouseup', onMouseUp);\n  };\n\n  private onResizeMouseMove = (event: MouseEvent) => {\n    if (!this.isResizing || !this.resizeStart || !this.resizeHandle) return;\n\n    const point = this.getSvgPoint(event);\n    const dx = point.x - this.resizeStart.x;\n    const dy = point.y - this.resizeStart.y;\n    const orig = this.resizeStart.shape;\n    const MIN = 10;\n\n    let { x, y, width, height } = orig;\n\n    if (this.resizeHandle.includes('e')) {\n      width = Math.max(MIN, orig.width + dx);\n    }\n    if (this.resizeHandle.includes('w')) {\n      const newWidth = Math.max(MIN, orig.width - dx);\n      x = orig.x + (orig.width - newWidth);\n      width = newWidth;\n    }\n    if (this.resizeHandle.includes('s')) {\n      height = Math.max(MIN, orig.height + dy);\n    }\n    if (this.resizeHandle.includes('n')) {\n      const newHeight = Math.max(MIN, orig.height - dy);\n      y = orig.y + (orig.height - newHeight);\n      height = newHeight;\n    }\n\n    this.shapes = this.shapes.map(s =>\n      s.id === this.selectedId ? { ...s, x, y, width, height } : s,\n    );\n  };\n\n  private onResizeMouseUp = (_event: MouseEvent) => {\n    if (!this.isResizing) return;\n    this.isResizing = false;\n    this.resizeHandle = null;\n    this.resizeStart = null;\n\n    const updatedShape = this.shapes.find(s => s.id === this.selectedId);\n    if (updatedShape) {\n      this.xplorShapeChange.emit({ ...updatedShape });\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // Private: Keyboard handler (on the wrapper div)\n  // -------------------------------------------------------------------------\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Delete' || event.key === 'Backspace') {\n      event.preventDefault();\n      this.deleteSelected();\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // Private: SVG render helpers\n  // -------------------------------------------------------------------------\n\n  private renderShape(shape: Shape, isDraft = false) {\n    const isSelected = !isDraft && shape.id === this.selectedId;\n\n    const commonProps = {\n      class: {\n        'xplor-canvas__shape': true,\n        'xplor-canvas__shape--selected': isSelected,\n        'xplor-canvas__shape--draft': isDraft,\n      },\n      fill: shape.fill,\n      stroke: shape.stroke,\n      'stroke-width': '2',\n      style: {\n        cursor:\n          this.activeTool === 'select' && !isDraft ? 'pointer' : 'default',\n      },\n      onClick: !isDraft\n        ? (e: MouseEvent) => this.onShapeClick(e, shape)\n        : undefined,\n    };\n\n    if (shape.type === 'rect') {\n      return (\n        <rect\n          {...commonProps}\n          x={shape.x}\n          y={shape.y}\n          width={shape.width}\n          height={shape.height}\n          rx=\"2\"\n        />\n      );\n    }\n\n    if (shape.type === 'circle') {\n      return (\n        <ellipse\n          {...commonProps}\n          cx={shape.x + shape.width / 2}\n          cy={shape.y + shape.height / 2}\n          rx={shape.width / 2}\n          ry={shape.height / 2}\n        />\n      );\n    }\n\n    if (shape.type === 'line') {\n      return (\n        <line\n          {...commonProps}\n          x1={shape.x}\n          y1={shape.y}\n          x2={shape.x + shape.width}\n          y2={shape.y + shape.height}\n          fill=\"none\"\n        />\n      );\n    }\n\n    return null;\n  }\n\n  private renderSelectionOverlay(shape: Shape) {\n    const overlayProps = {\n      class: 'xplor-canvas__selection-overlay',\n      stroke: 'var(--selection-color, #2196f3)',\n      'stroke-dasharray': '5,3',\n      'stroke-width': '2',\n      fill: 'none',\n      style: { pointerEvents: 'none' as any },\n    };\n\n    if (shape.type === 'line') {\n      return (\n        <line\n          {...overlayProps}\n          x1={shape.x}\n          y1={shape.y}\n          x2={shape.x + shape.width}\n          y2={shape.y + shape.height}\n        />\n      );\n    }\n\n    if (shape.type === 'circle') {\n      return (\n        <ellipse\n          {...overlayProps}\n          cx={shape.x + shape.width / 2}\n          cy={shape.y + shape.height / 2}\n          rx={shape.width / 2}\n          ry={shape.height / 2}\n        />\n      );\n    }\n\n    // rect (default)\n    return (\n      <rect\n        {...overlayProps}\n        x={shape.x}\n        y={shape.y}\n        width={shape.width}\n        height={shape.height}\n        rx=\"2\"\n      />\n    );\n  }\n\n  private renderResizeHandles(shape: Shape) {\n    const { x, y, width, height } = shape;\n    const mx = x + width / 2;\n    const my = y + height / 2;\n\n    const handles: Array<{ name: string; cx: number; cy: number; cursor: string }> = [\n      { name: 'nw', cx: x,         cy: y,          cursor: 'nwse-resize' },\n      { name: 'n',  cx: mx,        cy: y,          cursor: 'ns-resize'   },\n      { name: 'ne', cx: x + width, cy: y,          cursor: 'nesw-resize' },\n      { name: 'e',  cx: x + width, cy: my,         cursor: 'ew-resize'   },\n      { name: 'se', cx: x + width, cy: y + height, cursor: 'nwse-resize' },\n      { name: 's',  cx: mx,        cy: y + height, cursor: 'ns-resize'   },\n      { name: 'sw', cx: x,         cy: y + height, cursor: 'nesw-resize' },\n      { name: 'w',  cx: x,         cy: my,         cursor: 'ew-resize'   },\n    ];\n\n    return handles.map(h => (\n      <circle\n        key={h.name}\n        class=\"xplor-canvas__handle\"\n        cx={h.cx}\n        cy={h.cy}\n        r=\"var(--handle-size, 5)\"\n        style={{ cursor: h.cursor }}\n        onMouseDown={(e: MouseEvent) => this.onResizeHandleMouseDown(e, h.name)}\n        aria-label={`Resize ${h.name.toUpperCase()} handle`}\n        role=\"button\"\n      />\n    ));\n  }\n\n  // -------------------------------------------------------------------------\n  // Private: Toolbar render\n  // -------------------------------------------------------------------------\n\n  private renderToolbar() {\n    const tools: Array<{\n      id: 'select' | 'rect' | 'circle' | 'line';\n      label: string;\n      icon: any;\n    }> = [\n      {\n        id: 'select',\n        label: 'Select tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n            <path d=\"M4 0 L20 12 L12.5 14.5 L10 24 Z\" />\n          </svg>\n        ),\n      },\n      {\n        id: 'rect',\n        label: 'Rectangle tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\" />\n          </svg>\n        ),\n      },\n      {\n        id: 'circle',\n        label: 'Circle / Ellipse tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n            <ellipse cx=\"12\" cy=\"12\" rx=\"9\" ry=\"9\" />\n          </svg>\n        ),\n      },\n      {\n        id: 'line',\n        label: 'Line tool',\n        icon: (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n            <line x1=\"3\" y1=\"21\" x2=\"21\" y2=\"3\" />\n          </svg>\n        ),\n      },\n    ];\n\n    return (\n      <div\n        class=\"xplor-canvas__toolbar\"\n        role=\"toolbar\"\n        aria-label=\"Canvas drawing tools\"\n        id={`${this.componentId}-toolbar`}\n      >\n        {/* Drawing tool buttons */}\n        <div class=\"xplor-canvas__toolbar-group\" role=\"group\" aria-label=\"Drawing tools\">\n          {tools.map(t => (\n            <button\n              type=\"button\"\n              key={t.id}\n              class={{\n                'xplor-canvas__toolbar-btn': true,\n                'xplor-canvas__toolbar-btn--active': this.activeTool === t.id,\n              }}\n              aria-label={t.label}\n              aria-pressed={String(this.activeTool === t.id)}\n              title={t.label}\n              onClick={() => this.setActiveTool(t.id)}\n            >\n              {t.icon}\n            </button>\n          ))}\n        </div>\n\n        <div class=\"xplor-canvas__toolbar-divider\" aria-hidden=\"true\" />\n\n        {/* Action buttons */}\n        <div class=\"xplor-canvas__toolbar-group\" role=\"group\" aria-label=\"Canvas actions\">\n          <button\n            type=\"button\"\n            class={{\n              'xplor-canvas__toolbar-btn': true,\n              'xplor-canvas__toolbar-btn--danger': !!this.selectedId,\n            }}\n            aria-label=\"Delete selected shape\"\n            title=\"Delete selected (Del)\"\n            disabled={!this.selectedId}\n            onClick={() => this.deleteSelected()}\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z\" />\n            </svg>\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"xplor-canvas__toolbar-btn\"\n            aria-label=\"Clear all shapes\"\n            title=\"Clear all\"\n            onClick={() => this.clearAll()}\n          >\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n              <path d=\"M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z\" />\n              <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // -------------------------------------------------------------------------\n  // Render\n  // -------------------------------------------------------------------------\n\n  render() {\n    const selectedShape = this.selectedId\n      ? this.shapes.find(s => s.id === this.selectedId)\n      : null;\n\n    const svgCursor =\n      this.activeTool !== 'select' ? 'crosshair' : 'default';\n\n    return (\n      <Host>\n        <div\n          class=\"xplor-canvas\"\n          role=\"application\"\n          aria-label=\"Canvas editor\"\n          aria-describedby={`${this.componentId}-desc`}\n          tabIndex={0}\n          onKeyDown={this.onKeyDown}\n        >\n          {/* Visually hidden description for screen readers */}\n          <span id={`${this.componentId}-desc`} class=\"xplor-canvas__sr-only\">\n            Interactive canvas editor. Use toolbar to select a drawing tool, then\n            click and drag on the canvas to draw shapes. Press Delete to remove a\n            selected shape.\n          </span>\n\n          {this.renderToolbar()}\n\n          <div class=\"xplor-canvas__svg-wrapper\">\n            <svg\n              ref={el => (this.svgEl = el as SVGSVGElement)}\n              class=\"xplor-canvas__svg\"\n              width={this.width}\n              height={this.height}\n              style={{ cursor: svgCursor }}\n              aria-label={`Drawing canvas, ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}`}\n              role=\"img\"\n              onMouseDown={this.onSvgMouseDown}\n              onMouseMove={this.onSvgMouseMove}\n              onMouseUp={this.onSvgMouseUp}\n            >\n              {/* Transparent background rect — captures click/mousedown on empty area */}\n              <rect\n                class=\"xplor-canvas__bg\"\n                x=\"0\"\n                y=\"0\"\n                width={this.width}\n                height={this.height}\n                fill=\"transparent\"\n              />\n\n              {/* Committed shapes */}\n              {this.shapes.map(shape => this.renderShape(shape))}\n\n              {/* Selection overlay (dashed outline) */}\n              {selectedShape && this.renderSelectionOverlay(selectedShape)}\n\n              {/* Resize handles */}\n              {selectedShape &&\n                this.activeTool === 'select' &&\n                this.renderResizeHandles(selectedShape)}\n\n              {/* In-progress draft shape */}\n              {this.draftShape && this.renderShape(this.draftShape, true)}\n            </svg>\n          </div>\n\n          {/* Live region for screen reader announcements */}\n          <div\n            class=\"xplor-canvas__sr-only\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n          >\n            {this.shapes.length > 0\n              ? `Canvas contains ${this.shapes.length} shape${this.shapes.length !== 1 ? 's' : ''}.`\n              : 'Canvas is empty.'}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}