@dxos/react-ui-canvas 0.7.5-main.499c70c

package/dist/types/src/components/Canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Canvas/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC"}

package/dist/types/src/components/FPS.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+export type FPSProps = ThemedClassName<{
+    width?: number;
+    height?: number;
+    bar?: string;
+}>;
+export declare const FPS: ({ classNames, width, height, bar }: FPSProps) => React.JSX.Element;
+//# sourceMappingURL=FPS.d.ts.map

package/dist/types/src/components/FPS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FPS.d.ts","sourceRoot":"","sources":["../../../../src/components/FPS.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAYH,eAAO,MAAM,GAAG,uCAAkE,QAAQ,sBAuEzF,CAAC"}

package/dist/types/src/components/Grid/Grid.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type Point } from '../../types';
+export type GridProps = ThemedClassName<{
+    id: string;
+    size: number;
+    scale?: number;
+    offset?: Point;
+}>;
+export declare const Grid: React.ForwardRefExoticComponent<Omit<{
+    id: string;
+    size: number;
+    scale?: number;
+    offset?: Point;
+}, "className"> & {
+    classNames?: import("@dxos/react-ui").ClassNameValue;
+} & React.RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/types/src/components/Grid/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AASzC,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,CAAC;AAEtG,eAAO,MAAM,IAAI;QAF6B,MAAM;UAAQ,MAAM;YAAU,MAAM;aAAW,KAAK;;;uCA0CjG,CAAC"}

package/dist/types/src/components/Grid/Grid.stories.d.ts

@@ -0,0 +1,8 @@
+import '@dxos-theme';
+import type { Meta, StoryObj } from '@storybook/react';
+import { type GridProps } from './Grid';
+declare const meta: Meta<GridProps>;
+export default meta;
+type Story = StoryObj<GridProps>;
+export declare const Default: Story;
+//# sourceMappingURL=Grid.stories.d.ts.map

package/dist/types/src/components/Grid/Grid.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Grid/Grid.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAgB9C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,SAAS,CAKzB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEjC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/types/src/components/Grid/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Grid/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Canvas';
+export * from './FPS';
+export * from './Grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/types/src/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './projection';
+export * from './useProjection';
+export * from './useWheel';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC"}

package/dist/types/src/hooks/projection.d.ts

@@ -0,0 +1,58 @@
+import { type Point, type Dimension } from '../types';
+export declare const defaultOffset: Point;
+export type ProjectionState = {
+    scale: number;
+    offset: Point;
+};
+/**
+ * Maps between screen and model coordinates.
+ */
+export interface Projection {
+    get bounds(): Dimension;
+    get scale(): number;
+    get offset(): Point;
+    /**
+     * Maps the model space to the screen offset (from the top-left of the element).
+     */
+    toScreen(points: Point[]): Point[];
+    /**
+     * Maps the pointer coordinate (from the top-left of the element) to the model space.
+     */
+    toModel(points: Point[]): Point[];
+}
+export declare class ProjectionMapper implements Projection {
+    private _bounds;
+    private _scale;
+    private _offset;
+    private _toScreen;
+    private _toModel;
+    constructor(bounds?: Dimension, scale?: number, offset?: Point);
+    update(bounds: Dimension, scale: number, offset: Point): this;
+    get bounds(): {
+        readonly width: number;
+        readonly height: number;
+    };
+    get scale(): number;
+    get offset(): {
+        readonly x: number;
+        readonly y: number;
+    };
+    toScreen(points: Point[]): Point[];
+    toModel(points: Point[]): Point[];
+}
+/**
+ * Maintain position while zooming.
+ */
+export declare const getZoomTransform: ({ scale, offset, pos, newScale, }: ProjectionState & {
+    pos: Point;
+    newScale: number;
+}) => ProjectionState;
+/**
+ * Zoom while keeping the specified position in place.
+ */
+export declare const zoomInPlace: (setTransform: (state: ProjectionState) => void, pos: Point, offset: Point, current: number, next: number, delay?: number) => void;
+/**
+ * Zoom to new scale and position.
+ */
+export declare const zoomTo: (setTransform: (state: ProjectionState) => void, current: ProjectionState, next: ProjectionState, delay?: number) => void;
+//# sourceMappingURL=projection.d.ts.map

