@elixpo/lixsketch 5.5.19 → 5.5.21

package/dist/react/{lineTool-XLOOZE3E.js → lineTool-N5I7IGT7.js}

@@ -3,12 +3,12 @@ import {
   handleMouseDown,
   handleMouseMove,
   handleMouseUp
-} from "./chunk-C72OHQLE.js";
-import "./chunk-O64N5JPO.js";
-import "./chunk-MYYBFZD3.js";
+} from "./chunk-ILGAFR56.js";
+import "./chunk-YF3TK7SC.js";
+import "./chunk-U3TB4KRS.js";
 export {
   handleMouseDown as handleMouseDownLine,
   handleMouseMove as handleMouseMoveLine,
   handleMouseUp as handleMouseUpLine
 };
-//# sourceMappingURL=lineTool-XLOOZE3E.js.map
+//# sourceMappingURL=lineTool-N5I7IGT7.js.map

package/dist/react/{rectangleTool-AEYDDJCA.js → rectangleTool-YUT7ZK2E.js}

@@ -3,12 +3,12 @@ import {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
-} from "./chunk-JOPQ27YH.js";
-import "./chunk-O64N5JPO.js";
-import "./chunk-MYYBFZD3.js";
+} from "./chunk-4BLMNGTR.js";
+import "./chunk-YF3TK7SC.js";
+import "./chunk-U3TB4KRS.js";
 export {
   handleMouseDownRect,
   handleMouseMoveRect,
   handleMouseUpRect
 };
-//# sourceMappingURL=rectangleTool-AEYDDJCA.js.map
+//# sourceMappingURL=rectangleTool-YUT7ZK2E.js.map

package/dist/react/{textTool-UORBAAJE.js → textTool-IQOYPELP.js}

@@ -6,10 +6,11 @@ import {
   handleTextMouseMove,
   handleTextMouseUp,
   updateCodeToggleForShape
-} from "./chunk-QYNTPZON.js";
-import "./chunk-3VSGFP6U.js";
-import "./chunk-O64N5JPO.js";
-import "./chunk-MYYBFZD3.js";
+} from "./chunk-2THKDSWW.js";
+import "./chunk-HFQZYCHJ.js";
+import "./chunk-PAKA6HUX.js";
+import "./chunk-YF3TK7SC.js";
+import "./chunk-U3TB4KRS.js";
 export {
   deselectElement as deselectTextElement,
   enterEditMode,
@@ -18,4 +19,4 @@ export {
   handleTextMouseUp,
   updateCodeToggleForShape
 };
-//# sourceMappingURL=textTool-UORBAAJE.js.map
+//# sourceMappingURL=textTool-IQOYPELP.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.5.19",
+  "version": "5.5.21",
   "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/core/CopyPaste.js

@@ -147,7 +147,13 @@ function serializeShape(shape) {
                 width: shape.width,
                 height: shape.height,
                 rotation: shape.rotation,
-                href: el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
+                href: el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || '',
+                storageProvider: el.getAttribute('data-storage-provider') || null,
+                storageCloudName: el.getAttribute('data-storage-cloud-name') || null,
+                frameType: shape._frameType || null,
+                graphData: shape._frameType === 'graph' && shape._graphData
+                    ? cloneOptions(shape._graphData)
+                    : null
             };
         }
 
@@ -383,11 +389,22 @@ function createShapeFromData(data, offsetX, offsetY) {
             imgEl.setAttribute('data-shape-height', data.height);
             imgEl.setAttribute('preserveAspectRatio', 'none');
             imgEl.setAttribute('style', 'cursor: pointer;');
+            if (data.storageProvider) imgEl.setAttribute('data-storage-provider', data.storageProvider);
+            if (data.storageCloudName) imgEl.setAttribute('data-storage-cloud-name', data.storageCloudName);
 
             // ImageShape constructor moves element into a group and appends to svg
             svgEl.appendChild(imgEl);
             const imageShape = new ImageShape(imgEl);
             imageShape.rotation = data.rotation;
+            if (data.frameType === 'graph' && data.graphData) {
+                if (typeof window.__hydrateGraphShape === 'function') {
+                    window.__hydrateGraphShape(imageShape, data.graphData);
+                } else {
+                    imageShape._frameType = 'graph';
+                    imageShape._graphData = cloneOptions(data.graphData);
+                    imageShape.element.setAttribute('data-graph-shape', 'true');
+                }
+            }
             return imageShape;
         }
 
