@dxos/react-ui-canvas 0.13.0 → 0.14.0

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"useCanvasContext.d.ts","sourceRoot":"","sources":["../../../../../src/archive/hooks/useCanvasContext.ts"],"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,kBAAkB,CAAC;AAKzE,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/archive/hooks/useDrag.d.ts

@@ -1,6 +0,0 @@
-export type DragOptions = {};
-/**
- * Handle drag events to update the transform state (offset).
- */
-export declare const useDrag: (_options?: DragOptions) => void;
-//# sourceMappingURL=useDrag.d.ts.map

package/dist/types/src/archive/hooks/useDrag.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../../src/archive/hooks/useDrag.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,WAAW,GAAG,EAEzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,cAAc,WAAW,SA+E5C,CAAC"}

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

@@ -1,8 +0,0 @@
-export type WheelOptions = {
-    zoom?: boolean;
-};
-/**
- * Handle wheel events to update the transform state (zoom and offset).
- */
-export declare const useWheel: (options?: WheelOptions) => void;
-//# sourceMappingURL=useWheel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useWheel.d.ts","sourceRoot":"","sources":["../../../../../src/archive/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,SA+C7C,CAAC"}

package/dist/types/src/archive/index.d.ts

@@ -1,5 +0,0 @@
-export * from './components/index.ts';
-export * from './hooks/index.ts';
-export * from './types.ts';
-export * from './util/index.ts';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/archive/index.ts"],"names":[],"mappings":"AAIA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC"}

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

@@ -1,19 +0,0 @@
-import * as Schema from 'effect/Schema';
-export declare const Point: Schema.Struct<{
-    readonly x: Schema.Number;
-    readonly y: Schema.Number;
-}>;
-export declare const Dimension: Schema.Struct<{
-    readonly width: Schema.Number;
-    readonly height: Schema.Number;
-}>;
-export declare const Rect: Schema.Struct<{
-    readonly x: Schema.Number;
-    readonly y: Schema.Number;
-    readonly width: Schema.Number;
-    readonly height: Schema.Number;
-}>;
-export type Point = Schema.Schema.Type<typeof Point>;
-export type Dimension = Schema.Schema.Type<typeof Dimension>;
-export type Rect = Schema.Schema.Type<typeof Rect>;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/archive/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAGxC,eAAO,MAAM,KAAK;;;EAAwD,CAAC;AAC3E,eAAO,MAAM,SAAS;;;EAAiE,CAAC;AACxF,eAAO,MAAM,IAAI;;;;;EAAmD,CAAC;AAErE,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,KAAK,CAAC,CAAC;AACrD,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,SAAS,CAAC,CAAC;AAC7D,MAAM,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC"}

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

@@ -1,4 +0,0 @@
-export * from './svg.tsx';
-export * from './svg-path.ts';
-export * from './util.ts';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/archive/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}

package/dist/types/src/archive/util/svg-path.d.ts

@@ -1,4 +0,0 @@
-import { type Point } from '../types.ts';
-/** https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths */
-export declare const createPath: (points: Point[], join?: boolean) => string;
-//# sourceMappingURL=svg-path.d.ts.map

package/dist/types/src/archive/util/svg-path.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"svg-path.d.ts","sourceRoot":"","sources":["../../../../../src/archive/util/svg-path.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAKzC,sEAAsE;AACtE,eAAO,MAAM,UAAU,WAAY,KAAK,EAAE,2BAEzC,CAAC"}

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

@@ -1,32 +0,0 @@
-import React, { type PropsWithChildren, type SVGProps } from 'react';
-import type * as Util from '@dxos/react-ui/Util';
-import { type Dimension, type Point } from '../types.ts';
-/**
- * https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
- * NOTE: Leave space around shape for line width.
- */
-export declare const Markers: ({ id, classNames }: Util.ThemedClassName<{
-    id?: string;
-}>) => React.JSX.Element;
-export type MarkerProps = SVGProps<SVGMarkerElement> & PropsWithChildren<Util.ThemedClassName<{
-    id: string;
-    pos: Point;
-    size: Dimension;
-    fill?: boolean;
-}>>;
-/**
- * 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 Arrow: ({ classNames, id, size, dir, closed, }: Util.ThemedClassName<{
-    id: string;
-    size?: number;
-    dir?: 'start' | 'end';
-    closed?: boolean;
-}>) => React.JSX.Element;
-export declare const GridPattern: ({ classNames, id, size, offset, }: Util.ThemedClassName<{
-    id: string;
-    size: number;
-    offset: Point;
-}>) => React.JSX.Element;
-//# sourceMappingURL=svg.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../../../../src/archive/util/svg.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,KAAK,IAAI,MAAM,qBAAqB,CAAC;AAGjD,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAOzD;;;GAGG;AACH,eAAO,MAAM,OAAO,uBAAsC,IAAI,CAAC,eAAe,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,sBAY9F,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,GAClD,iBAAiB,CACf,IAAI,CAAC,eAAe,CAAC;IACnB,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,IAAI,CAAC,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,sBA0B9F,CAAC;AAEF,eAAO,MAAM,WAAW,sCAKrB,IAAI,CAAC,eAAe,CAAC;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,CAAC,sBAenE,CAAC"}

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

@@ -1,15 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const DefaultStory: () => React.JSX.Element;
-declare const meta: {
-    title: string;
-    render: typeof DefaultStory;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=svg.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"svg.stories.d.ts","sourceRoot":"","sources":["../../../../../src/archive/util/svg.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,QAAA,MAAM,YAAY,yBAiBjB,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;QAKN,MAAM;;CAEM,CAAC;eAEF,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

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

@@ -1,17 +0,0 @@
-/**
- * Get the relative point of the cursor.
- * NOTE: ev.offset returns the position relative to the target.
- */
-export declare const getRelativePoint: (el: HTMLElement, ev: MouseEvent) => {
-    x: number;
-    y: number;
-};
-/**
- *
- */
-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/archive/util/util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../../src/archive/util/util.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,eAAO,MAAM,gBAAgB,OAAQ,WAAW,MAAM,UAAU;IAErD,CAAC;IAAuB,CAAC;CACnC,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/dist/types/src/scene.d.ts

