@dxos/react-ui-mosaic 0.10.0 → 0.11.0

package/src/components/Mosaic/{Mosaic.tsx → Mosaic.ts}

@@ -2,14 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import {
-  MosaicContainer,
-  type MosaicContainerProps,
-  type MosaicContainerState,
-  type MosaicScrollController,
-  useMosaicContainerContext,
-} from './Container';
+import { MosaicContainer, type MosaicContainerProps, type MosaicScrollController } from './Container';
 import { MosaicDragHandle, type MosaicDragHandleProps } from './DragHandle';
+import { type MosaicContainerState, useMosaicContainerContext } from './MosaicContainerContext';
+import { type MosaicTileState, useMosaicTileContext } from './MosaicTileContext';
 import {
   MosaicDropIndicator,
   type MosaicDropIndicatorProps,
@@ -17,16 +13,14 @@ import {
   type MosaicPlaceholderProps,
 } from './Placeholder';
 import { MosaicResizeHandle, type MosaicResizeHandleProps } from './ResizeHandle';
-import { MosaicRoot, type MosaicRootProps, useMosaicRootContext } from './Root';
 import { MosaicStack, type MosaicStackProps, type MosaicStackTileComponent, MosaicVirtualStack } from './Stack';
-import { MosaicTile, type MosaicTileProps, type MosaicTileState, useMosaicTileContext } from './Tile';
+import { MosaicTile, type MosaicTileProps } from './Tile';
 
 //
 // Mosaic
 //
 
 export const Mosaic = {
-  Root: MosaicRoot,
   Container: MosaicContainer,
   Tile: MosaicTile,
   DragHandle: MosaicDragHandle,
@@ -44,7 +38,6 @@ export type {
   MosaicDropIndicatorProps,
   MosaicPlaceholderProps,
   MosaicResizeHandleProps,
-  MosaicRootProps,
   MosaicScrollController,
   MosaicStackProps,
   MosaicStackTileComponent,
@@ -52,8 +45,4 @@ export type {
   MosaicTileState,
 };
 
-export {
-  useMosaicRootContext as useMosaic,
-  useMosaicContainerContext as useMosaicContainer,
-  useMosaicTileContext as useMosaicTile,
-};
+export { useMosaicContainerContext as useMosaicContainer, useMosaicTileContext as useMosaicTile };

package/src/components/Mosaic/MosaicContainerContext.ts

@@ -0,0 +1,44 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+
+import { type AllowedAxis } from '@dxos/react-ui';
+import { type DndContainerHandler, type DndDraggingState, type DndLocation } from '@dxos/react-ui-dnd';
+
+// Kept out of `Container.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so the context and hook exported beside them force a full page reload on every edit.
+
+export const MOSAIC_CONTAINER_NAME = 'Mosaic.Container';
+
+export type MosaicContainerState = { type: 'idle' } | { type: 'active'; bounds?: DOMRect };
+
+export type MosaicContainerContextValue<TData = any, Location = DndLocation> = {
+  id: string;
+  eventHandler: DndContainerHandler<TData>;
+  orientation?: AllowedAxis;
+  dragging?: DndDraggingState;
+  scrolling?: boolean;
+  state: MosaicContainerState;
+
+  /** Active drop location. */
+  activeLocation?: Location;
+  setActiveLocation: (location: Location | undefined) => void;
+
+  /** ID of the current (aria-current) item. */
+  currentId?: string;
+  /** Set the current item by ID. */
+  setCurrentId: (id: string | undefined) => void;
+
+  /** IDs of selected (aria-selected) items. */
+  selectedIds?: ReadonlySet<string>;
+  /** Request to set or unset selection on an item by ID. */
+  setSelected: (id: string, selected: boolean) => void;
+
+  /** Register a scroll-to-item callback (provided by Stack/VirtualStack). */
+  registerScrollTo: (fn: ((id: string) => void) | undefined) => void;
+};
+
+export const [MosaicContainerContextProvider, useMosaicContainerContext] =
+  createContext<MosaicContainerContextValue>('MosaicContainer');

package/src/components/Mosaic/MosaicTileContext.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { createContext } from '@radix-ui/react-context';
+
+import { type Size } from '@dxos/react-ui-dnd';
+
+// Kept out of `Tile.tsx`: react-refresh only fast-refreshes a module whose exports are all
+// components, so the context and hook exported beside them force a full page reload on every edit.
+
+export const MOSAIC_TILE_NAME = 'Mosaic.Tile';
+
+export type MosaicTileState =
+  | { type: 'idle' }
+  | { type: 'preview'; container: HTMLElement; rect: DOMRect }
+  | { type: 'dragging' }
+  | { type: 'target'; closestEdge: Edge | null };
+
+export type MosaicTileContextValue = {
+  state: MosaicTileState;
+  /** Register the element that initiates dragging; set by a child `Mosaic.DragHandle`. */
+  setDragHandle: (element: HTMLElement | null) => void;
+  /** Current extent (rem) during/after resize; undefined when the tile is not sized. */
+  size?: Size;
+  /** Update the tile extent. A `commit` (drop) propagates to the consumer's `onSizeChange`. */
+  setSize: (size: Size, commit?: boolean) => void;
+  /** Resize bounds (rem) declared by the tile; consumed by `Mosaic.ResizeHandle`. */
+  minSize?: number;
+  maxSize?: number;
+};
+
+export const [MosaicTileContextProvider, useMosaicTileContext] = createContext<MosaicTileContextValue>('MosaicTile');

package/src/components/Mosaic/Placeholder.tsx

@@ -12,11 +12,11 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type PropsWithChildren, useLayoutEffect, useMemo, useRef } from 'react';
 
 import { type Axis, type ThemedClassName } from '@dxos/react-ui';
+import { type DndLocation, type DndPlaceholderData, getSourceData } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/ui-theme';
 
-import { useMosaicContainerContext } from './Container';
-import { useMosaicTileContext } from './Tile';
-import { type LocationType, type MosaicPlaceholderData, getSourceData } from './types';
+import { useMosaicContainerContext } from './MosaicContainerContext';
+import { useMosaicTileContext } from './MosaicTileContext';
 
 //
 // Placeholder
@@ -35,7 +35,7 @@ const MOSAIC_PLACEHOLDER_STATE_ATTR = 'mosaic-placeholder-state';
 // a specific gap unambiguously without relying on layout-dependent indices.
 const MOSAIC_PLACEHOLDER_LOCATION_ATTR = 'mosaic-placeholder-location';
 
-type MosaicPlaceholderProps<Location = LocationType> = ThemedClassName<
+type MosaicPlaceholderProps<Location = DndLocation> = ThemedClassName<
   PropsWithChildren<{
     asChild?: boolean;
     orientation?: Axis;
@@ -43,7 +43,7 @@ type MosaicPlaceholderProps<Location = LocationType> = ThemedClassName<
   }>
 >;
 
-const MosaicPlaceholder = <Location extends LocationType = LocationType>({
+const MosaicPlaceholder = <Location extends DndLocation = DndLocation>({
   classNames,
   children,
   asChild,
@@ -59,13 +59,13 @@ const MosaicPlaceholder = <Location extends LocationType = LocationType>({
     activeLocation,
     setActiveLocation,
   } = useMosaicContainerContext(MOSAIC_PLACEHOLDER_NAME);
-  const data = useMemo<MosaicPlaceholderData<Location>>(
+  const data = useMemo<DndPlaceholderData<Location>>(
     () =>
       ({
         type: 'placeholder',
         containerId,
         location,
-      }) satisfies MosaicPlaceholderData<Location>,
+      }) satisfies DndPlaceholderData<Location>,
     [containerId, location],
   );
 
@@ -103,7 +103,6 @@ const MosaicPlaceholder = <Location extends LocationType = LocationType>({
         [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? 'active' : 'idle',
         [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
       }}
-      role='none'
       className={mx('relative', classNames)}
       ref={rootRef}
     >

package/src/components/Mosaic/ResizeHandle.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type Axis, ScrollArea } from '@dxos/react-ui';
-import { type Size } from '@dxos/react-ui-dnd';
+import { Dnd, type Size } from '@dxos/react-ui-dnd';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Mosaic, type MosaicTileProps } from './Mosaic';
@@ -40,7 +40,7 @@ const ResizableTile = ({ data, size, onResize, ...tileProps }: ResizableTileProp
   return (
     <Mosaic.Tile
       {...tileProps}
-      classNames='flex flex-col p-2 m-1 border border-separator rounded-sm bg-base-surface overflow-hidden'
+      classNames='flex flex-col p-2 m-1 border border-separator rounded-sm dx-base-surface overflow-hidden'
       data={data}
       size={size}
       onSizeChange={handleSizeChange}
@@ -70,7 +70,7 @@ const DefaultStory = ({ orientation = 'vertical' }: { orientation?: Axis }) => {
   );
 
   return (
-    <Mosaic.Root>
+    <Dnd.Root>
       <Mosaic.Container
         asChild
         orientation={orientation}
@@ -89,7 +89,7 @@ const DefaultStory = ({ orientation = 'vertical' }: { orientation?: Axis }) => {
           </ScrollArea.Viewport>
         </ScrollArea.Root>
       </Mosaic.Container>
-    </Mosaic.Root>
+    </Dnd.Root>
   );
 };
 

package/src/components/Mosaic/ResizeHandle.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 
 import { ResizeHandle } from '@dxos/react-ui-dnd';
 
-import { useMosaicContainerContext } from './Container';
-import { useMosaicTileContext } from './Tile';
+import { useMosaicContainerContext } from './MosaicContainerContext';
+import { useMosaicTileContext } from './MosaicTileContext';
 
 const MOSAIC_RESIZE_HANDLE_NAME = 'Mosaic.ResizeHandle';
 

package/src/components/Mosaic/Stack.stories.tsx

@@ -9,7 +9,9 @@ import { useMemo } from 'react';
 import { Obj } from '@dxos/echo';
 import { random } from '@dxos/random';
 import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { Dnd, type DndContainerHandler } from '@dxos/react-ui-dnd';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { arrayMove } from '@dxos/util';
 
 import { useContainerDebug } from '../../hooks';
 import { DefaultStackTile, TestItem } from '../../testing';
@@ -30,17 +32,50 @@ const createTestItems = (n: number) =>
     }),
   );
 
-const DefaultStackStory = (props: MosaicStackProps<Obj.Any>) => {
+// Stateful items plus a same-container reorder handler so the stories actually apply drops
+// (the container is headless — reordering is the consumer's responsibility).
+const useReorderableStack = () => {
   // Create items at render time to avoid Storybook serialization issues with ECHO objects.
-  const items = useMemo(() => createTestItems(NUM_ITEMS), []);
+  const [items, setItems] = useState(() => createTestItems(NUM_ITEMS));
+  const eventHandler = useMemo<DndContainerHandler<Obj.Any>>(
+    () => ({
+      id: 'test',
+      canDrop: () => true,
+      onDrop: ({ source, target }) => {
+        const to =
+          (target?.type === 'tile' || target?.type === 'placeholder') && typeof target.location === 'number'
+            ? Math.floor(target.location)
+            : undefined;
+        if (to === undefined || to < 0) {
+          return;
+        }
+        setItems((prev) => {
+          const from = prev.findIndex((item) => item.id === source.id);
+          if (from === -1) {
+            return prev;
+          }
+          const next = prev.slice();
+          arrayMove(next, from, to);
+          return next;
+        });
+      },
+    }),
+    [],
+  );
+
+  return { items, eventHandler };
+};
+
+const DefaultStackStory = (props: MosaicStackProps<Obj.Any>) => {
+  const { items, eventHandler } = useReorderableStack();
   const [DebugInfo, debugHandler] = useContainerDebug(props.debug);
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
   return (
-    <Mosaic.Root debug={props.debug}>
+    <Dnd.Root>
       <Panel.Root>
         <Panel.Toolbar asChild>
           <Toolbar.Root>
-            <div className='flex grow justify-center'>Items: {items.length}</div>
+            <Toolbar.Text>Items: {items.length}</Toolbar.Text>
           </Toolbar.Root>
         </Panel.Toolbar>
         <Panel.Content asChild>
@@ -49,8 +84,9 @@ const DefaultStackStory = (props: MosaicStackProps<Obj.Any>) => {
               asChild
               orientation='vertical'
               autoScroll={viewport}
-              eventHandler={{ id: 'test', canDrop: () => true }}
+              eventHandler={eventHandler}
               debug={debugHandler}
+              placeholderDebug={props.debug}
             >
               <ScrollArea.Root orientation='vertical'>
                 <ScrollArea.Viewport ref={setViewport}>
@@ -61,23 +97,22 @@ const DefaultStackStory = (props: MosaicStackProps<Obj.Any>) => {
           </Focus.Group>
         </Panel.Content>
         {props.debug && (
-          <Panel.Statusbar className='h-[40dvh]'>
+          <Panel.Statusbar classNames='h-[40dvh]'>
             <DebugInfo />
           </Panel.Statusbar>
         )}
       </Panel.Root>
-    </Mosaic.Root>
+    </Dnd.Root>
   );
 };
 
 const VirtualStackStory = (props: MosaicStackProps<Obj.Any>) => {
-  // Create items at render time to avoid Storybook serialization issues with ECHO objects.
-  const items = useMemo(() => createTestItems(NUM_ITEMS), []);
+  const { items, eventHandler } = useReorderableStack();
   const [info, setInfo] = useState<any>(null);
   const [DebugInfo, debugHandler] = useContainerDebug(props.debug);
   const [viewport, setViewport] = useState<HTMLElement | null>(null);
   return (
-    <Mosaic.Root debug={props.debug}>
+    <Dnd.Root>
       <Panel.Root>
         <Panel.Toolbar asChild>
           <Toolbar.Root>
@@ -89,8 +124,9 @@ const VirtualStackStory = (props: MosaicStackProps<Obj.Any>) => {
             asChild
             orientation='vertical'
             autoScroll={viewport}
-            eventHandler={{ id: 'test', canDrop: () => true }}
+            eventHandler={eventHandler}
             debug={debugHandler}
+            placeholderDebug={props.debug}
           >
             <ScrollArea.Root orientation='vertical'>
               <ScrollArea.Viewport ref={setViewport}>
@@ -108,12 +144,12 @@ const VirtualStackStory = (props: MosaicStackProps<Obj.Any>) => {
           </Mosaic.Container>
         </Panel.Content>
         {props.debug && (
-          <Panel.Statusbar className='h-[40dvh]'>
+          <Panel.Statusbar classNames='h-[40dvh]'>
             <DebugInfo />
           </Panel.Statusbar>
         )}
       </Panel.Root>
-    </Mosaic.Root>
+    </Dnd.Root>
   );
 };
 

package/src/components/Mosaic/Stack.tsx

@@ -3,7 +3,7 @@
 //
 
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { type ReactVirtualizerOptions, useVirtualizer } from '@tanstack/react-virtual';
+import { type ReactVirtualizerOptions, type Virtualizer, useVirtualizer } from '@tanstack/react-virtual';
 import React, {
   type FC,
   Fragment,
@@ -19,14 +19,14 @@ import React, {
 
 import { invariant } from '@dxos/invariant';
 import { type Axis, type ThemedClassName, composable, composableProps } from '@dxos/react-ui';
+import { type GetId } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/ui-theme';
 
-import { useVisibleItems } from '../../hooks';
-import { useMosaicContainerContext } from './Container';
+import { type VirtualizerPaginationController, useVirtualizerPagination, useVisibleItems } from '../../hooks';
+import { useMosaicContainerContext } from './MosaicContainerContext';
 import { MosaicPlaceholder, type MosaicPlaceholderProps } from './Placeholder';
 import { styles } from './styles';
 import { type MosaicTileProps } from './Tile';
-import { type GetId } from './types';
 
 //
 // Mosaic Drag-and-drop
@@ -179,7 +179,12 @@ type MosaicVirtualStackProps<TData = any> = MosaicStackProps<TData> &
   Pick<
     ReactVirtualizerOptions<HTMLElement, HTMLDivElement>,
     'estimateSize' | 'gap' | 'getScrollElement' | 'overscan' | 'onChange'
-  >;
+  > & {
+    /** Enables paginated loading; see `useVirtualizerPagination`. Requires `draggable={false}`. */
+    pagination?: VirtualizerPaginationController;
+    /** Rows from either loaded edge at which the adjacent page is requested. @default 12. */
+    paginationThreshold?: number;
+  };
 
 const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackProps>(
   (
@@ -193,6 +198,8 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
       getScrollElement,
       overscan = 8,
       gap,
+      pagination,
+      paginationThreshold,
       onChange,
       draggable = true,
       debug,
@@ -201,6 +208,7 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
     forwardedRef,
   ) => {
     invariant(Tile);
+    invariant(!pagination || !draggable, 'pagination requires draggable={false}');
     const { id, dragging, currentId, selectedIds, registerScrollTo } =
       useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
     const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
@@ -212,14 +220,27 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
       ? (index: number) => (index % 2 === 0 ? 0 : estimateSize(Math.floor(index / 2)))
       : estimateSize;
 
+    const { onChange: handlePaginationChange, leadingSpace } = useVirtualizerPagination({
+      items: visibleItems,
+      getId,
+      pagination,
+      threshold: paginationThreshold,
+    });
+    const handleChange = useCallback(
+      (nextVirtualizer: Virtualizer<any, any>, sync: boolean) => {
+        handlePaginationChange(nextVirtualizer);
+        onChange?.(nextVirtualizer, sync);
+      },
+      [handlePaginationChange, onChange],
+    );
+
     const virtualizer = useVirtualizer({
       // NOTE: When draggable we double the number of items to allow for placeholders.
       count: draggable ? visibleItems.length * 2 + 1 : visibleItems.length,
       estimateSize: wrappedEstimateSize,
       gap,
-      // Inset the stack from both ends by `gap` (matching the inter-item spacing). The virtualizer
-      // folds this into item offsets, getTotalSize(), and scrollToIndex, so no manual compensation.
-      paddingStart: gap,
+      // Inset by `gap` (inter-item spacing) plus any pagination spacer; see `useVirtualizerPagination`.
+      paddingStart: (gap ?? 0) + leadingSpace,
       paddingEnd: gap,
       // Key measurements by stable item ID so the size cache survives scrolling;
       // without this, measurements are indexed by position and are lost when items reorder.
@@ -228,7 +249,7 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
         : (index) => getId(visibleItems![index]),
       getScrollElement,
       overscan,
-      onChange,
+      onChange: handleChange,
     });
 
     // Register scroll-to-item via virtualizer index lookup.

package/src/components/Mosaic/Tile.tsx

@@ -17,50 +17,41 @@ import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/elemen
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { type DropTargetRecord } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { composeRefs } from '@radix-ui/react-compose-refs';
-import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type PropsWithChildren, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { createPortal } from 'react-dom';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { composableProps, slottable } from '@dxos/react-ui';
-import { type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
+import {
+  type DndLocation,
+  type DndTileData,
+  type Size,
+  getSourceData,
+  resizeAttributes,
+  sizeStyle,
+} from '@dxos/react-ui-dnd';
 
-import { useMosaicContainerContext } from './Container';
-import { type LocationType, type MosaicTileData, getSourceData } from './types';
+import { useMosaicContainerContext } from './MosaicContainerContext';
+import { MOSAIC_TILE_NAME, MosaicTileContextProvider, type MosaicTileState } from './MosaicTileContext';
 
 //
 // Tile
 //
 
-const MOSAIC_TILE_NAME = 'Mosaic.Tile';
-
-type MosaicTileState =
-  | { type: 'idle' }
-  | { type: 'preview'; container: HTMLElement; rect: DOMRect }
-  | { type: 'dragging' }
-  | { type: 'target'; closestEdge: Edge | null };
-
-type MosaicTileContextValue = {
-  state: MosaicTileState;
-  /** Register the element that initiates dragging; set by a child `Mosaic.DragHandle`. */
-  setDragHandle: (element: HTMLElement | null) => void;
-  /** Current extent (rem) during/after resize; undefined when the tile is not sized. */
-  size?: Size;
-  /** Update the tile extent. A `commit` (drop) propagates to the consumer's `onSizeChange`. */
-  setSize: (size: Size, commit?: boolean) => void;
-  /** Resize bounds (rem) declared by the tile; consumed by `Mosaic.ResizeHandle`. */
-  minSize?: number;
-  maxSize?: number;
-};
-
-const [MosaicTileContextProvider, useMosaicTileContext] = createContext<MosaicTileContextValue>('MosaicTile');
-
 // State attribute: data-[mosaic-tile-state=dragging]
 const MOSAIC_TILE_STATE_ATTR = 'mosaic-tile-state';
 
-type MosaicTileProps<TData = any, TLocation = LocationType> = ThemedClassName<
+type MosaicTileProps<TData = any, TLocation = DndLocation> = ThemedClassName<
   PropsWithChildren<{
     className?: string;
     dragHandle?: HTMLElement | null;
@@ -141,13 +132,22 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
       },
       [onSizeChange],
     );
+    // The `size` prop is the source of truth; internal state exists only to reflect the live extent
+    // during a drag (which commits back through `onSizeChange`). Re-sync when the prop changes so a
+    // tile that first rendered without a size — e.g. before the breakpoint settled, or a
+    // mobile/fullbleed → sliding branch switch that swaps `size` in — applies it once it arrives,
+    // instead of staying stuck at its initial (often `undefined`) extent. A live drag never changes
+    // the prop (only the committed drop does), so this does not fight the drag.
+    useEffect(() => {
+      setInternalSize(sizeProp);
+    }, [sizeProp]);
 
     const allowedEdges = useMemo<Edge[]>(
       () => allowedEdgesProp || (orientation === 'vertical' ? ['top', 'bottom'] : ['left', 'right']),
       [allowedEdgesProp, orientation],
     );
 
-    const data = useMemo<MosaicTileData>(
+    const data = useMemo<DndTileData>(
       () =>
         ({
           type: 'tile',
@@ -155,7 +155,7 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
           containerId,
           data: dataProp,
           location,
-        }) satisfies MosaicTileData,
+        }) satisfies DndTileData,
       [containerId, location, dataProp],
     );
 
@@ -329,6 +329,6 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
 
 MosaicTile.displayName = MOSAIC_TILE_NAME;
 
-export { MosaicTile, useMosaicTileContext };
+export { MosaicTile };
 
-export type { MosaicTileProps, MosaicTileState };
+export type { MosaicTileProps };