@dxos/react-ui-canvas 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dist/lib/chunk-Grid.mjs

@@ -0,0 +1,99 @@
+import { forwardRef, useId, useMemo } from "react";
+import { mx } from "@dxos/ui-theme";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Hooks from "@dxos/react-ui/Hooks";
+//#region src/components/Grid/Grid.tsx
+var gridRatios = [
+	1 / 4,
+	1,
+	4,
+	16
+];
+var defaultGridSize = 16;
+var defaultOffset = {
+	x: 0,
+	y: 0
+};
+var defaultRange = [defaultGridSize, 128];
+var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
+/**
+* A level's line opacity from its on-screen spacing alone: faint at the finest drawn spacing, a step
+* darker per fourfold. A level then fades in as the view zooms rather than popping, and a scene swap
+* that keeps every spacing (drilling through a grid-aligned portal) keeps every line as it was. The
+* step is small and the ceiling low: the grid is a guide under the diagram, so the coarse levels in
+* particular must not read as content.
+*/
+var levelOpacity = (size, min) => Math.min(.12, .04 + .02 * Math.log(size / min) / Math.log(4));
+/** Multi-level grid in screen space, fed the camera's scale and offset. */
+var GridComponent = forwardRef(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, ratios = gridRatios, range = defaultRange, classNames }, forwardedRef) => {
+	const svgRef = Hooks.useForwardedRef(forwardedRef);
+	const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
+	const instanceId = useId();
+	const [min, max] = range;
+	const grids = useMemo(() => ratios.map((ratio) => ({
+		id: ratio,
+		size: ratio * gridSize * scale
+	})).filter(({ size }) => size >= min && size <= max), [
+		ratios,
+		gridSize,
+		scale,
+		min,
+		max
+	]);
+	return /* @__PURE__ */ jsxs("svg", {
+		"data-testid": "dx-canvas-grid",
+		ref: svgRef,
+		className: mx("dx-cover w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames),
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: grids.map(({ id, size }) => /* @__PURE__ */ jsx(GridPattern, {
+				id: createId(instanceId, id),
+				offset,
+				size
+			}, id)) }),
+			showAxes && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("line", {
+				x1: 0,
+				y1: offset.y,
+				x2: width,
+				y2: offset.y,
+				className: "stroke-neutral-500 opacity-40"
+			}), /* @__PURE__ */ jsx("line", {
+				x1: offset.x,
+				y1: 0,
+				x2: offset.x,
+				y2: height,
+				className: "stroke-neutral-500 opacity-40"
+			})] }),
+			/* @__PURE__ */ jsx("g", { children: grids.map(({ id, size }) => /* @__PURE__ */ jsx("rect", {
+				opacity: levelOpacity(size, min),
+				fill: `url(#${createId(instanceId, id)})`,
+				width: "100%",
+				height: "100%"
+			}, id)) })
+		]
+	});
+});
+GridComponent.displayName = "GridComponent";
+/** One grid level as an SVG pattern of crossing lines, offset so a line sits on the origin. */
+var GridPattern = ({ id, size, offset }) => /* @__PURE__ */ jsxs("pattern", {
+	id,
+	x: (size / 2 + offset.x) % size,
+	y: (size / 2 + offset.y) % size,
+	width: size,
+	height: size,
+	patternUnits: "userSpaceOnUse",
+	children: [/* @__PURE__ */ jsx("line", {
+		x1: 0,
+		y1: size / 2,
+		x2: size,
+		y2: size / 2
+	}), /* @__PURE__ */ jsx("line", {
+		x1: size / 2,
+		y1: 0,
+		x2: size / 2,
+		y2: size
+	})]
+});
+//#endregion
+export { GridComponent as t };
+
+//# sourceMappingURL=chunk-Grid.mjs.map

