@dxos/react-ui-canvas 0.7.5-main.9d2a38b → 0.7.5-main.e9bb01b

package/dist/lib/browser/index.mjs

@@ -428,7 +428,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
     style: {
       width: width + 6
     },
-    className: mx3("relative flex flex-col p-0.5", "bg-base text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
+    className: mx3("relative flex flex-col p-0.5", "bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
   }, /* @__PURE__ */ React3.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ React3.createElement("div", {
     className: "w-full relative",
     style: {

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/useProjection.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 PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\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 { defaultOffset, 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 = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\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    }, [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, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\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 = defaultOffset;\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) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\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 = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\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) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\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  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 useProjection = (): 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 { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, 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  }, [el, setProjection]);\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: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} 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 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-base 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 } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\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    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\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(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type CSSProperties,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\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 { defaultOffset, 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 = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\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    }, [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, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\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 = defaultOffset;\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) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\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 = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\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) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\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  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 useProjection = (): 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 { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, 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  }, [el, setProjection]);\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: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} 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 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 } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\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    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\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(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
+  "mappings": ";AAIA,OAAOA,UAGLC,YACAC,aAAAA,YACAC,qBACAC,SACAC,gBAEK;AACP,SAASC,yBAAyB;AAGlC,SAASC,MAAAA,WAAU;;;ACbnB,YAAYC,QAAQ;AACpB,SAEEC,eACAC,SACAC,SACAC,aAAaC,iBACbC,UACAC,SAASC,mBACJ;AAIA,IAAMC,gBAAuB;EAAEC,GAAG;EAAGC,GAAG;AAAE;AA8B1C,IAAMC,mBAAN,MAAMA;EAOXC,YAAYC,QAAoBC,OAAgBC,QAAgB;AANxDC,mBAAqB;MAAEC,OAAO;MAAGC,QAAQ;IAAE;AAC3CC,kBAAiB;AACjBC,mBAAiBZ;AACjBa,qBAAoBC,SAAAA;AACpBC,oBAAmBD,SAAAA;AAGzB,QAAIT,UAAUC,SAASC,QAAQ;AAC7B,WAAKS,OAAOX,QAAQC,OAAOC,MAAAA;IAC7B;EACF;EAEAS,OAAOX,QAAmBC,OAAeC,QAAe;AACtD,SAAKC,UAAUH;AACf,SAAKM,SAASL;AACd,SAAKM,UAAUL;AACf,SAAKM,YAAYI,QAAQC,gBAAgB,KAAKN,QAAQX,GAAG,KAAKW,QAAQV,CAAC,GAAGiB,YAAY,KAAKR,MAAM,CAAA;AACjG,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;MACNN,GAAGyB,IAAIzB,KAAKyB,IAAIzB,IAAIM,OAAON,MAAM0B,WAAWrB;MAC5CJ,GAAGwB,IAAIxB,KAAKwB,IAAIxB,IAAIK,OAAOL,MAAMyB,WAAWrB;IAC9C;EACF;AACF;AAMO,IAAMsB,cAAc,CACzBC,cACAH,KACAnB,QACAuB,SACAC,MACAC,QAAQ,QAAG;AAEX,QAAMC,KAAQC,eAAYJ,SAASC,IAAAA;AACnCI,EAAGC,cAAU,EACVC,KAAQC,aAAU,EAClBC,SAASP,KAAAA,EACTQ,MAAM,QAAQ,MAAM,CAACC,MAAAA;AACpB,UAAMd,WAAWM,GAAGQ,CAAAA;AACpBZ,iBAAaJ,iBAAiB;MAAEnB,OAAOwB;MAASH;MAAUpB;MAAQmB;IAAI,CAAA,CAAA;EACxE,CAAA;AACJ;AAMO,IAAMgB,SAAS,CACpBb,cACAC,SACAC,MACAC,QAAQ,QAAG;AAEX,QAAMC,KAAQU,qBAAkB;IAAErC,OAAOwB,QAAQxB;IAAO,GAAGwB,QAAQvB;EAAO,GAAG;IAAED,OAAOyB,KAAKzB;IAAO,GAAGyB,KAAKxB;EAAO,CAAA;AACjH4B,EAAGC,cAAU,EACVC,KAAQC,aAAU,EAClBC,SAASP,KAAAA,EACTQ,MAAM,QAAQ,MAAM,CAACC,MAAAA;AACpB,UAAM,EAAEnC,OAAOL,GAAGC,EAAC,IAAK+B,GAAGQ,CAAAA;AAC3BZ,iBAAa;MAAEvB;MAAOC,QAAQ;QAAEN;QAAGC;MAAE;IAAE,CAAA;EACzC,CAAA;AACJ;;;AChJA,SAAiE0C,eAAeC,kBAAkB;AAElG,SAASC,aAAa;AAiBf,IAAMC,gBAAgBC,8BAAoC,IAAA;AAE1D,IAAMC,gBAAgB,MAAA;AAC3B,SAAOC,WAAWH,aAAAA,KAAkBI,MAAM,IAAIC,MAAM,uBAAA,CAAA;AACtD;;;ACvBA,SAASC,eAAe;AACxB,SAA6CC,iBAAiB;;;ACD9D,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,SACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAACC,OAAAA;IAAMF,IAAI,GAAGA,EAAAA;IAAkBG,KAAI;IAAQF;MAC5C,sBAAA,cAACC,OAAAA;IAAMF,IAAI,GAAGA,EAAAA;IAAgBG,KAAI;IAAMF;MACxC,sBAAA,cAACC,OAAAA;IAAMF,IAAI,GAAGA,EAAAA;IAAqBG,KAAI;IAAQC,QAAAA;IAAOH;MACtD,sBAAA,cAACC,OAAAA;IAAMF,IAAI,GAAGA,EAAAA;IAAmBG,KAAI;IAAMC,QAAAA;IAAOH;MAClD,sBAAA,cAACI,QAAAA;IAAOL,IAAI,GAAGA,EAAAA;IAAaM,KAAK;MAAET,GAAG;MAAGC,GAAG;IAAE;IAAGS,MAAM;MAAEC,OAAO;MAAIC,QAAQ;IAAG;KAC7E,sBAAA,cAACC,UAAAA;IAAOC,IAAI;IAAGC,IAAI;IAAGC,GAAG;IAAGC,QAAQ;IAAkBC,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,MAEH,sBAAA,cAACC,UAAAA;EACCxB;EACAe;EAEEG;EACAC;EACAC;EACAC;EACAI,aAAa;EACbC,QAAQ;EACR,GAAGH;GAGJN,QAAAA;AAIE,IAAMf,QAAQ,CAAC,EACpBD,YACAD,IACAO,OAAO,IACPJ,MAAM,OACNC,SAAS,MAAK,MAEd,sBAAA,cAACC,QAAAA;EACCL;EACAO,MAAM;IAAEC,OAAOD;IAAME,QAAQF;EAAK;EAClCD,KAAKH,QAAQ,QAAQ;IAAEN,GAAGU;IAAMT,GAAGS,OAAO;EAAE,IAAI;IAAEV,GAAG;IAAGC,GAAGS,OAAO;EAAE;GAEpE,sBAAA,cAACoB,QAAAA;EACCL,MAAMlB,SAASwB,SAAY;EAC3Bd,QAAQ;EACRC,WAAWC,GAAGf,UAAAA;EACd4B,GAAGpC,WACDU,QAAQ,QACJ;IACE;MAAEN,GAAG;MAAGC,GAAG;IAAE;IACb;MAAED,GAAGU;MAAMT,GAAGS,OAAO;IAAE;IACvB;MAAEV,GAAG;MAAGC,GAAGS,OAAO;IAAE;MAEtB;IACE;MAAEV,GAAGU,OAAO;MAAGT,GAAG;IAAE;IACpB;MAAED,GAAG;MAAGC,GAAGS,OAAO;IAAE;IACpB;MAAEV,GAAGU,OAAO;MAAGT,GAAGS,OAAO;IAAE;KAEjCH,MAAAA;;AAMD,IAAM0B,cAAc,CAAC,EAC1B7B,YACAD,IACAO,MACAwB,OAAM,MAEN,sBAAA,cAACC,WAAAA;EACChC;EACAH,IAAIU,OAAO,IAAIwB,OAAOlC,KAAKU;EAC3BT,IAAIS,OAAO,IAAIwB,OAAOjC,KAAKS;EAC3BC,OAAOD;EACPE,QAAQF;EACR0B,cAAa;GAGb,sBAAA,cAACC,KAAAA;EAAEnB,WAAWC,GAAGf,UAAAA;GACf,sBAAA,cAACkC,QAAAA;EAAKC,IAAI;EAAGC,IAAI9B,OAAO;EAAG+B,IAAI/B;EAAMgC,IAAIhC,OAAO;IAChD,sBAAA,cAAC4B,QAAAA;EAAKC,IAAI7B,OAAO;EAAG8B,IAAI;EAAGC,IAAI/B,OAAO;EAAGgC,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,IAAMQ,eAAe;;;AFzBrB,IAAMC,WAAW,CAACC,IAA2BC,kBAAAA;AAClDC,YAAU,MAAA;AACR,QAAI,CAACF,IAAI;AACP;IACF;AAEA,WAAOG,QAAQH,IAAI;MACjB;QACEI,MAAM;QACNC,SAAS;UAAEC,SAAS;UAAMC,SAAS;QAAM;QACzCC,UAAU,CAACC,OAAAA;AACTA,aAAGC,eAAc;AAGjB,cAAID,GAAGE,SAAS;AACd,gBAAI,CAACX,IAAI;AACP;YACF;AAGAC,0BAAc,CAAC,EAAEW,OAAOC,OAAM,MAAE;AAC9B,oBAAMC,MAAMC,iBAAiBf,IAAIS,EAAAA;AACjC,oBAAMO,mBAAmB;AACzB,oBAAMC,WAAWL,QAAQM,KAAKC,IAAI,CAACV,GAAGW,SAASJ,gBAAAA;AAC/C,qBAAOK,iBAAiB;gBAAET;gBAAOC;gBAAQI;gBAAUH;cAAI,CAAA;YACzD,CAAA;UACF,OAAO;AACLb,0BAAc,CAAC,EAAEW,OAAOC,QAAQ,EAAES,GAAGC,EAAC,EAAE,MAAE;AACxC,qBAAO;gBACLX;gBACAC,QAAQ;kBACNS,GAAGA,IAAIb,GAAGe;kBACVD,GAAGA,IAAId,GAAGW;gBACZ;cACF;YACF,CAAA;UACF;QACF;MACF;KACD;EACH,GAAG;IAACpB;IAAIC;GAAc;AACxB;;;AHvBO,IAAMwB,SAASC,2BACpB,CAAC,EAAEC,UAAUC,YAAYC,OAAOC,SAAS,GAAGC,QAAQC,UAAUC,eAAe,GAAGC,MAAAA,GAASC,iBAAAA;AAEvF,QAAM,EAAEC,KAAKC,QAAQ,GAAGC,SAAS,EAAC,IAAKC,kBAAAA;AAGvC,QAAM,CAAC,EAAEV,OAAOE,OAAM,GAAIS,aAAAA,IAAiBC,SAA0B;IAAEZ,OAAOC;IAAQC,QAAQC;EAAQ,CAAA;AACtGU,EAAAA,WAAU,MAAA;AACR,QAAIL,SAASC,UAAUP,WAAWE,eAAe;AAC/CO,oBAAc;QAAEX;QAAOE,QAAQ;UAAEY,GAAGN,QAAQ;UAAGO,GAAGN,SAAS;QAAE;MAAE,CAAA;IACjE;EACF,GAAG;IAACD;IAAOC;IAAQT;IAAOE;GAAO;AAGjC,QAAMc,aAAaC,QAAQ,MAAM,IAAIC,iBAAAA,GAAoB,CAAA,CAAE;AAC3DL,EAAAA,WAAU,MAAA;AACRG,eAAWG,OAAO;MAAEX;MAAOC;IAAO,GAAGT,OAAOE,MAAAA;EAC9C,GAAG;IAACc;IAAYhB;IAAOE;IAAQM;IAAOC;GAAO;AAG7C,QAAMW,SAASH,QAAuB,MAAA;AACpC,WAAO;;MAELI,WAAW,aAAanB,OAAOY,CAAC,OAAOZ,OAAOa,CAAC,aAAaf,KAAAA;MAC5DsB,YAAYd,SAASC,SAAS,YAAY;IAC5C;EACF,GAAG;IAACT;IAAOE;GAAO;AAGlBqB,sBACEjB,cACA,MAAA;AACE,WAAO;MACLK,eAAe,OAAOK,gBAAAA;AACpBL,sBAAcK,WAAAA;MAChB;IACF;EACF,GACA;IAACT;GAAI;AAGP,SACE,gBAAAiB,OAAA,cAACC,cAAcC,UAAQ;IACrBC,OAAO;MAAEC,MAAMrB,IAAIsB;MAASrB;MAAOC;MAAQT;MAAOE;MAAQkB;MAAQJ;MAAYL;IAAc;KAE5F,gBAAAa,OAAA,cAACM,OAAAA;IAAIC,MAAK;IAAQ,GAAG1B;IAAO2B,WAAWC,IAAG,oCAAoClC,UAAAA;IAAaQ;KACxFT,QAAAA,CAAAA;AAIT,CAAA;;;AM5EF,OAAOoC,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,QAAM,CAAC,EAAEC,KAAKC,KAAKC,IAAG,GAAIC,QAAAA,IAAYC,WACpC,CAACC,UAAAA;AACC,UAAMC,cAAcC,KAAKC,IAAG;AAC5B,QAAIF,cAAcD,MAAMI,WAAWf,KAAK;AACtC,YAAMgB,UAAU;WACX,IAAIC,MAAMC,KAAKC,OAAOP,cAAcD,MAAMI,WAAWf,OAAOA,GAAAA,CAAAA,EAAMoB,KAAK,CAAA;QAC1EF,KAAKX,IAAI,GAAGW,KAAKG,MAAOV,MAAMW,SAAStB,OAAQY,cAAcD,MAAMI,SAAO,CAAA;;AAE5E,aAAO;QACLR,KAAKW,KAAKX,IAAII,MAAMJ,KAAG,GAAKS,OAAAA;QAC5BR,KAAKU,KAAKK,IAAIZ,MAAMH,MAAMQ,QAAQQ,QAAQrB,KAAAA;QAC1CG,KAAK;aAAIK,MAAML;aAAQU;UAASS,MAAM,CAACtB,KAAAA;QACvCmB,QAAQ;QACRP,UAAUH;MACZ;IACF,OAAO;AACL,aAAO;QAAE,GAAGD;QAAOW,QAAQX,MAAMW,SAAS;MAAE;IAC9C;EACF,GACA;IACEf,KAAK;IACLC,KAAK;IACLF,KAAK,CAAA;IACLgB,QAAQ;IACRP,UAAUF,KAAKC,IAAG;EACpB,CAAA;AAGF,QAAMY,aAAaC,OAAAA;AACnB,QAAMC,OAAO,MAAA;AACXnB,aAAAA;AACAiB,eAAWG,UAAUC,sBAAsBF,IAAAA;EAC7C;AAEAG,EAAAA,WAAU,MAAA;AACRL,eAAWG,UAAUC,sBAAsBF,IAAAA;AAC3C,WAAO,MAAA;AACL,UAAIF,WAAWG,SAAS;AACtBG,6BAAqBN,WAAWG,OAAO;MACzC;IACF;EACF,GAAG,CAAA,CAAE;AAEL,SACE,gBAAAI,OAAA,cAACC,OAAAA;IACCC,OAAO;MAAEhC,OAAOA,QAAQ;IAAE;IAC1BiC,WAAWC,IACT,gCACA,6FACAnC,UAAAA;KAGF,gBAAA+B,OAAA,cAACC,OAAAA,MAAK5B,IAAIE,MAAM,CAAA,GAAG,MAAA,GACnB,gBAAAyB,OAAA,cAACC,OAAAA;IAAIE,WAAU;IAAkBD,OAAO;MAAE/B;IAAO;KAC9CE,IAAIgC,IAAI,CAACC,OAAOC,MACf,gBAAAP,OAAA,cAACC,OAAAA;IACCO,KAAK,OAAOD,CAAAA;IACZJ,WAAW/B;IACX8B,OAAO;MACLO,UAAU;MACVC,QAAQ;MACRC,OAAO,GAAGpC,MAAM,IAAIgC,CAAAA;MACpBpC,QAAQ,GAAIA,SAASmC,QAAShC,GAAAA;MAC9BJ,OAAO;IACT;;AAMZ;;;AC7FA,OAAO0C,UAASC,cAAAA,aAAYC,WAAAA,gBAAe;AAG3C,SAASC,MAAAA,WAAU;AAKnB,IAAMC,aAAa;EAAC,IAAI;EAAG;EAAG;EAAG;;AAEjC,IAAMC,iBAAuB;EAAEC,GAAG;EAAGC,GAAG;AAAE;AAE1C,IAAMC,WAAW,CAACC,QAAgBC,SAAiB,kBAAkBD,MAAAA,IAAUC,IAAAA;AAIxE,IAAMC,OAAOC,gBAAAA,YAClB,CAAC,EAAEC,IAAIC,UAAUC,MAAMC,UAAUC,QAAQ,GAAGC,SAASb,gBAAec,WAAU,GAAIC,iBAAAA;AAChF,QAAMC,QAAQC,SACZ,MACElB,WACGmB,IAAI,CAACC,WAAW;IAAEX,IAAIW;IAAOT,MAAMS,QAAQR,WAAWC;EAAM,EAAA,EAC5DQ,OAAO,CAAC,EAAEV,KAAI,MAAOA,QAAQC,YAAYD,QAAQ,GAAA,GACtD;IAACC;IAAUC;GAAM;AAGnB,SACE,gBAAAS,OAAA,cAACC,OAAAA;IACE,GAAGC,OAAO,gBAAA;IACXC,KAAKT;IACLU,WAAWC,IACT,6EACA,sBACAZ,UAAAA;KAIF,gBAAAO,OAAA,cAACM,QAAAA,MACEX,MAAME,IAAI,CAAC,EAAEV,IAAIE,KAAI,MACpB,gBAAAW,OAAA,cAACO,aAAAA;IAAYC,KAAKrB;IAAIA,IAAIL,SAASM,UAAUD,EAAAA;IAAKK;IAAgBH;QAGtE,gBAAAW,OAAA,cAACS,KAAAA,MACEd,MAAME,IAAI,CAAC,EAAEV,GAAE,GAAIuB,MAClB,gBAAAV,OAAA,cAACW,QAAAA;IACCH,KAAKrB;IACLyB,SAAS,MAAMF,IAAI;IACnBG,MAAM,QAAQ/B,SAASM,UAAUD,EAAAA,CAAAA;IACjC2B,OAAM;IACNC,QAAO;;AAMnB,CAAA;;;ACvDF,SAASC,SAAS;AAEX,IAAMC,QAAQC,EAAEC,OAAO;EAAEC,GAAGF,EAAEG;EAAQC,GAAGJ,EAAEG;AAAO,CAAA;AAClD,IAAME,YAAYL,EAAEC,OAAO;EAAEK,OAAON,EAAEG;EAAQI,QAAQP,EAAEG;AAAO,CAAA;AAC/D,IAAMK,OAAOR,EAAES,OAAOV,OAAOM,SAAAA;",
   "names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "inverse", "translate", "translateMatrix", "identity", "scale", "scaleMatrix", "defaultOffset", "x", "y", "ProjectionMapper", "constructor", "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", "d3", "transition", "ease", "easeSinOut", "duration", "tween", "t", "zoomTo", "interpolateObject", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useProjection", "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", "useWheel", "el", "setProjection", "useEffect", "bindAll", "type", "options", "capture", "passive", "listener", "ev", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOffset", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "setProjection", "useState", "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", "mx", "gridRatios", "defaultOffset", "x", "y", "createId", "parent", "grid", "Grid", "forwardRef", "id", "parentId", "size", "gridSize", "scale", "offset", "classNames", "forwardedRef", "grids", "useMemo", "map", "ratio", "filter", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "g", "i", "rect", "opacity", "fill", "width", "height", "S", "Point", "S", "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":11640,"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/useProjection.tsx":{"bytes":2104,"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":12581,"imports":[{"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":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"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":6037,"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/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"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":8640,"imports":[{"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":511,"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":9035,"imports":[{"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":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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":507,"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":663,"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":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"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":30793},"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"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":2064},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"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":198}},"bytes":13308}}}