@@ -605,15 +622,25 @@ function handlePasteEvent(e) {
                 const rawDataUrl = ev.target.result;
                 const isSvg = (blob.type || '').toLowerCase() === 'image/svg+xml';
                 let placedDataUrl = rawDataUrl;
+                let placedSize = blob.size;
                 if (!isSvg) {
                     try {
                         const compressed = await compressImage(rawDataUrl);
-                        if (compressed?.dataUrl) placedDataUrl = compressed.dataUrl;
+                        if (compressed?.dataUrl) {
+                            placedDataUrl = compressed.dataUrl;
+                            placedSize = compressed.compressedSize || placedSize;
+                        }
                     } catch (err) {
                         console.warn('[CopyPaste] Pre-placement compression failed, using raw:', err);
                     }
                 }
-                placeImageFromDataUrl(placedDataUrl);
+                const limit = Number(window.__roomImageLimitBytes) || 2 * 1024 * 1024;
+                const personalStorage = window.__personalCloudinary?.connected && window.__personalCloudinary?.useForUploads;
+                if (!personalStorage && (window.__roomImageBytesUsed || 0) + placedSize > limit) {
+                    alert(`Workspace image limit reached (${Math.round(limit / (1024 * 1024))} MB).`);
+                    return;
+                }
+                placeImageFromDataUrl(placedDataUrl, placedSize);
             };
             reader.readAsDataURL(blob);
             return; // only handle first image
@@ -621,7 +648,7 @@ function handlePasteEvent(e) {
     }
 }
 
