graphics-debug 0.0.83 → 0.0.85

package/dist/lib/react.js

@@ -1,20 +1,25 @@
-import "../chunk-HU5LL4ZE.js";
-import "../chunk-GZRUE2GP.js";
-import "../chunk-MXOATGTD.js";
-import "../chunk-BQ3ZHEQO.js";
-import "../chunk-NYENUFOW.js";
+import "../chunk-5O6JHGHI.js";
+import "../chunk-OB4CGOL3.js";
+import "../chunk-PEHHGMS7.js";
+import "../chunk-K37Y2KHE.js";
+import "../chunk-7236NVI2.js";
 import {
   defaultColors,
   drawGraphicsToCanvas,
   getBounds
-} from "../chunk-PPB7D4OE.js";
+} from "../chunk-ME47RV6O.js";
 import "../chunk-NG6H63SM.js";
-import "../chunk-7NMLOZRC.js";
+import "../chunk-TBTTAU4R.js";
 import {
   getArrowBoundingBox,
-  getArrowGeometry
-} from "../chunk-IOVKI3ZO.js";
+  getArrowGeometry,
+  getInlineLabelLayout
+} from "../chunk-PCHDJSKZ.js";
 import "../chunk-ZGI74PYD.js";
+import {
+  clipInfiniteLineToBounds,
+  getViewportBoundsFromMatrix
+} from "../chunk-FLFF6QXL.js";
 
 // site/components/InteractiveGraphics/InteractiveGraphics.tsx
 import useResizeObserver from "@react-hook/resize-observer";
@@ -93,6 +98,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 +107,7 @@ function getMaxStep(graphics) {
   return Math.max(
     maxPointStep,
     maxLineStep,
+    maxInfiniteLineStep,
     maxRectStep,
     maxPolygonStep,
     maxCircleStep,
@@ -114,7 +121,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,
@@ -488,19 +495,8 @@ var DimensionOverlay = ({ children, transform }) => {
 };
 
 // site/components/InteractiveGraphics/Arrow.tsx
-import { applyToPoint as applyToPoint2 } from "transformation-matrix";
 import { useMemo as useMemo2, useState as useState2 } from "react";
 
-// site/utils/safeLighten.ts
-import { lighten } from "polished";
-var safeLighten = (amount, color) => {
-  try {
-    return lighten(amount, color);
-  } catch (e) {
-    return color;
-  }
-};
-
 // site/utils/distToLineSegment.ts
 var distToLineSegment = (px, py, x1, y1, x2, y2) => {
   const A = px - x1;
@@ -528,7 +524,18 @@ var distToLineSegment = (px, py, x1, y1, x2, y2) => {
   return Math.sqrt(dx * dx + dy * dy);
 };
 
+// site/utils/safeLighten.ts
+import { lighten } from "polished";
+var safeLighten = (amount, color) => {
+  try {
+    return lighten(amount, color);
+  } catch (e) {
+    return color;
+  }
+};
+
 // site/components/InteractiveGraphics/Arrow.tsx
+import { applyToPoint as applyToPoint2 } from "transformation-matrix";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Arrow = ({
   arrow,
@@ -551,6 +558,27 @@ var Arrow = ({
     };
   }, [geometry, realToScreen]);
   const scaleFactor = Math.abs(realToScreen.a);
+  const fontSize = 12;
+  const strokeWidth = geometry.shaftWidth * (scaleFactor || 1);
+  const alongSeparation = fontSize * 0.6;
+  const inlineLabelLayout = useMemo2(
+    () => getInlineLabelLayout(screenPoints.shaftStart, screenPoints.shaftEnd, {
+      fontSize,
+      strokeWidth,
+      normalPadding: 6,
+      alongOffset: arrow.label ? alongSeparation : 0
+    }),
+    [screenPoints, fontSize, strokeWidth, arrow.label, alongSeparation]
+  );
+  const labelLayout = useMemo2(
+    () => getInlineLabelLayout(screenPoints.shaftStart, screenPoints.shaftEnd, {
+      fontSize,
+      strokeWidth,
+      normalPadding: 12,
+      alongOffset: arrow.inlineLabel ? -alongSeparation : 0
+    }),
+    [screenPoints, fontSize, strokeWidth, arrow.inlineLabel, alongSeparation]
+  );
   const baseColor = arrow.color || defaultColors[index % defaultColors.length] || "black";
   const displayColor = isHovered ? safeLighten(0.2, baseColor) : baseColor;
   const handleMouseMove = (e) => {
@@ -605,7 +633,7 @@ var Arrow = ({
             x2: screenPoints.shaftEnd.x,
             y2: screenPoints.shaftEnd.y,
             stroke: displayColor,
-            strokeWidth: geometry.shaftWidth * (scaleFactor || 1),
+            strokeWidth,
             strokeLinecap: "round",
             pointerEvents: "stroke"
           }
@@ -617,7 +645,36 @@ var Arrow = ({
             fill: displayColor
           },
           headIndex
-        ))
+        )),
+        arrow.label && /* @__PURE__ */ jsx2(
+          "text",
+          {
+            x: labelLayout.x,
+            y: labelLayout.y,
+            fill: displayColor,
+            fontSize,
+            fontFamily: "sans-serif",
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            pointerEvents: "none",
+            children: arrow.label
+          }
+        ),
+        arrow.inlineLabel && /* @__PURE__ */ jsx2(
+          "text",
+          {
+            x: inlineLabelLayout.x,
+            y: inlineLabelLayout.y,
+            fill: displayColor,
+            fontSize,
+            fontFamily: "sans-serif",
+            textAnchor: "middle",
+            dominantBaseline: "central",
+            transform: `rotate(${inlineLabelLayout.angleDegrees} ${inlineLabelLayout.x} ${inlineLabelLayout.y})`,
+            pointerEvents: "none",
+            children: arrow.inlineLabel
+          }
+        )
       ]
     }
   );
