@dxos/react-ui-mosaic 0.3.3-main.3ce60d4 → 0.3.3-main.3dbd870

package/dist/types/src/mosaic/Tile.d.ts

@@ -3,6 +3,11 @@ import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttri
 import type { MosaicOperation, MosaicTileOverlayProps } from './Container';
 import type { MosaicDataItem } from './types';
 export type MosaicActiveType = 'overlay' | 'rearrange' | 'origin' | 'destination';
+export type MosaicTileAction = {
+    id: string;
+    action: string;
+    data?: any;
+};
 /**
  * Props passed to mosaic tile.
  */
@@ -19,6 +24,7 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
     draggableProps?: DraggableAttributes & HTMLAttributes<HTMLElement>;
     onSelect?: () => void;
     onRemove?: () => void;
+    onAction?: (action: MosaicTileAction) => void;
 };
 /**
  * Mosaic Tile component.

package/dist/types/src/mosaic/Tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/mosaic/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAA8B,MAAM,eAAe,CAAC;AAGrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAErG,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG3E,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,SAAS,CAAC;AAGjE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElF;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,EAAE,SAAS,GAAG,OAAO,IAAI,IAAI,CACpG,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,CACZ,GACC,sBAAsB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,SAAS,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAG1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,cAAc,CAAC,EAAE,mBAAmB,GAElC,cAAc,CAAC,WAAW,CAAC,CAAC;IAE9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAC7B,KAAK,SAAS,cAAc,GAAG,cAAc,EAC7C,QAAQ,SAAS,WAAW,GAAG,cAAc,IAC3C,yBAAyB,CAC3B,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG;IAAE,SAAS,EAAE,eAAe,CAAA;CAAE,CACnH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,8EAOvB,gBAAgB,GAAG,CAAC,gBAyBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,8DAMvB,gBAAgB,GAAG,CAAC,gBAsBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,iGAOtB,gBAAgB,GAAG,EAAE,MAAM,CAAC,gBAsD9B,CAAC"}
+{"version":3,"file":"Tile.d.ts","sourceRoot":"","sources":["../../../../src/mosaic/Tile.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAA8B,MAAM,eAAe,CAAC;AAGrF,OAAO,KAAK,EAAE,aAAa,EAAE,yBAAyB,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAErG,OAAO,KAAK,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG3E,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,SAAS,CAAC;AAGjE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElF,MAAM,MAAM,gBAAgB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAA;CAAE,CAAC;AAE1E;;GAEG;AACH,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,EAAE,SAAS,GAAG,OAAO,IAAI,IAAI,CACpG,cAAc,CAAC,cAAc,CAAC,EAC9B,WAAW,CACZ,GACC,sBAAsB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,KAAK,CAAC;IACZ,SAAS,CAAC,EAAE,mBAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAG1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,cAAc,CAAC,EAAE,mBAAmB,GAElC,cAAc,CAAC,WAAW,CAAC,CAAC;IAG9B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEJ;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAC7B,KAAK,SAAS,cAAc,GAAG,cAAc,EAC7C,QAAQ,SAAS,WAAW,GAAG,cAAc,IAC3C,yBAAyB,CAC3B,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC,GAAG;IAAE,SAAS,EAAE,eAAe,CAAA;CAAE,CACnH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,8EAOvB,gBAAgB,GAAG,CAAC,gBAyBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,8DAMvB,gBAAgB,GAAG,CAAC,gBAsBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,iGAOtB,gBAAgB,GAAG,EAAE,MAAM,CAAC,gBAsD9B,CAAC"}

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

@@ -0,0 +1,11 @@
+import '@dxosTheme';
+declare const _default: {
+    component: () => JSX.Element;
+    decorators: import("@storybook/csf").DecoratorFunction<import("@storybook/react/dist/types-0a347bb9").R>[];
+    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

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

package/dist/types/src/testing/decorators.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../../src/testing/decorators.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,eAAO,MAAM,mBAAmB,eAAgB,MAAM,KAAG,kBAAkB,aAAa,CAQvF,CAAC"}
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../../src/testing/decorators.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMtD,eAAO,MAAM,mBAAmB,eAAgB,MAAM,KAAG,kBAAkB,aAAa,CASvF,CAAC"}

package/dist/types/src/testing/next-fractional-index.d.ts

@@ -1,5 +1,5 @@
 import { type UniqueIdentifier } from '@dnd-kit/core';
-import { type Node } from '@braneframe/plugin-graph';
+import { type Node } from '@dxos/app-graph';
 export declare const nextRearrangeIndex: (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => string | null;
 export declare const nextCopyIndex: (nodes: Node[], overId?: UniqueIdentifier) => string;
 //# sourceMappingURL=next-fractional-index.d.ts.map

package/dist/types/src/testing/next-fractional-index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next-fractional-index.d.ts","sourceRoot":"","sources":["../../../../src/testing/next-fractional-index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,eAAO,MAAM,kBAAkB,UAAW,IAAI,EAAE,YAAY,gBAAgB,WAAW,gBAAgB,kBAYtG,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,IAAI,EAAE,WAAW,gBAAgB,WAYrE,CAAC"}
+{"version":3,"file":"next-fractional-index.d.ts","sourceRoot":"","sources":["../../../../src/testing/next-fractional-index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE5C,eAAO,MAAM,kBAAkB,UAAW,IAAI,EAAE,YAAY,gBAAgB,WAAW,gBAAgB,kBAYtG,CAAC;AAEF,eAAO,MAAM,aAAa,UAAW,IAAI,EAAE,WAAW,gBAAgB,WAYrE,CAAC"}

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

@@ -1,6 +1,5 @@
-import '@dxosTheme';
 import { type Dimension, type Position, type Size } from './layout';
-import { type MosaicContainerProps, type MosaicDataItem } from '../../mosaic';
+import { type MosaicContainerProps, type MosaicDataItem, type MosaicTileAction } from '../../mosaic';
 type ControlledSelection = {
     selected?: string;
     onSelect?: (id: string) => void;
@@ -21,10 +20,11 @@ export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicCon
     square?: boolean;
     debug?: boolean;
     onCreate?: (position: Position) => void;
+    onAction?: (action: MosaicTileAction) => void;
 };
 /**
  * Grid content.
  */
