graphics-debug 0.0.82 → 0.0.84

package/dist/lib/react.js

@@ -1,20 +1,24 @@
-import "../chunk-FYUIQOZG.js";
-import "../chunk-GZRUE2GP.js";
-import "../chunk-5TY5HWUP.js";
-import "../chunk-NYENUFOW.js";
+import "../chunk-HPNVGPHJ.js";
+import "../chunk-OB4CGOL3.js";
+import "../chunk-MYMDOAQN.js";
+import "../chunk-K37Y2KHE.js";
+import "../chunk-7236NVI2.js";
 import {
   defaultColors,
   drawGraphicsToCanvas,
   getBounds
-} from "../chunk-QMPH5ZUA.js";
+} from "../chunk-AKONCUCE.js";
 import "../chunk-NG6H63SM.js";
-import "../chunk-3L7TJ2LD.js";
+import "../chunk-ZWAXHWX2.js";
 import {
   getArrowBoundingBox,
   getArrowGeometry
 } from "../chunk-IOVKI3ZO.js";
 import "../chunk-ZGI74PYD.js";
-import "../chunk-BQ3ZHEQO.js";
+import {
+  clipInfiniteLineToBounds,
+  getViewportBoundsFromMatrix
+} from "../chunk-FLFF6QXL.js";
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
 import useResizeObserver from "@react-hook/resize-observer";
@@ -93,6 +97,7 @@ function getMaxStep(graphics) {
   };
   const maxPointStep = getMaxStepFromArray(graphics.points);
   const maxLineStep = getMaxStepFromArray(graphics.lines);
+  const maxInfiniteLineStep = getMaxStepFromArray(graphics.infiniteLines);
   const maxRectStep = getMaxStepFromArray(graphics.rects);
   const maxPolygonStep = getMaxStepFromArray(graphics.polygons);
   const maxCircleStep = getMaxStepFromArray(graphics.circles);
