@dxos/react-ui-canvas 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.8.4-main.bc674ce",
+  "version": "0.8.4-main.bcb3aa67d6",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,30 +33,30 @@
     "d3": "^7.9.0",
     "react-resize-detector": "^11.0.1",
     "transformation-matrix": "^2.16.1",
-    "@dxos/debug": "0.8.4-main.bc674ce",
-    "@dxos/invariant": "0.8.4-main.bc674ce",
-    "@dxos/log": "0.8.4-main.bc674ce",
-    "@dxos/util": "0.8.4-main.bc674ce"
+    "@dxos/invariant": "0.8.4-main.bcb3aa67d6",
+    "@dxos/log": "0.8.4-main.bcb3aa67d6",
+    "@dxos/debug": "0.8.4-main.bcb3aa67d6",
+    "@dxos/util": "0.8.4-main.bcb3aa67d6"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.bc674ce",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/storybook-utils": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "vite": "^7.1.11",
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/random": "0.8.4-main.bcb3aa67d6",
+    "@dxos/storybook-utils": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.bc674ce",
-    "@dxos/ui-theme": "0.8.4-main.bc674ce"
+    "@dxos/react-ui": "0.8.4-main.bcb3aa67d6",
+    "@dxos/ui-theme": "0.8.4-main.bcb3aa67d6"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,7 +5,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { useCanvasContext, useDrag, useWheel } from '../../hooks';
 import { type Point } from '../../types';
@@ -32,14 +32,14 @@ const DefaultStory = (props: GridProps) => {
 
 const TwoCanvases = (props: GridProps) => {
   return (
-    <div className='grid grid-cols-2 gap-2 is-full bs-full'>
-      <div className='bs-full relative'>
+    <div className='grid grid-cols-2 gap-2 h-full w-full'>
+      <div className='h-full relative'>
         <Canvas>
           <Grid {...props} />
           <Content />
         </Canvas>
       </div>
-      <div className='bs-full relative'>
+      <div className='h-full relative'>
         <Canvas>
           <Grid {...props} />
           <Content />
@@ -92,7 +92,7 @@ const meta = {
   title: 'ui/react-ui-canvas/Canvas',
   component: Grid,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Canvas/Canvas.tsx

@@ -30,7 +30,7 @@ export type CanvasProps = ThemedClassName<PropsWithChildren<Partial<ProjectionSt
  * Manages CSS projection.
  */
 export const Canvas = forwardRef<CanvasController, CanvasProps>(
-  ({ children, classNames, scale: _scale = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
+  ({ children, classNames, scale: scaleProp = 1, offset: offsetProp = defaultOrigin, ...props }, forwardedRef) => {
     // Size.
     const { ref, width = 0, height = 0 } = useResizeDetector();
 
@@ -38,7 +38,7 @@ export const Canvas = forwardRef<CanvasController, CanvasProps>(
     const [ready, setReady] = useState(false);
 
     // Projection.
-    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: _scale, offset: offsetProp });
+    const [{ scale, offset }, setProjection] = useState<ProjectionState>({ scale: scaleProp, offset: offsetProp });
     useEffect(() => {
       if (width && height && offset === defaultOrigin) {
         setProjection({ scale, offset: { x: width / 2, y: height / 2 } });

package/src/components/FPS.tsx

@@ -73,12 +73,12 @@ 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-baseSurface text-xs text-subdued font-thin pointer-events-none border border-separator',
+        'bg-base-surface text-xs text-subdued font-thin pointer-events-none border border-separator',
         classNames,
       )}
     >
       <div>{fps[len - 1]} FPS</div>
-      <div className='is-full relative' style={{ height }}>
+      <div className='w-full relative' style={{ height }}>
         {fps.map((frame, i) => (
           <div
             key={`fps-${i}`}

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef, useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type ProjectionState } from '../../hooks';
 
@@ -26,7 +26,7 @@ const meta = {
   title: 'ui/react-ui-canvas/Grid',
   component: GridComponent,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Grid/Grid.tsx

@@ -54,11 +54,7 @@ export const GridComponent = forwardRef<SVGSVGElement, GridProps>(
       <svg
         {...testId('dx-canvas-grid')}
         ref={svgRef}
-        className={mx(
-          'absolute inset-0 is-full bs-full pointer-events-none touch-none select-none',
-          'stroke-neutral-500',
-          classNames,
-        )}
+        className={mx('dx-fullscreen pointer-events-none touch-none select-none', 'stroke-neutral-500', classNames)}
       >
         {/* NOTE: The pattern is offset so that the middle of the pattern aligns with the grid. */}
         <defs>

package/src/util/svg.stories.tsx

@@ -11,7 +11,7 @@ import { Arrow, createPath } from './svg';
 import { testId } from './util';
 
 const DefaultStory = () => (
-  <svg className='border border-separator is-[30rem] bs-[400px]'>
+  <svg className='border border-separator w-[30rem] h-[400px]'>
     <defs>
       <Arrow id='arrow-start' classNames='fill-none stroke-red-500' dir='start' />
       <Arrow id='arrow-end' classNames='fill-none stroke-red-500' dir='end' />
@@ -32,7 +32,7 @@ const DefaultStory = () => (
 const meta = {
   title: 'ui/react-ui-canvas/svg',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },