graphics-debug 0.0.46 → 0.0.48

package/dist/lib/react.js

@@ -1,11 +1,13 @@
-import "../chunk-OPY7K7QC.js";
+import "../chunk-HFEWNTMS.js";
+import "../chunk-K2IJQPPY.js";
 import {
   defaultColors,
   drawGraphicsToCanvas,
   getBounds
-} from "../chunk-G3XJ25G4.js";
+} from "../chunk-A2H7K3HS.js";
 import "../chunk-NG6H63SM.js";
-import "../chunk-O3RDZ6NK.js";
+import "../chunk-L3RR2Y2G.js";
+import "../chunk-TJJMMKHI.js";
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
 import {
@@ -13,9 +15,9 @@ import {
   scale,
   translate,
   inverse as inverse2,
-  applyToPoint as applyToPoint10
+  applyToPoint as applyToPoint11
 } from "transformation-matrix";
-import { useMemo as useMemo7, useState as useState6, useEffect as useEffect3, useCallback } from "react";
+import { useMemo as useMemo8, useState as useState6, useEffect as useEffect3, useCallback } from "react";
 import useMouseMatrixTransform from "use-mouse-matrix-transform";
 import { SuperGrid } from "react-supergrid";
 import useResizeObserver from "@react-hook/resize-observer";
@@ -353,6 +355,48 @@ var Circle = ({
   );
 };
 
+// site/components/InteractiveGraphics/Text.tsx
+import { applyToPoint as applyToPoint5 } from "transformation-matrix";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Text = ({
+  textObj,
+  interactiveState,
+  index
+}) => {
+  const { realToScreen, onObjectClicked } = interactiveState;
+  const { x, y, text, color, fontSize, anchorSide } = textObj;
+  const screenPos = applyToPoint5(realToScreen, { x, y });
+  const transformMap = {
+    top_left: "translate(0%, 0%)",
+    top_center: "translate(-50%, 0%)",
+    top_right: "translate(-100%, 0%)",
+    center_left: "translate(0%, -50%)",
+    center: "translate(-50%, -50%)",
+    center_right: "translate(-100%, -50%)",
+    bottom_left: "translate(0%, -100%)",
+    bottom_center: "translate(-50%, -100%)",
+    bottom_right: "translate(-100%, -100%)"
+  };
+  const transform = transformMap[anchorSide ?? "center"];
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: screenPos.x,
+        top: screenPos.y,
+        transform,
+        color: color || "black",
+        fontSize: fontSize ?? 12,
+        whiteSpace: "pre",
+        cursor: "default"
+      },
+      onClick: () => onObjectClicked?.({ type: "text", index, object: textObj }),
+      children: text
+    }
+  );
+};
+
 // site/utils/getGraphicsBounds.ts
 var getGraphicsBounds = (graphics) => {
   const bounds = {
@@ -384,22 +428,34 @@ var getGraphicsBounds = (graphics) => {
     bounds.maxX = Math.max(bounds.maxX, point.x);
     bounds.maxY = Math.max(bounds.maxY, point.y);
   }
+  for (const circle of graphics.circles ?? []) {
+    bounds.minX = Math.min(bounds.minX, circle.center.x - circle.radius);
+    bounds.minY = Math.min(bounds.minY, circle.center.y - circle.radius);
+    bounds.maxX = Math.max(bounds.maxX, circle.center.x + circle.radius);
+    bounds.maxY = Math.max(bounds.maxY, circle.center.y + circle.radius);
+  }
+  for (const text of graphics.texts ?? []) {
+    bounds.minX = Math.min(bounds.minX, text.x);
+    bounds.minY = Math.min(bounds.minY, text.y);
+    bounds.maxX = Math.max(bounds.maxX, text.x);
+    bounds.maxY = Math.max(bounds.maxY, text.y);
+  }
   return bounds;
 };
 
 // site/components/InteractiveGraphics/hooks/useIsPointOnScreen.ts
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint7 } from "transformation-matrix";
 import { useMemo as useMemo2 } from "react";
 
 // site/components/InteractiveGraphics/hooks/useDoesLineIntersectViewport.ts
