@teachinglab/omd 0.7.16 → 0.7.18

package/canvas/core/canvasConfig.js

@@ -14,7 +14,7 @@ export class CanvasConfig {
         this.gridSpacing = options.gridSpacing || 20;
         
         // Tool configuration
-        this.enabledTools = options.enabledTools || ['pointer', 'pencil', 'eraser', 'select'];
+        this.enabledTools = options.enabledTools || ['pointer', 'pencil', 'eraser'];
         this.defaultTool = options.defaultTool || 'pointer';
         
         // Feature flags
@@ -36,11 +36,6 @@ export class CanvasConfig {
                 size: 20,
                 hardness: 0.8,
                 ...options.tools?.eraser
-            },
-            select: {
-                selectionColor: '#007bff',
-                selectionOpacity: 0.3,
-                ...options.tools?.select
             }
         };
         
@@ -53,7 +48,26 @@ export class CanvasConfig {
             danger: '#dc3545',
             ...options.theme
         };
-        
+
+        // Selection / resize-handle styling
+        this.selection = {
+            // Selection border
+            border: {
+                color:        options.selection?.border?.color        ?? '#007bff',
+                width:        options.selection?.border?.width        ?? 2,
+                dasharray:    options.selection?.border?.dasharray    ?? '4,2',
+                cornerRadius: options.selection?.border?.cornerRadius ?? undefined,
+            },
+            // Resize handles
+            handle: {
+                size:         options.selection?.handle?.size         ?? 8,
+                color:        options.selection?.handle?.color        ?? '#007bff',
+                strokeColor:  options.selection?.handle?.strokeColor  ?? '#ffffff',
+                strokeWidth:  options.selection?.handle?.strokeWidth  ?? 1,
+                cornerRadius: options.selection?.handle?.cornerRadius ?? 1,
+            },
+        };
+
         // Validate configuration
         this._validate();
     }
@@ -69,13 +83,13 @@ export class CanvasConfig {
         }
         
         // Validate enabled tools
-        const availableTools = ['pointer', 'pencil', 'eraser', 'select'];
+        const availableTools = ['pointer', 'pencil', 'eraser'];
         const invalidTools = this.enabledTools.filter(tool => !availableTools.includes(tool));
         if (invalidTools.length > 0) {
             console.warn(`Invalid tools specified: ${invalidTools.join(', ')}`);
             this.enabledTools = this.enabledTools.filter(tool => availableTools.includes(tool));
         }
