@dxos/react-ui-canvas 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,8 +15,7 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -25,16 +24,17 @@
     "src"
   ],
   "dependencies": {
+    "@effect-atom/atom": "^0.5.3",
     "@effect-atom/atom-react": "^0.5.0",
     "@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/invariant": "0.10.0",
-    "@dxos/util": "0.10.0",
-    "@dxos/log": "0.10.0",
-    "@dxos/debug": "0.10.0"
+    "@dxos/debug": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",
@@ -43,18 +43,18 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/storybook-utils": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/ui-theme": "0.10.0"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CellGrid/CellGrid.tsx

@@ -240,7 +240,7 @@ export const CellGrid = <T,>({
   }, [registry, atoms, headers]);
 
   return (
-    <div ref={containerRef} className={mx('relative w-full h-full overflow-hidden bg-baseSurface', classNames)}>
+    <div ref={containerRef} className={mx('relative w-full h-full overflow-hidden dx-base-surface', classNames)}>
       {/*
         Canvases are nudged up + left 1 CSS pixel so the gridlines (drawn at the TOP
         and LEFT edges of each cell) sit on top of the frozen header dividers — the
@@ -259,7 +259,7 @@ export const CellGrid = <T,>({
       {headers.left > 0 && <TrackHeader viewport={viewportState} headers={headers} rows={rows} height={height} />}
       {headers.top > 0 && headers.left > 0 && (
         <div
-          className='absolute top-0 left-0 border-b border-r border-neutral-200 dark:border-neutral-700 bg-baseSurface'
+          className='absolute top-0 left-0 border-b border-r border-neutral-200 dark:border-neutral-700 bg-base-surface'
           style={{ width: headers.left, height: headers.top }}
         />
       )}

package/src/components/CellGrid/headers/Ruler.tsx

@@ -47,7 +47,7 @@ export const Ruler = ({ viewport, headers, width, majorEvery = 4, classNames }:
   return (
     <div
       className={mx(
-        'absolute top-0 left-0 right-0 border-b border-neutral-200 dark:border-neutral-700 bg-baseSurface select-none overflow-hidden',
+        'absolute top-0 left-0 right-0 border-b border-neutral-200 dark:border-neutral-700 bg-base-surface select-none overflow-hidden',
         classNames,
       )}
       style={{ height: headers.top }}

package/src/components/CellGrid/input/pointer.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import type { Registry } from '@effect-atom/atom-react';
+import type { Registry } from '@effect-atom/atom';
 
 import type { CellGridAtoms } from '../state/atoms';
 import type { Cell, CellCoord, Headers, SelectionRange, Tool } from '../state/types';

package/src/components/CellGrid/input/wheel.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import type { Registry } from '@effect-atom/atom-react';
+import type { Registry } from '@effect-atom/atom';
 
 import type { CellGridAtoms } from '../state/atoms';
 import type { Headers } from '../state/types';

package/src/components/CellGrid/state/atoms.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom';
 
 import type { Cell, Selection, Tool, Viewport } from './types';
 

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

@@ -8,6 +8,9 @@ import { raise } from '@dxos/debug';
 
 import { type Projection, type ProjectionState } from './projection';
 
+// Kept out of the canvas components: react-refresh only fast-refreshes a module whose exports are all
+// components, so a context and hook exported beside one force a full page reload on every edit.
+
 export type CanvasContext = ProjectionState & {
   root: HTMLDivElement;
   ready: boolean;

package/src/util/index.ts

@@ -3,4 +3,5 @@
 //
 
 export * from './svg';
+export * from './svg-path';
 export * from './util';

package/src/util/svg-path.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Point } from '../types';
+
+// Kept out of `svg.tsx`: react-refresh only fast-refreshes a module whose exports are all components,
+// so a helper exported beside them forces a full page reload on every edit.
+
+/** https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
+export const createPath = (points: Point[], join = false) => {
+  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');
+};

package/src/util/svg.stories.tsx

@@ -7,7 +7,8 @@ import React from 'react';
 
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { Arrow, createPath } from './svg';
+import { Arrow } from './svg';
+import { createPath } from './svg-path';
 import { testId } from './util';
 
 const DefaultStory = () => (

package/src/util/svg.tsx

@@ -8,15 +8,12 @@ import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
 import { type Dimension, type Point } from '../types';
+import { createPath } from './svg-path';
 
 // Refs
 //  - https://airbnb.io/visx/gallery
 //  - https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/primitives/Vec.ts
 
-export const createPath = (points: Point[], join = false) => {
-  return ['M', points.map(({ x, y }) => `${x},${y}`).join(' L '), join ? 'Z' : ''].join(' ');
-};
-
 /**
  * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
  * NOTE: Leave space around shape for line width.