package/dist/lib/chunk-Grid.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-Grid.mjs","names":[],"sources":["../../src/components/Grid/Grid.tsx"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useId, useMemo } from 'react';\n\nimport * as Hooks from '@dxos/react-ui/Hooks';\nimport type * as Util from '@dxos/react-ui/Util';\nimport { mx } from '@dxos/ui-theme';\n\nimport { type Point } from '../../model/types.ts';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\nconst defaultRange = [defaultGridSize, 128] as const;\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\n/**\n * A level's line opacity from its on-screen spacing alone: faint at the finest drawn spacing, a step\n * darker per fourfold. A level then fades in as the view zooms rather than popping, and a scene swap\n * that keeps every spacing (drilling through a grid-aligned portal) keeps every line as it was. The\n * step is small and the ceiling low: the grid is a guide under the diagram, so the coarse levels in\n * particular must not read as content.\n */\nconst levelOpacity = (size: number, min: number) => Math.min(0.12, 0.04 + (0.02 * Math.log(size / min)) / Math.log(4));\n\nexport type GridProps = Util.ThemedClassName<{\n  size?: number;\n  scale?: number;\n  offset?: Point;\n  showAxes?: boolean;\n  /** Grid levels as multiples of `size`, finest first. */\n  ratios?: readonly number[];\n  /** On-screen cell size (px) outside which a level is not drawn. */\n  range?: readonly [min: number, max: number];\n}>;\n\n/** Multi-level grid in screen space, fed the camera's scale and offset. */\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n  (\n    {\n      size: gridSize = defaultGridSize,\n      scale = 1,\n      offset = defaultOffset,\n      showAxes = true,\n      ratios = gridRatios,\n      range = defaultRange,\n      classNames,\n    },\n    forwardedRef,\n  ) => {\n    const svgRef = Hooks.useForwardedRef(forwardedRef);\n    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n    const instanceId = useId();\n    const [min, max] = range;\n    const grids = useMemo(\n      () =>\n        ratios\n          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n          .filter(({ size }) => size >= min && size <= max),\n      [ratios, gridSize, scale, min, max],\n    );\n\n    return (\n      <svg\n        data-testid='dx-canvas-grid'\n        ref={svgRef}\n        // `dx-cover` (absolute inset-0) does not stretch a replaced <svg> element — without an explicit\n        // size it falls back to the intrinsic 300x150, clipping the 100%-sized grid rects. Force full size.\n        className={mx(\n          'dx-cover w-full h-full pointer-events-none touch-none select-none',\n          'stroke-neutral-500',\n          classNames,\n        )}\n      >\n        {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}\n        <defs>\n          {grids.map(({ id, size }) => (\n            <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        {showAxes && (\n          <>\n            <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />\n            <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />\n          </>\n        )}\n        <g>\n          {grids.map(({ id, size }) => (\n            <rect\n              key={id}\n              opacity={levelOpacity(size, min)}\n              fill={`url(#${createId(instanceId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n\nGridComponent.displayName = 'GridComponent';\n\n/** One grid level as an SVG pattern of crossing lines, offset so a line sits on the origin. */\nconst GridPattern = ({ id, size, offset }: { id: string; size: number; offset: Point }) => (\n  <pattern\n    id={id}\n    x={(size / 2 + offset.x) % size}\n    y={(size / 2 + offset.y) % size}\n    width={size}\n    height={size}\n    patternUnits='userSpaceOnUse'\n  >\n    <line x1={0} y1={size / 2} x2={size} y2={size / 2} />\n    <line x1={size / 2} y1={0} x2={size / 2} y2={size} />\n  </pattern>\n);\n"],"mappings":";;;;;AAYA,IAAM,aAAa;CAAC,IAAI;CAAG;CAAG;CAAG;AAAE;AAEnC,IAAM,kBAAkB;AACxB,IAAM,gBAAuB;CAAE,GAAG;CAAG,GAAG;AAAE;AAC1C,IAAM,eAAe,CAAC,iBAAiB,GAAG;AAE1C,IAAM,YAAY,QAAgB,SAAiB,kBAAkB,OAAO,GAAG;;;;;;;;AAS/E,IAAM,gBAAgB,MAAc,QAAgB,KAAK,IAAI,KAAM,MAAQ,MAAO,KAAK,IAAI,OAAO,GAAG,IAAK,KAAK,IAAI,CAAC,CAAC;;AAcrH,IAAa,gBAAgB,YAEzB,EACE,MAAM,WAAW,iBACjB,QAAQ,GACR,SAAS,eACT,WAAW,MACX,SAAS,YACT,QAAQ,cACR,cAEF,iBACG;CACH,MAAM,SAAS,MAAM,gBAAgB,YAAY;CACjD,MAAM,EAAE,QAAQ,GAAG,SAAS,MAAM,OAAO,SAAS,sBAAsB,KAAK,CAAC;CAE9E,MAAM,aAAa,MAAM;CACzB,MAAM,CAAC,KAAK,OAAO;CACnB,MAAM,QAAQ,cAEV,OACG,KAAK,WAAW;EAAE,IAAI;EAAO,MAAM,QAAQ,WAAW;CAAM,EAAE,CAAA,CAC9D,QAAQ,EAAE,WAAW,QAAQ,OAAO,QAAQ,GAAG,GACpD;EAAC;EAAQ;EAAU;EAAO;EAAK;CAAG,CACpC;CAEA,OACE,qBAAC,OAAD;EACE,eAAY;EACZ,KAAK;EAGL,WAAW,GACT,qEACA,sBACA,UACF;EATF,UAAA;GAYE,oBAAC,QAAD,EAAA,UACG,MAAM,KAAK,EAAE,IAAI,WAChB,oBAAC,aAAD;IAAsB,IAAI,SAAS,YAAY,EAAE;IAAW;IAAc;GAAO,GAA/D,EAA+D,CAClF,EACG,CAAA;GACL,YACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;IAAM,IAAI;IAAG,IAAI,OAAO;IAAG,IAAI;IAAO,IAAI,OAAO;IAAG,WAAU;GAAiC,CAAA,GAC/F,oBAAC,QAAD;IAAM,IAAI,OAAO;IAAG,IAAI;IAAG,IAAI,OAAO;IAAG,IAAI;IAAQ,WAAU;GAAiC,CAAA,CAChG,EAAA,CAAA;GAEJ,oBAAC,KAAD,EAAA,UACG,MAAM,KAAK,EAAE,IAAI,WAChB,oBAAC,QAAD;IAEE,SAAS,aAAa,MAAM,GAAG;IAC/B,MAAM,QAAQ,SAAS,YAAY,EAAE,EAAE;IACvC,OAAM;IACN,QAAO;GACR,GALM,EAKN,CACF,EACA,CAAA;EACA;;AAET,CACF;AAEA,cAAc,cAAc;;AAG5B,IAAM,eAAe,EAAE,IAAI,MAAM,aAC/B,qBAAC,WAAD;CACM;CACJ,IAAI,OAAO,IAAI,OAAO,KAAK;CAC3B,IAAI,OAAO,IAAI,OAAO,KAAK;CAC3B,OAAO;CACP,QAAQ;CACR,cAAa;CANf,UAAA,CAQE,oBAAC,QAAD;EAAM,IAAI;EAAG,IAAI,OAAO;EAAG,IAAI;EAAM,IAAI,OAAO;CAAI,CAAA,GACpD,oBAAC,QAAD;EAAM,IAAI,OAAO;EAAG,IAAI;EAAG,IAAI,OAAO;EAAG,IAAI;CAAO,CAAA,CAC7C"}

