@dxos/react-ui-mosaic 0.9.0 → 0.9.1-staging.ee54ba693a

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/testing/decorator.tsx", "../../../../src/testing/types.ts", "../../../../src/testing/CardContainer.tsx", "../../../../src/testing/DefaultStackTile.tsx"],
-  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n  return (Story) => (\n    <Mosaic.Root>\n      <Story />\n    </Mosaic.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { DXN, Ref, Type } from '@dxos/echo';\nimport { EntityId } from '@dxos/keys';\n\n//\n// Test Data\n//\n\nexport const TestItem = Schema.Struct({\n  name: Schema.String,\n  description: Schema.optional(Schema.String),\n  label: Schema.optional(Schema.String),\n}).pipe(Type.makeObject(DXN.make('com.example.type.item', '0.1.0')));\n\nexport type TestItem = Type.InstanceType<typeof TestItem>;\n\nexport const TestColumn = Schema.Struct({\n  id: EntityId,\n  name: Schema.String,\n  items: Schema.mutable(Schema.Array(Ref.Ref(TestItem))),\n}).pipe(Type.makeObject(DXN.make('com.example.type.column', '0.1.0')));\n\nexport type TestColumn = Type.InstanceType<typeof TestColumn>;\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport type CardContainerProps = PropsWithChildren<{ role?: 'popover' | 'intrinsic'; icon?: string }>;\n\nexport const CardContainer = ({ children, role, icon = 'ph--arrow-line-down--regular' }: CardContainerProps) => {\n  switch (role) {\n    case 'popover':\n      return (\n        <div className='flex justify-center'>\n          <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>\n        </div>\n      );\n    case 'intrinsic':\n    default:\n      return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n  }\n};\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--arrow-line-down--regular',\n}: PopoverCardContainerProps) => {\n  return (\n    <Popover.Root open>\n      <Popover.Trigger asChild>\n        <Icon icon={icon} />\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content onOpenAutoFocus={(event: Event) => event.preventDefault()}>\n          <Popover.Viewport classNames='dx-card-popover'>{children}</Popover.Viewport>\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n//\n// Intrinsic card container (size constrained by card itself).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      className='relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      <div className='dx-container flex flex-col'>{children}</div>\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo, useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Card, Toolbar } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Focus, Mosaic, type MosaicStackTileComponent } from '../components';\n\nexport const DefaultStackTile: MosaicStackTileComponent<Obj.Any> = (props) => {\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  const menuItems = useMemo(\n    () => [\n      createMenuAction('toggle-details', () => setOpen((prev) => !prev), {\n        label: open ? 'Hide details' : 'Show details',\n        icon: 'ph--circle-dashed--regular',\n      }),\n    ],\n    [open],\n  );\n\n  return (\n    <Menu.Root>\n      {/*\n       * `Mosaic.Tile` sets `aria-current` from `props.current`, which the\n       * Slot composition propagates down to `Card.Root`'s div. That's what\n       * makes `dx-current` (an `aria-[current=true]:` utility) actually\n       * fire here. See `ui-theme/src/css/components/selected.md`.\n       */}\n      <Mosaic.Tile {...props} asChild>\n        <Focus.Item asChild>\n          <Card.Root className='dx-current dx-hover'>\n            <Card.Header>\n              <Card.DragHandle ref={dragHandleRef} />\n              <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n              <Menu.Trigger asChild disabled={!menuItems?.length}>\n                <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />\n              </Menu.Trigger>\n              <Menu.Content items={menuItems} />\n            </Card.Header>\n            {open && (\n              <Card.Row>\n                <JsonHighlighter data={props.data} classNames='text-xs' />\n              </Card.Row>\n            )}\n          </Card.Root>\n        </Focus.Item>\n      </Mosaic.Tile>\n    </Menu.Root>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
-  "mappings": "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",
-  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "Schema", "DXN", "Ref", "Type", "EntityId", "TestItem", "Struct", "name", "String", "description", "optional", "label", "pipe", "makeObject", "make", "TestColumn", "id", "items", "mutable", "Array", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "role", "icon", "div", "className", "PopoverCardContainer", "IntrinsicCardContainer", "Root", "open", "Trigger", "asChild", "Portal", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "prop", "defaultProp", "onChange", "style", "side", "fallbackSize", "minSize", "React", "useMemo", "useRef", "useState", "Obj", "Card", "Toolbar", "Menu", "createMenuAction", "JsonHighlighter", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "menuItems", "useMemo", "createMenuAction", "prev", "label", "icon", "React", "Menu", "Root", "Mosaic", "Tile", "asChild", "Focus", "Item", "Card", "className", "Header", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Trigger", "disabled", "length", "Toolbar", "IconButton", "iconOnly", "variant", "Content", "items", "Row", "JsonHighlighter", "classNames", "displayName"]
+  "sourcesContent": ["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react-vite';\nimport React from 'react';\n\nimport { Mosaic } from '../components';\n\nexport const withMosaic = (): Decorator => {\n  return (Story) => (\n    <Mosaic.Root>\n      <Story />\n    </Mosaic.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { DXN, Ref, Type } from '@dxos/echo';\nimport { EntityId } from '@dxos/keys';\n\n//\n// Test Data\n//\n\nexport class TestItem extends Type.makeObject<TestItem>(DXN.make('com.example.type.item', '0.1.0'))(\n  Schema.Struct({\n    name: Schema.String,\n    description: Schema.optional(Schema.String),\n    label: Schema.optional(Schema.String),\n  }),\n) {}\n\nexport class TestColumn extends Type.makeObject<TestColumn>(DXN.make('com.example.type.column', '0.1.0'))(\n  Schema.Struct({\n    id: EntityId,\n    name: Schema.String,\n    items: Schema.mutable(Schema.Array(Ref.Ref(TestItem))),\n  }),\n) {}\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { Icon, Popover } from '@dxos/react-ui';\nimport { ResizeHandle, type Size, resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';\n\nconst DEFAULT_BLOCK_SIZE = 22;\nconst MIN_BLOCK_SIZE = 8;\n\n//\n// Card container.\n//\n\nexport type CardContainerProps = PropsWithChildren<{ role?: 'popover' | 'intrinsic'; icon?: string }>;\n\nexport const CardContainer = ({ children, role, icon = 'ph--arrow-line-down--regular' }: CardContainerProps) => {\n  switch (role) {\n    case 'popover':\n      return (\n        <div className='flex justify-center'>\n          <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>\n        </div>\n      );\n    case 'intrinsic':\n    default:\n      return <IntrinsicCardContainer>{children}</IntrinsicCardContainer>;\n  }\n};\n\n//\n// Popover\n//\n\nexport type PopoverCardContainerProps = PropsWithChildren<{ icon?: string }>;\n\nexport const PopoverCardContainer = ({\n  children,\n  icon = 'ph--arrow-line-down--regular',\n}: PopoverCardContainerProps) => {\n  return (\n    <Popover.Root open>\n      <Popover.Trigger asChild>\n        <Icon icon={icon} />\n      </Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Content onOpenAutoFocus={(event: Event) => event.preventDefault()}>\n          <Popover.Viewport classNames='dx-card-popover'>{children}</Popover.Viewport>\n          <Popover.Arrow />\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n\n//\n// Intrinsic card container (size constrained by card itself).\n//\n\nexport type IntrinsicCardContainerProps = PropsWithChildren<{\n  defaultSize?: Size;\n  size?: Size;\n  onSizeChange?: (size: Size, commit?: boolean) => void;\n}>;\n\nexport const IntrinsicCardContainer = ({\n  children,\n  defaultSize,\n  size: propSize,\n  onSizeChange,\n}: IntrinsicCardContainerProps) => {\n  const [size = DEFAULT_BLOCK_SIZE, setSize] = useControllableState<Size>({\n    prop: propSize,\n    defaultProp: defaultSize,\n    onChange: onSizeChange,\n  });\n\n  return (\n    <div\n      className='relative p-2 grid overflow-hidden border-2 border-dashed border-green-500 rounded-lg'\n      style={sizeStyle(size, 'horizontal')}\n      {...resizeAttributes}\n    >\n      <div className='dx-container flex flex-col'>{children}</div>\n      <ResizeHandle\n        side='inline-end'\n        fallbackSize={DEFAULT_BLOCK_SIZE}\n        minSize={MIN_BLOCK_SIZE}\n        size={size}\n        onSizeChange={setSize}\n      />\n    </div>\n  );\n};\n", "//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { useMemo, useRef, useState } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { Card, IconButton } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';\n\nimport { Focus, Mosaic, type MosaicStackTileComponent } from '../components';\n\nexport const DefaultStackTile: MosaicStackTileComponent<Obj.Any> = (props) => {\n  const dragHandleRef = useRef<HTMLButtonElement>(null);\n  const [open, setOpen] = useState(false);\n  const menuItems = useMemo(\n    () => [\n      createMenuAction('toggle-details', () => setOpen((prev) => !prev), {\n        label: open ? 'Hide details' : 'Show details',\n        icon: 'ph--circle-dashed--regular',\n      }),\n    ],\n    [open],\n  );\n\n  return (\n    <Menu.Root>\n      {/*\n       * `Mosaic.Tile` sets `aria-current` from `props.current`, which the\n       * Slot composition propagates down to `Card.Root`'s div. That's what\n       * makes `dx-current` (an `aria-[current=true]:` utility) actually\n       * fire here. See `ui-theme/src/css/components/selected.md`.\n       */}\n      <Mosaic.Tile {...props} asChild>\n        <Focus.Item asChild>\n          <Card.Root className='dx-current dx-hover'>\n            <Card.Header>\n              <Card.DragHandle ref={dragHandleRef} />\n              <Card.Title>{Obj.getLabel(props.data) ?? props.data.id}</Card.Title>\n              <Card.Block end>\n                <Menu.Trigger asChild disabled={!menuItems?.length}>\n                  <IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Menu' />\n                </Menu.Trigger>\n              </Card.Block>\n              <Menu.Content items={menuItems} />\n            </Card.Header>\n            {open && (\n              <Card.Row>\n                <JsonHighlighter data={props.data} classNames='text-xs' />\n              </Card.Row>\n            )}\n          </Card.Root>\n        </Focus.Item>\n      </Mosaic.Tile>\n    </Menu.Root>\n  );\n};\n\nDefaultStackTile.displayName = 'DefaultStackTile';\n"],
+  "mappings": "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",
+  "names": ["React", "withMosaic", "Story", "Mosaic", "Root", "Schema", "DXN", "Ref", "Type", "EntityId", "TestItem", "makeObject", "make", "Struct", "name", "String", "description", "optional", "label", "TestColumn", "id", "items", "mutable", "Array", "useControllableState", "React", "Icon", "Popover", "ResizeHandle", "resizeAttributes", "sizeStyle", "DEFAULT_BLOCK_SIZE", "MIN_BLOCK_SIZE", "CardContainer", "children", "role", "icon", "div", "className", "PopoverCardContainer", "IntrinsicCardContainer", "Root", "open", "Trigger", "asChild", "Portal", "Content", "onOpenAutoFocus", "event", "preventDefault", "Viewport", "classNames", "Arrow", "defaultSize", "size", "propSize", "onSizeChange", "setSize", "prop", "defaultProp", "onChange", "style", "side", "fallbackSize", "minSize", "React", "useMemo", "useRef", "useState", "Obj", "Card", "IconButton", "Menu", "createMenuAction", "JsonHighlighter", "DefaultStackTile", "props", "dragHandleRef", "useRef", "open", "setOpen", "useState", "menuItems", "useMemo", "createMenuAction", "prev", "label", "icon", "React", "Menu", "Root", "Mosaic", "Tile", "asChild", "Focus", "Item", "Card", "className", "Header", "DragHandle", "ref", "Title", "Obj", "getLabel", "data", "id", "Block", "end", "Trigger", "disabled", "length", "IconButton", "iconOnly", "variant", "Content", "items", "Row", "JsonHighlighter", "classNames", "displayName"]
 }