@@ -101,6 +106,7 @@ function getMaxStep(graphics) {
   return Math.max(
     maxPointStep,
     maxLineStep,
+    maxInfiniteLineStep,
     maxRectStep,
     maxPolygonStep,
     maxCircleStep,
@@ -114,7 +120,7 @@ var sortRectsByArea = (rects) => rects.slice().sort((a, b) => b.width * b.height
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
 import {
-  applyToPoint as applyToPoint13,
+  applyToPoint as applyToPoint14,
   compose,
   inverse as inverse2,
   scale,
@@ -828,10 +834,81 @@ var ContextMenu = ({
   ] });
 };
 
-// site/components/InteractiveGraphics/Line.tsx
+// site/components/InteractiveGraphics/InfiniteLine.tsx
 import { applyToPoint as applyToPoint4 } from "transformation-matrix";
-import { useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var InfiniteLine = ({
+  infiniteLine,
+  index,
+  interactiveState,
+  size
+}) => {
+  const { realToScreen, onObjectClicked } = interactiveState;
+  const viewportBounds = getViewportBoundsFromMatrix(
+    realToScreen,
+    size.width,
+    size.height
+  );
+  const segment = clipInfiniteLineToBounds(infiniteLine, viewportBounds);
+  if (!segment) {
+    return null;
+  }
+  const [start, end] = segment;
+  const screenStart = applyToPoint4(realToScreen, start);
+  const screenEnd = applyToPoint4(realToScreen, end);
+  const baseColor = infiniteLine.strokeColor ?? defaultColors[index % defaultColors.length];
+  const strokeWidth = (infiniteLine.strokeWidth ?? 1 / Math.abs(realToScreen.a)) * Math.abs(realToScreen.a);
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: size.width,
+        height: size.height,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "line",
+          {
+            x1: screenStart.x,
+            y1: screenStart.y,
+            x2: screenEnd.x,
+            y2: screenEnd.y,
+            stroke: "transparent",
+            strokeWidth: strokeWidth + 10,
+            pointerEvents: "stroke",
+            onClick: () => onObjectClicked?.({
+              type: "infinite-line",
+              index,
+              object: infiniteLine
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "line",
+          {
+            x1: screenStart.x,
+            y1: screenStart.y,
+            x2: screenEnd.x,
+            y2: screenEnd.y,
+            stroke: baseColor,
+            strokeWidth,
+            strokeDasharray: !infiniteLine.strokeDash ? void 0 : typeof infiniteLine.strokeDash === "string" ? infiniteLine.strokeDash : infiniteLine.strokeDash.map((dash) => dash * Math.abs(realToScreen.a)).join(","),
+            pointerEvents: "none"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// site/components/InteractiveGraphics/Line.tsx
+import { applyToPoint as applyToPoint5 } from "transformation-matrix";
+import { useRef as useRef3, useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var Line = ({
   line,
   index,
@@ -849,7 +926,7 @@ var Line = ({
   const [isHovered, setIsHovered] = useState4(false);
   const [mousePos, setMousePos] = useState4({ x: 0, y: 0 });
   const svgRef = useRef3(null);
-  const screenPoints = points.map((p) => applyToPoint4(realToScreen, p));
+  const screenPoints = points.map((p) => applyToPoint5(realToScreen, p));
   const xs = screenPoints.map((p) => p.x);
   const ys = screenPoints.map((p) => p.y);
   const minX = Math.min(...xs);
@@ -893,7 +970,7 @@ var Line = ({
     setIsHovered(isNearLine);
   };
   const baseColor = strokeColor ?? defaultColors[index % defaultColors.length];
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       ref: svgRef,
@@ -906,7 +983,7 @@ var Line = ({
         pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "polyline",
           {
             points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
@@ -924,7 +1001,7 @@ var Line = ({
             }) : void 0
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "polyline",
           {
             points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
@@ -936,14 +1013,14 @@ var Line = ({
             pointerEvents: "none"
           }
         ),
-        isHovered && line.label && /* @__PURE__ */ jsx6(
+        isHovered && line.label && /* @__PURE__ */ jsx7(
           "foreignObject",
           {
             x: mousePos.x,
             y: mousePos.y - 40,
             width: 300,
             height: 40,
-            children: /* @__PURE__ */ jsx6(Tooltip, { text: line.label })
+            children: /* @__PURE__ */ jsx7(Tooltip, { text: line.label })
           }
         )
       ]
@@ -952,11 +1029,11 @@ var Line = ({
 };
 
 // site/components/InteractiveGraphics/Marker.tsx
-import { applyToPoint as applyToPoint5 } from "transformation-matrix";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var Marker = ({ marker, transform }) => {
-  const [screenX, screenY] = applyToPoint5(transform, [marker.x, marker.y]);
-  return /* @__PURE__ */ jsx7(
+  const [screenX, screenY] = applyToPoint6(transform, [marker.x, marker.y]);
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       style: {
@@ -966,8 +1043,8 @@ var Marker = ({ marker, transform }) => {
         pointerEvents: "none",
         zIndex: 900
       },
-      children: /* @__PURE__ */ jsxs5("g", { transform: `translate(${screenX}, ${screenY})`, children: [
-        /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsxs6("g", { transform: `translate(${screenX}, ${screenY})`, children: [
+        /* @__PURE__ */ jsx8(
           "circle",
           {
             r: 7,
@@ -976,16 +1053,16 @@ var Marker = ({ marker, transform }) => {
             strokeWidth: 2
           }
         ),
-        /* @__PURE__ */ jsx7("circle", { r: 2, fill: "rgba(255, 0, 0, 0.9)" })
+        /* @__PURE__ */ jsx8("circle", { r: 2, fill: "rgba(255, 0, 0, 0.9)" })
       ] })
     }
   );
 };
 
 // site/components/InteractiveGraphics/Point.tsx
-import { applyToPoint as applyToPoint6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint7 } from "transformation-matrix";
 import { useState as useState5 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Point = ({
   point,
   interactiveState,
@@ -994,9 +1071,9 @@ var Point = ({
   const { color, label, layer, step } = point;
   const { activeLayers, activeStep, realToScreen, onObjectClicked } = interactiveState;
   const [isHovered, setIsHovered] = useState5(false);
-  const screenPoint = applyToPoint6(realToScreen, point);
+  const screenPoint = applyToPoint7(realToScreen, point);
   const size = 10;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       style: {
@@ -1020,7 +1097,7 @@ var Point = ({
         index,
         object: point
       }),
-      children: isHovered && /* @__PURE__ */ jsx8(
+      children: isHovered && /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -1030,7 +1107,7 @@ var Point = ({
             transform: "translateX(-50%)",
             marginBottom: 8
           },
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx9(
             Tooltip,
             {
               text: `${label ? `${label}
@@ -1045,18 +1122,18 @@ var Point = ({
 
 // site/components/InteractiveGraphics/Polygon.tsx
 import { useState as useState6 } from "react";
-import { applyToPoint as applyToPoint7 } from "transformation-matrix";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var Polygon = ({
   polygon,
   interactiveState,
   index
 }) => {
-  const { points, fill, stroke } = polygon;
+  const { points, fill, stroke, strokeWidth } = polygon;
   const { realToScreen, onObjectClicked } = interactiveState;
   const [isHovered, setIsHovered] = useState6(false);
   if (!points || points.length === 0) return null;
-  const screenPoints = points.map((p) => applyToPoint7(realToScreen, p));
+  const screenPoints = points.map((p) => applyToPoint8(realToScreen, p));
   const xs = screenPoints.map((p) => p.x);
   const ys = screenPoints.map((p) => p.y);
   const minX = Math.min(...xs);
@@ -1078,7 +1155,8 @@ var Polygon = ({
   const baseStroke = stroke;
   const displayFill = isHovered ? safeLighten(0.2, baseFill) : baseFill;
   const displayStroke = baseStroke ? isHovered ? safeLighten(0.2, baseStroke) : baseStroke : void 0;
-  return /* @__PURE__ */ jsxs6(
+  const screenStrokeWidth = strokeWidth === void 0 ? void 0 : strokeWidth * realToScreen.a;
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       style: {
@@ -1090,12 +1168,13 @@ var Polygon = ({
         pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ jsx9("svg", { width: svgWidth, height: svgHeight, style: { display: "block" }, children: /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10("svg", { width: svgWidth, height: svgHeight, style: { display: "block" }, children: /* @__PURE__ */ jsx10(
           "polygon",
           {
             points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
             fill: displayFill,
             stroke: displayStroke ?? "none",
+            strokeWidth: screenStrokeWidth,
             pointerEvents: "all",
             onMouseEnter: () => setIsHovered(true),
             onMouseLeave: () => setIsHovered(false),
@@ -1106,7 +1185,7 @@ var Polygon = ({
             })
           }
         ) }),
-        isHovered && polygon.label && /* @__PURE__ */ jsx9(
+        isHovered && polygon.label && /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1117,7 +1196,7 @@ var Polygon = ({
               marginBottom: 8,
               pointerEvents: "none"
             },
-            children: /* @__PURE__ */ jsx9(Tooltip, { text: polygon.label })
+            children: /* @__PURE__ */ jsx10(Tooltip, { text: polygon.label })
           }
         )
       ]
@@ -1126,9 +1205,9 @@ var Polygon = ({
 };
 
 // site/components/InteractiveGraphics/Rect.tsx
-import { applyToPoint as applyToPoint8 } from "transformation-matrix";
+import { applyToPoint as applyToPoint9 } from "transformation-matrix";
 import { useState as useState7 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var Rect = ({
   rect,
   interactiveState,
@@ -1138,7 +1217,7 @@ var Rect = ({
   let { center, width, height, fill, stroke, layer, step } = rect;
   const { activeLayers, activeStep, realToScreen, onObjectClicked } = interactiveState;
   const [isHovered, setIsHovered] = useState7(false);
-  const screenCenter = applyToPoint8(realToScreen, center);
+  const screenCenter = applyToPoint9(realToScreen, center);
   const screenWidth = width * realToScreen.a;
   const screenHeight = height * Math.abs(realToScreen.d);
   const hasStrokeOrFill = fill !== void 0 || stroke !== void 0;
@@ -1147,7 +1226,7 @@ var Rect = ({
     backgroundColor = safeLighten(0.2, backgroundColor);
     stroke = safeLighten(0.2, stroke);
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       style: {
@@ -1168,7 +1247,7 @@ var Rect = ({
         index,
         object: rect
       }),
-      children: isHovered && rect.label && /* @__PURE__ */ jsx10(
+      children: isHovered && rect.label && /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -1178,7 +1257,7 @@ var Rect = ({
             transform: "translateX(-50%)",
             marginBottom: 8
           },
-          children: /* @__PURE__ */ jsx10(Tooltip, { text: rect.label })
+          children: /* @__PURE__ */ jsx11(Tooltip, { text: rect.label })
         }
       )
     }
@@ -1186,8 +1265,8 @@ var Rect = ({
 };
 
 // site/components/InteractiveGraphics/Text.tsx
-import { applyToPoint as applyToPoint9 } from "transformation-matrix";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Text = ({
   textObj,
   interactiveState,
@@ -1195,7 +1274,7 @@ var Text = ({
 }) => {
   const { realToScreen, onObjectClicked } = interactiveState;
   const { x, y, text, color, fontSize, anchorSide } = textObj;
-  const screenPos = applyToPoint9(realToScreen, { x, y });
+  const screenPos = applyToPoint10(realToScreen, { x, y });
   const transformMap = {
     top_left: "translate(0%, 0%)",
     top_center: "translate(-50%, 0%)",
@@ -1208,7 +1287,7 @@ var Text = ({
     bottom_right: "translate(-100%, -100%)"
   };
   const transform = transformMap[anchorSide ?? "center"];
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -1228,18 +1307,18 @@ var Text = ({
 };
 
 // site/components/InteractiveGraphics/hooks/useIsPointOnScreen.ts
-import { applyToPoint as applyToPoint11 } from "transformation-matrix";
+import { applyToPoint as applyToPoint12 } from "transformation-matrix";
 import { useMemo as useMemo4 } from "react";
 
 // site/components/InteractiveGraphics/hooks/useDoesLineIntersectViewport.ts
-import { applyToPoint as applyToPoint10 } from "transformation-matrix";
+import { applyToPoint as applyToPoint11 } from "transformation-matrix";
 import { useMemo as useMemo3 } from "react";
 var OFFSCREEN_MARGIN = 5;
 var useDoesLineIntersectViewport = (realToScreen, size) => {
   return useMemo3(() => {
     return (p1, p2) => {
-      const sp1 = applyToPoint10(realToScreen, p1);
-      const sp2 = applyToPoint10(realToScreen, p2);
+      const sp1 = applyToPoint11(realToScreen, p1);
+      const sp2 = applyToPoint11(realToScreen, p2);
       const left = -OFFSCREEN_MARGIN;
       const right = size.width + OFFSCREEN_MARGIN;
       const top = -OFFSCREEN_MARGIN;
@@ -1269,7 +1348,7 @@ var useDoesLineIntersectViewport = (realToScreen, size) => {
 var useIsPointOnScreen = (realToScreen, size) => {
   return useMemo4(() => {
     return (point) => {
-      const screenPoint = applyToPoint11(realToScreen, point);
+      const screenPoint = applyToPoint12(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]);
@@ -1347,7 +1426,7 @@ var useFilterRects = ({
 
 // site/components/InteractiveGraphics/hooks/useFilterCircles.ts
 import { useMemo as useMemo8 } from "react";
-import { applyToPoint as applyToPoint12 } from "transformation-matrix";
+import { applyToPoint as applyToPoint13 } from "transformation-matrix";
 var useFilterCircles = ({
   isPointOnScreen,
   filterLayerAndStep,
@@ -1361,7 +1440,7 @@ var useFilterCircles = ({
       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 = applyToPoint12(realToScreen, center);
+      const screenCenter = applyToPoint13(realToScreen, center);
       const scale4 = Math.abs(realToScreen.a);
       const screenRadius = radius * scale4;
       const left = -OFFSCREEN_MARGIN;
@@ -1457,7 +1536,7 @@ var useFilterPolygons = ({
 };
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var InteractiveGraphics = ({
   graphics,
   onObjectClicked,
@@ -1473,6 +1552,7 @@ var InteractiveGraphics = ({
   const availableLayers = Array.from(
     /* @__PURE__ */ new Set([
       ...graphics.lines?.map((l) => l.layer).filter(Boolean) ?? [],
+      ...graphics.infiniteLines?.map((l) => l.layer).filter(Boolean) ?? [],
       ...graphics.rects?.map((r) => r.layer).filter(Boolean) ?? [],
       ...graphics.polygons?.map((p) => p.layer).filter(Boolean) ?? [],
       ...graphics.points?.map((p) => p.layer).filter(Boolean) ?? [],
@@ -1621,7 +1701,7 @@ var InteractiveGraphics = ({
         const screenX = screenPoint.x - rect.left;
         const screenY = screenPoint.y - rect.top;
         const inverseTransform = inverse2(realToScreen);
-        const [realX, realY] = applyToPoint13(inverseTransform, [
+        const [realX, realY] = applyToPoint14(inverseTransform, [
           screenX,
           screenY
         ]);
@@ -1706,6 +1786,10 @@ var InteractiveGraphics = ({
     () => filterAndLimit(graphics.lines, filterLines),
     [graphics.lines, filterLines, objectLimit]
   );
+  const filteredInfiniteLines = useMemo12(
+    () => filterAndLimit(graphics.infiniteLines, filterLayerAndStep),
+    [graphics.infiniteLines, filterLayerAndStep, objectLimit]
+  );
   const filteredRects = useMemo12(
     () => sortRectsByArea(filterAndLimit(graphics.rects, filterRects)),
     [graphics.rects, filterRects, objectLimit]
@@ -1730,11 +1814,11 @@ var InteractiveGraphics = ({
     () => filterAndLimit(graphics.arrows, filterArrows),
     [graphics.arrows, filterArrows, objectLimit]
   );
-  const totalFilteredObjects = filteredLines.length + filteredRects.length + filteredPolygons.length + filteredPoints.length + filteredCircles.length + filteredTexts.length + filteredArrows.length;
+  const totalFilteredObjects = filteredInfiniteLines.length + filteredLines.length + filteredRects.length + filteredPolygons.length + filteredPoints.length + filteredCircles.length + filteredTexts.length + filteredArrows.length;
   const isLimitReached = objectLimit && totalFilteredObjects > objectLimit;
-  return /* @__PURE__ */ jsxs7("div", { children: [
-    showToolbar && /* @__PURE__ */ jsxs7("div", { style: { margin: 8 }, children: [
-      availableLayers.length > 1 && /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    showToolbar && /* @__PURE__ */ jsxs8("div", { style: { margin: 8 }, children: [
+      availableLayers.length > 1 && /* @__PURE__ */ jsxs8(
         "select",
         {
           value: activeLayers ? activeLayers[0] : "",
@@ -1744,18 +1828,18 @@ var InteractiveGraphics = ({
           },
           style: { marginRight: 8 },
           children: [
-            /* @__PURE__ */ jsx12("option", { value: "", children: "All Layers" }),
-            availableLayers.map((layer) => /* @__PURE__ */ jsx12("option", { value: layer, children: layer }, layer))
+            /* @__PURE__ */ jsx13("option", { value: "", children: "All Layers" }),
+            availableLayers.map((layer) => /* @__PURE__ */ jsx13("option", { value: layer, children: layer }, layer))
           ]
         }
       ),
-      maxStep > 0 && /* @__PURE__ */ jsxs7(
+      maxStep > 0 && /* @__PURE__ */ jsxs8(
         "div",
         {
           style: { display: "inline-flex", alignItems: "center", gap: 8 },
           children: [
             "Step:",
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               "input",
               {
                 type: "number",
@@ -1770,8 +1854,8 @@ var InteractiveGraphics = ({
                 disabled: activeStep === null
               }
             ),
-            /* @__PURE__ */ jsxs7("label", { children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs8("label", { children: [
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   type: "checkbox",
@@ -1785,8 +1869,8 @@ var InteractiveGraphics = ({
               ),
               "Filter by step"
             ] }),
-            /* @__PURE__ */ jsxs7("label", { children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs8("label", { children: [
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   type: "checkbox",
@@ -1800,7 +1884,7 @@ var InteractiveGraphics = ({
               ),
               "Show last step"
             ] }),
-            isLimitReached && /* @__PURE__ */ jsxs7("span", { style: { color: "red", fontSize: "12px" }, children: [
+            isLimitReached && /* @__PURE__ */ jsxs8("span", { style: { color: "red", fontSize: "12px" }, children: [
               "Display limited to ",
               objectLimit,
               " objects. Received:",
@@ -1812,7 +1896,7 @@ var InteractiveGraphics = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         ref,
@@ -1823,8 +1907,8 @@ var InteractiveGraphics = ({
         },
         onContextMenu: handleContextMenu,
         children: [
-          /* @__PURE__ */ jsxs7(DimensionOverlay, { transform: realToScreen, children: [
-            filteredArrows.map((arrow) => /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsxs8(DimensionOverlay, { transform: realToScreen, children: [
+            filteredArrows.map((arrow) => /* @__PURE__ */ jsx13(
               Arrow,
               {
                 arrow,
@@ -1833,7 +1917,17 @@ var InteractiveGraphics = ({
               },
               arrow.originalIndex
             )),
-            filteredLines.map((line) => /* @__PURE__ */ jsx12(
+            filteredInfiniteLines.map((infiniteLine) => /* @__PURE__ */ jsx13(
+              InfiniteLine,
+              {
+                infiniteLine,
+                index: infiniteLine.originalIndex,
+                interactiveState,
+                size
+              },
+              infiniteLine.originalIndex
+            )),
+            filteredLines.map((line) => /* @__PURE__ */ jsx13(
               Line,
               {
                 line,
@@ -1842,7 +1936,7 @@ var InteractiveGraphics = ({
               },
               line.originalIndex
             )),
-            filteredRects.map((rect) => /* @__PURE__ */ jsx12(
+            filteredRects.map((rect) => /* @__PURE__ */ jsx13(
               Rect,
               {
                 rect,
@@ -1851,7 +1945,7 @@ var InteractiveGraphics = ({
               },
               rect.originalIndex
             )),
-            filteredPolygons.map((polygon) => /* @__PURE__ */ jsx12(
+            filteredPolygons.map((polygon) => /* @__PURE__ */ jsx13(
               Polygon,
               {
                 polygon,
@@ -1860,7 +1954,7 @@ var InteractiveGraphics = ({
               },
               polygon.originalIndex
             )),
-            filteredPoints.map((point) => /* @__PURE__ */ jsx12(
+            filteredPoints.map((point) => /* @__PURE__ */ jsx13(
               Point,
               {
                 point,
@@ -1869,7 +1963,7 @@ var InteractiveGraphics = ({
               },
               point.originalIndex
             )),
-            filteredCircles.map((circle) => /* @__PURE__ */ jsx12(
+            filteredCircles.map((circle) => /* @__PURE__ */ jsx13(
               Circle,
               {
                 circle,
@@ -1878,7 +1972,7 @@ var InteractiveGraphics = ({
               },
               circle.originalIndex
             )),
-            filteredTexts.map((txt) => /* @__PURE__ */ jsx12(
+            filteredTexts.map((txt) => /* @__PURE__ */ jsx13(
               Text,
               {
                 textObj: txt,
@@ -1887,7 +1981,7 @@ var InteractiveGraphics = ({
               },
               txt.originalIndex
             )),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               SuperGrid,
               {
                 stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,
@@ -1897,7 +1991,7 @@ var InteractiveGraphics = ({
               }
             )
           ] }),
-          markers.map((marker, index) => /* @__PURE__ */ jsx12(
+          markers.map((marker, index) => /* @__PURE__ */ jsx13(
             Marker,
             {
               marker,
@@ -1906,7 +2000,7 @@ var InteractiveGraphics = ({
             },
             index
           )),
-          contextMenu && /* @__PURE__ */ jsx12(
+          contextMenu && /* @__PURE__ */ jsx13(
             ContextMenu,
             {
               x: contextMenu.x,
@@ -1949,6 +2043,9 @@ function getGraphicsFilteredByStep(graphics, {
     lines: graphics.lines?.filter(
       (l) => l.step === void 0 || l.step === selectedStep
     ),
+    infiniteLines: graphics.infiniteLines?.filter(
+      (l) => l.step === void 0 || l.step === selectedStep
+    ),
     rects: graphics.rects?.filter(
       (r) => r.step === void 0 || r.step === selectedStep
     ),
@@ -1979,7 +2076,7 @@ function getGraphicsBoundsWithPadding(graphics) {
 }
 
 // site/components/InteractiveGraphicsCanvas.tsx
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function InteractiveGraphicsCanvas({
   graphics,
   showLabelsByDefault = true,
@@ -2087,11 +2184,11 @@ function InteractiveGraphicsCanvas({
   useEffect4(() => {
     drawCanvas();
   }, [transform, size, filteredGraphics, showGrid, showLabels]);
-  return /* @__PURE__ */ jsxs8("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
-    /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ jsxs8("label", { children: [
-          /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "10px" }, children: [
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "12px", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ jsxs9("label", { children: [
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "checkbox",
@@ -2104,7 +2201,7 @@ function InteractiveGraphicsCanvas({
           ),
           "Filter by step"
         ] }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "number",
@@ -2120,8 +2217,8 @@ function InteractiveGraphicsCanvas({
             style: { width: "60px" }
           }
         ),
-        /* @__PURE__ */ jsxs8("label", { children: [
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs9("label", { children: [
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "checkbox",
@@ -2136,8 +2233,8 @@ function InteractiveGraphicsCanvas({
           "Show last step"
         ] })
       ] }),
-      /* @__PURE__ */ jsx13("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs8("label", { children: [
-        /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: /* @__PURE__ */ jsxs9("label", { children: [
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "checkbox",
@@ -2151,7 +2248,7 @@ function InteractiveGraphicsCanvas({
         "Show labels"
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "div",
       {
         ref: (node) => {
@@ -2167,7 +2264,7 @@ function InteractiveGraphicsCanvas({
           border: "1px solid #ccc",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           "canvas",
           {
             ref: canvasRef,
@@ -2190,7 +2287,7 @@ import React2, { useRef as useRef5, 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 jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function TransformContainer({
   initialTransform,
   children,
@@ -2202,7 +2299,7 @@ function TransformContainer({
   useEffect5(() => {
     onTransformChange(transform);
   }, [transform, onTransformChange]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ref,
@@ -2338,7 +2435,7 @@ var CanvasGraphics = ({
   useEffect5(() => {
     setCurrentTransform(computedInitialTransform);
   }, [computedInitialTransform]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ref: containerRef,
@@ -2349,16 +2446,16 @@ var CanvasGraphics = ({
         border: "1px solid #eee",
         overflow: "hidden"
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         TransformContainer,
         {
           initialTransform: computedInitialTransform,
           onTransformChange: handleTransformChange,
-          children: /* @__PURE__ */ jsx14(
+          children: /* @__PURE__ */ jsx15(
             DimensionOverlay,
             {
               transform: currentTransform || computedInitialTransform,
-              children: /* @__PURE__ */ jsx14(
+              children: /* @__PURE__ */ jsx15(
                 "canvas",
                 {
                   ref: canvasRef,