package/dist/types/src/hooks/projection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"projection.d.ts","sourceRoot":"","sources":["../../../../src/hooks/projection.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAEtD,eAAO,MAAM,aAAa,EAAE,KAAsB,CAAC;AAGnD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,CAAC;CACf,CAAC;AAKF;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,MAAM,IAAI,SAAS,CAAC;IACxB,IAAI,KAAK,IAAI,MAAM,CAAC;IACpB,IAAI,MAAM,IAAI,KAAK,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC;CACnC;AAED,qBAAa,gBAAiB,YAAW,UAAU;IACjD,OAAO,CAAC,OAAO,CAAsC;IACrD,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,SAAS,CAAsB;IACvC,OAAO,CAAC,QAAQ,CAAsB;gBAE1B,MAAM,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,KAAK;IAM9D,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK;IAStD,IAAI,MAAM;;;MAET;IAED,IAAI,KAAK,WAER;IAED,IAAI,MAAM;;;MAET;IAED,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;IAIlC,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;CAGlC;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,sCAK1B,eAAe,GAAG;IAAE,GAAG,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,KAAG,eAQvD,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,WAAW,iBACR,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,OACzC,KAAK,UACF,KAAK,WACJ,MAAM,QACT,MAAM,yBAWb,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,MAAM,iBACH,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,WACrC,eAAe,QAClB,eAAe,yBAWtB,CAAC"}

package/dist/types/src/hooks/useProjection.d.ts

@@ -0,0 +1,12 @@
+import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
+import { type Projection, type ProjectionState } from './projection';
+export type CanvasContext = ProjectionState & {
+    root: HTMLDivElement;
+    width: number;
+    height: number;
+    styles: CSSProperties;
+    projection: Projection;
+    setProjection: Dispatch<SetStateAction<ProjectionState>>;
+};
+export declare const useProjection: () => CanvasContext;
+//# sourceMappingURL=useProjection.d.ts.map

package/dist/types/src/hooks/useProjection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProjection.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useProjection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAA6B,MAAM,OAAO,CAAC;AAI1G,OAAO,EAAE,KAAK,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAErE,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG;IAC5C,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,UAAU,CAAC;IACvB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC;CAC1D,CAAC;AAQF,eAAO,MAAM,aAAa,QAAO,aAEhC,CAAC"}

package/dist/types/src/hooks/useWheel.d.ts

@@ -0,0 +1,7 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { type ProjectionState } from './projection';
+/**
+ * Handle wheel events to update the transform state (zoom and offset).
+ */
+export declare const useWheel: (el: HTMLDivElement | null, setProjection: Dispatch<SetStateAction<ProjectionState>>) => void;
+//# sourceMappingURL=useWheel.d.ts.map

package/dist/types/src/hooks/useWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWheel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useWheel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAa,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGtE;;GAEG;AACH,eAAO,MAAM,QAAQ,OAAQ,cAAc,GAAG,IAAI,iBAAiB,QAAQ,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,SAyC3G,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,5 @@
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './util';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/dist/types/src/types.d.ts

@@ -0,0 +1,20 @@
+import { S } from '@dxos/effect';
+export declare const Point: S.Struct<{
+    x: typeof S.Number;
+    y: typeof S.Number;
+}>;
+export declare const Dimension: S.Struct<{
+    width: typeof S.Number;
+    height: typeof S.Number;
+}>;
+export declare const Rect: S.extend<S.Struct<{
+    x: typeof S.Number;
+    y: typeof S.Number;
+}>, S.Struct<{
+    width: typeof S.Number;
+    height: typeof S.Number;
+}>>;
+export type Point = S.Schema.Type<typeof Point>;
+export type Dimension = S.Schema.Type<typeof Dimension>;
+export type Rect = S.Schema.Type<typeof Rect>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAEjC,eAAO,MAAM,KAAK;;;EAAyC,CAAC;AAC5D,eAAO,MAAM,SAAS;;;EAAkD,CAAC;AACzE,eAAO,MAAM,IAAI;;;;;;GAA6B,CAAC;AAE/C,MAAM,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC;AAChD,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AACxD,MAAM,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -0,0 +1,3 @@
+export * from './svg';
+export * from './util';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/util/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/types/src/util/svg.d.ts

@@ -0,0 +1,33 @@
+import React, { type PropsWithChildren, type SVGProps } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type Dimension, type Point } from '../types';
+export declare const createPath: (points: Point[], join?: boolean) => string;
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
+ * NOTE: Leave space around shape for line width.
+ */
+export declare const Markers: ({ id, classNames }: ThemedClassName<{
+    id?: string;
+}>) => React.JSX.Element;
+export type MarkerProps = SVGProps<SVGMarkerElement> & PropsWithChildren<ThemedClassName<{
+    id: string;
+    pos: Point;
+    size: Dimension;
+    fill?: boolean;
+}>>;
+/**
+ * https://www.w3.org/TR/SVG2/painting.html#Markers
+ */
+export declare const Marker: ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }: MarkerProps) => React.JSX.Element;
+export declare const Arrow: ({ classNames, id, size, dir, closed, }: ThemedClassName<{
+    id: string;
+    size?: number;
+    dir?: "start" | "end";
+    closed?: boolean;
+}>) => React.JSX.Element;
+export declare const GridPattern: ({ classNames, id, size, offset, }: ThemedClassName<{
+    id: string;
+    size: number;
+    offset: Point;
+}>) => React.JSX.Element;
+//# sourceMappingURL=svg.d.ts.map

