@teachinglab/omd 0.6.0 → 0.6.2

package/omd/utils/omdStepVisualizerInteractiveSteps.js

@@ -1,685 +1,685 @@
-import { omdColor } from '../../src/omdColor.js';
-import { jsvgLayoutGroup, jsvgTextBox, jsvgRect } from '@teachinglab/jsvg';
-/**
- * Creates interactive step elements using jsvgLayoutGroup for multiple simplification steps
- * Each step is a separate jsvgTextBox that can have hover interactions with the omdSequence
- */
-export class omdStepVisualizerInteractiveSteps {
-    constructor(stepVisualizer, simplificationData, stylingOptions = {}) {
-        this.stepVisualizer = stepVisualizer;
-        this.simplificationData = simplificationData || {};
-        this.stylingOptions = stylingOptions || {};
-        this.messages = this._extractMessages(simplificationData);
-        this.ruleNames = this._extractRuleNames(simplificationData);
-        this.stepElements = [];
-        this.layoutGroup = new jsvgLayoutGroup();
-        this.layoutGroup.setSpacer(4); // Minimal spacing for tight layout
-
-        // Styling configuration with defaults that can be overridden
-        this.stepWidth = this.stylingOptions.maxWidth || 300; // Use maxWidth from styling options
-        this.baseStepHeight = 30; // Minimal height for tight fit
-        this.headerHeight = 28; // Minimal header height
-        this.fontSize = this.stylingOptions.fontSize || 14;
-        this.smallFontSize = 12;
-
-        this.setupLayoutGroup();
-        this.createStepElements();
-    }
-
-    /**
-     * Extracts messages from simplification data
-     * @param {Object} data - Simplification data
-     * @returns {Array} Array of clean messages
-     * @private
-     */
-    _extractMessages(data) {
-        if (!data) return [];
-
-        let messages = [];
-        if (data.rawMessages && Array.isArray(data.rawMessages)) {
-            messages = data.rawMessages;
-        } else if (data.message) {
-            messages = [data.message];
-        }
-
-        // Clean up messages - remove HTML tags and bullet points
-        return messages.map(msg => {
-            let clean = msg.replace(/<[^>]*>/g, ''); // Strip HTML tags
-            clean = clean.replace(/^[•·◦▪▫‣⁃]\s*/, ''); // Strip bullet points
-            return clean.trim();
-        });
-    }
-
-    /**
-     * Extracts rule names from simplification data
-     * @param {Object} data - Simplification data
-     * @returns {Array} Array of rule names
-     * @private
-     */
-    _extractRuleNames(data) {
-        if (!data) return ['Operation'];
-
-        if (data.ruleNames && Array.isArray(data.ruleNames)) {
-            return data.ruleNames;
-        }
-
-        // Default based on data type
-        if (data.multipleSimplifications) {
-            return ['Multiple Rules'];
-        } else {
-            return ['Operation'];
-        }
-    }
-
-    /**
-     * Sets up the main layout group properties
-     * @private
-     */
-    setupLayoutGroup() {
-        // Add background using styling options for the entire step group
-        this.backgroundRect = new jsvgRect();
-        this.backgroundRect.setWidthAndHeight(this.stepWidth + 16, 60); // Minimal padding and height for tight fit
-
-        // Apply styling options to the background container
-        const backgroundColor = this.stylingOptions.backgroundColor || omdColor.lightGray;
-        const borderColor = this.stylingOptions.borderColor || '#e0e0e0';
-        const borderWidth = this.stylingOptions.borderWidth || 1;
-        const borderRadius = this.stylingOptions.borderRadius || 6;
-
-        this.backgroundRect.setFillColor(backgroundColor);
-        this.backgroundRect.setStrokeColor(borderColor);
-        this.backgroundRect.setStrokeWidth(borderWidth);
-        this.backgroundRect.setCornerRadius(borderRadius);
-        this.backgroundRect.setPosition(0, 0); // Start at origin, not negative offset
-
-        // Apply drop shadow to the SVG element if requested
-        if (this.stylingOptions.dropShadow && this.backgroundRect.svgObject) {
-            this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
-        }
-
-        this.layoutGroup.addChild(this.backgroundRect);
-    }
-
-    /**
-     * Creates individual step elements from the messages array
-     * @private
-     */
-    createStepElements() {
-        if (!this.messages || this.messages.length === 0) return;
-
-        // Create content container to separate from background
-        this.contentGroup = new jsvgLayoutGroup();
-        this.contentGroup.setSpacer(2); // Minimal spacing between elements
-        this.contentGroup.setPosition(8, 8); // Minimal offset for tight fit
-
-        if (this.messages.length === 1) {
-
-            this.createSingleStepElement(this.messages[0], 0);
-        } else {
-
-            this.createMultipleStepElements();
-        }
-
-        this.contentGroup.doVerticalLayout();
-        this.layoutGroup.addChild(this.contentGroup);
-        this.updateBackgroundSize();
-
-        // Apply drop shadow after SVG element is created
-        setTimeout(() => {
-            this.applyDropShadowIfNeeded();
-        }, 10);
-
-        // Debug logging
-
-    }
-
-    /**
-     * Creates a single step element with header
-     * @param {string} message - The step message
-     * @param {number} index - Step index
-     * @private
-     */
-    createSingleStepElement(message, index) {
-        // Create header for single step using rule name
-        const ruleName = this.ruleNames[0] || 'Operation';
-        const headerBox = this.createHeaderBox(ruleName + ':');
-        this.contentGroup.addChild(headerBox);
-
-        // Create the step box
-        const stepBox = this.createStepTextBox(message, index, false);
-        this.stepElements.push(stepBox);
-        this.contentGroup.addChild(stepBox);
-    }
-
-    /**
-     * Creates multiple step elements with header
-     * @private
-     */
-    createMultipleStepElements() {
-        // Only create header for truly multiple steps (more than 1)
-        if (this.messages.length > 1) {
-            // Create header showing rule names
-            let headerText;
-            if (this.ruleNames.length === 1) {
-                headerText = this.ruleNames[0] + ':';
-            } else if (this.ruleNames.length <= 3) {
-                headerText = this.ruleNames.join(' + ') + ':';
-            } else {
-                headerText = `${this.ruleNames.length} Rules Applied:`;
-            }
-
-            const headerBox = this.createHeaderBox(headerText);
-            this.contentGroup.addChild(headerBox);
-        }
-
-        // Create individual step elements
-        this.messages.forEach((message, index) => {
-            const stepBox = this.createStepTextBox(message, index, this.messages.length > 1);
-            this.stepElements.push(stepBox);
-            this.contentGroup.addChild(stepBox);
-        });
-    }
-
-    /**
-     * Creates a header box with custom text
-     * @param {string} headerText - Text to display in header
-     * @returns {jsvgTextBox} Header text box
-     * @private
-     */
-    createHeaderBox(headerText = 'Operation:') {
-        const headerBox = new jsvgTextBox();
-        const headerHeight = Math.max(this.headerHeight, 50); // Increased minimum height
-
-
-        headerBox.setWidthAndHeight(this.stepWidth, headerHeight);
-        headerBox.setText(headerText);
-        headerBox.setFontSize(this.fontSize);
-        headerBox.setFontWeight('600');
-        headerBox.setFontColor('#2c3e50');
-
-        // Style the header with border and minimal spacing
-        if (headerBox.div) {
-            Object.assign(headerBox.div.style, {
-                borderBottom: '1px solid #e0e0e0',
-                padding: '6px 8px 4px 8px', // Minimal padding for tight fit
-                margin: '0',
-                boxSizing: 'border-box',
-                minHeight: `${headerHeight}px`,
-                overflow: 'visible',
-                whiteSpace: 'normal',
-                wordWrap: 'break-word',
-                overflowWrap: 'break-word',
-                width: '100%',
-                lineHeight: '1.2', // Tight line height
-                fontFamily: 'Albert Sans, Arial, sans-serif',
-                display: 'flex',
-                alignItems: 'center', // Center text vertically
-                justifyContent: 'flex-start'
-            });
-        }
-
-
-        return headerBox;
-    }
-
-    /**
-     * Creates an individual step text box
-     * @param {string} message - Step message
-     * @param {number} index - Step index
-     * @param {boolean} isMultiple - Whether this is part of multiple steps
-     * @returns {jsvgTextBox} Step text box
-     * @private
-     */
-    createStepTextBox(message, index, isMultiple) {
-        const stepBox = new jsvgTextBox();
-        // Calculate actual height needed for content with minimal padding
-        const contentHeight = this.calculateContentHeight(message, index, isMultiple);
-        const height = Math.max(contentHeight, this.baseStepHeight); // Use calculated height
-
-
-
-        stepBox.setWidthAndHeight(this.stepWidth, height);
-        stepBox.setFontSize(this.fontSize);
-        stepBox.setFontColor('#2c3e50');
-
-        // Store step data for interactions
-        stepBox.stepIndex = index;
-        stepBox.stepMessage = message;
-        stepBox.isMultiple = isMultiple;
-
-        // Format the step content
-        const formattedContent = this.formatStepContent(message, index, isMultiple);
-
-        // Apply styling and content
-        if (stepBox.div) {
-            this.applyStepStyling(stepBox, formattedContent, isMultiple, height);
-            this.setupStepInteractions(stepBox);
-
-            // Force the jsvgTextBox to respect our sizing
-            stepBox.div.style.height = `${height}px`;
-            stepBox.div.style.minHeight = `${height}px`;
-            stepBox.div.style.display = 'block';
-
-            // Add a more aggressive override after a delay to ensure it sticks
-            if (stepBox.div) {
-                const actualPadding = this.stylingOptions.padding || 6; // Get padding from styling options
-                stepBox.div.style.cssText += `
-                        height: ${height}px !important;
-                        min-height: ${height}px !important;
-                        max-height: ${height}px !important;
-                        padding: ${actualPadding}px ${actualPadding + 2}px !important;
-                        line-height: 1.3 !important;
-                        font-size: ${this.fontSize}px !important;
-                        font-family: Albert Sans, Arial, sans-serif !important;
-                        box-sizing: border-box !important;
-                        display: flex !important;
-                        flex-direction: column !important;
-                        justify-content: center !important;
-                        align-items: flex-start !important;
-                        word-spacing: normal !important;
-                        letter-spacing: normal !important;
-                        transition: none !important;
-                        transform: none !important;
-                        animation: none !important;
-                    `;
-            }
-
-        }
-
-        return stepBox;
-    }
-
-    /**
-     * Formats the content for a step
-     * @param {string} message - Raw message
-     * @param {number} index - Step index
-     * @param {boolean} isMultiple - Whether part of multiple steps
-     * @returns {string} Formatted content
-     * @private
-     */
-    formatStepContent(message, index, isMultiple) {
-        const cleanMessage = message.trim();
-        let content = '';
-
-        // Only show step numbers for multiple steps
-        if (isMultiple && this.messages.length > 1) {
-            content += `<div class="step-number" style="color: #666; font-size: ${this.smallFontSize}px; margin: 0 0 2px 0; font-weight: 500; line-height: 1.2; font-family: Albert Sans, Arial, sans-serif;">Step ${index + 1}</div>`; // Minimal margin
-        }
-
-        content += '<div class="step-content" style="display: flex; align-items: center; gap: 6px; margin: 0; width: 100%; line-height: 1.3; font-family: Albert Sans, Arial, sans-serif;">'; // Center align and minimal spacing
-        content += '<span class="bullet" style="color: #666; font-weight: bold; flex-shrink: 0; font-size: 10px;">•</span>'; // Smaller bullet
-        content += '<div class="step-text" style="margin: 0; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; padding: 0;">';
-
-        // Parse operation details
-        if (this.isOperationMessage(cleanMessage)) {
-            const action = this.extractOperationAction(cleanMessage);
-            const value = this.extractOperationValue(cleanMessage);
-            const valueNode = this.extractOperationValueNode(cleanMessage);
-
-            if (action && (value || valueNode)) {
-                content += `<span style="font-weight: 600; color: #2c3e50; margin-right: 4px;">${action}</span> `;
-                const displayValue = valueNode ? valueNode.toString() : value;
-                content += `<span style="background: #f5f5f5; padding: 3px 8px; border-radius: 4px; font-family: 'Courier New', monospace; color: #d63384; margin: 0 3px;">${displayValue}</span>`;
-                content += `<span style="color: #666; font-size: ${this.smallFontSize}px; margin-left: 4px;"> to both sides</span>`;
-            } else {
-                content += `<span style="padding: 2px 0;">${cleanMessage}</span>`;
-            }
-        } else {
-            content += `<span style="font-weight: 500; padding: 2px 0;">${cleanMessage}</span>`;
-        }
-
-        content += '</div></div>';
-        return content;
-    }
-
-    /**
-     * Applies styling to a step text box
-     * @param {jsvgTextBox} stepBox - The step box
-     * @param {string} content - Formatted content
-     * @param {boolean} isMultiple - Whether part of multiple steps
-     * @param {number} height - The calculated height for the step box
-     * @private
-     */
-    applyStepStyling(stepBox, content, isMultiple, height) {
-        const backgroundColor = this.stylingOptions.backgroundColor || omdColor.white;
-        const borderColor = this.stylingOptions.borderColor || omdColor.lightGray;
-        const borderWidth = this.stylingOptions.borderWidth || 1;
-        const borderRadius = this.stylingOptions.borderRadius || 4;
-        const padding = this.stylingOptions.padding || 6; // Minimal padding for tight fit
-
-        const baseStyles = {
-            padding: `${padding}px ${padding + 2}px !important`, // Minimal padding for tight fit
-            borderRadius: `${borderRadius}px`,
-            border: `${borderWidth}px solid ${borderColor}`,
-            backgroundColor: backgroundColor,
-            cursor: 'pointer',
-            transition: 'none !important', // Explicitly disable all transitions
-            transform: 'none !important', // Explicitly disable all transforms
-            animation: 'none !important', // Explicitly disable all animations
-            lineHeight: '1.3 !important', // Tight line height
-            margin: '0',
-            boxSizing: 'border-box',
-            overflow: 'visible',
-            minHeight: `${height}px !important`, // Use calculated height
-            height: `${height}px !important`, // Fixed height to content
-            width: '100%',
-            whiteSpace: 'normal',
-            wordWrap: 'break-word',
-            overflowWrap: 'break-word',
-            maxWidth: '100%',
-            fontSize: `${this.fontSize}px !important`, // Force font size
-            fontFamily: 'Albert Sans, Arial, sans-serif !important', // Albert Sans font
-            display: 'flex !important', // Use flex for centering
-            flexDirection: 'column !important',
-            justifyContent: 'center !important', // Center content vertically
-            alignItems: 'flex-start !important'
-        };
-
-        // Add drop shadow if requested - but NOT to individual step boxes
-        // The drop shadow should only be on the outer background rectangle
-        // Remove any previous drop shadow from individual steps
-        if (stepBox.div) {
-            stepBox.div.style.boxShadow = 'none';
-        }
-
-        // Set font family if specified
-        if (this.stylingOptions.fontFamily) {
-            baseStyles.fontFamily = this.stylingOptions.fontFamily;
-        }
-
-        Object.assign(stepBox.div.style, baseStyles);
-        stepBox.div.innerHTML = content;
-
-        // Additional CSS to force proper text spacing
-        if (stepBox.div) {
-            stepBox.div.style.cssText += `
-                    padding: ${padding + 6}px ${padding + 10}px !important;
-                    line-height: 1.7 !important;
-                    min-height: ${this.baseStepHeight + 20}px !important;
-                    font-size: ${this.fontSize}px !important;
-                    display: flex !important;
-                    flex-direction: column !important;
-                `;
-
-            // Apply proper layout to nested content - DO NOT use position absolute
-            const contentElements = stepBox.div.querySelectorAll('.step-content, .step-text');
-            contentElements.forEach(el => {
-                el.style.lineHeight = '1.3 !important';
-                el.style.margin = '0 !important';
-                el.style.fontFamily = 'Albert Sans, Arial, sans-serif !important';
-                // Remove any position absolute that might be inherited
-                el.style.position = 'static !important';
-            });
-
-            // Ensure bullet points and text spans stay in normal flow
-            const allSpans = stepBox.div.querySelectorAll('span');
-            allSpans.forEach(span => {
-                span.style.position = 'static !important';
-            });
-        }
-
-        // Force a reflow to ensure proper sizing
-        stepBox.div.offsetHeight;
-    }
-
-    /**
-     * Sets up hover and click interactions for a step
-     * @param {jsvgTextBox} stepBox - The step box
-     * @private
-     */
-    setupStepInteractions(stepBox) {
-        // Store the original background color to restore on mouseleave
-        const originalBackgroundColor = stepBox.div.style.backgroundColor || '';
-
-        // Hover effects
-        stepBox.div.addEventListener('mouseenter', () => {
-            stepBox.div.style.backgroundColor = omdColor.mediumGray; // Slightly darker version of explainColor
-
-            // Call hover callback if provided
-            this.onStepHover?.(stepBox.stepIndex, stepBox.stepMessage, true);
-        });
-
-        stepBox.div.addEventListener('mouseleave', () => {
-            // Restore the original background color instead of setting to transparent
-            stepBox.div.style.backgroundColor = originalBackgroundColor;
-
-            // Call hover callback if provided
-            this.onStepHover?.(stepBox.stepIndex, stepBox.stepMessage, false);
-        });
-
-        // Click interactions
-        stepBox.div.addEventListener('click', () => {
-            this.onStepClick?.(stepBox.stepIndex, stepBox.stepMessage);
-        });
-    }
-
-    /**
-     * Calculates the exact height needed for content with minimal padding
-     * @param {string} message - Step message
-     * @param {number} index - Step index
-     * @param {boolean} isMultiple - Whether part of multiple steps
-     * @returns {number} Tight-fitting height in pixels
-     * @private
-     */
-    calculateContentHeight(message, index, isMultiple) {
-        // Create a temporary element to measure actual text height
-        const tempDiv = document.createElement('div');
-        tempDiv.style.position = 'absolute';
-        tempDiv.style.visibility = 'hidden';
-        tempDiv.style.width = `${this.stepWidth - 16}px`; // Account for minimal padding
-        tempDiv.style.fontSize = `${this.fontSize}px`;
-        tempDiv.style.lineHeight = '1.3'; // Tight line height
-        tempDiv.style.fontFamily = 'Albert Sans, Arial, sans-serif';
-        tempDiv.style.whiteSpace = 'normal';
-        tempDiv.style.wordWrap = 'break-word';
-        tempDiv.style.overflowWrap = 'break-word';
-        tempDiv.style.padding = '6px 8px'; // Match the minimal padding
-        tempDiv.style.boxSizing = 'border-box';
-        tempDiv.style.display = 'flex';
-        tempDiv.style.flexDirection = 'column';
-        tempDiv.style.justifyContent = 'center';
-
-        // Use actual formatted content for measurement
-        const formattedContent = this.formatStepContent(message, index, isMultiple);
-        tempDiv.innerHTML = formattedContent;
-
-        // Append to document to measure
-        document.body.appendChild(tempDiv);
-        const measuredHeight = tempDiv.offsetHeight;
-        document.body.removeChild(tempDiv);
-
-        // Return exact measured height with minimal buffer
-        return Math.max(this.baseStepHeight, measuredHeight + 2); // Just 2px buffer
-    }
-
-    /**
-     * Calculates the height needed for a step box (legacy method, kept for compatibility)
-     * @param {string} message - Step message
-     * @returns {number} Height in pixels
-     * @private
-     */
-    calculateStepHeight(message) {
-        // Use the new tight-fitting calculation
-        return this.calculateContentHeight(message, 0, false);
-    }
-
-    /**
-     * Updates the background rectangle size after layout
-     * @private
-     */
-    updateBackgroundSize() {
-        if (this.backgroundRect && this.contentGroup) {
-            const totalHeight = this.contentGroup.height + 16; // Minimal padding for tight fit
-            const totalWidth = this.stepWidth + 16; // Minimal padding for tight fit
-            this.backgroundRect.setWidthAndHeight(totalWidth, totalHeight);
-        }
-    }
-
-    /**
-     * Applies drop shadow to the background container if SVG element exists
-     * @private
-     */
-    applyDropShadowIfNeeded() {
-        if (this.stylingOptions.dropShadow && this.backgroundRect && this.backgroundRect.svgObject) {
-            this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
-        }
-    }
-
-    /**
-     * Sets callback for step hover events
-     * @param {Function} callback - Function called with (stepIndex, message, isEntering)
-     */
-    setOnStepHover(callback) {
-        this.onStepHover = callback;
-    }
-
-    /**
-     * Sets callback for step click events
-     * @param {Function} callback - Function called with (stepIndex, message)
-     */
-    setOnStepClick(callback) {
-        this.onStepClick = callback;
-    }
-
-    /**
-     * Gets the main layout group for adding to parent containers
-     * @returns {jsvgLayoutGroup} The layout group
-     */
-    getLayoutGroup() {
-        return this.layoutGroup;
-    }
-
-    /**
-     * Sets the position of the entire step group
-     * @param {number} x - X position
-     * @param {number} y - Y position
-     */
-    setPosition(x, y) {
-        this.layoutGroup.setPosition(x, y);
-    }
-
-    /**
-     * Gets the dimensions of the step group
-     * @returns {Object} Width and height
-     */
-    getDimensions() {
-        return {
-            width: this.backgroundRect ? this.backgroundRect.width : this.stepWidth + 16,
-            height: this.backgroundRect ? this.backgroundRect.height : 100
-        };
-    }
-
-    /**
-     * Updates the styling options and re-applies them to existing elements
-     * @param {Object} newStylingOptions - New styling options
-     */
-    updateStyling(newStylingOptions = {}) {
-        this.stylingOptions = { ...this.stylingOptions, ...newStylingOptions };
-
-        // Update width if maxWidth changed
-        if (newStylingOptions.maxWidth) {
-            this.stepWidth = newStylingOptions.maxWidth;
-        }
-
-        // Update font size if changed
-        if (newStylingOptions.fontSize) {
-            this.fontSize = newStylingOptions.fontSize;
-        }
-
-        // Update background container styling
-        if (this.backgroundRect) {
-            const backgroundColor = this.stylingOptions.backgroundColor || omdColor.lightGray;
-            const borderColor = this.stylingOptions.borderColor || '#e0e0e0';
-            const borderWidth = this.stylingOptions.borderWidth || 1;
-            const borderRadius = this.stylingOptions.borderRadius || 6;
-
-            this.backgroundRect.setFillColor(backgroundColor);
-            this.backgroundRect.setStrokeColor(borderColor);
-            this.backgroundRect.setStrokeWidth(borderWidth);
-            this.backgroundRect.setCornerRadius(borderRadius);
-
-            // Apply or remove drop shadow
-            if (this.backgroundRect.svgObject) {
-                if (this.stylingOptions.dropShadow) {
-                    this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
-                } else {
-                    this.backgroundRect.svgObject.style.filter = '';
-                }
-            }
-        }
-
-        // Re-apply styling to all existing step elements
-        this.stepElements.forEach((stepBox, index) => {
-            if (stepBox.div) {
-                const content = stepBox.div.innerHTML;
-                // Calculate new height for the step
-                const height = this.calculateContentHeight(stepBox.stepMessage, index, stepBox.isMultiple);
-                this.applyStepStyling(stepBox, content, stepBox.isMultiple, height);
-
-                // Update font size
-                stepBox.setFontSize(this.fontSize);
-
-                // Update dimensions if needed
-                stepBox.setWidthAndHeight(this.stepWidth, height);
-            }
-        });
-
-        // Update background size
-        this.updateBackgroundSize();
-    }
-
-    /**
-     * Gets the current styling options
-     * @returns {Object} Current styling options
-     */
-    getStyling() {
-        return { ...this.stylingOptions };
-    }
-
-    // Helper methods for message parsing (same as in formatter)
-
-    isOperationMessage(message) {
-        const operationKeywords = ['Applied', 'added', 'subtracted', 'multiplied', 'divided', 'both sides'];
-        return operationKeywords.some(keyword =>
-            message.toLowerCase().includes(keyword.toLowerCase())
-        );
-    }
-
-    extractOperationAction(message) {
-        const match = message.match(/^(Added|Subtracted|Multiplied|Divided)/i);
-        return match ? match[0] : null;
-    }
-
-    extractOperationValue(message) {
-        // Updated regex to handle simple values and expressions
-        const match = message.match(/(?:Added|Subtracted|Multiplied|Divided)\s(.*?)\s(?:to|by)/i);
-        if (match && match[1]) {
-            // Avoid returning "[object Object]"
-            if (match[1].includes('[object Object]')) {
-                return null;
-            }
-            return match[1];
-        }
-        return null;
-    }
-
-    extractOperationValueNode(message) {
-        if (this.simplificationData && this.simplificationData.operationValueNode) {
-            return this.simplificationData.operationValueNode;
-        }
-        return null;
-    }
-
-    /**
-     * Destroys the step group and cleans up resources
-     */
-    destroy() {
-        this.stepElements = [];
-        if (this.contentGroup) {
-            this.contentGroup.removeAllChildren();
-        }
-        this.layoutGroup.removeAllChildren();
-        this.onStepHover = null;
-        this.onStepClick = null;
-    }
+import { omdColor } from '../../src/omdColor.js';
+import { jsvgLayoutGroup, jsvgTextBox, jsvgRect } from '@teachinglab/jsvg';
+/**
+ * Creates interactive step elements using jsvgLayoutGroup for multiple simplification steps
+ * Each step is a separate jsvgTextBox that can have hover interactions with the omdSequence
+ */
+export class omdStepVisualizerInteractiveSteps {
+    constructor(stepVisualizer, simplificationData, stylingOptions = {}) {
+        this.stepVisualizer = stepVisualizer;
+        this.simplificationData = simplificationData || {};
+        this.stylingOptions = stylingOptions || {};
+        this.messages = this._extractMessages(simplificationData);
+        this.ruleNames = this._extractRuleNames(simplificationData);
+        this.stepElements = [];
+        this.layoutGroup = new jsvgLayoutGroup();
+        this.layoutGroup.setSpacer(4); // Minimal spacing for tight layout
+
+        // Styling configuration with defaults that can be overridden
+        this.stepWidth = this.stylingOptions.maxWidth || 300; // Use maxWidth from styling options
+        this.baseStepHeight = 30; // Minimal height for tight fit
+        this.headerHeight = 28; // Minimal header height
+        this.fontSize = this.stylingOptions.fontSize || 14;
+        this.smallFontSize = 12;
+
+        this.setupLayoutGroup();
+        this.createStepElements();
+    }
+
+    /**
+     * Extracts messages from simplification data
+     * @param {Object} data - Simplification data
+     * @returns {Array} Array of clean messages
+     * @private
+     */
+    _extractMessages(data) {
+        if (!data) return [];
+
+        let messages = [];
+        if (data.rawMessages && Array.isArray(data.rawMessages)) {
+            messages = data.rawMessages;
+        } else if (data.message) {
+            messages = [data.message];
+        }
+
+        // Clean up messages - remove HTML tags and bullet points
+        return messages.map(msg => {
+            let clean = msg.replace(/<[^>]*>/g, ''); // Strip HTML tags
+            clean = clean.replace(/^[•·◦▪▫‣⁃]\s*/, ''); // Strip bullet points
+            return clean.trim();
+        });
+    }
+
+    /**
+     * Extracts rule names from simplification data
+     * @param {Object} data - Simplification data
+     * @returns {Array} Array of rule names
+     * @private
+     */
+    _extractRuleNames(data) {
+        if (!data) return ['Operation'];
+
+        if (data.ruleNames && Array.isArray(data.ruleNames)) {
+            return data.ruleNames;
+        }
+
+        // Default based on data type
+        if (data.multipleSimplifications) {
+            return ['Multiple Rules'];
+        } else {
+            return ['Operation'];
+        }
+    }
+
+    /**
+     * Sets up the main layout group properties
+     * @private
+     */
+    setupLayoutGroup() {
+        // Add background using styling options for the entire step group
+        this.backgroundRect = new jsvgRect();
+        this.backgroundRect.setWidthAndHeight(this.stepWidth + 16, 60); // Minimal padding and height for tight fit
+
+        // Apply styling options to the background container
+        const backgroundColor = this.stylingOptions.backgroundColor || omdColor.lightGray;
+        const borderColor = this.stylingOptions.borderColor || '#e0e0e0';
+        const borderWidth = this.stylingOptions.borderWidth || 1;
+        const borderRadius = this.stylingOptions.borderRadius || 6;
+
+        this.backgroundRect.setFillColor(backgroundColor);
+        this.backgroundRect.setStrokeColor(borderColor);
+        this.backgroundRect.setStrokeWidth(borderWidth);
+        this.backgroundRect.setCornerRadius(borderRadius);
+        this.backgroundRect.setPosition(0, 0); // Start at origin, not negative offset
+
+        // Apply drop shadow to the SVG element if requested
+        if (this.stylingOptions.dropShadow && this.backgroundRect.svgObject) {
+            this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
+        }
+
+        this.layoutGroup.addChild(this.backgroundRect);
+    }
+
+    /**
+     * Creates individual step elements from the messages array
+     * @private
+     */
+    createStepElements() {
+        if (!this.messages || this.messages.length === 0) return;
+
+        // Create content container to separate from background
+        this.contentGroup = new jsvgLayoutGroup();
+        this.contentGroup.setSpacer(2); // Minimal spacing between elements
+        this.contentGroup.setPosition(8, 8); // Minimal offset for tight fit
+
+        if (this.messages.length === 1) {
+
+            this.createSingleStepElement(this.messages[0], 0);
+        } else {
+
+            this.createMultipleStepElements();
+        }
+
+        this.contentGroup.doVerticalLayout();
+        this.layoutGroup.addChild(this.contentGroup);
+        this.updateBackgroundSize();
+
+        // Apply drop shadow after SVG element is created
+        setTimeout(() => {
+            this.applyDropShadowIfNeeded();
+        }, 10);
+
+        // Debug logging
+
+    }
+
+    /**
+     * Creates a single step element with header
+     * @param {string} message - The step message
+     * @param {number} index - Step index
+     * @private
+     */
+    createSingleStepElement(message, index) {
+        // Create header for single step using rule name
+        const ruleName = this.ruleNames[0] || 'Operation';
+        const headerBox = this.createHeaderBox(ruleName + ':');
+        this.contentGroup.addChild(headerBox);
+
+        // Create the step box
+        const stepBox = this.createStepTextBox(message, index, false);
+        this.stepElements.push(stepBox);
+        this.contentGroup.addChild(stepBox);
+    }
+
+    /**
+     * Creates multiple step elements with header
+     * @private
+     */
+    createMultipleStepElements() {
+        // Only create header for truly multiple steps (more than 1)
+        if (this.messages.length > 1) {
+            // Create header showing rule names
+            let headerText;
+            if (this.ruleNames.length === 1) {
+                headerText = this.ruleNames[0] + ':';
+            } else if (this.ruleNames.length <= 3) {
+                headerText = this.ruleNames.join(' + ') + ':';
+            } else {
+                headerText = `${this.ruleNames.length} Rules Applied:`;
+            }
+
+            const headerBox = this.createHeaderBox(headerText);
+            this.contentGroup.addChild(headerBox);
+        }
+
+        // Create individual step elements
+        this.messages.forEach((message, index) => {
+            const stepBox = this.createStepTextBox(message, index, this.messages.length > 1);
+            this.stepElements.push(stepBox);
+            this.contentGroup.addChild(stepBox);
+        });
+    }
+
+    /**
+     * Creates a header box with custom text
+     * @param {string} headerText - Text to display in header
+     * @returns {jsvgTextBox} Header text box
+     * @private
+     */
+    createHeaderBox(headerText = 'Operation:') {
+        const headerBox = new jsvgTextBox();
+        const headerHeight = Math.max(this.headerHeight, 50); // Increased minimum height
+
+
+        headerBox.setWidthAndHeight(this.stepWidth, headerHeight);
+        headerBox.setText(headerText);
+        headerBox.setFontSize(this.fontSize);
+        headerBox.setFontWeight('600');
+        headerBox.setFontColor('#2c3e50');
+
+        // Style the header with border and minimal spacing
+        if (headerBox.div) {
+            Object.assign(headerBox.div.style, {
+                borderBottom: '1px solid #e0e0e0',
+                padding: '6px 8px 4px 8px', // Minimal padding for tight fit
+                margin: '0',
+                boxSizing: 'border-box',
+                minHeight: `${headerHeight}px`,
+                overflow: 'visible',
+                whiteSpace: 'normal',
+                wordWrap: 'break-word',
+                overflowWrap: 'break-word',
+                width: '100%',
+                lineHeight: '1.2', // Tight line height
+                fontFamily: 'Albert Sans, Arial, sans-serif',
+                display: 'flex',
+                alignItems: 'center', // Center text vertically
+                justifyContent: 'flex-start'
+            });
+        }
+
+
+        return headerBox;
+    }
+
+    /**
+     * Creates an individual step text box
+     * @param {string} message - Step message
+     * @param {number} index - Step index
+     * @param {boolean} isMultiple - Whether this is part of multiple steps
+     * @returns {jsvgTextBox} Step text box
+     * @private
+     */
+    createStepTextBox(message, index, isMultiple) {
+        const stepBox = new jsvgTextBox();
+        // Calculate actual height needed for content with minimal padding
+        const contentHeight = this.calculateContentHeight(message, index, isMultiple);
+        const height = Math.max(contentHeight, this.baseStepHeight); // Use calculated height
+
+
+
+        stepBox.setWidthAndHeight(this.stepWidth, height);
+        stepBox.setFontSize(this.fontSize);
+        stepBox.setFontColor('#2c3e50');
+
+        // Store step data for interactions
+        stepBox.stepIndex = index;
+        stepBox.stepMessage = message;
+        stepBox.isMultiple = isMultiple;
+
+        // Format the step content
+        const formattedContent = this.formatStepContent(message, index, isMultiple);
+
+        // Apply styling and content
+        if (stepBox.div) {
+            this.applyStepStyling(stepBox, formattedContent, isMultiple, height);
+            this.setupStepInteractions(stepBox);
+
+            // Force the jsvgTextBox to respect our sizing
+            stepBox.div.style.height = `${height}px`;
+            stepBox.div.style.minHeight = `${height}px`;
+            stepBox.div.style.display = 'block';
+
+            // Add a more aggressive override after a delay to ensure it sticks
+            if (stepBox.div) {
+                const actualPadding = this.stylingOptions.padding || 6; // Get padding from styling options
+                stepBox.div.style.cssText += `
+                        height: ${height}px !important;
+                        min-height: ${height}px !important;
+                        max-height: ${height}px !important;
+                        padding: ${actualPadding}px ${actualPadding + 2}px !important;
+                        line-height: 1.3 !important;
+                        font-size: ${this.fontSize}px !important;
+                        font-family: Albert Sans, Arial, sans-serif !important;
+                        box-sizing: border-box !important;
+                        display: flex !important;
+                        flex-direction: column !important;
+                        justify-content: center !important;
+                        align-items: flex-start !important;
+                        word-spacing: normal !important;
+                        letter-spacing: normal !important;
+                        transition: none !important;
+                        transform: none !important;
+                        animation: none !important;
+                    `;
+            }
+
+        }
+
+        return stepBox;
+    }
+
+    /**
+     * Formats the content for a step
+     * @param {string} message - Raw message
+     * @param {number} index - Step index
+     * @param {boolean} isMultiple - Whether part of multiple steps
+     * @returns {string} Formatted content
+     * @private
+     */
+    formatStepContent(message, index, isMultiple) {
+        const cleanMessage = message.trim();
+        let content = '';
+
+        // Only show step numbers for multiple steps
+        if (isMultiple && this.messages.length > 1) {
+            content += `<div class="step-number" style="color: #666; font-size: ${this.smallFontSize}px; margin: 0 0 2px 0; font-weight: 500; line-height: 1.2; font-family: Albert Sans, Arial, sans-serif;">Step ${index + 1}</div>`; // Minimal margin
+        }
+
+        content += '<div class="step-content" style="display: flex; align-items: center; gap: 6px; margin: 0; width: 100%; line-height: 1.3; font-family: Albert Sans, Arial, sans-serif;">'; // Center align and minimal spacing
+        content += '<span class="bullet" style="color: #666; font-weight: bold; flex-shrink: 0; font-size: 10px;">•</span>'; // Smaller bullet
+        content += '<div class="step-text" style="margin: 0; flex: 1; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; padding: 0;">';
+
+        // Parse operation details
+        if (this.isOperationMessage(cleanMessage)) {
+            const action = this.extractOperationAction(cleanMessage);
+            const value = this.extractOperationValue(cleanMessage);
+            const valueNode = this.extractOperationValueNode(cleanMessage);
+
+            if (action && (value || valueNode)) {
+                content += `<span style="font-weight: 600; color: #2c3e50; margin-right: 4px;">${action}</span> `;
+                const displayValue = valueNode ? valueNode.toString() : value;
+                content += `<span style="background: #f5f5f5; padding: 3px 8px; border-radius: 4px; font-family: 'Courier New', monospace; color: #d63384; margin: 0 3px;">${displayValue}</span>`;
+                content += `<span style="color: #666; font-size: ${this.smallFontSize}px; margin-left: 4px;"> to both sides</span>`;
+            } else {
+                content += `<span style="padding: 2px 0;">${cleanMessage}</span>`;
+            }
+        } else {
+            content += `<span style="font-weight: 500; padding: 2px 0;">${cleanMessage}</span>`;
+        }
+
+        content += '</div></div>';
+        return content;
+    }
+
+    /**
+     * Applies styling to a step text box
+     * @param {jsvgTextBox} stepBox - The step box
+     * @param {string} content - Formatted content
+     * @param {boolean} isMultiple - Whether part of multiple steps
+     * @param {number} height - The calculated height for the step box
+     * @private
+     */
+    applyStepStyling(stepBox, content, isMultiple, height) {
+        const backgroundColor = this.stylingOptions.backgroundColor || omdColor.white;
+        const borderColor = this.stylingOptions.borderColor || omdColor.lightGray;
+        const borderWidth = this.stylingOptions.borderWidth || 1;
+        const borderRadius = this.stylingOptions.borderRadius || 4;
+        const padding = this.stylingOptions.padding || 6; // Minimal padding for tight fit
+
+        const baseStyles = {
+            padding: `${padding}px ${padding + 2}px !important`, // Minimal padding for tight fit
+            borderRadius: `${borderRadius}px`,
+            border: `${borderWidth}px solid ${borderColor}`,
+            backgroundColor: backgroundColor,
+            cursor: 'pointer',
+            transition: 'none !important', // Explicitly disable all transitions
+            transform: 'none !important', // Explicitly disable all transforms
+            animation: 'none !important', // Explicitly disable all animations
+            lineHeight: '1.3 !important', // Tight line height
+            margin: '0',
+            boxSizing: 'border-box',
+            overflow: 'visible',
+            minHeight: `${height}px !important`, // Use calculated height
+            height: `${height}px !important`, // Fixed height to content
+            width: '100%',
+            whiteSpace: 'normal',
+            wordWrap: 'break-word',
+            overflowWrap: 'break-word',
+            maxWidth: '100%',
+            fontSize: `${this.fontSize}px !important`, // Force font size
+            fontFamily: 'Albert Sans, Arial, sans-serif !important', // Albert Sans font
+            display: 'flex !important', // Use flex for centering
+            flexDirection: 'column !important',
+            justifyContent: 'center !important', // Center content vertically
+            alignItems: 'flex-start !important'
+        };
+
+        // Add drop shadow if requested - but NOT to individual step boxes
+        // The drop shadow should only be on the outer background rectangle
+        // Remove any previous drop shadow from individual steps
+        if (stepBox.div) {
+            stepBox.div.style.boxShadow = 'none';
+        }
+
+        // Set font family if specified
+        if (this.stylingOptions.fontFamily) {
+            baseStyles.fontFamily = this.stylingOptions.fontFamily;
+        }
+
+        Object.assign(stepBox.div.style, baseStyles);
+        stepBox.div.innerHTML = content;
+
+        // Additional CSS to force proper text spacing
+        if (stepBox.div) {
+            stepBox.div.style.cssText += `
+                    padding: ${padding + 6}px ${padding + 10}px !important;
+                    line-height: 1.7 !important;
+                    min-height: ${this.baseStepHeight + 20}px !important;
+                    font-size: ${this.fontSize}px !important;
+                    display: flex !important;
+                    flex-direction: column !important;
+                `;
+
+            // Apply proper layout to nested content - DO NOT use position absolute
+            const contentElements = stepBox.div.querySelectorAll('.step-content, .step-text');
+            contentElements.forEach(el => {
+                el.style.lineHeight = '1.3 !important';
+                el.style.margin = '0 !important';
+                el.style.fontFamily = 'Albert Sans, Arial, sans-serif !important';
+                // Remove any position absolute that might be inherited
+                el.style.position = 'static !important';
+            });
+
+            // Ensure bullet points and text spans stay in normal flow
+            const allSpans = stepBox.div.querySelectorAll('span');
+            allSpans.forEach(span => {
+                span.style.position = 'static !important';
+            });
+        }
+
+        // Force a reflow to ensure proper sizing
+        stepBox.div.offsetHeight;
+    }
+
+    /**
+     * Sets up hover and click interactions for a step
+     * @param {jsvgTextBox} stepBox - The step box
+     * @private
+     */
+    setupStepInteractions(stepBox) {
+        // Store the original background color to restore on mouseleave
+        const originalBackgroundColor = stepBox.div.style.backgroundColor || '';
+
+        // Hover effects
+        stepBox.div.addEventListener('mouseenter', () => {
+            stepBox.div.style.backgroundColor = omdColor.mediumGray; // Slightly darker version of explainColor
+
+            // Call hover callback if provided
+            this.onStepHover?.(stepBox.stepIndex, stepBox.stepMessage, true);
+        });
+
+        stepBox.div.addEventListener('mouseleave', () => {
+            // Restore the original background color instead of setting to transparent
+            stepBox.div.style.backgroundColor = originalBackgroundColor;
+
+            // Call hover callback if provided
+            this.onStepHover?.(stepBox.stepIndex, stepBox.stepMessage, false);
+        });
+
+        // Click interactions
+        stepBox.div.addEventListener('click', () => {
+            this.onStepClick?.(stepBox.stepIndex, stepBox.stepMessage);
+        });
+    }
+
+    /**
+     * Calculates the exact height needed for content with minimal padding
+     * @param {string} message - Step message
+     * @param {number} index - Step index
+     * @param {boolean} isMultiple - Whether part of multiple steps
+     * @returns {number} Tight-fitting height in pixels
+     * @private
+     */
+    calculateContentHeight(message, index, isMultiple) {
+        // Create a temporary element to measure actual text height
+        const tempDiv = document.createElement('div');
+        tempDiv.style.position = 'absolute';
+        tempDiv.style.visibility = 'hidden';
+        tempDiv.style.width = `${this.stepWidth - 16}px`; // Account for minimal padding
+        tempDiv.style.fontSize = `${this.fontSize}px`;
+        tempDiv.style.lineHeight = '1.3'; // Tight line height
+        tempDiv.style.fontFamily = 'Albert Sans, Arial, sans-serif';
+        tempDiv.style.whiteSpace = 'normal';
+        tempDiv.style.wordWrap = 'break-word';
+        tempDiv.style.overflowWrap = 'break-word';
+        tempDiv.style.padding = '6px 8px'; // Match the minimal padding
+        tempDiv.style.boxSizing = 'border-box';
+        tempDiv.style.display = 'flex';
+        tempDiv.style.flexDirection = 'column';
+        tempDiv.style.justifyContent = 'center';
+
+        // Use actual formatted content for measurement
+        const formattedContent = this.formatStepContent(message, index, isMultiple);
+        tempDiv.innerHTML = formattedContent;
+
+        // Append to document to measure
+        document.body.appendChild(tempDiv);
+        const measuredHeight = tempDiv.offsetHeight;
+        document.body.removeChild(tempDiv);
+
+        // Return exact measured height with minimal buffer
+        return Math.max(this.baseStepHeight, measuredHeight + 2); // Just 2px buffer
+    }
+
+    /**
+     * Calculates the height needed for a step box (legacy method, kept for compatibility)
+     * @param {string} message - Step message
+     * @returns {number} Height in pixels
+     * @private
+     */
+    calculateStepHeight(message) {
+        // Use the new tight-fitting calculation
+        return this.calculateContentHeight(message, 0, false);
+    }
+
+    /**
+     * Updates the background rectangle size after layout
+     * @private
+     */
+    updateBackgroundSize() {
+        if (this.backgroundRect && this.contentGroup) {
+            const totalHeight = this.contentGroup.height + 16; // Minimal padding for tight fit
+            const totalWidth = this.stepWidth + 16; // Minimal padding for tight fit
+            this.backgroundRect.setWidthAndHeight(totalWidth, totalHeight);
+        }
+    }
+
+    /**
+     * Applies drop shadow to the background container if SVG element exists
+     * @private
+     */
+    applyDropShadowIfNeeded() {
+        if (this.stylingOptions.dropShadow && this.backgroundRect && this.backgroundRect.svgObject) {
+            this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
+        }
+    }
+
+    /**
+     * Sets callback for step hover events
+     * @param {Function} callback - Function called with (stepIndex, message, isEntering)
+     */
+    setOnStepHover(callback) {
+        this.onStepHover = callback;
+    }
+
+    /**
+     * Sets callback for step click events
+     * @param {Function} callback - Function called with (stepIndex, message)
+     */
+    setOnStepClick(callback) {
+        this.onStepClick = callback;
+    }
+
+    /**
+     * Gets the main layout group for adding to parent containers
+     * @returns {jsvgLayoutGroup} The layout group
+     */
+    getLayoutGroup() {
+        return this.layoutGroup;
+    }
+
+    /**
+     * Sets the position of the entire step group
+     * @param {number} x - X position
+     * @param {number} y - Y position
+     */
+    setPosition(x, y) {
+        this.layoutGroup.setPosition(x, y);
+    }
+
+    /**
+     * Gets the dimensions of the step group
+     * @returns {Object} Width and height
+     */
+    getDimensions() {
+        return {
+            width: this.backgroundRect ? this.backgroundRect.width : this.stepWidth + 16,
+            height: this.backgroundRect ? this.backgroundRect.height : 100
+        };
+    }
+
+    /**
+     * Updates the styling options and re-applies them to existing elements
+     * @param {Object} newStylingOptions - New styling options
+     */
+    updateStyling(newStylingOptions = {}) {
+        this.stylingOptions = { ...this.stylingOptions, ...newStylingOptions };
+
+        // Update width if maxWidth changed
+        if (newStylingOptions.maxWidth) {
+            this.stepWidth = newStylingOptions.maxWidth;
+        }
+
+        // Update font size if changed
+        if (newStylingOptions.fontSize) {
+            this.fontSize = newStylingOptions.fontSize;
+        }
+
+        // Update background container styling
+        if (this.backgroundRect) {
+            const backgroundColor = this.stylingOptions.backgroundColor || omdColor.lightGray;
+            const borderColor = this.stylingOptions.borderColor || '#e0e0e0';
+            const borderWidth = this.stylingOptions.borderWidth || 1;
+            const borderRadius = this.stylingOptions.borderRadius || 6;
+
+            this.backgroundRect.setFillColor(backgroundColor);
+            this.backgroundRect.setStrokeColor(borderColor);
+            this.backgroundRect.setStrokeWidth(borderWidth);
+            this.backgroundRect.setCornerRadius(borderRadius);
+
+            // Apply or remove drop shadow
+            if (this.backgroundRect.svgObject) {
+                if (this.stylingOptions.dropShadow) {
+                    this.backgroundRect.svgObject.style.filter = 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))';
+                } else {
+                    this.backgroundRect.svgObject.style.filter = '';
+                }
+            }
+        }
+
+        // Re-apply styling to all existing step elements
+        this.stepElements.forEach((stepBox, index) => {
+            if (stepBox.div) {
+                const content = stepBox.div.innerHTML;
+                // Calculate new height for the step
+                const height = this.calculateContentHeight(stepBox.stepMessage, index, stepBox.isMultiple);
+                this.applyStepStyling(stepBox, content, stepBox.isMultiple, height);
+
+                // Update font size
+                stepBox.setFontSize(this.fontSize);
+
+                // Update dimensions if needed
+                stepBox.setWidthAndHeight(this.stepWidth, height);
+            }
+        });
+
+        // Update background size
+        this.updateBackgroundSize();
+    }
+
+    /**
+     * Gets the current styling options
+     * @returns {Object} Current styling options
+     */
+    getStyling() {
+        return { ...this.stylingOptions };
+    }
+
+    // Helper methods for message parsing (same as in formatter)
+
+    isOperationMessage(message) {
+        const operationKeywords = ['Applied', 'added', 'subtracted', 'multiplied', 'divided', 'both sides'];
+        return operationKeywords.some(keyword =>
+            message.toLowerCase().includes(keyword.toLowerCase())
+        );
+    }
+
+    extractOperationAction(message) {
+        const match = message.match(/^(Added|Subtracted|Multiplied|Divided)/i);
+        return match ? match[0] : null;
+    }
+
+    extractOperationValue(message) {
+        // Updated regex to handle simple values and expressions
+        const match = message.match(/(?:Added|Subtracted|Multiplied|Divided)\s(.*?)\s(?:to|by)/i);
+        if (match && match[1]) {
+            // Avoid returning "[object Object]"
+            if (match[1].includes('[object Object]')) {
+                return null;
+            }
+            return match[1];
+        }
+        return null;
+    }
+
+    extractOperationValueNode(message) {
+        if (this.simplificationData && this.simplificationData.operationValueNode) {
+            return this.simplificationData.operationValueNode;
+        }
+        return null;
+    }
+
+    /**
+     * Destroys the step group and cleans up resources
+     */
+    destroy() {
+        this.stepElements = [];
+        if (this.contentGroup) {
+            this.contentGroup.removeAllChildren();
+        }
+        this.layoutGroup.removeAllChildren();
+        this.onStepHover = null;
+        this.onStepClick = null;
+    }
 }