-export declare const Grid: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, }: GridProps) => JSX.Element;
+export declare const Grid: ({ id, items, layout, options: opts, margin, square, debug, selected: controlledSelected, Component, className, onDrop, onSelect, onCreate, onAction, }: GridProps) => JSX.Element;
 export {};
 //# sourceMappingURL=Grid.d.ts.map

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":"AAIA,OAAO,YAAY,CAAC;AAWpB,OAAO,EAML,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,IAAI,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,cAAc,EAA2B,MAAM,cAAc,CAAC;AAOvG,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;CACzC,CAAC;AAEJ;;GAEG;AAEH,eAAO,MAAM,IAAI,iJAcd,SAAS,gBAkHX,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,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,2JAed,SAAS,gBAkHX,CAAC"}

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

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

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

@@ -11,7 +11,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Adopt: {
+export declare const Transfer: {
     args: {
         Component: import("../../mosaic").MosaicTileComponent<import("../../testing").SimpleCardProps>;
         debug: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/Columns.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;;;;mBAS1C,cAAc;;;;;;AAH/B,wBAoBE;AAEF,eAAO,MAAM,KAAK;;;;;CAKjB,CAAC;AAGF,eAAO,MAAM,IAAI;;;;;;CAMhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}
+{"version":3,"file":"Columns.stories.d.ts","sourceRoot":"","sources":["../../../../../src/views/Stack/Columns.stories.tsx"],"names":[],"mappings":";AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;;;;mBAS1C,cAAc;;;;;;AAH/B,wBAoBE;AAEF,eAAO,MAAM,QAAQ;;;;;CAKpB,CAAC;AAGF,eAAO,MAAM,IAAI;;;;;;CAMhB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { type Graph } from '@braneframe/plugin-graph';
+import { type Graph } from '@dxos/app-graph';
 import { type TreeData, type TreeProps } from './Tree';
 export type DemoTreeProps = TreeProps & {
     initialItems?: TreeData[];

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

@@ -1 +1 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/testing.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,KAAK,EAA2B,MAAM,0BAA0B,CAAC;AAI/E,OAAO,EAAQ,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,uCAAiD,aAAa,gBA0DlF,CAAC;AAEF,eAAO,MAAM,WAAW,aAqBvB,CAAC;AAcF,eAAO,MAAM,SAAS;QAAgD,MAAM;;WAAwB,OAAO;iBAqC1G,CAAC"}
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../../src/views/Tree/testing.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,KAAK,EAA2B,MAAM,iBAAiB,CAAC;AAItE,OAAO,EAAQ,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG;IACtC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,QAAQ,uCAAiD,aAAa,gBA0DlF,CAAC;AAEF,eAAO,MAAM,WAAW,aAqBvB,CAAC;AAcF,eAAO,MAAM,SAAS;QAAgD,MAAM;;WAAwB,OAAO;iBAuC1G,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.3.3-main.3ce60d4",
+  "version": "0.3.3-main.3dbd870",
   "description": "An intermediate interface for drag-and-drop interactions.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -26,13 +26,13 @@
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.pick": "^4.4.0",
     "react-resize-detector": "^7.1.2",
-    "@dxos/debug": "0.3.3-main.3ce60d4",
-    "@dxos/invariant": "0.3.3-main.3ce60d4",
-    "@dxos/keys": "0.3.3-main.3ce60d4",
-    "@dxos/react-ui": "0.3.3-main.3ce60d4",
-    "@dxos/react-ui-theme": "0.3.3-main.3ce60d4",
-    "@dxos/react-ui-types": "0.3.3-main.3ce60d4",
-    "@dxos/util": "0.3.3-main.3ce60d4"
+    "@dxos/debug": "0.3.3-main.3dbd870",
+    "@dxos/invariant": "0.3.3-main.3dbd870",
+    "@dxos/keys": "0.3.3-main.3dbd870",
+    "@dxos/react-ui": "0.3.3-main.3dbd870",
+    "@dxos/react-ui-theme": "0.3.3-main.3dbd870",
+    "@dxos/react-ui-types": "0.3.3-main.3dbd870",
+    "@dxos/util": "0.3.3-main.3dbd870"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.0.2",
@@ -48,10 +48,10 @@
     "react-dom": "^18.2.0",
     "vite": "^4.3.9",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@braneframe/plugin-graph": "0.3.3-main.3ce60d4",
-    "@dxos/echo-schema": "0.3.3-main.3ce60d4",
-    "@dxos/gem-core": "0.3.3-main.3ce60d4",
-    "@dxos/react-client": "0.3.3-main.3ce60d4"
+    "@dxos/app-graph": "0.3.3-main.3dbd870",
+    "@dxos/echo-schema": "0.3.3-main.3dbd870",
+    "@dxos/gem-core": "0.3.3-main.3dbd870",
+    "@dxos/react-client": "0.3.3-main.3dbd870"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/index.ts

@@ -3,3 +3,6 @@
 //
 
 export * from './mosaic';
+
+// TODO(burdon): Remove (factor out components).
+export * from './views';

package/src/mosaic/Container.tsx

@@ -22,8 +22,16 @@ export type MosaicTileOverlayProps = {
   debug?: boolean;
 };
 
-// TODO(wittjosiah): Add delete.
-export type MosaicOperation = 'adopt' | 'copy' | 'rearrange' | 'reject';
+/**
+ * Possible operations when dropping a tile.
+ *
+ * * `transfer` - Remove the tile from it's current path and move to a new path.
+ * * `copy` - Add a clone of the tile at a new path.
+ * * `rearrange` - Change the order of the tile within it's current path.
+ * * `reject` - The tile is not allowed where it was dropped.
+ */
+// TODO(wittjosiah): Add 'delete'. Consider adding 'swap'.
+export type MosaicOperation = 'transfer' | 'copy' | 'rearrange' | 'reject';
 
 export type MosaicMoveEvent<TPosition = unknown> = {
   active: MosaicDraggedItem<TPosition>;

package/src/mosaic/Mosaic.ts

@@ -21,6 +21,7 @@ import {
   DraggableTile,
   DroppableTile,
   SortableTile,
+  type MosaicTileAction as NaturalMosaicTileAction,
   type MosaicTileProps as NaturalMosaicTileProps,
   type MosaicTileComponent as NaturalMosaicTileComponent,
   type MosaicActiveType as NaturalMosaicActiveType,
@@ -64,6 +65,8 @@ export type MosaicOverlayProps = MosaicDragOverlayProps;
 
 export type MosaicSortableProps = NaturalMosaicSortableProps;
 
+export type MosaicTileAction = NaturalMosaicTileAction;
+
 export type MosaicTileProps<
   TData extends MosaicDataItem = MosaicDataItem,
   TPosition = unknown,
@@ -74,11 +77,12 @@ export type MosaicTileComponent<
   TElement extends HTMLElement = HTMLDivElement,
 > = NaturalMosaicTileComponent<TData, TElement>;
 
-export type MosaicDebugProps = DebugProps;
-
 export type MosaicMoveEvent<TPosition = unknown> = NaturalMosaicMoveEvent<TPosition>;
 export type MosaicDropEvent<TPosition = unknown> = NaturalMosaicDropEvent<TPosition>;
 export type MosaicOperation = NaturalMosaicOperation;
 export type MosaicActiveType = NaturalMosaicActiveType;
 
 export type MosaicCompareDataItem = NaturalMosaicCompareDataItem;
+
+// TODO(burdon): Remove.
+export type MosaicDebugProps = DebugProps;

package/src/mosaic/Root.tsx

@@ -161,8 +161,7 @@ export const MosaicRoot: FC<MosaicRootProps> = ({ Component = DefaultComponent,
       } else if (overContainer.onOver) {
         return overContainer.onOver({ active, over });
       } else {
-        // TODO(wittjosiah): Default to reject.
-        return 'adopt';
+        return 'reject';
       }
     };
 

package/src/mosaic/Tile.tsx

@@ -15,6 +15,8 @@ import { getTransformCSS, Path } from './util';
 
 export type MosaicActiveType = 'overlay' | 'rearrange' | 'origin' | 'destination';
 
+export type MosaicTileAction = { id: string; action: string; data?: any };
+
 /**
  * Props passed to mosaic tile.
  */
@@ -38,8 +40,10 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
       // TODO(wittjosiah): SyntheticListenerMap.
       HTMLAttributes<HTMLElement>;
 
+    // TODO(burdon): Generalize events via onAction?
     onSelect?: () => void;
     onRemove?: () => void;
+    onAction?: (action: MosaicTileAction) => void;
   };
 
 /**

package/src/stories/Home.stories.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { FullscreenDecorator } from '../testing';
+
+const org = '@dxos-mosaic';
+
+const data = {
+  quote: `"I've written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to ' +
+    'maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the ' +
+    'urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other ' +
+    'way." [User]`,
+};
+
+const packages = [
+  {
+    name: `${org}/ui`,
+    description: 'Component primitives.',
+  },
+  {
+    name: `${org}/dnd`,
+    description: 'Drag-and-drop containers and tiles.',
+  },
+  {
+    name: `${org}/echo`,
+    description: 'DXOS ECHO bindings.',
+  },
+  {
+    name: `${org}/editor`,
+    description: 'Rich text editor.',
+  },
+  {
+    name: `${org}/table`,
+    description: 'Blazingly fast virtualized tables.',
+  },
+  {
+    name: `${org}/stack`,
+    description: 'Flexible block editor.',
+  },
+  {
+    name: `${org}/grid`,
+    description: 'Hierarchical and zoomable grid.',
+  },
+];
+
+const Home = () => {
+  return (
+    <div className='flex flex-col w-[800px] bg-white px-16 py-20 gap-4 text-lg font-light'>
+      <b className='text-4xl font-medium text-black'>Mosaic</b>
+      <p>
+        Mosaic is an extensible user interface framework and component library built using{' '}
+        <span className='font-mono text-purple-700'>radix</span> and{' '}
+        <span className='font-mono text-purple-700'>tailwindcss</span>. It enables the rapid development of beautiful
+        data-driven applications.
+      </p>
+      <p>Mosaic is an extensible family of packages, which include:</p>
+      <table>
+        <tbody>
+          {packages.map(({ name, description }) => (
+            <tr key={name}>
+              <td className='font-mono text-purple-700 w-[260px]'>{name}</td>
+              <td>{description}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <br />
+      <h1 className='text-lg flex justify-center font-medium text-blue-700'>Data-drive components, done right.</h1>
+      <p className='px-8'>{data.quote}</p>
+    </div>
+  );
+};
+
+export default {
+  component: Home,
+  decorators: [FullscreenDecorator('flex justify-center bg-[url(/images/bg-mosaic.png)]')],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};

package/src/testing/decorators.tsx

@@ -12,6 +12,7 @@ import { mx } from '@dxos/react-ui-theme';
 export const FullscreenDecorator = (className?: string): DecoratorFunction<ReactRenderer> => {
   return (Story) => (
     <div className={mx('flex fixed inset-0 overflow-hidden', className)}>
+      {/* TODO(burdon): Remove DensityProvider from generic decorator. */}
       <DensityProvider density='fine'>
         <Story />
       </DensityProvider>

package/src/testing/next-fractional-index.ts

@@ -5,7 +5,7 @@
 import { type UniqueIdentifier } from '@dnd-kit/core';
 import { getIndexAbove, getIndexBelow, getIndexBetween } from '@tldraw/indices';
 
-import { type Node } from '@braneframe/plugin-graph';
+import { type Node } from '@dxos/app-graph';
 
 export const nextRearrangeIndex = (nodes: Node[], activeId: UniqueIdentifier, overId?: UniqueIdentifier) => {
   const overOrderIndex = nodes.length > 0 ? nodes.findIndex(({ id }) => id === overId) : -1;

package/src/views/Grid/Grid.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxosTheme';
-
 import { useDroppable } from '@dnd-kit/core';
 import { PlusCircle } from '@phosphor-icons/react';
 import defaultsDeep from 'lodash.defaultsdeep';
@@ -23,7 +21,14 @@ import {
   type Position,
   type Size,
 } from './layout';
-import { type MosaicContainerProps, type MosaicDataItem, Mosaic, Path, useMosaic } from '../../mosaic';
+import {
+  type MosaicContainerProps,
+  type MosaicDataItem,
+  type MosaicTileAction,
+  Mosaic,
+  Path,
+  useMosaic,
+} from '../../mosaic';
 
 //
 // Selection
@@ -47,8 +52,8 @@ type GridOptions = {
 
 const defaultGridOptions: GridOptions = {
   size: { x: 8, y: 8 },
-  cellBounds: { width: 280, height: 280 },
-  spacing: 8,
+  cellBounds: { width: 272, height: 272 },
+  spacing: 6,
 };
 
 //
@@ -66,6 +71,7 @@ export type GridProps<TData extends MosaicDataItem = MosaicDataItem> = MosaicCon
     square?: boolean;
     debug?: boolean;
     onCreate?: (position: Position) => void;
+    onAction?: (action: MosaicTileAction) => void; // TODO(burdon): Standardize across mosaics?
   };
 
 /**
@@ -86,6 +92,7 @@ export const Grid = ({
   onDrop,
   onSelect,
   onCreate,
+  onAction,
 }: GridProps) => {
   const { ref: containerRef, width, height } = useResizeDetector({ refreshRate: 200 });
   const options = defaultsDeep({}, opts, defaultGridOptions);
@@ -151,8 +158,8 @@ export const Grid = ({
       }}
     >
       <div className={mx('flex grow overflow-auto', className)}>
-        <div ref={containerRef} className={mx('grow overflow-auto snap-x snap-mandatory md:snap-none bg-neutral-600')}>
-          <div className='group block relative bg-neutral-500' style={{ ...bounds, margin: marginSize }}>
+        <div ref={containerRef} className={mx('grow overflow-auto snap-x snap-mandatory md:snap-none')}>
+          <div className='group block relative' style={{ ...bounds, margin: marginSize }}>
             {matrix && (
               <div style={{ padding: options.spacing }}>
                 <div className='relative'>
@@ -172,7 +179,6 @@ export const Grid = ({
               </div>
             )}
 
-            {/* TODO(burdon): Events: onDoubleClick={() => handleSelect(id)} */}
             <div>
               {items.map((item) => {
                 const position = layout[item.id] ?? { x: 0, y: 0 };
@@ -188,6 +194,7 @@ export const Grid = ({
                       ...getBounds(position, cellBounds, options.spacing),
                     }}
                     onSelect={() => handleSelect(item.id)}
+                    onAction={onAction}
                     // debug={debug}
                   />
                 );
@@ -227,14 +234,18 @@ const GridCell: FC<{
     >
       <div
         className={mx(
-          'group/cell hidden group-hover:flex w-full h-full items-center justify-center',
-          isOverContainer && 'flex',
-          'box-border border-dashed border-4 border-neutral-600/50 rounded-lg',
-          'transition ease-in-out duration-200 bg-neutral-500',
-          isOver && 'flex bg-neutral-600',
+          'group/cell flex group-hover:flex w-full h-full items-center justify-center',
+          'box-border border-dashed border-4 border-neutral-100 rounded-lg',
+          'transition ease-in-out duration-300',
+          isOver && 'flex bg-neutral-200 border-neutral-400',
         )}
       >
-        <div className={mx('hidden group-hover/cell:flex', isOverContainer && 'hidden')}>
+        <div
+          className={mx(
+            'opacity-10 transition ease-in-out duration-300 group-hover/cell:opacity-100',
+            isOverContainer && 'hidden',
+          )}
+        >
           {onCreate && (
             // TODO(burdon): Style button.
             <Button variant='ghost' onClick={() => onCreate(position)}>

package/src/views/Grid/testing.tsx

@@ -11,8 +11,8 @@ import { type MosaicDataItem, type MosaicDropEvent } from '../../mosaic';
 import { ComplexCard, TestObjectGenerator } from '../../testing';
 
 export type DemoGridProps = GridProps & {
-  initialItems?: MosaicDataItem[];
-  initialLayout?: GridLayout;
+  initialItems?: MosaicDataItem[]; // TODO(burdon): Remove or convert to controlled.
+  initialLayout?: GridLayout; // TODO(burdon): Remove or convert to controlled.
   types?: string[];
   debug?: boolean;
 };

package/src/views/Kanban/Kanban.tsx

@@ -51,7 +51,7 @@ export const Kanban = ({
         // Restrict to objects from other columns.
         // TODO(burdon): Consider objects from other containers.
         // TODO(wittjosiah): Allow override.
-        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'adopt' : 'reject'),
+        onOver: ({ active, over }) => (Path.length(active.path) >= Path.length(over.path) ? 'transfer' : 'reject'),
         onDrop,
       }}
     >

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

@@ -36,7 +36,7 @@ export default {
   },
 };
 
-export const Adopt = {
+export const Transfer = {
   args: {
     Component: SimpleCard,
     debug: true,

package/src/views/Stack/testing.tsx

@@ -26,7 +26,7 @@ export const DemoStack = ({
   types,
   count = 8,
   direction = 'vertical',
-  operation = 'adopt',
+  operation = 'transfer',
   debug,
 }: DemoStackProps) => {
   const [items, setItems] = useState<MosaicDataItem[]>(() => {

package/src/views/Tree/Tree.tsx

@@ -116,7 +116,7 @@ const TreeBranch = ({ path, items }: { path: string; items: TreeData[] }) => {
                 position={index}
                 Component={Component!}
                 isOver={
-                  overItem?.path === Path.create(path, child.id) && (operation === 'adopt' || operation === 'copy')
+                  overItem?.path === Path.create(path, child.id) && (operation === 'transfer' || operation === 'copy')
                 }
               />
             </TreeItemComponent.Root>

package/src/views/Tree/testing.tsx

@@ -5,12 +5,12 @@
 import { faker } from '@faker-js/faker';
 import React, { useCallback, useState } from 'react';
 
-import { type Graph, GraphBuilder, type Node } from '@braneframe/plugin-graph';
-import { buildGraph } from '@braneframe/plugin-graph/testing';
+import { type Graph, GraphBuilder, type Node } from '@dxos/app-graph';
+import { buildGraph } from '@dxos/app-graph/testing';
 import { arrayMove } from '@dxos/util';
 
 import { Tree, type TreeData, type TreeProps } from './Tree';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '../../mosaic';
+import { type MosaicDropEvent, type MosaicMoveEvent, Path, type MosaicOperation } from '../../mosaic';
 import { TestObjectGenerator, nextRearrangeIndex } from '../../testing';
 
 const fake = faker.helpers.fake;
@@ -47,8 +47,8 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
       }),
   );
 
-  const handleOver = useCallback(({ active, over }: MosaicMoveEvent<number>) => {
-    return !(active.path === id && over.path !== id) ? 'adopt' : 'reject';
+  const handleOver = useCallback(({ over }: MosaicMoveEvent<number>) => {
+    return over && Path.hasChild(id, over.path) ? 'transfer' : 'reject';
   }, []);
 
   // NOTE: Does not handle deep operations.
@@ -67,8 +67,8 @@ export const DemoTree = ({ id = 'tree', initialItems, types, debug }: DemoTreePr
             if (Path.last(Path.parent(active.path)) === item.id) {
               children.splice(active.position!, 1);
             }
-            if (Path.last(Path.parent(over.path)) === item.id) {
-              children.splice(over.position!, 0, active.item as TreeData);
+            if (Path.last(over.path) === item.id) {
+              children.push(active.item as TreeData);
             }
             return { ...item, children };
           }),
@@ -117,7 +117,6 @@ const graphNodeCompare = (a: Node, b: Node) => {
 };
 
 export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; graph?: Graph; debug: boolean }) => {
-  // TODO(wittjosiah): This graph does not handle order currently.
   const handleDrop = ({ operation, active, over }: MosaicDropEvent<number>) => {
     // Moving within the tree.
     if (Path.hasDescendent(id, active.path) && Path.hasDescendent(id, over.path)) {
@@ -137,18 +136,21 @@ export const GraphTree = ({ id, graph = createGraph(), debug }: { id: string; gr
         // This is a rearrange operation
         const nextIndex = nextRearrangeIndex(activeParent.children.sort(graphNodeCompare), activeNode.id, overNode.id);
         activeNode.properties.index = nextIndex ?? 'a0';
-      } else if (activeNode && activeParent && overParent && operation === 'adopt') {
+      } else if (activeNode && activeParent && overParent && operation === 'transfer') {
         activeParent.removeNode(active.item.id);
         overNode.addNode('tree', { ...activeNode });
       }
     }
   };
 
+  const handleOver = (): MosaicOperation => 'transfer';
+
   return (
     <Tree
       id={id}
       items={graph.root.children as TreeData[]}
       onDrop={handleDrop}
+      onOver={handleOver}
       debug={debug}
       compare={graphNodeCompare}
     />