@dxos/react-ui-mosaic 0.9.1-main.c7dcc2e112 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.10.0",
   "description": "Modular UI components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -62,46 +62,46 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@tanstack/react-virtual": "^3.13.18",
     "bind-event-listener": "^3.0.0",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-dnd": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-list": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-search": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112"
+    "@dxos/echo": "0.10.0",
+    "@dxos/async": "0.10.0",
+    "@dxos/log": "0.10.0",
+    "@dxos/react-client": "0.10.0",
+    "@dxos/invariant": "0.10.0",
+    "@dxos/keys": "0.10.0",
+    "@dxos/react-ui-attention": "0.10.0",
+    "@dxos/react-ui-dnd": "0.10.0",
+    "@dxos/react-ui-list": "0.10.0",
+    "@dxos/react-ui-menu": "0.10.0",
+    "@dxos/react-ui-search": "0.10.0",
+    "@dxos/react-ui-syntax-highlighter": "0.10.0",
+    "@dxos/util": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/test-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/types": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/random": "0.10.0",
+    "@dxos/react-ui-syntax-highlighter": "0.10.0",
+    "@dxos/schema": "0.10.0",
+    "@dxos/storybook-utils": "0.10.0",
+    "@dxos/ui-theme": "0.10.0",
+    "@dxos/types": "0.10.0",
+    "@dxos/test-utils": "0.10.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/random": "0.10.0",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Board/Board.stories.tsx

@@ -49,7 +49,7 @@ const createTestData = (db: Database.Database, columns: number, items?: (column:
   });
 };
 
