@dxos/react-ui-stack 0.7.5-main.9d2a38b → 0.7.5-main.c41020f

package/dist/types/src/components/StackItemHeading.d.ts

@@ -2,7 +2,7 @@ import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef } from
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type AttendableId, type Related } from '@dxos/react-ui-attention';
 export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
-export declare const StackItemHeading: ({ children, classNames, ...props }: StackItemHeadingProps) => React.JSX.Element;
+export declare const StackItemHeading: ({ children, classNames, ...props }: StackItemHeadingProps) => import("react/jsx-runtime").JSX.Element;
 export type StackItemHeadingLabelProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & AttendableId & Related;
 export declare const StackItemHeadingLabel: React.ForwardRefExoticComponent<Omit<StackItemHeadingLabelProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 //# sourceMappingURL=StackItemHeading.d.ts.map

package/dist/types/src/components/StackItemHeading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackItemHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemHeading.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKzF,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAErF,eAAO,MAAM,gBAAgB,uCAAwC,qBAAqB,sBAkBzF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE/G,eAAO,MAAM,qBAAqB,oHAejC,CAAC"}
+{"version":3,"file":"StackItemHeading.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemHeading.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,wBAAwB,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAgB,KAAK,YAAY,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAKzF,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAC;AAErF,eAAO,MAAM,gBAAgB,uCAAwC,qBAAqB,4CAkBzF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,eAAe,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE/G,eAAO,MAAM,qBAAqB,oHAejC,CAAC"}

package/dist/types/src/components/StackItemResizeHandle.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 export type StackItemResizeHandleProps = {};
-export declare const StackItemResizeHandle: () => React.JSX.Element;
+export declare const StackItemResizeHandle: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StackItemResizeHandle.d.ts.map

package/dist/types/src/components/StackItemResizeHandle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAoBvD,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBAmEjC,CAAC"}
+{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,+CAajC,CAAC"}

package/dist/types/src/components/StackItemSigil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE9F,eAAO,MAAM,oBAAoB,kHAgBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CA6GpD,CAAC"}
+{"version":3,"file":"StackItemSigil.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemSigil.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAY,KAAK,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,WAAW,EAAyD,MAAM,gBAAgB,CAAC;AACjH,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,OAAO,EAAgB,MAAM,0BAA0B,CAAC;AAOzF,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,CAAC;AAElF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,YAAY,GAAG,OAAO,CAAC;AAE9F,eAAO,MAAM,oBAAoB,kHAgBhC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CACjD;IACE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,oBAAoB,EAAE,EAAE,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;CACnD,GAAG,OAAO,CACZ,CAAC;AAEF,eAAO,MAAM,cAAc;mBARR,MAAM;kBACP,MAAM;cACV,oBAAoB,EAAE,EAAE;UAC5B,MAAM;eACD,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI;;;2CAwGpD,CAAC"}

package/dist/types/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useStackDropForElements } from './useStackDropForElements';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/types/src/hooks/useStackDropForElements.d.ts

@@ -0,0 +1,15 @@
+import { type Orientation } from '../components/Stack';
+import { type StackItemRearrangeHandler } from '../components/StackContext';
+/**
+ * Hook to handle drag and drop functionality for Stack components.
+ */
+export declare const useStackDropForElements: ({ element, selfDroppable, orientation, id, onRearrange, }: {
+    element: HTMLDivElement | null;
+    selfDroppable: boolean;
+    orientation: Orientation;
+    id?: string;
+    onRearrange?: StackItemRearrangeHandler;
+}) => {
+    dropping: boolean;
+};
+//# sourceMappingURL=useStackDropForElements.d.ts.map

