@dxos/react-ui-mosaic 0.3.8-next.f4e0086 → 0.3.9-main.14901ff

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

@@ -1 +1 @@
-{"version":3,"file":"DragOverlay.d.ts","sourceRoot":"","sources":["../../../../src/mosaic/DragOverlay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAyE,MAAM,OAAO,CAAC;AAQ9F,MAAM,MAAM,sBAAsB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAC7E,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,UAAU,CACX,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sCAAqD,sBAAsB,gBA+ExG,CAAC"}
+{"version":3,"file":"DragOverlay.d.ts","sourceRoot":"","sources":["../../../../src/mosaic/DragOverlay.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAyE,MAAM,OAAO,CAAC;AAQ9F,MAAM,MAAM,sBAAsB,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAC7E,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EACxC,UAAU,CACX,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sCAAqD,sBAAsB,gBAgFxG,CAAC"}

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

@@ -1,6 +1,6 @@
 import { type DraggableAttributes } from '@dnd-kit/core';
 import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
-import type { MosaicOperation, MosaicTileOverlayProps } from './Container';
+import { type MosaicOperation, type MosaicTileOverlayProps } from './Container';
 import type { MosaicDataItem } from './types';
 export type MosaicActiveType = 'overlay' | 'rearrange' | 'origin' | 'destination';
 export type MosaicTileAction = {
@@ -16,6 +16,7 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
     item: TData;
     Component?: MosaicTileComponent<TData, any>;
     position?: TPosition;
+    type?: string;
     operation?: MosaicOperation;
     active?: MosaicActiveType;
     isDragging?: boolean;
@@ -24,24 +25,26 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
     draggableProps?: DraggableAttributes & HTMLAttributes<HTMLElement>;
     onSelect?: () => void;
     onRemove?: () => void;
+    onNavigate?: () => void;
     onAction?: (action: MosaicTileAction) => void;
 };
+export type MosaicTileComponentProps<TData extends MosaicDataItem = MosaicDataItem> = Omit<MosaicTileProps<TData>, 'Component' | 'operation'> & {
+    operation: MosaicOperation;
+};
 /**
  * Mosaic Tile component.
  */
-export type MosaicTileComponent<TData extends MosaicDataItem = MosaicDataItem, TElement extends HTMLElement = HTMLDivElement> = ForwardRefExoticComponent<RefAttributes<TElement> & Omit<MosaicTileProps<TData>, 'Component' | 'operation'> & {
-    operation: MosaicOperation;
-}>;
+export type MosaicTileComponent<TData extends MosaicDataItem = MosaicDataItem, TElement extends HTMLElement = HTMLDivElement> = ForwardRefExoticComponent<RefAttributes<TElement> & MosaicTileComponentProps<TData>>;
 /**
  * Basic draggable mosaic tile.
  */
-export declare const DraggableTile: ({ path: parentPath, item, Component, position, draggableStyle, ...props }: MosaicTileProps<any>) => JSX.Element;
+export declare const DraggableTile: ({ path: parentPath, type, item, Component, position, draggableStyle, ...props }: MosaicTileProps<any>) => JSX.Element;
 /**
  * Basic droppable mosaic tile.
  */
-export declare const DroppableTile: ({ path: parentPath, item, Component, position, ...props }: MosaicTileProps<any>) => JSX.Element;
+export declare const DroppableTile: ({ path: parentPath, type, item, Component, position, ...props }: MosaicTileProps<any>) => JSX.Element;
 /**
  * Mosaic tile that can be sorted.
  */
-export declare const SortableTile: ({ path: parentPath, item, Component: OverrideComponent, position, draggableStyle, ...props }: MosaicTileProps<any, number>) => JSX.Element;
+export declare const SortableTile: ({ path: parentPath, type, item, Component: OverrideComponent, position, draggableStyle, ...props }: MosaicTileProps<any, number>) => JSX.Element;
 //# sourceMappingURL=Tile.d.ts.map

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,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"}
+{"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,EAAgB,KAAK,eAAe,EAAE,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG9F,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,SAAS,CAAC;AAGjE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,aAAa,CAAC;AAGlF,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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEJ,MAAM,MAAM,wBAAwB,CAAC,KAAK,SAAS,cAAc,GAAG,cAAc,IAAI,IAAI,CACxF,eAAe,CAAC,KAAK,CAAC,EACtB,WAAW,GAAG,WAAW,CAC1B,GAAG;IAAE,SAAS,EAAE,eAAe,CAAA;CAAE,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,mBAAmB,CAC7B,KAAK,SAAS,cAAc,GAAG,cAAc,EAC7C,QAAQ,SAAS,WAAW,GAAG,cAAc,IAC3C,yBAAyB,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAEzF;;GAEG;AACH,eAAO,MAAM,aAAa,oFAQvB,gBAAgB,GAAG,CAAC,gBA0BtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,oEAOvB,gBAAgB,GAAG,CAAC,gBAuBtB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,uGAQtB,gBAAgB,GAAG,EAAE,MAAM,CAAC,gBAuD9B,CAAC"}

package/dist/types/src/mosaic/hooks/useContainer.d.ts

@@ -1,4 +1,4 @@
-import { type MosaicContainerProps } from '../Container';
+import { type MosaicContainerContextType } from '../Container';
 import { type MosaicDataItem } from '../types';
-export declare const useContainer: <TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown>() => MosaicContainerProps<TData, TPosition>;
+export declare const useContainer: <TData extends MosaicDataItem = MosaicDataItem, TPosition = unknown>() => MosaicContainerContextType<TData, TPosition>;
 //# sourceMappingURL=useContainer.d.ts.map

package/dist/types/src/mosaic/hooks/useContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useContainer.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/useContainer.ts"],"names":[],"mappings":"AAQA,OAAO,EAA0B,KAAK,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,YAAY,kHAIiE,CAAC"}
+{"version":3,"file":"useContainer.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/hooks/useContainer.ts"],"names":[],"mappings":"AAMA,OAAO,EAA0B,KAAK,0BAA0B,EAAE,MAAM,cAAc,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,eAAO,MAAM,YAAY,wHAG8D,CAAC"}

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

@@ -3,6 +3,7 @@ export type MosaicDataItem = {
 };
 export type MosaicDraggedItem<TPosition = unknown> = {
     path: string;
+    type: string;
     item: MosaicDataItem;
     position?: TPosition;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/mosaic/types.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5C,MAAM,MAAM,iBAAiB,CAAC,SAAS,GAAG,OAAO,IAAI;IACnD,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,cAAc,CAAC;IAErB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/mosaic/types.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5C,MAAM,MAAM,iBAAiB,CAAC,SAAS,GAAG,OAAO,IAAI;IACnD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEb,IAAI,EAAE,cAAc,CAAC;IAErB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC"}

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

@@ -1,4 +1,5 @@
 export * from './data';
 export * from './path';
+export * from './props';
 export * from './styles';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/types/src/mosaic/util/props.d.ts

@@ -0,0 +1,4 @@
+import { type MosaicTileComponentProps, type MosaicTileProps } from '../Tile';
+export declare const isTileProps: (props: Record<string, unknown>) => props is MosaicTileProps;
+export declare const isTileComponentProps: (props: Record<string, unknown>) => props is MosaicTileComponentProps;
+//# sourceMappingURL=props.d.ts.map

package/dist/types/src/mosaic/util/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../../src/mosaic/util/props.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,wBAAwB,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAE9E,eAAO,MAAM,WAAW,UAAW,OAAO,MAAM,EAAE,OAAO,CAAC,6BAG/C,CAAC;AAEZ,eAAO,MAAM,oBAAoB,UAAW,OAAO,MAAM,EAAE,OAAO,CAAC,sCACsC,CAAC"}

package/package.json

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

package/src/index.ts

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

package/src/mosaic/Container.tsx

@@ -15,7 +15,13 @@ import { type MosaicTileComponent } from './Tile';
 import { useMosaic } from './hooks';
 import { type MosaicDataItem, type MosaicDraggedItem } from './types';
 
+// TODO(wittjosiah): Factor out.
+type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
+  [Property in Key]-?: Type[Property];
+};
+
 export const DEFAULT_TRANSITION = 200;
+export const DEFAULT_TYPE = 'unknown';
 
 export type MosaicTileOverlayProps = {
   grow?: boolean;
@@ -31,7 +37,8 @@ export type MosaicTileOverlayProps = {
  * * `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 const MosaicOperations = ['transfer', 'copy', 'rearrange', 'reject'] as const;
+export type MosaicOperation = (typeof MosaicOperations)[number];
 
 export type MosaicMoveEvent<TPosition = unknown> = {
   active: MosaicDraggedItem<TPosition>;
@@ -57,6 +64,11 @@ export type MosaicContainerProps<TData extends MosaicDataItem = MosaicDataItem,
      */
     Component?: MosaicTileComponent<TData, any>;
 
+    /**
+     * Default type of tiles.
+     */
+    type?: string;
+
     /**
      * Length of transition when moving tiles in milliseconds.
      *
@@ -92,9 +104,15 @@ export type MosaicContainerProps<TData extends MosaicDataItem = MosaicDataItem,
     onDrop?: (event: MosaicDropEvent<TPosition>) => void;
   }>;
 
-export type MosaicContainerContextType = Omit<MosaicContainerProps<any>, 'children'>;
+export type MosaicContainerContextType<
+  TData extends MosaicDataItem = MosaicDataItem,
+  TPosition = unknown,
+> = WithRequiredProperty<Omit<MosaicContainerProps<TData, TPosition>, 'children'>, 'type'>;
 
-export const MosaicContainerContext = createContext<MosaicContainerContextType | undefined>(undefined);
+export const MosaicContainerContext = createContext<MosaicContainerContextType<any>>({
+  id: 'never',
+  type: DEFAULT_TYPE,
+});
 
 /**
  * Root Container that manages the layout of tiles.
@@ -103,6 +121,7 @@ export const MosaicContainer = ({
   children,
   id,
   debug,
+  type = DEFAULT_TYPE,
   Component,
   transitionDuration = DEFAULT_TRANSITION,
   modifier,
@@ -115,6 +134,7 @@ export const MosaicContainer = ({
   const container = {
     id,
     debug,
+    type,
     Component,
     transitionDuration,
     modifier,

package/src/mosaic/DragOverlay.tsx

@@ -79,6 +79,7 @@ export const MosaicDragOverlay = ({ delay = 200, debug = false, ...overlayProps
             {...container.getOverlayProps?.()}
             item={activeItem.item}
             path={activeItem.path}
+            type={activeItem.type}
             operation={operation}
             active='overlay'
           />

package/src/mosaic/Root.tsx

@@ -133,13 +133,13 @@ export const MosaicRoot: FC<MosaicRootProps> = ({ Component = DefaultComponent,
   //
 
   const handleDragStart = (event: DragStartEvent) => {
-    setActiveItem(pick(event.active.data.current as MosaicDraggedItem, 'path', 'item', 'position'));
+    setActiveItem(pick(event.active.data.current as MosaicDraggedItem, 'path', 'type', 'item', 'position'));
   };
 
   const handleDragMove = (event: DragMoveEvent) => {};
 
   const handleDragOver = (event: DragOverEvent) => {
-    const overItem = pick(event.over?.data.current as MosaicDraggedItem, 'path', 'item', 'position');
+    const overItem = pick(event.over?.data.current as MosaicDraggedItem, 'path', 'type', 'item', 'position');
 
     // 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.
@@ -241,11 +241,13 @@ const MosaicDebug: FC<{
         active: {
           id: activeItem?.item?.id.slice(0, 16),
           path: activeItem?.path && Path.create(...Path.parts(activeItem.path).map((part) => part.slice(0, 16))),
+          type: activeItem?.type,
           position: activeItem?.position,
         },
         over: {
           id: overItem?.item?.id.slice(0, 16),
           path: overItem?.path && Path.create(...Path.parts(overItem.path).map((part) => part.slice(0, 16))),
+          type: overItem?.type,
           position: overItem?.position,
         },
       }}

package/src/mosaic/Tile.tsx

@@ -7,7 +7,7 @@ import { defaultAnimateLayoutChanges, useSortable } from '@dnd-kit/sortable';
 import React from 'react';
 import type { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
 
-import type { MosaicOperation, MosaicTileOverlayProps } from './Container';
+import { DEFAULT_TYPE, type MosaicOperation, type MosaicTileOverlayProps } from './Container';
 import { DefaultComponent } from './DefaultComponent';
 import { useContainer, useMosaic } from './hooks';
 import type { MosaicDataItem, MosaicDraggedItem } from './types';
@@ -15,6 +15,7 @@ import { getTransformCSS, Path } from './util';
 
 export type MosaicActiveType = 'overlay' | 'rearrange' | 'origin' | 'destination';
 
+// TODO(wittjosiah): `id` should be `path` and `data` should be a `MosaicDataItem`.
 export type MosaicTileAction = { id: string; action: string; data?: any };
 
 /**
@@ -29,6 +30,7 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
     item: TData;
     Component?: MosaicTileComponent<TData, any>;
     position?: TPosition;
+    type?: string;
     operation?: MosaicOperation;
     active?: MosaicActiveType; // TODO(burdon): Rename state?
 
@@ -43,24 +45,29 @@ export type MosaicTileProps<TData extends MosaicDataItem = MosaicDataItem, TPosi
     // TODO(burdon): Generalize events via onAction?
     onSelect?: () => void;
     onRemove?: () => void;
+    onNavigate?: () => void;
     onAction?: (action: MosaicTileAction) => void;
   };
 
+export type MosaicTileComponentProps<TData extends MosaicDataItem = MosaicDataItem> = Omit<
+  MosaicTileProps<TData>,
+  'Component' | 'operation'
+> & { operation: MosaicOperation };
+
 /**
  * Mosaic Tile component.
  */
 export type MosaicTileComponent<
   TData extends MosaicDataItem = MosaicDataItem,
   TElement extends HTMLElement = HTMLDivElement,
-> = ForwardRefExoticComponent<
-  RefAttributes<TElement> & Omit<MosaicTileProps<TData>, 'Component' | 'operation'> & { operation: MosaicOperation }
->;
+> = ForwardRefExoticComponent<RefAttributes<TElement> & MosaicTileComponentProps<TData>>;
 
 /**
  * Basic draggable mosaic tile.
  */
 export const DraggableTile = ({
   path: parentPath,
+  type = DEFAULT_TYPE,
   item,
   Component = DefaultComponent,
   position,
@@ -71,7 +78,7 @@ export const DraggableTile = ({
   const path = Path.create(parentPath, item.id);
   const { setNodeRef, attributes, listeners, /* transform, */ isDragging } = useDraggable({
     id: path,
-    data: { path, item, position } satisfies MosaicDraggedItem,
+    data: { path, type, item, position } satisfies MosaicDraggedItem,
   });
 
   return (
@@ -79,6 +86,7 @@ export const DraggableTile = ({
       ref={setNodeRef}
       item={item}
       path={path}
+      type={type}
       position={position}
       operation={operation}
       isDragging={isDragging}
@@ -98,6 +106,7 @@ export const DraggableTile = ({
  */
 export const DroppableTile = ({
   path: parentPath,
+  type = DEFAULT_TYPE,
   item,
   Component = DefaultComponent,
   position,
@@ -110,7 +119,7 @@ export const DroppableTile = ({
       : Path.create(parentPath, item.id);
   const { setNodeRef, isOver } = useDroppable({
     id: path,
-    data: { path, item, position } satisfies MosaicDraggedItem,
+    data: { path, type, item, position } satisfies MosaicDraggedItem,
   });
 
   return (
@@ -118,6 +127,7 @@ export const DroppableTile = ({
       ref={setNodeRef}
       item={item}
       path={path}
+      type={type}
       position={position}
       operation={operation}
       isOver={isOver}
@@ -131,6 +141,7 @@ export const DroppableTile = ({
  */
 export const SortableTile = ({
   path: parentPath,
+  type = DEFAULT_TYPE,
   item,
   Component: OverrideComponent,
   position,
@@ -153,7 +164,7 @@ export const SortableTile = ({
 
   const { setNodeRef, attributes, listeners, transform, isDragging, isOver } = useSortable({
     id: isPreview ? activeItem.path : path,
-    data: { path, item, position } satisfies MosaicDraggedItem,
+    data: { path, type, item, position } satisfies MosaicDraggedItem,
     animateLayoutChanges: (args) =>
       defaultAnimateLayoutChanges({ ...args, wasDragging: item.id !== activeItem?.item.id }),
   });
@@ -176,6 +187,7 @@ export const SortableTile = ({
       ref={setNodeRef}
       item={item}
       path={path}
+      type={type}
       position={position}
       operation={operation}
       active={active}

package/src/mosaic/hooks/useContainer.ts

@@ -4,13 +4,10 @@
 
 import { useContext } from 'react';
 
-import { raise } from '@dxos/debug';
-
-import { MosaicContainerContext, type MosaicContainerProps } from '../Container';
+import { MosaicContainerContext, type MosaicContainerContextType } from '../Container';
 import { type MosaicDataItem } from '../types';
 
 export const useContainer = <
   TData extends MosaicDataItem = MosaicDataItem,
   TPosition = unknown,
->(): MosaicContainerProps<TData, TPosition> =>
-  useContext(MosaicContainerContext) ?? raise(new Error('Missing MosaicContainerContext'));
+>(): MosaicContainerContextType<TData, TPosition> => useContext(MosaicContainerContext);

package/src/mosaic/types.ts

@@ -2,10 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
+// TODO(wittjosiah): Rename MosiacDataItem to MosaicItemData?
 export type MosaicDataItem = { id: string };
 
 export type MosaicDraggedItem<TPosition = unknown> = {
   path: string;
+  type: string;
   // TODO(wittjosiah): Rename data? Otherwise item within item.
   item: MosaicDataItem;
   // Index or layout-specific positional information (stored separately from the item).

package/src/mosaic/util/index.ts

@@ -4,4 +4,5 @@
 
 export * from './data';
 export * from './path';
+export * from './props';
 export * from './styles';

package/src/mosaic/util/props.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { MosaicOperations } from '../Container';
+import { type MosaicTileComponentProps, type MosaicTileProps } from '../Tile';
+
+export const isTileProps = (props: Record<string, unknown>): props is MosaicTileProps =>
+  typeof props.path === 'string' && typeof props.item === 'object' && props.item
+    ? 'id' in props.item && typeof props.item.id === 'string'
+    : false;
+
+export const isTileComponentProps = (props: Record<string, unknown>): props is MosaicTileComponentProps =>
+  isTileProps(props) && typeof props.operation === 'string' && MosaicOperations.includes(props.operation);