+{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11640,"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/useProjection.tsx":{"bytes":2104,"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":12581,"imports":[{"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":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"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":6037,"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/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"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":8640,"imports":[{"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":511,"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":9050,"imports":[{"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":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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":507,"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":663,"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":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"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":30800},"packages/ui/react-ui-canvas/dist/lib/browser/index.mjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"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":2071},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"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":198}},"bytes":13315}}}

package/dist/lib/node/index.cjs

@@ -468,7 +468,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
     style: {
       width: width + 6
     },
-    className: (0, import_react_ui_theme3.mx)("relative flex flex-col p-0.5", "bg-base text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
+    className: (0, import_react_ui_theme3.mx)("relative flex flex-col p-0.5", "bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
   }, /* @__PURE__ */ import_react5.default.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ import_react5.default.createElement("div", {
     className: "w-full relative",
     style: {

package/dist/lib/node/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useProjection.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 PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\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 { defaultOffset, 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 = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\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    }, [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, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\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 = defaultOffset;\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) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\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 = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\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) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\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  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 useProjection = (): 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 { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, 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  }, [el, setProjection]);\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: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} 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 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-base 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 } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\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    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\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(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type CSSProperties,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\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 { defaultOffset, 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 = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\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    }, [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, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\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 = defaultOffset;\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) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\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 = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\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) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\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  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 useProjection = (): 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 { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, 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  }, [el, setProjection]);\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: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} 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 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 } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\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    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\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(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
+  "mappings": "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",
   "names": ["import_react", "import_react_ui_theme", "defaultOffset", "x", "y", "ProjectionMapper", "constructor", "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", "zoomTo", "interpolateObject", "CanvasContext", "createContext", "useProjection", "useContext", "raise", "Error", "createPath", "join", "map", "Markers", "id", "classNames", "React", "Arrow", "dir", "closed", "Marker", "size", "circle", "cx", "cy", "r", "stroke", "className", "mx", "children", "refX", "refY", "markerWidth", "markerHeight", "fill", "rest", "marker", "markerUnits", "orient", "path", "undefined", "d", "GridPattern", "pattern", "patternUnits", "g", "line", "x1", "y1", "x2", "y2", "logged", "getRelativePoint", "el", "ev", "rect", "getBoundingClientRect", "clientX", "clientY", "top", "testId", "inspect", "console", "log", "window", "INSPECT", "document", "querySelector", "DATA_TEST_ID", "useWheel", "setProjection", "useEffect", "bindAll", "type", "options", "capture", "passive", "listener", "preventDefault", "ctrlKey", "scaleSensitivity", "Math", "exp", "deltaY", "deltaX", "Canvas", "forwardRef", "props", "forwardedRef", "ref", "useResizeDetector", "useState", "projection", "useMemo", "styles", "transform", "visibility", "useImperativeHandle", "Provider", "value", "root", "div", "role", "SEC", "FPS", "bar", "fps", "max", "len", "dispatch", "useReducer", "state", "currentTime", "Date", "now", "prevTime", "nextFPS", "Array", "floor", "round", "frames", "min", "length", "slice", "requestRef", "useRef", "tick", "requestAnimationFrame", "cancelAnimationFrame", "style", "frame", "i", "key", "position", "bottom", "right", "gridRatios", "createId", "parent", "grid", "Grid", "parentId", "gridSize", "grids", "ratio", "filter", "svg", "defs", "opacity", "Point", "S", "Struct", "Number", "Dimension", "Rect", "extend"]
 }