@@ -1,5 +0,0 @@
-export * from './components/index.ts';
-export * from './hooks/index.ts';
-export * from './model/index.ts';
-export * from './utils/index.ts';
-//# sourceMappingURL=scene.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../../../src/scene.ts"],"names":[],"mappings":"AAKA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

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

@@ -1,111 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { useCanvasContext, useDrag, useWheel } from '../../hooks/index.ts';
-import { type Point } from '../../types.ts';
-import { testId } from '../../util/index.ts';
-import { Grid, type GridProps } from '../Grid/index.ts';
-import { Canvas } from './Canvas.tsx';
-
-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 DefaultStory = (props: GridProps) => {
-  return (
-    <Canvas>
-      <Grid {...props} />
-      <Content />
-    </Canvas>
-  );
-};
-
-const TwoCanvases = (props: GridProps) => {
-  return (
-    <div className='grid grid-cols-2 gap-2 dx-fill'>
-      <div className='h-full relative'>
-        <Canvas>
-          <Grid {...props} />
-          <Content />
-        </Canvas>
-      </div>
-      <div className='h-full relative'>
-        <Canvas>
-          <Grid {...props} />
-          <Content />
-        </Canvas>
-      </div>
-    </div>
-  );
-};
-
-const Content = () => {
-  useWheel();
-  useDrag();
-  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,
-    height: size,
-  };
-
-  return (
-    <div {...testId('dx-test', true)}>
-      <div className='absolute flex justify-center items-center' style={rect}>
-        <div className='font-mono'>
-          ({p.x},{p.y})
-        </div>
-      </div>
-
-      {/* NOTE: Width and height are not important since overflow-visible. */}
-      <svg className='absolute overflow-visible'>
-        <circle cx={x} cy={y} r={r} className='stroke-red-500 storke-width-2 fill-none' />
-      </svg>
-    </div>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-canvas/Canvas',
-  component: Grid,
-  render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof Grid>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { size: 16 },
-};
-
-export const SideBySide: Story = {
-  render: TwoCanvases,
-  args: { size: 16 },
-};

package/src/archive/components/Canvas/Canvas.tsx

@@ -1,87 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, {
-  type CSSProperties,
-  type HTMLAttributes,
-  type PropsWithChildren,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-
-import type * as Util from '@dxos/react-ui/Util';
-import { mx } from '@dxos/ui-theme';
-
-import { CanvasContext, ProjectionMapper, type ProjectionState, defaultOrigin } from '../../hooks/index.ts';
-
-export interface CanvasController {
-  setProjection(projection: ProjectionState): Promise<void>;
-}
-
-export type CanvasProps = Util.ThemedClassName<
-  PropsWithChildren<Partial<ProjectionState> & HTMLAttributes<HTMLDivElement>>
->;
-
-/**
- * Root canvas component.
- * Manages CSS projection.
- */
-export const Canvas = forwardRef<CanvasController, CanvasProps>(
-  ({ children, classNames, scale: scaleProp = 1, offset: offsetProp = 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: scaleProp, offset: offsetProp });
-    useEffect(() => {
-      if (width && height && offset === defaultOrigin) {
-        setProjection({ scale, offset: { x: width / 2, y: height / 2 } });
-      }
-    }, [width, height, scale, offset]);
-
-    // Projection mapper.
-    const projection = useMemo(() => new ProjectionMapper(), []);
-    useEffect(() => {
-      projection.update({ width, height }, scale, offset);
-      if (offset !== defaultOrigin) {
-        setReady(true);
-      }
-    }, [projection, scale, offset, width, height]);
-
-    // CSS transforms.
-    const styles = useMemo<CSSProperties>(() => {
-      return {
-        // NOTE: Order is important.
-        transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
-        visibility: width && height ? 'visible' : 'hidden',
-      };
-    }, [scale, offset]);
-
-    // Controller.
-    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 {...props} className={mx('dx-cover overflow-hidden', classNames)} ref={ref}>
-          {ready ? children : null}
-        </div>
-      </CanvasContext.Provider>
-    );
-  },
-);

package/src/archive/components/Canvas/index.ts

@@ -1,5 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-export * from './Canvas.tsx';

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

@@ -1,239 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { RegistryContext } from '@effect/atom-react/RegistryContext';
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Registry from 'effect/reactivity/AtomRegistry';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { CellGrid, type CellGridProps } from './CellGrid.tsx';
-import { toggleCell } from './input/index.ts';
-import { type RenderCell } from './render/index.ts';
-import { createCellGridAtoms } from './state/atoms.ts';
-import type { Cell, CellCoord, Row, Tool } from './state/types.ts';
-
-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 StoryArgs = 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 }: StoryArgs) => {
-  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='dx-cover'>
-      <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,
-  },
-};