@dxos/react-ui-canvas 0.8.3 → 0.8.4-main.1da679c

package/dist/lib/browser/index.mjs

@@ -1,30 +1,30 @@
-// packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
+// src/components/Canvas/Canvas.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { forwardRef, useEffect as useEffect2, useImperativeHandle, useMemo, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-canvas/src/hooks/projection.tsx
-import { interpolate, interpolateObject, transition, easeSinOut } from "d3";
+// src/hooks/projection.tsx
+import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
 import { applyToPoints, compose, identity, inverse, scale as scaleMatrix, translate as translateMatrix } from "transformation-matrix";
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var defaultOrigin = {
   x: 0,
   y: 0
 };
 var ProjectionMapper = class {
-  constructor(bounds, scale, offset) {
-    this._bounds = {
-      width: 0,
-      height: 0
-    };
-    this._scale = 1;
-    this._offset = defaultOrigin;
-    this._toScreen = identity();
-    this._toModel = identity();
-    if (bounds && scale && offset) {
-      this.update(bounds, scale, offset);
-    }
-  }
   update(bounds, scale, offset) {
     this._bounds = bounds;
     this._scale = scale;
@@ -52,6 +52,19 @@ var ProjectionMapper = class {
   toModel(points) {
     return applyToPoints(this._toModel, points);
   }
+  constructor(bounds, scale, offset) {
+    _define_property(this, "_bounds", {
+      width: 0,
+      height: 0
+    });
+    _define_property(this, "_scale", 1);
+    _define_property(this, "_offset", defaultOrigin);
+    _define_property(this, "_toScreen", identity());
+    _define_property(this, "_toModel", identity());
+    if (bounds && scale && offset) {
+      this.update(bounds, scale, offset);
+    }
+  }
 };
 var getZoomTransform = ({ scale, offset, pos, newScale }) => {
   return {
@@ -96,7 +109,7 @@ var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
   }).on("end", cb);
 };
 
-// packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx
+// src/hooks/useCanvasContext.tsx
 import { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 var CanvasContext = /* @__PURE__ */ createContext(null);
@@ -104,11 +117,11 @@ var useCanvasContext = () => {
   return useContext(CanvasContext) ?? raise(new Error("Missing CanvasContext"));
 };
 
-// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+// src/hooks/useWheel.tsx
 import { bindAll } from "bind-event-listener";
 import { useEffect } from "react";
 
-// packages/ui/react-ui-canvas/src/util/svg.tsx
+// src/util/svg.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { mx } from "@dxos/react-ui-theme";
@@ -259,7 +272,7 @@ var GridPattern = ({ classNames, id, size, offset }) => {
   }
 };
 
-// packages/ui/react-ui-canvas/src/util/util.ts
+// src/util/util.ts
 var logged = false;
 var getRelativePoint = (el, ev) => {
   const rect = el.getBoundingClientRect();
@@ -294,7 +307,7 @@ var inspectElement = (el) => {
 };
 var DATA_TEST_ID = "data-test-id";
 
-// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+// src/hooks/useWheel.tsx
 var defaultOptions = {
   zoom: true
 };
@@ -378,7 +391,7 @@ var hasFocus = (element) => {
   return false;
 };
 
-// packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
+// src/components/Canvas/Canvas.tsx
 var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
   var _effect = _useSignals2();
   try {
@@ -462,7 +475,7 @@ var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale =
   }
 });
 
-// packages/ui/react-ui-canvas/src/components/FPS.tsx
+// src/components/FPS.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3, { useEffect as useEffect3, useReducer, useRef } from "react";
 import { mx as mx3 } from "@dxos/react-ui-theme";
@@ -539,9 +552,9 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
   }
 };
 
-// packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx
+// src/components/Grid/Grid.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { forwardRef as forwardRef2, useMemo as useMemo2, useId } from "react";
+import React4, { forwardRef as forwardRef2, useId, useMemo as useMemo2 } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var gridRatios = [
@@ -615,7 +628,7 @@ var Grid = (props) => {
   }
 };
 