package/dist/types/src/hooks/useStackDropForElements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStackDropForElements.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useStackDropForElements.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,KAAK,yBAAyB,EAAsB,MAAM,4BAA4B,CAAC;AAEhG;;GAEG;AACH,eAAO,MAAM,uBAAuB,8DAMjC;IACD,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,yBAAyB,CAAC;CACzC;;CA4CA,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.7.5-main.9d2a38b",
+  "version": "0.7.5-main.c41020f",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types/src/index.d.ts",
@@ -36,22 +37,23 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@effect/schema": "^0.75.5",
-    "@fluentui/react-tabster": "^9.19.0",
-    "@radix-ui/primitive": "^1.0.0",
-    "@radix-ui/react-compose-refs": "^1.0.0",
-    "@radix-ui/react-context": "^1.0.0",
-    "@radix-ui/react-menu": "^2.0.6",
-    "@radix-ui/react-slot": "^1.0.1",
-    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "@fluentui/react-tabster": "9.23.3",
+    "@radix-ui/primitive": "1.1.1",
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "@radix-ui/react-menu": "2.1.6",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.7.5-main.9d2a38b",
-    "@dxos/keyboard": "0.7.5-main.9d2a38b",
-    "@dxos/live-object": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-attention": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-mosaic": "0.7.5-main.9d2a38b",
-    "@dxos/util": "0.7.5-main.9d2a38b"
+    "@dxos/echo-schema": "0.7.5-main.c41020f",
+    "@dxos/keyboard": "0.7.5-main.c41020f",
+    "@dxos/react-ui-attention": "0.7.5-main.c41020f",
+    "@dxos/react-ui-dnd": "0.7.5-main.c41020f",
+    "@dxos/live-object": "0.7.5-main.c41020f",
+    "@dxos/util": "0.7.5-main.c41020f"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -60,24 +62,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.7.5-main.9d2a38b",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/echo-schema": "0.7.5-main.9d2a38b",
-    "@dxos/client": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-editor": "0.7.5-main.9d2a38b",
-    "@dxos/storybook-utils": "0.7.5-main.9d2a38b",
-    "@dxos/test-utils": "0.7.5-main.9d2a38b"
+    "@dxos/app-graph": "0.7.5-main.c41020f",
+    "@dxos/client": "0.7.5-main.c41020f",
+    "@dxos/echo-schema": "0.7.5-main.c41020f",
+    "@dxos/react-ui": "0.7.5-main.c41020f",
+    "@dxos/react-ui-editor": "0.7.5-main.c41020f",
+    "@dxos/random": "0.7.5-main.c41020f",
+    "@dxos/storybook-utils": "0.7.5-main.c41020f",
+    "@dxos/test-utils": "0.7.5-main.c41020f",
+    "@dxos/react-ui-theme": "0.7.5-main.c41020f"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.7.5-main.9d2a38b",
-    "@dxos/random": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui": "0.7.5-main.9d2a38b",
-    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
+    "@dxos/client": "0.7.5-main.c41020f",
+    "@dxos/random": "0.7.5-main.c41020f",
+    "@dxos/react-ui-theme": "0.7.5-main.c41020f",
+    "@dxos/react-ui": "0.7.5-main.c41020f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Stack.stories.tsx

@@ -126,7 +126,7 @@ export const Default: Story = {
 };
 
 const meta: Meta<typeof StorybookStack> = {
-  title: 'ui/react-ui-stack-next/Stack',
+  title: 'ui/react-ui-stack/Stack',
   component: StorybookStack,
   decorators: [withTheme],
   argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },

package/src/components/Stack.tsx

@@ -1,34 +1,34 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
-import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
-import React, {
-  Children,
-  type CSSProperties,
-  type ComponentPropsWithRef,
-  forwardRef,
-  useLayoutEffect,
-  useState,
-} from 'react';
+import React, { Children, type CSSProperties, type ComponentPropsWithRef, forwardRef, useState, useMemo } from 'react';
 
 import { type ThemedClassName, ListItem } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type StackContextValue, StackContext, type StackItemData } from './StackContext';
+import { type StackContextValue, StackContext } from './StackContext';
+import { useStackDropForElements } from '../hooks';
 
 export type Orientation = 'horizontal' | 'vertical';
-export type Size = 'intrinsic' | 'contain';
+export type Size = 'intrinsic' | 'contain' | 'contain-fit-content';
 
 export type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &
   Partial<StackContextValue> & { itemsCount?: number };
 
 export const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
-
 export const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 
