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

package/package.json

@@ -1,59 +1,60 @@
 {
   "name": "@dxos/react-ui-canvas",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.8baae0fced",
   "description": "A canvas component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "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"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@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/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/invariant": "0.8.4-main.8baae0fced",
+    "@dxos/util": "0.8.4-main.8baae0fced",
+    "@dxos/log": "0.8.4-main.8baae0fced",
+    "@dxos/debug": "0.8.4-main.8baae0fced"
   },
   "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.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.13",
+    "@dxos/random": "0.8.4-main.8baae0fced",
+    "@dxos/storybook-utils": "0.8.4-main.8baae0fced",
+    "@dxos/ui-theme": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui": "0.8.4-main.8baae0fced"
   },
   "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"
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.8baae0fced",
+    "@dxos/ui-theme": "0.8.4-main.8baae0fced"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,18 +2,16 @@
 // 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { Canvas } from './Canvas';
-import { useCanvasContext, useWheel } from '../../hooks';
+import { useCanvasContext, useDrag, 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;
 
@@ -33,7 +31,7 @@ const DefaultStory = (props: GridProps) => {
 
 const TwoCanvases = (props: GridProps) => {
   return (
-    <div className='grid grid-cols-2 gap-2 w-full h-full'>
+    <div className='grid grid-cols-2 gap-2 h-full w-full'>
       <div className='h-full relative'>
         <Canvas>
           <Grid {...props} />
@@ -52,6 +50,7 @@ const TwoCanvases = (props: GridProps) => {
 
 const Content = () => {
   useWheel();
+  useDrag();
   return (
     <div>
       {points.map(({ x, y }, i) => (
@@ -88,22 +87,25 @@ 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(), withLayout({ layout: 'fullscreen' })],
+  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 },
 };
 
 export const SideBySide: Story = {
-  args: { size: 16 },
   render: TwoCanvases,
+  args: { size: 16 },
 };

package/src/components/Canvas/Canvas.tsx

@@ -15,9 +15,9 @@ import React, {
 import { useResizeDetector } from 'react-resize-detector';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/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>;
@@ -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: _offset = 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: _offset });
+    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 } });
@@ -64,23 +64,19 @@ 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
         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}>
+        <div {...props} className={mx('absolute inset-0 overflow-hidden', classNames)} ref={ref}>
           {ready ? children : null}
         </div>
       </CanvasContext.Provider>

package/src/components/CellGrid/CellGrid.stories.tsx

@@ -0,0 +1,238 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { RegistryContext, Registry } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { CellGrid, type CellGridProps } from './CellGrid';
+import { toggleCell } from './input';
+import { type RenderCell } from './render';
+import { createCellGridAtoms } from './state/atoms';
+import type { Cell, CellCoord, Row, Tool } from './state/types';
+
+type SequencerData = { velocity: number };
+
+const trackColors = [
+  '#ef4444', // red
+  '#f97316', // orange
+  '#eab308', // yellow
+  '#22c55e', // green
+  '#06b6d4', // cyan
+  '#3b82f6', // blue
+  '#a855f7', // purple
+  '#ec4899', // pink
+];
+
+const renderSequencerCell: RenderCell<SequencerData> = ({ ctx, x, y, w, h, cell }) => {
+  const inset = 1;
+  const radius = 4;
+  const color = trackColors[cell.row % trackColors.length];
+  const velocity = cell.data?.velocity ?? 0.8;
+  ctx.fillStyle = color;
+  ctx.globalAlpha = 0.3 + velocity * 0.7;
+  roundedRect(ctx, x + inset, y + inset, w - inset * 2, h - inset * 2, radius);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+};
+
+const renderDataVizCell: RenderCell<{ magnitude: number }> = ({ ctx, x, y, w, h, cell }) => {
+  const magnitude = cell.data?.magnitude ?? 0.5;
+  const cx = x + w / 2;
+  const cy = y + h / 2;
+  const r = Math.max(2, (Math.min(w, h) / 2 - 2) * magnitude);
+  ctx.fillStyle = `hsl(${(cell.row * 30) % 360}, 70%, 55%)`;
+  ctx.globalAlpha = 0.85;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+};
+
+const roundedRect = (ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number): void => {
+  const radius = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.lineTo(x + w - radius, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+  ctx.lineTo(x + w, y + h - radius);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+  ctx.lineTo(x + radius, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+  ctx.lineTo(x, y + radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
+  ctx.closePath();
+};
+
+// Deterministic 0..1 random — Linear Congruential Generator. Used in story
+// seeding so the same args produce the same grid every render.
+const makeLcg = (seed: number) => {
+  let state = seed >>> 0;
+  return () => {
+    state = (state * 1664525 + 1013904223) >>> 0;
+    return state / 0xffffffff;
+  };
+};
+
+type Variant = 'sequencer' | 'data-viz';
+
+type StoryProps = Pick<CellGridProps, 'headers'> & {
+  variant: Variant;
+  tool: Tool;
+  numCols: number;
+  numRows: number;
+  cellWidth: number;
+  cellHeight: number;
+  playback: boolean;
+};
+
+const DefaultStory = ({ variant, tool, numCols, numRows, cellWidth, cellHeight, playback, headers }: StoryProps) => {
+  const registry = useContext(RegistryContext);
+
+  const atoms = useMemo(
+    () => createCellGridAtoms<SequencerData | { magnitude: number }>({ cellWidth, cellHeight }),
+    [cellWidth, cellHeight],
+  );
+  const rows: Row[] = useMemo(
+    () =>
+      Array.from({ length: numRows }, (_, index) => ({
+        id: `r${index}`,
+        label: variant === 'sequencer' ? `Track ${index + 1}` : `Series ${index + 1}`,
+      })),
+    [numRows, variant],
+  );
+
+  // Set tool whenever it changes.
+  useEffect(() => {
+    registry.set(atoms.tool, tool);
+  }, [registry, atoms.tool, tool]);
+
+  // Seed with sample data. Use a deterministic LCG instead of Math.random so
+  // story renders are stable across runs (helpful for visual review / snapshots).
+  useEffect(() => {
+    const next = new Map<string, Cell<SequencerData | { magnitude: number }>>();
+    const lcg = makeLcg(0xc0ffee);
+    if (variant === 'sequencer') {
+      for (let row = 0; row < numRows; row++) {
+        for (let col = 0; col < numCols; col += row + 2) {
+          if (col % (row + 1) === 0) {
+            next.set(`${col},${row}`, { col, row, length: 1, data: { velocity: 0.5 + lcg() * 0.5 } });
+          }
+        }
+      }
+    } else {
+      for (let row = 0; row < numRows; row++) {
+        for (let col = 0; col < numCols; col++) {
+          if (lcg() < 0.35) {
+            next.set(`${col},${row}`, { col, row, length: 1, data: { magnitude: lcg() } });
+          }
+        }
+      }
+    }
+    registry.set(atoms.cells, next);
+  }, [registry, atoms.cells, variant, numCols, numRows]);
+
+  // Animated playhead.
+  const playRef = useRef<number | null>(null);
+  useEffect(() => {
+    if (!playback) {
+      registry.set(atoms.playhead, null);
+      return;
+    }
+    const start = performance.now();
+    const period = 4_000; // ms to traverse numCols.
+    const tick = (now: number) => {
+      const t = ((now - start) % period) / period;
+      registry.set(atoms.playhead, t * numCols);
+      playRef.current = requestAnimationFrame(tick);
+    };
+    playRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (playRef.current !== null) {
+        cancelAnimationFrame(playRef.current);
+      }
+      registry.set(atoms.playhead, null);
+    };
+  }, [registry, atoms.playhead, playback, numCols]);
+
+  const renderCell = variant === 'sequencer' ? (renderSequencerCell as RenderCell) : (renderDataVizCell as RenderCell);
+
+  const handleToggle = (coord: CellCoord) => {
+    toggleCell(registry, atoms, coord, ({ col, row }) => ({
+      col,
+      row,
+      length: 1,
+      data: variant === 'sequencer' ? { velocity: 0.8 } : { magnitude: 0.7 },
+    }));
+  };
+
+  return (
+    <div className='absolute inset-0'>
+      <CellGrid
+        atoms={atoms as any}
+        rows={rows}
+        renderCell={renderCell}
+        headers={headers}
+        onCellToggle={handleToggle}
+      />
+    </div>
+  );
+};
+
+const RegistryWrapper = ({ children }: { children: React.ReactNode }) => {
+  const [registry] = useState(() => Registry.make());
+  return <RegistryContext.Provider value={registry}>{children}</RegistryContext.Provider>;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-canvas/CellGrid',
+  component: DefaultStory,
+  render: (args) => (
+    <RegistryWrapper>
+      <DefaultStory {...args} />
+    </RegistryWrapper>
+  ),
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: { layout: 'fullscreen' },
+  argTypes: {
+    variant: { control: { type: 'inline-radio' }, options: ['sequencer', 'data-viz'] },
+    // 'resize' is deferred (PR description "Deferred / out of v1") — hide from controls.
+    tool: { control: { type: 'inline-radio' }, options: ['toggle', 'select'] },
+    numCols: { control: { type: 'number', min: 16, max: 1024, step: 16 } },
+    numRows: { control: { type: 'number', min: 1, max: 64, step: 1 } },
+    cellWidth: { control: { type: 'number', min: 8, max: 64, step: 1 } },
+    cellHeight: { control: { type: 'number', min: 12, max: 64, step: 1 } },
+    playback: { control: 'boolean' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Sequencer: Story = {
+  args: {
+    variant: 'sequencer',
+    tool: 'toggle',
+    numCols: 64,
+    numRows: 8,
+    cellWidth: 24,
+    cellHeight: 24,
+    playback: true,
+  },
+};
+
+export const DataViz: Story = {
+  args: {
+    variant: 'data-viz',
+    tool: 'select',
+    numCols: 256,
+    numRows: 12,
+    cellWidth: 20,
+    cellHeight: 20,
+    playback: false,
+  },
+};