package/dist/lib/index.mjs

@@ -1,16 +1,16 @@
+import { t as GridComponent } from "./chunk-Grid.mjs";
 import { Dimension, Point, Rect } from "./types.mjs";
-import { createContext, forwardRef, useContext, useEffect, useId, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { mx } from "@dxos/ui-theme";
 import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
 import { applyToPoints, compose, identity, inverse, scale, translate } from "transformation-matrix";
 import { raise } from "@dxos/debug";
 import { bind, bindAll } from "bind-event-listener";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { RegistryContext } from "@effect/atom-react/RegistryContext";
-import * as Atom from "effect/unstable/reactivity/Atom";
-import { useForwardedRef } from "@dxos/react-ui";
-//#region src/hooks/projection.tsx
+import * as Atom from "effect/reactivity/Atom";
+//#region src/archive/hooks/projection.tsx
 var defaultOrigin = {
 	x: 0,
 	y: 0
@@ -101,7 +101,7 @@ var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
 	}).on("end", cb);
 };
 //#endregion
-//#region src/hooks/useCanvasContext.ts
+//#region src/archive/hooks/useCanvasContext.ts
 /**
 * @internal
 */
@@ -110,7 +110,7 @@ var useCanvasContext = () => {
 	return useContext(CanvasContext) ?? raise(/* @__PURE__ */ new Error("Missing CanvasContext"));
 };
 //#endregion
