@elixpo/lixsketch 5.6.11 → 5.6.12

package/dist/react/{laserTool-XVMV63AV.js → laserTool-L3MNCPTS.js}

@@ -9,10 +9,11 @@ var fadeOutDuration = 1200;
 var baseLaserOpacity = 0.85;
 var baseLaserWidth = 3.5;
 var glowWidth = 10;
-var minDistanceThreshold = 1;
-var smoothingWindow = 4;
+var minDistanceThreshold = 0.75;
+var smoothingWindow = 5;
 var drawingAnimationId = null;
 var fadingAnimationId = null;
+var activePointerId = null;
 function screenToViewBoxPoint(x, y) {
   const CTM = svg.getScreenCTM();
   if (!CTM) return null;
@@ -187,7 +188,7 @@ function fadeLaserTrail(laser) {
     fadingAnimationId = requestAnimationFrame(fadingLasersLoop);
   }
 }
-svg.addEventListener("mousedown", (e) => {
+svg.addEventListener("pointerdown", (e) => {
   if (!isLaserToolActive) return;
   if (e.target !== svg) {
     const isUIElement = e.target.closest(".selection-box, .resize-handle");
@@ -200,6 +201,8 @@ svg.addEventListener("mousedown", (e) => {
     fadeLaserTrail(lasers[lasers.length - 1]);
   }
   isDrawing = true;
+  activePointerId = e.pointerId;
+  svg.setPointerCapture?.(e.pointerId);
   const laserId = "laserGroup_" + Date.now() + "_" + Math.random().toString(16).slice(2);
   const newLaser = {
     id: laserId,
@@ -210,16 +213,19 @@ svg.addEventListener("mousedown", (e) => {
     drawingAnimationId = requestAnimationFrame(drawingLoop);
   }
 });
-svg.addEventListener("mousemove", (e) => {
+svg.addEventListener("pointermove", (e) => {
   if (isLaserToolActive) {
     svg.style.cursor = `url(${lazerCursor}) 0 0, auto`;
   }
   if (!isDrawing) return;
-  addPointToCurrentLaser(e.clientX, e.clientY);
+  const events = typeof e.getCoalescedEvents === "function" ? e.getCoalescedEvents() : [e];
+  events.forEach((point) => addPointToCurrentLaser(point.clientX, point.clientY));
 });
-svg.addEventListener("mouseup", (e) => {
+svg.addEventListener("pointerup", (e) => {
   if (!isDrawing) return;
   isDrawing = false;
+  if (activePointerId !== null) svg.releasePointerCapture?.(activePointerId);
+  activePointerId = null;
   if (lasers.length > 0) {
     fadeLaserTrail(lasers[lasers.length - 1]);
   }
@@ -229,11 +235,12 @@ svg.addEventListener("mouseup", (e) => {
     svg.style.cursor = "default";
   }
 });
-svg.addEventListener("mouseleave", (e) => {
+svg.addEventListener("pointercancel", () => {
   if (!isDrawing) return;
   isDrawing = false;
+  activePointerId = null;
   if (lasers.length > 0) {
     fadeLaserTrail(lasers[lasers.length - 1]);
   }
 });
-//# sourceMappingURL=laserTool-XVMV63AV.js.map
+//# sourceMappingURL=laserTool-L3MNCPTS.js.map

package/dist/react/laserTool-L3MNCPTS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tools/laserTool.js"],
+  "sourcesContent": ["/* eslint-disable */\n// Laser tool - smooth laser pointer with fade trail\n// Depends on globals: svg, currentZoom, isLaserToolActive\n\nconst lazerCursor = `data:image/svg+xml;base64,${btoa('<svg viewBox=\"0 0 24 24\" stroke-width=\"1\" width=\"28\" height=\"28\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M6.164 11.755a5.314 5.314 0 0 1-4.932-5.298 5.314 5.314 0 0 1 5.311-5.311 5.314 5.314 0 0 1 5.307 5.113l8.773 8.773a3.322 3.322 0 0 1 0 4.696l-.895.895a3.322 3.322 0 0 1-4.696 0l-8.868-8.868Z\" style=\"fill:#fff\"/><path stroke=\"#1b1b1f\" fill=\"#fff\" d=\"m7.868 11.113 7.773 7.774a2.359 2.359 0 0 0 1.667.691 2.368 2.368 0 0 0 2.357-2.358c0-.625-.248-1.225-.69-1.667L11.201 7.78 9.558 9.469l-1.69 1.643v.001Zm10.273 3.606-3.333 3.333m-3.25-6.583 2 2m-7-7 3 3M3.664 3.625l1 1M2.529 6.922l1.407-.144m5.735-2.932-1.118.866M4.285 9.823l.758-1.194m1.863-6.207-.13 1.408\"/></svg>')}`;\n\nlet isDrawing = false;\nlet lasers = [];\nlet fadingLasers = [];\n\nconst fadeOutDuration = 1200;\nconst baseLaserOpacity = 0.85;\nconst baseLaserWidth = 3.5;\nconst glowWidth = 10;\nconst minDistanceThreshold = 0.75;\nconst smoothingWindow = 5; // points to average for smoothing\n\nlet drawingAnimationId = null;\nlet fadingAnimationId = null;\nlet activePointerId = null;\n\nfunction screenToViewBoxPoint(x, y) {\n    const CTM = svg.getScreenCTM();\n    if (!CTM) return null;\n    try {\n        const inverseCTM = CTM.inverse();\n        return {\n            x: (x - CTM.e) * inverseCTM.a + (y - CTM.f) * inverseCTM.c,\n            y: (x - CTM.e) * inverseCTM.b + (y - CTM.f) * inverseCTM.d\n        };\n    } catch (e) {\n        return {\n            x: (x - CTM.e) / CTM.a,\n            y: (y - CTM.f) / CTM.d\n        };\n    }\n}\n\nfunction distance(p1, p2) {\n    const dx = p1.x - p2.x;\n    const dy = p1.y - p2.y;\n    return Math.sqrt(dx * dx + dy * dy);\n}\n\n// Smooth points using a moving average to eliminate micro-jitter\nfunction smoothPoints(points) {\n    if (points.length <= 2) return points;\n    const result = [points[0]]; // keep first point\n    const half = Math.floor(smoothingWindow / 2);\n    for (let i = 1; i < points.length - 1; i++) {\n        let sx = 0, sy = 0, count = 0;\n        for (let j = Math.max(0, i - half); j <= Math.min(points.length - 1, i + half); j++) {\n            sx += points[j].x;\n            sy += points[j].y;\n            count++;\n        }\n        result.push({ x: sx / count, y: sy / count, timestamp: points[i].timestamp });\n    }\n    result.push(points[points.length - 1]); // keep last point\n    return result;\n}\n\n// Build a smooth SVG path using Catmull-Rom \u2192 cubic bezier conversion\nfunction buildSmoothPath(rawPoints) {\n    if (rawPoints.length === 0) return '';\n    if (rawPoints.length === 1) return `M ${rawPoints[0].x} ${rawPoints[0].y}`;\n\n    const points = smoothPoints(rawPoints);\n\n    let d = `M ${points[0].x} ${points[0].y}`;\n\n    if (points.length === 2) {\n        d += ` L ${points[1].x} ${points[1].y}`;\n        return d;\n    }\n\n    // Catmull-Rom to cubic bezier with tension=0.5 for rounder curves\n    const tension = 0.5;\n    for (let i = 0; i < points.length - 1; i++) {\n        const p0 = points[i === 0 ? 0 : i - 1];\n        const p1 = points[i];\n        const p2 = points[i + 1];\n        const p3 = points[i + 2] || p2;\n\n        const cp1x = p1.x + (p2.x - p0.x) * tension / 3;\n        const cp1y = p1.y + (p2.y - p0.y) * tension / 3;\n        const cp2x = p2.x - (p3.x - p1.x) * tension / 3;\n        const cp2y = p2.y - (p3.y - p1.y) * tension / 3;\n\n        d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;\n    }\n    return d;\n}\n\n// Create SVG group with glow + core path elements\nfunction createLaserGroup(id) {\n    const group = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n    group.setAttribute(\"id\", id);\n    group.style.pointerEvents = \"none\";\n\n    // Outer glow\n    const glowPath = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n    glowPath.setAttribute(\"fill\", \"none\");\n    glowPath.setAttribute(\"stroke-linecap\", \"round\");\n    glowPath.setAttribute(\"stroke-linejoin\", \"round\");\n    glowPath.classList.add(\"laser-glow\");\n    group.appendChild(glowPath);\n\n    // Core line\n    const corePath = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n    corePath.setAttribute(\"fill\", \"none\");\n    corePath.setAttribute(\"stroke-linecap\", \"round\");\n    corePath.setAttribute(\"stroke-linejoin\", \"round\");\n    corePath.classList.add(\"laser-core\");\n    group.appendChild(corePath);\n\n    svg.insertBefore(group, svg.firstChild);\n    return group;\n}\n\nfunction updateLaserAppearance(laser, isFinalFade = false) {\n    let laserGroup = document.getElementById(laser.id);\n\n    const currentTime = performance.now();\n    let points = isFinalFade ? laser.initialPoints : [...laser.points];\n\n    if (!isFinalFade) {\n        points = points.filter(p => (currentTime - p.timestamp) < fadeOutDuration);\n        laser.points = points;\n    }\n\n    if (points.length === 0) {\n        if (laserGroup) laserGroup.remove();\n        if (isFinalFade) fadingLasers = fadingLasers.filter(l => l.id !== laser.id);\n        else lasers = lasers.filter(l => l.id !== laser.id);\n        return;\n    }\n\n    if (!laserGroup) {\n        laserGroup = createLaserGroup(laser.id);\n    }\n\n    const glowPath = laserGroup.querySelector('.laser-glow');\n    const corePath = laserGroup.querySelector('.laser-core');\n\n    // Compute overall opacity from age + fade\n    const oldestAge = currentTime - points[0].timestamp;\n    const newestAge = currentTime - points[points.length - 1].timestamp;\n    const avgAge = (oldestAge + newestAge) / 2;\n    const ageProgress = Math.min(1, avgAge / fadeOutDuration);\n    const easedFade = 1 - ageProgress * ageProgress; // quadratic ease\n\n    let opacity = baseLaserOpacity * easedFade;\n    let coreW = baseLaserWidth / currentZoom;\n    let glowW = glowWidth / currentZoom;\n\n    if (isFinalFade) {\n        opacity *= laser.fadeProgress;\n        coreW *= laser.fadeProgress;\n        glowW *= laser.fadeProgress;\n    }\n\n    opacity = Math.max(0.02, opacity);\n    coreW = Math.max(0.5 / currentZoom, coreW);\n    glowW = Math.max(1 / currentZoom, glowW);\n\n    const pathD = buildSmoothPath(points);\n\n    // Update glow\n    glowPath.setAttribute(\"d\", pathD);\n    glowPath.setAttribute(\"stroke\", `rgba(255, 50, 50, ${opacity * 0.25})`);\n    glowPath.setAttribute(\"stroke-width\", glowW);\n\n    // Update core\n    corePath.setAttribute(\"d\", pathD);\n    corePath.setAttribute(\"stroke\", `rgba(255, 50, 50, ${opacity})`);\n    corePath.setAttribute(\"stroke-width\", coreW);\n}\n\n\n// Add a point directly from mousemove (high frequency capture)\nfunction addPointToCurrentLaser(screenX, screenY) {\n    const currentLaser = lasers[lasers.length - 1];\n    if (!currentLaser) return;\n\n    const svgPoint = screenToViewBoxPoint(screenX, screenY);\n    if (!svgPoint) return;\n\n    const lastPt = currentLaser.points[currentLaser.points.length - 1];\n    const adjustedThreshold = minDistanceThreshold / currentZoom;\n    if (!lastPt || distance(svgPoint, lastPt) >= adjustedThreshold) {\n        currentLaser.points.push({ x: svgPoint.x, y: svgPoint.y, timestamp: performance.now() });\n    }\n}\n\nfunction drawingLoop() {\n    if (!isDrawing) {\n        drawingAnimationId = null;\n        return;\n    }\n\n    const currentLaser = lasers[lasers.length - 1];\n    if (currentLaser) {\n        updateLaserAppearance(currentLaser, false);\n    }\n    drawingAnimationId = requestAnimationFrame(drawingLoop);\n}\n\n\nfunction fadingLasersLoop() {\n    if (fadingLasers.length === 0) {\n        fadingAnimationId = null;\n        return;\n    }\n\n    const currentTime = performance.now();\n\n    for (let i = fadingLasers.length - 1; i >= 0; i--) {\n        const laser = fadingLasers[i];\n        const elapsed = currentTime - laser.fadeStartTime;\n        const rawProgress = Math.min(1, elapsed / fadeOutDuration);\n        laser.fadeProgress = 1 - rawProgress * rawProgress * rawProgress; // cubic ease out\n\n        updateLaserAppearance(laser, true);\n\n        if (laser.fadeProgress <= 0.01) {\n            const laserGroup = document.getElementById(laser.id);\n            if (laserGroup) laserGroup.remove();\n            fadingLasers.splice(i, 1);\n        }\n    }\n\n    fadingAnimationId = requestAnimationFrame(fadingLasersLoop);\n}\n\n\nfunction fadeLaserTrail(laser) {\n    lasers = lasers.filter(l => l.id !== laser.id);\n\n    laser.fadeStartTime = performance.now();\n    laser.initialPoints = [...laser.points];\n    laser.fadeProgress = 1;\n\n    fadingLasers.push(laser);\n\n    if (!fadingAnimationId) {\n        fadingAnimationId = requestAnimationFrame(fadingLasersLoop);\n    }\n}\n\n\nsvg.addEventListener(\"pointerdown\", (e) => {\n    if (!isLaserToolActive) return;\n\n    if (e.target !== svg) {\n        const isUIElement = e.target.closest('.selection-box, .resize-handle');\n        if (isUIElement) return;\n    }\n\n    let screenPoint = { x: e.clientX, y: e.clientY };\n    let startSvgPoint = screenToViewBoxPoint(screenPoint.x, screenPoint.y);\n    if (!startSvgPoint) return;\n\n    // If a drawing is already in progress, trigger its fade-out\n    if (isDrawing && lasers.length > 0) {\n        fadeLaserTrail(lasers[lasers.length - 1]);\n    }\n\n    isDrawing = true;\n    activePointerId = e.pointerId;\n    svg.setPointerCapture?.(e.pointerId);\n\n    const laserId = \"laserGroup_\" + Date.now() + \"_\" + Math.random().toString(16).slice(2);\n    const newLaser = {\n        id: laserId,\n        points: [{ x: startSvgPoint.x, y: startSvgPoint.y, timestamp: performance.now() }],\n    };\n    lasers.push(newLaser);\n\n    if (!drawingAnimationId) {\n        drawingAnimationId = requestAnimationFrame(drawingLoop);\n    }\n});\n\nsvg.addEventListener(\"pointermove\", (e) => {\n    if (isLaserToolActive) {\n        svg.style.cursor = `url(${lazerCursor}) 0 0, auto`;\n    }\n\n    if (!isDrawing) return;\n\n    const events = typeof e.getCoalescedEvents === 'function' ? e.getCoalescedEvents() : [e];\n    events.forEach((point) => addPointToCurrentLaser(point.clientX, point.clientY));\n});\n\nsvg.addEventListener(\"pointerup\", (e) => {\n    if (!isDrawing) return;\n\n    isDrawing = false;\n    if (activePointerId !== null) svg.releasePointerCapture?.(activePointerId);\n    activePointerId = null;\n\n    if (lasers.length > 0) {\n        fadeLaserTrail(lasers[lasers.length - 1]);\n    }\n\n    if (isLaserToolActive) {\n        svg.style.cursor = `url(${lazerCursor}) 0 0, auto`;\n    } else {\n        svg.style.cursor = 'default';\n    }\n});\n\nsvg.addEventListener(\"pointercancel\", () => {\n    if (!isDrawing) return;\n\n    isDrawing = false;\n    activePointerId = null;\n\n    if (lasers.length > 0) {\n        fadeLaserTrail(lasers[lasers.length - 1]);\n    }\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.6.11",
+  "version": "5.6.12",
   "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/EraserTrail.js

@@ -8,14 +8,22 @@ let eraserGlow = null;
 let eraserPoints = [];
 let targetedElements = new Set();
 
-const MAX_TRAIL_LENGTH = 16;
-const FADE_DURATION = 200;
-const MIN_POINT_DISTANCE = 1.5;
-const SMOOTHING_WINDOW = 3;
+const MAX_TRAIL_LENGTH = 28;
+const FADE_DURATION = 320;
+const MIN_POINT_DISTANCE = 1;
+const SMOOTHING_WINDOW = 5;
 
 let fadeAnimationId = null;
 let fadeStartTime = null;
 let fadeInitialPoints = null;
+let renderAnimationId = null;
+
+function trailPalette() {
+    const isLight = document.documentElement.dataset.canvasTheme === 'light' || document.body?.classList.contains('theme-light');
+    return isLight
+        ? { core: '49, 40, 63', glow: '124, 89, 195' }
+        : { core: '245, 239, 251', glow: '199, 164, 255' };
+}
 
 // Getter/setter for isErasing so eraserTool can share state
 function getIsErasing() { return isErasing; }
@@ -98,6 +106,10 @@ function safeRemove(el) {
 
 // Remove all trail elements and reset state
 function cleanupTrail() {
+    if (renderAnimationId) {
+        cancelAnimationFrame(renderAnimationId);
+        renderAnimationId = null;
+    }
     if (fadeAnimationId) {
         cancelAnimationFrame(fadeAnimationId);
         fadeAnimationId = null;
@@ -119,7 +131,8 @@ function createEraserTrail(x, y) {
     // Outer glow
     eraserGlow = document.createElementNS("http://www.w3.org/2000/svg", "path");
     eraserGlow.setAttribute("fill", "none");
-    eraserGlow.setAttribute("stroke", "rgba(80, 80, 80, 0.15)");
+    const palette = trailPalette();
+    eraserGlow.setAttribute("stroke", `rgba(${palette.glow}, 0.20)`);
     eraserGlow.setAttribute("stroke-width", 14 / currentZoom);
     eraserGlow.setAttribute("stroke-linecap", "round");
     eraserGlow.setAttribute("stroke-linejoin", "round");
@@ -129,7 +142,7 @@ function createEraserTrail(x, y) {
     // Core path
     eraserPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
     eraserPath.setAttribute("fill", "none");
-    eraserPath.setAttribute("stroke", "rgba(53, 53, 53, 0.5)");
+    eraserPath.setAttribute("stroke", `rgba(${palette.core}, 0.62)`);
     eraserPath.setAttribute("stroke-width", 5 / currentZoom);
     eraserPath.setAttribute("stroke-linecap", "round");
     eraserPath.setAttribute("stroke-linejoin", "round");
@@ -158,7 +171,12 @@ function updateEraserTrail(x, y) {
         eraserPoints.shift();
     }
 
-    renderTrail(eraserPoints, 1.0);
+    if (!renderAnimationId) {
+        renderAnimationId = requestAnimationFrame(() => {
+            renderAnimationId = null;
+            renderTrail(eraserPoints, 1.0);
+        });
+    }
 }
 
 // Render the trail with given points and opacity multiplier
@@ -168,16 +186,17 @@ function renderTrail(points, opacityMul) {
     const pathD = buildSmoothPath(points);
     const coreW = Math.max(1.5 / currentZoom, (5 / currentZoom) * opacityMul);
     const glowW = Math.max(3 / currentZoom, (14 / currentZoom) * opacityMul);
-    const coreOpacity = 0.5 * opacityMul;
-    const glowOpacity = 0.15 * opacityMul;
+    const coreOpacity = 0.62 * opacityMul;
+    const glowOpacity = 0.20 * opacityMul;
+    const palette = trailPalette();
 
     eraserPath.setAttribute("d", pathD);
-    eraserPath.setAttribute("stroke", `rgba(53, 53, 53, ${coreOpacity})`);
+    eraserPath.setAttribute("stroke", `rgba(${palette.core}, ${coreOpacity})`);
     eraserPath.setAttribute("stroke-width", coreW);
 
     if (eraserGlow) {
         eraserGlow.setAttribute("d", pathD);
-        eraserGlow.setAttribute("stroke", `rgba(80, 80, 80, ${glowOpacity})`);
+        eraserGlow.setAttribute("stroke", `rgba(${palette.glow}, ${glowOpacity})`);
         eraserGlow.setAttribute("stroke-width", glowW);
     }
 }
@@ -189,6 +208,12 @@ function fadeOutEraserTrail() {
         return;
     }
 
+    if (renderAnimationId) {
+        cancelAnimationFrame(renderAnimationId);
+        renderAnimationId = null;
+        renderTrail(eraserPoints, 1.0);
+    }
+
     // Cancel any existing fade
     if (fadeAnimationId) {
         cancelAnimationFrame(fadeAnimationId);

package/src/core/ShapeLabelLayout.js

@@ -0,0 +1,42 @@
+export const DEFAULT_SHAPE_LABEL_FONT_SIZE = 18;
+
+function fallbackWidth(text, fontSize) {
+    return [...text].reduce((width, character) => {
+        if (/\s/.test(character)) return width + fontSize * 0.34;
+        if (/[ilI1.,'`]/.test(character)) return width + fontSize * 0.32;
+        if (/[MW@#%]/.test(character)) return width + fontSize * 0.88;
+        return width + fontSize * 0.59;
+    }, 0);
+}
+
+function browserTextWidth(text, fontSize) {
+    if (typeof document === 'undefined') return null;
+    try {
+        const canvas = browserTextWidth.canvas || (browserTextWidth.canvas = document.createElement('canvas'));
+        const context = canvas.getContext?.('2d');
+        if (!context) return null;
+        context.font = `${fontSize}px lixFont, sans-serif`;
+        return context.measureText(text).width;
+    } catch {
+        return null;
+    }
+}
+
+export function measureShapeLabel(label, fontSize = DEFAULT_SHAPE_LABEL_FONT_SIZE) {
+    const lines = String(label ?? '').replace(/\r\n?/g, '\n').split('\n');
+    const safeLines = lines.length ? lines : [''];
+    const widths = safeLines.map((line) => browserTextWidth(line, fontSize) ?? fallbackWidth(line, fontSize));
+    const lineHeight = fontSize * 1.3;
+    const contentWidth = Math.max(0, ...widths);
+    const contentHeight = Math.max(lineHeight, safeLines.length * lineHeight);
+
+    return {
+        lines: safeLines,
+        widths,
+        lineHeight,
+        contentWidth,
+        contentHeight,
+        requiredWidth: Math.ceil(contentWidth + 32),
+        requiredHeight: Math.ceil(contentHeight + 24),
+    };
+}

package/src/react/components/sidebars/ShapeSidebar.jsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { useState, useRef, useEffect } from 'react'
+import { createPortal } from 'react-dom'
 import useSketchStore from '../../store/useSketchStore'
 
 /**
@@ -10,12 +11,30 @@ import useSketchStore from '../../store/useSketchStore'
 export function ToolbarButton({ icon, preview, children, tooltip, label = tooltip }) {
   const [open, setOpen] = useState(false)
   const ref = useRef(null)
+  const panelRef = useRef(null)
+  const [panelPosition, setPanelPosition] = useState(null)
+
+  useEffect(() => {
+    if (!open) return
+    const updatePosition = () => {
+      const rect = ref.current?.getBoundingClientRect()
+      if (!rect) return
+      setPanelPosition({ left: rect.left + rect.width / 2, top: rect.top - 12 })
+    }
+    updatePosition()
+    window.addEventListener('resize', updatePosition)
+    window.addEventListener('scroll', updatePosition, true)
+    return () => {
+      window.removeEventListener('resize', updatePosition)
+      window.removeEventListener('scroll', updatePosition, true)
+    }
+  }, [open])
 
   // Close on outside click
   useEffect(() => {
     if (!open) return
     const handler = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) setOpen(false)
+      if (!ref.current?.contains(e.target) && !panelRef.current?.contains(e.target)) setOpen(false)
     }
     document.addEventListener('mousedown', handler)
     return () => document.removeEventListener('mousedown', handler)
@@ -42,14 +61,19 @@ export function ToolbarButton({ icon, preview, children, tooltip, label = toolti
         </svg>
       </button>
 
-      {open && (
-        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 z-20">
+      {open && panelPosition && createPortal(
+        <div
+          ref={panelRef}
+          className="fixed -translate-x-1/2 -translate-y-full z-[10050] max-w-[calc(100vw-16px)]"
+          style={panelPosition}
+        >
           <div className="bg-surface-card border border-border-light rounded-xl p-3 shadow-xl shadow-black/10 min-w-max">
             {children}
           </div>
           {/* Arrow pointer */}
           <div className="absolute -bottom-[5px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 rotate-45 bg-surface-card border-r border-b border-border-light" />
-        </div>
+        </div>,
+        document.body,
       )}
     </div>
   )

package/src/react/store/useSketchStore.js

@@ -123,7 +123,11 @@ const useSketchStore = create((set, get) => ({
   getCursor: () => {
     const tool = get().activeTool
     if (tool === TOOLS.ERASER) {
-      return `url("data:image/svg+xml;base64,${typeof btoa !== 'undefined' ? btoa('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" fill="#222" stroke="white" stroke-width="2"/></svg>') : ''}") 10 10, auto`
+      const isLight = typeof document !== 'undefined' && document.documentElement.dataset.canvasTheme === 'light'
+      const fill = isLight ? '#31283f' : '#f5effb'
+      const stroke = isLight ? '#ffffff' : '#31283f'
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" fill="${fill}" stroke="${stroke}" stroke-width="2"/></svg>`
+      return `url("data:image/svg+xml;base64,${typeof btoa !== 'undefined' ? btoa(svg) : ''}") 10 10, auto`
     }
     if (tool === TOOLS.LASER) {
       return `url("data:image/svg+xml;base64,${typeof btoa !== 'undefined' ? btoa('<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1971c2" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>') : ''}") 0 0, auto`

package/src/shapes/Arrow.js

@@ -2,6 +2,7 @@
 import { resolveThemeLabelColor } from '../utils/themeColors.js';
 // Arrow shape class - extracted from drawArrow.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom
+import { DEFAULT_SHAPE_LABEL_FONT_SIZE } from '../core/ShapeLabelLayout.js';
 
 let isDragging = false;
 let hoveredFrameArrow = null;
@@ -56,7 +57,7 @@ class Arrow {
         this.label = options.label || '';
         this.labelElement = null;
         this.labelColor = resolveThemeLabelColor(options.labelColor);
-        this.labelFontSize = options.labelFontSize || 12;
+        this.labelFontSize = options.labelFontSize || DEFAULT_SHAPE_LABEL_FONT_SIZE;
         this.labelBg = options.labelBg !== false; // labelBg:false → no knockout rect behind label
         this.labelOffsetY = options.labelOffsetY || 0; // shift label along the perpendicular of the line, e.g. lift it clear of the stroke
         this._isEditingLabel = false;

package/src/shapes/Circle.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
 import { canvasToLocal, localToCanvas } from '../core/CanvasSpace.js';
+import { DEFAULT_SHAPE_LABEL_FONT_SIZE } from '../core/ShapeLabelLayout.js';
 import { resolveThemeLabelColor } from '../utils/themeColors.js';
 // Circle shape class - extracted from drawCircle.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
@@ -55,7 +56,7 @@ class Circle {
         this.label = options.label || '';
         this.labelElement = null;
         this.labelColor = resolveThemeLabelColor(options.labelColor);
-        this.labelFontSize = options.labelFontSize || 14;
+        this.labelFontSize = options.labelFontSize || DEFAULT_SHAPE_LABEL_FONT_SIZE;
         this._isEditingLabel = false;
         this._hitArea = null;
         this._labelBg = null;

package/src/shapes/Line.js

@@ -2,6 +2,7 @@
 // Line shape class - extracted from lineTool.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom
 import { updateAttachedArrows as updateArrowsForShape } from '../tools/arrowTool.js';
+import { DEFAULT_SHAPE_LABEL_FONT_SIZE } from '../core/ShapeLabelLayout.js';
 import { resolveThemeLabelColor } from '../utils/themeColors.js';
 
 const rc = rough.svg(svg);
@@ -45,7 +46,7 @@ class Line {
         this.label = options.label || '';
         this.labelElement = null;
         this.labelColor = resolveThemeLabelColor(options.labelColor);
-        this.labelFontSize = options.labelFontSize || 12;
+        this.labelFontSize = options.labelFontSize || DEFAULT_SHAPE_LABEL_FONT_SIZE;
         this._isEditingLabel = false;
         this._hitArea = null;
         this._labelBg = null;

package/src/shapes/Rectangle.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import { registerRotationAnchor } from '../core/ScreenSpaceControls.js';
 import { canvasToLocal, localToCanvas } from '../core/CanvasSpace.js';
+import { DEFAULT_SHAPE_LABEL_FONT_SIZE, measureShapeLabel } from '../core/ShapeLabelLayout.js';
 import { resolveThemeLabelColor } from '../utils/themeColors.js';
 // Rectangle shape class - extracted from drawSquare.js
 // Depends on globals: svg, shapes, rough, currentShape, currentZoom, rc
@@ -52,7 +53,7 @@ class Rectangle {
         this.label = options.label || '';
         this.labelElement = null;
         this.labelColor = resolveThemeLabelColor(options.labelColor);
-        this.labelFontSize = options.labelFontSize || 14;
+        this.labelFontSize = options.labelFontSize || DEFAULT_SHAPE_LABEL_FONT_SIZE;
         this.labelBg = options.labelBg !== false; // set labelBg:false to render plain text with no pill backdrop
         this._isEditingLabel = false;
         this._hitArea = null;
@@ -78,6 +79,7 @@ class Rectangle {
         this.draw();
     }
     draw() {
+        const labelLayout = this._ensureLabelFits();
         const childrenToRemove = [];
         const preserveSet = this._skipAnchors ? new Set([...this.anchors, this.selectionOutline, this.rotationAnchor].filter(Boolean)) : null;
         for (let i = 0; i < this.group.children.length; i++) {
@@ -126,7 +128,7 @@ class Rectangle {
         this._updateShade();
 
         // Update embedded label
-        this._updateLabelElement();
+        this._updateLabelElement(labelLayout);
 
         const rotateCenterX = this.width / 2;
         const rotateCenterY = this.height / 2;
@@ -219,7 +221,18 @@ class Rectangle {
         }
     }
 
-    _updateLabelElement() {
+    _ensureLabelFits() {
+        if (!this.label) return null;
+        const layout = measureShapeLabel(this.label, this.labelFontSize);
+        // Dense diagram renderers opt out of the label backdrop and own their
+        // geometry. Auto-fit is for interactive rectangle labels.
+        if (this.isBeingDrawn || !this.labelBg) return layout;
+        this.width = Math.max(this.width, layout.requiredWidth);
+        this.height = Math.max(this.height, layout.requiredHeight);
+        return layout;
+    }
+
+    _updateLabelElement(layout = null) {
         if (!this.label) {
             // Remove label element if label is empty
             if (this.labelElement && this.labelElement.parentNode === this.group) {
@@ -239,15 +252,25 @@ class Rectangle {
             this.labelElement.setAttribute('pointer-events', 'none');
         }
 
+        const labelLayout = layout || measureShapeLabel(this.label, this.labelFontSize);
+        const startY = (this.height - labelLayout.contentHeight) / 2;
+
+        while (this.labelElement.firstChild) this.labelElement.removeChild(this.labelElement.firstChild);
+        labelLayout.lines.forEach((line, index) => {
+            const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            tspan.setAttribute('x', this.width / 2);
+            tspan.setAttribute('y', startY + index * labelLayout.lineHeight);
+            tspan.setAttribute('dominant-baseline', 'hanging');
+            tspan.textContent = line || ' ';
+            this.labelElement.appendChild(tspan);
+        });
+
         // Position at center of rectangle
         this.labelElement.setAttribute('x', this.width / 2);
-        this.labelElement.setAttribute('y', this.height / 2);
         this.labelElement.setAttribute('text-anchor', 'middle');
-        this.labelElement.setAttribute('dominant-baseline', 'central');
         this.labelElement.setAttribute('fill', this.labelColor);
         this.labelElement.setAttribute('font-size', this.labelFontSize);
         this.labelElement.setAttribute('font-family', 'lixFont, sans-serif');
-        this.labelElement.textContent = this.label;
 
         // Background padding rect behind text (like arrows have) — skippable
         // via labelBg:false for dense multi-row content (e.g. mermaid ER
@@ -270,9 +293,8 @@ class Rectangle {
         this._labelBg.setAttribute('fill', canvasBg);
         const hPadding = 6;
         const vPadding = 2;
-        const charWidth = this.labelFontSize * 0.6;
-        const bgW = this.label.length * charWidth + hPadding * 2;
-        const bgH = this.labelFontSize + vPadding * 2;
+        const bgW = labelLayout.contentWidth + hPadding * 2;
+        const bgH = labelLayout.contentHeight + vPadding * 2;
         this._labelBg.setAttribute('x', this.width / 2 - bgW / 2);
         this._labelBg.setAttribute('y', this.height / 2 - bgH / 2);
         this._labelBg.setAttribute('width', bgW);
@@ -363,7 +385,7 @@ class Rectangle {
         }, 10);
 
         const finishEdit = () => {
-            const newText = input.textContent.trim().replace(/\u00A0/g, '');
+            const newText = input.innerText.trim().replace(/\u00A0/g, '');
             this.label = newText;
             this._isEditingLabel = false;
 

package/src/tools/eraserTool.js

@@ -3,7 +3,12 @@
 // Depends on globals: svg, isEraserToolActive, ACTION_DELETE, historyStack, redoStack, clearAllSelections
 import { createEraserTrail, updateEraserTrail, fadeOutEraserTrail, forceCleanupEraserTrail, getIsErasing, setIsErasing, getTargetedElements } from '../core/EraserTrail.js';
 
-const eraserCursorSVG = `data:image/svg+xml;base64,${btoa('<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" fill="#222" stroke="white" stroke-width="2"/></svg>')}`;
+function getEraserCursorSVG() {
+  const isLight = document.documentElement.dataset.canvasTheme === 'light' || document.body?.classList.contains('theme-light');
+  const fill = isLight ? '#31283f' : '#f5effb';
+  const stroke = isLight ? '#ffffff' : '#31283f';
+  return `data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" fill="${fill}" stroke="${stroke}" stroke-width="2"/></svg>`)}`;
+}
 
 // Expose force cleanup on window so SketchEngine can call it on tool switch
 window.forceCleanupEraserTrail = forceCleanupEraserTrail;
@@ -107,10 +112,11 @@ svg.addEventListener("pointerdown", (e) => {
 
 svg.addEventListener("pointermove", (e) => {
   if (isEraserToolActive) {
-      svg.style.cursor = `url(${eraserCursorSVG}) 10 10, auto`;
+      svg.style.cursor = `url(${getEraserCursorSVG()}) 10 10, auto`;
   }
   if (!getIsErasing()) return;
-  updateEraserTrail(e.clientX, e.clientY);
+  const events = typeof e.getCoalescedEvents === 'function' ? e.getCoalescedEvents() : [e];
+  events.forEach((point) => updateEraserTrail(point.clientX, point.clientY));
   handleElementHighlight(e.clientX, e.clientY);
 });
 

package/src/tools/laserTool.js

@@ -12,11 +12,12 @@ const fadeOutDuration = 1200;
 const baseLaserOpacity = 0.85;
 const baseLaserWidth = 3.5;
 const glowWidth = 10;
-const minDistanceThreshold = 1;
-const smoothingWindow = 4; // points to average for smoothing
+const minDistanceThreshold = 0.75;
+const smoothingWindow = 5; // points to average for smoothing
 
 let drawingAnimationId = null;
 let fadingAnimationId = null;
+let activePointerId = null;
 
 function screenToViewBoxPoint(x, y) {
     const CTM = svg.getScreenCTM();
@@ -248,7 +249,7 @@ function fadeLaserTrail(laser) {
 }
 
 
-svg.addEventListener("mousedown", (e) => {
+svg.addEventListener("pointerdown", (e) => {
     if (!isLaserToolActive) return;
 
     if (e.target !== svg) {
@@ -266,6 +267,8 @@ svg.addEventListener("mousedown", (e) => {
     }
 
     isDrawing = true;
+    activePointerId = e.pointerId;
+    svg.setPointerCapture?.(e.pointerId);
 
     const laserId = "laserGroup_" + Date.now() + "_" + Math.random().toString(16).slice(2);
     const newLaser = {
@@ -279,20 +282,23 @@ svg.addEventListener("mousedown", (e) => {
     }
 });
 
-svg.addEventListener("mousemove", (e) => {
+svg.addEventListener("pointermove", (e) => {
     if (isLaserToolActive) {
         svg.style.cursor = `url(${lazerCursor}) 0 0, auto`;
     }
 
     if (!isDrawing) return;
 
-    addPointToCurrentLaser(e.clientX, e.clientY);
+    const events = typeof e.getCoalescedEvents === 'function' ? e.getCoalescedEvents() : [e];
+    events.forEach((point) => addPointToCurrentLaser(point.clientX, point.clientY));
 });
 
-svg.addEventListener("mouseup", (e) => {
+svg.addEventListener("pointerup", (e) => {
     if (!isDrawing) return;
 
     isDrawing = false;
+    if (activePointerId !== null) svg.releasePointerCapture?.(activePointerId);
+    activePointerId = null;
 
     if (lasers.length > 0) {
         fadeLaserTrail(lasers[lasers.length - 1]);
@@ -305,13 +311,13 @@ svg.addEventListener("mouseup", (e) => {
     }
 });
 
-svg.addEventListener("mouseleave", (e) => {
+svg.addEventListener("pointercancel", () => {
     if (!isDrawing) return;
 
     isDrawing = false;
+    activePointerId = null;
 
     if (lasers.length > 0) {
         fadeLaserTrail(lasers[lasers.length - 1]);
     }
-
 });

package/dist/react/Arrow-QMR77LGQ.js

@@ -1,9 +0,0 @@
-"use client";
-import {
-  Arrow
-} from "./chunk-WCA3FGWE.js";
-import "./chunk-M7OYYJC6.js";
-export {
-  Arrow
-};
-//# sourceMappingURL=Arrow-QMR77LGQ.js.map