-type DefaultStoryProps = {
+type StoryArgs = {
   columns?: number;
   items?: (column: number) => number;
   debug?: boolean;
@@ -164,7 +164,7 @@ const useTestBoardModel = (): TestBoardModelResult => {
   return { model, eventHandler };
 };
 
-const DefaultStory = ({ debug = false, columns: columnsProp = 0 }: DefaultStoryProps) => {
+const DefaultStory = ({ debug = false, columns: columnsProp = 0 }: StoryArgs) => {
   const { model, eventHandler } = useTestBoardModel();
   const columns = useAtomValue(model.columns);
   if (columnsProp > 0 && columns.length === 0) {
@@ -199,7 +199,7 @@ const meta = {
       createIdentity: true,
       createSpace: true,
       onCreateSpace: ({ space }, context) => {
-        const args = context.args as DefaultStoryProps;
+        const args = context.args as StoryArgs;
         createTestData(space.db, args.columns ?? 0, args.items);
       },
     }),

package/src/components/Board/Board.tsx

@@ -188,4 +188,4 @@ export const Board = {
 
 export { useBoard, useBoardColumn };
 
-export type { BoardRootProps, BoardContentProps, BoardColumnProps, BoardItemProps };
+export type { BoardColumnProps, BoardContentProps, BoardItemProps, BoardRootProps };

package/src/components/Board/Item.tsx

@@ -103,7 +103,7 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
                 </Card.Block>
                 {label && (
                   <div className='shrink-0 flex gap-1 items-center text-xs'>
-                    <Tag palette={getHashStyles(label).hue}>{label}</Tag>
+                    <Tag hue={getHashStyles(label).hue}>{label}</Tag>
                   </div>
                 )}
               </Card.Row>

package/src/components/Focus/Focus.tsx

@@ -3,4 +3,4 @@
 //
 
 // Re-export from @dxos/react-ui.
-export { Focus, useFocus, type FocusGroupProps, type FocusItemProps } from '@dxos/react-ui';
+export { Focus, type FocusGroupProps, type FocusItemProps, useFocus } from '@dxos/react-ui';

package/src/components/Mosaic/Container.tsx

@@ -235,10 +235,8 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
               return (data && eventHandler.canDrop?.({ source: data })) || false;
             },
 
-            // TODO(burdon): Provide semantic intent to onDrop.
-            // getDropEffect: () => {
-            //   return 'move';
-            // },
+            // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+            getDropEffect: () => 'move',
 
             /**
              * Dragging started in this container.
@@ -279,9 +277,9 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
           autoscrollElement && [
             autoScrollForElements({
               element: autoscrollElement,
-              // canScroll: ({ element: _ }) => {
-              //   return true;
-              // },
+              // Only autoscroll for tile (reorder) drags. Resize-handle drags carry no tile data, so
+              // resizing a tile near a viewport edge must not scroll the container.
+              canScroll: ({ source }) => getSourceData(source) != null,
               getAllowedAxis: () => orientation,
               getConfiguration: () => ({
                 maxScrollSpeed: 'fast',

package/src/components/Mosaic/DragHandle.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import React, { type ReactNode, forwardRef } from 'react';
+
+import { Button, IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+
+import { useMosaicTileContext } from './Tile';
+
+const MOSAIC_DRAG_HANDLE_NAME = 'Mosaic.DragHandle';
+
+const REACT_UI_TRANSLATION_KEY = '@dxos/react-ui';
+
+export type MosaicDragHandleProps = ThemedClassName<
+  Partial<Pick<IconButtonProps, 'icon' | 'label' | 'variant'>> & {
+    testId?: string;
+    /**
+     * Inline glyph rendered in place of the sprite icon. The browser does not rasterize external SVG
+     * sprite `<use>` icons into a native drag image, so a tile that appears in its own drag preview
+     * (the clone follows the cursor) must use an inline-SVG handle here to stay visible while dragging.
+     */
+    children?: ReactNode;
+  }
+>;
+
+/**
+ * Affordance that initiates dragging the enclosing {@link MosaicTile}. Renders a button and
+ * registers itself with the tile (via context), so consumers only need to drop it inside a
+ * `Mosaic.Tile` — no `dragHandle` ref plumbing required.
+ */
+export const MosaicDragHandle = forwardRef<HTMLButtonElement, MosaicDragHandleProps>(
+  (
+    { icon = 'ph--dots-six-vertical--regular', label, variant = 'ghost', classNames, testId, children },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(REACT_UI_TRANSLATION_KEY);
+    const { setDragHandle } = useMosaicTileContext(MOSAIC_DRAG_HANDLE_NAME);
+    const ref = composeRefs(forwardedRef, setDragHandle);
+    const testIdProps = testId ? { 'data-testid': testId } : {};
+
+    // Inline-glyph variant: stays visible in the tile's own native drag image (sprite icons do not).
+    if (children) {
+      return (
+        <Button
+          ref={ref}
+          variant={variant}
+          tabIndex={-1}
+          classNames={['grid place-items-center cursor-grab', classNames]}
+          {...testIdProps}
+        >
+          {children}
+          <span className='sr-only'>{label ?? t('toolbar-drag-handle.label')}</span>
+        </Button>
+      );
+    }
+
+    return (
+      <IconButton
+        ref={ref}
+        iconOnly
+        noTooltip
+        tabIndex={-1}
+        variant={variant}
+        icon={icon}
+        label={label ?? t('toolbar-drag-handle.label')}
+        classNames={['cursor-grab', classNames]}
+        {...testIdProps}
+      />
+    );
+  },
+);
+
+MosaicDragHandle.displayName = MOSAIC_DRAG_HANDLE_NAME;

package/src/components/Mosaic/Mosaic.tsx

@@ -9,12 +9,14 @@ import {
   type MosaicScrollController,
   useMosaicContainerContext,
 } from './Container';
+import { MosaicDragHandle, type MosaicDragHandleProps } from './DragHandle';
 import {
   MosaicDropIndicator,
   type MosaicDropIndicatorProps,
   MosaicPlaceholder,
   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';
@@ -27,6 +29,8 @@ export const Mosaic = {
   Root: MosaicRoot,
   Container: MosaicContainer,
   Tile: MosaicTile,
+  DragHandle: MosaicDragHandle,
+  ResizeHandle: MosaicResizeHandle,
   Placeholder: MosaicPlaceholder,
   DropIndicator: MosaicDropIndicator,
   Stack: MosaicStack,
@@ -34,16 +38,18 @@ export const Mosaic = {
 };
 
 export type {
-  MosaicRootProps,
   MosaicContainerProps,
   MosaicContainerState,
-  MosaicScrollController,
-  MosaicTileProps,
-  MosaicTileState,
-  MosaicPlaceholderProps,
+  MosaicDragHandleProps,
   MosaicDropIndicatorProps,
+  MosaicPlaceholderProps,
+  MosaicResizeHandleProps,
+  MosaicRootProps,
+  MosaicScrollController,
   MosaicStackProps,
   MosaicStackTileComponent,
+  MosaicTileProps,
+  MosaicTileState,
 };
 
 export {

package/src/components/Mosaic/Placeholder.tsx

@@ -82,6 +82,8 @@ const MosaicPlaceholder = <Location extends LocationType = LocationType>({
         const data = getSourceData(source);
         return (data && eventHandler.canDrop?.({ source: data })) || false;
       },
+      // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+      getDropEffect: () => 'move',
       onDragEnter: () => {
         setActiveLocation(data.location);
       },
@@ -134,6 +136,6 @@ MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
 // Exports
 //
 
-export { MosaicPlaceholder, MosaicDropIndicator };
+export { MosaicDropIndicator, MosaicPlaceholder };
 
-export type { MosaicPlaceholderProps, MosaicDropIndicatorProps };
+export type { MosaicDropIndicatorProps, MosaicPlaceholderProps };

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

@@ -0,0 +1,119 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Mosaic, type MosaicTileProps } from './Mosaic';
+
+type Item = { id: string; label: string };
+
+const ITEMS: Item[] = Array.from({ length: 6 }, (_, index) => ({ id: `tile-${index}`, label: `Tile ${index + 1}` }));
+
+const DEFAULT_HORIZONTAL: Size = 24;
+const DEFAULT_VERTICAL: Size = 8;
+
+// Per-axis resize bounds (rem) declared on the tile.
+const BOUNDS = {
+  horizontal: {
+    minSize: 12,
+    maxSize: 40,
+  },
+  vertical: {
+    minSize: 4,
+    maxSize: 16,
+  },
+} as const;
+
+type ResizableTileProps = MosaicTileProps<Item> & {
+  onResize: (id: string, size: Size) => void;
+};
+
+const ResizableTile = ({ data, size, onResize, ...tileProps }: ResizableTileProps) => {
+  const handleSizeChange = useCallback((next: Size) => onResize(data.id, next), [data.id, onResize]);
+
+  return (
+    <Mosaic.Tile
+      {...tileProps}
+      classNames='flex flex-col p-2 m-1 border border-separator rounded-sm bg-base-surface overflow-hidden'
+      data={data}
+      size={size}
+      onSizeChange={handleSizeChange}
+    >
+      <div className='font-medium'>{data.label}</div>
+      <div className='text-xs text-description'>{typeof size === 'number' ? `${size}rem` : 'intrinsic'}</div>
+      <Mosaic.ResizeHandle />
+    </Mosaic.Tile>
+  );
+};
+
+const DefaultStory = ({ orientation = 'vertical' }: { orientation?: Axis }) => {
+  const initial = orientation === 'horizontal' ? DEFAULT_HORIZONTAL : DEFAULT_VERTICAL;
+  const [viewport, setViewport] = useState<HTMLElement | null>(null);
+  const [sizes, setSizes] = useState<Record<string, Size>>(() =>
+    Object.fromEntries(ITEMS.map((item) => [item.id, initial])),
+  );
+
+  const handleSizeChange = useCallback((id: string, size: Size) => setSizes((prev) => ({ ...prev, [id]: size })), []);
+
+  const bounds = BOUNDS[orientation];
+  const Tile = useMemo(
+    () => (tileProps: MosaicTileProps<Item>) => (
+      <ResizableTile {...tileProps} {...bounds} size={sizes[tileProps.data.id]} onResize={handleSizeChange} />
+    ),
+    [sizes, handleSizeChange, bounds],
+  );
+
+  return (
+    <Mosaic.Root>
+      <Mosaic.Container
+        asChild
+        orientation={orientation}
+        autoScroll={viewport}
+        eventHandler={{ id: 'resize-demo', canDrop: () => false }}
+      >
+        <ScrollArea.Root orientation={orientation}>
+          <ScrollArea.Viewport ref={setViewport}>
+            <Mosaic.Stack
+              orientation={orientation}
+              getId={(item) => item.id}
+              items={ITEMS}
+              draggable={false}
+              Tile={Tile}
+            />
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+      </Mosaic.Container>
+    </Mosaic.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-mosaic/ResizeHandle',
+  decorators: [withLayout({ layout: 'fullscreen' }), withTheme()],
+  render: (args) => <DefaultStory {...args} />,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+};

package/src/components/Mosaic/ResizeHandle.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { ResizeHandle } from '@dxos/react-ui-dnd';
+
+import { useMosaicContainerContext } from './Container';
+import { useMosaicTileContext } from './Tile';
+
+const MOSAIC_RESIZE_HANDLE_NAME = 'Mosaic.ResizeHandle';
+
+// Lower bounds for a tile's extent (rem); below these the content stops being usable.
+const MIN_WIDTH = 20;
+const MIN_HEIGHT = 3;
+// Extent assumed when the subject hasn't been measured yet (matches the deck plank default).
+const DEFAULT_EXTRINSIC_SIZE = 50;
+
+export type MosaicResizeHandleProps = {
+  /** Lower bound in rem; overrides the tile's `minSize`, else a sensible per-axis minimum. */
+  minSize?: number;
+  /** Upper bound in rem; overrides the tile's `maxSize`. */
+  maxSize?: number;
+  /** Extent assumed before the subject is first measured. */
+  fallbackSize?: number;
+};
+
+/**
+ * Edge affordance that resizes the enclosing {@link MosaicTile}. The axis tracks the container
+ * orientation (width when horizontal, height when vertical); the tile must be given a `size` so the
+ * dragged extent is reflected and persisted via its `onSizeChange`. Resize bounds default to the
+ * tile's `minSize`/`maxSize` and can be overridden per handle.
+ */
+export const MosaicResizeHandle = ({
+  minSize,
+  maxSize,
+  fallbackSize = DEFAULT_EXTRINSIC_SIZE,
+}: MosaicResizeHandleProps) => {
+  const { orientation = 'vertical' } = useMosaicContainerContext(MOSAIC_RESIZE_HANDLE_NAME);
+  const { size, setSize, minSize: tileMinSize, maxSize: tileMaxSize } = useMosaicTileContext(MOSAIC_RESIZE_HANDLE_NAME);
+  const horizontal = orientation === 'horizontal';
+
+  return (
+    <ResizeHandle
+      side={horizontal ? 'inline-end' : 'block-end'}
+      fallbackSize={fallbackSize}
+      minSize={minSize ?? tileMinSize ?? (horizontal ? MIN_WIDTH : MIN_HEIGHT)}
+      maxSize={maxSize ?? tileMaxSize}
+      size={size}
+      onSizeChange={setSize}
+    />
+  );
+};
+
+MosaicResizeHandle.displayName = MOSAIC_RESIZE_HANDLE_NAME;

package/src/components/Mosaic/Root.tsx

@@ -137,6 +137,8 @@ const MosaicRoot = forwardRef<HTMLDivElement, MosaicRootProps>(({ children, asCh
     // Main controller.
     return combine(
       monitorForElements({
+        // Only monitor Mosaic tile drags; other pragmatic-dnd sources under this root are not ours to handle.
+        canMonitor: ({ source }) => source.data.type === 'tile',
         /**
          * Dragging started within any container.
          */
@@ -283,4 +285,4 @@ MosaicRoot.displayName = MOSAIC_ROOT_NAME;
 
 export { MosaicRoot, useMosaicRootContext };
 
-export type { MosaicRootProps, MosaicDraggingState };
+export type { MosaicDraggingState, MosaicRootProps };

package/src/components/Mosaic/Stack.tsx

@@ -6,12 +6,14 @@ import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { type ReactVirtualizerOptions, useVirtualizer } from '@tanstack/react-virtual';
 import React, {
   type FC,
-  forwardRef,
   Fragment,
   type ReactElement,
   type Ref,
+  forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
+  useMemo,
   useRef,
 } from 'react';
 
@@ -87,10 +89,29 @@ const MosaicStackInner = composable<HTMLDivElement, MosaicStackProps>(
       currentId,
       selectedIds,
       registerScrollTo,
+      setActiveLocation,
     } = useMosaicContainerContext(MOSAIC_STACK_NAME);
     const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
     invariant(orientation === 'vertical' || orientation === 'horizontal', `Invalid orientation: ${orientation}`);
 
+    // Reserve the dragged item's slot the instant it leaves `visibleItems`. The source is removed a frame
+    // before any placeholder becomes active (the pointer still sits over the source, so no `onDragEnter`
+    // has fired), which collapses the stack by the item's height and flickers the following tiles upward.
+    // Activating the source-slot placeholder (location `index + 0.5`) in a layout effect fills the gap in
+    // the same commit, before paint.
+    const draggingSource = dragging?.source.data;
+    const sourceIndex = useMemo(() => {
+      if (!items || !draggingSource || draggingSource.containerId !== id) {
+        return -1;
+      }
+      return items.findIndex((item) => getId(item) === draggingSource.id);
+    }, [items, draggingSource, id, getId]);
+    useLayoutEffect(() => {
+      if (sourceIndex >= 0) {
+        setActiveLocation(sourceIndex + 0.5);
+      }
+    }, [sourceIndex, setActiveLocation]);
+
     const rootRef = useRef<HTMLDivElement>(null);
     const scrollToId = useCallback(
       (targetId: string) => {
@@ -353,4 +374,4 @@ InternalPlaceholder.displayName = 'InternalPlaceholder';
 
 export { MosaicStack, MosaicVirtualStack };
 
-export type { MosaicStackTileComponent, MosaicStackProps, MosaicVirtualStackProps };
+export type { MosaicStackProps, MosaicStackTileComponent, MosaicVirtualStackProps };