+// TODO(ZaymonFC): Magic 2px to stop overflow (tabster dummies... ask @thure).
+export const railGridHorizontalContainFitContent =
+  'grid-rows-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]';
+export const railGridVerticalContainFitContent =
+  'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_fit-content(calc(100%-var(--rail-size)*2+2px))_[content-end]]';
+
+export const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };
+
 export const Stack = forwardRef<HTMLDivElement, StackProps>(
   (
     {
@@ -46,49 +46,34 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
   ) => {
     const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);
     const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);
-    const [dropping, setDropping] = useState(false);
-
     const arrowNavigationGroup = useArrowNavigationGroup({ axis: orientation });
 
     const styles: CSSProperties = {
-      [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']: `repeat(${itemsCount}, min-content)`,
+      [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
+        `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
       ...style,
     };
 
     const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
 
-    useLayoutEffect(() => {
-      if (!stackElement || !selfDroppable) {
-        return;
+    const { dropping } = useStackDropForElements({
+      id: props.id,
+      element: stackElement,
+      selfDroppable,
+      orientation,
+      onRearrange,
+    });
+
+    const gridClasses = useMemo(() => {
+      if (!rail) {
+        return orientation === 'horizontal' ? 'grid-rows-1 pli-1' : 'grid-cols-1 plb-1';
       }
-      const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
-      return dropTargetForElements({
-        element: stackElement,
-        getData: ({ input, element }) => {
-          return attachClosestEdge(
-            { id: props.id, type: orientation === 'horizontal' ? 'card' : 'column' },
-            { input, element, allowedEdges: [orientation === 'horizontal' ? 'left' : 'top'] },
-          );
-        },
-        onDragEnter: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDrag: ({ source }) => {
-          if (source.data.type === acceptSourceType) {
-            setDropping(true);
-          }
-        },
-        onDragLeave: () => setDropping(false),
-        onDrop: ({ self, source }) => {
-          setDropping(false);
-          if (source.data.type === acceptSourceType && selfDroppable) {
-            onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
-          }
-        },
-      });
-    }, [stackElement, selfDroppable]);
+      if (orientation === 'horizontal') {
+        return size === 'contain-fit-content' ? railGridHorizontalContainFitContent : railGridHorizontal;
+      } else {
+        return size === 'contain-fit-content' ? railGridVerticalContainFitContent : railGridVertical;
+      }
+    }, [rail, orientation, size]);
 
     return (
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
@@ -97,25 +82,27 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
           {...arrowNavigationGroup}
           className={mx(
             'grid relative',
-            rail
-              ? orientation === 'horizontal'
-                ? railGridHorizontal
-                : railGridVertical
-              : orientation === 'horizontal'
-                ? 'grid-rows-1'
-                : 'grid-cols-1',
-            size === 'contain' &&
+            gridClasses,
+            (size === 'contain' || size === 'contain-fit-content') &&
               (orientation === 'horizontal'
                 ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'
                 : 'overflow-y-auto min-is-0 is-full max-is-full'),
             classNames,
           )}
+          data-rail={rail}
           aria-orientation={orientation}
           style={styles}
           ref={composedItemRef}
         >
           {children}
-          {selfDroppable && dropping && <ListItem.DropIndicator edge={orientation === 'horizontal' ? 'left' : 'top'} />}
+          {selfDroppable && dropping && (
+            <ListItem.DropIndicator
+              lineInset={8}
+              terminalInset={-8}
+              gap={-8}
+              edge={orientation === 'horizontal' ? 'left' : 'top'}
+            />
+          )}
         </div>
       </StackContext.Provider>
     );

package/src/components/StackContext.tsx

@@ -5,15 +5,17 @@
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { createContext, useContext } from 'react';
 
+import { type Size as DndSize } from '@dxos/react-ui-dnd';
+
 import { type Orientation, type Size } from './Stack';
 
-export type StackItemSize = number | 'min-content';
+export type StackItemSize = DndSize;
 
 export type StackItemData = { id: string; type: 'column' | 'card' };
 
-export type StackItemRearrangeHandler = (
-  source: StackItemData,
-  target: StackItemData,
+export type StackItemRearrangeHandler<Data extends { id: string } = StackItemData> = (
+  source: Data,
+  target: Data,
   closestEdge: Edge | null,
 ) => void;
 

package/src/components/StackItem.tsx

@@ -4,8 +4,8 @@
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
+import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import {
   attachClosestEdge,
   extractClosestEdge,
@@ -16,6 +16,7 @@ import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, { forwardRef, useLayoutEffect, useState, type ComponentPropsWithRef, useCallback } from 'react';
 
 import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStack, StackItemContext, type StackItemSize, type StackItemData } from './StackContext';
@@ -36,7 +37,8 @@ import {
   StackItemSigilButton,
 } from './StackItemSigil';
 
-export const DEFAULT_HORIZONTAL_SIZE = 44 satisfies StackItemSize;
+// NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
+export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;
 export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
 export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
 
@@ -46,10 +48,27 @@ export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
   size?: StackItemSize;
   onSizeChange?: (nextSize: StackItemSize) => void;
   role?: 'article' | 'section';
+  disableRearrange?: boolean;
+  focusIndicatorVariant?: 'over-all' | 'group';
 };
 
 const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
-  ({ item, children, classNames, size: propsSize, onSizeChange, role, order, style, ...props }, forwardedRef) => {
+  (
+    {
+      item,
+      children,
+      classNames,
+      size: propsSize,
+      onSizeChange,
+      role,
+      order,
+      style,
+      disableRearrange,
+      focusIndicatorVariant = 'over-all',
+      ...props
+    },
+    forwardedRef,
+  ) => {
     const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
     const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
     const [closestEdge, setEdge] = useState<Edge | null>(null);
@@ -74,7 +93,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     const type = orientation === 'horizontal' ? 'column' : 'card';
 
     useLayoutEffect(() => {
-      if (!itemElement || !onRearrange) {
+      if (!itemElement || !onRearrange || disableRearrange) {
         return;
       }
       return combine(
@@ -82,10 +101,20 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           element: itemElement,
           ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),
           getInitialData: () => ({ id: item.id, type }),
-          // TODO(thure): tabster focus honeypots are causing the preview to render with the wrong dimensions; what do?
-          onGenerateDragPreview: ({ nativeSetDragImage }) => {
-            disableNativeDragPreview({ nativeSetDragImage });
-            preventUnhandled.start();
+          onGenerateDragPreview: ({ nativeSetDragImage, source, location }) => {
+            document.body.setAttribute('data-drag-preview', 'true');
+            scrollJustEnoughIntoView({ element: source.element });
+            const { x, y } = preserveOffsetOnSource({ element: source.element, input: location.current.input })({
+              container: (source.element.offsetParent ?? document.body) as HTMLElement,
+            });
+            nativeSetDragImage?.(source.element, x, y);
+          },
+          onDragStart: () => {
+            document.body.removeAttribute('data-drag-preview');
+            itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');
+          },
+          onDrop: () => {
+            itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');
           },
         }),
         dropTargetForElements({
@@ -126,17 +155,20 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           tabIndex={0}
           {...focusGroupAttrs}
           className={mx(
-            'group/stack-item grid relative ch-focus-ring-inset-over-all',
-            size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),
+            'group/stack-item grid relative',
+            focusIndicatorVariant === 'over-all'
+              ? 'dx-focus-ring-inset-over-all'
+              : orientation === 'horizontal'
+                ? 'dx-focus-ring-group-x'
+                : 'dx-focus-ring-group-y',
             orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
             rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
             classNames,
           )}
           data-dx-stack-item
+          {...resizeAttributes}
           style={{
-            ...(size !== 'min-content' && {
-              [orientation === 'horizontal' ? 'inlineSize' : 'blockSize']: `${size}rem`,
-            }),
+            ...sizeStyle(size, orientation),
             ...(Number.isFinite(order) && {
               [orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,
             }),
@@ -145,7 +177,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           ref={composedItemRef}
         >
           {children}
-          {closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
+          {closestEdge && <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />}
         </Root>
       </StackItemContext.Provider>
     );

package/src/components/StackItemContent.tsx

@@ -15,10 +15,12 @@ export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'di
    * (`row-span-2`) or was buggy. See the description of the StackItem.Content component itself for more information.
    */
   toolbar: boolean;
+
   /**
    * Whether to provide for the layout of a statusbar after the content.
    */
   statusbar?: boolean;
+
   /**
    * Whether to set a certain aspect ratio on the content, including the toolbar and statusbar. This is provided for
    * convenience and consistency; it can instead be specified by the `classNames` or `style` props as needed.

package/src/components/StackItemHeading.tsx

@@ -23,7 +23,7 @@ export const StackItemHeading = ({ children, classNames, ...props }: StackItemHe
       tabIndex={0}
       {...focusableGroupAttrs}
       className={mx(
-        'flex items-center ch-focus-ring-inset-over-all relative !border-is-0',
+        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',
         orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
         classNames,
       )}

package/src/components/StackItemResizeHandle.tsx

@@ -2,115 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-import { type DragLocationHistory } from '@atlaskit/pragmatic-drag-and-drop/types';
-import React, { useLayoutEffect, useRef } from 'react';
+import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { ResizeHandle } from '@dxos/react-ui-dnd';
 
-import { useStack, useStackItem, type StackItemSize } from './StackContext';
+import { useStack, useStackItem } from './StackContext';
 import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 
-const REM = parseFloat(getComputedStyle(document.documentElement).fontSize);
-
-const MIN_SIZE = 20;
-
-const measureStackItem = (element: HTMLButtonElement): { width: number; height: number } => {
-  const stackItemElement = element.closest('[data-dx-stack-item]');
-  return stackItemElement?.getBoundingClientRect() ?? { width: DEFAULT_EXTRINSIC_SIZE, height: DEFAULT_EXTRINSIC_SIZE };
-};
-
-const getNextSize = (startSize: number, location: DragLocationHistory, client: 'clientX' | 'clientY') => {
-  return Math.max(MIN_SIZE, startSize + (location.current.input[client] - location.initial.input[client]) / REM);
-};
+const MIN_WIDTH = 20;
+const MIN_HEIGHT = 3;
 
 export type StackItemResizeHandleProps = {};
 
 export const StackItemResizeHandle = () => {
   const { orientation } = useStack();
   const { setSize, size } = useStackItem();
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const dragStartSize = useRef<StackItemSize>(size);
-  const client = orientation === 'horizontal' ? 'clientX' : 'clientY';
-
-  useLayoutEffect(
-    () => {
-      if (!buttonRef.current || buttonRef.current.hasAttribute('draggable')) {
-        return;
-      }
-      // TODO(thure): This should handle StackItem state vs local state better.
-      draggable({
-        element: buttonRef.current,
-        onGenerateDragPreview: ({ nativeSetDragImage }) => {
-          // We will be moving the line to indicate a drag; we can disable the native drag preview.
-          disableNativeDragPreview({ nativeSetDragImage });
-          // We don't want any native drop animation for when the user does not drop on a drop target.
-          // We want the drag to finish immediately.
-          preventUnhandled.start();
-        },
-        onDragStart: () => {
-          dragStartSize.current =
-            dragStartSize.current === 'min-content'
-              ? measureStackItem(buttonRef.current!)[orientation === 'horizontal' ? 'width' : 'height'] / REM
-              : dragStartSize.current;
-        },
-        onDrag: ({ location }) => {
-          if (typeof dragStartSize.current !== 'number') {
-            return;
-          }
-          setSize(getNextSize(dragStartSize.current, location, client));
-        },
-        onDrop: ({ location }) => {
-          if (typeof dragStartSize.current !== 'number') {
-            return;
-          }
-          const nextSize = getNextSize(dragStartSize.current, location, client);
-          setSize(nextSize, true);
-          dragStartSize.current = nextSize;
-        },
-      });
-    },
-    [
-      // Note that `size` should not be a dependency here since dragging this adjusts the size.
-    ],
-  );
-
-  return (
-    <button
-      ref={buttonRef}
-      className={mx(
-        orientation === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize',
-        'group absolute is-3 bs-full inline-end-[-1px] !border-lb-0',
-        'before:transition-opacity before:duration-100 before:ease-in-out before:opacity-0 hover:before:opacity-100 focus-visible:before:opacity-100 active:before:opacity-100',
-        'before:absolute before:block before:inset-block-0 before:inline-end-0 before:is-1 before:bg-accentFocusIndicator',
-      )}
-    >
-      <div
-        role='none'
-        className='absolute block-start-0 inline-end-[1px] bs-[--rail-size] flex items-center group-hover:opacity-0 group-focus-visible:opacity-0 group-active:opacity-0'
-      >
-        <DragHandleSignifier />
-      </div>
-    </button>
-  );
-};
 
-const DragHandleSignifier = () => {
   return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      viewBox='0 0 256 256'
-      fill='currentColor'
-      className='shrink-0 bs-[1em] is-[1em] text-unAccent'
-    >
-      {/* two pips: <path d='M256,120c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' />
-      <path d='M256,232c-8.8,0-16-7.2-16-16v-56c0-8.8,7.2-16,16-16v88Z' /> */}
-      <path d='M256,64c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,120c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,176c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-      <path d='M256,232c-8.8,0-16-7.2-16-16s7.2-16,16-16v32Z' />
-    </svg>
+    <ResizeHandle
+      side={orientation === 'horizontal' ? 'inline-end' : 'block-end'}
+      fallbackSize={DEFAULT_EXTRINSIC_SIZE}
+      minSize={orientation === 'horizontal' ? MIN_WIDTH : MIN_HEIGHT}
+      size={size}
+      onSizeChange={setSize}
+    />
   );
 };