-import { applyToPoint as applyToPoint5 } from "transformation-matrix";
+import { applyToPoint as applyToPoint6 } from "transformation-matrix";
 import { useMemo } from "react";
 var OFFSCREEN_MARGIN = 5;
 var useDoesLineIntersectViewport = (realToScreen, size) => {
   return useMemo(() => {
     return (p1, p2) => {
-      const sp1 = applyToPoint5(realToScreen, p1);
-      const sp2 = applyToPoint5(realToScreen, p2);
+      const sp1 = applyToPoint6(realToScreen, p1);
+      const sp2 = applyToPoint6(realToScreen, p2);
       const left = -OFFSCREEN_MARGIN;
       const right = size.width + OFFSCREEN_MARGIN;
       const top = -OFFSCREEN_MARGIN;
@@ -429,7 +485,7 @@ var useDoesLineIntersectViewport = (realToScreen, size) => {
 var useIsPointOnScreen = (realToScreen, size) => {
   return useMemo2(() => {
     return (point) => {
-      const screenPoint = applyToPoint6(realToScreen, point);
+      const screenPoint = applyToPoint7(realToScreen, point);
       return screenPoint.x >= -OFFSCREEN_MARGIN && screenPoint.x <= size.width + OFFSCREEN_MARGIN && screenPoint.y >= -OFFSCREEN_MARGIN && screenPoint.y <= size.height + OFFSCREEN_MARGIN;
     };
   }, [realToScreen, size]);
@@ -495,7 +551,7 @@ var useFilterRects = (isPointOnScreen, doesLineIntersectViewport, filterLayerAnd
 };
 
 // site/components/InteractiveGraphics/hooks/useFilterCircles.ts
-import { applyToPoint as applyToPoint7 } from "transformation-matrix";
+import { applyToPoint as applyToPoint8 } from "transformation-matrix";
 import { useMemo as useMemo6 } from "react";
 var useFilterCircles = (isPointOnScreen, filterLayerAndStep, realToScreen, size) => {
   return useMemo6(() => {
@@ -505,7 +561,7 @@ var useFilterCircles = (isPointOnScreen, filterLayerAndStep, realToScreen, size)
       if (isPointOnScreen(center) || isPointOnScreen({ x: center.x + radius, y: center.y }) || isPointOnScreen({ x: center.x - radius, y: center.y }) || isPointOnScreen({ x: center.x, y: center.y + radius }) || isPointOnScreen({ x: center.x, y: center.y - radius })) {
         return true;
       }
-      const screenCenter = applyToPoint7(realToScreen, center);
+      const screenCenter = applyToPoint8(realToScreen, center);
       const scale4 = Math.abs(realToScreen.a);
       const screenRadius = radius * scale4;
       const left = -OFFSCREEN_MARGIN;
@@ -533,10 +589,21 @@ var useFilterCircles = (isPointOnScreen, filterLayerAndStep, realToScreen, size)
   }, [isPointOnScreen, filterLayerAndStep, realToScreen, size]);
 };
 
+// site/components/InteractiveGraphics/hooks/useFilterTexts.ts
+import { useMemo as useMemo7 } from "react";
+var useFilterTexts = (isPointOnScreen, filterLayerAndStep) => {
+  return useMemo7(() => {
+    return (text) => {
+      if (!filterLayerAndStep(text)) return false;
+      return isPointOnScreen({ x: text.x, y: text.y });
+    };
+  }, [isPointOnScreen, filterLayerAndStep]);
+};
+
 // site/components/DimensionOverlay.tsx
 import { useEffect, useRef, useState as useState5 } from "react";
-import { applyToPoint as applyToPoint8, identity, inverse } from "transformation-matrix";
-import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint9, identity, inverse } from "transformation-matrix";
+import { Fragment, jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var DimensionOverlay = ({ children, transform }) => {
   if (!transform) transform = identity();
   const [dimensionToolVisible, setDimensionToolVisible] = useState5(false);
@@ -587,8 +654,8 @@ var DimensionOverlay = ({ children, transform }) => {
     };
   };
   useEffect(bindKeys, [containerBounds?.width, containerBounds?.height]);
-  const screenDStart = applyToPoint8(transform, dStart);
-  const screenDEnd = applyToPoint8(transform, dEnd);
+  const screenDStart = applyToPoint9(transform, dStart);
+  const screenDEnd = applyToPoint9(transform, dEnd);
   const arrowScreenBounds = {
     left: Math.min(screenDStart.x, screenDEnd.x),
     right: Math.max(screenDStart.x, screenDEnd.x),
@@ -611,7 +678,7 @@ var DimensionOverlay = ({ children, transform }) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint8(inverse(transform), { x, y });
+        const rwPoint = applyToPoint9(inverse(transform), { x, y });
         mousePosRef.current.x = rwPoint.x;
         mousePosRef.current.y = rwPoint.y;
         if (dimensionToolStretching) {
@@ -633,7 +700,7 @@ var DimensionOverlay = ({ children, transform }) => {
       children: [
         children,
         dimensionToolVisible && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "div",
             {
               style: {
@@ -653,7 +720,7 @@ var DimensionOverlay = ({ children, transform }) => {
               children: Math.abs(dStart.x - dEnd.x).toFixed(2)
             }
           ),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             "div",
             {
               style: {
@@ -671,7 +738,7 @@ var DimensionOverlay = ({ children, transform }) => {
                 fontFamily: "sans-serif",
                 zIndex: 30
               },
-              children: /* @__PURE__ */ jsx6(
+              children: /* @__PURE__ */ jsx7(
                 "div",
                 {
                   style: {
@@ -697,7 +764,7 @@ var DimensionOverlay = ({ children, transform }) => {
               width: containerBounds?.width || "100%",
               height: containerBounds?.height || "100%",
               children: [
-                /* @__PURE__ */ jsx6("defs", { children: /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7(
                   "marker",
                   {
                     id: "head",
@@ -706,10 +773,10 @@ var DimensionOverlay = ({ children, transform }) => {
                     markerHeight: "4",
                     refX: "2",
                     refY: "2",
-                    children: /* @__PURE__ */ jsx6("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
+                    children: /* @__PURE__ */ jsx7("path", { d: "M0,0 V4 L2,2 Z", fill: "red" })
                   }
                 ) }),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -722,7 +789,7 @@ var DimensionOverlay = ({ children, transform }) => {
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   "line",
                   {
                     x1: screenDStart.x,
@@ -735,7 +802,7 @@ var DimensionOverlay = ({ children, transform }) => {
                     stroke: "red"
                   }
                 ),
-                /* @__PURE__ */ jsx6(
+                /* @__PURE__ */ jsx7(
                   "line",
                   {
                     x1: screenDEnd.x,
@@ -769,13 +836,13 @@ var DimensionOverlay = ({ children, transform }) => {
                 ",",
                 dStart.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx6("br", {}),
+                /* @__PURE__ */ jsx7("br", {}),
                 "(",
                 dEnd.x.toFixed(2),
                 ",",
                 dEnd.y.toFixed(2),
                 ")",
-                /* @__PURE__ */ jsx6("br", {}),
+                /* @__PURE__ */ jsx7("br", {}),
                 "dist:",
                 " ",
                 Math.sqrt(
@@ -803,12 +870,19 @@ function getMaxStep(graphics) {
   const maxLineStep = getMaxStepFromArray(graphics.lines);
   const maxRectStep = getMaxStepFromArray(graphics.rects);
   const maxCircleStep = getMaxStepFromArray(graphics.circles);
-  return Math.max(maxPointStep, maxLineStep, maxRectStep, maxCircleStep);
+  const maxTextStep = getMaxStepFromArray(graphics.texts);
+  return Math.max(
+    maxPointStep,
+    maxLineStep,
+    maxRectStep,
+    maxCircleStep,
+    maxTextStep
+  );
 }
 
 // site/components/InteractiveGraphics/ContextMenu.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var ContextMenu = ({
   x,
   y,
@@ -856,7 +930,7 @@ var ContextMenu = ({
     e.currentTarget.style.backgroundColor = "";
   };
   return /* @__PURE__ */ jsxs3("div", { ref: menuRef, style: menuStyle, children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: menuItemStyle,
@@ -869,7 +943,7 @@ var ContextMenu = ({
         children: "Save Camera Position"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: menuItemStyle,
@@ -882,7 +956,7 @@ var ContextMenu = ({
         children: "Clear Saved Camera Position"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: menuItemStyle,
@@ -895,7 +969,7 @@ var ContextMenu = ({
         children: "Add Mark"
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         style: menuItemStyle,
@@ -912,11 +986,11 @@ var ContextMenu = ({
 };
 
 // site/components/InteractiveGraphics/Marker.tsx
-import { applyToPoint as applyToPoint9 } from "transformation-matrix";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var Marker = ({ marker, transform }) => {
-  const [screenX, screenY] = applyToPoint9(transform, [marker.x, marker.y]);
-  return /* @__PURE__ */ jsx8(
+  const [screenX, screenY] = applyToPoint10(transform, [marker.x, marker.y]);
+  return /* @__PURE__ */ jsx9(
     "svg",
     {
       style: {
@@ -927,7 +1001,7 @@ var Marker = ({ marker, transform }) => {
         zIndex: 900
       },
       children: /* @__PURE__ */ jsxs4("g", { transform: `translate(${screenX}, ${screenY})`, children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "circle",
           {
             r: 7,
@@ -936,14 +1010,14 @@ var Marker = ({ marker, transform }) => {
             strokeWidth: 2
           }
         ),
-        /* @__PURE__ */ jsx8("circle", { r: 2, fill: "rgba(255, 0, 0, 0.9)" })
+        /* @__PURE__ */ jsx9("circle", { r: 2, fill: "rgba(255, 0, 0, 0.9)" })
       ] })
     }
   );
 };
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var InteractiveGraphics = ({
   graphics,
   onObjectClicked,
@@ -959,11 +1033,12 @@ var InteractiveGraphics = ({
     /* @__PURE__ */ new Set([
       ...graphics.lines?.map((l) => l.layer).filter(Boolean) ?? [],
       ...graphics.rects?.map((r) => r.layer).filter(Boolean) ?? [],
-      ...graphics.points?.map((p) => p.layer).filter(Boolean) ?? []
+      ...graphics.points?.map((p) => p.layer).filter(Boolean) ?? [],
+      ...graphics.texts?.map((t) => t.layer).filter(Boolean) ?? []
     ])
   );
   const maxStep = getMaxStep(graphics);
-  const graphicsBoundsWithPadding = useMemo7(() => {
+  const graphicsBoundsWithPadding = useMemo8(() => {
     const actualBounds = getGraphicsBounds(graphics);
     const width = actualBounds.maxX - actualBounds.minX;
     const height = actualBounds.maxY - actualBounds.minY;
@@ -1093,7 +1168,7 @@ var InteractiveGraphics = ({
         const screenX = screenPoint.x - rect.left;
         const screenY = screenPoint.y - rect.top;
         const inverseTransform = inverse2(realToScreen);
-        const [realX, realY] = applyToPoint10(inverseTransform, [
+        const [realX, realY] = applyToPoint11(inverseTransform, [
           screenX,
           screenY
         ]);
@@ -1147,28 +1222,33 @@ var InteractiveGraphics = ({
     realToScreen,
     size
   );
+  const filterTexts = useFilterTexts(isPointOnScreen, filterLayerAndStep);
   const filterAndLimit = (objects, filterFn) => {
     if (!objects) return [];
     const filtered = objects.map((obj, index) => ({ ...obj, originalIndex: index })).filter(filterFn);
     return objectLimit ? filtered.slice(-objectLimit) : filtered;
   };
-  const filteredLines = useMemo7(
+  const filteredLines = useMemo8(
     () => filterAndLimit(graphics.lines, filterLines),
     [graphics.lines, filterLines, objectLimit]
   );
-  const filteredRects = useMemo7(
+  const filteredRects = useMemo8(
     () => filterAndLimit(graphics.rects, filterRects),
     [graphics.rects, filterRects, objectLimit]
   );
-  const filteredPoints = useMemo7(
+  const filteredPoints = useMemo8(
     () => filterAndLimit(graphics.points, filterPoints),
     [graphics.points, filterPoints, objectLimit]
   );
-  const filteredCircles = useMemo7(
+  const filteredCircles = useMemo8(
     () => filterAndLimit(graphics.circles, filterCircles),
     [graphics.circles, filterCircles, objectLimit]
   );
-  const totalFilteredObjects = filteredLines.length + filteredRects.length + filteredPoints.length + filteredCircles.length;
+  const filteredTexts = useMemo8(
+    () => filterAndLimit(graphics.texts, filterTexts),
+    [graphics.texts, filterTexts, objectLimit]
+  );
+  const totalFilteredObjects = filteredLines.length + filteredRects.length + filteredPoints.length + filteredCircles.length + filteredTexts.length;
   const isLimitReached = objectLimit && totalFilteredObjects > objectLimit;
   return /* @__PURE__ */ jsxs5("div", { children: [
     showToolbar && /* @__PURE__ */ jsxs5("div", { style: { margin: 8 }, children: [
@@ -1182,8 +1262,8 @@ var InteractiveGraphics = ({
           },
           style: { marginRight: 8 },
           children: [
-            /* @__PURE__ */ jsx9("option", { value: "", children: "All Layers" }),
-            availableLayers.map((layer) => /* @__PURE__ */ jsx9("option", { value: layer, children: layer }, layer))
+            /* @__PURE__ */ jsx10("option", { value: "", children: "All Layers" }),
+            availableLayers.map((layer) => /* @__PURE__ */ jsx10("option", { value: layer, children: layer }, layer))
           ]
         }
       ),
@@ -1193,7 +1273,7 @@ var InteractiveGraphics = ({
           style: { display: "inline-flex", alignItems: "center", gap: 8 },
           children: [
             "Step:",
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               "input",
               {
                 type: "number",
@@ -1209,7 +1289,7 @@ var InteractiveGraphics = ({
               }
             ),
             /* @__PURE__ */ jsxs5("label", { children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "input",
                 {
                   type: "checkbox",
@@ -1224,7 +1304,7 @@ var InteractiveGraphics = ({
               "Filter by step"
             ] }),
             /* @__PURE__ */ jsxs5("label", { children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "input",
                 {
                   type: "checkbox",
@@ -1262,7 +1342,7 @@ var InteractiveGraphics = ({
         onContextMenu: handleContextMenu,
         children: [
           /* @__PURE__ */ jsxs5(DimensionOverlay, { transform: realToScreen, children: [
-            filteredLines.map((line) => /* @__PURE__ */ jsx9(
+            filteredLines.map((line) => /* @__PURE__ */ jsx10(
               Line,
               {
                 line,
@@ -1271,7 +1351,7 @@ var InteractiveGraphics = ({
               },
               line.originalIndex
             )),
-            filteredRects.map((rect) => /* @__PURE__ */ jsx9(
+            filteredRects.map((rect) => /* @__PURE__ */ jsx10(
               Rect,
               {
                 rect,
@@ -1280,7 +1360,7 @@ var InteractiveGraphics = ({
               },
               rect.originalIndex
             )),
-            filteredPoints.map((point) => /* @__PURE__ */ jsx9(
+            filteredPoints.map((point) => /* @__PURE__ */ jsx10(
               Point,
               {
                 point,
@@ -1289,7 +1369,7 @@ var InteractiveGraphics = ({
               },
               point.originalIndex
             )),
-            filteredCircles.map((circle) => /* @__PURE__ */ jsx9(
+            filteredCircles.map((circle) => /* @__PURE__ */ jsx10(
               Circle,
               {
                 circle,
@@ -1298,7 +1378,16 @@ var InteractiveGraphics = ({
               },
               circle.originalIndex
             )),
-            /* @__PURE__ */ jsx9(
+            filteredTexts.map((txt) => /* @__PURE__ */ jsx10(
+              Text,
+              {
+                textObj: txt,
+                index: txt.originalIndex,
+                interactiveState
+              },
+              txt.originalIndex
+            )),
+            /* @__PURE__ */ jsx10(
               SuperGrid,
               {
                 stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,
@@ -1308,7 +1397,7 @@ var InteractiveGraphics = ({
               }
             )
           ] }),
-          markers.map((marker, index) => /* @__PURE__ */ jsx9(
+          markers.map((marker, index) => /* @__PURE__ */ jsx10(
             Marker,
             {
               marker,
@@ -1317,7 +1406,7 @@ var InteractiveGraphics = ({
             },
             index
           )),
-          contextMenu && /* @__PURE__ */ jsx9(
+          contextMenu && /* @__PURE__ */ jsx10(
             ContextMenu,
             {
               x: contextMenu.x,
@@ -1364,6 +1453,9 @@ function getGraphicsFilteredByStep(graphics, {
     ),
     circles: graphics.circles?.filter(
       (c) => c.step === void 0 || c.step === selectedStep
+    ),
+    texts: graphics.texts?.filter(
+      (t) => t.step === void 0 || t.step === selectedStep
     )
   };
   return filteredGraphics;
@@ -1383,7 +1475,7 @@ function getGraphicsBoundsWithPadding(graphics) {
 }
 
 // site/components/InteractiveGraphicsCanvas.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function InteractiveGraphicsCanvas({
   graphics,
   showLabelsByDefault = true,
@@ -1495,7 +1587,7 @@ function InteractiveGraphicsCanvas({
     /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
       /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
         /* @__PURE__ */ jsxs6("label", { children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "checkbox",
@@ -1508,7 +1600,7 @@ function InteractiveGraphicsCanvas({
           ),
           "Filter by step"
         ] }),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "input",
           {
             type: "number",
@@ -1525,7 +1617,7 @@ function InteractiveGraphicsCanvas({
           }
         ),
         /* @__PURE__ */ jsxs6("label", { children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               type: "checkbox",
@@ -1540,8 +1632,8 @@ function InteractiveGraphicsCanvas({
           "Show last step"
         ] })
       ] }),
-      /* @__PURE__ */ jsx10("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs6("label", { children: [
-        /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs6("label", { children: [
+        /* @__PURE__ */ jsx11(
           "input",
           {
             type: "checkbox",
@@ -1555,7 +1647,7 @@ function InteractiveGraphicsCanvas({
         "Show labels"
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       "div",
       {
         ref: (node) => {
@@ -1571,7 +1663,7 @@ function InteractiveGraphicsCanvas({
           border: "1px solid #ccc",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           "canvas",
           {
             ref: canvasRef,
@@ -1594,7 +1686,7 @@ import React3, { useRef as useRef4, useEffect as useEffect5, useState as useStat
 import useMouseMatrixTransform3 from "use-mouse-matrix-transform";
 import { compose as compose3, scale as scale3, translate as translate3 } from "transformation-matrix";
 import useResizeObserver3 from "@react-hook/resize-observer";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function TransformContainer({
   initialTransform,
   children,
@@ -1606,7 +1698,7 @@ function TransformContainer({
   useEffect5(() => {
     onTransformChange(transform);
   }, [transform, onTransformChange]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ref,
@@ -1742,7 +1834,7 @@ var CanvasGraphics = ({
   useEffect5(() => {
     setCurrentTransform(computedInitialTransform);
   }, [computedInitialTransform]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ref: containerRef,
@@ -1753,16 +1845,16 @@ var CanvasGraphics = ({
         border: "1px solid #eee",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         TransformContainer,
         {
           initialTransform: computedInitialTransform,
           onTransformChange: handleTransformChange,
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             DimensionOverlay,
             {
               transform: currentTransform || computedInitialTransform,
-              children: /* @__PURE__ */ jsx11(
+              children: /* @__PURE__ */ jsx12(
                 "canvas",
                 {
                   ref: canvasRef,