@dxos/react-ui-mosaic 0.8.4-main.fcfe5033a5 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-mosaic",
-  "version": "0.8.4-main.fcfe5033a5",
+  "version": "0.9.0",
   "description": "Modular UI components.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,10 +8,13 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -30,19 +33,15 @@
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "playwright": [
-        "dist/types/src/playwright/index.d.ts"
-      ],
-      "testing": [
-        "dist/types/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -52,9 +51,10 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "3.2.10",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.4",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
     "@fluentui/react-tabster": "9.26.11",
+    "@playwright/test": "1.57.0",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-primitive": "2.0.2",
@@ -62,44 +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.8.4-main.fcfe5033a5",
-    "@dxos/invariant": "0.8.4-main.fcfe5033a5",
-    "@dxos/keys": "0.8.4-main.fcfe5033a5",
-    "@dxos/react-client": "0.8.4-main.fcfe5033a5",
-    "@dxos/log": "0.8.4-main.fcfe5033a5",
-    "@dxos/echo": "0.8.4-main.fcfe5033a5",
-    "@dxos/react-ui-menu": "0.8.4-main.fcfe5033a5",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fcfe5033a5",
-    "@dxos/react-ui-dnd": "0.8.4-main.fcfe5033a5",
-    "@dxos/util": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5"
+    "@dxos/async": "0.9.0",
+    "@dxos/keys": "0.9.0",
+    "@dxos/echo": "0.9.0",
+    "@dxos/log": "0.9.0",
+    "@dxos/react-client": "0.9.0",
+    "@dxos/invariant": "0.9.0",
+    "@dxos/react-ui-dnd": "0.9.0",
+    "@dxos/react-ui-attention": "0.9.0",
+    "@dxos/react-ui-list": "0.9.0",
+    "@dxos/react-ui-menu": "0.9.0",
+    "@dxos/react-ui-search": "0.9.0",
+    "@dxos/ui-theme": "0.9.0",
+    "@dxos/react-ui-syntax-highlighter": "0.9.0",
+    "@dxos/util": "0.9.0"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/react-ui": "0.8.4-main.fcfe5033a5",
-    "@dxos/random": "0.8.4-main.fcfe5033a5",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fcfe5033a5",
-    "@dxos/echo-atom": "0.8.4-main.fcfe5033a5",
-    "@dxos/schema": "0.8.4-main.fcfe5033a5",
-    "@dxos/storybook-utils": "0.8.4-main.fcfe5033a5",
-    "@dxos/types": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5",
-    "@dxos/test-utils": "0.8.4-main.fcfe5033a5"
+    "vite": "^8.0.16",
+    "@dxos/random": "0.9.0",
+    "@dxos/react-ui": "0.9.0",
+    "@dxos/schema": "0.9.0",
+    "@dxos/test-utils": "0.9.0",
+    "@dxos/react-ui-syntax-highlighter": "0.9.0",
+    "@dxos/types": "0.9.0",
+    "@dxos/ui-theme": "0.9.0",
+    "@dxos/storybook-utils": "0.9.0"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5",
-    "@dxos/random": "0.8.4-main.fcfe5033a5"
+    "@dxos/random": "0.9.0",
+    "@dxos/react-ui": "0.9.0",
+    "@dxos/ui-theme": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -8,7 +8,6 @@ import React, { useContext, useMemo } from 'react';
 import { expect, within } from 'storybook/test';
 
 import { type Database, Filter, Obj, Ref } from '@dxos/echo';
-import { AtomObj, AtomQuery } from '@dxos/echo-atom';
 import { invariant } from '@dxos/invariant';
 import { random } from '@dxos/random';
 import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
@@ -16,9 +15,10 @@ import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
 import { mx } from '@dxos/ui-theme';
 
+import { translations } from '#translations';
+
 import { useEventHandlerAdapter } from '../../hooks';
 import { TestColumn, TestItem } from '../../testing';
-import { translations } from '../../translations';
 import { Focus } from '../Focus';
 import { Mosaic, type MosaicEventHandler } from '../Mosaic';
 import { Board, type BoardModel } from './Board';
@@ -72,14 +72,15 @@ const useTestBoardModel = (): TestBoardModelResult => {
     const orderAtom = Atom.make<string[]>([]);
 
     // Source of truth for which columns exist; subscribed to ECHO query.
-    const columnsAtom =
-      space?.db != null ? AtomQuery.make(space.db, Filter.type(TestColumn)) : Atom.make<TestColumn[]>([]);
+    const columnsAtom = space?.db != null ? space.db.query(Filter.type(TestColumn)).atom : Atom.make<TestColumn[]>([]);
 
     // If orderAtom is empty, use Echo order as-is; else sort by orderAtom and append new columns.
     const orderedColumnsAtom = Atom.make((get) => {
       const cols = get(columnsAtom);
       const order = get(orderAtom);
-      if (order.length === 0) return cols;
+      if (order.length === 0) {
+        return cols;
+      }
       const byId = new Map(cols.map((column) => [getColumnId(column), column]));
       const ordered = order.map((id) => byId.get(id)).filter((column): column is TestColumn => column != null);
       const appended = cols.filter((column) => !order.includes(getColumnId(column)));
@@ -90,10 +91,10 @@ const useTestBoardModel = (): TestBoardModelResult => {
       space?.db != null
         ? Atom.family((column: TestColumn) =>
             Atom.make((get) => {
-              const refs = get(AtomObj.makeProperty(column, 'items'));
+              const refs = get(Obj.atomProperty(column, 'items'));
               return (
                 refs
-                  ?.map((ref: Ref.Ref<TestItem>) => get(AtomObj.makeWithReactive(ref)))
+                  ?.map((ref: Ref.Ref<TestItem>) => get(Obj.atomReactive(ref)))
                   .filter((item): item is TestItem => item != null) ?? []
               );
             }),
@@ -118,14 +119,14 @@ const useTestBoardModel = (): TestBoardModelResult => {
           }),
         );
 
-        Obj.change(column, (column) => {
+        Obj.update(column, (column) => {
           column.items.push(Ref.make(item));
         });
 
         return item;
       },
       onItemDelete: (column: TestColumn, current: TestItem) => {
-        Obj.change(column, (column) => {
+        Obj.update(column, (column) => {
           if (!column.items) {
             return;
           }
@@ -172,7 +173,7 @@ const DefaultStory = ({ debug = false, columns: columnsProp = 0 }: DefaultStoryP
 
   return (
     <Mosaic.Root asChild debug={debug}>
-      <div role='none' className={mx('grid md:p-2 overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}>
+      <div className={mx('grid md:p-2 overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}>
         <Board.Root model={model}>
           <Board.Content id='board' debug={debug} eventHandler={eventHandler} Tile={DefaultBoardColumn} />
         </Board.Root>

package/src/components/Board/Board.tsx

@@ -14,8 +14,9 @@ import React, {
 } from 'react';
 
 import { ScrollArea, type ThemedClassName } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { composable, composableProps } from '@dxos/react-ui';
+import { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/ui-theme';
 
 import { useContainerDebug } from '../../hooks';
 import { Focus } from '../Focus';
@@ -162,7 +163,7 @@ export const BoardDebug = forwardRef<HTMLDivElement, ThemedClassName>(({ classNa
   const { containers, dragging } = useMosaic(BOARD_DEBUG_NAME);
   const counter = useRef(0);
   return (
-    <Json.Data
+    <JsonHighlighter
       data={{ containers, dragging, count: counter.current++ }}
       classNames={mx('text-xs', classNames)}
       ref={forwardedRef}

package/src/components/Board/Column.tsx

@@ -8,21 +8,21 @@ import React, {
   type PropsWithChildren,
   type ReactElement,
   type Ref as ReactRef,
-  type RefObject,
   forwardRef,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
 import { useObject } from '@dxos/react-client/echo';
 import { IconButton, ScrollArea, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
+
+import { translationKey } from '#translations';
 
 import { useContainerDebug, useEventHandlerAdapter } from '../../hooks';
-import { translationKey } from '../../translations';
 import { Focus } from '../Focus';
 import { Mosaic, type MosaicContainerProps, type MosaicStackProps, type MosaicTileProps } from '../Mosaic';
 import { useBoard } from './Board';
@@ -49,7 +49,10 @@ export function useBoardColumn<TColumn = unknown>(): TColumn | undefined {
   return value?.column as TColumn | undefined;
 }
 
-type BoardColumnProps<TColumn = any> = Pick<MosaicTileProps<TColumn>, 'classNames' | 'location' | 'data' | 'debug'>;
+type BoardColumnProps<TColumn = any> = Pick<
+  MosaicTileProps<TColumn>,
+  'classNames' | 'location' | 'data' | 'debug' | 'draggable'
+>;
 
 //
 // Column Root
@@ -58,17 +61,16 @@ type BoardColumnProps<TColumn = any> = Pick<MosaicTileProps<TColumn>, 'className
 const BOARD_COLUMN_ROOT_NAME = 'Board.Column.Root';
 
 type BoardColumnRootProps<TColumn = any> = PropsWithChildren<BoardColumnProps<TColumn>> & {
-  dragHandleRef?: RefObject<HTMLButtonElement | null>;
+  // Pass the actual button element (not a ref). Refs don't trigger re-renders, so reading
+  // `ref.current` at render time leaves Mosaic.Tile's `dragHandle` prop null forever.
+  // Consumers should track this with `useState` and a callback ref on `Board.Column.Header`.
+  dragHandle?: HTMLButtonElement | null;
 };
 
 const BoardColumnRootInner = composable<HTMLDivElement, BoardColumnRootProps>(
-  ({ classNames, children, location, data, debug, dragHandleRef: dragHandleRefProp, ...rest }, forwardedRef) => {
+  ({ classNames, children, location, data, debug, draggable, dragHandle, ...rest }, forwardedRef) => {
     const { model } = useBoard(BOARD_COLUMN_ROOT_NAME);
 
-    // TODO(burdon): Use merge ref hook (see react-hooks).
-    const internalRef = useRef<HTMLButtonElement>(null);
-    const dragHandleRef = dragHandleRefProp ?? internalRef;
-
     return (
       <Mosaic.Tile
         asChild
@@ -76,7 +78,8 @@ const BoardColumnRootInner = composable<HTMLDivElement, BoardColumnRootProps>(
         id={model.getColumnId(data)}
         data={data}
         debug={debug}
-        dragHandle={dragHandleRef.current}
+        draggable={draggable}
+        dragHandle={dragHandle}
       >
         <Focus.Group
           {...rest}
@@ -239,16 +242,16 @@ const BOARD_DEFAULT_COLUMN_NAME = 'Board.DefaultColumn';
 type DefaultBoardColumnProps = BoardColumnProps & Pick<BoardColumnBodyProps, 'Tile'>;
 
 const DefaultBoardColumn = forwardRef<HTMLDivElement, DefaultBoardColumnProps>(
-  ({ classNames, location, data, debug, Tile = BoardItem }, forwardedRef) => {
+  ({ classNames, location, data, debug, draggable, Tile = BoardItem }, forwardedRef) => {
     const { model } = useBoard(BOARD_DEFAULT_COLUMN_NAME);
     const [DebugInfo, debugHandler] = useContainerDebug(debug);
-    const dragHandleRef = useRef<HTMLButtonElement>(null);
+    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
     const [column, updateColumn] = useObject(data);
 
     const eventHandler = useEventHandlerAdapter<Ref.Unknown>({
       id: model.getColumnId(data),
       items: column?.items ?? [],
-      getId: (ref) => ref.target?.id ?? ref.dxn.toString(),
+      getId: (ref) => ref.target?.id ?? ref.uri,
       get: (refOrObj) => (Ref.isRef(refOrObj) ? refOrObj.target! : refOrObj),
       make: (object) => Ref.make(object),
       canDrop: ({ source }) => {
@@ -269,12 +272,13 @@ const DefaultBoardColumn = forwardRef<HTMLDivElement, DefaultBoardColumnProps>(
         )}
         location={location}
         data={data}
-        dragHandleRef={dragHandleRef}
+        draggable={draggable}
+        dragHandle={dragHandle}
         ref={forwardedRef}
       >
-        <BoardColumnHeader label={Obj.getLabel(data) ?? data.id} dragHandleRef={dragHandleRef} />
+        <BoardColumnHeader label={Obj.getLabel(data) ?? data.id} dragHandleRef={setDragHandle} />
         <BoardColumnBody data={data} eventHandler={eventHandler} debug={debugHandler} Tile={Tile} />
-        <div role='none' className='flex flex-col col-span-full'>
+        <div className='flex flex-col col-span-full'>
           <BoardColumnFooter data={data} />
           <DebugInfo />
         </div>

package/src/components/Board/Item.tsx

@@ -3,14 +3,15 @@
 //
 
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import React, { type ReactElement, type Ref as ReactRef, forwardRef, useMemo, useRef } from 'react';
+import React, { type ReactElement, type Ref as ReactRef, forwardRef, useMemo, useRef, useState } from 'react';
 
 import { Obj } from '@dxos/echo';
 import { Card, Tag, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
 import { getHashStyles } from '@dxos/ui-theme';
 
-import { translationKey } from '../../translations';
+import { translationKey } from '#translations';
+
 import { Focus } from '../Focus';
 import { Mosaic, type MosaicTileProps } from '../Mosaic';
 import { useBoard } from './Board';
@@ -20,15 +21,17 @@ const BOARD_ITEM_NAME = 'Board.Item';
 
 type BoardItemProps<TItem extends Obj.Unknown = any> = Pick<
   MosaicTileProps<TItem>,
-  'classNames' | 'location' | 'data' | 'debug'
+  'classNames' | 'location' | 'data' | 'debug' | 'draggable'
 >;
 
 const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
-  ({ classNames, data, location, debug }, forwardedRef) => {
+  ({ classNames, data, location, debug, draggable }, forwardedRef) => {
     const { t } = useTranslation(translationKey);
     const rootRef = useRef<HTMLDivElement>(null);
     const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
-    const dragHandleRef = useRef<HTMLButtonElement>(null);
+    // Use state (callback ref) so the dragHandle prop updates when the button mounts.
+    // Refs don't trigger re-renders, so reading `.current` at render time leaves the prop null.
+    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
 
     const { model } = useBoard(BOARD_ITEM_NAME);
     const column = useBoardColumn();
@@ -57,7 +60,8 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
         <Mosaic.Tile
           ref={rootRef}
           asChild
-          dragHandle={dragHandleRef.current}
+          draggable={draggable}
+          dragHandle={dragHandle}
           id={data.id}
           data={data}
           location={location}
@@ -70,8 +74,8 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
               ref={composedRef}
               onClick={(event) => event.currentTarget.focus()}
             >
-              <Card.Toolbar>
-                <Card.DragHandle ref={dragHandleRef} testId='mosaicBoard.cardDragHandle' />
+              <Card.Header>
+                <Card.DragHandle ref={setDragHandle} testId='mosaicBoard.cardDragHandle' />
                 <Card.Title data-testid='mosaicBoard.cardTitle'>{label}</Card.Title>
                 {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
                 <Menu.Trigger asChild disabled={!items?.length}>
@@ -83,14 +87,14 @@ const BoardItemInner = forwardRef<HTMLDivElement, BoardItemProps>(
                   />
                 </Menu.Trigger>
                 <Menu.Content items={items} />
-              </Card.Toolbar>
+              </Card.Header>
               {/* TODO(burdon): Replace with surface. */}
               <Card.Row icon='ph--note--regular' classNames='text-description'>
                 <Card.Text>{description}</Card.Text>
               </Card.Row>
               <Card.Row icon='ph--tag--regular'>
                 {label && (
-                  <div role='none' className='shrink-0 flex gap-1 items-center text-xs'>
+                  <div className='shrink-0 flex gap-1 items-center text-xs'>
                     <Tag palette={getHashStyles(label).hue}>{label}</Tag>
                   </div>
                 )}

package/src/components/Mosaic/Container.tsx

@@ -21,8 +21,7 @@ import React, {
   useState,
 } from 'react';
 
-import { type AllowedAxis } from '@dxos/react-ui';
-import { composable, composableProps } from '@dxos/ui-theme';
+import { type AllowedAxis, composable, composableProps } from '@dxos/react-ui';
 import { isTruthy } from '@dxos/util';
 
 import { useFocus } from '../Focus';
@@ -60,6 +59,11 @@ type MosaicContainerContextValue<TData = any, Location = LocationType> = {
   /** 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;
 };
@@ -86,6 +90,10 @@ type MosaicContainerProps = PropsWithChildren<
     currentId?: string;
     /** Called when a tile requests to become current. */
     onCurrentChange?: (id: string | undefined) => void;
+    /** Controlled set of selected item IDs. */
+    selectedIds?: ReadonlySet<string>;
+    /** Called when a tile requests to toggle selection. */
+    onSelectionChange?: (id: string, selected: boolean) => void;
     debug?: () => ReactNode;
   }
 >;
@@ -102,6 +110,8 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
       withFocus,
       currentId,
       onCurrentChange,
+      selectedIds,
+      onSelectionChange,
       debug,
       ...props
     },
@@ -126,6 +136,10 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
     const [activeLocation, setActiveLocation] = useState<LocationType | undefined>();
     const [scrolling, setScrolling] = useState(false);
     const setCurrentId = useCallback((id: string | undefined) => onCurrentChange?.(id), [onCurrentChange]);
+    const setSelected = useCallback(
+      (id: string, selected: boolean) => onSelectionChange?.(id, selected),
+      [onSelectionChange],
+    );
 
     // Scroll-to-item: Stack/VirtualStack registers its implementation.
     const scrollToRef = useRef<((id: string) => void) | undefined>(undefined);
@@ -283,6 +297,8 @@ const MosaicContainer = composable<HTMLDivElement, MosaicContainerProps>(
         setActiveLocation={setActiveLocation}
         currentId={currentId}
         setCurrentId={setCurrentId}
+        selectedIds={selectedIds}
+        setSelected={setSelected}
         registerScrollTo={registerScrollTo}
       >
         <Comp

package/src/components/Mosaic/Placeholder.tsx

@@ -30,6 +30,11 @@ const MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = 'mosaic-placeholder-orientation';
 // State attribute: data-[mosaic-placeholder-state=active]
 const MOSAIC_PLACEHOLDER_STATE_ATTR = 'mosaic-placeholder-state';
 
+// Location attribute: data-[mosaic-placeholder-location=0.5]. Identifies the
+// placeholder's slot in its container (0.5, 1.5, 2.5, …) so tests can target
+// a specific gap unambiguously without relying on layout-dependent indices.
+const MOSAIC_PLACEHOLDER_LOCATION_ATTR = 'mosaic-placeholder-location';
+
 type MosaicPlaceholderProps<Location = LocationType> = ThemedClassName<
   PropsWithChildren<{
     asChild?: boolean;
@@ -94,6 +99,7 @@ const MosaicPlaceholder = <Location extends LocationType = LocationType>({
       {...{
         [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
         [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? 'active' : 'idle',
+        [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
       }}
       role='none'
       className={mx('relative', classNames)}

package/src/components/Mosaic/Stack.tsx

@@ -16,8 +16,8 @@ import React, {
 } from 'react';
 
 import { invariant } from '@dxos/invariant';
-import { type Axis, type ThemedClassName } from '@dxos/react-ui';
-import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { type Axis, type ThemedClassName, composable, composableProps } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
 import { useVisibleItems } from '../../hooks';
 import { useMosaicContainerContext } from './Container';
@@ -85,6 +85,7 @@ const MosaicStackInner = composable<HTMLDivElement, MosaicStackProps>(
       orientation = orientationProp,
       dragging,
       currentId,
+      selectedIds,
       registerScrollTo,
     } = useMosaicContainerContext(MOSAIC_STACK_NAME);
     const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
@@ -130,6 +131,7 @@ const MosaicStackInner = composable<HTMLDivElement, MosaicStackProps>(
               location={index + 1}
               draggable={draggable}
               current={getId(item) === currentId}
+              selected={selectedIds?.has(getId(item))}
               debug={debug}
             />
             {draggable && <InternalPlaceholder orientation={orientation} location={index + 1.5} />}
@@ -178,7 +180,8 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
     forwardedRef,
   ) => {
     invariant(Tile);
-    const { id, dragging, currentId, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
+    const { id, dragging, currentId, selectedIds, registerScrollTo } =
+      useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
     const visibleItems = useVisibleItems({ id, items, dragging: dragging?.source.data, getId });
     // In draggable mode virtual indices alternate: even=placeholder, odd=tile.
     // Wrap estimateSize so placeholders get 0 (their actual negligible height) and
@@ -193,6 +196,10 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
       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,
+      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.
       getItemKey: draggable
@@ -213,10 +220,16 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
           }
 
           const virtualIndex = draggable ? itemIndex * 2 + 1 : itemIndex;
-          virtualizer.scrollToIndex(virtualIndex, { align: 'start', behavior: 'smooth' });
+          // Align to the item's start, but offset by the inter-item `gap` so the tile lands
+          // one gap below the viewport edge rather than flush against it (a plain
+          // `scrollToIndex({ align: 'start' })` scrolls the preceding gap out of view).
+          const [offset] = virtualizer.getOffsetForIndex(virtualIndex, 'start') ?? [];
+          if (offset != null) {
+            virtualizer.scrollToOffset(Math.max(0, offset - (gap ?? 0)), { behavior: 'smooth' });
+          }
         }
       },
-      [visibleItems, getId, draggable, virtualizer, scrollIntoView],
+      [visibleItems, getId, draggable, virtualizer, scrollIntoView, gap],
     );
 
     useEffect(() => {
@@ -293,6 +306,7 @@ const MosaicVirtualStackInner = forwardRef<HTMLDivElement, MosaicVirtualStackPro
                   location={location}
                   draggable={draggable}
                   current={getId(data) === currentId}
+                  selected={selectedIds?.has(getId(data))}
                   debug={debug}
                 />
               ) : (
@@ -311,6 +325,7 @@ MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
 const MosaicVirtualStack = MosaicVirtualStackInner as <TData = any>(
   props: MosaicVirtualStackProps<TData> & { ref?: Ref<HTMLDivElement> },
 ) => ReactElement;
+
 (MosaicVirtualStack as any)[Symbol.for('dxos.composable')] = true;
 
 //

package/src/components/Mosaic/Tile.tsx

@@ -24,7 +24,7 @@ import React, { type PropsWithChildren, useLayoutEffect, useMemo, useRef, useSta
 import { createPortal } from 'react-dom';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { composableProps, slottable } from '@dxos/ui-theme';
+import { composableProps, slottable } from '@dxos/react-ui';
 
 import { useMosaicContainerContext } from './Container';
 import { type LocationType, type MosaicTileData, getSourceData } from './types';
@@ -61,6 +61,8 @@ type MosaicTileProps<TData = any, TLocation = LocationType> = ThemedClassName<
     draggable?: boolean;
     /** Whether this tile is the current (aria-current) item. */
     current?: boolean;
+    /** Whether this tile is selected (aria-selected). */
+    selected?: boolean;
     debug?: boolean;
   }>
 >;
@@ -76,7 +78,8 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
       id,
       data: dataProp,
       draggable: draggableProp,
-      current: _current,
+      current,
+      selected,
       debug: _,
       ...props
     },
@@ -211,6 +214,12 @@ const MosaicTile = slottable<HTMLDivElement, MosaicTileProps>(
             [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
           }}
           role='listitem'
+          // Pair `current` / `selected` props with `aria-current` / `aria-selected`
+          // so the `dx-current` / `dx-selected` / `dx-hover` utilities (which key
+          // off those attributes) actually fire. Without this the props are purely
+          // advisory and the corresponding styling silently no-ops.
+          aria-current={current ? 'true' : undefined}
+          aria-selected={selected ? 'true' : undefined}
           className={className}
           ref={composedRef}
         >

package/src/components/Mosaic/extension.ts

@@ -123,7 +123,7 @@ const dropField = StateField.define<DecorationSet>({
               toDOM() {
                 const dom = document.createElement('span');
                 dom.className = 'cm-drop-cursor';
-                dom.style.borderLeft = '2px solid var(--color-accent-surface)';
+                dom.style.borderLeft = '2px solid var(--color-accent-bg)';
                 dom.style.display = 'inline-block';
                 dom.style.height = '1em';
                 dom.style.verticalAlign = 'middle';