graphics-debug 0.0.6 → 0.0.8

package/dist/cli/cli.js

@@ -10,7 +10,6 @@ import "../chunk-5FZF67ET.js";
 
 // cli/cli.ts
 import { parseArgs } from "node:util";
-import "node:fs";
 import { writeFileSync } from "node:fs";
 async function getInput() {
   if (process.stdin.isTTY && process.stderr.isTTY) {

package/dist/cli/cli.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { parseArgs } from \"node:util\"\nimport { readFileSync } from \"node:fs\"\nimport { writeFileSync } from \"node:fs\"\nimport {\n  getSvgsFromLogString,\n  getHtmlFromLogString,\n  getGraphicsObjectsFromLogString,\n} from \"../lib\"\n\nasync function getInput(): Promise<string> {\n  // Check if there's data being piped in\n  if (process.stdin.isTTY && process.stderr.isTTY) {\n    console.error(\n      \"Error: No input provided. Pipe in content with graphics objects.\",\n    )\n    process.exit(1)\n  }\n\n  const chunks = []\n\n  // Read from stdin if available\n  if (!process.stdin.isTTY) {\n    for await (const chunk of process.stdin) {\n      chunks.push(chunk)\n    }\n  }\n\n  return chunks.join(\"\")\n}\n\nasync function main() {\n  const { values } = parseArgs({\n    options: {\n      html: { type: \"boolean\" },\n      url: { type: \"boolean\" },\n      help: { type: \"boolean\" },\n    },\n  })\n\n  if (values.help) {\n    console.log(`\nUsage: graphics-debug [options]\n\nOptions:\n  --html    Output a single HTML file with all graphics\n  --url     Print a url to view the graphics in a browser\n  --help    Show this help message\n\nExamples:\n  cat debug.log | graphics-debug\n  echo '{ graphics: { points: [{x: 0, y: 0}] } }' | graphics-debug --html\n    `)\n    process.exit(0)\n  }\n\n  const input = await getInput()\n\n  if (values.html) {\n    const html = getHtmlFromLogString(input)\n    writeFileSync(\"graphicsdebug.debug.html\", html)\n    console.log('Wrote to \"graphicsdebug.debug.html\"')\n  } else if (values.url) {\n    const graphicsObjects = getGraphicsObjectsFromLogString(input)\n    if (graphicsObjects.length === 0) {\n      console.error(\"No graphics objects found in input\")\n      process.exit(0)\n    }\n\n    const { url } = await fetch(\"https://gdstore.seve.workers.dev/store\", {\n      method: \"POST\",\n      body: JSON.stringify({\n        graphicsObjects: getGraphicsObjectsFromLogString(input),\n      }),\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n    }).then((res) => res.json())\n\n    const token = url.split(\"/get/\").pop()\n\n    console.log(`https://graphicsdebug.com/t/${token}`)\n  } else {\n    const svgs = getSvgsFromLogString(input)\n    svgs.forEach((svg, i) => {\n      const filename = `${svg.title.toLowerCase().replace(/\\s+/g, \"-\")}-${i + 1}.debug.svg`\n      writeFileSync(filename, svg.svg)\n      console.log(`Wrote to \"${filename}\"`)\n    })\n  }\n}\n\nmain().catch((err) => {\n  console.error(\"Error:\", err)\n  process.exit(1)\n})\n"],"mappings":";;;;;;;;;;;AACA,SAAS,iBAAiB;AAC1B,OAA6B;AAC7B,SAAS,qBAAqB;AAO9B,eAAe,WAA4B;AAEzC,MAAI,QAAQ,MAAM,SAAS,QAAQ,OAAO,OAAO;AAC/C,YAAQ;AAAA,MACN;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,SAAS,CAAC;AAGhB,MAAI,CAAC,QAAQ,MAAM,OAAO;AACxB,qBAAiB,SAAS,QAAQ,OAAO;AACvC,aAAO,KAAK,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,OAAO,KAAK,EAAE;AACvB;AAEA,eAAe,OAAO;AACpB,QAAM,EAAE,OAAO,IAAI,UAAU;AAAA,IAC3B,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,UAAU;AAAA,MACxB,KAAK,EAAE,MAAM,UAAU;AAAA,MACvB,MAAM,EAAE,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,MAAI,OAAO,MAAM;AACf,YAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWX;AACD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,QAAQ,MAAM,SAAS;AAE7B,MAAI,OAAO,MAAM;AACf,UAAM,OAAO,qBAAqB,KAAK;AACvC,kBAAc,4BAA4B,IAAI;AAC9C,YAAQ,IAAI,qCAAqC;AAAA,EACnD,WAAW,OAAO,KAAK;AACrB,UAAM,kBAAkB,gCAAgC,KAAK;AAC7D,QAAI,gBAAgB,WAAW,GAAG;AAChC,cAAQ,MAAM,oCAAoC;AAClD,cAAQ,KAAK,CAAC;AAAA,IAChB;AAEA,UAAM,EAAE,IAAI,IAAI,MAAM,MAAM,0CAA0C;AAAA,MACpE,QAAQ;AAAA,MACR,MAAM,KAAK,UAAU;AAAA,QACnB,iBAAiB,gCAAgC,KAAK;AAAA,MACxD,CAAC;AAAA,MACD,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,IACF,CAAC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAE3B,UAAM,QAAQ,IAAI,MAAM,OAAO,EAAE,IAAI;AAErC,YAAQ,IAAI,+BAA+B,KAAK,EAAE;AAAA,EACpD,OAAO;AACL,UAAM,OAAO,qBAAqB,KAAK;AACvC,SAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,YAAM,WAAW,GAAG,IAAI,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC;AACzE,oBAAc,UAAU,IAAI,GAAG;AAC/B,cAAQ,IAAI,aAAa,QAAQ,GAAG;AAAA,IACtC,CAAC;AAAA,EACH;AACF;AAEA,KAAK,EAAE,MAAM,CAAC,QAAQ;AACpB,UAAQ,MAAM,UAAU,GAAG;AAC3B,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":[]}
+{"version":3,"sources":["../../cli/cli.ts"],"sourcesContent":["#!/usr/bin/env node\nimport { parseArgs } from \"node:util\"\nimport { readFileSync } from \"node:fs\"\nimport { writeFileSync } from \"node:fs\"\nimport {\n  getSvgsFromLogString,\n  getHtmlFromLogString,\n  getGraphicsObjectsFromLogString,\n} from \"../lib\"\n\nasync function getInput(): Promise<string> {\n  // Check if there's data being piped in\n  if (process.stdin.isTTY && process.stderr.isTTY) {\n    console.error(\n      \"Error: No input provided. Pipe in content with graphics objects.\",\n    )\n    process.exit(1)\n  }\n\n  const chunks = []\n\n  // Read from stdin if available\n  if (!process.stdin.isTTY) {\n    for await (const chunk of process.stdin) {\n      chunks.push(chunk)\n    }\n  }\n\n  return chunks.join(\"\")\n}\n\nasync function main() {\n  const { values } = parseArgs({\n    options: {\n      html: { type: \"boolean\" },\n      url: { type: \"boolean\" },\n      help: { type: \"boolean\" },\n    },\n  })\n\n  if (values.help) {\n    console.log(`\nUsage: graphics-debug [options]\n\nOptions:\n  --html    Output a single HTML file with all graphics\n  --url     Print a url to view the graphics in a browser\n  --help    Show this help message\n\nExamples:\n  cat debug.log | graphics-debug\n  echo '{ graphics: { points: [{x: 0, y: 0}] } }' | graphics-debug --html\n    `)\n    process.exit(0)\n  }\n\n  const input = await getInput()\n\n  if (values.html) {\n    const html = getHtmlFromLogString(input)\n    writeFileSync(\"graphicsdebug.debug.html\", html)\n    console.log('Wrote to \"graphicsdebug.debug.html\"')\n  } else if (values.url) {\n    const graphicsObjects = getGraphicsObjectsFromLogString(input)\n    if (graphicsObjects.length === 0) {\n      console.error(\"No graphics objects found in input\")\n      process.exit(0)\n    }\n\n    const { url } = await fetch(\"https://gdstore.seve.workers.dev/store\", {\n      method: \"POST\",\n      body: JSON.stringify({\n        graphicsObjects: getGraphicsObjectsFromLogString(input),\n      }),\n      headers: {\n        \"Content-Type\": \"application/json\",\n      },\n    }).then((res) => res.json())\n\n    const token = url.split(\"/get/\").pop()\n\n    console.log(`https://graphicsdebug.com/t/${token}`)\n  } else {\n    const svgs = getSvgsFromLogString(input)\n    svgs.forEach((svg, i) => {\n      const filename = `${svg.title.toLowerCase().replace(/\\s+/g, \"-\")}-${i + 1}.debug.svg`\n      writeFileSync(filename, svg.svg)\n      console.log(`Wrote to \"${filename}\"`)\n    })\n  }\n}\n\nmain().catch((err) => {\n  console.error(\"Error:\", err)\n  process.exit(1)\n})\n"],"mappings":";;;;;;;;;;;AACA,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAO9B,eAAe,WAA4B;AAEzC,MAAI,QAAQ,MAAM,SAAS,QAAQ,OAAO,OAAO;AAC/C,YAAQ;AAAA,MACN;AAAA,IACF;AACA,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,SAAS,CAAC;AAGhB,MAAI,CAAC,QAAQ,MAAM,OAAO;AACxB,qBAAiB,SAAS,QAAQ,OAAO;AACvC,aAAO,KAAK,KAAK;AAAA,IACnB;AAAA,EACF;AAEA,SAAO,OAAO,KAAK,EAAE;AACvB;AAEA,eAAe,OAAO;AACpB,QAAM,EAAE,OAAO,IAAI,UAAU;AAAA,IAC3B,SAAS;AAAA,MACP,MAAM,EAAE,MAAM,UAAU;AAAA,MACxB,KAAK,EAAE,MAAM,UAAU;AAAA,MACvB,MAAM,EAAE,MAAM,UAAU;AAAA,IAC1B;AAAA,EACF,CAAC;AAED,MAAI,OAAO,MAAM;AACf,YAAQ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAWX;AACD,YAAQ,KAAK,CAAC;AAAA,EAChB;AAEA,QAAM,QAAQ,MAAM,SAAS;AAE7B,MAAI,OAAO,MAAM;AACf,UAAM,OAAO,qBAAqB,KAAK;AACvC,kBAAc,4BAA4B,IAAI;AAC9C,YAAQ,IAAI,qCAAqC;AAAA,EACnD,WAAW,OAAO,KAAK;AACrB,UAAM,kBAAkB,gCAAgC,KAAK;AAC7D,QAAI,gBAAgB,WAAW,GAAG;AAChC,cAAQ,MAAM,oCAAoC;AAClD,cAAQ,KAAK,CAAC;AAAA,IAChB;AAEA,UAAM,EAAE,IAAI,IAAI,MAAM,MAAM,0CAA0C;AAAA,MACpE,QAAQ;AAAA,MACR,MAAM,KAAK,UAAU;AAAA,QACnB,iBAAiB,gCAAgC,KAAK;AAAA,MACxD,CAAC;AAAA,MACD,SAAS;AAAA,QACP,gBAAgB;AAAA,MAClB;AAAA,IACF,CAAC,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC;AAE3B,UAAM,QAAQ,IAAI,MAAM,OAAO,EAAE,IAAI;AAErC,YAAQ,IAAI,+BAA+B,KAAK,EAAE;AAAA,EACpD,OAAO;AACL,UAAM,OAAO,qBAAqB,KAAK;AACvC,SAAK,QAAQ,CAAC,KAAK,MAAM;AACvB,YAAM,WAAW,GAAG,IAAI,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC;AACzE,oBAAc,UAAU,IAAI,GAAG;AAC/B,cAAQ,IAAI,aAAa,QAAQ,GAAG;AAAA,IACtC,CAAC;AAAA,EACH;AACF;AAEA,KAAK,EAAE,MAAM,CAAC,QAAQ;AACpB,UAAQ,MAAM,UAAU,GAAG;AAC3B,UAAQ,KAAK,CAAC;AAChB,CAAC;","names":[]}