-        
+
         // Ensure at least one tool is enabled
         if (this.enabledTools.length === 0) {
             this.enabledTools = ['pencil'];
@@ -110,13 +124,8 @@ export class CanvasConfig {
         if (this.tools.eraser.hardness < 0 || this.tools.eraser.hardness > 1) {
             this.tools.eraser.hardness = 0.8;
         }
-        
-        // Validate select config
-        if (this.tools.select.selectionOpacity < 0 || this.tools.select.selectionOpacity > 1) {
-            this.tools.select.selectionOpacity = 0.3;
-        }
     }
-    
+
     /**
      * Update configuration
      * @param {Object} updates - Configuration updates
@@ -166,7 +175,8 @@ export class CanvasConfig {
             enableKeyboardShortcuts: this.enableKeyboardShortcuts,
             enableMultiTouch: this.enableMultiTouch,
             tools: JSON.parse(JSON.stringify(this.tools)),
-            theme: { ...this.theme }
+            theme: { ...this.theme },
+            selection: JSON.parse(JSON.stringify(this.selection))
         });
     }
     
@@ -188,7 +198,8 @@ export class CanvasConfig {
             enableKeyboardShortcuts: this.enableKeyboardShortcuts,
             enableMultiTouch: this.enableMultiTouch,
             tools: this.tools,
-            theme: this.theme
+            theme: this.theme,
+            selection: this.selection
         };
     }
     

package/canvas/core/omdCanvas.js

@@ -3,7 +3,6 @@ import { EventManager } from '../events/eventManager.js';
 import { ToolManager } from '../tools/toolManager.js';
 import { PencilTool } from '../tools/PencilTool.js';
 import { EraserTool } from '../tools/EraserTool.js';
-import { SelectTool } from '../tools/SelectTool.js';
 import { PointerTool } from '../tools/PointerTool.js';
 import { Cursor } from '../ui/cursor.js';
 import { Toolbar } from '../ui/toolbar.js';
@@ -176,10 +175,6 @@ export class omdCanvas {
         if (this.config.enabledTools.includes('eraser')) {
             this.toolManager.registerTool('eraser', new EraserTool(this));
         }
-        if (this.config.enabledTools.includes('select')) {
-            this.toolManager.registerTool('select', new SelectTool(this));
-        }
-        
         // Set default tool
         if (this.config.defaultTool && this.config.enabledTools.includes(this.config.defaultTool)) {
             this.toolManager.setActiveTool(this.config.defaultTool);
@@ -204,6 +199,13 @@ export class omdCanvas {
         if (this.config.enableFocusFrames) {
             this.focusFrameManager = new FocusFrameManager(this);
         }
+
+        // Apply any selection styles defined in config to the ResizeHandleManager
+        // (PointerTool registers the manager on canvas.resizeHandleManager during its constructor)
+        if (this.resizeHandleManager && this.config.selection) {
+            this.resizeHandleManager.setSelectionStyle(this.config.selection.border);
+            this.resizeHandleManager.setHandleStyle(this.config.selection.handle);
+        }
     }
     
     /**
@@ -552,4 +554,42 @@ export class omdCanvas {
         this.isDestroyed = true;
         this.emit('destroyed');
     }
-} 
+    /**
+     * Style the selection border shown when an OMD visual is selected.
+     * Can be called at any time; changes take effect immediately.
+     * @param {Object} style
+     * @param {string}  [style.color]        - Border stroke colour (e.g. '#007bff')
+     * @param {number}  [style.width]        - Border stroke width in px
+     * @param {string}  [style.dasharray]    - SVG stroke-dasharray (e.g. '4,2' or 'none')
+     * @param {number}  [style.cornerRadius] - Border corner radius
+     */
+    setSelectionStyle(style = {}) {
+        if (this.resizeHandleManager) {
+            this.resizeHandleManager.setSelectionStyle(style);
+        }
+        // Persist into config so clones / serialisation reflect the change
+        if (this.config.selection?.border) {
+            Object.assign(this.config.selection.border, style);
+        }
+    }
+
+    /**
+     * Style the resize handles shown when an OMD visual is selected.
+     * Can be called at any time; changes take effect immediately.
+     * @param {Object} style
+     * @param {number}  [style.size]         - Handle size in px
+     * @param {string}  [style.color]        - Handle fill colour
+     * @param {string}  [style.strokeColor]  - Handle border colour
+     * @param {number}  [style.strokeWidth]  - Handle border width in px
+     * @param {number}  [style.cornerRadius] - Handle corner radius (0 = square, size/2 = circle)
+     */
+    setHandleStyle(style = {}) {
+        if (this.resizeHandleManager) {
+            this.resizeHandleManager.setHandleStyle(style);
+        }
+        // Persist into config
+        if (this.config.selection?.handle) {
+            Object.assign(this.config.selection.handle, style);
+        }
+    }
+} 

package/canvas/features/resizeHandleManager.js