@@ -828,10 +885,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 +977,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 +1021,7 @@ var Line = ({
     setIsHovered(isNearLine);
   };
   const baseColor = strokeColor ?? defaultColors[index % defaultColors.length];
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "svg",
     {
       ref: svgRef,
@@ -906,7 +1034,7 @@ var Line = ({
         pointerEvents: "none"
       },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "polyline",
           {
             points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
@@ -924,7 +1052,7 @@ var Line = ({
             }) : void 0
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "polyline",
           {
             points: localPoints.map((p) => `${p.x},${p.y}`).join(" "),
@@ -936,14 +1064,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 +1080,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 +1094,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 +1104,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 +1122,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 +1148,7 @@ var Point = ({
         index,
         object: point
       }),
-      children: isHovered && /* @__PURE__ */ jsx8(
+      children: isHovered && /* @__PURE__ */ jsx9(
         "div",
         {
           style: {
@@ -1030,7 +1158,7 @@ var Point = ({
             transform: "translateX(-50%)",
             marginBottom: 8
           },
-          children: /* @__PURE__ */ jsx8(
+          children: /* @__PURE__ */ jsx9(
             Tooltip,
             {
               text: `${label ? `${label}
@@ -1045,8 +1173,8 @@ 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,
@@ -1056,7 +1184,7 @@ var 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);
@@ -1079,7 +1207,7 @@ var Polygon = ({
   const displayFill = isHovered ? safeLighten(0.2, baseFill) : baseFill;
   const displayStroke = baseStroke ? isHovered ? safeLighten(0.2, baseStroke) : baseStroke : void 0;
   const screenStrokeWidth = strokeWidth === void 0 ? void 0 : strokeWidth * realToScreen.a;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       style: {
@@ -1091,7 +1219,7 @@ 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(" "),
@@ -1108,7 +1236,7 @@ var Polygon = ({
             })
           }
         ) }),
-        isHovered && polygon.label && /* @__PURE__ */ jsx9(
+        isHovered && polygon.label && /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1119,7 +1247,7 @@ var Polygon = ({
               marginBottom: 8,
               pointerEvents: "none"
             },
-            children: /* @__PURE__ */ jsx9(Tooltip, { text: polygon.label })
+            children: /* @__PURE__ */ jsx10(Tooltip, { text: polygon.label })
           }
         )
       ]
@@ -1128,9 +1256,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,
@@ -1140,7 +1268,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;
@@ -1149,7 +1277,7 @@ var Rect = ({
     backgroundColor = safeLighten(0.2, backgroundColor);
     stroke = safeLighten(0.2, stroke);
   }
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       style: {
@@ -1170,7 +1298,7 @@ var Rect = ({
         index,
         object: rect
       }),
-      children: isHovered && rect.label && /* @__PURE__ */ jsx10(
+      children: isHovered && rect.label && /* @__PURE__ */ jsx11(
         "div",
         {
           style: {
@@ -1180,7 +1308,7 @@ var Rect = ({
             transform: "translateX(-50%)",
             marginBottom: 8
           },
-          children: /* @__PURE__ */ jsx10(Tooltip, { text: rect.label })
+          children: /* @__PURE__ */ jsx11(Tooltip, { text: rect.label })
         }
       )
     }
@@ -1188,8 +1316,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,
@@ -1197,7 +1325,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%)",
@@ -1210,7 +1338,7 @@ var Text = ({
     bottom_right: "translate(-100%, -100%)"
   };
   const transform = transformMap[anchorSide ?? "center"];
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       style: {
@@ -1230,18 +1358,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;
@@ -1271,7 +1399,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]);
@@ -1349,7 +1477,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,
@@ -1363,7 +1491,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;
@@ -1459,7 +1587,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,
@@ -1475,6 +1603,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) ?? [],
@@ -1623,7 +1752,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
         ]);
@@ -1708,6 +1837,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]
@@ -1732,11 +1865,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] : "",
@@ -1746,18 +1879,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",
@@ -1772,8 +1905,8 @@ var InteractiveGraphics = ({
                 disabled: activeStep === null
               }
             ),
-            /* @__PURE__ */ jsxs7("label", { children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs8("label", { children: [
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   type: "checkbox",
@@ -1787,8 +1920,8 @@ var InteractiveGraphics = ({
               ),
               "Filter by step"
             ] }),
-            /* @__PURE__ */ jsxs7("label", { children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs8("label", { children: [
+              /* @__PURE__ */ jsx13(
                 "input",
                 {
                   type: "checkbox",
@@ -1802,7 +1935,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:",
@@ -1814,7 +1947,7 @@ var InteractiveGraphics = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       "div",
       {
         ref,
@@ -1825,8 +1958,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,
@@ -1835,7 +1968,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,
@@ -1844,7 +1987,7 @@ var InteractiveGraphics = ({
               },
               line.originalIndex
             )),
-            filteredRects.map((rect) => /* @__PURE__ */ jsx12(
+            filteredRects.map((rect) => /* @__PURE__ */ jsx13(
               Rect,
               {
                 rect,
@@ -1853,7 +1996,7 @@ var InteractiveGraphics = ({
               },
               rect.originalIndex
             )),
-            filteredPolygons.map((polygon) => /* @__PURE__ */ jsx12(
+            filteredPolygons.map((polygon) => /* @__PURE__ */ jsx13(
               Polygon,
               {
                 polygon,
@@ -1862,7 +2005,7 @@ var InteractiveGraphics = ({
               },
               polygon.originalIndex
             )),
-            filteredPoints.map((point) => /* @__PURE__ */ jsx12(
+            filteredPoints.map((point) => /* @__PURE__ */ jsx13(
               Point,
               {
                 point,
@@ -1871,7 +2014,7 @@ var InteractiveGraphics = ({
               },
               point.originalIndex
             )),
-            filteredCircles.map((circle) => /* @__PURE__ */ jsx12(
+            filteredCircles.map((circle) => /* @__PURE__ */ jsx13(
               Circle,
               {
                 circle,
@@ -1880,7 +2023,7 @@ var InteractiveGraphics = ({
               },
               circle.originalIndex
             )),
-            filteredTexts.map((txt) => /* @__PURE__ */ jsx12(
+            filteredTexts.map((txt) => /* @__PURE__ */ jsx13(
               Text,
               {
                 textObj: txt,
@@ -1889,7 +2032,7 @@ var InteractiveGraphics = ({
               },
               txt.originalIndex
             )),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx13(
               SuperGrid,
               {
                 stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,
@@ -1899,7 +2042,7 @@ var InteractiveGraphics = ({
               }
             )
           ] }),
-          markers.map((marker, index) => /* @__PURE__ */ jsx12(
+          markers.map((marker, index) => /* @__PURE__ */ jsx13(
             Marker,
             {
               marker,
@@ -1908,7 +2051,7 @@ var InteractiveGraphics = ({
             },
             index
           )),
-          contextMenu && /* @__PURE__ */ jsx12(
+          contextMenu && /* @__PURE__ */ jsx13(
             ContextMenu,
             {
               x: contextMenu.x,
@@ -1951,6 +2094,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
     ),
@@ -1981,7 +2127,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,
@@ -2089,11 +2235,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",
@@ -2106,7 +2252,7 @@ function InteractiveGraphicsCanvas({
           ),
           "Filter by step"
         ] }),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "input",
           {
             type: "number",
@@ -2122,8 +2268,8 @@ function InteractiveGraphicsCanvas({
             style: { width: "60px" }
           }
         ),
-        /* @__PURE__ */ jsxs8("label", { children: [
-          /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsxs9("label", { children: [
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "checkbox",
@@ -2138,8 +2284,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",
@@ -2153,7 +2299,7 @@ function InteractiveGraphicsCanvas({
         "Show labels"
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "div",
       {
         ref: (node) => {
@@ -2169,7 +2315,7 @@ function InteractiveGraphicsCanvas({
           border: "1px solid #ccc",
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsx13(
+        children: /* @__PURE__ */ jsx14(
           "canvas",
           {
             ref: canvasRef,
@@ -2192,7 +2338,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,
@@ -2204,7 +2350,7 @@ function TransformContainer({
   useEffect5(() => {
     onTransformChange(transform);
   }, [transform, onTransformChange]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ref,
@@ -2340,7 +2486,7 @@ var CanvasGraphics = ({
   useEffect5(() => {
     setCurrentTransform(computedInitialTransform);
   }, [computedInitialTransform]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       ref: containerRef,
@@ -2351,16 +2497,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,