-//#region src/hooks/useDrag.tsx
+//#region src/archive/hooks/useDrag.tsx
 /**
 * Handle drag events to update the transform state (offset).
 */
@@ -167,7 +167,7 @@ var useDrag = (_options = {}) => {
 	}, [root]);
 };
 //#endregion
-//#region src/util/svg-path.ts
+//#region src/archive/util/svg-path.ts
 /** https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
 var createPath = (points, join = false) => {
 	return [
@@ -177,13 +177,13 @@ var createPath = (points, join = false) => {
 	].join(" ");
 };
 //#endregion
-//#region src/util/svg.tsx
+//#region src/archive/util/svg.tsx
 /**
 * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
 * NOTE: Leave space around shape for line width.
 */
 var Markers = ({ id = "dx-marker", classNames }) => {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(Arrow, {
 			id: `${id}-arrow-start`,
 			dir: "start",
@@ -310,7 +310,7 @@ var GridPattern = ({ classNames, id, size, offset }) => /* @__PURE__ */ jsx("pat
 	})
 });
 //#endregion
-//#region src/util/util.ts
+//#region src/archive/util/util.ts
 var logged = false;
 /**
 * Get the relative point of the cursor.
@@ -350,7 +350,7 @@ var inspectElement = (el) => {
 };
 var DATA_TEST_ID = "data-test-id";
 //#endregion
-//#region src/hooks/useWheel.tsx
+//#region src/archive/hooks/useWheel.tsx
 var defaultOptions = { zoom: true };
 /**
 * Handle wheel events to update the transform state (zoom and offset).
@@ -398,7 +398,7 @@ var isWheelZooming = (ev) => {
 	return false;
 };
 //#endregion
-//#region src/components/Canvas/Canvas.tsx
+//#region src/archive/components/Canvas/Canvas.tsx
 /**
 * Root canvas component.
 * Manages CSS projection.
@@ -463,14 +463,14 @@ var Canvas = forwardRef(({ children, classNames, scale: scaleProp = 1, offset: o
 		},
 		children: /* @__PURE__ */ jsx("div", {
 			...props,
-			className: mx("absolute inset-0 overflow-hidden", classNames),
+			className: mx("dx-cover overflow-hidden", classNames),
 			ref,
 			children: ready ? children : null
 		})
 	});
 });
 //#endregion
-//#region src/components/CellGrid/state/viewport.ts
+//#region src/archive/components/CellGrid/state/viewport.ts
 var cellKey = (col, row) => `${col},${row}`;
 var cellWidth = (viewport) => viewport.baseCellWidth * viewport.zoomX;
 /**
@@ -530,7 +530,7 @@ var visibleCells = function* (cells, range) {
 	}
 };
 //#endregion
-//#region src/components/CellGrid/headers/Ruler.tsx
+//#region src/archive/components/CellGrid/headers/Ruler.tsx
 /**
 * Frozen top ruler. Ticks reflect the current viewport scroll and zoom.
 */
@@ -569,7 +569,7 @@ var Ruler = ({ viewport, headers, width, majorEvery = 4, classNames }) => {
 	});
 };
 //#endregion