@@ -24,7 +24,7 @@ export class ResizeHandleManager {
         // Resize constraints
         this.minSize = 20;
         this.maxSize = 800;
-        this.maintainAspectRatio = false; // Can be toggled with shift key
+        this.maintainAspectRatio = true; // Always maintain aspect ratio by default
     }
     
     /**
@@ -195,25 +195,23 @@ export class ResizeHandleManager {
                 break;
         }
         
-        // Maintain aspect ratio if requested
+        // Maintain aspect ratio — use the larger delta to drive the resize
         if (this.maintainAspectRatio) {
             const aspectRatio = startWidth / startHeight;
-            
-            if (handle.type.includes('e') || handle.type.includes('w')) {
-                // Width-based resize
+            const widthChange = Math.abs(newWidth - startWidth);
+            const heightChange = Math.abs(newHeight - startHeight);
+
+            if (widthChange >= heightChange) {
                 newHeight = newWidth / aspectRatio;
-            } else if (handle.type.includes('n') || handle.type.includes('s')) {
-                // Height-based resize
-                newWidth = newHeight * aspectRatio;
+                // Correct offsetY for top-anchored corners
+                if (handle.type.includes('n')) {
+                    offsetY = startHeight - newHeight;
+                }
             } else {
-                // Corner resize - use the dimension with larger change
-                const widthChange = Math.abs(newWidth - startWidth);
-                const heightChange = Math.abs(newHeight - startHeight);
-                
-                if (widthChange > heightChange) {
-                    newHeight = newWidth / aspectRatio;
-                } else {
-                    newWidth = newHeight * aspectRatio;
+                newWidth = newHeight * aspectRatio;
+                // Correct offsetX for left-anchored corners
+                if (handle.type.includes('w')) {
+                    offsetX = startWidth - newWidth;
                 }
             }
         }
@@ -264,6 +262,68 @@ export class ResizeHandleManager {
         this.resizeData = null;
     }
     
+    /**
+     * Style the selection border.
+     * @param {Object} style
+     * @param {string}  [style.color]       - Stroke colour of the border (e.g. '#007bff')
+     * @param {number}  [style.width]       - Stroke width in px
+     * @param {string}  [style.dasharray]   - SVG stroke-dasharray value (e.g. '4,2' or 'none')
+     * @param {number}  [style.cornerRadius]- rx/ry corner radius of the border rect
+     */
+    setSelectionStyle({ color, width, dasharray, cornerRadius } = {}) {
+        if (color !== undefined)       this.selectionBorderColor = color;
+        if (width !== undefined)       this.selectionBorderWidth = width;
+        if (dasharray !== undefined)   this.selectionBorderDasharray = dasharray;
+        if (cornerRadius !== undefined) this.selectionBorderCornerRadius = cornerRadius;
+
+        // Re-apply to live border if one exists
+        if (this.selectionBorder) {
+            this.selectionBorder.setAttribute('stroke', this.selectionBorderColor);
+            this.selectionBorder.setAttribute('stroke-width', this.selectionBorderWidth);
+            this.selectionBorder.setAttribute('stroke-dasharray',
+                this.selectionBorderDasharray !== undefined ? this.selectionBorderDasharray : '4,2');
+            if (this.selectionBorderCornerRadius !== undefined) {
+                this.selectionBorder.setAttribute('rx', this.selectionBorderCornerRadius);
+                this.selectionBorder.setAttribute('ry', this.selectionBorderCornerRadius);
+            }
+        }
+    }
+
+    /**
+     * Style the resize handles.
+     * @param {Object} style
+     * @param {number}  [style.size]         - Handle square size in px
+     * @param {string}  [style.color]        - Fill colour
+     * @param {string}  [style.strokeColor]  - Border colour
+     * @param {number}  [style.strokeWidth]  - Border width
+     * @param {number}  [style.cornerRadius] - rx/ry corner radius (0 = square, size/2 = circle)
+     */
+    setHandleStyle({ size, color, strokeColor, strokeWidth, cornerRadius } = {}) {
+        if (size !== undefined)         this.handleSize = size;
+        if (color !== undefined)        this.handleColor = color;
+        if (strokeColor !== undefined)  this.handleStrokeColor = strokeColor;
+        if (strokeWidth !== undefined)  this.handleStrokeWidth = strokeWidth;
+        if (cornerRadius !== undefined) this.handleCornerRadius = cornerRadius;
+
+        // Re-apply to any live handles
+        const radius = this.handleCornerRadius !== undefined
+            ? this.handleCornerRadius
+            : 1;
+        this.handles.forEach(h => {
+            h.element.setAttribute('width',  this.handleSize);
+            h.element.setAttribute('height', this.handleSize);
+            h.element.setAttribute('fill',   this.handleColor);
+            h.element.setAttribute('stroke', this.handleStrokeColor);
+            h.element.setAttribute('stroke-width', this.handleStrokeWidth);
+            h.element.setAttribute('rx', radius);
+        });
+
+        // Reposition so centres stay correct after a size change
+        if (this.handles.length > 0) {
+            this._updateHandlePositions();
+        }
+    }
+
     /**
      * Update handle positions for currently selected element (called externally)
      */
