@elixpo/lixsketch 5.5.20 → 5.5.21

package/dist/react/{chunk-RFHMFWVR.js.map → chunk-2FMFOPGW.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/shapes/ImageShape.js"],
-  "sourcesContent": ["/* eslint-disable */\n// ImageShape class - extracted from imageTool.js\n// Depends on globals: svg, shapes, currentShape\n\nimport { updateAttachedArrows as updateArrowsForShape } from \"../tools/arrowTool.js\";\nlet isDragging = false;\nlet hoveredFrameImage = null;\nfunction selectImage() {} // stub - image selection handled by imageTool\n\nclass ImageShape {\n    constructor(element) {\n        this.element = element;\n        this.shapeName = 'image';\n        this.shapeID = element.shapeID || `image-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 10000)}`;\n\n        // Frame attachment properties\n        this.parentFrame = null;\n\n        // Upload pipeline state\n        this.uploadStatus = 'pending'; // 'pending' | 'uploading' | 'done' | 'failed'\n        this.uploadAbortController = null;\n        this._uploadIndicator = null;\n\n        // Update element attributes\n        this.element.setAttribute('type', 'image');\n        this.element.shapeID = this.shapeID;\n\n        // Create a group wrapper for the image to work with frames properly\n        this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n        this.group.setAttribute('id', this.shapeID);\n\n        // Move the image element into the group\n        if (this.element.parentNode) {\n            this.element.parentNode.removeChild(this.element);\n        }\n        this.group.appendChild(this.element);\n        svg.appendChild(this.group);\n    }\n\n    showUploadIndicator() {\n        if (this._uploadIndicator) return;\n        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n        g.setAttribute('class', 'upload-indicator');\n\n        const x = this.x + 6;\n        const y = this.y + 6;\n\n        // Background circle\n        const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        bg.setAttribute('cx', x + 10);\n        bg.setAttribute('cy', y + 10);\n        bg.setAttribute('r', 12);\n        bg.setAttribute('fill', 'rgba(0,0,0,0.7)');\n        g.appendChild(bg);\n\n        // Caution/loading icon (\u26A1 style triangle)\n        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');\n        icon.setAttribute('points', `${x+10},${y+3} ${x+17},${y+16} ${x+3},${y+16}`);\n        icon.setAttribute('fill', 'none');\n        icon.setAttribute('stroke', '#FBBF24');\n        icon.setAttribute('stroke-width', '1.5');\n        icon.setAttribute('stroke-linejoin', 'round');\n        g.appendChild(icon);\n\n        // Exclamation mark inside\n        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        line.setAttribute('x1', x + 10);\n        line.setAttribute('y1', y + 8);\n        line.setAttribute('x2', x + 10);\n        line.setAttribute('y2', y + 12);\n        line.setAttribute('stroke', '#FBBF24');\n        line.setAttribute('stroke-width', '1.5');\n        line.setAttribute('stroke-linecap', 'round');\n        g.appendChild(line);\n\n        const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        dot.setAttribute('cx', x + 10);\n        dot.setAttribute('cy', y + 14.5);\n        dot.setAttribute('r', 0.8);\n        dot.setAttribute('fill', '#FBBF24');\n        g.appendChild(dot);\n\n        // Pulsing animation\n        const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');\n        animate.setAttribute('attributeName', 'opacity');\n        animate.setAttribute('values', '1;0.4;1');\n        animate.setAttribute('dur', '1.5s');\n        animate.setAttribute('repeatCount', 'indefinite');\n        g.appendChild(animate);\n\n        // Apply same transform as image (rotation)\n        const transform = this.element.getAttribute('transform');\n        if (transform) g.setAttribute('transform', transform);\n\n        g.style.pointerEvents = 'none';\n        this.group.appendChild(g);\n        this._uploadIndicator = g;\n    }\n\n    removeUploadIndicator() {\n        if (this._uploadIndicator && this._uploadIndicator.parentNode) {\n            this._uploadIndicator.parentNode.removeChild(this._uploadIndicator);\n        }\n        this._uploadIndicator = null;\n    }\n\n    updateUploadIndicatorPosition() {\n        if (!this._uploadIndicator) return;\n        const x = this.x + 6;\n        const y = this.y + 6;\n\n        const bg = this._uploadIndicator.querySelector('circle');\n        if (bg) { bg.setAttribute('cx', x + 10); bg.setAttribute('cy', y + 10); }\n\n        const icon = this._uploadIndicator.querySelector('polygon');\n        if (icon) icon.setAttribute('points', `${x+10},${y+3} ${x+17},${y+16} ${x+3},${y+16}`);\n\n        const line = this._uploadIndicator.querySelector('line');\n        if (line) {\n            line.setAttribute('x1', x + 10); line.setAttribute('y1', y + 8);\n            line.setAttribute('x2', x + 10); line.setAttribute('y2', y + 12);\n        }\n\n        const dots = this._uploadIndicator.querySelectorAll('circle');\n        if (dots[1]) { dots[1].setAttribute('cx', x + 10); dots[1].setAttribute('cy', y + 14.5); }\n\n        const transform = this.element.getAttribute('transform');\n        if (transform) this._uploadIndicator.setAttribute('transform', transform);\n    }\n    \n    // Position and dimension properties for frame compatibility\n    get x() {\n        return parseFloat(this.element.getAttribute('x'));\n    }\n    \n    set x(value) {\n        this.element.setAttribute('x', value);\n        this.element.setAttribute('data-shape-x', value);\n    }\n    \n    get y() {\n        return parseFloat(this.element.getAttribute('y'));\n    }\n    \n    set y(value) {\n        this.element.setAttribute('y', value);\n        this.element.setAttribute('data-shape-y', value);\n    }\n    \n    get width() {\n        return parseFloat(this.element.getAttribute('width'));\n    }\n    \n    set width(value) {\n        this.element.setAttribute('width', value);\n        this.element.setAttribute('data-shape-width', value);\n    }\n    \n    get height() {\n        return parseFloat(this.element.getAttribute('height'));\n    }\n    \n    set height(value) {\n        this.element.setAttribute('height', value);\n        this.element.setAttribute('data-shape-height', value);\n    }\n    \n    get rotation() {\n        const transform = this.element.getAttribute('transform');\n        if (transform) {\n            const rotateMatch = transform.match(/rotate\\(([^,]+)/);\n            if (rotateMatch) {\n                return parseFloat(rotateMatch[1]);\n            }\n        }\n        return 0;\n    }\n    \n    set rotation(value) {\n        const centerX = this.x + this.width / 2;\n        const centerY = this.y + this.height / 2;\n        this.element.setAttribute('transform', `rotate(${value}, ${centerX}, ${centerY})`);\n        this.element.setAttribute('data-shape-rotation', value);\n    }\n\n    move(dx, dy) {\n        this.x += dx;\n        this.y += dy;\n\n        // Update transform for rotation\n        const centerX = this.x + this.width / 2;\n        const centerY = this.y + this.height / 2;\n        this.element.setAttribute('transform', `rotate(${this.rotation}, ${centerX}, ${centerY})`);\n\n        // Only update frame containment if we're actively dragging the shape itself\n        // and not being moved by a parent frame\n        if (isDragging && !this.isBeingMovedByFrame) {\n            this.updateFrameContainment();\n        }\n\n        this.updateAttachedArrows();\n    }\n\n    updateAttachedArrows() {\n        updateArrowsForShape(this);\n    }\n\n    updateFrameContainment() {\n        // Don't update if we're being moved by a frame\n        if (this.isBeingMovedByFrame) return;\n        \n        let targetFrame = null;\n        \n        // Find which frame this shape is over\n        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {\n            shapes.forEach(shape => {\n                if (shape.shapeName === 'frame' && shape.isShapeInFrame(this)) {\n                    targetFrame = shape;\n                }\n            });\n        }\n        \n        // If we have a parent frame and we're being dragged, temporarily remove clipping\n        if (this.parentFrame && isDragging) {\n            this.parentFrame.temporarilyRemoveFromFrame(this);\n        }\n        \n        // Update frame highlighting\n        if (hoveredFrameImage && hoveredFrameImage !== targetFrame) {\n            hoveredFrameImage.removeHighlight();\n        }\n        \n        if (targetFrame && targetFrame !== hoveredFrameImage) {\n            targetFrame.highlightFrame();\n        }\n        \n        hoveredFrameImage = targetFrame;\n    }\n\n    contains(x, y) {\n        const imgX = this.x;\n        const imgY = this.y;\n        const imgWidth = this.width;\n        const imgHeight = this.height;\n        \n        // Simple bounding box check (could be enhanced for rotation)\n        return x >= imgX && x <= imgX + imgWidth && y >= imgY && y <= imgY + imgHeight;\n    }\n\n    // Add draw method for consistency with other shapes\n    draw() {\n        // Images don't need redrawing like other shapes, but we need this method for consistency\n        // Update any visual state if needed\n    }\n\n    // Add methods for frame compatibility\n    removeSelection() {\n        // Remove selection outlines from SVG\n        svg.querySelectorAll(\".selection-outline\").forEach(el => el.remove());\n        // Remove resize/rotation anchors if present\n        svg.querySelectorAll(\".resize-anchor, .rotation-anchor\").forEach(el => el.remove());\n    }\n\n    selectShape() {\n        // Select the image\n        selectImage({ target: this.element, stopPropagation: () => {} });\n    }\n}\n\nexport { ImageShape };\n"],
-  "mappings": ";;;;;;AAKA,IAAI,aAAa;AACjB,IAAI,oBAAoB;AACxB,SAAS,cAAc;AAAC;AAExB,IAAM,aAAN,MAAiB;AAAA,EACb,YAAY,SAAS;AACjB,SAAK,UAAU;AACf,SAAK,YAAY;AACjB,SAAK,UAAU,QAAQ,WAAW,SAAS,OAAO,KAAK,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,KAAK,MAAM,KAAK,OAAO,IAAI,GAAK,CAAC;AAG9G,SAAK,cAAc;AAGnB,SAAK,eAAe;AACpB,SAAK,wBAAwB;AAC7B,SAAK,mBAAmB;AAGxB,SAAK,QAAQ,aAAa,QAAQ,OAAO;AACzC,SAAK,QAAQ,UAAU,KAAK;AAG5B,SAAK,QAAQ,SAAS,gBAAgB,8BAA8B,GAAG;AACvE,SAAK,MAAM,aAAa,MAAM,KAAK,OAAO;AAG1C,QAAI,KAAK,QAAQ,YAAY;AACzB,WAAK,QAAQ,WAAW,YAAY,KAAK,OAAO;AAAA,IACpD;AACA,SAAK,MAAM,YAAY,KAAK,OAAO;AACnC,QAAI,YAAY,KAAK,KAAK;AAAA,EAC9B;AAAA,EAEA,sBAAsB;AAClB,QAAI,KAAK,iBAAkB;AAC3B,UAAM,IAAI,SAAS,gBAAgB,8BAA8B,GAAG;AACpE,MAAE,aAAa,SAAS,kBAAkB;AAE1C,UAAM,IAAI,KAAK,IAAI;AACnB,UAAM,IAAI,KAAK,IAAI;AAGnB,UAAM,KAAK,SAAS,gBAAgB,8BAA8B,QAAQ;AAC1E,OAAG,aAAa,MAAM,IAAI,EAAE;AAC5B,OAAG,aAAa,MAAM,IAAI,EAAE;AAC5B,OAAG,aAAa,KAAK,EAAE;AACvB,OAAG,aAAa,QAAQ,iBAAiB;AACzC,MAAE,YAAY,EAAE;AAGhB,UAAM,OAAO,SAAS,gBAAgB,8BAA8B,SAAS;AAC7E,SAAK,aAAa,UAAU,GAAG,IAAE,EAAE,IAAI,IAAE,CAAC,IAAI,IAAE,EAAE,IAAI,IAAE,EAAE,IAAI,IAAE,CAAC,IAAI,IAAE,EAAE,EAAE;AAC3E,SAAK,aAAa,QAAQ,MAAM;AAChC,SAAK,aAAa,UAAU,SAAS;AACrC,SAAK,aAAa,gBAAgB,KAAK;AACvC,SAAK,aAAa,mBAAmB,OAAO;AAC5C,MAAE,YAAY,IAAI;AAGlB,UAAM,OAAO,SAAS,gBAAgB,8BAA8B,MAAM;AAC1E,SAAK,aAAa,MAAM,IAAI,EAAE;AAC9B,SAAK,aAAa,MAAM,IAAI,CAAC;AAC7B,SAAK,aAAa,MAAM,IAAI,EAAE;AAC9B,SAAK,aAAa,MAAM,IAAI,EAAE;AAC9B,SAAK,aAAa,UAAU,SAAS;AACrC,SAAK,aAAa,gBAAgB,KAAK;AACvC,SAAK,aAAa,kBAAkB,OAAO;AAC3C,MAAE,YAAY,IAAI;AAElB,UAAM,MAAM,SAAS,gBAAgB,8BAA8B,QAAQ;AAC3E,QAAI,aAAa,MAAM,IAAI,EAAE;AAC7B,QAAI,aAAa,MAAM,IAAI,IAAI;AAC/B,QAAI,aAAa,KAAK,GAAG;AACzB,QAAI,aAAa,QAAQ,SAAS;AAClC,MAAE,YAAY,GAAG;AAGjB,UAAM,UAAU,SAAS,gBAAgB,8BAA8B,SAAS;AAChF,YAAQ,aAAa,iBAAiB,SAAS;AAC/C,YAAQ,aAAa,UAAU,SAAS;AACxC,YAAQ,aAAa,OAAO,MAAM;AAClC,YAAQ,aAAa,eAAe,YAAY;AAChD,MAAE,YAAY,OAAO;AAGrB,UAAM,YAAY,KAAK,QAAQ,aAAa,WAAW;AACvD,QAAI,UAAW,GAAE,aAAa,aAAa,SAAS;AAEpD,MAAE,MAAM,gBAAgB;AACxB,SAAK,MAAM,YAAY,CAAC;AACxB,SAAK,mBAAmB;AAAA,EAC5B;AAAA,EAEA,wBAAwB;AACpB,QAAI,KAAK,oBAAoB,KAAK,iBAAiB,YAAY;AAC3D,WAAK,iBAAiB,WAAW,YAAY,KAAK,gBAAgB;AAAA,IACtE;AACA,SAAK,mBAAmB;AAAA,EAC5B;AAAA,EAEA,gCAAgC;AAC5B,QAAI,CAAC,KAAK,iBAAkB;AAC5B,UAAM,IAAI,KAAK,IAAI;AACnB,UAAM,IAAI,KAAK,IAAI;AAEnB,UAAM,KAAK,KAAK,iBAAiB,cAAc,QAAQ;AACvD,QAAI,IAAI;AAAE,SAAG,aAAa,MAAM,IAAI,EAAE;AAAG,SAAG,aAAa,MAAM,IAAI,EAAE;AAAA,IAAG;AAExE,UAAM,OAAO,KAAK,iBAAiB,cAAc,SAAS;AAC1D,QAAI,KAAM,MAAK,aAAa,UAAU,GAAG,IAAE,EAAE,IAAI,IAAE,CAAC,IAAI,IAAE,EAAE,IAAI,IAAE,EAAE,IAAI,IAAE,CAAC,IAAI,IAAE,EAAE,EAAE;AAErF,UAAM,OAAO,KAAK,iBAAiB,cAAc,MAAM;AACvD,QAAI,MAAM;AACN,WAAK,aAAa,MAAM,IAAI,EAAE;AAAG,WAAK,aAAa,MAAM,IAAI,CAAC;AAC9D,WAAK,aAAa,MAAM,IAAI,EAAE;AAAG,WAAK,aAAa,MAAM,IAAI,EAAE;AAAA,IACnE;AAEA,UAAM,OAAO,KAAK,iBAAiB,iBAAiB,QAAQ;AAC5D,QAAI,KAAK,CAAC,GAAG;AAAE,WAAK,CAAC,EAAE,aAAa,MAAM,IAAI,EAAE;AAAG,WAAK,CAAC,EAAE,aAAa,MAAM,IAAI,IAAI;AAAA,IAAG;AAEzF,UAAM,YAAY,KAAK,QAAQ,aAAa,WAAW;AACvD,QAAI,UAAW,MAAK,iBAAiB,aAAa,aAAa,SAAS;AAAA,EAC5E;AAAA;AAAA,EAGA,IAAI,IAAI;AACJ,WAAO,WAAW,KAAK,QAAQ,aAAa,GAAG,CAAC;AAAA,EACpD;AAAA,EAEA,IAAI,EAAE,OAAO;AACT,SAAK,QAAQ,aAAa,KAAK,KAAK;AACpC,SAAK,QAAQ,aAAa,gBAAgB,KAAK;AAAA,EACnD;AAAA,EAEA,IAAI,IAAI;AACJ,WAAO,WAAW,KAAK,QAAQ,aAAa,GAAG,CAAC;AAAA,EACpD;AAAA,EAEA,IAAI,EAAE,OAAO;AACT,SAAK,QAAQ,aAAa,KAAK,KAAK;AACpC,SAAK,QAAQ,aAAa,gBAAgB,KAAK;AAAA,EACnD;AAAA,EAEA,IAAI,QAAQ;AACR,WAAO,WAAW,KAAK,QAAQ,aAAa,OAAO,CAAC;AAAA,EACxD;AAAA,EAEA,IAAI,MAAM,OAAO;AACb,SAAK,QAAQ,aAAa,SAAS,KAAK;AACxC,SAAK,QAAQ,aAAa,oBAAoB,KAAK;AAAA,EACvD;AAAA,EAEA,IAAI,SAAS;AACT,WAAO,WAAW,KAAK,QAAQ,aAAa,QAAQ,CAAC;AAAA,EACzD;AAAA,EAEA,IAAI,OAAO,OAAO;AACd,SAAK,QAAQ,aAAa,UAAU,KAAK;AACzC,SAAK,QAAQ,aAAa,qBAAqB,KAAK;AAAA,EACxD;AAAA,EAEA,IAAI,WAAW;AACX,UAAM,YAAY,KAAK,QAAQ,aAAa,WAAW;AACvD,QAAI,WAAW;AACX,YAAM,cAAc,UAAU,MAAM,iBAAiB;AACrD,UAAI,aAAa;AACb,eAAO,WAAW,YAAY,CAAC,CAAC;AAAA,MACpC;AAAA,IACJ;AACA,WAAO;AAAA,EACX;AAAA,EAEA,IAAI,SAAS,OAAO;AAChB,UAAM,UAAU,KAAK,IAAI,KAAK,QAAQ;AACtC,UAAM,UAAU,KAAK,IAAI,KAAK,SAAS;AACvC,SAAK,QAAQ,aAAa,aAAa,UAAU,KAAK,KAAK,OAAO,KAAK,OAAO,GAAG;AACjF,SAAK,QAAQ,aAAa,uBAAuB,KAAK;AAAA,EAC1D;AAAA,EAEA,KAAK,IAAI,IAAI;AACT,SAAK,KAAK;AACV,SAAK,KAAK;AAGV,UAAM,UAAU,KAAK,IAAI,KAAK,QAAQ;AACtC,UAAM,UAAU,KAAK,IAAI,KAAK,SAAS;AACvC,SAAK,QAAQ,aAAa,aAAa,UAAU,KAAK,QAAQ,KAAK,OAAO,KAAK,OAAO,GAAG;AAIzF,QAAI,cAAc,CAAC,KAAK,qBAAqB;AACzC,WAAK,uBAAuB;AAAA,IAChC;AAEA,SAAK,qBAAqB;AAAA,EAC9B;AAAA,EAEA,uBAAuB;AACnB,yBAAqB,IAAI;AAAA,EAC7B;AAAA,EAEA,yBAAyB;AAErB,QAAI,KAAK,oBAAqB;AAE9B,QAAI,cAAc;AAGlB,QAAI,OAAO,WAAW,eAAe,MAAM,QAAQ,MAAM,GAAG;AACxD,aAAO,QAAQ,WAAS;AACpB,YAAI,MAAM,cAAc,WAAW,MAAM,eAAe,IAAI,GAAG;AAC3D,wBAAc;AAAA,QAClB;AAAA,MACJ,CAAC;AAAA,IACL;AAGA,QAAI,KAAK,eAAe,YAAY;AAChC,WAAK,YAAY,2BAA2B,IAAI;AAAA,IACpD;AAGA,QAAI,qBAAqB,sBAAsB,aAAa;AACxD,wBAAkB,gBAAgB;AAAA,IACtC;AAEA,QAAI,eAAe,gBAAgB,mBAAmB;AAClD,kBAAY,eAAe;AAAA,IAC/B;AAEA,wBAAoB;AAAA,EACxB;AAAA,EAEA,SAAS,GAAG,GAAG;AACX,UAAM,OAAO,KAAK;AAClB,UAAM,OAAO,KAAK;AAClB,UAAM,WAAW,KAAK;AACtB,UAAM,YAAY,KAAK;AAGvB,WAAO,KAAK,QAAQ,KAAK,OAAO,YAAY,KAAK,QAAQ,KAAK,OAAO;AAAA,EACzE;AAAA;AAAA,EAGA,OAAO;AAAA,EAGP;AAAA;AAAA,EAGA,kBAAkB;AAEd,QAAI,iBAAiB,oBAAoB,EAAE,QAAQ,QAAM,GAAG,OAAO,CAAC;AAEpE,QAAI,iBAAiB,kCAAkC,EAAE,QAAQ,QAAM,GAAG,OAAO,CAAC;AAAA,EACtF;AAAA,EAEA,cAAc;AAEV,gBAAY,EAAE,QAAQ,KAAK,SAAS,iBAAiB,MAAM;AAAA,IAAC,EAAE,CAAC;AAAA,EACnE;AACJ;",
+  "sourcesContent": ["/* eslint-disable */\n// ImageShape class - extracted from imageTool.js\n// Depends on globals: svg, shapes, currentShape\n\nimport { updateAttachedArrows as updateArrowsForShape } from \"../tools/arrowTool.js\";\nlet isDragging = false;\nlet hoveredFrameImage = null;\nfunction selectImage() {} // stub - image selection handled by imageTool\n\nclass ImageShape {\n    constructor(element) {\n        this.element = element;\n        this.shapeName = 'image';\n        this.shapeID = element.shapeID || `image-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 10000)}`;\n\n        // Frame attachment properties\n        this.parentFrame = null;\n\n        // Upload pipeline state\n        this.uploadStatus = 'pending'; // 'pending' | 'uploading' | 'done' | 'failed'\n        this.uploadAbortController = null;\n        this._uploadIndicator = null;\n\n        // Update element attributes\n        this.element.setAttribute('type', 'image');\n        this.element.shapeID = this.shapeID;\n\n        // Create a group wrapper for the image to work with frames properly\n        this.group = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n        this.group.setAttribute('id', this.shapeID);\n\n        // Move the image element into the group\n        if (this.element.parentNode) {\n            this.element.parentNode.removeChild(this.element);\n        }\n        this.group.appendChild(this.element);\n        svg.appendChild(this.group);\n    }\n\n    showUploadIndicator() {\n        if (this._uploadIndicator) return;\n        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');\n        g.setAttribute('class', 'upload-indicator');\n\n        const x = this.x + 6;\n        const y = this.y + 6;\n\n        // Background circle\n        const bg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        bg.setAttribute('cx', x + 10);\n        bg.setAttribute('cy', y + 10);\n        bg.setAttribute('r', 12);\n        bg.setAttribute('fill', 'rgba(0,0,0,0.7)');\n        g.appendChild(bg);\n\n        // Caution/loading icon (\u26A1 style triangle)\n        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');\n        icon.setAttribute('points', `${x+10},${y+3} ${x+17},${y+16} ${x+3},${y+16}`);\n        icon.setAttribute('fill', 'none');\n        icon.setAttribute('stroke', '#FBBF24');\n        icon.setAttribute('stroke-width', '1.5');\n        icon.setAttribute('stroke-linejoin', 'round');\n        g.appendChild(icon);\n\n        // Exclamation mark inside\n        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');\n        line.setAttribute('x1', x + 10);\n        line.setAttribute('y1', y + 8);\n        line.setAttribute('x2', x + 10);\n        line.setAttribute('y2', y + 12);\n        line.setAttribute('stroke', '#FBBF24');\n        line.setAttribute('stroke-width', '1.5');\n        line.setAttribute('stroke-linecap', 'round');\n        g.appendChild(line);\n\n        const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');\n        dot.setAttribute('cx', x + 10);\n        dot.setAttribute('cy', y + 14.5);\n        dot.setAttribute('r', 0.8);\n        dot.setAttribute('fill', '#FBBF24');\n        g.appendChild(dot);\n\n        // Pulsing animation\n        const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');\n        animate.setAttribute('attributeName', 'opacity');\n        animate.setAttribute('values', '1;0.4;1');\n        animate.setAttribute('dur', '1.5s');\n        animate.setAttribute('repeatCount', 'indefinite');\n        g.appendChild(animate);\n\n        // Apply same transform as image (rotation)\n        const transform = this.element.getAttribute('transform');\n        if (transform) g.setAttribute('transform', transform);\n\n        g.style.pointerEvents = 'none';\n        this.group.appendChild(g);\n        this._uploadIndicator = g;\n    }\n\n    removeUploadIndicator() {\n        if (this._uploadIndicator && this._uploadIndicator.parentNode) {\n            this._uploadIndicator.parentNode.removeChild(this._uploadIndicator);\n        }\n        this._uploadIndicator = null;\n    }\n\n    updateUploadIndicatorPosition() {\n        if (!this._uploadIndicator) return;\n        const x = this.x + 6;\n        const y = this.y + 6;\n\n        const bg = this._uploadIndicator.querySelector('circle');\n        if (bg) { bg.setAttribute('cx', x + 10); bg.setAttribute('cy', y + 10); }\n\n        const icon = this._uploadIndicator.querySelector('polygon');\n        if (icon) icon.setAttribute('points', `${x+10},${y+3} ${x+17},${y+16} ${x+3},${y+16}`);\n\n        const line = this._uploadIndicator.querySelector('line');\n        if (line) {\n            line.setAttribute('x1', x + 10); line.setAttribute('y1', y + 8);\n            line.setAttribute('x2', x + 10); line.setAttribute('y2', y + 12);\n        }\n\n        const dots = this._uploadIndicator.querySelectorAll('circle');\n        if (dots[1]) { dots[1].setAttribute('cx', x + 10); dots[1].setAttribute('cy', y + 14.5); }\n\n        const transform = this.element.getAttribute('transform');\n        if (transform) this._uploadIndicator.setAttribute('transform', transform);\n    }\n    \n    // Position and dimension properties for frame compatibility\n    get x() {\n        return parseFloat(this.element.getAttribute('x'));\n    }\n    \n    set x(value) {\n        this.element.setAttribute('x', value);\n        this.element.setAttribute('data-shape-x', value);\n    }\n    \n    get y() {\n        return parseFloat(this.element.getAttribute('y'));\n    }\n    \n    set y(value) {\n        this.element.setAttribute('y', value);\n        this.element.setAttribute('data-shape-y', value);\n    }\n    \n    get width() {\n        return parseFloat(this.element.getAttribute('width'));\n    }\n    \n    set width(value) {\n        this.element.setAttribute('width', value);\n        this.element.setAttribute('data-shape-width', value);\n    }\n    \n    get height() {\n        return parseFloat(this.element.getAttribute('height'));\n    }\n    \n    set height(value) {\n        this.element.setAttribute('height', value);\n        this.element.setAttribute('data-shape-height', value);\n    }\n    \n    get rotation() {\n        const transform = this.element.getAttribute('transform');\n        if (transform) {\n            const rotateMatch = transform.match(/rotate\\(([^,]+)/);\n            if (rotateMatch) {\n                return parseFloat(rotateMatch[1]);\n            }\n        }\n        return 0;\n    }\n    \n    set rotation(value) {\n        const centerX = this.x + this.width / 2;\n        const centerY = this.y + this.height / 2;\n        this.element.setAttribute('transform', `rotate(${value}, ${centerX}, ${centerY})`);\n        this.element.setAttribute('data-shape-rotation', value);\n    }\n\n    move(dx, dy) {\n        this.x += dx;\n        this.y += dy;\n\n        // Update transform for rotation\n        const centerX = this.x + this.width / 2;\n        const centerY = this.y + this.height / 2;\n        this.element.setAttribute('transform', `rotate(${this.rotation}, ${centerX}, ${centerY})`);\n\n        // Only update frame containment if we're actively dragging the shape itself\n        // and not being moved by a parent frame\n        if (isDragging && !this.isBeingMovedByFrame) {\n            this.updateFrameContainment();\n        }\n\n        this.updateAttachedArrows();\n    }\n\n    updateAttachedArrows() {\n        updateArrowsForShape(this);\n    }\n\n    updateFrameContainment() {\n        // Don't update if we're being moved by a frame\n        if (this.isBeingMovedByFrame) return;\n        \n        let targetFrame = null;\n        \n        // Find which frame this shape is over\n        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {\n            shapes.forEach(shape => {\n                if (shape.shapeName === 'frame' && shape.isShapeInFrame(this)) {\n                    targetFrame = shape;\n                }\n            });\n        }\n        \n        // If we have a parent frame and we're being dragged, temporarily remove clipping\n        if (this.parentFrame && isDragging) {\n            this.parentFrame.temporarilyRemoveFromFrame(this);\n        }\n        \n        // Update frame highlighting\n        if (hoveredFrameImage && hoveredFrameImage !== targetFrame) {\n            hoveredFrameImage.removeHighlight();\n        }\n        \n        if (targetFrame && targetFrame !== hoveredFrameImage) {\n            targetFrame.highlightFrame();\n        }\n        \n        hoveredFrameImage = targetFrame;\n    }\n\n    contains(x, y) {\n        const imgX = this.x;\n        const imgY = this.y;\n        const imgWidth = this.width;\n        const imgHeight = this.height;\n        \n        // Simple bounding box check (could be enhanced for rotation)\n        return x >= imgX && x <= imgX + imgWidth && y >= imgY && y <= imgY + imgHeight;\n    }\n\n    // Add draw method for consistency with other shapes\n    draw() {\n        // Images don't need redrawing like other shapes, but we need this method for consistency\n        // Update any visual state if needed\n    }\n\n    // Add methods for frame compatibility\n    removeSelection() {\n        // Remove selection outlines from SVG\n        svg.querySelectorAll(\".selection-outline\").forEach(el => el.remove());\n        // Remove resize/rotation anchors if present\n        svg.querySelectorAll(\".resize-anchor, .rotation-anchor\").forEach(el => el.remove());\n    }\n\n    selectShape() {\n        // Image interaction state lives in imageTool. Use its bridge so\n        // programmatically-created images (graphs, restored scenes, paste)\n        // receive the same drag/resize controls as pointer-selected images.\n        if (typeof window.__selectImageElement === 'function') {\n            window.__selectImageElement(this.element, { force: true });\n        }\n    }\n}\n\nexport { ImageShape };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/react/{chunk-SBSM3GQD.js → chunk-2THKDSWW.js}

@@ -10,14 +10,14 @@ import {
   setCodeLanguage,
   updateCodeBackground,
   wrapCodeElement
-} from "./chunk-73VLPCBC.js";
+} from "./chunk-HFQZYCHJ.js";
 import {
   registerRotationAnchor
 } from "./chunk-PAKA6HUX.js";
 import {
   cleanupAttachments,
   updateAttachedArrows
-} from "./chunk-O64N5JPO.js";
+} from "./chunk-YF3TK7SC.js";
 import {
   pushCreateAction,
   pushDeleteActionWithAttachments,
@@ -26,7 +26,7 @@ import {
   pushTransformAction,
   setTextReferences,
   updateSelectedElement
-} from "./chunk-MYYBFZD3.js";
+} from "./chunk-U3TB4KRS.js";
 
 // src/tools/textTool.js
 function getThemeStroke() {
@@ -1486,4 +1486,4 @@ export {
   handleTextMouseUp,
   updateCodeToggleForShape
 };
-//# sourceMappingURL=chunk-SBSM3GQD.js.map
+//# sourceMappingURL=chunk-2THKDSWW.js.map

package/dist/react/{chunk-JOPQ27YH.js → chunk-4BLMNGTR.js}

@@ -2,13 +2,13 @@
 import {
   calculateSnap,
   clearSnapGuides
-} from "./chunk-O64N5JPO.js";
+} from "./chunk-YF3TK7SC.js";
 import {
   pushCreateAction,
   pushFrameAttachmentAction,
   pushOptionsChangeAction,
   pushTransformAction
-} from "./chunk-MYYBFZD3.js";
+} from "./chunk-U3TB4KRS.js";
 
 // src/tools/rectangleTool.js
 var isDrawingSquare = false;