-//#region src/components/CellGrid/headers/TrackHeader.tsx
+//#region src/archive/components/CellGrid/headers/TrackHeader.tsx
 /**
 * Frozen left column listing row labels. Translates vertically in sync with viewport scroll.
 *
@@ -601,7 +601,7 @@ var TrackHeader = ({ viewport, headers, rows, height, classNames }) => {
 	});
 };
 //#endregion
-//#region src/components/CellGrid/input/pointer.ts
+//#region src/archive/components/CellGrid/input/pointer.ts
 /**
 * Attach pointer handlers to an element. Returns an unsubscribe.
 */
@@ -760,7 +760,7 @@ var toggleCell = (registry, atoms, coord, factory, mode = "toggle") => {
 	});
 };
 //#endregion
-//#region src/components/CellGrid/input/wheel.ts
+//#region src/archive/components/CellGrid/input/wheel.ts
 var MIN_ZOOM = .25;
 var MAX_ZOOM = 8;
 /**
@@ -806,7 +806,7 @@ var attachWheelHandlers = (element, { registry, atoms, headers }) => {
 	return () => element.removeEventListener("wheel", onWheel);
 };
 //#endregion
-//#region src/components/CellGrid/render/overlay-layer.ts
+//#region src/archive/components/CellGrid/render/overlay-layer.ts
 var drawOverlay = ({ ctx, size, viewport, headers, selection, playhead, style }) => {
 	ctx.clearRect(0, 0, size.width, size.height);
 	ctx.save();
@@ -850,7 +850,7 @@ var drawOverlay = ({ ctx, size, viewport, headers, selection, playhead, style })
 	ctx.restore();
 };
 //#endregion
-//#region src/components/CellGrid/render/static-layer.ts
+//#region src/archive/components/CellGrid/render/static-layer.ts
 /**
 * Paint the static layer: background, gridlines, alternating row bands, and cells.
 * Pure with respect to its inputs (writes only to the supplied ctx).
@@ -903,7 +903,7 @@ var drawCells = ({ ctx, size, viewport, headers, rows, cells, renderCell, style
 	ctx.restore();
 };
 //#endregion
-//#region src/components/CellGrid/CellGrid.tsx
+//#region src/archive/components/CellGrid/CellGrid.tsx
 var defaultHeaders = {
 	left: 80,
 	top: 24
@@ -1106,11 +1106,11 @@ var CellGrid = ({ atoms, rows, renderCell, headers: headersProp, staticStyle: st
 	]);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: mx("relative w-full h-full overflow-hidden dx-base-surface", classNames),
+		className: mx("relative dx-fill overflow-hidden dx-base-surface", classNames),
 		children: [
 			/* @__PURE__ */ jsx("canvas", {
 				ref: staticCanvasRef,
-				className: "absolute inset-0 pointer-events-none",
+				className: "dx-cover pointer-events-none",
 				style: {
 					top: -1,
 					left: -1
@@ -1118,7 +1118,7 @@ var CellGrid = ({ atoms, rows, renderCell, headers: headersProp, staticStyle: st
 			}),
 			/* @__PURE__ */ jsx("canvas", {
 				ref: overlayCanvasRef,
-				className: "absolute inset-0 pointer-events-none",
+				className: "dx-cover pointer-events-none",
 				style: {
 					top: -1,
 					left: -1
@@ -1126,7 +1126,7 @@ var CellGrid = ({ atoms, rows, renderCell, headers: headersProp, staticStyle: st
 			}),
 			/* @__PURE__ */ jsx("div", {
 				ref: overlayInputRef,
-				className: "absolute inset-0 touch-none",
+				className: "dx-cover touch-none",
 				style: {
 					paddingLeft: headers.left,
 					paddingTop: headers.top
@@ -1154,7 +1154,7 @@ var CellGrid = ({ atoms, rows, renderCell, headers: headersProp, staticStyle: st
 	});
 };
 //#endregion
-//#region src/components/CellGrid/state/atoms.ts
+//#region src/archive/components/CellGrid/state/atoms.ts
 var defaultViewport = (options = {}) => ({
 	scrollX: 0,
 	scrollY: 0,
@@ -1177,7 +1177,7 @@ var createCellGridAtoms = (options = {}) => ({
 	tool: Atom.keepAlive(Atom.make("toggle"))
 });
 //#endregion
-//#region src/components/FPS.tsx
+//#region src/archive/components/FPS.tsx
 var SEC = 1e3;
 var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
 	const [{ fps, max, len }, dispatch] = useReducer((state) => {
@@ -1215,7 +1215,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
 	}, []);
 	return /* @__PURE__ */ jsxs("div", {
 		style: { width: width + 6 },
-		className: mx("relative flex flex-col p-0.5", "bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames),
+		className: mx("relative flex flex-col p-0.5", "bg-base-surface text-xs text-fg-subtle font-thin pointer-events-none border border-separator", classNames),
 		children: [/* @__PURE__ */ jsxs("div", { children: [fps[len - 1], " FPS"] }), /* @__PURE__ */ jsx("div", {
 			className: "w-full relative",
 			style: { height },
@@ -1233,19 +1233,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
 	});
 };
 //#endregion
-//#region src/components/Grid/Grid.tsx
-var gridRatios = [
-	1 / 4,
-	1,
-	4,
-	16
-];
-var defaultGridSize = 16;
-var defaultOffset = {
-	x: 0,
-	y: 0
-};
-var createId = (parent, grid) => `dx-canvas-grid-${parent}-${grid}`;
+//#region src/archive/components/Grid/Grid.tsx
 var Grid = (props) => {
 	const { scale, offset } = useCanvasContext();
 	return /* @__PURE__ */ jsx(GridComponent, {
@@ -1254,46 +1242,6 @@ var Grid = (props) => {
 		offset
 	});
 };
-var GridComponent = forwardRef(({ size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames }, forwardedRef) => {
-	const svgRef = useForwardedRef(forwardedRef);
-	const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
-	const instanceId = useId();
-	const grids = useMemo(() => gridRatios.map((ratio) => ({
-		id: ratio,
-		size: ratio * gridSize * scale
-	})).filter(({ size }) => size >= gridSize && size <= 128), [gridSize, scale]);
-	return /* @__PURE__ */ jsxs("svg", {
-		...testId("dx-canvas-grid"),
-		ref: svgRef,
-		className: mx("dx-fullscreen w-full h-full pointer-events-none touch-none select-none", "stroke-neutral-500", classNames),
-		children: [
-			/* @__PURE__ */ jsx("defs", { children: grids.map(({ id, size }) => /* @__PURE__ */ jsx(GridPattern, {
-				id: createId(instanceId, id),
-				offset,
-				size
-			}, id)) }),
-			showAxes && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("line", {
-				x1: 0,
-				y1: offset.y,
-				x2: width,
-				y2: offset.y,
-				className: "stroke-neutral-500 opacity-40"
-			}), /* @__PURE__ */ jsx("line", {
-				x1: offset.x,
-				y1: 0,
-				x2: offset.x,
-				y2: height,
-				className: "stroke-neutral-500 opacity-40"
-			})] }),
-			/* @__PURE__ */ jsx("g", { children: grids.map(({ id }, i) => /* @__PURE__ */ jsx("rect", {
-				opacity: .1 + i * .05,
-				fill: `url(#${createId(instanceId, id)})`,
-				width: "100%",
-				height: "100%"
-			}, id)) })
-		]
-	});
-});
 //#endregion
 export { Arrow, Canvas, CanvasContext, CellGrid, DATA_TEST_ID, Dimension, FPS, Grid, GridComponent, GridPattern, Marker, Markers, Point, ProjectionMapper, Rect, Ruler, TrackHeader, attachPointerHandlers, attachWheelHandlers, cellKey, cellWidth, createCellGridAtoms, createPath, defaultOrigin, defaultViewport, drawCells, drawOverlay, getRelativePoint, getZoomTransform, hitTestCell, inspectElement, screenToWorld, testId, toggleCell, useCanvasContext, useDrag, useWheel, visibleCellRange, visibleCells, worldToScreen, zoomInPlace, zoomTo };