@dxos/react-ui-canvas 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.ae835ea",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,6 +9,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -24,36 +25,36 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
     "bind-event-listener": "^3.0.0",
     "d3": "^7.9.0",
     "react-resize-detector": "^11.0.1",
     "transformation-matrix": "^2.16.1",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/debug": "0.8.4-main.ae835ea",
+    "@dxos/invariant": "0.8.4-main.ae835ea",
+    "@dxos/log": "0.8.4-main.ae835ea",
+    "@dxos/util": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.ae835ea",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
+    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
   },
   "peerDependencies": {
     "effect": "3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,19 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { Canvas } from './Canvas';
 import { useCanvasContext, useWheel } from '../../hooks';
 import { type Point } from '../../types';
 import { testId } from '../../util';
 import { Grid, type GridProps } from '../Grid';
 
+import { Canvas } from './Canvas';
+
 const size = 128;
 
 const points: Point[] = [0, (2 * Math.PI) / 3, (2 * Math.PI * 2) / 3].map((a, i) => ({
@@ -88,16 +87,19 @@ const Item = (p: Point) => {
   );
 };
 
-const meta: Meta<GridProps> = {
+const meta = {
   title: 'ui/react-ui-canvas/Canvas',
   component: Grid,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Grid>;
 
 export default meta;
 
-type Story = StoryObj<GridProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: { size: 16 },

package/src/components/Canvas/Canvas.tsx

@@ -17,7 +17,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { defaultOrigin, CanvasContext, ProjectionMapper, type ProjectionState } from '../../hooks';
+import { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks';
 
 export interface CanvasController {
   setProjection(projection: ProjectionState): Promise<void>;
@@ -64,17 +64,13 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
     }, [scale, offset]);
 
     // Controller.
-    useImperativeHandle(
-      forwardedRef,
-      () => {
-        return {
-          setProjection: async (projection: ProjectionState) => {
-            setProjection(projection);
-          },
-        };
-      },
-      [ref],
-    );
+    useImperativeHandle(forwardedRef, () => {
+      return {
+        setProjection: async (projection: ProjectionState) => {
+          setProjection(projection);
+        },
+      };
+    }, [ref]);
 
     return (
       <CanvasContext.Provider

package/src/components/FPS.tsx

@@ -53,7 +53,7 @@ export const FPS = ({ classNames, width = 60, height = 30, bar = 'bg-cyan-500' }
     },
   );
 
-  const requestRef = useRef<number>();
+  const requestRef = useRef<number | null>(null);
   const tick = () => {
     dispatch();
     requestRef.current = requestAnimationFrame(tick);

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

@@ -2,16 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { GridComponent, type GridProps } from './Grid';
 import { type ProjectionState } from '../../hooks';
 
+import { GridComponent, type GridProps } from './Grid';
+
 const DefaultStory = (props: GridProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const [{ scale, offset }] = useState<ProjectionState>({ scale: 1, offset: { x: 0, y: 0 } });
@@ -23,16 +22,19 @@ const DefaultStory = (props: GridProps) => {
   );
 };
 
-const meta: Meta<GridProps> = {
+const meta = {
   title: 'ui/react-ui-canvas/Grid',
   component: GridComponent,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof GridComponent>;
 
 export default meta;
 
-type Story = StoryObj<GridProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/Grid/Grid.tsx

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, useMemo, useId } from 'react';
+import React, { forwardRef, useId, useMemo } from 'react';
 
-import { useForwardedRef, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, useForwardedRef } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useCanvasContext } from '../../hooks';

package/src/hooks/projection.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { interpolate, interpolateObject, transition, easeSinOut } from 'd3';
+import { easeSinOut, interpolate, interpolateObject, transition } from 'd3';
 import {
   type Matrix,
   applyToPoints,
@@ -13,7 +13,7 @@ import {
   translate as translateMatrix,
 } from 'transformation-matrix';
 
-import { type Point, type Dimension } from '../types';
+import { type Dimension, type Point } from '../types';
 
 export const defaultOrigin: Point = { x: 0, y: 0 };
 

package/src/hooks/useWheel.tsx

@@ -5,9 +5,10 @@
 import { bindAll } from 'bind-event-listener';
 import { useEffect } from 'react';
 
+import { getRelativePoint } from '../util';
+
 import { getZoomTransform } from './projection';
 import { useCanvasContext } from './useCanvasContext';
-import { getRelativePoint } from '../util';
 
 export type WheelOptions = {
   zoom?: boolean;

package/src/types.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 export const Point = Schema.Struct({ x: Schema.Number, y: Schema.Number });
 export const Dimension = Schema.Struct({ width: Schema.Number, height: Schema.Number });

package/src/util/svg.stories.tsx

@@ -2,12 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import type { Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { Arrow, createPath } from './svg';
 import { testId } from './util';
@@ -31,15 +29,17 @@ const DefaultStory = () => (
   </svg>
 );
 
-const meta: Meta = {
+const meta = {
   title: 'ui/react-ui-canvas/svg',
   render: DefaultStory,
   decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};