package/dist/types/src/util/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../src/util/svg.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,UAAU,CAAC;AAMtD,eAAO,MAAM,UAAU,WAAY,KAAK,EAAE,2BAEzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,uBAAsC,eAAe,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,sBAYzF,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,GAClD,iBAAiB,CACf,eAAe,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,KAAK,CAAC;IACX,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC,CACH,CAAC;AAEJ;;GAEG;AACH,eAAO,MAAM,MAAM,8HAQhB,WAAW,sBAgBb,CAAC;AAEF,eAAO,MAAM,KAAK,2CAMf,eAAe,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,sBA0BzF,CAAC;AAEF,eAAO,MAAM,WAAW,sCAKrB,eAAe,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,CAAC,sBAe9D,CAAC"}

package/dist/types/src/util/svg.stories.d.ts

@@ -0,0 +1,6 @@
+import '@dxos-theme';
+import type { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: {};
+//# sourceMappingURL=svg.stories.d.ts.map

package/dist/types/src/util/svg.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.stories.d.ts","sourceRoot":"","sources":["../../../../src/util/svg.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AA2B7C,QAAA,MAAM,IAAI,EAAE,IAOX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/util/util.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Get the relative point of the cursor.
+ * NOTE: ev.offset returns the position relative to the target.
+ */
+export declare const getRelativePoint: (el: HTMLElement, ev: MouseEvent) => {
+    x: number;
+    y: number;
+};
+/**
+ *
+ */
+export declare const testId: <ID = string>(id: ID, inspect?: boolean) => {
+    "data-test-id": ID;
+};
+export declare const DATA_TEST_ID = "data-test-id";
+//# sourceMappingURL=util.d.ts.map

package/dist/types/src/util/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/util/util.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAAQ,WAAW,MAAM,UAAU;;;CAG/D,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,MAAM,GAAI,EAAE,eAAe,EAAE;;CAiBzC,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAiB,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.2"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@dxos/react-ui-canvas",
+  "version": "0.7.5-main.499c70c",
+  "description": "A canvas component.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {}
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact/signals-core": "^1.6.0",
+    "@radix-ui/react-context": "^1.0.0",
+    "bind-event-listener": "^3.0.0",
+    "d3": "^7.9.0",
+    "effect": "^3.9.2",
+    "react-resize-detector": "^11.0.1",
+    "transformation-matrix": "^2.16.1",
+    "@dxos/debug": "0.7.5-main.499c70c",
+    "@dxos/effect": "0.7.5-main.499c70c",
+    "@dxos/invariant": "0.7.5-main.499c70c",
+    "@dxos/log": "0.7.5-main.499c70c",
+    "@dxos/util": "0.7.5-main.499c70c"
+  },
+  "devDependencies": {
+    "@effect/schema": "^0.75.5",
+    "@types/d3": "^7.4.3",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/random": "0.7.5-main.499c70c",
+    "@dxos/react-ui-theme": "0.7.5-main.499c70c",
+    "@dxos/storybook-utils": "0.7.5-main.499c70c",
+    "@dxos/react-ui": "0.7.5-main.499c70c"
+  },
+  "peerDependencies": {
+    "@effect/schema": "^0.75.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.7.5-main.499c70c",
+    "@dxos/react-ui-theme": "0.7.5-main.499c70c"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/Canvas/Canvas.stories.tsx

@@ -0,0 +1,82 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Canvas } from './Canvas';
+import { useProjection, useWheel } from '../../hooks';
+import { type Point } from '../../types';
+import { testId } from '../../util';
+import { Grid, type GridProps } from '../Grid';
+
+const Render = (props: GridProps) => {
+  return (
+    <Canvas>
+      <Content {...props} />
+    </Canvas>
+  );
+};
+
+const Content = (props: GridProps) => {
+  const { root, scale, offset, styles, setProjection } = useProjection();
+  useWheel(root, setProjection);
+
+  return (
+    <>
+      <Grid scale={scale} offset={offset} {...props} />
+      <div className='absolute' style={styles}>
+        <Item x={0} y={-128} />
+        <Item x={-128} y={128} />
+        <Item x={128} y={128} />
+      </div>
+    </>
+  );
+};
+
+const Item = ({ x, y }: Point) => {
+  const size = 128;
+  const pos = {
+    left: x - size / 2,
+    top: y - size / 2,
+    width: size,
+    height: size,
+  };
+
+  return (
+    <div {...testId('dx-test', true)}>
+      <div className='absolute flex border border-red-500 justify-center items-center' style={pos}>
+        <div className='font-mono'>
+          ({x},{y})
+        </div>
+      </div>
+      {/* NOTE: Width and height are not important since overflow-visible. */}
+      <svg className='absolute overflow-visible' style={pos}>
+        <circle cx={64} cy={64} r={64} className='stroke-red-500 storke-width-2 fill-none' />
+      </svg>
+    </div>
+  );
+};
+
+const meta: Meta<GridProps> = {
+  title: 'ui/react-ui-canvas/Canvas',
+  component: Grid,
+  render: Render,
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+export default meta;
+
+type Story = StoryObj<GridProps>;
+
+export const Default: Story = {
+  args: {
+    id: 'test',
+    size: 16,
+  },
+};

package/src/components/Canvas/Canvas.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, {
+  type CSSProperties,
+  type PropsWithChildren,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+} from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { defaultOffset, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';
+
+export interface CanvasController {
+  setProjection(projection: ProjectionState): Promise<void>;
+}
+
+export type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>>;
+
+/**
+ * Root canvas component.
+ * Manages CSS projection.
+ */
+export const Canvas = forwardRef<CanvasController, CanvasProps>(
+  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOffset, ...props }, forwardedRef) => {
+    // Size.
+    const { ref, width = 0, height = 0 } = useResizeDetector();
+
+    // Projection.
+    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });
+    useEffect(() => {
+      if (width && height && offset === defaultOffset) {
+        setProjection({ scale, offset: { x: width / 2, y: height / 2 } });
+      }
+    }, [width, height, scale, offset]);
+
+    // Projection mapper.
+    const projection = useMemo(() => new ProjectionMapper(), []);
+    useEffect(() => {
+      projection.update({ width, height }, scale, offset);
+    }, [projection, scale, offset, width, height]);
+
+    // CSS transforms.
+    const styles = useMemo<CSSProperties>(() => {
+      return {
+        // NOTE: Order is important.
+        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+        visibility: width && height ? 'visible' : 'hidden',
+      };
+    }, [scale, offset]);
+
+    // Controller.
+    useImperativeHandle(
+      forwardedRef,
+      () => {
+        return {
+          setProjection: async (projection: ProjectionState) => {
+            setProjection(projection);
+          },
+        };
+      },
+      [ref],
+    );
+
+    return (
+      <CanvasContext.Provider
+        value={{ root: ref.current, width, height, scale, offset, styles, projection, setProjection }}
+      >
+        <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>
+          {children}
+        </div>
+      </CanvasContext.Provider>
+    );
+  },
+);

