@dxos/react-ui-mosaic 0.3.10-next.e7dbe51 → 0.3.10

package/dist/types/src/views/Grid/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/Grid.tsx"],"names":[],"mappings":"AAaA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,IAAI,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAOtB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAMF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAYF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,IAAI,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,GAC1G,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEJ;;GAEG;AAEH,eAAO,MAAM,IAAI,mKAgBd,SAAS,gBAoHX,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/Grid.tsx"],"names":[],"mappings":"AAaA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,IAAI,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAOtB,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,CAAC;AAMF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAYF,MAAM,MAAM,UAAU,GAAG;IAAE,CAAC,EAAE,EAAE,MAAM,GAAG,QAAQ,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,SAAS,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,IAAI,IAAI,CACzE,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,EACrC,UAAU,CACX,GACC,mBAAmB,GAAG;IACpB,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEJ;;GAEG;AAEH,eAAO,MAAM,IAAI,oKAgBd,SAAS,gBAoHX,CAAC"}

package/dist/types/src/views/Grid/Grid.stories.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import '@dxosTheme';
 declare const _default: {
-    component: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onOver, onSelect, onCreate, onAction, }: import("./Grid").GridProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
+    title: string;
+    component: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, classNames, onDrop, onOver, onSelect, onCreate, onAction, }: import("./Grid").GridProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
     render: () => JSX.Element;
     decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R> | import("@storybook/react").Decorator)[];
     parameters: {

package/dist/types/src/views/Grid/Grid.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/Grid.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;;;;AA6BpB,wBAcE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}
+{"version":3,"file":"Grid.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/Grid.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;;;;;;;;;;AA6BpB,wBAeE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

package/dist/types/src/views/Grid/testing.d.ts

@@ -6,5 +6,5 @@ export type DemoGridProps = GridProps & {
     types?: string[];
     debug?: boolean;
 };
-export declare const DemoGrid: ({ id, options, Component, initialItems, initialLayout, types, debug, className, }: DemoGridProps) => JSX.Element;
+export declare const DemoGrid: ({ id, options, Component, initialItems, initialLayout, types, debug, classNames, }: DemoGridProps) => JSX.Element;
 //# sourceMappingURL=testing.d.ts.map

package/dist/types/src/views/Grid/testing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/testing.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE/D,OAAO,EAAE,KAAK,cAAc,EAAwB,MAAM,cAAc,CAAC;AAGzE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,sFASlB,aAAa,gBA8Df,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Grid/testing.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE/D,OAAO,EAAE,KAAK,cAAc,EAAwB,MAAM,cAAc,CAAC;AAGzE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,YAAY,CAAC,EAAE,cAAc,EAAE,CAAC;IAChC,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,uFASlB,aAAa,gBA8Df,CAAC"}

package/dist/types/src/views/Kanban/Echo.stories.d.ts

@@ -1,13 +1,8 @@
 /// <reference types="react" />
-import { type PublicKey } from '@dxos/react-client';
 declare const _default: {
     title: string;
     component: ({ id, columns, Component: TileComponent, debug, onDrop, }: import("./Kanban").KanbanProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
-    render: ({ basePath, spaceKey, debug, }: {
-        basePath: string;
-        spaceKey: PublicKey;
-        debug: boolean;
-    }) => JSX.Element;
+    render: () => JSX.Element;
     decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R> | import("@storybook/react").Decorator)[];
     parameters: {
         layout: string;

package/dist/types/src/views/Kanban/Echo.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Echo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Kanban/Echo.stories.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;;;;;kBAqBtC,MAAM;kBACN,SAAS;eACZ,OAAO;;;;;;;AAXlB,wBAgDE;AAEF,eAAO,MAAM,IAAI,IAAK,CAAC"}
+{"version":3,"file":"Echo.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Kanban/Echo.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAoCA,wBAgCE;AAEF,eAAO,MAAM,IAAI,IAAK,CAAC"}

package/dist/types/src/views/Kanban/Kanban.stories.d.ts

@@ -2,6 +2,7 @@
 import '@dxosTheme';
 import { type DemoKanbanProps } from './testing';
 declare const _default: {
+    title: string;
     component: ({ id, columns, Component: TileComponent, debug, onDrop, }: import("./Kanban").KanbanProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
     render: (args: DemoKanbanProps) => JSX.Element;
     decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R> | import("@storybook/react").Decorator)[];

package/dist/types/src/views/Kanban/Kanban.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Kanban.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Kanban/Kanban.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAQpB,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;;;mBAQ5C,eAAe;;;;;;AAFhC,wBAcE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Kanban.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Kanban/Kanban.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAQpB,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,WAAW,CAAC;;;;mBAS5C,eAAe;;;;;;AAHhC,wBAeE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC"}

package/dist/types/src/views/Stack/Stack.stories.d.ts

@@ -2,6 +2,7 @@
 import '@dxosTheme';
 import { type StackProps } from './Stack';
 declare const _default: {
+    title: string;
     component: ({ id, Component, onOver, onDrop, items, direction, debug, }: StackProps<import("../../mosaic").MosaicDataItem>) => JSX.Element;
     render: (args: StackProps & {
         types: string[];

package/dist/types/src/views/Stack/Stack.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/Stack.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;;;mBAUvC,UAAU,GAAG;QACjB,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf;;;;;;AANL,wBAmBE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Stack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/Stack.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAOpB,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;;;;mBAWvC,UAAU,GAAG;QACjB,KAAK,EAAE,MAAM,EAAE,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf;;;;;;AAPL,wBAoBE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC"}

package/dist/types/src/views/Tree/Tree.stories.d.ts

@@ -2,6 +2,7 @@
 import '@dxosTheme';
 import { type DemoTreeProps } from './testing';
 declare const _default: {
+    title: string;
     component: ({ id, Component, onOver, onDrop, items, debug }: import("./Tree").TreeProps<import("./Tree").TreeData>) => JSX.Element;
     render: (args: DemoTreeProps) => JSX.Element;
     decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R> | import("@storybook/react").Decorator)[];

package/dist/types/src/views/Tree/Tree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/Tree.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAQpB,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;;;mBA6DxC,aAAa;;;;;;AAF9B,wBAcE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAEnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAEhB,CAAC"}
+{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/Tree.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAQpB,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;;;;mBA8DxC,aAAa;;;;;;AAH9B,wBAeE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAEnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;;;;;CAEhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.3.10-next.e7dbe51",
+  "version": "0.3.10",
   "description": "An intermediate interface for drag-and-drop interactions.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -25,14 +25,14 @@
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.pick": "^4.4.0",
     "react-resize-detector": "^7.1.2",
-    "@dxos/debug": "0.3.10-next.e7dbe51",
-    "@dxos/invariant": "0.3.10-next.e7dbe51",
-    "@dxos/react-ui": "0.3.10-next.e7dbe51",
-    "@dxos/react-ui-card": "0.3.10-next.e7dbe51",
-    "@dxos/react-ui-theme": "0.3.10-next.e7dbe51",
-    "@dxos/keys": "0.3.10-next.e7dbe51",
-    "@dxos/react-ui-types": "0.3.10-next.e7dbe51",
-    "@dxos/util": "0.3.10-next.e7dbe51"
+    "@dxos/debug": "0.3.10",
+    "@dxos/invariant": "0.3.10",
+    "@dxos/keys": "0.3.10",
+    "@dxos/react-ui": "0.3.10",
+    "@dxos/react-ui-card": "0.3.10",
+    "@dxos/react-ui-theme": "0.3.10",
+    "@dxos/react-ui-types": "0.3.10",
+    "@dxos/util": "0.3.10"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
@@ -47,11 +47,11 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/app-graph": "0.3.10-next.e7dbe51",
-    "@dxos/echo-schema": "0.3.10-next.e7dbe51",
-    "@dxos/react-client": "0.3.10-next.e7dbe51",
-    "@dxos/storybook-utils": "0.3.10-next.e7dbe51",
-    "@dxos/gem-core": "0.3.10-next.e7dbe51"
+    "@dxos/app-graph": "0.3.10",
+    "@dxos/gem-core": "0.3.10",
+    "@dxos/echo-schema": "0.3.10",
+    "@dxos/react-client": "0.3.10",
+    "@dxos/storybook-utils": "0.3.10"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/mosaic/Container.tsx

@@ -11,6 +11,8 @@ import React, {
   type PropsWithChildren,
 } from 'react';
 
+import { type ThemedClassName } from '@dxos/react-ui';
+
 import { type MosaicTileComponent } from './Tile';
 import { useMosaic } from './hooks';
 import { type MosaicDataItem, type MosaicDraggedItem } from './types';
@@ -26,6 +28,7 @@ export const DEFAULT_TYPE = 'unknown';
 export type MosaicTileOverlayProps = {
   grow?: boolean;
   debug?: boolean;
+  itemContext?: Record<string, unknown>;
 };
 
 /**
@@ -49,9 +52,8 @@ export type MosaicDropEvent<TPosition = unknown> = MosaicMoveEvent<TPosition> &
   operation: MosaicOperation;
 };
 
-export type MosaicContainerProps<TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown> = Pick<
-  HTMLAttributes<HTMLDivElement>,
-  'className'
+export type MosaicContainerProps<TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown> = ThemedClassName<
+  Omit<HTMLAttributes<HTMLElement>, 'onDrop'>
 > &
   PropsWithChildren<{
     id: string;

package/src/mosaic/Mosaic.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type FC } from 'react';
+import { type FC, type RefAttributes } from 'react';
 
 import {
   MosaicContainer,
@@ -46,7 +46,7 @@ export const Mosaic = {
   DragOverlay: FC<MosaicOverlayProps>;
   SortableContext: FC<MosaicSortableProps>;
   DraggableTile: FC<MosaicTileProps<any, any>>;
-  DroppableTile: FC<MosaicTileProps<any, any>>;
+  DroppableTile: FC<RefAttributes<HTMLDivElement> & MosaicTileProps<any, any>>;
   SortableTile: FC<MosaicTileProps<any, number>>;
 
   DefaultComponent: MosaicTileComponent;

package/src/mosaic/Root.tsx

@@ -24,7 +24,7 @@ import pick from 'lodash.pick';
 import React, { createContext, type FC, type PropsWithChildren, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { DEFAULT_TRANSITION, type MosaicContainerProps, type MosaicMoveEvent, type MosaicOperation } from './Container';
+import { DEFAULT_TRANSITION, type MosaicContainerProps, type MosaicOperation } from './Container';
 import { Debug } from './Debug';
 import { DefaultComponent } from './DefaultComponent';
 import { type MosaicTileComponent } from './Tile';
@@ -144,6 +144,7 @@ export const MosaicRoot: FC<MosaicRootProps> = ({ Component = DefaultComponent,
     // If the over item is the same as the active item, do nothing.
     // This happens when moving between containers where a placeholder of itself is rendered where it will be dropped.
     if (overItem?.item?.id === activeItem?.item.id) {
+      setOverItem(overItem);
       return;
     }
 
@@ -155,17 +156,14 @@ export const MosaicRoot: FC<MosaicRootProps> = ({ Component = DefaultComponent,
       return;
     }
 
-    const onOver = ({ active, over }: MosaicMoveEvent) => {
-      if (Path.parent(active.path) === Path.parent(over.path)) {
-        return 'rearrange';
-      } else if (overContainer.onOver) {
-        return overContainer.onOver({ active, over });
-      } else {
-        return 'reject';
-      }
-    };
+    let operation: MosaicOperation = 'reject' as const;
+    if (Path.parent(activeItem.path) === Path.parent(overItem.path)) {
+      operation = 'rearrange' as const;
+    } else if (overContainer.onOver) {
+      operation = overContainer.onOver({ active: activeItem, over: overItem });
+    }
 
-    setOperation(onOver({ active: activeItem, over: overItem }));
+    setOperation(operation);
     setOverItem(overItem);
   };
 

package/src/mosaic/Tile.tsx

@@ -7,6 +7,8 @@ import { defaultAnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
 import React from 'react';
 import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
 
+import { type ThemedClassName } from '@dxos/react-ui';
+
 import { DEFAULT_TYPE, type MosaicOperation, type MosaicTileOverlayProps } from './Container';
 import { DefaultComponent } from './DefaultComponent';
 import { useContainer, useMosaic } from './hooks';
@@ -21,10 +23,7 @@ export type MosaicTileAction = { id: string; action: string; data?: any };
 /**
  * Props passed to mosaic tile.
  */
-export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown> = Pick<
-  HTMLAttributes<HTMLDivElement>,
-  'className'
-> &
+export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown> = ThemedClassName<{}> &
   MosaicTileOverlayProps & {
     path: string;
     item: TData;

package/src/testing/Cards.tsx

@@ -16,7 +16,7 @@ export type SimpleCardProps = { id: string; title?: string; body?: string; image
 
 export const SimpleCard: MosaicTileComponent<SimpleCardProps> = forwardRef(
   (
-    { className, active, draggableStyle, draggableProps, item: { id, title }, path, position, grow, debug, onSelect },
+    { classNames, active, draggableStyle, draggableProps, item: { id, title }, path, position, grow, debug, onSelect },
     forwardRef,
   ) => {
     const full = !title;
@@ -25,10 +25,10 @@ export const SimpleCard: MosaicTileComponent<SimpleCardProps> = forwardRef(
         <Card.Root
           noPadding={full}
           classNames={mx(
-            className,
             'w-full snap-center',
             (active === 'origin' || active === 'rearrange') && 'opacity-0',
             active === 'destination' && 'opacity-20',
+            classNames,
           )}
           grow={grow}
         >
@@ -52,7 +52,7 @@ SimpleCard.displayName = 'SimpleCard';
 
 export const ComplexCard: MosaicTileComponent<SimpleCardProps> = forwardRef(
   (
-    { className, isDragging, draggableStyle, draggableProps, item: { id, title, body, image }, grow, debug, onSelect },
+    { classNames, isDragging, draggableStyle, draggableProps, item: { id, title, body, image }, grow, debug, onSelect },
     forwardRef,
   ) => {
     const full = !title;
@@ -60,7 +60,7 @@ export const ComplexCard: MosaicTileComponent<SimpleCardProps> = forwardRef(
       <div role='none' ref={forwardRef} className='flex w-full' style={draggableStyle}>
         <Card.Root
           noPadding={full}
-          classNames={mx(className, 'w-full snap-center', isDragging && 'opacity-20')}
+          classNames={mx('w-full snap-center', isDragging && 'opacity-20', classNames)}
           grow={grow}
         >
           <Card.Header floating={full} onDoubleClick={() => onSelect?.()}>

package/src/views/Demo/Demo.stories.tsx

@@ -19,7 +19,7 @@ import { DemoTree } from '../Tree/testing';
 faker.seed(5);
 
 export default {
-  title: 'Views/Demo',
+  title: 'react-ui-mosaic/Demo',
   decorators: [withTheme, FullscreenDecorator()],
   parameters: {
     layout: 'fullscreen',
@@ -34,10 +34,10 @@ export const Default = () => (
     <Mosaic.DragOverlay />
     <div className='flex grow overflow-hidden'>
       <div className='flex shrink-0 w-[280px] overflow-hidden'>
-        <DemoStack id='stack-1' Component={SimpleCard} types={types} debug={debug} className='p-2' />
+        <DemoStack id='stack-1' Component={SimpleCard} types={types} debug={debug} classNames='p-2' />
       </div>
       <div className='flex grow overflow-hidden bg-neutral-900'>
-        <DemoGrid id='grid-1' Component={ComplexCard} types={types} debug={debug} className='p-4' />
+        <DemoGrid id='grid-1' Component={ComplexCard} types={types} debug={debug} classNames='p-4' />
       </div>
       <div className='flex shrink-0 w-[280px] overflow-hidden bg-neutral-900'>
         <DemoStack id='stack-2' Component={ComplexCard} types={types} debug={debug} />
@@ -54,7 +54,7 @@ export const Tree = () => (
         <DemoTree id='tree-1' types={types} debug={debug} />
       </div>
       <div className='flex grow overflow-hidden'>
-        <DemoGrid id='grid-1' Component={ComplexCard} types={types} debug={debug} className='p-4 bg-neutral-900' />
+        <DemoGrid id='grid-1' Component={ComplexCard} types={types} debug={debug} classNames='p-4 bg-neutral-900' />
       </div>
       <div className='flex shrink-0 w-[280px] overflow-hidden bg-neutral-900'>
         <DemoStack id='stack-2' Component={ComplexCard} types={types} debug={debug} />
@@ -71,7 +71,7 @@ export const Kanban = () => (
         <DemoTree id='tree-1' types={types} debug={debug} />
       </div>
       <div className='flex grow overflow-hidden'>
-        <DemoKanban id='kanban-1' Component={SimpleCard} debug={debug} className='p-4' />
+        <DemoKanban id='kanban-1' Component={SimpleCard} debug={debug} classNames='p-4' />
       </div>
       <div className='flex shrink-0 w-[280px] overflow-hidden bg-neutral-900 pl-2'>
         <DemoStack id='stack-1' Component={ComplexCard} types={types} debug={debug} />

package/src/views/Demo/Echo.stories.tsx

@@ -7,7 +7,7 @@ import React, { type FC } from 'react';
 
 import { type PublicKey } from '@dxos/react-client';
 import { Expando } from '@dxos/react-client/echo';
-import { ClientSpaceDecorator } from '@dxos/react-client/testing';
+import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Mosaic } from '../../mosaic';
@@ -42,13 +42,11 @@ const Story: FC<{ spaceKey: PublicKey }> = ({ spaceKey }) => {
 };
 
 export default {
-  title: 'Views/Demo',
-  render: Story,
-  decorators: [
-    withTheme,
-    FullscreenDecorator(),
-    ClientSpaceDecorator({
-      onCreateSpace: async (space) => {
+  title: 'react-ui-mosaic/Demo',
+  render: () => (
+    <ClientRepeater
+      Component={Story}
+      onCreateSpace={async (space) => {
         const factory = generator.factories.project;
         const objects = [
           factory.schema,
@@ -66,9 +64,11 @@ export default {
 
         // TODO(burdon): Batch API.
         objects.forEach((object) => space.db.add(object));
-      },
-    }),
-  ],
+      }}
+      createSpace
+    />
+  ),
+  decorators: [withTheme, FullscreenDecorator()],
 };
 
 // TODO(wittjosiah): This currently has a bug where empty over events are fired when dragging from tree onto kanban.

package/src/views/Grid/Grid.stories.tsx

@@ -32,6 +32,7 @@ const testLayout = testItems.reduce<GridLayout>((map, item) => {
 }, {});
 
 export default {
+  title: 'react-ui-mosaic/Grid',
   component: Grid,
   render: () => {
     return (

package/src/views/Grid/Grid.tsx

@@ -62,7 +62,10 @@ const defaultGridOptions: GridOptions = {
 
 export type GridLayout = { [id: string]: Position };
 
-export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicContainerProps<TData, Position> &
+export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = Omit<
+  MosaicContainerProps<TData, Position>,
+  'onSelect'
+> &
   ControlledSelection & {
     items?: TData[];
     layout?: GridLayout;
@@ -88,7 +91,7 @@ export const Grid = ({
   debug,
   selected: controlledSelected,
   Component = Mosaic.DefaultComponent,
-  className,
+  classNames,
   onDrop,
   onOver,
   onSelect,
@@ -159,7 +162,7 @@ export const Grid = ({
         onOver,
       }}
     >
-      <div className={mx('flex grow overflow-auto', className)}>
+      <div className={mx('flex grow overflow-auto', classNames)}>
         {/* TODO(burdon): Tailwind classes aren't currently processed by labs. */}
         <div ref={containerRef} className={mx('grow overflow-auto snap-x md:snap-none snap-mandatory')}>
           <div className='group block relative' style={{ ...bounds, margin: marginSize }}>

package/src/views/Grid/testing.tsx

@@ -25,7 +25,7 @@ export const DemoGrid = ({
   initialLayout,
   types,
   debug,
-  className,
+  classNames,
 }: DemoGridProps) => {
   const [selected, setSelected] = useState<string>();
   const [items, setItems] = useState<MosaicDataItem[]>(
@@ -80,7 +80,7 @@ export const DemoGrid = ({
       layout={layout}
       options={options}
       Component={Component}
-      className={className}
+      classNames={classNames}
       debug={debug}
       selected={selected}
       onSelect={setSelected}

package/src/views/Kanban/Echo.stories.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { type PublicKey } from '@dxos/react-client';
 import { Expando } from '@dxos/react-client/echo';
-import { ClientSpaceDecorator } from '@dxos/react-client/testing';
+import { ClientRepeater } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Kanban } from './Kanban';
@@ -16,31 +16,30 @@ import { FullscreenDecorator, TestObjectGenerator, range } from '../../testing';
 
 const generator = new TestObjectGenerator();
 
+const Story = ({
+  // TODO(wittjosiah): Can't use id because of ClientSpaceDecorator.
+  basePath = 'projects',
+  spaceKey,
+  debug,
+}: {
+  basePath: string;
+  spaceKey: PublicKey;
+  debug: boolean;
+}) => {
+  return (
+    <Mosaic.Root debug={debug}>
+      <Mosaic.DragOverlay />
+      <EchoKanban id={basePath} spaceKey={spaceKey} generator={generator} debug={debug} />
+    </Mosaic.Root>
+  );
+};
+
 export default {
-  title: 'Views/Kanban',
+  title: 'react-ui-mosaic/Kanban',
   component: Kanban,
-  render: ({
-    // TODO(wittjosiah): Can't use id because of ClientSpaceDecorator.
-    basePath = 'projects',
-    spaceKey,
-    debug,
-  }: {
-    basePath: string;
-    spaceKey: PublicKey;
-    debug: boolean;
-  }) => {
-    return (
-      <Mosaic.Root debug={debug}>
-        <Mosaic.DragOverlay />
-        <EchoKanban id={basePath} spaceKey={spaceKey} generator={generator} debug={debug} />
-      </Mosaic.Root>
-    );
-  },
-  decorators: [
-    withTheme,
-    FullscreenDecorator(),
-    ClientSpaceDecorator({
-      onCreateSpace: async (space) => {
+  render: () => (
+    <ClientRepeater
+      onCreateSpace={async (space) => {
         const factory = generator.factories.project;
         const objects = [
           factory.schema,
@@ -58,9 +57,12 @@ export default {
 
         // TODO(burdon): Batch API.
         objects.forEach((object) => space.db.add(object));
-      },
-    }),
-  ],
+      }}
+      Component={Story}
+      createSpace
+    />
+  ),
+  decorators: [withTheme, FullscreenDecorator()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/views/Kanban/Kanban.stories.tsx

@@ -17,6 +17,7 @@ import { ComplexCard, FullscreenDecorator, SimpleCard } from '../../testing';
 faker.seed(3);
 
 export default {
+  title: 'react-ui-mosaic/Kanban',
   component: Kanban,
   render: (args: DemoKanbanProps) => {
     return (

package/src/views/Kanban/Kanban.tsx

@@ -124,7 +124,7 @@ const KanbanColumnComponent: MosaicTileComponent<KanbanColumn> = forwardRef(
                     path={path}
                     position={index}
                     Component={Component!}
-                    className='m-1'
+                    classNames='m-1'
                     // debug={debug}
                   />
                 ))}

package/src/views/Stack/Columns.stories.tsx

@@ -17,7 +17,7 @@ import { FullscreenDecorator, SimpleCard } from '../../testing';
 faker.seed(3);
 
 export default {
-  title: 'Views/Stack/Columns',
+  title: 'react-ui-mosaic/Stack',
   component: Stack,
   render: (args: DemoStackProps) => {
     return (

package/src/views/Stack/Stack.stories.tsx

@@ -17,6 +17,7 @@ import { ComplexCard, FullscreenDecorator, SimpleCard } from '../../testing';
 faker.seed(3);
 
 export default {
+  title: 'react-ui-mosaic/Stack',
   component: Stack,
   render: (
     args: StackProps & {

package/src/views/Stack/Stack.tsx

@@ -41,7 +41,7 @@ export const Stack = ({
                 item={item}
                 path={id}
                 position={index}
-                className='m-1'
+                classNames='m-1'
                 // debug={debug}
               />
             ))}

package/src/views/Tree/Graph.stories.tsx

@@ -17,7 +17,7 @@ import { FullscreenDecorator } from '../../testing';
 faker.seed(3);
 
 export default {
-  title: 'Views/Tree',
+  title: 'react-ui-mosaic/Tree',
   component: Tree,
   render: ({ id = 'tree', debug }: { id: string; debug: boolean }) => {
     return (

package/src/views/Tree/Tree.stories.tsx

@@ -70,6 +70,7 @@ const testItems2 = [
 ];
 
 export default {
+  title: 'react-ui-mosaic/Tree',
   component: Tree,
   render: (args: DemoTreeProps) => {
     return (

package/src/views/Tree/Tree.tsx

@@ -73,17 +73,17 @@ const TreeRoot = ({ items }: { items: TreeData[] }) => {
  * Pure component that is used by the mosaic overlay.
  */
 const TreeItem: MosaicTileComponent<TreeData> = forwardRef(
-  ({ path, draggableStyle, draggableProps, item, operation, active, isOver, isDragging, className }, forwardedRef) => {
+  ({ path, draggableStyle, draggableProps, item, operation, active, isOver, isDragging, classNames }, forwardedRef) => {
     return (
       <div
         ref={forwardedRef}
         style={draggableStyle}
         className={mx(
           'flex flex-col rounded',
-          className,
           (active === 'rearrange' || active === 'origin') && 'opacity-0',
           active === 'destination' && 'opacity-20',
           isOver && dropRing,
+          classNames,
         )}
       >
         <Card.Header>

package/dist/types/src/stories/Home.stories.d.ts

@@ -1,11 +0,0 @@
-import '@dxosTheme';
-declare const _default: {
-    component: () => JSX.Element;
-    decorators: (import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0fc72a6d").R> | import("@storybook/react").Decorator)[];
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Default: {};
-//# sourceMappingURL=Home.stories.d.ts.map

package/dist/types/src/stories/Home.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Home.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Home.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;;AA4EpB,wBAME;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}