package/dist/lib/node/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11640,"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/useProjection.tsx":{"bytes":2104,"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":12581,"imports":[{"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":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"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":6037,"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/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"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":8640,"imports":[{"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":511,"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":9035,"imports":[{"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":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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":507,"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":663,"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":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"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/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30793},"packages/ui/react-ui-canvas/dist/lib/node/index.cjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"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":2064},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"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":198}},"bytes":13308}}}
+{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11640,"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/useProjection.tsx":{"bytes":2104,"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":12581,"imports":[{"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":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"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":6037,"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/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"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":8640,"imports":[{"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":511,"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":9050,"imports":[{"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":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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":507,"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":663,"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":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"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/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30800},"packages/ui/react-ui-canvas/dist/lib/node/index.cjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"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":2071},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"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":198}},"bytes":13315}}}

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

@@ -430,7 +430,7 @@ var FPS = ({ classNames, width = 60, height = 30, bar = "bg-cyan-500" }) => {
     style: {
       width: width + 6
     },
-    className: mx3("relative flex flex-col p-0.5", "bg-base text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
+    className: mx3("relative flex flex-col p-0.5", "bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator", classNames)
   }, /* @__PURE__ */ React3.createElement("div", null, fps[len - 1], " FPS"), /* @__PURE__ */ React3.createElement("div", {
     className: "w-full relative",
     style: {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/Canvas/Canvas.tsx", "../../../src/hooks/projection.tsx", "../../../src/hooks/useProjection.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 PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\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 { defaultOffset, 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 = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\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    }, [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, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\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 = defaultOffset;\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) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\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 = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\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) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\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  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 useProjection = (): 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 { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, 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  }, [el, setProjection]);\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: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} 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 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-base 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 } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\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    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\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(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport React, {\n  type CSSProperties,\n  type PropsWithChildren,\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type HTMLAttributes,\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 { defaultOffset, 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 = defaultOffset, ...props }, forwardedRef) => {\n    // Size.\n    const { ref, width = 0, height = 0 } = useResizeDetector();\n\n    // Projection.\n    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });\n    useEffect(() => {\n      if (width && height && offset === defaultOffset) {\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    }, [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, width, height, scale, offset, styles, projection, setProjection }}\n      >\n        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>\n          {children}\n        </div>\n      </CanvasContext.Provider>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as d3 from 'd3';\nimport {\n  type Matrix,\n  applyToPoints,\n  compose,\n  inverse,\n  translate as translateMatrix,\n  identity,\n  scale as scaleMatrix,\n} from 'transformation-matrix';\n\nimport { type Point, type Dimension } from '../types';\n\nexport const defaultOffset: Point = { x: 0, y: 0 };\n\n// TODO(burdon): Rotation also?\nexport type ProjectionState = {\n  scale: number;\n  offset: Point;\n};\n\n// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,\n//  vs. a reactive object that can trigger updates?\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 = defaultOffset;\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) {\n    this._bounds = bounds;\n    this._scale = scale;\n    this._offset = offset;\n    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));\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 = d3.interpolate(current, next);\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const newScale = is(t);\n      setTransform(getZoomTransform({ scale: current, newScale, offset, pos }));\n    });\n};\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) => {\n  const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });\n  d3.transition()\n    .ease(d3.easeSinOut)\n    .duration(delay)\n    .tween('zoom', () => (t) => {\n      const { scale, x, y } = is(t);\n      setTransform({ scale, offset: { x, y } });\n    });\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  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 useProjection = (): 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 { type Dispatch, type SetStateAction, useEffect } from 'react';\n\nimport { getZoomTransform, type ProjectionState } from './projection';\nimport { getRelativePoint } from '../util';\n\n/**\n * Handle wheel events to update the transform state (zoom and offset).\n */\nexport const useWheel = (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => {\n  useEffect(() => {\n    if (!el) {\n      return;\n    }\n\n    return bindAll(el, [\n      {\n        type: 'wheel',\n        options: { capture: true, passive: false },\n        listener: (ev: WheelEvent) => {\n          ev.preventDefault();\n\n          // Zoom or pan.\n          if (ev.ctrlKey) {\n            if (!el) {\n              return;\n            }\n\n            // Keep centered while zooming.\n            setProjection(({ scale, offset }) => {\n              const pos = getRelativePoint(el, 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  }, [el, setProjection]);\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: 6, y: 6 }} size={{ width: 12, height: 12 }}>\n        <circle cx={6} cy={6} 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 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 } from 'react';\n\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/react-ui-theme';\n\nimport { type Point } from '../../types';\nimport { GridPattern, testId } from '../../util';\n\nconst gridRatios = [1 / 4, 1, 4, 16];\n\nconst defaultOffset: Point = { x: 0, y: 0 };\n\nconst createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;\n\nexport type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;\n\nexport const Grid = forwardRef<SVGSVGElement, GridProps>(\n  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {\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    return (\n      <svg\n        {...testId('dx-canvas-grid')}\n        ref={forwardedRef}\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(parentId, id)} offset={offset} size={size} />\n          ))}\n        </defs>\n        <g>\n          {grids.map(({ id }, i) => (\n            <rect\n              key={id}\n              opacity={0.1 + i * 0.05}\n              fill={`url(#${createId(parentId, id)})`}\n              width='100%'\n              height='100%'\n            />\n          ))}\n        </g>\n      </svg>\n    );\n  },\n);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { S } from '@dxos/effect';\n\nexport const Point = S.Struct({ x: S.Number, y: S.Number });\nexport const Dimension = S.Struct({ width: S.Number, height: S.Number });\nexport const Rect = S.extend(Point, Dimension);\n\nexport type Point = S.Schema.Type<typeof Point>;\nexport type Dimension = S.Schema.Type<typeof Dimension>;\nexport type Rect = S.Schema.Type<typeof Rect>;\n"],
+  "mappings": "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",
   "names": ["React", "forwardRef", "useEffect", "useImperativeHandle", "useMemo", "useState", "useResizeDetector", "mx", "d3", "applyToPoints", "compose", "inverse", "translate", "translateMatrix", "identity", "scale", "scaleMatrix", "defaultOffset", "x", "y", "ProjectionMapper", "constructor", "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", "d3", "transition", "ease", "easeSinOut", "duration", "tween", "t", "zoomTo", "interpolateObject", "createContext", "useContext", "raise", "CanvasContext", "createContext", "useProjection", "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", "useWheel", "el", "setProjection", "useEffect", "bindAll", "type", "options", "capture", "passive", "listener", "ev", "preventDefault", "ctrlKey", "scale", "offset", "pos", "getRelativePoint", "scaleSensitivity", "newScale", "Math", "exp", "deltaY", "getZoomTransform", "x", "y", "deltaX", "Canvas", "forwardRef", "children", "classNames", "scale", "_scale", "offset", "_offset", "defaultOffset", "props", "forwardedRef", "ref", "width", "height", "useResizeDetector", "setProjection", "useState", "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", "mx", "gridRatios", "defaultOffset", "x", "y", "createId", "parent", "grid", "Grid", "forwardRef", "id", "parentId", "size", "gridSize", "scale", "offset", "classNames", "forwardedRef", "grids", "useMemo", "map", "ratio", "filter", "React", "svg", "testId", "ref", "className", "mx", "defs", "GridPattern", "key", "g", "i", "rect", "opacity", "fill", "width", "height", "S", "Point", "S", "Struct", "x", "Number", "y", "Dimension", "width", "height", "Rect", "extend"]
 }

package/dist/lib/node-esm/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11640,"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/useProjection.tsx":{"bytes":2104,"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":12581,"imports":[{"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":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"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":6037,"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/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"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":8640,"imports":[{"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":511,"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":9035,"imports":[{"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":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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":507,"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":663,"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":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30795},"packages/ui/react-ui-canvas/dist/lib/node-esm/index.mjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"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":2064},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"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":198}},"bytes":13401}}}
+{"inputs":{"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytes":11640,"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/useProjection.tsx":{"bytes":2104,"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":12581,"imports":[{"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":3716,"imports":[],"format":"esm"},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytes":571,"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":6037,"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/util/index.ts","kind":"import-statement","original":"../util"}],"format":"esm"},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytes":704,"imports":[{"path":"packages/ui/react-ui-canvas/src/hooks/projection.tsx","kind":"import-statement","original":"./projection"},{"path":"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx","kind":"import-statement","original":"./useProjection"},{"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":8640,"imports":[{"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":511,"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":9050,"imports":[{"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":6244,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"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":507,"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":663,"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":1632,"imports":[{"path":"@dxos/effect","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-canvas/src/index.ts":{"bytes":747,"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":30802},"packages/ui/react-ui-canvas/dist/lib/node-esm/index.mjs":{"imports":[{"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":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/effect","kind":"import-statement","external":true}],"exports":["Arrow","Canvas","CanvasContext","DATA_TEST_ID","Dimension","FPS","Grid","GridPattern","Marker","Markers","Point","ProjectionMapper","Rect","createPath","defaultOffset","getRelativePoint","getZoomTransform","testId","useProjection","useWheel","zoomInPlace","zoomTo"],"entryPoint":"packages/ui/react-ui-canvas/src/index.ts","inputs":{"packages/ui/react-ui-canvas/src/components/Canvas/Canvas.tsx":{"bytesInOutput":1857},"packages/ui/react-ui-canvas/src/hooks/projection.tsx":{"bytesInOutput":2111},"packages/ui/react-ui-canvas/src/hooks/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/hooks/useProjection.tsx":{"bytesInOutput":257},"packages/ui/react-ui-canvas/src/hooks/useWheel.tsx":{"bytesInOutput":1208},"packages/ui/react-ui-canvas/src/util/svg.tsx":{"bytesInOutput":2736},"packages/ui/react-ui-canvas/src/util/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-canvas/src/util/util.ts":{"bytesInOutput":589},"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":2071},"packages/ui/react-ui-canvas/src/components/Grid/Grid.tsx":{"bytesInOutput":1339},"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":198}},"bytes":13408}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.e9bb01b",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,17 +23,17 @@
   ],
   "dependencies": {
     "@preact/signals-core": "^1.6.0",
-    "@radix-ui/react-context": "^1.0.0",
+    "@radix-ui/react-context": "1.1.1",
     "bind-event-listener": "^3.0.0",
     "d3": "^7.9.0",
     "effect": "^3.12.1",
     "react-resize-detector": "^11.0.1",
     "transformation-matrix": "^2.16.1",
-    "@dxos/debug": "0.7.5-main.9d2a38b",
-    "@dxos/effect": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b",
-    "@dxos/log": "0.7.5-main.9d2a38b",
-    "@dxos/invariant": "0.7.5-main.9d2a38b"
+    "@dxos/debug": "0.7.5-main.e9bb01b",
+    "@dxos/invariant": "0.7.5-main.e9bb01b",
+    "@dxos/effect": "0.7.5-main.e9bb01b",
+    "@dxos/log": "0.7.5-main.e9bb01b",
+    "@dxos/util": "0.7.5-main.e9bb01b"
   },
   "devDependencies": {
     "@effect/schema": "^0.75.5",
@@ -43,17 +43,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/storybook-utils": "0.7.5-main.9d2a38b"
+    "@dxos/random": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui": "0.7.5-main.e9bb01b",
+    "@dxos/storybook-utils": "0.7.5-main.e9bb01b"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/react-ui": "0.7.5-main.e9bb01b",
+    "@dxos/react-ui-theme": "0.7.5-main.e9bb01b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/FPS.tsx

@@ -73,7 +73,7 @@ export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }
       style={{ width: width + 6 }}
       className={mx(
         'relative flex flex-col p-0.5',
-        'bg-base text-xs text-subdued font-thin pointer-events-none border border-separator',
+        'bg-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',
         classNames,
       )}
     >