package/src/components/Canvas/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Canvas';

package/src/components/FPS.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2024 DXOS.org
+// Adapted from: https://github.com/smplrspace/react-fps-stats
+//
+
+import React, { useEffect, useReducer, useRef } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type FPSProps = ThemedClassName<{
+  width?: number;
+  height?: number;
+  bar?: string;
+}>;
+
+type State = {
+  max: number;
+  len: number;
+  fps: number[];
+  frames: number;
+  prevTime: number;
+};
+
+const SEC = 1_000;
+
+export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }: FPSProps) => {
+  const [{ fps, max, len }, dispatch] = useReducer(
+    (state: State) => {
+      const currentTime = Date.now();
+      if (currentTime > state.prevTime + SEC) {
+        const nextFPS = [
+          ...new Array(Math.floor((currentTime - state.prevTime - SEC) / SEC)).fill(0),
+          Math.max(1, Math.round((state.frames * SEC) / (currentTime - state.prevTime))),
+        ];
+        return {
+          max: Math.max(state.max, ...nextFPS),
+          len: Math.min(state.len + nextFPS.length, width),
+          fps: [...state.fps, ...nextFPS].slice(-width),
+          frames: 1,
+          prevTime: currentTime,
+        };
+      } else {
+        return { ...state, frames: state.frames + 1 };
+      }
+    },
+    {
+      max: 0,
+      len: 0,
+      fps: [],
+      frames: 0,
+      prevTime: Date.now(),
+    },
+  );
+
+  const requestRef = useRef<number>();
+  const tick = () => {
+    dispatch();
+    requestRef.current = requestAnimationFrame(tick);
+  };
+
+  useEffect(() => {
+    requestRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (requestRef.current) {
+        cancelAnimationFrame(requestRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      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',
+        classNames,
+      )}
+    >
+      <div>{fps[len - 1]} FPS</div>
+      <div className='w-full relative' style={{ height }}>
+        {fps.map((frame, i) => (
+          <div
+            key={`fps-${i}`}
+            className={bar}
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              right: `${len - 1 - i}px`,
+              height: `${(height * frame) / max}px`,
+              width: 1,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};