@dxos/react-ui-canvas 0.7.5-main.ff8607b → 0.7.5-staging.b81e783

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

@@ -1 +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"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/components/Grid/Grid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIvE,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAUzC,MAAM,MAAM,SAAS,GAAG,eAAe,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;WANjB,MAAM;YACL,MAAM;aACL,KAAK;eACH,OAAO;;;uCAwDnB,CAAC;AAGF,eAAO,MAAM,IAAI,UAAW,SAAS,4CAGpC,CAAC"}

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

@@ -1 +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"}
+{"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,EAAiB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAcvD,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/hooks/index.d.ts

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC"}

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

@@ -1,5 +1,5 @@
 import { type Point, type Dimension } from '../types';
-export declare const defaultOffset: Point;
+export declare const defaultOrigin: Point;
 export type ProjectionState = {
     scale: number;
     offset: Point;
@@ -54,5 +54,5 @@ export declare const zoomInPlace: (setTransform: (state: ProjectionState) => voi
 /**
  * Zoom to new scale and position.
  */
-export declare const zoomTo: (setTransform: (state: ProjectionState) => void, current: ProjectionState, next: ProjectionState, delay?: number) => void;
+export declare const zoomTo: (setTransform: (state: ProjectionState) => void, current: ProjectionState, next: ProjectionState, delay?: number, cb?: () => void) => void;
 //# sourceMappingURL=projection.d.ts.map

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

@@ -1 +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"}
+{"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;AAEF;;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;IAetD,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;AAIF;;GAEG;AAEH,eAAO,MAAM,MAAM,iBACH,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,WACrC,eAAe,QAClB,eAAe,0CAatB,CAAC"}

package/dist/types/src/hooks/{useProjection.d.ts → useCanvasContext.d.ts}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useCanvasContext.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,OAAO,CAAC;IACf,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,gBAAgB,QAAO,aAEnC,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"useWheel.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useWheel.tsx"],"names":[],"mappings":"AAWA,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,QAAQ,aAAa,YAAY,SAkD7C,CAAC"}

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

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren, type SVGProps } from 'react';
+import { 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;
@@ -8,7 +8,7 @@ export declare const createPath: (points: Point[], join?: boolean) => string;
  */
 export declare const Markers: ({ id, classNames }: ThemedClassName<{
     id?: string;
-}>) => React.JSX.Element;
+}>) => import("react/jsx-runtime").JSX.Element;
 export type MarkerProps = SVGProps<SVGMarkerElement> & PropsWithChildren<ThemedClassName<{
     id: string;
     pos: Point;
@@ -18,16 +18,16 @@ export type MarkerProps = SVGProps<SVGMarkerElement> & PropsWithChildren<ThemedC
 /**
  * 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 Marker: ({ id, className, children, pos: { x: refX, y: refY }, size: { width: markerWidth, height: markerHeight }, fill, ...rest }: MarkerProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Arrow: ({ classNames, id, size, dir, closed, }: ThemedClassName<{
     id: string;
     size?: number;
     dir?: "start" | "end";
     closed?: boolean;
-}>) => React.JSX.Element;
+}>) => import("react/jsx-runtime").JSX.Element;
 export declare const GridPattern: ({ classNames, id, size, offset, }: ThemedClassName<{
     id: string;
     size: number;
     offset: Point;
-}>) => React.JSX.Element;
+}>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=svg.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../src/util/svg.tsx"],"names":[],"mappings":"AAIA,OAAc,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,4CAYzF,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,4CAgBb,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,4CA0BzF,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,4CAe9D,CAAC"}

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

@@ -12,5 +12,6 @@ export declare const getRelativePoint: (el: HTMLElement, ev: MouseEvent) => {
 export declare const testId: <ID = string>(id: ID, inspect?: boolean) => {
     "data-test-id": ID;
 };
+export declare const inspectElement: (el: Element) => void;
 export declare const DATA_TEST_ID = "data-test-id";
 //# sourceMappingURL=util.d.ts.map

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

@@ -1 +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"}
+{"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,cAAc,OAAQ,OAAO,SASzC,CAAC;AAEF,eAAO,MAAM,YAAY,iBAAiB,CAAC"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.7.5-main.ff8607b",
+  "version": "0.7.5-staging.b81e783",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -26,14 +27,14 @@
     "@radix-ui/react-context": "1.1.1",
     "bind-event-listener": "^3.0.0",
     "d3": "^7.9.0",
-    "effect": "^3.12.1",
+    "effect": "^3.12.3",
     "react-resize-detector": "^11.0.1",
     "transformation-matrix": "^2.16.1",
-    "@dxos/debug": "0.7.5-main.ff8607b",
-    "@dxos/effect": "0.7.5-main.ff8607b",
-    "@dxos/invariant": "0.7.5-main.ff8607b",
-    "@dxos/log": "0.7.5-main.ff8607b",
-    "@dxos/util": "0.7.5-main.ff8607b"
+    "@dxos/invariant": "0.7.5-staging.b81e783",
+    "@dxos/debug": "0.7.5-staging.b81e783",
+    "@dxos/effect": "0.7.5-staging.b81e783",
+    "@dxos/log": "0.7.5-staging.b81e783",
+    "@dxos/util": "0.7.5-staging.b81e783"
   },
   "devDependencies": {
     "@effect/schema": "^0.75.5",
@@ -43,17 +44,17 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-main.ff8607b",
-    "@dxos/react-ui-theme": "0.7.5-main.ff8607b",
-    "@dxos/random": "0.7.5-main.ff8607b",
-    "@dxos/storybook-utils": "0.7.5-main.ff8607b"
+    "@dxos/random": "0.7.5-staging.b81e783",
+    "@dxos/react-ui": "0.7.5-staging.b81e783",
+    "@dxos/react-ui-theme": "0.7.5-staging.b81e783",
+    "@dxos/storybook-utils": "0.7.5-staging.b81e783"
   },
   "peerDependencies": {
     "@effect/schema": "^0.75.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.ff8607b",
-    "@dxos/react-ui-theme": "0.7.5-main.ff8607b"
+    "@dxos/react-ui": "0.7.5-staging.b81e783",
+    "@dxos/react-ui-theme": "0.7.5-staging.b81e783"
   },
   "publishConfig": {
     "access": "public"

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

@@ -10,38 +10,62 @@ import React from 'react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Canvas } from './Canvas';
-import { useProjection, useWheel } from '../../hooks';
+import { useCanvasContext, useWheel } from '../../hooks';
 import { type Point } from '../../types';
 import { testId } from '../../util';
 import { Grid, type GridProps } from '../Grid';
 
+const size = 128;
+
+const points: Point[] = [0, (2 * Math.PI) / 3, (2 * Math.PI * 2) / 3].map((a, i) => ({
+  x: Math.round(Math.cos(a - Math.PI / 2) * size * 1.5),
+  y: Math.round(Math.sin(a - Math.PI / 2) * size * 1.5),
+}));
+
 const Render = (props: GridProps) => {
   return (
     <Canvas>
-      <Content {...props} />
+      <Grid {...props} />
+      <Content />
     </Canvas>
   );
 };
 
-const Content = (props: GridProps) => {
-  const { root, scale, offset, styles, setProjection } = useProjection();
-  useWheel(root, setProjection);
-
+const TwoCanvases = (props: GridProps) => {
   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 className='grid grid-cols-2 gap-2 w-full h-full'>
+      <div className='h-full relative'>
+        <Canvas>
+          <Grid {...props} />
+          <Content />
+        </Canvas>
+      </div>
+      <div className='h-full relative'>
+        <Canvas>
+          <Grid {...props} />
+          <Content />
+        </Canvas>
       </div>
-    </>
+    </div>
   );
 };
 
-const Item = ({ x, y }: Point) => {
-  const size = 128;
-  const pos = {
+const Content = () => {
+  useWheel();
+  return (
+    <div>
+      {points.map(({ x, y }, i) => (
+        <Item key={i} x={x} y={y} />
+      ))}
+    </div>
+  );
+};
+
+const Item = (p: Point) => {
+  const { projection } = useCanvasContext();
+  const r = (projection.scale * size) / 2;
+  const [{ x, y }] = projection.toScreen([p]);
+  const rect = {
     left: x - size / 2,
     top: y - size / 2,
     width: size,
@@ -50,14 +74,15 @@ const Item = ({ x, y }: Point) => {
 
   return (
     <div {...testId('dx-test', true)}>
-      <div className='absolute flex border border-red-500 justify-center items-center' style={pos}>
+      <div className='absolute flex justify-center items-center' style={rect}>
         <div className='font-mono'>
-          ({x},{y})
+          ({p.x},{p.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 className='absolute overflow-visible'>
+        <circle cx={x} cy={y} r={r} className='stroke-red-500 storke-width-2 fill-none' />
       </svg>
     </div>
   );
@@ -75,8 +100,10 @@ export default meta;
 type Story = StoryObj<GridProps>;
 
 export const Default: Story = {
-  args: {
-    id: 'test',
-    size: 16,
-  },
+  args: { size: 16 },
+};
+
+export const SideBySide: Story = {
+  args: { size: 16 },
+  render: TwoCanvases,
 };

package/src/components/Canvas/Canvas.tsx

@@ -4,20 +4,20 @@
 
 import React, {
   type CSSProperties,
+  type HTMLAttributes,
   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';
+import { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';
 
 export interface CanvasController {
   setProjection(projection: ProjectionState): Promise<void>;
@@ -30,14 +30,17 @@ export type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionSt
  * Manages CSS projection.
  */
 export const Canvas = forwardRef<CanvasController, CanvasProps>(
-  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOffset, ...props }, forwardedRef) => {
+  ({ children, classNames, scale: _scale = 1, offset: _offset = defaultOrigin, ...props }, forwardedRef) => {
     // Size.
     const { ref, width = 0, height = 0 } = useResizeDetector();
 
+    // Ready when initially resized.
+    const [ready, setReady] = useState(false);
+
     // Projection.
     const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: _offset });
     useEffect(() => {
-      if (width && height && offset === defaultOffset) {
+      if (width && height && offset === defaultOrigin) {
         setProjection({ scale, offset: { x: width / 2, y: height / 2 } });
       }
     }, [width, height, scale, offset]);
@@ -46,6 +49,9 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
     const projection = useMemo(() => new ProjectionMapper(), []);
     useEffect(() => {
       projection.update({ width, height }, scale, offset);
+      if (offset !== defaultOrigin) {
+        setReady(true);
+      }
     }, [projection, scale, offset, width, height]);
 
     // CSS transforms.
@@ -72,10 +78,10 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
 
     return (
       <CanvasContext.Provider
-        value={{ root: ref.current, width, height, scale, offset, styles, projection, setProjection }}
+        value={{ root: ref.current, ready, width, height, scale, offset, styles, projection, setProjection }}
       >
         <div role='none' {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>
-          {children}
+          {ready ? children : null}
         </div>
       </CanvasContext.Provider>
     );

package/src/components/Grid/Grid.stories.tsx

@@ -9,25 +9,23 @@ import React, { useRef, useState } from 'react';
 
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { Grid, type GridProps } from './Grid';
+import { GridComponent, type GridProps } from './Grid';
 import { type ProjectionState } from '../../hooks';
-import { useWheel } from '../../hooks';
 
 const Render = (props: GridProps) => {
   const ref = useRef<HTMLDivElement>(null);
-  const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
-  useWheel(ref.current, setProjection);
+  const [{ scale, offset }] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
 
   return (
     <div ref={ref} className='grow'>
-      <Grid scale={scale} offset={offset} {...props} />
+      <GridComponent scale={scale} offset={offset} {...props} />
     </div>
   );
 };
 
 const meta: Meta<GridProps> = {
   title: 'ui/react-ui-canvas/Grid',
-  component: Grid,
+  component: GridComponent,
   render: Render,
   decorators: [withTheme, withLayout({ fullscreen: true })],
 };

package/src/components/Grid/Grid.tsx

@@ -2,24 +2,36 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { forwardRef, useMemo, useId } from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
+import { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
+import { useCanvasContext } from '../../hooks';
 import { type Point } from '../../types';
 import { GridPattern, testId } from '../../util';
 
 const gridRatios = [1 / 4, 1, 4, 16];
 
+const defaultGridSize = 16;
 const defaultOffset: Point = { x: 0, y: 0 };
 
 const createId = (parent: string, grid: number) => `dx-canvas-grid-${parent}-${grid}`;
 
-export type GridProps = ThemedClassName<{ id: string; size: number; scale?: number; offset?: Point }>;
+export type GridProps = ThemedClassName<{
+  size?: number;
+  scale?: number;
+  offset?: Point;
+  showAxes?: boolean;
+}>;
 
-export const Grid = forwardRef<SVGSVGElement, GridProps>(
-  ({ id: parentId, size: gridSize, scale = 1, offset = defaultOffset, classNames }, forwardedRef) => {
+export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
+  (
+    { size: gridSize = defaultGridSize, scale = 1, offset = defaultOffset, showAxes = true, classNames },
+    forwardedRef,
+  ) => {
+    const svgRef = useForwardedRef(forwardedRef);
+    const instanceId = useId();
     const grids = useMemo(
       () =>
         gridRatios
@@ -28,10 +40,12 @@ export const Grid = forwardRef<SVGSVGElement, GridProps>(
       [gridSize, scale],
     );
 
+    const { width = 0, height = 0 } = svgRef.current?.getBoundingClientRect() ?? {};
+
     return (
       <svg
         {...testId('dx-canvas-grid')}
-        ref={forwardedRef}
+        ref={svgRef}
         className={mx(
           'absolute inset-0 w-full h-full pointer-events-none touch-none select-none',
           'stroke-neutral-500',
@@ -41,15 +55,21 @@ export const Grid = forwardRef<SVGSVGElement, GridProps>(
         {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}
         <defs>
           {grids.map(({ id, size }) => (
-            <GridPattern key={id} id={createId(parentId, id)} offset={offset} size={size} />
+            <GridPattern key={id} id={createId(instanceId, id)} offset={offset} size={size} />
           ))}
         </defs>
+        {showAxes && (
+          <>
+            <line x1={0} y1={offset.y} x2={width} y2={offset.y} className='stroke-neutral-500 opacity-40' />
+            <line x1={offset.x} y1={0} x2={offset.x} y2={height} className='stroke-neutral-500 opacity-40' />
+          </>
+        )}
         <g>
           {grids.map(({ id }, i) => (
             <rect
               key={id}
               opacity={0.1 + i * 0.05}
-              fill={`url(#${createId(parentId, id)})`}
+              fill={`url(#${createId(instanceId, id)})`}
               width='100%'
               height='100%'
             />
@@ -59,3 +79,9 @@ export const Grid = forwardRef<SVGSVGElement, GridProps>(
     );
   },
 );
+
+// TODO(burdon): Use id of parent canvas.
+export const Grid = (props: GridProps) => {
+  const { scale, offset } = useCanvasContext();
+  return <GridComponent {...props} scale={scale} offset={offset} />;
+};

package/src/hooks/index.ts

@@ -3,5 +3,5 @@
 //
 
 export * from './projection';
-export * from './useProjection';
+export * from './useCanvasContext';
 export * from './useWheel';

package/src/hooks/projection.tsx

@@ -7,15 +7,15 @@ import {
   type Matrix,
   applyToPoints,
   compose,
-  inverse,
-  translate as translateMatrix,
   identity,
+  inverse,
   scale as scaleMatrix,
+  translate as translateMatrix,
 } from 'transformation-matrix';
 
 import { type Point, type Dimension } from '../types';
 
-export const defaultOffset: Point = { x: 0, y: 0 };
+export const defaultOrigin: Point = { x: 0, y: 0 };
 
 // TODO(burdon): Rotation also?
 export type ProjectionState = {
@@ -23,9 +23,6 @@ export type ProjectionState = {
   offset: Point;
 };
 
-// TODO(burdon): Tradeoff between stable ProjectionMapping object that can be used with live values within a closure,
-//  vs. a reactive object that can trigger updates?
-
 /**
  * Maps between screen and model coordinates.
  */
@@ -48,7 +45,7 @@ export interface Projection {
 export class ProjectionMapper implements Projection {
   private _bounds: Dimension = { width: 0, height: 0 };
   private _scale: number = 1;
-  private _offset: Point = defaultOffset;
+  private _offset: Point = defaultOrigin;
   private _toScreen: Matrix = identity();
   private _toModel: Matrix = identity();
 
@@ -62,7 +59,13 @@ export class ProjectionMapper implements Projection {
     this._bounds = bounds;
     this._scale = scale;
     this._offset = offset;
-    this._toScreen = compose(translateMatrix(this._offset.x, this._offset.y), scaleMatrix(this._scale));
+    this._toScreen = compose(
+      // NOTE: Order is important.
+      translateMatrix(this._offset.x, this._offset.y),
+      scaleMatrix(this._scale),
+      // TODO(burdon): Flip.
+      // flipX(),
+    );
     this._toModel = inverse(this._toScreen);
     return this;
   }
@@ -128,6 +131,8 @@ export const zoomInPlace = (
     });
 };
 
+const noop = () => {};
+
 /**
  * Zoom to new scale and position.
  */
@@ -137,6 +142,7 @@ export const zoomTo = (
   current: ProjectionState,
   next: ProjectionState,
   delay = 200,
+  cb = noop,
 ) => {
   const is = d3.interpolateObject({ scale: current.scale, ...current.offset }, { scale: next.scale, ...next.offset });
   d3.transition()
@@ -145,5 +151,6 @@ export const zoomTo = (
     .tween('zoom', () => (t) => {
       const { scale, x, y } = is(t);
       setTransform({ scale, offset: { x, y } });
-    });
+    })
+    .on('end', cb);
 };

package/src/hooks/{useProjection.tsx → useCanvasContext.tsx}

@@ -10,6 +10,7 @@ import { type Projection, type ProjectionState } from './projection';
 
 export type CanvasContext = ProjectionState & {
   root: HTMLDivElement;
+  ready: boolean;
   width: number;
   height: number;
   styles: CSSProperties;
@@ -23,6 +24,6 @@ export type CanvasContext = ProjectionState & {
 // TODO(burdon): Use radix?
 export const CanvasContext = createContext<CanvasContext | null>(null);
 
-export const useProjection = (): CanvasContext => {
+export const useCanvasContext = (): CanvasContext => {
   return useContext(CanvasContext) ?? raise(new Error('Missing CanvasContext'));
 };