@@ -304,7 +364,12 @@ export class ResizeHandleManager {
         this.selectionBorder.setAttribute('fill', 'none');
         this.selectionBorder.setAttribute('stroke', this.selectionBorderColor);
         this.selectionBorder.setAttribute('stroke-width', this.selectionBorderWidth);
-        this.selectionBorder.setAttribute('stroke-dasharray', '4,2');
+        this.selectionBorder.setAttribute('stroke-dasharray',
+            this.selectionBorderDasharray !== undefined ? this.selectionBorderDasharray : '4,2');
+        if (this.selectionBorderCornerRadius !== undefined) {
+            this.selectionBorder.setAttribute('rx', this.selectionBorderCornerRadius);
+            this.selectionBorder.setAttribute('ry', this.selectionBorderCornerRadius);
+        }
         this.selectionBorder.style.pointerEvents = 'none';
         this.selectionBorder.classList.add('omd-selection-border');
         
@@ -346,15 +411,12 @@ export class ResizeHandleManager {
     _createResizeHandles() {
         if (!this.selectedElement) return;
         
+        // Only corner handles — mid-edge handles would break aspect ratio
         const handleTypes = [
             { type: 'nw', pos: 'top-left' },
-            { type: 'n', pos: 'top-center' },
             { type: 'ne', pos: 'top-right' },
-            { type: 'e', pos: 'middle-right' },
             { type: 'se', pos: 'bottom-right' },
-            { type: 's', pos: 'bottom-center' },
-            { type: 'sw', pos: 'bottom-left' },
-            { type: 'w', pos: 'middle-left' }
+            { type: 'sw', pos: 'bottom-left' }
         ];
         
         handleTypes.forEach(handleDef => {
@@ -371,12 +433,13 @@ export class ResizeHandleManager {
     _createHandle(type, position) {
         const handle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
         
+        const cornerRadius = this.handleCornerRadius !== undefined ? this.handleCornerRadius : 1;
         handle.setAttribute('width', this.handleSize);
         handle.setAttribute('height', this.handleSize);
         handle.setAttribute('fill', this.handleColor);
         handle.setAttribute('stroke', this.handleStrokeColor);
         handle.setAttribute('stroke-width', this.handleStrokeWidth);
-        handle.setAttribute('rx', 1);
+        handle.setAttribute('rx', cornerRadius);
         handle.style.cursor = this.getCursorForHandle(type);
         handle.classList.add('resize-handle', `resize-handle-${type}`);
         

package/canvas/index.js

@@ -12,7 +12,6 @@ export { ToolManager } from './tools/toolManager.js';
 export { Tool } from './tools/tool.js';
 export { PencilTool } from './tools/PencilTool.js';
 export { EraserTool } from './tools/EraserTool.js';
-export { SelectTool } from './tools/SelectTool.js';
 
 // UI components
 export { Toolbar } from './ui/toolbar.js';

package/canvas/tools/PointerTool.js

@@ -3,14 +3,15 @@ import { BoundingBox } from '../utils/boundingBox.js';
 import { Stroke } from '../drawing/stroke.js';
 import { ResizeHandleManager } from '../features/resizeHandleManager.js';
 import {omdColor} from '../../src/omdColor.js'; 
+
 const SELECTION_TOLERANCE = 10;
 const SELECTION_COLOR = '#007bff';
 const SELECTION_OPACITY = 0.3;
 
 /**
- * Pointer/Select tool
- * Combined tool for browsing, selecting, moving, and interacting with elements.
- * @extends Tool
+ * Pointer tool
+ * Combined functionality of Pointer and Select tools.
+ * Allows selecting, moving, deleting items, and interacting with components.
  */
 export class PointerTool extends Tool {
     /**
@@ -25,10 +26,10 @@ export class PointerTool extends Tool {
         });
 
         this.displayName = 'Pointer';
-        this.description = 'Select, move, and interact';
+        this.description = 'Select and interact with components';
         this.icon = 'pointer';
         this.shortcut = 'V';
-        this.category = 'selection';
+        this.category = 'navigation';
 
         /** @private */
         this.isSelecting = false;
@@ -96,12 +97,6 @@ export class PointerTool extends Tool {
                 this.dragStartPoint = { x: event.x, y: event.y };
                 this.potentialDeselect = segmentSelection;
                 
-                // Also enable OMD dragging if we have selected OMD elements
-                if (this.selectedOMDElements.size > 0) {
-                    this.isDraggingOMD = true;
-                    this.startPoint = { x: event.x, y: event.y };
-                }
-                
                 // Set isDrawing so we get pointermove events
                 if (this.canvas.eventManager) {
                     this.canvas.eventManager.isDrawing = true;
@@ -134,13 +129,6 @@ export class PointerTool extends Tool {
                 this.draggedOMDElement = omdElement; // Primary drag target
                 this.startPoint = { x: event.x, y: event.y };
                 
-                // Also enable stroke dragging if we have selected strokes
-                if (this.selectedSegments.size > 0) {
-                    this.isDraggingStrokes = true;
-                    this.dragStartPoint = { x: event.x, y: event.y };
-                    this.hasSeparatedForDrag = false;
-                }
-                
                 // Show resize handles if this is the only selected element
                 if (this.selectedOMDElements.size === 1) {
                     this.resizeHandleManager.selectElement(omdElement);
@@ -391,7 +379,7 @@ export class PointerTool extends Tool {
         // Ensure cursor is visible and properly set
         if (this.canvas.cursor) {
             this.canvas.cursor.show();
-            this.canvas.cursor.setShape('pointer'); // Use pointer arrow cursor
+            this.canvas.cursor.setShape('pointer');
         }
         
         // Clear any existing selection to start fresh
@@ -434,7 +422,7 @@ export class PointerTool extends Tool {
             );
         }
         
-        return 'default'; // Use default cursor instead of 'select'
+        return 'pointer'; 
     }
 
     /**
@@ -677,11 +665,11 @@ export class PointerTool extends Tool {
     
     /**
      * Gets the bounds of an OMD element including transform
-     * Uses clip paths for accurate bounds when present (e.g., coordinate planes)
      * @private
      */
     _getOMDElementBounds(item) {
         try {
+            const bbox = item.getBBox();
             const transform = item.getAttribute('transform') || '';
             let offsetX = 0, offsetY = 0, scaleX = 1, scaleY = 1;
             
@@ -697,68 +685,6 @@ export class PointerTool extends Tool {
                 scaleY = scaleMatch[2] ? parseFloat(scaleMatch[2]) : scaleX;
             }
             
-            // Get the content element (usually an SVG inside the wrapper)
-            const content = item.firstElementChild;
-            let bbox;
-            
-            if (content) {
-                // Check for clip paths to get accurate visible bounds
-                // This is important for coordinate planes where graph lines extend beyond visible area
-                const clipPaths = content.querySelectorAll('clipPath');
-                
-                if (clipPaths.length > 0) {
-                    let maxArea = 0;
-                    let clipBounds = null;
-                    
-                    for (const clipPath of clipPaths) {
-                        const rect = clipPath.querySelector('rect');
-                        if (rect) {
-                            const w = parseFloat(rect.getAttribute('width')) || 0;
-                            const h = parseFloat(rect.getAttribute('height')) || 0;
-                            const x = parseFloat(rect.getAttribute('x')) || 0;
-                            const y = parseFloat(rect.getAttribute('y')) || 0;
-                            
-                            const area = w * h;
-                            if (area > maxArea) {
-                                maxArea = area;
-                                
-                                // Find the transform on the content group
-                                const contentGroup = content.firstElementChild;
-                                let tx = 0, ty = 0;
-                                if (contentGroup) {
-                                    const contentTransform = contentGroup.getAttribute('transform');
-                                    if (contentTransform) {
-                                        const contentTranslateMatch = contentTransform.match(/translate\(\s*([^,]+)(?:,\s*([^)]+))?\s*\)/);
-                                        if (contentTranslateMatch) {
-                                            tx = parseFloat(contentTranslateMatch[1]) || 0;
-                                            ty = parseFloat(contentTranslateMatch[2]) || 0;
-                                        }
-                                    }
-                                }
-                                
-                                clipBounds = {
-                                    x: x + tx,
-                                    y: y + ty,
-                                    width: w,
-                                    height: h
-                                };
-                            }
-                        }
-                    }
-                    
-                    if (clipBounds) {
-                        bbox = clipBounds;
-                    }
-                }
-                
-                // Fallback to getBBox if no clip path found
-                if (!bbox) {
-                    bbox = content.getBBox();
-                }
-            } else {
-                bbox = item.getBBox();
-            }
-            
             return {
                 x: offsetX + (bbox.x * scaleX),
                 y: offsetY + (bbox.y * scaleY),
@@ -814,20 +740,42 @@ export class PointerTool extends Tool {
                 continue;
             }
             try {
-                // Use the shared bounds calculation method (handles clip paths correctly)
-                const itemBounds = this._getOMDElementBounds(item);
+                // Get the bounding box of the item
+                const bbox = item.getBBox();
                 
-                if (itemBounds) {
-                    // Add some padding for easier clicking
-                    const padding = 10;
-                    
-                    // Check if point is within the bounds (with padding)
-                    if (x >= itemBounds.x - padding && 
-                        x <= itemBounds.x + itemBounds.width + padding &&
-                        y >= itemBounds.y - padding && 
-                        y <= itemBounds.y + itemBounds.height + padding) {
-                        return item;
-                    }
+                // Parse transform to get the actual position
+                const transform = item.getAttribute('transform') || '';
+                let offsetX = 0, offsetY = 0, scaleX = 1, scaleY = 1;
+                
+                // Parse translate
+                const translateMatch = transform.match(/translate\(\s*([^,]+)\s*,\s*([^)]+)\s*\)/);
+                if (translateMatch) {
+                    offsetX = parseFloat(translateMatch[1]) || 0;
+                    offsetY = parseFloat(translateMatch[2]) || 0;
+                }
+                
+                // Parse scale
+                const scaleMatch = transform.match(/scale\(\s*([^,)]+)(?:\s*,\s*([^)]+))?\s*\)/);
+                if (scaleMatch) {
+                    scaleX = parseFloat(scaleMatch[1]) || 1;
+                    scaleY = scaleMatch[2] ? parseFloat(scaleMatch[2]) : scaleX;
+                }
+                
+                // Calculate the actual bounds including transform
+                const actualX = offsetX + (bbox.x * scaleX);
+                const actualY = offsetY + (bbox.y * scaleY);
+                const actualWidth = bbox.width * scaleX;
+                const actualHeight = bbox.height * scaleY;
+                
+                // Add some padding for easier clicking
+                const padding = 10;
+                
+                // Check if point is within the bounds (with padding)
+                if (x >= actualX - padding && 
+                    x <= actualX + actualWidth + padding &&
+                    y >= actualY - padding && 
+                    y <= actualY + actualHeight + padding) {
+                    return item;
                 }
             } catch (error) {
                 // Skip items that can't be measured (continue with next)
@@ -1024,6 +972,12 @@ export class PointerTool extends Tool {
             selectionLayer.removeChild(selectionLayer.firstChild);
         }
 
+        // If the selection is pure-OMD (no strokes), ResizeHandleManager already draws
+        // the selection border + handles — don't draw a second box on top of it.
+        if (this.selectedSegments.size === 0 && this.selectedOMDElements.size > 0) {
+            return;
+        }
+
         const bounds = this._getSelectionBounds();
         if (!bounds) return;
 
@@ -1320,3 +1274,4 @@ export class PointerTool extends Tool {
 
 }
 
+

package/canvas/ui/cursor.js

@@ -195,12 +195,10 @@ export class Cursor {
     _createPointerCursor() {
         const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
         group.setAttribute('data-shape', 'pointer');
-        // Center the hotspot (approx 14, 5) to 0,0
-        group.setAttribute('transform', 'translate(-14, -5)');
         
-        // Custom arrow pointer cursor
+        // Standard arrow pointer cursor
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M 29.699219 47 C 29.578125 47 29.457031 46.976563 29.339844 46.933594 C 29.089844 46.835938 28.890625 46.644531 28.78125 46.398438 L 22.945313 32.90625 L 15.683594 39.730469 C 15.394531 40.003906 14.96875 40.074219 14.601563 39.917969 C 14.238281 39.761719 14 39.398438 14 39 L 14 6 C 14 5.601563 14.234375 5.242188 14.601563 5.082031 C 14.964844 4.925781 15.390625 4.996094 15.683594 5.269531 L 39.683594 27.667969 C 39.972656 27.9375 40.074219 28.355469 39.945313 28.726563 C 39.816406 29.101563 39.480469 29.363281 39.085938 29.398438 L 28.902344 30.273438 L 35.007813 43.585938 C 35.117188 43.824219 35.128906 44.101563 35.035156 44.351563 C 34.941406 44.601563 34.757813 44.800781 34.515625 44.910156 L 30.113281 46.910156 C 29.980469 46.96875 29.84375 47 29.699219 47 Z');
+        path.setAttribute('d', 'M 2,2 L 2,16 L 7,11 L 10,18 L 12,17 L 9,10 L 16,10 Z');
         path.setAttribute('fill', 'white');
         path.setAttribute('stroke', '#000000');
         path.setAttribute('stroke-width', '1.2');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.16",
+  "version": "0.7.18",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -16,7 +16,7 @@
     "omd/",
     "docs/",
     "canvas/",
-    "jsvg/"  ,
+    "jsvg/",
     "npm-docs/",
     "README.md"
   ],
@@ -34,7 +34,7 @@
   "dependencies": {
     "@teachinglab/jsvg": "^0.1.1",
     "mathjs": "^14.5.2",
-    "openai": "6.6.0" 
+    "openai": "6.6.0"
   },
   "scripts": {
     "dev": "npm run build:docs && vite",