-// packages/ui/react-ui-canvas/src/types.ts
+// src/types.ts
 import { Schema } from "effect";
 var Point = Schema.Struct({
   x: Schema.Number,

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useCanvasContext.tsx", "../../../src/hooks/useWheel.tsx", "../../../src/util/svg.tsx", "../../../src/util/util.ts", "../../../src/components/FPS.tsx", "../../../src/components/Grid/Grid.tsx", "../../../src/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type CSSProperties,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';\n\nexport interface CanvasController {\n  setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Ready when initially resized.\n    const [ready, setReady] = useState(false);\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOrigin) {\n        setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n      }\n    }, [width, height, scale, offset]);\n\n    // Projection mapper.\n    const projection = useMemo(() => new ProjectionMapper(), []);\n    useEffect(() => {\n      projection.update({ width, height }, scale, offset);\n      if (offset !== defaultOrigin) {\n        setReady(true);\n      }\n    }, [projection, scale, offset, width, height]);\n\n    // CSS transforms.\n    const styles = useMemo<CSSProperties>(() => {\n      return {\n        // NOTE: Order is important.\n        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n        visibility: width && height ? 'visible' : 'hidden',\n      };\n    }, [scale, offset]);\n\n    // Controller.\n    useImperativeHandle(\n      forwardedRef,\n      () => {\n        return {\n          setProjection: async (projection: ProjectionState) => {\n            setProjection(projection);\n          },\n        };\n      },\n      [ref],\n    );\n\n    return (\n      <CanvasContext.Provider\n        value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {ready ? children : null}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { interpolate, interpolateObject, transition, easeSinOut } from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  identity,\n  inverse,\n  scale as scaleMatrix,\n  translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n  get bounds(): Dimension;\n  get scale(): number;\n  get offset(): Point;\n\n  /**\n   * Maps the model space to the screen offset (from the top-left of the element).\n   */\n  toScreen(points: Point[]): Point[];\n\n  /**\n   * Maps the pointer coordinate (from the top-left of the element) to the model space.\n   */\n  toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n  private _bounds: Dimension = { width: 0, height: 0 };\n  private _scale: number = 1;\n  private _offset: Point = defaultOrigin;\n  private _toScreen: Matrix = identity();\n  private _toModel: Matrix = identity();\n\n  constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n    if (bounds && scale && offset) {\n      this.update(bounds, scale, offset);\n    }\n  }\n\n  update(bounds: Dimension, scale: number, offset: Point): this {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(\n      // NOTE: Order is important.\n      translateMatrix(this._offset.x, this._offset.y),\n      scaleMatrix(this._scale),\n      // TODO(burdon): Flip.\n      // flipX(),\n    );\n    this._toModel = inverse(this._toScreen);\n    return this;\n  }\n\n  get bounds() {\n    return this._bounds;\n  }\n\n  get scale() {\n    return this._scale;\n  }\n\n  get offset() {\n    return this._offset;\n  }\n\n  toScreen(points: Point[]): Point[] {\n    return applyToPoints(this._toScreen, points);\n  }\n\n  toModel(points: Point[]): Point[] {\n    return applyToPoints(this._toModel, points);\n  }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n  scale,\n  offset,\n  pos,\n  newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n  return {\n    scale: newScale,\n    offset: {\n      x: pos.x - (pos.x - offset.x) * (newScale / scale),\n      y: pos.y - (pos.y - offset.y) * (newScale / scale),\n    },\n  };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n  setTransform: (state: ProjectionState) => void,\n  pos: Point,\n  offset: Point,\n  current: number,\n  next: number,\n  delay = 200,\n) => {\n  const is = interpolate(current, next);\n  transition()\n    .ease(easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n  setTransform: (state: ProjectionState) => void,\n  current: ProjectionState,\n  next: ProjectionState,\n  delay = 200,\n  cb = noop,\n) => {\n  const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  transition()\n    .ease(easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    })\n    .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n  root: HTMLDivElement;\n  ready: boolean;\n  width: number;\n  height: number;\n  styles: CSSProperties;\n  projection: Projection;\n  setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n  return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\nimport { getRelativePoint } from '../util';\n\nexport type WheelOptions = {\n  zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n  zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n  const { root, setProjection } = useCanvasContext();\n  useEffect(() => {\n    if (!root) {\n      return;\n    }\n\n    return bindAll(root, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          const zooming = isWheelZooming(ev);\n          if (!hasFocus(root) && !zooming) {\n            return;\n          }\n\n          ev.preventDefault();\n          if (zooming && !options.zoom) {\n            return;\n          }\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!root) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(root, ev);\n              const scaleSensitivity = 0.01;\n              const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n              return getZoomTransform({ scale, offset, newScale, pos });\n            });\n          } else {\n            setProjection(({ scale, offset: { x, y } }) => {\n              return {\n                scale,\n                offset: {\n                  x: x - ev.deltaX,\n                  y: y - ev.deltaY,\n                },\n              };\n            });\n          }\n        },\n      },\n    ]);\n  }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n  // Check for ctrl/cmd key + wheel action.\n  if (ev.ctrlKey || ev.metaKey) {\n    // Some browsers use deltaY, others deltaZ for zoom.\n    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n  }\n\n  return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n  const activeElement = document.activeElement;\n  if (!activeElement) {\n    return false;\n  }\n\n  // Handle shadow DOM.\n  let shadowActive = activeElement;\n  while (shadowActive?.shadowRoot?.activeElement) {\n    shadowActive = shadowActive.shadowRoot.activeElement;\n  }\n\n  // Check if element or any parent has focus.\n  let current: HTMLElement | null = element;\n  while (current) {\n    if (current === activeElement || current === shadowActive) {\n      return true;\n    }\n    current = current.parentElement;\n  }\n\n  return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n//  - https://airbnb.io/visx/gallery\n//  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n  return (\n    <>\n      <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n      <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n      <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n      <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n      <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n        <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n      </Marker>\n    </>\n  );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n  PropsWithChildren<\n    ThemedClassName<{\n      id: string;\n      pos: Point;\n      size: Dimension;\n      fill?: boolean;\n    }>\n  >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n  id,\n  className,\n  children,\n  pos: { x: refX, y: refY },\n  size: { width: markerWidth, height: markerHeight },\n  fill,\n  ...rest\n}: MarkerProps) => (\n  <marker\n    id={id}\n    className={className}\n    {...{\n      refX,\n      refY,\n      markerWidth,\n      markerHeight,\n      markerUnits: 'strokeWidth',\n      orient: 'auto',\n      ...rest,\n    }}\n  >\n    {children}\n  </marker>\n);\n\nexport const Arrow = ({\n  classNames,\n  id,\n  size = 16,\n  dir = 'end',\n  closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n  <Marker\n    id={id}\n    size={{ width: size, height: size }}\n    pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n  >\n    <path\n      fill={closed ? undefined : 'none'}\n      stroke={'context-stroke'}\n      className={mx(classNames)}\n      d={createPath(\n        dir === 'end'\n          ? [\n              { x: 1, y: 1 },\n              { x: size, y: size / 2 },\n              { x: 1, y: size - 1 },\n            ]\n          : [\n              { x: size - 1, y: 1 },\n              { x: 0, y: size / 2 },\n              { x: size - 1, y: size - 1 },\n            ],\n        closed,\n      )}\n    />\n  </Marker>\n);\n\nexport const GridPattern = ({\n  classNames,\n  id,\n  size,\n  offset,\n}: ThemedClassName<{ 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    {/* TODO(burdon): vars. */}\n    <g className={mx(classNames)}>\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    </g>\n  </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n  const rect = el.getBoundingClientRect();\n  return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n  if (inspect) {\n    if (!logged) {\n      // eslint-disable-next-line no-console\n      console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n      logged = true;\n    }\n\n    (window as any).INSPECT = () => {\n      const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n      (window as any).inspect(el);\n      // eslint-disable-next-line no-console\n      console.log(el);\n    };\n  }\n\n  return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n  (window as any).INSPECT = () => {\n    (window as any).inspect(el);\n    (window as any).element = el;\n    // eslint-disable-next-line no-console\n    console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n    // eslint-disable-next-line no-console\n    console.log(el);\n  };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n  width?: number;\n  height?: number;\n  bar?: string;\n}>;\n\ntype State = {\n  max: number;\n  len: number;\n  fps: number[];\n  frames: number;\n  prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n  const [{ fps, max, len }, dispatch] = useReducer(\n    (state: State) => {\n      const currentTime = Date.now();\n      if (currentTime > state.prevTime + SEC) {\n        const nextFPS = [\n          ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n          Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n        ];\n        return {\n          max: Math.max(state.max, ...nextFPS),\n          len: Math.min(state.len + nextFPS.length, width),\n          fps: [...state.fps, ...nextFPS].slice(-width),\n          frames: 1,\n          prevTime: currentTime,\n        };\n      } else {\n        return { ...state, frames: state.frames + 1 };\n      }\n    },\n    {\n      max: 0,\n      len: 0,\n      fps: [],\n      frames: 0,\n      prevTime: Date.now(),\n    },\n  );\n\n  const requestRef = useRef<number>();\n  const tick = () => {\n    dispatch();\n    requestRef.current = requestAnimationFrame(tick);\n  };\n\n  useEffect(() => {\n    requestRef.current = requestAnimationFrame(tick);\n    return () => {\n      if (requestRef.current) {\n        cancelAnimationFrame(requestRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      style={{ width: width + 6 }}\n      className={mx(\n        'relative flex flex-col p-0.5',\n        'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n        classNames,\n      )}\n    >\n      <div>{fps[len - 1]} FPS</div>\n      <div className='w-full relative' style={{ height }}>\n        {fps.map((frame, i) => (\n          <div\n            key={`fps-${i}`}\n            className={bar}\n            style={{\n              position: 'absolute',\n              bottom: 0,\n              right: `${len - 1 - i}px`,\n              height: `${(height * frame) / max}px`,\n              width: 1,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useMemo, useId } from 'react';\n\nimport { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n  size?: number;\n  scale?: number;\n  offset?: Point;\n  showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n  (\n    { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n    forwardedRef,\n  ) => {\n    const svgRef = useForwardedRef(forwardedRef);\n    const instanceId = useId();\n    const grids = useMemo(\n      () =>\n        gridRatios\n          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n          .filter(({ size }) => size >= gridSize && size <= 256),\n      [gridSize, scale],\n    );\n\n    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={svgRef}\n        className={mx(\n          'absolute inset-0 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 }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(instanceId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n  const { scale, offset } = useCanvasContext();\n  return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
-  "mappings": ";;AAIA,OAAOA,UAILC,YACAC,aAAAA,YACAC,qBACAC,SACAC,gBACK;AACP,SAASC,yBAAyB;AAGlC,SAASC,MAAAA,WAAU;;;ACbnB,SAASC,aAAaC,mBAAmBC,YAAYC,kBAAkB;AACvE,SAEEC,eACAC,SACAC,UACAC,SACAC,SAASC,aACTC,aAAaC,uBACR;AAIA,IAAMC,gBAAuB;EAAEC,GAAG;EAAGC,GAAG;AAAE;AA2B1C,IAAMC,mBAAN,MAAMA;EAOX,YAAYC,QAAoBC,OAAgBC,QAAgB;AANxDC,mBAAqB;MAAEC,OAAO;MAAGC,QAAQ;IAAE;AAC3CC,kBAAiB;AACjBC,mBAAiBX;AACjBY,qBAAoBC,SAAAA;AACpBC,oBAAmBD,SAAAA;AAGzB,QAAIT,UAAUC,SAASC,QAAQ;AAC7B,WAAKS,OAAOX,QAAQC,OAAOC,MAAAA;IAC7B;EACF;EAEAS,OAAOX,QAAmBC,OAAeC,QAAqB;AAC5D,SAAKC,UAAUH;AACf,SAAKM,SAASL;AACd,SAAKM,UAAUL;AACf,SAAKM,YAAYI;;MAEfC,gBAAgB,KAAKN,QAAQV,GAAG,KAAKU,QAAQT,CAAC;MAC9CgB,YAAY,KAAKR,MAAM;IAAA;AAIzB,SAAKI,WAAWK,QAAQ,KAAKP,SAAS;AACtC,WAAO;EACT;EAEA,IAAIR,SAAS;AACX,WAAO,KAAKG;EACd;EAEA,IAAIF,QAAQ;AACV,WAAO,KAAKK;EACd;EAEA,IAAIJ,SAAS;AACX,WAAO,KAAKK;EACd;EAEAS,SAASC,QAA0B;AACjC,WAAOC,cAAc,KAAKV,WAAWS,MAAAA;EACvC;EAEAE,QAAQF,QAA0B;AAChC,WAAOC,cAAc,KAAKR,UAAUO,MAAAA;EACtC;AACF;AAKO,IAAMG,mBAAmB,CAAC,EAC/BnB,OACAC,QACAmB,KACAC,SAAQ,MAC2C;AACnD,SAAO;IACLrB,OAAOqB;IACPpB,QAAQ;MACNL,GAAGwB,IAAIxB,KAAKwB,IAAIxB,IAAIK,OAAOL,MAAMyB,WAAWrB;MAC5CH,GAAGuB,IAAIvB,KAAKuB,IAAIvB,IAAII,OAAOJ,MAAMwB,WAAWrB;IAC9C;EACF;AACF;AAMO,IAAMsB,cAAc,CACzBC,cACAH,KACAnB,QACAuB,SACAC,MACAC,QAAQ,QAAG;AAEX,QAAMC,KAAKC,YAAYJ,SAASC,IAAAA;AAChCI,aAAAA,EACGC,KAAKC,UAAAA,EACLC,SAASN,KAAAA,EACTO,MAAM,QAAQ,MAAM,CAACC,MAAAA;AACpB,UAAMb,WAAWM,GAAGO,CAAAA;AACpBX,iBAAaJ,iBAAiB;MAAEnB,OAAOwB;MAASH;MAAUpB;MAAQmB;IAAI,CAAA,CAAA;EACxE,CAAA;AACJ;AAEA,IAAMe,OAAO,MAAA;AAAO;AAMb,IAAMC,SAAS,CACpBb,cACAC,SACAC,MACAC,QAAQ,KACRW,KAAKF,SAAI;AAET,QAAMR,KAAKW,kBAAkB;IAAEtC,OAAOwB,QAAQxB;IAAO,GAAGwB,QAAQvB;EAAO,GAAG;IAAED,OAAOyB,KAAKzB;IAAO,GAAGyB,KAAKxB;EAAO,CAAA;AAC9G4B,aAAAA,EACGC,KAAKC,UAAAA,EACLC,SAASN,KAAAA,EACTO,MAAM,QAAQ,MAAM,CAACC,MAAAA;AACpB,UAAM,EAAElC,OAAOJ,GAAGC,EAAC,IAAK8B,GAAGO,CAAAA;AAC3BX,iBAAa;MAAEvB;MAAOC,QAAQ;QAAEL;QAAGC;MAAE;IAAE,CAAA;EACzC,CAAA,EACC0C,GAAG,OAAOF,EAAAA;AACf;;;ACvJA,SAAiEG,eAAeC,kBAAkB;AAElG,SAASC,aAAa;AAkBf,IAAMC,gBAAgBC,8BAAoC,IAAA;AAE1D,IAAMC,mBAAmB,MAAA;AAC9B,SAAOC,WAAWH,aAAAA,KAAkBI,MAAM,IAAIC,MAAM,uBAAA,CAAA;AACtD;;;ACxBA,SAASC,eAAe;AACxB,SAASC,iBAAiB;;;;ACD1B,OAAOC,WAAsD;AAG7D,SAASC,UAAU;AAQZ,IAAMC,aAAa,CAACC,QAAiBC,OAAO,UAAK;AACtD,SAAO;IAAC;IAAKD,OAAOE,IAAI,CAAC,EAAEC,GAAGC,EAAC,MAAO,GAAGD,CAAAA,IAAKC,CAAAA,EAAG,EAAEH,KAAK,KAAA;IAAQA,OAAO,MAAM;IAAIA,KAAK,GAAA;AACxF;AAMO,IAAMI,UAAU,CAAC,EAAEC,KAAK,aAAaC,WAAU,MAAoC;;;AACxF,WACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACC,OAAAA;MAAMF,IAAI,GAAGA,EAAAA;MAAkBG,KAAI;MAAQF;QAC5C,sBAAA,cAACC,OAAAA;MAAMF,IAAI,GAAGA,EAAAA;MAAgBG,KAAI;MAAMF;QACxC,sBAAA,cAACC,OAAAA;MAAMF,IAAI,GAAGA,EAAAA;MAAqBG,KAAI;MAAQC,QAAAA;MAAOH;QACtD,sBAAA,cAACC,OAAAA;MAAMF,IAAI,GAAGA,EAAAA;MAAmBG,KAAI;MAAMC,QAAAA;MAAOH;QAClD,sBAAA,cAACI,QAAAA;MAAOL,IAAI,GAAGA,EAAAA;MAAaM,KAAK;QAAET,GAAG;QAAGC,GAAG;MAAE;MAAGS,MAAM;QAAEC,OAAO;QAAIC,QAAQ;MAAG;OAC7E,sBAAA,cAACC,UAAAA;MAAOC,IAAI;MAAGC,IAAI;MAAGC,GAAG;MAAGC,QAAQ;MAAkBC,WAAWC,GAAGf,UAAAA;;;;;AAI5E;AAeO,IAAMI,SAAS,CAAC,EACrBL,IACAe,WACAE,UACAX,KAAK,EAAET,GAAGqB,MAAMpB,GAAGqB,KAAI,GACvBZ,MAAM,EAAEC,OAAOY,aAAaX,QAAQY,aAAY,GAChDC,MACA,GAAGC,KAAAA,MACS;;;WACZ,sBAAA,cAACC,UAAAA;MACCxB;MACAe;MAEEG;MACAC;MACAC;MACAC;MACAI,aAAa;MACbC,QAAQ;MACR,GAAGH;OAGJN,QAAAA;;;;;AAIE,IAAMf,QAAQ,CAAC,EACpBD,YACAD,IACAO,OAAO,IACPJ,MAAM,OACNC,SAAS,MAAK,MAC0E;;;WACxF,sBAAA,cAACC,QAAAA;MACCL;MACAO,MAAM;QAAEC,OAAOD;QAAME,QAAQF;MAAK;MAClCD,KAAKH,QAAQ,QAAQ;QAAEN,GAAGU;QAAMT,GAAGS,OAAO;MAAE,IAAI;QAAEV,GAAG;QAAGC,GAAGS,OAAO;MAAE;OAEpE,sBAAA,cAACoB,QAAAA;MACCL,MAAMlB,SAASwB,SAAY;MAC3Bd,QAAQ;MACRC,WAAWC,GAAGf,UAAAA;MACd4B,GAAGpC,WACDU,QAAQ,QACJ;QACE;UAAEN,GAAG;UAAGC,GAAG;QAAE;QACb;UAAED,GAAGU;UAAMT,GAAGS,OAAO;QAAE;QACvB;UAAEV,GAAG;UAAGC,GAAGS,OAAO;QAAE;UAEtB;QACE;UAAEV,GAAGU,OAAO;UAAGT,GAAG;QAAE;QACpB;UAAED,GAAG;UAAGC,GAAGS,OAAO;QAAE;QACpB;UAAEV,GAAGU,OAAO;UAAGT,GAAGS,OAAO;QAAE;SAEjCH,MAAAA;;;;;;AAMD,IAAM0B,cAAc,CAAC,EAC1B7B,YACAD,IACAO,MACAwB,OAAM,MACuD;;;WAC7D,sBAAA,cAACC,WAAAA;MACChC;MACAH,IAAIU,OAAO,IAAIwB,OAAOlC,KAAKU;MAC3BT,IAAIS,OAAO,IAAIwB,OAAOjC,KAAKS;MAC3BC,OAAOD;MACPE,QAAQF;MACR0B,cAAa;OAGb,sBAAA,cAACC,KAAAA;MAAEnB,WAAWC,GAAGf,UAAAA;OACf,sBAAA,cAACkC,QAAAA;MAAKC,IAAI;MAAGC,IAAI9B,OAAO;MAAG+B,IAAI/B;MAAMgC,IAAIhC,OAAO;QAChD,sBAAA,cAAC4B,QAAAA;MAAKC,IAAI7B,OAAO;MAAG8B,IAAI;MAAGC,IAAI/B,OAAO;MAAGgC,IAAIhC;;;;;;;;AC3HnD,IAAIiC,SAAS;AAMN,IAAMC,mBAAmB,CAACC,IAAiBC,OAAAA;AAChD,QAAMC,OAAOF,GAAGG,sBAAqB;AACrC,SAAO;IAAEC,GAAGH,GAAGI,UAAUH,KAAKE;IAAGE,GAAGL,GAAGM,UAAUL,KAAKM;EAAI;AAC5D;AAMO,IAAMC,SAAS,CAAcC,IAAQC,UAAU,UAAK;AACzD,MAAIA,SAAS;AACX,QAAI,CAACb,QAAQ;AAEXc,cAAQC,IAAI,wDAAA;AACZf,eAAS;IACX;AAECgB,WAAeC,UAAU,MAAA;AACxB,YAAMf,KAAKgB,SAASC,cAAc,kBAAkBP,EAAAA,IAAM;AACzDI,aAAeH,QAAQX,EAAAA;AAExBY,cAAQC,IAAIb,EAAAA;IACd;EACF;AAEA,SAAO;IAAE,CAACkB,YAAAA,GAAeR;EAAG;AAC9B;AAEO,IAAMS,iBAAiB,CAACnB,OAAAA;AAC5Bc,SAAeC,UAAU,MAAA;AACvBD,WAAeH,QAAQX,EAAAA;AACvBc,WAAeM,UAAUpB;AAE1BY,YAAQC,IAAI,wDAAA;AAEZD,YAAQC,IAAIb,EAAAA;EACd;AACF;AAEO,IAAMkB,eAAe;;;AFlC5B,IAAMG,iBAA+B;EACnCC,MAAM;AACR;AAKO,IAAMC,WAAW,CAACC,UAAwBH,mBAAc;AAC7D,QAAM,EAAEI,MAAMC,cAAa,IAAKC,iBAAAA;AAChCC,YAAU,MAAA;AACR,QAAI,CAACH,MAAM;AACT;IACF;AAEA,WAAOI,QAAQJ,MAAM;MACnB;QACEK,MAAM;QACNN,SAAS;UAAEO,SAAS;UAAMC,SAAS;QAAM;QACzCC,UAAU,CAACC,OAAAA;AACT,gBAAMC,UAAUC,eAAeF,EAAAA;AAC/B,cAAI,CAACG,SAASZ,IAAAA,KAAS,CAACU,SAAS;AAC/B;UACF;AAEAD,aAAGI,eAAc;AACjB,cAAIH,WAAW,CAACX,QAAQF,MAAM;AAC5B;UACF;AAGA,cAAIY,GAAGK,SAAS;AACd,gBAAI,CAACd,MAAM;AACT;YACF;AAGAC,0BAAc,CAAC,EAAEc,OAAOC,OAAM,MAAE;AAC9B,oBAAMC,MAAMC,iBAAiBlB,MAAMS,EAAAA;AACnC,oBAAMU,mBAAmB;AACzB,oBAAMC,WAAWL,QAAQM,KAAKC,IAAI,CAACb,GAAGc,SAASJ,gBAAAA;AAC/C,qBAAOK,iBAAiB;gBAAET;gBAAOC;gBAAQI;gBAAUH;cAAI,CAAA;YACzD,CAAA;UACF,OAAO;AACLhB,0BAAc,CAAC,EAAEc,OAAOC,QAAQ,EAAES,GAAGC,EAAC,EAAE,MAAE;AACxC,qBAAO;gBACLX;gBACAC,QAAQ;kBACNS,GAAGA,IAAIhB,GAAGkB;kBACVD,GAAGA,IAAIjB,GAAGc;gBACZ;cACF;YACF,CAAA;UACF;QACF;MACF;KACD;EACH,GAAG;IAACvB;GAAK;AACX;AAEA,IAAMW,iBAAiB,CAACF,OAAAA;AAEtB,MAAIA,GAAGK,WAAWL,GAAGmB,SAAS;AAE5B,WAAOP,KAAKQ,IAAIpB,GAAGc,MAAM,IAAI,KAAKF,KAAKQ,IAAIpB,GAAGqB,MAAM,IAAI;EAC1D;AAEA,SAAO;AACT;AAEA,IAAMlB,WAAW,CAACmB,YAAAA;AAChB,QAAMC,gBAAgBC,SAASD;AAC/B,MAAI,CAACA,eAAe;AAClB,WAAO;EACT;AAGA,MAAIE,eAAeF;AACnB,SAAOE,cAAcC,YAAYH,eAAe;AAC9CE,mBAAeA,aAAaC,WAAWH;EACzC;AAGA,MAAII,UAA8BL;AAClC,SAAOK,SAAS;AACd,QAAIA,YAAYJ,iBAAiBI,YAAYF,cAAc;AACzD,aAAO;IACT;AACAE,cAAUA,QAAQC;EACpB;AAEA,SAAO;AACT;;;AH3EO,IAAMC,SAASC,2BACpB,CAAC,EAAEC,UAAUC,YAAYC,OAAOC,SAAS,GAAGC,QAAQC,UAAUC,eAAe,GAAGC,MAAAA,GAASC,iBAAAA;;;AAEvF,UAAM,EAAEC,KAAKC,QAAQ,GAAGC,SAAS,EAAC,IAAKC,kBAAAA;AAGvC,UAAM,CAACC,OAAOC,QAAAA,IAAYC,SAAS,KAAA;AAGnC,UAAM,CAAC,EAAEb,OAAOE,OAAM,GAAIY,aAAAA,IAAiBD,SAA0B;MAAEb,OAAOC;MAAQC,QAAQC;IAAQ,CAAA;AACtGY,IAAAA,WAAU,MAAA;AACR,UAAIP,SAASC,UAAUP,WAAWE,eAAe;AAC/CU,sBAAc;UAAEd;UAAOE,QAAQ;YAAEc,GAAGR,QAAQ;YAAGS,GAAGR,SAAS;UAAE;QAAE,CAAA;MACjE;IACF,GAAG;MAACD;MAAOC;MAAQT;MAAOE;KAAO;AAGjC,UAAMgB,aAAaC,QAAQ,MAAM,IAAIC,iBAAAA,GAAoB,CAAA,CAAE;AAC3DL,IAAAA,WAAU,MAAA;AACRG,iBAAWG,OAAO;QAAEb;QAAOC;MAAO,GAAGT,OAAOE,MAAAA;AAC5C,UAAIA,WAAWE,eAAe;AAC5BQ,iBAAS,IAAA;MACX;IACF,GAAG;MAACM;MAAYlB;MAAOE;MAAQM;MAAOC;KAAO;AAG7C,UAAMa,SAASH,QAAuB,MAAA;AACpC,aAAO;;QAELI,WAAW,aAAarB,OAAOc,CAAC,OAAOd,OAAOe,CAAC,aAAajB,KAAAA;QAC5DwB,YAAYhB,SAASC,SAAS,YAAY;MAC5C;IACF,GAAG;MAACT;MAAOE;KAAO;AAGlBuB,wBACEnB,cACA,MAAA;AACE,aAAO;QACLQ,eAAe,OAAOI,gBAAAA;AACpBJ,wBAAcI,WAAAA;QAChB;MACF;IACF,GACA;MAACX;KAAI;AAGP,WACE,gBAAAmB,OAAA,cAACC,cAAcC,UAAQ;MACrBC,OAAO;QAAEC,MAAMvB,IAAIwB;QAASpB;QAAOH;QAAOC;QAAQT;QAAOE;QAAQoB;QAAQJ;QAAYJ;MAAc;OAEnG,gBAAAY,OAAA,cAACM,OAAAA;MAAIC,MAAK;MAAQ,GAAG5B;MAAO6B,WAAWC,IAAG,oCAAoCpC,UAAAA;MAAaQ;OACxFI,QAAQb,WAAW,IAAA,CAAA;;;;AAI5B,CAAA;;;;AMlFF,OAAOsC,UAASC,aAAAA,YAAWC,YAAYC,cAAc;AAGrD,SAASC,MAAAA,WAAU;AAgBnB,IAAMC,MAAM;AAEL,IAAMC,MAAM,CAAC,EAAEC,YAAYC,QAAQ,IAAIC,SAAS,IAAIC,MAAM,cAAa,MAAY;;;AACxF,UAAM,CAAC,EAAEC,KAAKC,KAAKC,IAAG,GAAIC,QAAAA,IAAYC,WACpC,CAACC,UAAAA;AACC,YAAMC,cAAcC,KAAKC,IAAG;AAC5B,UAAIF,cAAcD,MAAMI,WAAWf,KAAK;AACtC,cAAMgB,UAAU;aACX,IAAIC,MAAMC,KAAKC,OAAOP,cAAcD,MAAMI,WAAWf,OAAOA,GAAAA,CAAAA,EAAMoB,KAAK,CAAA;UAC1EF,KAAKX,IAAI,GAAGW,KAAKG,MAAOV,MAAMW,SAAStB,OAAQY,cAAcD,MAAMI,SAAO,CAAA;;AAE5E,eAAO;UACLR,KAAKW,KAAKX,IAAII,MAAMJ,KAAG,GAAKS,OAAAA;UAC5BR,KAAKU,KAAKK,IAAIZ,MAAMH,MAAMQ,QAAQQ,QAAQrB,KAAAA;UAC1CG,KAAK;eAAIK,MAAML;eAAQU;YAASS,MAAM,CAACtB,KAAAA;UACvCmB,QAAQ;UACRP,UAAUH;QACZ;MACF,OAAO;AACL,eAAO;UAAE,GAAGD;UAAOW,QAAQX,MAAMW,SAAS;QAAE;MAC9C;IACF,GACA;MACEf,KAAK;MACLC,KAAK;MACLF,KAAK,CAAA;MACLgB,QAAQ;MACRP,UAAUF,KAAKC,IAAG;IACpB,CAAA;AAGF,UAAMY,aAAaC,OAAAA;AACnB,UAAMC,OAAO,MAAA;AACXnB,eAAAA;AACAiB,iBAAWG,UAAUC,sBAAsBF,IAAAA;IAC7C;AAEAG,IAAAA,WAAU,MAAA;AACRL,iBAAWG,UAAUC,sBAAsBF,IAAAA;AAC3C,aAAO,MAAA;AACL,YAAIF,WAAWG,SAAS;AACtBG,+BAAqBN,WAAWG,OAAO;QACzC;MACF;IACF,GAAG,CAAA,CAAE;AAEL,WACE,gBAAAI,OAAA,cAACC,OAAAA;MACCC,OAAO;QAAEhC,OAAOA,QAAQ;MAAE;MAC1BiC,WAAWC,IACT,gCACA,6FACAnC,UAAAA;OAGF,gBAAA+B,OAAA,cAACC,OAAAA,MAAK5B,IAAIE,MAAM,CAAA,GAAG,MAAA,GACnB,gBAAAyB,OAAA,cAACC,OAAAA;MAAIE,WAAU;MAAkBD,OAAO;QAAE/B;MAAO;OAC9CE,IAAIgC,IAAI,CAACC,OAAOC,MACf,gBAAAP,OAAA,cAACC,OAAAA;MACCO,KAAK,OAAOD,CAAAA;MACZJ,WAAW/B;MACX8B,OAAO;QACLO,UAAU;QACVC,QAAQ;QACRC,OAAO,GAAGpC,MAAM,IAAIgC,CAAAA;QACpBpC,QAAQ,GAAIA,SAASmC,QAAShC,GAAAA;QAC9BJ,OAAO;MACT;;;;;AAMZ;;;;AC7FA,OAAO0C,UAASC,cAAAA,aAAYC,WAAAA,UAASC,aAAa;AAElD,SAASC,uBAA6C;AACtD,SAASC,MAAAA,WAAU;AAMnB,IAAMC,aAAa;EAAC,IAAI;EAAG;EAAG;EAAG;;AAEjC,IAAMC,kBAAkB;AACxB,IAAMC,gBAAuB;EAAEC,GAAG;EAAGC,GAAG;AAAE;AAE1C,IAAMC,WAAW,CAACC,QAAgBC,SAAiB,kBAAkBD,MAAAA,IAAUC,IAAAA;AASxE,IAAMC,gBAAgBC,gBAAAA,YAC3B,CACE,EAAEC,MAAMC,WAAWV,iBAAiBW,QAAQ,GAAGC,SAASX,eAAeY,WAAW,MAAMC,WAAU,GAClGC,iBAAAA;;;AAEA,UAAMC,SAASC,gBAAgBF,YAAAA;AAC/B,UAAMG,aAAaC,MAAAA;AACnB,UAAMC,QAAQC,SACZ,MACEtB,WACGuB,IAAI,CAACC,WAAW;MAAEC,IAAID;MAAOd,MAAMc,QAAQb,WAAWC;IAAM,EAAA,EAC5Dc,OAAO,CAAC,EAAEhB,KAAI,MAAOA,QAAQC,YAAYD,QAAQ,GAAA,GACtD;MAACC;MAAUC;KAAM;AAGnB,UAAM,EAAEe,QAAQ,GAAGC,SAAS,EAAC,IAAKX,OAAOY,SAASC,sBAAAA,KAA2B,CAAC;AAE9E,WACE,gBAAAC,OAAA,cAACC,OAAAA;MACE,GAAGC,OAAO,gBAAA;MACXC,KAAKjB;MACLkB,WAAWC,IACT,6EACA,sBACArB,UAAAA;OAIF,gBAAAgB,OAAA,cAACM,QAAAA,MACEhB,MAAME,IAAI,CAAC,EAAEE,IAAIf,KAAI,MACpB,gBAAAqB,OAAA,cAACO,aAAAA;MAAYC,KAAKd;MAAIA,IAAIpB,SAASc,YAAYM,EAAAA;MAAKZ;MAAgBH;UAGvEI,YACC,gBAAAiB,OAAA,cAAAA,OAAA,UAAA,MACE,gBAAAA,OAAA,cAACS,QAAAA;MAAKC,IAAI;MAAGC,IAAI7B,OAAOT;MAAGuC,IAAIhB;MAAOiB,IAAI/B,OAAOT;MAAG+B,WAAU;QAC9D,gBAAAJ,OAAA,cAACS,QAAAA;MAAKC,IAAI5B,OAAOV;MAAGuC,IAAI;MAAGC,IAAI9B,OAAOV;MAAGyC,IAAIhB;MAAQO,WAAU;SAGnE,gBAAAJ,OAAA,cAACc,KAAAA,MACExB,MAAME,IAAI,CAAC,EAAEE,GAAE,GAAIqB,MAClB,gBAAAf,OAAA,cAACgB,QAAAA;MACCR,KAAKd;MACLuB,SAAS,MAAMF,IAAI;MACnBG,MAAM,QAAQ5C,SAASc,YAAYM,EAAAA,CAAAA;MACnCE,OAAM;MACNC,QAAO;;;;;AAMnB,CAAA;AAIK,IAAMsB,OAAO,CAACC,UAAAA;;;AACnB,UAAM,EAAEvC,OAAOC,OAAM,IAAKuC,iBAAAA;AAC1B,WAAO,gBAAArB,OAAA,cAACvB,eAAAA;MAAe,GAAG2C;MAAOvC;MAAcC;;;;;AACjD;;;AClFA,SAASwC,cAAc;AAEhB,IAAMC,QAAQC,OAAOC,OAAO;EAAEC,GAAGF,OAAOG;EAAQC,GAAGJ,OAAOG;AAAO,CAAA;AACjE,IAAME,YAAYL,OAAOC,OAAO;EAAEK,OAAON,OAAOG;EAAQI,QAAQP,OAAOG;AAAO,CAAA;AAC9E,IAAMK,OAAOR,OAAOS,OAAOV,OAAOM,SAAAA;",
-  "names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "interpolate", "interpolateObject", "transition", "easeSinOut", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "bounds", "scale", "offset", "_bounds", "width", "height", "_scale", "_offset", "_toScreen", "identity", "_toModel", "update", "compose", "translateMatrix", "scaleMatrix", "inverse", "toScreen", "points", "applyToPoints", "toModel", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "transition", "ease", "easeSinOut", "duration", "tween", "t", "noop", "zoomTo", "cb", "interpolateObject", "on", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useCanvasContext", "useContext", "raise", "Error", "bindAll", "useEffect", "React", "mx", "createPath", "points", "join", "map", "x", "y", "Markers", "id", "classNames", "Arrow", "dir", "closed", "Marker", "pos", "size", "width", "height", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "offset", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "x", "clientX", "y", "clientY", "top", "testId", "id", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "inspectElement", "element", "defaultOptions", "zoom", "useWheel", "options", "root", "setProjection", "useCanvasContext", "useEffect", "bindAll", "type", "capture", "passive", "listener", "ev", "zooming", "isWheelZooming", "hasFocus", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "metaKey", "abs", "deltaZ", "element", "activeElement", "document", "shadowActive", "shadowRoot", "current", "parentElement", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOrigin", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "ready", "setReady", "useState", "setProjection", "useEffect", "x", "y", "projection", "useMemo", "ProjectionMapper", "update", "styles", "transform", "visibility", "useImperativeHandle", "React", "CanvasContext", "Provider", "value", "root", "current", "div", "role", "className", "mx", "React", "useEffect", "useReducer", "useRef", "mx", "SEC", "FPS", "classNames", "width", "height", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "Math", "floor", "fill", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "current", "requestAnimationFrame", "useEffect", "cancelAnimationFrame", "React", "div", "style", "className", "mx", "map", "frame", "i", "key", "position", "bottom", "right", "React", "forwardRef", "useMemo", "useId", "useForwardedRef", "mx", "gridRatios", "defaultGridSize", "defaultOffset", "x", "y", "createId", "parent", "grid", "GridComponent", "forwardRef", "size", "gridSize", "scale", "offset", "showAxes", "classNames", "forwardedRef", "svgRef", "useForwardedRef", "instanceId", "useId", "grids", "useMemo", "map", "ratio", "id", "filter", "width", "height", "current", "getBoundingClientRect", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "line", "x1", "y1", "x2", "y2", "g", "i", "rect", "opacity", "fill", "Grid", "props", "useCanvasContext", "Schema", "Point", "Schema", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type CSSProperties,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n} from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';\n\nexport interface CanvasController {\n  setProjection(projection: ProjectionState): Promise<void>;\n}\n\nexport type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;\n\n/**\n * Root canvas component.\n * Manages CSS projection.\n */\nexport const Canvas = forwardRef<CanvasController, CanvasProps>(\n  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Ready when initially resized.\n    const [ready, setReady] = useState(false);\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOrigin) {\n        setProjection({ scale, offset: { x: width / 2, y: height / 2 } });\n      }\n    }, [width, height, scale, offset]);\n\n    // Projection mapper.\n    const projection = useMemo(() => new ProjectionMapper(), []);\n    useEffect(() => {\n      projection.update({ width, height }, scale, offset);\n      if (offset !== defaultOrigin) {\n        setReady(true);\n      }\n    }, [projection, scale, offset, width, height]);\n\n    // CSS transforms.\n    const styles = useMemo<CSSProperties>(() => {\n      return {\n        // NOTE: Order is important.\n        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,\n        visibility: width && height ? 'visible' : 'hidden',\n      };\n    }, [scale, offset]);\n\n    // Controller.\n    useImperativeHandle(forwardedRef, () => {\n      return {\n        setProjection: async (projection: ProjectionState) => {\n          setProjection(projection);\n        },\n      };\n    }, [ref]);\n\n    return (\n      <CanvasContext.Provider\n        value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {ready ? children : null}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { easeSinOut, interpolate, interpolateObject, transition } from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  identity,\n  inverse,\n  scale as scaleMatrix,\n  translate as translateMatrix,\n} from 'transformation-matrix';\n\nimport { type Dimension, type Point } from '../types';\n\nexport const defaultOrigin: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n/**\n * Maps between screen and model coordinates.\n */\nexport interface Projection {\n  get bounds(): Dimension;\n  get scale(): number;\n  get offset(): Point;\n\n  /**\n   * Maps the model space to the screen offset (from the top-left of the element).\n   */\n  toScreen(points: Point[]): Point[];\n\n  /**\n   * Maps the pointer coordinate (from the top-left of the element) to the model space.\n   */\n  toModel(points: Point[]): Point[];\n}\n\nexport class ProjectionMapper implements Projection {\n  private _bounds: Dimension = { width: 0, height: 0 };\n  private _scale: number = 1;\n  private _offset: Point = defaultOrigin;\n  private _toScreen: Matrix = identity();\n  private _toModel: Matrix = identity();\n\n  constructor(bounds?: Dimension, scale?: number, offset?: Point) {\n    if (bounds && scale && offset) {\n      this.update(bounds, scale, offset);\n    }\n  }\n\n  update(bounds: Dimension, scale: number, offset: Point): this {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(\n      // NOTE: Order is important.\n      translateMatrix(this._offset.x, this._offset.y),\n      scaleMatrix(this._scale),\n      // TODO(burdon): Flip.\n      // flipX(),\n    );\n    this._toModel = inverse(this._toScreen);\n    return this;\n  }\n\n  get bounds() {\n    return this._bounds;\n  }\n\n  get scale() {\n    return this._scale;\n  }\n\n  get offset() {\n    return this._offset;\n  }\n\n  toScreen(points: Point[]): Point[] {\n    return applyToPoints(this._toScreen, points);\n  }\n\n  toModel(points: Point[]): Point[] {\n    return applyToPoints(this._toModel, points);\n  }\n}\n\n/**\n * Maintain position while zooming.\n */\nexport const getZoomTransform = ({\n  scale,\n  offset,\n  pos,\n  newScale,\n}: ProjectionState & { pos: Point; newScale: number }): ProjectionState => {\n  return {\n    scale: newScale,\n    offset: {\n      x: pos.x - (pos.x - offset.x) * (newScale / scale),\n      y: pos.y - (pos.y - offset.y) * (newScale / scale),\n    },\n  };\n};\n\n/**\n * Zoom while keeping the specified position in place.\n */\n// TODO(burdon): Convert to object.\nexport const zoomInPlace = (\n  setTransform: (state: ProjectionState) => void,\n  pos: Point,\n  offset: Point,\n  current: number,\n  next: number,\n  delay = 200,\n) => {\n  const is = interpolate(current, next);\n  transition()\n    .ease(easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\n\nconst noop = () => {};\n\n/**\n * Zoom to new scale and position.\n */\n// TODO(burdon): Convert to object.\nexport const zoomTo = (\n  setTransform: (state: ProjectionState) => void,\n  current: ProjectionState,\n  next: ProjectionState,\n  delay = 200,\n  cb = noop,\n) => {\n  const is = interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  transition()\n    .ease(easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    })\n    .on('end', cb);\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { type CSSProperties, type Dispatch, type SetStateAction, createContext, useContext } from 'react';\n\nimport { raise } from '@dxos/debug';\n\nimport { type Projection, type ProjectionState } from './projection';\n\nexport type CanvasContext = ProjectionState & {\n  root: HTMLDivElement;\n  ready: boolean;\n  width: number;\n  height: number;\n  styles: CSSProperties;\n  projection: Projection;\n  setProjection: Dispatch<SetStateAction<ProjectionState>>;\n};\n\n/**\n * @internal\n */\n// TODO(burdon): Use radix?\nexport const CanvasContext = createContext<CanvasContext | null>(null);\n\nexport const useCanvasContext = (): CanvasContext => {\n  return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { bindAll } from 'bind-event-listener';\nimport { useEffect } from 'react';\n\nimport { getRelativePoint } from '../util';\n\nimport { getZoomTransform } from './projection';\nimport { useCanvasContext } from './useCanvasContext';\n\nexport type WheelOptions = {\n  zoom?: boolean;\n};\n\nconst defaultOptions: WheelOptions = {\n  zoom: true,\n};\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (options: WheelOptions = defaultOptions) => {\n  const { root, setProjection } = useCanvasContext();\n  useEffect(() => {\n    if (!root) {\n      return;\n    }\n\n    return bindAll(root, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          const zooming = isWheelZooming(ev);\n          if (!hasFocus(root) && !zooming) {\n            return;\n          }\n\n          ev.preventDefault();\n          if (zooming && !options.zoom) {\n            return;\n          }\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!root) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(root, ev);\n              const scaleSensitivity = 0.01;\n              const newScale = scale * Math.exp(-ev.deltaY * scaleSensitivity);\n              return getZoomTransform({ scale, offset, newScale, pos });\n            });\n          } else {\n            setProjection(({ scale, offset: { x, y } }) => {\n              return {\n                scale,\n                offset: {\n                  x: x - ev.deltaX,\n                  y: y - ev.deltaY,\n                },\n              };\n            });\n          }\n        },\n      },\n    ]);\n  }, [root]);\n};\n\nconst isWheelZooming = (ev: WheelEvent): boolean => {\n  // Check for ctrl/cmd key + wheel action.\n  if (ev.ctrlKey || ev.metaKey) {\n    // Some browsers use deltaY, others deltaZ for zoom.\n    return Math.abs(ev.deltaY) > 0 || Math.abs(ev.deltaZ) > 0;\n  }\n\n  return false;\n};\n\nconst hasFocus = (element: HTMLElement): boolean => {\n  const activeElement = document.activeElement;\n  if (!activeElement) {\n    return false;\n  }\n\n  // Handle shadow DOM.\n  let shadowActive = activeElement;\n  while (shadowActive?.shadowRoot?.activeElement) {\n    shadowActive = shadowActive.shadowRoot.activeElement;\n  }\n\n  // Check if element or any parent has focus.\n  let current: HTMLElement | null = element;\n  while (current) {\n    if (current === activeElement || current === shadowActive) {\n      return true;\n    }\n    current = current.parentElement;\n  }\n\n  return false;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { type PropsWithChildren, type SVGProps } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Dimension, type Point } from '../types';\n\n// Refs\n//  - https://airbnb.io/visx/gallery\n//  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts\n\nexport const createPath = (points: Point[], join = false) => {\n  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');\n};\n\n/**\n * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n * NOTE: Leave space around shape for line width.\n */\nexport const Markers = ({ id = 'dx-marker', classNames }: ThemedClassName<{ id?: string }>) => {\n  return (\n    <>\n      <Arrow id={`${id}-arrow-start`} dir='start' classNames={classNames} />\n      <Arrow id={`${id}-arrow-end`} dir='end' classNames={classNames} />\n      <Arrow id={`${id}-triangle-start`} dir='start' closed classNames={classNames} />\n      <Arrow id={`${id}-triangle-end`} dir='end' closed classNames={classNames} />\n      <Marker id={`${id}-circle`} pos={{ x: 8, y: 8 }} size={{ width: 16, height: 16 }}>\n        <circle cx={8} cy={8} r={5} stroke={'context-stroke'} className={mx(classNames)} />\n      </Marker>\n    </>\n  );\n};\n\nexport type MarkerProps = SVGProps<SVGMarkerElement> &\n  PropsWithChildren<\n    ThemedClassName<{\n      id: string;\n      pos: Point;\n      size: Dimension;\n      fill?: boolean;\n    }>\n  >;\n\n/**\n * https://www.w3.org/TR/SVG2/painting.html#Markers\n */\nexport const Marker = ({\n  id,\n  className,\n  children,\n  pos: { x: refX, y: refY },\n  size: { width: markerWidth, height: markerHeight },\n  fill,\n  ...rest\n}: MarkerProps) => (\n  <marker\n    id={id}\n    className={className}\n    {...{\n      refX,\n      refY,\n      markerWidth,\n      markerHeight,\n      markerUnits: 'strokeWidth',\n      orient: 'auto',\n      ...rest,\n    }}\n  >\n    {children}\n  </marker>\n);\n\nexport const Arrow = ({\n  classNames,\n  id,\n  size = 16,\n  dir = 'end',\n  closed = false,\n}: ThemedClassName<{ id: string; size?: number; dir?: 'start' | 'end'; closed?: boolean }>) => (\n  <Marker\n    id={id}\n    size={{ width: size, height: size }}\n    pos={dir === 'end' ? { x: size, y: size / 2 } : { x: 0, y: size / 2 }}\n  >\n    <path\n      fill={closed ? undefined : 'none'}\n      stroke={'context-stroke'}\n      className={mx(classNames)}\n      d={createPath(\n        dir === 'end'\n          ? [\n              { x: 1, y: 1 },\n              { x: size, y: size / 2 },\n              { x: 1, y: size - 1 },\n            ]\n          : [\n              { x: size - 1, y: 1 },\n              { x: 0, y: size / 2 },\n              { x: size - 1, y: size - 1 },\n            ],\n        closed,\n      )}\n    />\n  </Marker>\n);\n\nexport const GridPattern = ({\n  classNames,\n  id,\n  size,\n  offset,\n}: ThemedClassName<{ 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    {/* TODO(burdon): vars. */}\n    <g className={mx(classNames)}>\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    </g>\n  </pattern>\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nlet logged = false;\n\n/**\n * Get the relative point of the cursor.\n * NOTE: ev.offset returns the position relative to the target.\n */\nexport const getRelativePoint = (el: HTMLElement, ev: MouseEvent) => {\n  const rect = el.getBoundingClientRect();\n  return { x: ev.clientX - rect.x, y: ev.clientY - rect.top };\n};\n\n/**\n *\n */\n// TODO(burdon): Factor out.\nexport const testId = <ID = string>(id: ID, inspect = false) => {\n  if (inspect) {\n    if (!logged) {\n      // eslint-disable-next-line no-console\n      console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n      logged = true;\n    }\n\n    (window as any).INSPECT = () => {\n      const el = document.querySelector(`[data-test-id=\"${id}\"]`);\n      (window as any).inspect(el);\n      // eslint-disable-next-line no-console\n      console.log(el);\n    };\n  }\n\n  return { [DATA_TEST_ID]: id };\n};\n\nexport const inspectElement = (el: Element) => {\n  (window as any).INSPECT = () => {\n    (window as any).inspect(el);\n    (window as any).element = el;\n    // eslint-disable-next-line no-console\n    console.log('Open storybook in expanded window;\\nthen run INSPECT()');\n    // eslint-disable-next-line no-console\n    console.log(el);\n  };\n};\n\nexport const DATA_TEST_ID = 'data-test-id';\n", "//\n// Copyright 2024 DXOS.org\n// Adapted from: https://github.com/smplrspace/react-fps-stats\n//\n\nimport React, { useEffect, useReducer, useRef } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nexport type FPSProps = ThemedClassName<{\n  width?: number;\n  height?: number;\n  bar?: string;\n}>;\n\ntype State = {\n  max: number;\n  len: number;\n  fps: number[];\n  frames: number;\n  prevTime: number;\n};\n\nconst SEC = 1_000;\n\nexport const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {\n  const [{ fps, max, len }, dispatch] = useReducer(\n    (state: State) => {\n      const currentTime = Date.now();\n      if (currentTime > state.prevTime + SEC) {\n        const nextFPS = [\n          ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),\n          Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),\n        ];\n        return {\n          max: Math.max(state.max, ...nextFPS),\n          len: Math.min(state.len + nextFPS.length, width),\n          fps: [...state.fps, ...nextFPS].slice(-width),\n          frames: 1,\n          prevTime: currentTime,\n        };\n      } else {\n        return { ...state, frames: state.frames + 1 };\n      }\n    },\n    {\n      max: 0,\n      len: 0,\n      fps: [],\n      frames: 0,\n      prevTime: Date.now(),\n    },\n  );\n\n  const requestRef = useRef<number>();\n  const tick = () => {\n    dispatch();\n    requestRef.current = requestAnimationFrame(tick);\n  };\n\n  useEffect(() => {\n    requestRef.current = requestAnimationFrame(tick);\n    return () => {\n      if (requestRef.current) {\n        cancelAnimationFrame(requestRef.current);\n      }\n    };\n  }, []);\n\n  return (\n    <div\n      style={{ width: width + 6 }}\n      className={mx(\n        'relative flex flex-col p-0.5',\n        'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',\n        classNames,\n      )}\n    >\n      <div>{fps[len - 1]} FPS</div>\n      <div className='w-full relative' style={{ height }}>\n        {fps.map((frame, i) => (\n          <div\n            key={`fps-${i}`}\n            className={bar}\n            style={{\n              position: 'absolute',\n              bottom: 0,\n              right: `${len - 1 - i}px`,\n              height: `${(height * frame) / max}px`,\n              width: 1,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport React, { forwardRef, useId, useMemo } from 'react';\n\nimport { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { useCanvasContext } from '../../hooks';\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultGridSize = 16;\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{\n  size?: number;\n  scale?: number;\n  offset?: Point;\n  showAxes?: boolean;\n}>;\n\nexport const GridComponent = forwardRef<SVGSVGElement, GridProps>(\n  (\n    { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },\n    forwardedRef,\n  ) => {\n    const svgRef = useForwardedRef(forwardedRef);\n    const instanceId = useId();\n    const grids = useMemo(\n      () =>\n        gridRatios\n          .map((ratio) => ({ id: ratio, size: ratio * gridSize * scale }))\n          .filter(({ size }) => size >= gridSize && size <= 256),\n      [gridSize, scale],\n    );\n\n    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};\n\n    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={svgRef}\n        className={mx(\n          'absolute inset-0 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 }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(instanceId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n\n// TODO(burdon): Use id of parent canvas.\nexport const Grid = (props: GridProps) => {\n  const { scale, offset } = useCanvasContext();\n  return <GridComponent {...props} scale={scale} offset={offset} />;\n};\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { Schema } from 'effect';\n\nexport const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });\nexport const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });\nexport const Rect = Schema.extend(Point, Dimension);\n\nexport type Point = Schema.Schema.Type<typeof Point>;\nexport type Dimension = Schema.Schema.Type<typeof Dimension>;\nexport type Rect = Schema.Schema.Type<typeof Rect>;\n"],
+  "mappings": "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",
+  "names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "easeSinOut", "interpolate", "interpolateObject", "transition", "applyToPoints", "compose", "identity", "inverse", "scale", "scaleMatrix", "translate", "translateMatrix", "defaultOrigin", "x", "y", "ProjectionMapper", "update", "bounds", "scale", "offset", "_bounds", "_scale", "_offset", "_toScreen", "compose", "translateMatrix", "scaleMatrix", "_toModel", "inverse", "toScreen", "points", "applyToPoints", "toModel", "width", "height", "identity", "getZoomTransform", "pos", "newScale", "zoomInPlace", "setTransform", "current", "next", "delay", "is", "interpolate", "transition", "ease", "easeSinOut", "duration", "tween", "t", "noop", "zoomTo", "cb", "interpolateObject", "on", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useCanvasContext", "useContext", "raise", "Error", "bindAll", "useEffect", "React", "mx", "createPath", "points", "join", "map", "x", "y", "Markers", "id", "classNames", "Arrow", "dir", "closed", "Marker", "pos", "size", "width", "height", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "offset", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "x", "clientX", "y", "clientY", "top", "testId", "id", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "inspectElement", "element", "defaultOptions", "zoom", "useWheel", "options", "root", "setProjection", "useCanvasContext", "useEffect", "bindAll", "type", "capture", "passive", "listener", "ev", "zooming", "isWheelZooming", "hasFocus", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "metaKey", "abs", "deltaZ", "element", "activeElement", "document", "shadowActive", "shadowRoot", "current", "parentElement", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOrigin", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "ready", "setReady", "useState", "setProjection", "useEffect", "x", "y", "projection", "useMemo", "ProjectionMapper", "update", "styles", "transform", "visibility", "useImperativeHandle", "React", "CanvasContext", "Provider", "value", "root", "current", "div", "role", "className", "mx", "React", "useEffect", "useReducer", "useRef", "mx", "SEC", "FPS", "classNames", "width", "height", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "Math", "floor", "fill", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "current", "requestAnimationFrame", "useEffect", "cancelAnimationFrame", "React", "div", "style", "className", "mx", "map", "frame", "i", "key", "position", "bottom", "right", "React", "forwardRef", "useId", "useMemo", "useForwardedRef", "mx", "gridRatios", "defaultGridSize", "defaultOffset", "x", "y", "createId", "parent", "grid", "GridComponent", "forwardRef", "size", "gridSize", "scale", "offset", "showAxes", "classNames", "forwardedRef", "svgRef", "useForwardedRef", "instanceId", "useId", "grids", "useMemo", "map", "ratio", "id", "filter", "width", "height", "current", "getBoundingClientRect", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "line", "x1", "y1", "x2", "y2", "g", "i", "rect", "opacity", "fill", "Grid", "props", "useCanvasContext", "Schema", "Point", "Schema", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11720,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytes":2106,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytes":13306,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytes":4738,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":539,"imports":[{"path":"packages/ui/react-ui-canvas/src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"packages/ui/react-ui-canvas/src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytes":10142,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":675,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytes":9642,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytes":483,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytes":9356,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytes":9774,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytes":475,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytes":631,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"packages/ui/react-ui-canvas/src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"packages/ui/react-ui-canvas/src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"packages/ui/react-ui-canvas/src/types.ts":{"bytes":1694,"imports":[{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":715,"imports":[{"path":"packages/ui/react-ui-canvas/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-canvas/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/ui/react-ui-canvas/src/types.ts","kind":"import-statement","original":"./types"},{"path":"packages/ui/react-ui-canvas/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":35710},"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridComponent","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOrigin","getRelativePoint","getZoomTransform","inspectElement","testId","useCanvasContext","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":2301},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2244},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx":{"bytesInOutput":260},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":2116},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":3523},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":800},"packages/ui/react-ui-canvas/src/components/Canvas/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/components/FPS.tsx":{"bytesInOutput":2356},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":2507},"packages/ui/react-ui-canvas/src/components/Grid/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/types.ts":{"bytesInOutput":232}},"bytes":17329}}}
+{"inputs":{"src/hooks/projection.tsx":{"bytes":12183,"imports":[{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true}],"format":"esm"},"src/hooks/useCanvasContext.tsx":{"bytes":2093,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"src/util/svg.tsx":{"bytes":13293,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/util/util.ts":{"bytes":4725,"imports":[],"format":"esm"},"src/util/index.ts":{"bytes":526,"imports":[{"path":"src/util/svg.tsx","kind":"import-statement","original":"./svg"},{"path":"src/util/util.ts","kind":"import-statement","original":"./util"}],"format":"esm"},"src/hooks/useWheel.tsx":{"bytes":10133,"imports":[{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/util/index.ts","kind":"import-statement","original":"../util"},{"path":"src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"}],"format":"esm"},"src/hooks/index.ts":{"bytes":662,"imports":[{"path":"src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"src/hooks/useCanvasContext.tsx","kind":"import-statement","original":"./useCanvasContext"},{"path":"src/hooks/useWheel.tsx","kind":"import-statement","original":"./useWheel"}],"format":"esm"},"src/components/Canvas/Canvas.tsx":{"bytes":9573,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"src/hooks/index.ts","kind":"import-statement","original":"../../hooks"}],"format":"esm"},"src/components/Canvas/index.ts":{"bytes":470,"imports":[{"path":"src/components/Canvas/Canvas.tsx","kind":"import-statement","original":"./Canvas"}],"format":"esm"},"src/components/FPS.tsx":{"bytes":9342,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"src/components/Grid/Grid.tsx":{"bytes":9761,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"src/hooks/index.ts","kind":"import-statement","original":"../../hooks"},{"path":"src/util/index.ts","kind":"import-statement","original":"../../util"}],"format":"esm"},"src/components/Grid/index.ts":{"bytes":462,"imports":[{"path":"src/components/Grid/Grid.tsx","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/components/index.ts":{"bytes":618,"imports":[{"path":"src/components/Canvas/index.ts","kind":"import-statement","original":"./Canvas"},{"path":"src/components/FPS.tsx","kind":"import-statement","original":"./FPS"},{"path":"src/components/Grid/index.ts","kind":"import-statement","original":"./Grid"}],"format":"esm"},"src/types.ts":{"bytes":1681,"imports":[{"path":"effect","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":702,"imports":[{"path":"src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"src/types.ts","kind":"import-statement","original":"./types"},{"path":"src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":35769},"dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-resize-detector","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"d3","kind":"import-statement","external":true},{"path":"transformation-matrix","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"bind-event-listener","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridComponent","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOrigin","getRelativePoint","getZoomTransform","inspectElement","testId","useCanvasContext","useWheel","zoomInPlace","zoomTo"],"entryPoint":"src/index.ts","inputs":{"src/components/Canvas/Canvas.tsx":{"bytesInOutput":2301},"src/hooks/projection.tsx":{"bytesInOutput":2592},"src/hooks/index.ts":{"bytesInOutput":0},"src/hooks/useCanvasContext.tsx":{"bytesInOutput":260},"src/hooks/useWheel.tsx":{"bytesInOutput":2116},"src/util/svg.tsx":{"bytesInOutput":3523},"src/util/index.ts":{"bytesInOutput":0},"src/util/util.ts":{"bytesInOutput":800},"src/components/Canvas/index.ts":{"bytesInOutput":0},"src/components/index.ts":{"bytesInOutput":0},"src/components/FPS.tsx":{"bytesInOutput":2356},"src/components/Grid/Grid.tsx":{"bytesInOutput":2507},"src/components/Grid/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0},"src/types.ts":{"bytesInOutput":232}},"bytes":17369}}}

package/dist/lib/node-esm/index.mjs

@@ -1,32 +1,32 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
-// packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
+// src/components/Canvas/Canvas.tsx
 import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import React2, { forwardRef, useEffect as useEffect2, useImperativeHandle, useMemo, useState } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
-// packages/ui/react-ui-canvas/src/hooks/projection.tsx
-import { interpolate, interpolateObject, transition, easeSinOut } from "d3";
+// src/hooks/projection.tsx
+import { easeSinOut, interpolate, interpolateObject, transition } from "d3";
 import { applyToPoints, compose, identity, inverse, scale as scaleMatrix, translate as translateMatrix } from "transformation-matrix";
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var defaultOrigin = {
   x: 0,
   y: 0
 };
 var ProjectionMapper = class {
-  constructor(bounds, scale, offset) {
-    this._bounds = {
-      width: 0,
-      height: 0
-    };
-    this._scale = 1;
-    this._offset = defaultOrigin;
-    this._toScreen = identity();
-    this._toModel = identity();
-    if (bounds && scale && offset) {
-      this.update(bounds, scale, offset);
-    }
-  }
   update(bounds, scale, offset) {
     this._bounds = bounds;
     this._scale = scale;
@@ -54,6 +54,19 @@ var ProjectionMapper = class {
   toModel(points) {
     return applyToPoints(this._toModel, points);
   }
+  constructor(bounds, scale, offset) {
+    _define_property(this, "_bounds", {
+      width: 0,
+      height: 0
+    });
+    _define_property(this, "_scale", 1);
+    _define_property(this, "_offset", defaultOrigin);
+    _define_property(this, "_toScreen", identity());
+    _define_property(this, "_toModel", identity());
+    if (bounds && scale && offset) {
+      this.update(bounds, scale, offset);
+    }
+  }
 };
 var getZoomTransform = ({ scale, offset, pos, newScale }) => {
   return {
@@ -98,7 +111,7 @@ var zoomTo = (setTransform, current, next, delay = 200, cb = noop) => {
   }).on("end", cb);
 };
 
-// packages/ui/react-ui-canvas/src/hooks/useCanvasContext.tsx
+// src/hooks/useCanvasContext.tsx
 import { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
 var CanvasContext = /* @__PURE__ */ createContext(null);
@@ -106,11 +119,11 @@ var useCanvasContext = () => {
   return useContext(CanvasContext) ?? raise(new Error("Missing CanvasContext"));
 };
 
-// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+// src/hooks/useWheel.tsx
 import { bindAll } from "bind-event-listener";
 import { useEffect } from "react";
 
-// packages/ui/react-ui-canvas/src/util/svg.tsx
+// src/util/svg.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
 import { mx } from "@dxos/react-ui-theme";
@@ -261,7 +274,7 @@ var GridPattern = ({ classNames, id, size, offset }) => {
   }
 };
 
-// packages/ui/react-ui-canvas/src/util/util.ts
+// src/util/util.ts
 var logged = false;
 var getRelativePoint = (el, ev) => {
   const rect = el.getBoundingClientRect();
@@ -296,7 +309,7 @@ var inspectElement = (el) => {
 };
 var DATA_TEST_ID = "data-test-id";
 
-// packages/ui/react-ui-canvas/src/hooks/useWheel.tsx
+// src/hooks/useWheel.tsx
 var defaultOptions = {
   zoom: true
 };
@@ -380,7 +393,7 @@ var hasFocus = (element) => {
   return false;
 };
 
-// packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx
+// src/components/Canvas/Canvas.tsx
 var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
   var _effect = _useSignals2();
   try {
@@ -464,7 +477,7 @@ var Canvas = /* @__PURE__ */ forwardRef(({ children, classNames, scale: _scale =
   }
 });
 
-// packages/ui/react-ui-canvas/src/components/FPS.tsx
+// src/components/FPS.tsx
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3, { useEffect as useEffect3, useReducer, useRef } from "react";
 import { mx as mx3 } from "@dxos/react-ui-theme";
@@ -541,9 +554,9 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
   }
 };
 
-// packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx
+// src/components/Grid/Grid.tsx
 import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { forwardRef as forwardRef2, useMemo as useMemo2, useId } from "react";
+import React4, { forwardRef as forwardRef2, useId, useMemo as useMemo2 } from "react";
 import { useForwardedRef } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var gridRatios = [
@@ -617,7 +630,7 @@ var Grid = (props) => {
   }
 };
 
-// packages/ui/react-ui-canvas/src/types.ts
+// src/types.ts
 import { Schema } from "effect";
 var Point = Schema.Struct({
   x: Schema.Number,