-function placeImageFromDataUrl(dataUrl) {
+function placeImageFromDataUrl(dataUrl, sizeBytes = 0) {
     const svgEl = getSVGElement();
     if (!svgEl || !window.ImageShape) return;
 
@@ -648,6 +675,9 @@ function placeImageFromDataUrl(dataUrl) {
         imgEl.setAttribute('data-shape-height', displayH);
         imgEl.setAttribute('type', 'image');
         imgEl.setAttribute('preserveAspectRatio', 'none');
+        imgEl.__fileSize = sizeBytes;
+        imgEl.setAttribute('data-file-size', String(sizeBytes));
+        window.__roomImageBytesUsed = (window.__roomImageBytesUsed || 0) + sizeBytes;
 
         svgEl.appendChild(imgEl);
         const imageShape = new ImageShape(imgEl);

package/src/core/GraphEngine.js

@@ -1,7 +1,10 @@
 /* eslint-disable */
 /**
- * GraphEngine - Bridge between graph rendering and the sketch canvas.
- * Creates Frames containing rendered graph SVG elements.
+ * GraphEngine - bridge between graph rendering and the sketch canvas.
+ *
+ * Canvas graphs use ImageShape with an SVG data URL. This keeps the graph a
+ * single crisp vector element while reusing the engine's established select,
+ * translate, resize, rotate, copy/paste, and frame-containment behaviour.
  */
 
 import { parseExpression, isValidExpression } from './GraphMathParser.js';
@@ -10,209 +13,150 @@ import { renderGraphSVG, renderGraphPreviewSVG, GRAPH_COLORS } from './GraphRend
 const NS = 'http://www.w3.org/2000/svg';
 const GRAPH_WIDTH = 600;
 const GRAPH_HEIGHT = 420;
+const MAX_PLACED_SCREEN_WIDTH = 480;
+const MAX_VIEWPORT_WIDTH_RATIO = 0.68;
+const MAX_VIEWPORT_HEIGHT_RATIO = 0.58;
+
+function cloneGraphData(equations, settings) {
+    return {
+        equations: (equations || []).map((equation) => ({
+            expression: equation.expression,
+            color: equation.color,
+        })),
+        settings: { ...(settings || {}) },
+    };
+}
+
+function graphSvgDataUrl(svgMarkup) {
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgMarkup)}`;
+}
+
+function refreshGraphImage(shape) {
+    if (!shape?._graphData || !shape.element) return false;
+    const svgMarkup = renderGraphSVG(shape._graphData.equations, {
+        ...shape._graphData.settings,
+        width: GRAPH_WIDTH,
+        height: GRAPH_HEIGHT,
+    });
+    if (!svgMarkup) return false;
+    const href = graphSvgDataUrl(svgMarkup);
+    shape.element.setAttribute('href', href);
+    shape.element.setAttribute('data-href', href);
+    return true;
+}
+
+/** Attach graph behaviour to a regular ImageShape, including restored and
+ * pasted graphs. The function is intentionally idempotent. */
+function hydrateGraphShape(shape, graphData) {
+    if (!shape?.element || !graphData) return shape;
+    shape._frameType = 'graph';
+    shape._graphData = cloneGraphData(graphData.equations, graphData.settings);
+    shape.uploadStatus = 'done';
+    shape.element.setAttribute('data-graph-shape', 'true');
+    shape.element.setAttribute('preserveAspectRatio', 'none');
+    shape.element.style.cursor = 'move';
+    shape._refreshGraphImage = () => refreshGraphImage(shape);
+    shape.adaptToBackground = () => refreshGraphImage(shape);
+    return shape;
+}
+
+function selectOnlyGraph(shape) {
+    if (!shape) return;
+
+    if (window.multiSelection?.selectedShapes?.size) {
+        window.multiSelection.clearSelection();
+    }
+    if (window.currentShape && window.currentShape !== shape
+        && typeof window.currentShape.removeSelection === 'function') {
+        window.currentShape.removeSelection();
+    }
+
+    // Generated content always lands ready to manipulate. Use the store bridge
+    // so the toolbar and legacy engine flags change together.
+    window.__sketchStoreApi?.setActiveTool?.('select');
+    window.currentShape = shape;
+    shape.selectShape?.();
+}
+
+function placedGraphSize(viewBox) {
+    const zoom = Math.max(0.001, Number(window.currentZoom) || 1);
+    const byScreen = MAX_PLACED_SCREEN_WIDTH / zoom;
+    const byViewportWidth = viewBox.width * MAX_VIEWPORT_WIDTH_RATIO;
+    const byViewportHeight = viewBox.height * MAX_VIEWPORT_HEIGHT_RATIO * (GRAPH_WIDTH / GRAPH_HEIGHT);
+    const width = Math.max(80 / zoom, Math.min(GRAPH_WIDTH, byScreen, byViewportWidth, byViewportHeight));
+    return { width, height: width * (GRAPH_HEIGHT / GRAPH_WIDTH) };
+}
 
 /**
- * Place a graph on the canvas inside a Frame.
+ * Place a graph as one editable vector-image shape, or update an existing
+ * graph in place without losing its canvas position, size, or rotation.
  */
-function renderGraphOnCanvas(equations, settings) {
-    if (!equations || equations.length === 0) return false;
-    if (!window.svg || !window.Frame) {
+function renderGraphOnCanvas(equations, settings, existingShape = null) {
+    const validEquations = (equations || []).filter((equation) => equation?.expression?.trim());
+    if (validEquations.length === 0) return false;
+    if (!window.svg || !window.ImageShape) {
         console.error('[GraphEngine] Engine not initialized');
         return false;
     }
 
-    // Generate full-size SVG
-    const svgMarkup = renderGraphSVG(equations, {
-        ...settings,
-        width: GRAPH_WIDTH,
-        height: GRAPH_HEIGHT,
-    });
-    if (!svgMarkup) return false;
+    const graphData = cloneGraphData(validEquations, settings);
 
-    // Viewport center
-    const vb = window.currentViewBox || { x: 0, y: 0, width: window.innerWidth, height: window.innerHeight };
-    const vcx = vb.x + vb.width / 2;
-    const vcy = vb.y + vb.height / 2;
-
-    const frameW = GRAPH_WIDTH + 40;
-    const frameH = GRAPH_HEIGHT + 40;
-    const frameX = vcx - frameW / 2;
-    const frameY = vcy - frameH / 2;
-
-    // Build title from equations
-    const eqLabels = equations
-        .filter(eq => eq.expression && eq.expression.trim())
-        .map(eq => eq.expression.trim())
-        .slice(0, 3);
-    const title = eqLabels.length > 0
-        ? 'Graph: ' + eqLabels.join(', ')
-        : 'Graph';
-
-    // Phase 5 (issue #22): no wrapper frame. The graph is conceptually a
-    // single rendering — axes, grid, curves all interlocked — so we don't
-    // split it into per-curve shapes. Instead the graph becomes ONE
-    // first-class shape on the canvas: a `graphShape` that implements the
-    // shape API the engine relies on (contains / selectShape / etc.) so
-    // it can be selected, dragged, attached to by arrows, picked up by
-    // the rect-drag — exactly like a user-drawn shape.
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(svgMarkup, 'image/svg+xml');
-        const svgEl = doc.querySelector('svg');
-        if (!svgEl) return false;
-
-        const graphGroup = document.createElementNS(NS, 'g');
-        graphGroup.setAttribute('data-type', 'graph-group');
-        graphGroup.setAttribute('transform', `translate(${frameX + 20}, ${frameY + 20})`);
-
-        // Copy defs (clip paths)
-        const defs = svgEl.querySelector('defs');
-        if (defs) {
-            const defsClone = defs.cloneNode(true);
-            window.svg.querySelector('defs')?.appendChild(defsClone.firstChild) ||
-                window.svg.insertBefore(defsClone, window.svg.firstChild);
-        }
+    if (existingShape?._frameType === 'graph' && existingShape.element) {
+        hydrateGraphShape(existingShape, graphData);
+        if (!refreshGraphImage(existingShape)) return false;
+        selectOnlyGraph(existingShape);
+        window.__adaptCanvasContrast?.(
+            window.getComputedStyle(window.svg).backgroundColor || '#15111f'
+        );
+        return true;
+    }
 
-        while (svgEl.childNodes.length > 0) {
-            const child = svgEl.childNodes[0];
-            if (child.nodeName === 'defs') { svgEl.removeChild(child); continue; }
-            graphGroup.appendChild(child);
+    const viewBox = window.currentViewBox || {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
+    const size = placedGraphSize(viewBox);
+    const x = viewBox.x + (viewBox.width - size.width) / 2;
+    const y = viewBox.y + (viewBox.height - size.height) / 2;
+
+    try {
+        const image = document.createElementNS(NS, 'image');
+        image.setAttribute('x', x);
+        image.setAttribute('y', y);
+        image.setAttribute('width', size.width);
+        image.setAttribute('height', size.height);
+        image.setAttribute('data-shape-x', x);
+        image.setAttribute('data-shape-y', y);
+        image.setAttribute('data-shape-width', size.width);
+        image.setAttribute('data-shape-height', size.height);
+
+        const graphShape = hydrateGraphShape(new window.ImageShape(image), graphData);
+        if (!refreshGraphImage(graphShape)) {
+            graphShape.group?.remove();
+            return false;
         }
-        window.svg.appendChild(graphGroup);
-
-        const graphShape = {
-            shapeName: 'graph',                  // first-class shapeName
-            shapeID: `graph-${Date.now().toString(36)}-${Math.floor(Math.random() * 10000)}`,
-            group: graphGroup,
-            element: graphGroup,
-            x: frameX + 20,
-            y: frameY + 20,
-            width: GRAPH_WIDTH,
-            height: GRAPH_HEIGHT,
-            rotation: 0,
-            isSelected: false,
-            _selectionRect: null,
-            _graphData: {
-                equations: equations.map(eq => ({ expression: eq.expression, color: eq.color })),
-                settings: { ...settings },
-            },
-
-            // ── Shape API the engine relies on ────────────────────────
-            contains(px, py) {
-                return px >= this.x && px <= this.x + this.width
-                    && py >= this.y && py <= this.y + this.height;
-            },
-            move(dx, dy) {
-                this.x += dx; this.y += dy;
-                this.group.setAttribute('transform', `translate(${this.x}, ${this.y})`);
-                this._updateSelectionRect();
-            },
-            selectShape() {
-                this.isSelected = true;
-                if (this._selectionRect) return;
-                const r = document.createElementNS(NS, 'rect');
-                r.setAttribute('fill', 'none');
-                r.setAttribute('stroke', '#9b7bf7');
-                r.setAttribute('stroke-width', '1.5');
-                r.setAttribute('stroke-dasharray', '4 3');
-                r.setAttribute('pointer-events', 'none');
-                window.svg.appendChild(r);
-                this._selectionRect = r;
-                this._updateSelectionRect();
-            },
-            removeSelection() {
-                this.isSelected = false;
-                if (this._selectionRect && this._selectionRect.parentNode) {
-                    this._selectionRect.parentNode.removeChild(this._selectionRect);
-                }
-                this._selectionRect = null;
-            },
-            _updateSelectionRect() {
-                if (!this._selectionRect) return;
-                const pad = 4;
-                this._selectionRect.setAttribute('x', this.x - pad);
-                this._selectionRect.setAttribute('y', this.y - pad);
-                this._selectionRect.setAttribute('width', this.width + pad * 2);
-                this._selectionRect.setAttribute('height', this.height + pad * 2);
-            },
-            updateAttachedArrows() {
-                if (typeof window.updateAttachedArrows === 'function') {
-                    window.updateAttachedArrows(this);
-                }
-            },
-            adaptToBackground(background, foreground, muted) {
-                const ensureContrast = window.__ensureCanvasContrast || ((color) => color);
-
-                this.group.querySelectorAll('rect').forEach((rect) => {
-                    const fill = rect.getAttribute('fill');
-                    const stroke = rect.getAttribute('stroke');
-                    if (fill && fill !== 'none') rect.setAttribute('fill', background);
-                    if (stroke && stroke !== 'none') {
-                        rect.setAttribute('stroke', muted);
-                        rect.setAttribute('stroke-opacity', '0.45');
-                    }
-                });
-
-                this.group.querySelectorAll('line').forEach((line) => {
-                    const width = Number.parseFloat(line.getAttribute('stroke-width') || '1');
-                    line.setAttribute('stroke', foreground);
-                    line.setAttribute('stroke-opacity', width <= 0.5 ? '0.18' : '0.5');
-                });
-
-                this.group.querySelectorAll('path[stroke]').forEach((path) => {
-                    const original = path.dataset.graphColor || path.getAttribute('stroke');
-                    if (!original || original === 'none') return;
-                    path.dataset.graphColor = original;
-                    path.setAttribute('stroke', ensureContrast(original, background, 3));
-                });
-
-                this.group.querySelectorAll('circle[fill]').forEach((circle) => {
-                    const original = circle.dataset.graphColor || circle.getAttribute('fill');
-                    if (!original || original === 'none') return;
-                    circle.dataset.graphColor = original;
-                    circle.setAttribute('fill', ensureContrast(original, background, 3));
-                });
-
-                this.group.querySelectorAll('text').forEach((text) => {
-                    const original = text.dataset.graphColor || text.getAttribute('fill');
-                    if (original) text.dataset.graphColor = original;
-                    const isAxisLabel = !original || ['#8b949e', '#62627a'].includes(original.toLowerCase());
-                    text.setAttribute('fill', isAxisLabel
-                        ? muted
-                        : ensureContrast(original, background, 4.5));
-                });
-            },
-        };
 
         window.shapes.push(graphShape);
-        if (window.pushCreateAction) window.pushCreateAction(graphShape);
-
-        // Auto-select so the user sees something landed.
-        window.currentShape = graphShape;
-        graphShape.selectShape();
+        window.pushCreateAction?.(graphShape);
+        selectOnlyGraph(graphShape);
         window.__adaptCanvasContrast?.(
-            window.getComputedStyle(window.svg).backgroundColor || '#13171C'
+            window.getComputedStyle(window.svg).backgroundColor || '#15111f'
         );
-    } catch (err) {
-        console.error('[GraphEngine] SVG insertion failed:', err);
+        return true;
+    } catch (error) {
+        console.error('[GraphEngine] SVG insertion failed:', error);
         return false;
     }
-
-    return true;
 }
 
-/**
- * Initialize the graph engine — expose bridge functions on window.
- */
+/** Initialize graph bridges used by the modal and scene restoration. */
 export function initGraphEngine() {
-    window.__graphPreview = (equations, settings) => {
-        return renderGraphPreviewSVG(equations, settings);
-    };
+    window.__graphPreview = (equations, settings) => renderGraphPreviewSVG(equations, settings);
     window.__graphRenderer = renderGraphOnCanvas;
-    window.__graphParser = (expr) => {
-        const fn = parseExpression(expr);
-        return fn ? true : false;
-    };
+    window.__hydrateGraphShape = hydrateGraphShape;
+    window.__graphParser = (expression) => Boolean(parseExpression(expression));
     window.__graphValidate = isValidExpression;
     window.__graphColors = GRAPH_COLORS;
 }

package/src/core/SceneSerializer.js

@@ -180,6 +180,14 @@ function serializeShape(shape) {
                 width: shape.width, height: shape.height,
                 rotation: shape.rotation,
                 href: el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || '',
+                sizeBytes: Number(el.__fileSize || el.getAttribute('data-file-size')) || 0,
+                cloudinaryId: el.getAttribute('data-cloudinary-id') || null,
+                storageProvider: el.getAttribute('data-storage-provider') || 'platform_cloudinary',
+                storageCloudName: el.getAttribute('data-storage-cloud-name') || null,
+                frameType: shape._frameType || null,
+                graphData: shape._frameType === 'graph' && shape._graphData
+                    ? cloneOptions(shape._graphData)
+                    : null,
             };
         }
 
@@ -300,10 +308,27 @@ function deserializeShape(data) {
             imgEl.setAttribute('height', data.height);
             imgEl.setAttribute('href', data.href);
             imgEl.setAttribute('preserveAspectRatio', 'none');
+            if (data.sizeBytes) {
+                imgEl.__fileSize = Number(data.sizeBytes) || 0;
+                imgEl.setAttribute('data-file-size', String(imgEl.__fileSize));
+                window.__roomImageBytesUsed = (window.__roomImageBytesUsed || 0) + imgEl.__fileSize;
+            }
+            if (data.cloudinaryId) imgEl.setAttribute('data-cloudinary-id', data.cloudinaryId);
+            if (data.storageProvider) imgEl.setAttribute('data-storage-provider', data.storageProvider);
+            if (data.storageCloudName) imgEl.setAttribute('data-storage-cloud-name', data.storageCloudName);
             svgEl.appendChild(imgEl);
             const shape = new ImageShape(imgEl);
             if (data.rotation) shape.rotation = data.rotation;
             if (data.shapeID) shape.shapeID = data.shapeID;
+            if (data.frameType === 'graph' && data.graphData) {
+                if (typeof window.__hydrateGraphShape === 'function') {
+                    window.__hydrateGraphShape(shape, data.graphData);
+                } else {
+                    shape._frameType = 'graph';
+                    shape._graphData = cloneOptions(data.graphData);
+                    shape.element.setAttribute('data-graph-shape', 'true');
+                }
+            }
             return shape;
         }
 
@@ -387,6 +412,7 @@ export function loadScene(sceneData) {
     // Clear current scene
     const svgEl = window.svg;
     if (!svgEl) return false;
+    window.__roomImageBytesUsed = 0;
 
     // Remove all existing shape DOM elements
     const existingShapes = window.shapes || [];

package/src/core/ScreenSpaceControls.js

@@ -0,0 +1,60 @@
+/* eslint-disable */
+
+const ROTATION_SELECTOR = '[data-screen-space-rotation-anchor="true"]';
+
+function getZoom() {
+    return Math.max(0.001, Number(window.currentZoom) || 1);
+}
+
+export function registerRotationAnchor(anchor, options = {}) {
+    if (!anchor) return;
+    const zoom = getZoom();
+    const radius = Number(options.radius) || 8;
+    const gap = Number(options.gap) || 30;
+    const edgeY = Number(options.edgeY);
+
+    anchor.setAttribute('data-screen-space-rotation-anchor', 'true');
+    anchor.setAttribute('data-screen-radius', String(radius));
+    anchor.setAttribute('data-screen-gap', String(gap));
+    anchor.setAttribute('data-applied-zoom', String(zoom));
+    anchor.setAttribute('r', String(radius / zoom));
+    if (Number.isFinite(edgeY)) anchor.setAttribute('cy', String(edgeY - gap / zoom));
+
+    anchor.__rotationConnector = options.line || null;
+    anchor.__rotationConnectorEnd = options.lineEnd || '2';
+    syncRotationConnector(anchor);
+}
+
+function syncRotationConnector(anchor) {
+    const line = anchor.__rotationConnector;
+    if (!line) return;
+    const end = anchor.__rotationConnectorEnd === '1' ? '1' : '2';
+    line.setAttribute(`x${end}`, anchor.getAttribute('cx'));
+    line.setAttribute(`y${end}`, anchor.getAttribute('cy'));
+}
+
+export function syncRotationAnchorsToZoom() {
+    if (typeof document === 'undefined') return;
+    const zoom = getZoom();
+    document.querySelectorAll(ROTATION_SELECTOR).forEach((anchor) => {
+        const previousZoom = Math.max(0.001, Number(anchor.getAttribute('data-applied-zoom')) || zoom);
+        if (Math.abs(previousZoom - zoom) < 0.000001) return;
+        const radius = Number(anchor.getAttribute('data-screen-radius')) || 8;
+        const gap = Number(anchor.getAttribute('data-screen-gap')) || 30;
+        const currentY = Number(anchor.getAttribute('cy')) || 0;
+        const edgeY = currentY + gap / previousZoom;
+
+        anchor.setAttribute('cy', String(edgeY - gap / zoom));
+        anchor.setAttribute('r', String(radius / zoom));
+        anchor.setAttribute('data-applied-zoom', String(zoom));
+        syncRotationConnector(anchor);
+    });
+}
+
+export function installScreenSpaceControlSync(svgElement) {
+    if (!svgElement || typeof MutationObserver === 'undefined') return;
+    window.__screenSpaceControlObserver?.disconnect?.();
+    const observer = new MutationObserver(syncRotationAnchorsToZoom);
+    observer.observe(svgElement, { attributes: true, attributeFilter: ['viewBox'] });
+    window.__screenSpaceControlObserver = observer;
+}