package/dist/lib/node-esm/{chunk-DVJLDZLE.mjs → chunk-4IEMCMIV.mjs}

@@ -42,9 +42,10 @@ var styles = {
     ],
     content: [
       "transition-all duration-0",
-      // TODO(burdon): Don't animate open if placeholder is the source.
-      // TODO(burdon): Flickers when start to drag since source is removed and then the placeholder shows up.
-      //  - Use absolute positioning?
+      // Placeholders open instantly (`duration-0`). The source slot is reserved on drag start by
+      // activating its placeholder (see Stack.tsx), so the stack no longer collapses/flickers when the
+      // dragged item is removed. NOTE: if the open animation below is ever enabled, exempt the source
+      // placeholder — animating its reserved gap from 0 would reintroduce the start-of-drag flicker.
       // 'group-data-[mosaic-placeholder-state=active]:duration-200',
       "group-data-[mosaic-placeholder-orientation=vertical]:h-0",
       "group-data-[mosaic-placeholder-orientation=vertical]:group-data-[mosaic-placeholder-state=active]:h-[var(--mosaic-placeholder-height)]",
@@ -145,6 +146,8 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
     };
     let noTargetTimeout;
     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.
       */
@@ -152,7 +155,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
         log("Root.onDragStart", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 96, S: void 0 });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 98, S: void 0 });
         handleChange({
           source,
           location
@@ -166,7 +169,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
         log("Root.onDropTargetChange", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 109, S: void 0 });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 111, S: void 0 });
         if (location.current.dropTargets.length === 0) {
           noTargetTimeout = setTimeout(() => setDragging(void 0), 1e3);
         } else {
@@ -200,18 +203,18 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
         log.info("Root.onDrop", {
           source: source.data,
           location: location.current.dropTargets.map((target) => target.data)
-        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 142, S: void 0 });
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 144, S: void 0 });
         const { data: sourceData, handler: sourceHandler } = getSourceHandler(source);
         if (!sourceHandler) {
           log.warn("invalid source", {
             source: sourceData,
             handlers: Object.keys(handlers)
-          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 149, S: void 0 });
+          }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 151, S: void 0 });
           return;
         }
         try {
           if (location.current.dropTargets.length === 0) {
-            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 163, S: void 0 });
+            log.info("cancelled", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 165, S: void 0 });
           } else {
             const { data: targetData, handler: targetHandler } = getTargetHandler(location);
             if (!targetHandler) {
@@ -219,7 +222,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
                 source: sourceData,
                 location,
                 handlers: Object.keys(handlers)
-              }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 168, S: void 0 });
+              }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 170, S: void 0 });
               return;
             }
             if (sourceHandler === targetHandler) {
@@ -231,7 +234,7 @@ var MosaicRoot = /* @__PURE__ */ forwardRef(({ children, asChild, debug }, forwa
               if (!sourceHandler.onTake) {
                 log.warn("invalid source", {
                   source: sourceData
-                }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 183, S: void 0 });
+                }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 185, S: void 0 });
                 return;
               }
               sourceHandler.onTake?.({
@@ -288,7 +291,7 @@ import { createContext as createContext2 } from "@radix-ui/react-context";
 import { Primitive as Primitive2 } from "@radix-ui/react-primitive";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { bind } from "bind-event-listener";
-import React2, { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import React2, { useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import { composable, composableProps } from "@dxos/react-ui";
 import { isTruthy } from "@dxos/util";
 var MOSAIC_CONTAINER_NAME = "Mosaic.Container";
@@ -297,7 +300,7 @@ var MOSAIC_CONTAINER_STATE_ATTR = "mosaic-container-state";
 var MOSAIC_CONTAINER_PLACEHOLDER_WIDTH = "--mosaic-placeholder-width";
 var MOSAIC_CONTAINER_PLACEHOLDER_HEIGHT = "--mosaic-placeholder-height";
 var counter = 0;
-var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
+var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, orientation = "vertical", asChild, autoScroll: autoscrollElement, withFocus, controllerRef, currentId, onCurrentChange, selectedIds, onSelectionChange, debug, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot2 : Primitive2.div;
   const rootRef = useRef2(null);
   const composedRef = useComposedRefs2(rootRef, forwardedRef);
@@ -322,6 +325,9 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
   const registerScrollTo = useCallback2((fn) => {
     scrollToRef.current = fn;
   }, []);
+  useImperativeHandle(controllerRef, () => ({
+    scrollToItem: (id) => scrollToRef.current?.(id)
+  }), []);
   useEffect2(() => {
     if (currentId) {
       scrollToRef.current?.(currentId);
@@ -390,10 +396,8 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
             source: data2
           }) || 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.
         */
@@ -442,9 +446,9 @@ var MosaicContainer = composable(({ children, eventHandler: eventHandlerProp, or
       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"
@@ -501,13 +505,14 @@ import { composeRefs } from "@radix-ui/react-compose-refs";
 import { createContext as createContext3 } from "@radix-ui/react-context";
 import { Primitive as Primitive3 } from "@radix-ui/react-primitive";
 import { Slot as Slot3 } from "@radix-ui/react-slot";
-import React3, { useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
+import React3, { useCallback as useCallback3, useLayoutEffect, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { createPortal } from "react-dom";
 import { composableProps as composableProps2, slottable } from "@dxos/react-ui";
+import { resizeAttributes, sizeStyle } from "@dxos/react-ui-dnd";
 var MOSAIC_TILE_NAME = "Mosaic.Tile";
 var [MosaicTileContextProvider, useMosaicTileContext] = createContext3("MosaicTile");
 var MOSAIC_TILE_STATE_ATTR = "mosaic-tile-state";
-var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, debug: _, ...props }, forwardedRef) => {
+var MosaicTile = slottable(({ children, asChild, dragHandle: dragHandleProp, allowedEdges: allowedEdgesProp, location, id, data: dataProp, draggable: draggableProp, current, selected, size: sizeProp, onSizeChange, minSize, maxSize, debug: _, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot3 : Primitive3.div;
   const rootRef = useRef3(null);
   const composedRef = composeRefs(rootRef, forwardedRef);
@@ -515,6 +520,17 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
   const [state, setState] = useState3({
     type: "idle"
   });
+  const [registeredDragHandle, setRegisteredDragHandle] = useState3(null);
+  const dragHandle = dragHandleProp ?? registeredDragHandle;
+  const [size, setInternalSize] = useState3(sizeProp);
+  const setSize = useCallback3((nextSize, commit) => {
+    setInternalSize(nextSize);
+    if (commit) {
+      onSizeChange?.(nextSize);
+    }
+  }, [
+    onSizeChange
+  ]);
   const allowedEdges = useMemo3(() => allowedEdgesProp || (orientation === "vertical" ? [
     "top",
     "bottom"
@@ -552,7 +568,14 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
         });
       }
     };
+    const handleNativeDragStart = (event) => {
+      if (event.dataTransfer) {
+        event.dataTransfer.effectAllowed = "move";
+      }
+    };
+    root.addEventListener("dragstart", handleNativeDragStart);
     return combine3(
+      () => root.removeEventListener("dragstart", handleNativeDragStart),
       // Source.
       draggable({
         element: root,
@@ -604,6 +627,8 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
             source: data2
           }) || false;
         },
+        // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+        getDropEffect: () => "move",
         onDragEnter: ({ self, source }) => {
           handleChange({
             self,
@@ -644,10 +669,34 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
   const { className, ...rest } = composableProps2(props, {
     classNames: "relative outline-none"
   });
+  const vertical = orientation === "vertical";
+  const sized = size != null;
+  const bounded = sized || minSize != null || maxSize != null;
+  const sizeStyles = {
+    ...sized && sizeStyle(size, vertical ? "vertical" : "horizontal"),
+    ...minSize != null && {
+      [vertical ? "minBlockSize" : "minInlineSize"]: `${minSize}rem`
+    },
+    ...maxSize != null && {
+      [vertical ? "maxBlockSize" : "maxInlineSize"]: `${maxSize}rem`
+    }
+  };
   return /* @__PURE__ */ React3.createElement(MosaicTileContextProvider, {
-    state
+    state,
+    setDragHandle: setRegisteredDragHandle,
+    size,
+    setSize,
+    minSize,
+    maxSize
   }, /* @__PURE__ */ React3.createElement(Comp, {
     ...rest,
+    ...bounded && resizeAttributes,
+    ...bounded && {
+      style: {
+        ...rest.style,
+        ...sizeStyles
+      }
+    },
     "data-object-id": id,
     [`data-${MOSAIC_TILE_STATE_ATTR}`]: state.type,
     role: "listitem",
@@ -671,12 +720,56 @@ var MosaicTile = slottable(({ children, asChild, dragHandle, allowedEdges: allow
 });
 MosaicTile.displayName = MOSAIC_TILE_NAME;
 
+// src/components/Mosaic/DragHandle.tsx
+import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
+import React4, { forwardRef as forwardRef2 } from "react";
+import { Button, IconButton, useTranslation } from "@dxos/react-ui";
+var MOSAIC_DRAG_HANDLE_NAME = "Mosaic.DragHandle";
+var REACT_UI_TRANSLATION_KEY = "@dxos/react-ui";
+var MosaicDragHandle = /* @__PURE__ */ forwardRef2(({ 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 = composeRefs2(forwardedRef, setDragHandle);
+  const testIdProps = testId ? {
+    "data-testid": testId
+  } : {};
+  if (children) {
+    return /* @__PURE__ */ React4.createElement(Button, {
+      ref,
+      variant,
+      tabIndex: -1,
+      classNames: [
+        "grid place-items-center cursor-grab",
+        classNames
+      ],
+      ...testIdProps
+    }, children, /* @__PURE__ */ React4.createElement("span", {
+      className: "sr-only"
+    }, label ?? t("toolbar-drag-handle.label")));
+  }
+  return /* @__PURE__ */ React4.createElement(IconButton, {
+    ref,
+    iconOnly: true,
+    noTooltip: true,
+    tabIndex: -1,
+    variant,
+    icon,
+    label: label ?? t("toolbar-drag-handle.label"),
+    classNames: [
+      "cursor-grab",
+      classNames
+    ],
+    ...testIdProps
+  });
+});
+MosaicDragHandle.displayName = MOSAIC_DRAG_HANDLE_NAME;
+
 // src/components/Mosaic/Placeholder.tsx
 import { DropIndicator as NaturalDropIndicator } from "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box";
 import { dropTargetForElements as dropTargetForElements3 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { Primitive as Primitive4 } from "@radix-ui/react-primitive";
 import { Slot as Slot4 } from "@radix-ui/react-slot";
-import React4, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4 } from "react";
+import React5, { useLayoutEffect as useLayoutEffect2, useMemo as useMemo4, useRef as useRef4 } from "react";
 import { mx } from "@dxos/ui-theme";
 var MOSAIC_PLACEHOLDER_NAME = "Mosaic.Placeholder";
 var MOSAIC_PLACEHOLDER_ORIENTATION_ATTR = "mosaic-placeholder-orientation";
@@ -708,6 +801,8 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
           source: data2
         }) || false;
       },
+      // Reorder is a move, not a copy — otherwise the browser shows the green "+" copy cursor.
+      getDropEffect: () => "move",
       onDragEnter: () => {
         setActiveLocation(data.location);
       },
@@ -724,7 +819,7 @@ var MosaicPlaceholder = ({ classNames, children, asChild, orientation = "vertica
     scrolling,
     setActiveLocation
   ]);
-  return /* @__PURE__ */ React4.createElement(Comp, {
+  return /* @__PURE__ */ React5.createElement(Comp, {
     [`data-${MOSAIC_PLACEHOLDER_ORIENTATION_ATTR}`]: orientation,
     [`data-${MOSAIC_PLACEHOLDER_STATE_ATTR}`]: data.location === activeLocation ? "active" : "idle",
     [`data-${MOSAIC_PLACEHOLDER_LOCATION_ATTR}`]: String(location),
@@ -737,24 +832,46 @@ MosaicPlaceholder.displayName = MOSAIC_PLACEHOLDER_NAME;
 var DROP_INDICATOR_NAME = "Mosaic.DropIndicator";
 var MosaicDropIndicator = (props) => {
   const { state } = useMosaicTileContext(DROP_INDICATOR_NAME);
-  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React4.createElement(NaturalDropIndicator, {
+  return state.type === "target" && state.closestEdge ? /* @__PURE__ */ React5.createElement(NaturalDropIndicator, {
     ...props,
     edge: state.closestEdge
   }) : null;
 };
 MosaicDropIndicator.displayName = DROP_INDICATOR_NAME;
 
+// src/components/Mosaic/ResizeHandle.tsx
+import React6 from "react";
+import { ResizeHandle } from "@dxos/react-ui-dnd";
+var MOSAIC_RESIZE_HANDLE_NAME = "Mosaic.ResizeHandle";
+var MIN_WIDTH = 20;
+var MIN_HEIGHT = 3;
+var DEFAULT_EXTRINSIC_SIZE = 50;
+var MosaicResizeHandle = ({ minSize, maxSize, fallbackSize = DEFAULT_EXTRINSIC_SIZE }) => {
+  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 /* @__PURE__ */ React6.createElement(ResizeHandle, {
+    side: horizontal ? "inline-end" : "block-end",
+    fallbackSize,
+    minSize: minSize ?? tileMinSize ?? (horizontal ? MIN_WIDTH : MIN_HEIGHT),
+    maxSize: maxSize ?? tileMaxSize,
+    size,
+    onSizeChange: setSize
+  });
+};
+MosaicResizeHandle.displayName = MOSAIC_RESIZE_HANDLE_NAME;
+
 // src/components/Mosaic/Stack.tsx
 import { useComposedRefs as useComposedRefs3 } from "@radix-ui/react-compose-refs";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React5, { forwardRef as forwardRef2, Fragment, useCallback as useCallback3, useEffect as useEffect3, useRef as useRef5 } from "react";
+import React7, { Fragment, forwardRef as forwardRef3, useCallback as useCallback4, useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef5 } from "react";
 import { invariant } from "@dxos/invariant";
 import { composable as composable2, composableProps as composableProps3 } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/ui-theme";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-mosaic/src/components/Mosaic/Stack.tsx";
 var MOSAIC_STACK_NAME = "MosaicStack";
 var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical", getId, items, scrollIntoView = true, Tile, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
-  const { id, orientation = orientationProp, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_STACK_NAME);
+  const { id, orientation = orientationProp, dragging, currentId, selectedIds, registerScrollTo, setActiveLocation } = useMosaicContainerContext(MOSAIC_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
     items,
@@ -762,8 +879,28 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
     getId
   });
   invariant(orientation === "vertical" || orientation === "horizontal", `Invalid orientation: ${orientation}`, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 46, S: void 0, A: ["orientation === 'vertical' || orientation === 'horizontal'", "`Invalid orientation: ${orientation}`"] });
+  const draggingSource = dragging?.source.data;
+  const sourceIndex = useMemo5(() => {
+    if (!items || !draggingSource || draggingSource.containerId !== id) {
+      return -1;
+    }
+    return items.findIndex((item) => getId(item) === draggingSource.id);
+  }, [
+    items,
+    draggingSource,
+    id,
+    getId
+  ]);
+  useLayoutEffect3(() => {
+    if (sourceIndex >= 0) {
+      setActiveLocation(sourceIndex + 0.5);
+    }
+  }, [
+    sourceIndex,
+    setActiveLocation
+  ]);
   const rootRef = useRef5(null);
-  const scrollToId = useCallback3((targetId) => {
+  const scrollToId = useCallback4((targetId) => {
     if (!scrollIntoView) {
       return;
     }
@@ -783,7 +920,7 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
     scrollToId
   ]);
   const composedRef = useComposedRefs3(rootRef, forwardedRef);
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     ...composableProps3(props, {
       role: "list",
       classNames: [
@@ -793,12 +930,12 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
       ]
     }),
     ref: composedRef
-  }, draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+  }, draggable2 && /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
     orientation,
     location: 0.5
-  }), visibleItems?.map((item, index) => /* @__PURE__ */ React5.createElement(Fragment, {
+  }), visibleItems?.map((item, index) => /* @__PURE__ */ React7.createElement(Fragment, {
     key: getId(item)
-  }, /* @__PURE__ */ React5.createElement(Tile, {
+  }, /* @__PURE__ */ React7.createElement(Tile, {
     id: getId(item),
     data: item,
     location: index + 1,
@@ -806,7 +943,7 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
     current: getId(item) === currentId,
     selected: selectedIds?.has(getId(item)),
     debug
-  }), draggable2 && /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+  }), draggable2 && /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
     orientation,
     location: index + 1.5
   }))));
@@ -814,8 +951,8 @@ var MosaicStackInner = composable2(({ orientation: orientationProp = "vertical",
 MosaicStackInner.displayName = MOSAIC_STACK_NAME;
 var MosaicStack = MosaicStackInner;
 var MOSAIC_VIRTUAL_STACK_NAME = "MosaicVirtualStack";
-var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
-  invariant(Tile, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 103, S: void 0, A: ["Tile", ""] });
+var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef3(({ orientation = "vertical", getId, items, scrollIntoView = true, Tile, estimateSize, getScrollElement, overscan = 8, gap, onChange, draggable: draggable2 = true, debug, ...props }, forwardedRef) => {
+  invariant(Tile, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 128, S: void 0, A: ["Tile", ""] });
   const { id, dragging, currentId, selectedIds, registerScrollTo } = useMosaicContainerContext(MOSAIC_VIRTUAL_STACK_NAME);
   const visibleItems = useVisibleItems({
     id,
@@ -840,7 +977,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
     overscan,
     onChange
   });
-  const scrollToId = useCallback3((targetId) => {
+  const scrollToId = useCallback4((targetId) => {
     const itemIndex = visibleItems.findIndex((item) => getId(item) === targetId);
     if (itemIndex >= 0) {
       if (!scrollIntoView) {
@@ -889,7 +1026,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
       };
     }
   };
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React7.createElement("div", {
     ...composableProps3(props, {
       role: "list",
       classNames: [
@@ -914,7 +1051,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
     ref: forwardedRef
   }, virtualItems.map(({ key, index, start }) => {
     const { data, location } = getData(index);
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React7.createElement("div", {
       key,
       "data-index": index,
       style: {
@@ -930,7 +1067,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
         }
       },
       ref: virtualizer.measureElement
-    }, data ? /* @__PURE__ */ React5.createElement(Tile, {
+    }, data ? /* @__PURE__ */ React7.createElement(Tile, {
       id: getId(data),
       data,
       location,
@@ -938,7 +1075,7 @@ var MosaicVirtualStackInner = /* @__PURE__ */ forwardRef2(({ orientation = "vert
       current: getId(data) === currentId,
       selected: selectedIds?.has(getId(data)),
       debug
-    }) : /* @__PURE__ */ React5.createElement(InternalPlaceholder, {
+    }) : /* @__PURE__ */ React7.createElement(InternalPlaceholder, {
       orientation,
       location
     }));
@@ -948,10 +1085,10 @@ MosaicVirtualStackInner.displayName = MOSAIC_VIRTUAL_STACK_NAME;
 var MosaicVirtualStack = MosaicVirtualStackInner;
 MosaicVirtualStack[/* @__PURE__ */ Symbol.for("dxos.composable")] = true;
 var InternalPlaceholder = (props) => {
-  return /* @__PURE__ */ React5.createElement(MosaicPlaceholder, {
+  return /* @__PURE__ */ React7.createElement(MosaicPlaceholder, {
     ...props,
     classNames: styles.placeholder.root
-  }, /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React7.createElement("div", {
     className: mx2("flex h-full bg-base-surface border border-dashed border-separator rounded-xs", styles.placeholder.content)
   }));
 };
@@ -962,6 +1099,8 @@ var Mosaic = {
   Root: MosaicRoot,
   Container: MosaicContainer,
   Tile: MosaicTile,
+  DragHandle: MosaicDragHandle,
+  ResizeHandle: MosaicResizeHandle,
   Placeholder: MosaicPlaceholder,
   DropIndicator: MosaicDropIndicator,
   Stack: MosaicStack,
@@ -979,4 +1118,4 @@ export {
   useMosaicTileContext,
   Mosaic
 };
-//# sourceMappingURL=chunk-DVJLDZLE.mjs.map
+//# sourceMappingURL=chunk-4IEMCMIV.mjs.map