@@ -516,4 +516,4 @@ export {
   handleMouseMoveRect,
   handleMouseUpRect
 };
-//# sourceMappingURL=chunk-JOPQ27YH.js.map
+//# sourceMappingURL=chunk-4BLMNGTR.js.map

package/dist/react/{chunk-C62SXFBL.js → chunk-4TAS67SL.js}

@@ -2,7 +2,7 @@
 import {
   cleanupAttachments,
   updateAttachedArrows
-} from "./chunk-O64N5JPO.js";
+} from "./chunk-YF3TK7SC.js";
 
 // src/shapes/IconShape.js
 var isDragging = false;
@@ -70,6 +70,23 @@ var IconShape = class {
     this.element.setAttribute("height", value);
     this.element.setAttribute("data-shape-height", value);
   }
+  _transformMetrics() {
+    const vbWidth = parseFloat(this.element.getAttribute("data-viewbox-width")) || 24;
+    const vbHeight = parseFloat(this.element.getAttribute("data-viewbox-height")) || 24;
+    const scale = Math.min(this.width / vbWidth, this.height / vbHeight);
+    return {
+      scale,
+      localCenterX: this.width / 2 / scale,
+      localCenterY: this.height / 2 / scale
+    };
+  }
+  _applyTransform() {
+    const { scale, localCenterX, localCenterY } = this._transformMetrics();
+    this.element.setAttribute(
+      "transform",
+      `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`
+    );
+  }
   get rotation() {
     const dataRotation = this.element.getAttribute("data-shape-rotation");
     if (dataRotation) {
@@ -86,22 +103,12 @@ var IconShape = class {
   }
   set rotation(value) {
     this.element.setAttribute("data-shape-rotation", value);
-    const vbWidth = parseFloat(this.element.getAttribute("data-viewbox-width")) || 24;
-    const vbHeight = parseFloat(this.element.getAttribute("data-viewbox-height")) || 24;
-    const scale = this.width / Math.max(vbWidth, vbHeight);
-    const localCenterX = this.width / 2 / scale;
-    const localCenterY = this.height / 2 / scale;
-    this.element.setAttribute("transform", `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${value}, ${localCenterX}, ${localCenterY})`);
+    this._applyTransform();
   }
   move(dx, dy) {
     this.x += dx;
     this.y += dy;
-    const vbWidth = parseFloat(this.element.getAttribute("data-viewbox-width")) || 24;
-    const vbHeight = parseFloat(this.element.getAttribute("data-viewbox-height")) || 24;
-    const scale = this.width / Math.max(vbWidth, vbHeight);
-    const localCenterX = this.width / 2 / scale;
-    const localCenterY = this.height / 2 / scale;
-    this.element.setAttribute("transform", `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`);
+    this._applyTransform();
     this.element.setAttribute("x", this.x);
     this.element.setAttribute("y", this.y);
     this.element.setAttribute("data-shape-x", this.x);
@@ -143,10 +150,7 @@ var IconShape = class {
     updateAttachedArrows(this);
   }
   draw() {
-    const scale = this.width / 24;
-    const localCenterX = this.width / 2 / scale;
-    const localCenterY = this.height / 2 / scale;
-    this.element.setAttribute("transform", `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`);
+    this._applyTransform();
     this.element.setAttribute("data-shape-x", this.x);
     this.element.setAttribute("data-shape-y", this.y);
     this.element.setAttribute("data-shape-width", this.width);
@@ -203,10 +207,7 @@ var IconShape = class {
       this.parentFrame = pos.parentFrame;
       pos.parentFrame.addShapeToFrame(this);
     }
-    const scale = pos.width / 24;
-    const localCenterX = pos.width / 2 / scale;
-    const localCenterY = pos.height / 2 / scale;
-    this.element.setAttribute("transform", `translate(${pos.x}, ${pos.y}) scale(${scale}) rotate(${pos.rotation}, ${localCenterX}, ${localCenterY})`);
+    this._applyTransform();
     this.element.setAttribute("data-shape-x", pos.x);
     this.element.setAttribute("data-shape-y", pos.y);
     this.element.setAttribute("data-shape-width", pos.width);
@@ -219,4 +220,4 @@ var IconShape = class {
 export {
   IconShape
 };
-//# sourceMappingURL=chunk-C62SXFBL.js.map
+//# sourceMappingURL=chunk-4TAS67SL.js.map

package/dist/react/chunk-4TAS67SL.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/shapes/IconShape.js"],
+  "sourcesContent": ["/* eslint-disable */\n// IconShape class - extracted from icons.js\n// Depends on globals: svg, shapes\nimport { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from '../tools/arrowTool.js';\n\n// Module-level state shared with iconTool via window bridge\nlet isDragging = false;\nlet hoveredFrameIcon = null;\n\n// Expose setters so iconTool.js can sync these values\nwindow.__iconShapeState = {\n    set isDragging(v) { isDragging = v; },\n    get isDragging() { return isDragging; },\n    set hoveredFrameIcon(v) { hoveredFrameIcon = v; },\n    get hoveredFrameIcon() { return hoveredFrameIcon; },\n};\n\nfunction getSVGElement() {\n    return document.getElementById('freehand-canvas');\n}\n\n// Delegate to iconTool's selectIcon via window bridge\nfunction selectIcon(event) {\n    if (window.__iconToolSelectIcon) {\n        window.__iconToolSelectIcon(event);\n    }\n}\n\nclass IconShape {\n    constructor(element) {\n        this.element = element;\n        this.shapeName = 'icon';\n        this.shapeID = `icon-${String(Date.now()).slice(0, 8)}-${Math.floor(Math.random() * 10000)}`;\n        this.type = 'icon';\n\n        this.parentFrame = null;\n        this.isDraggedOutTemporarily = false;\n\n        this.element.setAttribute('type', 'icon');\n        this.element.shapeID = this.shapeID;\n\n        this.group = this.element;\n        this.group.setAttribute('id', this.shapeID);\n    }\n\n    get x() {\n        return parseFloat(this.element.getAttribute('x')) || 0;\n    }\n\n    set x(value) {\n        this.element.setAttribute('x', value);\n        this.element.setAttribute('data-shape-x', value);\n    }\n\n    get y() {\n        return parseFloat(this.element.getAttribute('y')) || 0;\n    }\n\n    set y(value) {\n        this.element.setAttribute('y', value);\n        this.element.setAttribute('data-shape-y', value);\n    }\n\n    get width() {\n        return parseFloat(this.element.getAttribute('width')) || 100;\n    }\n\n    set width(value) {\n        this.element.setAttribute('width', value);\n        this.element.setAttribute('data-shape-width', value);\n    }\n\n    get height() {\n        return parseFloat(this.element.getAttribute('height')) || 100;\n    }\n\n    set height(value) {\n        this.element.setAttribute('height', value);\n        this.element.setAttribute('data-shape-height', value);\n    }\n\n    _transformMetrics() {\n        const vbWidth = parseFloat(this.element.getAttribute('data-viewbox-width')) || 24;\n        const vbHeight = parseFloat(this.element.getAttribute('data-viewbox-height')) || 24;\n        const scale = Math.min(this.width / vbWidth, this.height / vbHeight);\n        return {\n            scale,\n            localCenterX: this.width / 2 / scale,\n            localCenterY: this.height / 2 / scale,\n        };\n    }\n\n    _applyTransform() {\n        const { scale, localCenterX, localCenterY } = this._transformMetrics();\n        this.element.setAttribute(\n            'transform',\n            `translate(${this.x}, ${this.y}) scale(${scale}) rotate(${this.rotation}, ${localCenterX}, ${localCenterY})`\n        );\n    }\n\n    get rotation() {\n        const dataRotation = this.element.getAttribute('data-shape-rotation');\n        if (dataRotation) {\n            return parseFloat(dataRotation);\n        }\n\n        const transform = this.element.getAttribute('transform');\n        if (transform) {\n            const rotateMatch = transform.match(/rotate\\(([^,\\s]+)/);\n            if (rotateMatch) {\n                return parseFloat(rotateMatch[1]);\n            }\n        }\n        return 0;\n    }\n\n    set rotation(value) {\n        this.element.setAttribute('data-shape-rotation', value);\n        this._applyTransform();\n    }\n\n    move(dx, dy) {\n        this.x += dx;\n        this.y += dy;\n\n        this._applyTransform();\n\n        this.element.setAttribute('x', this.x);\n        this.element.setAttribute('y', this.y);\n\n        this.element.setAttribute('data-shape-x', this.x);\n        this.element.setAttribute('data-shape-y', this.y);\n\n        updateArrowsForShape(this);\n\n        if (isDragging && !this.isBeingMovedByFrame) {\n            this.updateFrameContainment();\n        }\n    }\n    updateFrameContainment() {\n        if (this.isBeingMovedByFrame) return;\n\n        let targetFrame = null;\n\n        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {\n            shapes.forEach(shape => {\n                if (shape.shapeName === 'frame' && shape.isShapeInFrame(this)) {\n                    targetFrame = shape;\n                }\n            });\n        }\n\n        if (this.parentFrame && isDragging) {\n            this.parentFrame.temporarilyRemoveFromFrame(this);\n        }\n\n        if (hoveredFrameIcon && hoveredFrameIcon !== targetFrame) {\n            hoveredFrameIcon.removeHighlight();\n        }\n\n        if (targetFrame && targetFrame !== hoveredFrameIcon) {\n            targetFrame.highlightFrame();\n        }\n\n        hoveredFrameIcon = targetFrame;\n    }\n\n    contains(x, y) {\n        const iconX = this.x;\n        const iconY = this.y;\n        const iconWidth = this.width;\n        const iconHeight = this.height;\n\n        return x >= iconX && x <= iconX + iconWidth && y >= iconY && y <= iconY + iconHeight;\n    }\n\n    updateAttachedArrows() {\n        updateArrowsForShape(this);\n    }\n\n    draw() {\n        this._applyTransform();\n\n        this.element.setAttribute('data-shape-x', this.x);\n        this.element.setAttribute('data-shape-y', this.y);\n        this.element.setAttribute('data-shape-width', this.width);\n        this.element.setAttribute('data-shape-height', this.height);\n        this.element.setAttribute('data-shape-rotation', this.rotation);\n\n        updateArrowsForShape(this);\n    }\n\n    removeSelection(params) {\n        if (window.__iconToolRemoveSelection) {\n            window.__iconToolRemoveSelection();\n        }\n        this.isSelected = false;\n    }\n\n    // Called by handleMultiSelectionMouseDown \u2014 same as selectShape\n    addAnchors() {\n        selectIcon({ target: this.element, stopPropagation: () => { } });\n    }\n\n    selectShape() {\n        selectIcon({ target: this.element, stopPropagation: () => { } });\n    }\n\n    remove() {\n        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {\n            const idx = shapes.indexOf(this);\n            if (idx !== -1) shapes.splice(idx, 1);\n        }\n\n        if (typeof cleanupAttachments === 'function') {\n            cleanupAttachments(this.element);\n        }\n\n        if (this.parentFrame) {\n            this.parentFrame.removeShapeFromFrame(this);\n        }\n\n        if (this.group && this.group.parentNode) {\n            this.group.parentNode.removeChild(this.group);\n        }\n    }\n    restore(pos) {\n        const svg = getSVGElement();\n\n        if (!this.group.parentNode && svg) {\n            svg.appendChild(this.group);\n        }\n\n        if (typeof shapes !== 'undefined' && Array.isArray(shapes)) {\n            if (shapes.indexOf(this) === -1) {\n                shapes.push(this);\n            }\n        }\n\n        this.x = pos.x;\n        this.y = pos.y;\n        this.width = pos.width;\n        this.height = pos.height;\n        this.rotation = pos.rotation;\n\n        if (pos.parentFrame) {\n            this.parentFrame = pos.parentFrame;\n            pos.parentFrame.addShapeToFrame(this);\n        }\n\n        this._applyTransform();\n\n        this.element.setAttribute('data-shape-x', pos.x);\n        this.element.setAttribute('data-shape-y', pos.y);\n        this.element.setAttribute('data-shape-width', pos.width);\n        this.element.setAttribute('data-shape-height', pos.height);\n        this.element.setAttribute('data-shape-rotation', pos.rotation);\n\n        updateArrowsForShape(this);\n    }\n}\n\nexport { IconShape };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/react/{chunk-7VBI7S7T.js → chunk-AH4PWNEB.js}

@@ -6,12 +6,13 @@ import {
   calculateSnap,
   cleanupAttachments,
   clearSnapGuides
-} from "./chunk-O64N5JPO.js";
+} from "./chunk-YF3TK7SC.js";
 import {
+  pushCreateAction,
   pushDeleteAction,
   pushFrameAttachmentAction,
   pushTransformAction
-} from "./chunk-MYYBFZD3.js";
+} from "./chunk-U3TB4KRS.js";
 
 // src/core/Selection.js
 var isMultiSelecting = false;
@@ -1604,6 +1605,8 @@ function deleteSelectedShapes() {
 }
 function frameSelectedShapes() {
   if (multiSelection.selectedShapes.size < 2) return;
+  const shapesToFrame = Array.from(multiSelection.selectedShapes);
+  if (shapesToFrame.some((shape) => shape?.shapeName === "frame" || shape?.parentFrame)) return;
   const bounds = multiSelection.getBounds();
   if (!bounds) return;
   const padding = 20;
@@ -1618,14 +1621,6 @@ function frameSelectedShapes() {
   }
   const frame = new FrameClass(fx, fy, fw, fh);
   shapes.push(frame);
-  if (window.historyStack) {
-    window.historyStack.push({
-      type: window.ACTION_CREATE || "create",
-      shape: frame,
-      shapeName: "frame"
-    });
-  }
-  const shapesToFrame = Array.from(multiSelection.selectedShapes);
   multiSelection.clearSelection();
   for (const shape of shapesToFrame) {
     frame.addShapeToFrame(shape);
@@ -1643,6 +1638,10 @@ function frameSelectedShapes() {
       shapes.splice(earliest, 0, frame);
     }
   }
+  pushCreateAction(frame, {
+    frameCreation: true,
+    containedShapes: shapesToFrame
+  });
   if (typeof frame.selectFrame === "function") {
     frame.selectFrame();
   }
@@ -1668,4 +1667,4 @@ export {
   handleMultiSelectionMouseMove,
   handleMultiSelectionMouseUp
 };
-//# sourceMappingURL=chunk-7VBI7S7T.js.map
+//# sourceMappingURL=chunk-AH4PWNEB.js.map