package/dist/lib/react.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { GraphicsObject } from './types.js';
+
+declare const InteractiveGraphics: ({ graphics, }: {
+    graphics: GraphicsObject;
+}) => react_jsx_runtime.JSX.Element;
+
+export { InteractiveGraphics };

package/dist/lib/react.js

@@ -0,0 +1,508 @@
+// site/components/InteractiveGraphics/InteractiveGraphics.tsx
+import {
+  compose,
+  scale,
+  translate
+} from "transformation-matrix";
+import { useMemo, useState as useState4 } from "react";
+import useMouseMatrixTransform from "use-mouse-matrix-transform";
+import { SuperGrid } from "react-supergrid";
+import useResizeObserver from "@react-hook/resize-observer";
+
+// site/components/InteractiveGraphics/Line.tsx
+import { applyToPoint } from "transformation-matrix";
+import { lighten } from "polished";
+import { useState } from "react";
+
+// site/components/InteractiveGraphics/Tooltip.tsx
+import { jsx } from "react/jsx-runtime";
+var Tooltip = ({ text }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        background: "white",
+        border: "1px solid #ccc",
+        boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
+        borderRadius: "4px",
+        padding: "4px 8px",
+        fontSize: "12px",
+        minWidth: "150px",
+        maxWidth: "300px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "pre-wrap"
+      },
+      children: text
+    }
+  );
+};
+
+// site/utils/distToLineSegment.ts
+var distToLineSegment = (px, py, x1, y1, x2, y2) => {
+  const A = px - x1;
+  const B = py - y1;
+  const C = x2 - x1;
+  const D = y2 - y1;
+  const dot = A * C + B * D;
+  const lenSq = C * C + D * D;
+  let param = -1;
+  if (lenSq !== 0) param = dot / lenSq;
+  let xx = 0;
+  let yy = 0;
+  if (param < 0) {
+    xx = x1;
+    yy = y1;
+  } else if (param > 1) {
+    xx = x2;
+    yy = y2;
+  } else {
+    xx = x1 + param * C;
+    yy = y1 + param * D;
+  }
+  const dx = px - xx;
+  const dy = py - yy;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+
+// site/components/InteractiveGraphics/defaultColors.ts
+var defaultColors = [
+  "rgba(239, 68, 68, 0.8)",
+  // red-300
+  "rgba(249, 115, 22, 0.8)",
+  // orange-300
+  "rgba(245, 158, 11, 0.8)",
+  // amber-300
+  "rgba(234, 179, 8, 0.8)",
+  // yellow-300
+  "rgba(132, 204, 22, 0.8)",
+  // lime-300
+  "rgba(34, 197, 94, 0.8)",
+  // green-300
+  "rgba(16, 185, 129, 0.8)",
+  // emerald-300
+  "rgba(20, 184, 166, 0.8)",
+  // teal-300
+  "rgba(6, 182, 212, 0.8)",
+  // cyan-300
+  "rgba(14, 165, 233, 0.8)",
+  // sky-300
+  "rgba(59, 130, 246, 0.8)",
+  // blue-300
+  "rgba(99, 102, 241, 0.8)",
+  // indigo-300
+  "rgba(139, 92, 246, 0.8)",
+  // violet-300
+  "rgba(168, 85, 247, 0.8)",
+  // purple-300
+  "rgba(217, 70, 239, 0.8)",
+  // fuchsia-300
+  "rgba(236, 72, 153, 0.8)",
+  // pink-300
+  "rgba(249, 168, 212, 0.8)",
+  // rose-300
+  "rgba(161, 161, 170, 0.8)"
+  // zinc-300
+];
+
+// site/components/InteractiveGraphics/Line.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Line = ({
+  line,
+  index,
+  interactiveState
+}) => {
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const {
+    points,
+    layer,
+    step,
+    strokeColor,
+    strokeWidth = 1 / realToScreen.a
+  } = line;
+  const [isHovered, setIsHovered] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const screenPoints = points.map((p) => applyToPoint(realToScreen, p));
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const hoverThreshold = 10;
+    setMousePos({ x: mouseX, y: mouseY });
+    let isNearLine = false;
+    for (let i = 0; i < screenPoints.length - 1; i++) {
+      const dist = distToLineSegment(
+        mouseX,
+        mouseY,
+        screenPoints[i].x,
+        screenPoints[i].y,
+        screenPoints[i + 1].x,
+        screenPoints[i + 1].y
+      );
+      if (dist < hoverThreshold) {
+        isNearLine = true;
+        break;
+      }
+    }
+    setIsHovered(isNearLine);
+  };
+  const baseColor = strokeColor ?? defaultColors[index % defaultColors.length];
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      onMouseMove: handleMouseMove,
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsx2(
+          "polyline",
+          {
+            points: screenPoints.map((p) => `${p.x},${p.y}`).join(" "),
+            stroke: isHovered ? lighten(0.2, baseColor) : baseColor,
+            strokeWidth: strokeWidth * realToScreen.a
+          }
+        ),
+        isHovered && line.label && /* @__PURE__ */ jsx2(
+          "foreignObject",
+          {
+            x: mousePos.x,
+            y: mousePos.y - 40,
+            width: 300,
+            height: 40,
+            children: /* @__PURE__ */ jsx2(Tooltip, { text: line.label })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// site/components/InteractiveGraphics/Point.tsx
+import { applyToPoint as applyToPoint2 } from "transformation-matrix";
+import { lighten as lighten2 } from "polished";
+import { useState as useState2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Point = ({
+  point,
+  interactiveState,
+  index
+}) => {
+  const { color, label, layer, step } = point;
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const [isHovered, setIsHovered] = useState2(false);
+  const screenPoint = applyToPoint2(realToScreen, point);
+  const size = 10;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: screenPoint.x - size / 2,
+        top: screenPoint.y - size / 2,
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        border: `2px solid ${isHovered ? lighten2(0.2, color ?? defaultColors[index % defaultColors.length]) : color ?? defaultColors[index % defaultColors.length]}`,
+        cursor: "pointer",
+        transition: "border-color 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: isHovered && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginBottom: 8
+          },
+          children: /* @__PURE__ */ jsx3(
+            Tooltip,
+            {
+              text: `${label ? `${label}
+` : ""}x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`
+            }
+          )
+        }
+      )
+    }
+  );
+};
+
+// site/components/InteractiveGraphics/Rect.tsx
+import { applyToPoint as applyToPoint3 } from "transformation-matrix";
+import { lighten as lighten3 } from "polished";
+import { useState as useState3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Rect = ({
+  rect,
+  interactiveState,
+  index
+}) => {
+  const defaultColor = defaultColors[index % defaultColors.length];
+  const { center, width, height, fill, stroke, layer, step } = rect;
+  const { activeLayers, activeStep, realToScreen } = interactiveState;
+  const [isHovered, setIsHovered] = useState3(false);
+  const screenCenter = applyToPoint3(realToScreen, center);
+  const screenWidth = width * realToScreen.a;
+  const screenHeight = height * Math.abs(realToScreen.d);
+  const hasStrokeOrFill = fill !== void 0 || stroke !== void 0;
+  let backgroundColor = hasStrokeOrFill ? fill || "transparent" : defaultColor;
+  if (isHovered) {
+    backgroundColor = lighten3(0.2, backgroundColor);
+  }
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: screenCenter.x - screenWidth / 2,
+        top: screenCenter.y - screenHeight / 2,
+        width: screenWidth,
+        height: screenHeight,
+        backgroundColor,
+        border: stroke ? `2px solid ${isHovered ? lighten3(0.2, stroke) : stroke}` : "none",
+        cursor: "pointer",
+        transition: "border-color 0.2s"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: isHovered && rect.label && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginBottom: 8
+          },
+          children: /* @__PURE__ */ jsx4(Tooltip, { text: rect.label })
+        }
+      )
+    }
+  );
+};
+
+// site/utils/getGraphicsBounds.ts
+var getGraphicsBounds = (graphics) => {
+  const bounds = {
+    minX: Infinity,
+    minY: Infinity,
+    maxX: -Infinity,
+    maxY: -Infinity
+  };
+  for (const line of graphics.lines ?? []) {
+    for (const point of line.points ?? []) {
+      bounds.minX = Math.min(bounds.minX, point.x);
+      bounds.minY = Math.min(bounds.minY, point.y);
+      bounds.maxX = Math.max(bounds.maxX, point.x);
+      bounds.maxY = Math.max(bounds.maxY, point.y);
+    }
+  }
+  for (const rect of graphics.rects ?? []) {
+    const { center, width, height } = rect;
+    const halfWidth = width / 2;
+    const halfHeight = height / 2;
+    bounds.minX = Math.min(bounds.minX, center.x - halfWidth);
+    bounds.minY = Math.min(bounds.minY, center.y - halfHeight);
+    bounds.maxX = Math.max(bounds.maxX, center.x + halfWidth);
+    bounds.maxY = Math.max(bounds.maxY, center.y + halfHeight);
+  }
+  for (const point of graphics.points ?? []) {
+    bounds.minX = Math.min(bounds.minX, point.x);
+    bounds.minY = Math.min(bounds.minY, point.y);
+    bounds.maxX = Math.max(bounds.maxX, point.x);
+    bounds.maxY = Math.max(bounds.maxY, point.y);
+  }
+  return bounds;
+};
+
+// site/components/InteractiveGraphics/InteractiveGraphics.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var InteractiveGraphics = ({
+  graphics
+}) => {
+  const [activeLayers, setActiveLayers] = useState4(null);
+  const [activeStep, setActiveStep] = useState4(null);
+  const [size, setSize] = useState4({ width: 600, height: 600 });
+  const availableLayers = Array.from(
+    /* @__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) ?? []
+    ])
+  );
+  const maxStep = Math.max(
+    0,
+    ...graphics.lines?.map((l) => l.step).filter(Boolean) ?? [],
+    ...graphics.rects?.map((r) => r.step).filter(Boolean) ?? [],
+    ...graphics.points?.map((p) => p.step).filter(Boolean) ?? []
+  );
+  const graphicsBoundsWithPadding = useMemo(() => {
+    const actualBounds = getGraphicsBounds(graphics);
+    const width = actualBounds.maxX - actualBounds.minX;
+    const height = actualBounds.maxY - actualBounds.minY;
+    return {
+      minX: actualBounds.minX - width / 10,
+      minY: actualBounds.minY - height / 10,
+      maxX: actualBounds.maxX + width / 10,
+      maxY: actualBounds.maxY + height / 10
+    };
+  }, [graphics]);
+  const { transform: realToScreen, ref } = useMouseMatrixTransform({
+    initialTransform: compose(
+      translate(size.width / 2, size.height / 2),
+      scale(
+        Math.min(
+          size.width / (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),
+          size.height / (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY)
+        ),
+        -Math.min(
+          size.width / (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),
+          size.height / (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY)
+        )
+      ),
+      translate(
+        -(graphicsBoundsWithPadding.maxX + graphicsBoundsWithPadding.minX) / 2,
+        -(graphicsBoundsWithPadding.maxY + graphicsBoundsWithPadding.minY) / 2
+      )
+    )
+  });
+  useResizeObserver(ref, (entry) => {
+    setSize({
+      width: entry.contentRect.width,
+      height: entry.contentRect.height
+    });
+  });
+  const interactiveState = {
+    activeLayers,
+    activeStep,
+    realToScreen
+  };
+  const showToolbar = availableLayers.length > 1 || maxStep > 0;
+  const filterLayerAndStep = (obj) => {
+    if (activeLayers && obj.layer && !activeLayers.includes(obj.layer))
+      return false;
+    if (activeStep !== null && obj.step !== void 0 && obj.step !== activeStep)
+      return false;
+    return true;
+  };
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    showToolbar && /* @__PURE__ */ jsxs2("div", { style: { margin: 8 }, children: [
+      availableLayers.length > 1 && /* @__PURE__ */ jsxs2(
+        "select",
+        {
+          value: activeLayers ? activeLayers[0] : "",
+          onChange: (e) => {
+            const value = e.target.value;
+            setActiveLayers(value === "" ? null : [value]);
+          },
+          style: { marginRight: 8 },
+          children: [
+            /* @__PURE__ */ jsx5("option", { value: "", children: "All Layers" }),
+            availableLayers.map((layer) => /* @__PURE__ */ jsx5("option", { value: layer, children: layer }, layer))
+          ]
+        }
+      ),
+      maxStep > 0 && /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: { display: "inline-flex", alignItems: "center", gap: 8 },
+          children: [
+            "Step:",
+            /* @__PURE__ */ jsx5(
+              "input",
+              {
+                type: "number",
+                min: 0,
+                max: maxStep,
+                value: activeStep ?? 0,
+                onChange: (e) => {
+                  const value = parseInt(e.target.value);
+                  setActiveStep(Number.isNaN(value) ? null : value);
+                },
+                disabled: activeStep === null
+              }
+            ),
+            /* @__PURE__ */ jsxs2("label", { children: [
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "checkbox",
+                  style: { marginRight: 4 },
+                  checked: activeStep !== null,
+                  onChange: (e) => {
+                    setActiveStep(e.target.checked ? 0 : null);
+                  }
+                }
+              ),
+              "Filter by step"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref,
+        style: {
+          position: "relative",
+          height: 600,
+          overflow: "hidden"
+        },
+        children: [
+          graphics.lines?.filter(filterLayerAndStep)?.map((l, i) => /* @__PURE__ */ jsx5(
+            Line,
+            {
+              line: l,
+              index: i,
+              interactiveState
+            },
+            i
+          )),
+          graphics.rects?.filter(filterLayerAndStep)?.map((r, i) => /* @__PURE__ */ jsx5(
+            Rect,
+            {
+              rect: r,
+              index: i,
+              interactiveState
+            },
+            i
+          )),
+          graphics.points?.filter(filterLayerAndStep)?.map((p, i) => /* @__PURE__ */ jsx5(
+            Point,
+            {
+              point: p,
+              index: i,
+              interactiveState
+            },
+            i
+          )),
+          /* @__PURE__ */ jsx5(
+            SuperGrid,
+            {
+              stringifyCoord: (x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`,
+              width: size.width,
+              height: size.height,
+              transform: realToScreen
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  InteractiveGraphics
+};
+//# sourceMappingURL=react.js.map

package/dist/lib/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../site/components/InteractiveGraphics/InteractiveGraphics.tsx","../../site/components/InteractiveGraphics/Line.tsx","../../site/components/InteractiveGraphics/Tooltip.tsx","../../site/utils/distToLineSegment.ts","../../site/components/InteractiveGraphics/defaultColors.ts","../../site/components/InteractiveGraphics/Point.tsx","../../site/components/InteractiveGraphics/Rect.tsx","../../site/utils/getGraphicsBounds.ts"],"sourcesContent":["import {\n  compose,\n  type Matrix,\n  applyToPoint,\n  scale,\n  translate,\n} from \"transformation-matrix\"\nimport { GraphicsObject } from \"../../../lib\"\nimport { useMemo, useState } from \"react\"\nimport useMouseMatrixTransform from \"use-mouse-matrix-transform\"\nimport { InteractiveState } from \"./InteractiveState\"\nimport { SuperGrid } from \"react-supergrid\"\nimport useResizeObserver from \"@react-hook/resize-observer\"\nimport { Line } from \"./Line\"\nimport { Point } from \"./Point\"\nimport { Rect } from \"./Rect\"\nimport { getGraphicsBounds } from \"site/utils/getGraphicsBounds\"\n\nexport const InteractiveGraphics = ({\n  graphics,\n}: { graphics: GraphicsObject }) => {\n  const [activeLayers, setActiveLayers] = useState<string[] | null>(null)\n  const [activeStep, setActiveStep] = useState<number | null>(null)\n  const [size, setSize] = useState({ width: 600, height: 600 })\n  const availableLayers: string[] = Array.from(\n    new Set([\n      ...(graphics.lines?.map((l) => l.layer!).filter(Boolean) ?? []),\n      ...(graphics.rects?.map((r) => r.layer!).filter(Boolean) ?? []),\n      ...(graphics.points?.map((p) => p.layer!).filter(Boolean) ?? []),\n    ]),\n  )\n  const maxStep = Math.max(\n    0,\n    ...(graphics.lines?.map((l) => l.step!).filter(Boolean) ?? []),\n    ...(graphics.rects?.map((r) => r.step!).filter(Boolean) ?? []),\n    ...(graphics.points?.map((p) => p.step!).filter(Boolean) ?? []),\n  )\n\n  const graphicsBoundsWithPadding = useMemo(() => {\n    const actualBounds = getGraphicsBounds(graphics)\n    const width = actualBounds.maxX - actualBounds.minX\n    const height = actualBounds.maxY - actualBounds.minY\n    return {\n      minX: actualBounds.minX - width / 10,\n      minY: actualBounds.minY - height / 10,\n      maxX: actualBounds.maxX + width / 10,\n      maxY: actualBounds.maxY + height / 10,\n    }\n  }, [graphics])\n\n  const { transform: realToScreen, ref } = useMouseMatrixTransform({\n    initialTransform: compose(\n      translate(size.width / 2, size.height / 2),\n      scale(\n        Math.min(\n          size.width /\n            (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),\n          size.height /\n            (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY),\n        ),\n        -Math.min(\n          size.width /\n            (graphicsBoundsWithPadding.maxX - graphicsBoundsWithPadding.minX),\n          size.height /\n            (graphicsBoundsWithPadding.maxY - graphicsBoundsWithPadding.minY),\n        ),\n      ),\n      translate(\n        -(graphicsBoundsWithPadding.maxX + graphicsBoundsWithPadding.minX) / 2,\n        -(graphicsBoundsWithPadding.maxY + graphicsBoundsWithPadding.minY) / 2,\n      ),\n    ),\n  })\n\n  useResizeObserver(ref, (entry: ResizeObserverEntry) => {\n    setSize({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    })\n  })\n\n  const interactiveState: InteractiveState = {\n    activeLayers: activeLayers,\n    activeStep: activeStep,\n    realToScreen: realToScreen,\n  }\n\n  const showToolbar = availableLayers.length > 1 || maxStep > 0\n\n  const filterLayerAndStep = (obj: { layer?: string; step?: number }) => {\n    if (activeLayers && obj.layer && !activeLayers.includes(obj.layer))\n      return false\n    if (\n      activeStep !== null &&\n      obj.step !== undefined &&\n      obj.step !== activeStep\n    )\n      return false\n    return true\n  }\n\n  return (\n    <div>\n      {showToolbar && (\n        <div style={{ margin: 8 }}>\n          {availableLayers.length > 1 && (\n            <select\n              value={activeLayers ? activeLayers[0] : \"\"}\n              onChange={(e) => {\n                const value = e.target.value\n                setActiveLayers(value === \"\" ? null : [value])\n              }}\n              style={{ marginRight: 8 }}\n            >\n              <option value=\"\">All Layers</option>\n              {availableLayers.map((layer) => (\n                <option key={layer} value={layer}>\n                  {layer}\n                </option>\n              ))}\n            </select>\n          )}\n\n          {maxStep > 0 && (\n            <div\n              style={{ display: \"inline-flex\", alignItems: \"center\", gap: 8 }}\n            >\n              Step:\n              <input\n                type=\"number\"\n                min={0}\n                max={maxStep}\n                value={activeStep ?? 0}\n                onChange={(e) => {\n                  const value = parseInt(e.target.value)\n                  setActiveStep(Number.isNaN(value) ? null : value)\n                }}\n                disabled={activeStep === null}\n              />\n              <label>\n                <input\n                  type=\"checkbox\"\n                  style={{ marginRight: 4 }}\n                  checked={activeStep !== null}\n                  onChange={(e) => {\n                    setActiveStep(e.target.checked ? 0 : null)\n                  }}\n                />\n                Filter by step\n              </label>\n            </div>\n          )}\n        </div>\n      )}\n\n      <div\n        ref={ref}\n        style={{\n          position: \"relative\",\n          height: 600,\n          overflow: \"hidden\",\n        }}\n      >\n        {graphics.lines?.filter(filterLayerAndStep)?.map((l, i) => (\n          <Line\n            key={i}\n            line={l}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.rects?.filter(filterLayerAndStep)?.map((r, i) => (\n          <Rect\n            key={i}\n            rect={r}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        {graphics.points?.filter(filterLayerAndStep)?.map((p, i) => (\n          <Point\n            key={i}\n            point={p}\n            index={i}\n            interactiveState={interactiveState}\n          />\n        ))}\n        <SuperGrid\n          stringifyCoord={(x, y) => `${x.toFixed(2)}, ${y.toFixed(2)}`}\n          width={size.width}\n          height={size.height}\n          transform={realToScreen}\n        />\n      </div>\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { distToLineSegment } from \"site/utils/distToLineSegment\"\nimport { defaultColors } from \"./defaultColors\"\n\nexport const Line = ({\n  line,\n  index,\n  interactiveState,\n}: { line: Types.Line; index: number; interactiveState: InteractiveState }) => {\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const {\n    points,\n    layer,\n    step,\n    strokeColor,\n    strokeWidth = 1 / realToScreen.a,\n  } = line\n  const [isHovered, setIsHovered] = useState(false)\n  const [mousePos, setMousePos] = useState({ x: 0, y: 0 })\n\n  const screenPoints = points.map((p) => applyToPoint(realToScreen, p))\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    const rect = e.currentTarget.getBoundingClientRect()\n    const mouseX = e.clientX - rect.left\n    const mouseY = e.clientY - rect.top\n    const hoverThreshold = 10 // pixels\n\n    setMousePos({ x: mouseX, y: mouseY })\n\n    // Check distance to each line segment\n    let isNearLine = false\n    for (let i = 0; i < screenPoints.length - 1; i++) {\n      const dist = distToLineSegment(\n        mouseX,\n        mouseY,\n        screenPoints[i].x,\n        screenPoints[i].y,\n        screenPoints[i + 1].x,\n        screenPoints[i + 1].y,\n      )\n      if (dist < hoverThreshold) {\n        isNearLine = true\n        break\n      }\n    }\n\n    setIsHovered(isNearLine)\n  }\n\n  const baseColor = strokeColor ?? defaultColors[index % defaultColors.length]\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n      }}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      <polyline\n        points={screenPoints.map((p) => `${p.x},${p.y}`).join(\" \")}\n        stroke={isHovered ? lighten(0.2, baseColor) : baseColor}\n        strokeWidth={strokeWidth * realToScreen.a}\n      />\n      {isHovered && line.label && (\n        <foreignObject\n          x={mousePos.x}\n          y={mousePos.y - 40}\n          width={300}\n          height={40}\n        >\n          <Tooltip text={line.label} />\n        </foreignObject>\n      )}\n    </svg>\n  )\n}\n","export const Tooltip = ({ text }: { text: string }) => {\n  return (\n    <div\n      style={{\n        background: \"white\",\n        border: \"1px solid #ccc\",\n        boxShadow: \"0 0 10px 0 rgba(0, 0, 0, 0.1)\",\n        borderRadius: \"4px\",\n        padding: \"4px 8px\",\n        fontSize: \"12px\",\n        minWidth: \"150px\",\n        maxWidth: \"300px\",\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"pre-wrap\",\n      }}\n    >\n      {text}\n    </div>\n  )\n}\n","// Calculate distance from point to line segment\nexport const distToLineSegment = (\n  px: number,\n  py: number,\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n) => {\n  const A = px - x1\n  const B = py - y1\n  const C = x2 - x1\n  const D = y2 - y1\n\n  const dot = A * C + B * D\n  const lenSq = C * C + D * D\n  let param = -1\n\n  if (lenSq !== 0) param = dot / lenSq\n\n  let xx = 0\n  let yy = 0\n\n  if (param < 0) {\n    xx = x1\n    yy = y1\n  } else if (param > 1) {\n    xx = x2\n    yy = y2\n  } else {\n    xx = x1 + param * C\n    yy = y1 + param * D\n  }\n\n  const dx = px - xx\n  const dy = py - yy\n  return Math.sqrt(dx * dx + dy * dy)\n}\n","// These are default colors if no color is provided\n// colors are made based on the index of the item in the array\n\nexport const defaultColors = [\n  \"rgba(239, 68, 68, 0.8)\", // red-300\n  \"rgba(249, 115, 22, 0.8)\", // orange-300\n  \"rgba(245, 158, 11, 0.8)\", // amber-300\n  \"rgba(234, 179, 8, 0.8)\", // yellow-300\n  \"rgba(132, 204, 22, 0.8)\", // lime-300\n  \"rgba(34, 197, 94, 0.8)\", // green-300\n  \"rgba(16, 185, 129, 0.8)\", // emerald-300\n  \"rgba(20, 184, 166, 0.8)\", // teal-300\n  \"rgba(6, 182, 212, 0.8)\", // cyan-300\n  \"rgba(14, 165, 233, 0.8)\", // sky-300\n  \"rgba(59, 130, 246, 0.8)\", // blue-300\n  \"rgba(99, 102, 241, 0.8)\", // indigo-300\n  \"rgba(139, 92, 246, 0.8)\", // violet-300\n  \"rgba(168, 85, 247, 0.8)\", // purple-300\n  \"rgba(217, 70, 239, 0.8)\", // fuchsia-300\n  \"rgba(236, 72, 153, 0.8)\", // pink-300\n  \"rgba(249, 168, 212, 0.8)\", // rose-300\n  \"rgba(161, 161, 170, 0.8)\", // zinc-300\n]\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\n\nexport const Point = ({\n  point,\n  interactiveState,\n  index,\n}: {\n  point: Types.Point\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const { color, label, layer, step } = point\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n\n  const screenPoint = applyToPoint(realToScreen, point)\n  const size = 10\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenPoint.x - size / 2,\n        top: screenPoint.y - size / 2,\n        width: size,\n        height: size,\n        borderRadius: \"50%\",\n        border: `2px solid ${\n          isHovered\n            ? lighten(0.2, color ?? defaultColors[index % defaultColors.length])\n            : (color ?? defaultColors[index % defaultColors.length])\n        }`,\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip\n            text={`${label ? `${label}\\n` : \"\"}x: ${point.x.toFixed(2)}, y: ${point.y.toFixed(2)}`}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type * as Types from \"lib/types\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport type { InteractiveState } from \"./InteractiveState\"\nimport { lighten } from \"polished\"\nimport { useState } from \"react\"\nimport { Tooltip } from \"./Tooltip\"\nimport { defaultColors } from \"./defaultColors\"\n\nexport const Rect = ({\n  rect,\n  interactiveState,\n  index,\n}: {\n  rect: Types.Rect\n  interactiveState: InteractiveState\n  index: number\n}) => {\n  const defaultColor = defaultColors[index % defaultColors.length]\n  const { center, width, height, fill, stroke, layer, step } = rect\n  const { activeLayers, activeStep, realToScreen } = interactiveState\n  const [isHovered, setIsHovered] = useState(false)\n\n  const screenCenter = applyToPoint(realToScreen, center)\n  const screenWidth = width * realToScreen.a\n  const screenHeight = height * Math.abs(realToScreen.d)\n\n  // Default style when neither fill nor stroke is specified\n  const hasStrokeOrFill = fill !== undefined || stroke !== undefined\n\n  let backgroundColor = hasStrokeOrFill ? fill || \"transparent\" : defaultColor\n  if (isHovered) {\n    backgroundColor = lighten(0.2, backgroundColor)\n  }\n\n  return (\n    <div\n      style={{\n        position: \"absolute\",\n        left: screenCenter.x - screenWidth / 2,\n        top: screenCenter.y - screenHeight / 2,\n        width: screenWidth,\n        height: screenHeight,\n        backgroundColor,\n        border: stroke\n          ? `2px solid ${isHovered ? lighten(0.2, stroke) : stroke}`\n          : \"none\",\n        cursor: \"pointer\",\n        transition: \"border-color 0.2s\",\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {isHovered && rect.label && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: \"100%\",\n            left: \"50%\",\n            transform: \"translateX(-50%)\",\n            marginBottom: 8,\n          }}\n        >\n          <Tooltip text={rect.label} />\n        </div>\n      )}\n    </div>\n  )\n}\n","import { GraphicsObject } from \"lib/types\"\n\nexport const getGraphicsBounds = (graphics: GraphicsObject) => {\n  const bounds = {\n    minX: Infinity,\n    minY: Infinity,\n    maxX: -Infinity,\n    maxY: -Infinity,\n  }\n  for (const line of graphics.lines ?? []) {\n    for (const point of line.points ?? []) {\n      bounds.minX = Math.min(bounds.minX, point.x)\n      bounds.minY = Math.min(bounds.minY, point.y)\n      bounds.maxX = Math.max(bounds.maxX, point.x)\n      bounds.maxY = Math.max(bounds.maxY, point.y)\n    }\n  }\n  for (const rect of graphics.rects ?? []) {\n    const { center, width, height } = rect\n    const halfWidth = width / 2\n    const halfHeight = height / 2\n    bounds.minX = Math.min(bounds.minX, center.x - halfWidth)\n    bounds.minY = Math.min(bounds.minY, center.y - halfHeight)\n    bounds.maxX = Math.max(bounds.maxX, center.x + halfWidth)\n    bounds.maxY = Math.max(bounds.maxY, center.y + halfHeight)\n  }\n  for (const point of graphics.points ?? []) {\n    bounds.minX = Math.min(bounds.minX, point.x)\n    bounds.minY = Math.min(bounds.minY, point.y)\n    bounds.maxX = Math.max(bounds.maxX, point.x)\n    bounds.maxY = Math.max(bounds.maxY, point.y)\n  }\n  return bounds\n}\n"],"mappings":"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","names":["useState","jsx","applyToPoint","lighten","useState","jsx","useState","applyToPoint","lighten","applyToPoint","lighten","useState","jsx","useState","applyToPoint","lighten","jsx","jsxs","useState"]}

package/dist/lib/types.d.ts

@@ -3,6 +3,8 @@ interface Point {
     y: number;
     color?: string;
     label?: string;
+    layer?: string;
+    step?: number;
 }
 interface Line {
     points: {
@@ -11,6 +13,9 @@ interface Line {
     }[];
     strokeWidth?: number;
     strokeColor?: string;
+    layer?: string;
+    step?: number;
+    label?: string;
 }
 interface Rect {
     center: {
@@ -22,6 +27,9 @@ interface Rect {
     fill?: string;
     stroke?: string;
     color?: string;
+    layer?: string;
+    step?: number;
+    label?: string;
 }
 interface Circle {
     center: {
@@ -31,6 +39,8 @@ interface Circle {
     radius: number;
     fill?: string;
     stroke?: string;
+    layer?: string;
+    step?: number;
 }
 interface GraphicsObject {
     points?: Point[];

package/package.json

@@ -2,16 +2,27 @@
   "name": "graphics-debug",
   "main": "dist/lib/index.js",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "import": "./dist/lib/index.js"
+    },
+    "./react": {
+      "types": "./dist/lib/react.d.ts",
+      "import": "./dist/lib/react.js"
+    }
+  },
   "bin": {
     "graphics-debug": "./dist/cli/cli.js",
     "gd": "./dist/cli/cli.js"
   },
   "scripts": {
-    "start": "vite",
+    "start": "cosmos",
+    "start:landing": "vite",
     "build": "tsup-node ./cli ./lib --dts --format esm --sourcemap",
     "format": "biome format --write .",
     "format:check": "biome format .",
@@ -19,6 +30,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@react-hook/resize-observer": "^2.0.2",
     "@types/bun": "latest",
     "@types/debug": "^4.1.12",
     "@types/jsdom": "^21.1.7",
@@ -31,18 +43,24 @@
     "debug": "^4.3.7",
     "jsdom": "^25.0.1",
     "react": "^18.3.1",
+    "react-cosmos": "^6.2.3",
+    "react-cosmos-plugin-vite": "^6.2.0",
     "react-dom": "^18.3.1",
     "tsup": "^8.3.5",
-    "vite": "^5.4.11"
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
   "dependencies": {
     "@types/react-router-dom": "^5.3.3",
+    "polished": "^4.3.1",
     "pretty": "^2.0.0",
     "react-router-dom": "^6.28.0",
+    "react-supergrid": "^1.0.10",
     "svgson": "^5.3.1",
-    "transformation-matrix": "^2.16.1"
+    "transformation-matrix": "^2.16.1",
+    "use-mouse-matrix-transform": "^1.3.0"
   }
 }