@dxos/react-ui-stack 0.7.4 → 0.7.5-labs.071a3e2

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,sBAoBzF,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,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"}

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

@@ -1,3 +1,4 @@
 import React from 'react';
+export type StackItemResizeHandleProps = {};
 export declare const StackItemResizeHandle: () => React.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,eAAO,MAAM,qBAAqB,yBAoEjC,CAAC"}
+{"version":3,"file":"StackItemResizeHandle.d.ts","sourceRoot":"","sources":["../../../../src/components/StackItemResizeHandle.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAwBvD,MAAM,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAE5C,eAAO,MAAM,qBAAqB,yBA0EjC,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/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Stack';
 export * from './StackItem';
 export * from './LayoutControls';
+export * from './StackContext';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.071a3e2",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,21 +36,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-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.4",
-    "@dxos/react-ui-attention": "0.7.4",
-    "@dxos/live-object": "0.7.4",
-    "@dxos/react-ui-mosaic": "0.7.4",
-    "@dxos/util": "0.7.4",
-    "@dxos/keyboard": "0.7.4"
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/keyboard": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-attention": "0.7.5-labs.071a3e2",
+    "@dxos/live-object": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-mosaic": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -59,24 +61,24 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.7.4",
-    "@dxos/client": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/random": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/react-ui-editor": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4",
-    "@dxos/test-utils": "0.7.4"
+    "@dxos/app-graph": "0.7.5-labs.071a3e2",
+    "@dxos/client": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-editor": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2",
+    "@dxos/test-utils": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.7.4",
-    "@dxos/random": "0.7.4",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4"
+    "@dxos/client": "0.7.5-labs.071a3e2",
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/LayoutControls.tsx

@@ -44,9 +44,7 @@ const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'>
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
-          {label}
-        </Tooltip.Content>
+        <Tooltip.Content side='bottom'>{label}</Tooltip.Content>
       </Tooltip.Portal>
     </Tooltip.Root>
   );

package/src/components/Stack.stories.tsx

@@ -10,7 +10,8 @@ import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Stack } from './Stack';
-import { StackItem, type StackItemData } from './StackItem';
+import { type StackItemData } from './StackContext';
+import { StackItem } from './StackItem';
 
 type StoryStackItem = {
   id: string;
@@ -93,15 +94,15 @@ const StorybookStack = () => {
 
   return (
     <main className='fixed inset-0'>
-      <Stack orientation='horizontal' size='contain'>
+      <Stack orientation='horizontal' size='contain' onRearrange={reorderItem}>
         {columns.map((column) => (
-          <StackItem.Root key={column.id} item={column} onRearrange={reorderItem}>
+          <StackItem.Root key={column.id} item={column}>
             <StackItem.Heading>
               <StackItem.ResizeHandle />
             </StackItem.Heading>
             <Stack orientation='vertical' size='contain'>
               {column.items?.map((card) => (
-                <StackItem.Root key={card.id} item={card} onRearrange={reorderItem}>
+                <StackItem.Root key={card.id} item={card}>
                   <StackItem.Heading>
                     <StackItem.ResizeHandle />
                   </StackItem.Heading>

package/src/components/Stack.tsx

@@ -1,14 +1,25 @@
 //
 // Copyright 2024 DXOS.org
 //
-
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import React, { Children, type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import React, {
+  Children,
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  forwardRef,
+  useLayoutEffect,
+  useState,
+} from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, ListItem } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type StackContextValue, StackContext } from './StackContext';
+import { type StackContextValue, StackContext, type StackItemData } from './StackContext';
 
 export type Orientation = 'horizontal' | 'vertical';
 export type Size = 'intrinsic' | 'contain';
@@ -20,6 +31,8 @@ export const railGridHorizontal = 'grid-rows-[[rail-start]_var(--rail-size)_[con
 
 export const railGridVertical = 'grid-cols-[[rail-start]_var(--rail-size)_[content-start]_1fr_[content-end]]';
 
+export const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };
+
 export const Stack = forwardRef<HTMLDivElement, StackProps>(
   (
     {
@@ -28,13 +41,17 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       style,
       orientation = 'vertical',
       rail = true,
-      separators = true,
       size = 'intrinsic',
+      onRearrange,
       itemsCount = Children.count(children),
       ...props
     },
     forwardedRef,
   ) => {
+    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 = {
@@ -42,8 +59,46 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       ...style,
     };
 
+    const selfDroppable = !!(itemsCount < 1 && onRearrange && props.id);
+
+    useLayoutEffect(() => {
+      if (!stackElement || !selfDroppable) {
+        return;
+      }
+      const acceptSourceType = orientation === 'horizontal' ? 'column' : 'card';
+      return combine(
+        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));
+            }
+          },
+        }),
+        autoScrollForElements({ element: stackElement, getAllowedAxis: () => orientation }),
+      );
+    }, [stackElement, selfDroppable, orientation]);
+
     return (
-      <StackContext.Provider value={{ orientation, rail, size, separators }}>
+      <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
         <div
           {...props}
           {...arrowNavigationGroup}
@@ -54,20 +109,28 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                 ? railGridHorizontal
                 : railGridVertical
               : orientation === 'horizontal'
-                ? 'grid-rows-1'
-                : 'grid-cols-1',
+                ? 'grid-rows-1 pli-1'
+                : 'grid-cols-1 plb-1',
             size === 'contain' &&
               (orientation === 'horizontal'
                 ? 'overflow-x-auto min-bs-0 bs-full max-bs-full'
                 : 'overflow-y-auto min-is-0 is-full max-is-full'),
-            separators && (orientation === 'horizontal' ? 'divide-separator divide-x' : 'divide-separator divide-y'),
             classNames,
           )}
+          data-rail={rail}
           aria-orientation={orientation}
           style={styles}
-          ref={forwardedRef}
+          ref={composedItemRef}
         >
           {children}
+          {selfDroppable && dropping && (
+            <ListItem.DropIndicator
+              lineInset={8}
+              terminalInset={-8}
+              gap={-8}
+              edge={orientation === 'horizontal' ? 'left' : 'top'}
+            />
+          )}
         </div>
       </StackContext.Provider>
     );

package/src/components/StackContext.tsx

@@ -2,28 +2,37 @@
 // Copyright 2024 DXOS.org
 //
 
+import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { createContext, useContext } from 'react';
 
 import { type Orientation, type Size } from './Stack';
-import { type StackItemSize } from './StackItem';
+
+export type StackItemSize = number | 'min-content';
+
+export type StackItemData = { id: string; type: 'column' | 'card' };
+
+export type StackItemRearrangeHandler = (
+  source: StackItemData,
+  target: StackItemData,
+  closestEdge: Edge | null,
+) => void;
 
 export type StackContextValue = {
   orientation: Orientation;
-  separators: boolean;
   rail: boolean;
   size: Size;
+  onRearrange?: StackItemRearrangeHandler;
 };
 
 export const StackContext = createContext<StackContextValue>({
   orientation: 'vertical',
   rail: true,
   size: 'intrinsic',
-  separators: true,
 });
 
 export const useStack = () => useContext(StackContext);
 
-type StackItemContextValue = {
+export type StackItemContextValue = {
   selfDragHandleRef: (element: HTMLDivElement | null) => void;
   size: StackItemSize;
   setSize: (nextSize: StackItemSize, commit?: boolean) => void;

package/src/components/StackItem.tsx

@@ -4,29 +4,30 @@
 
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+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,
   type Edge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-// TODO(wittjosiah): Drop indicator that doesn't depend on emotion. See react-ui-list DropIndicator.
-// import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, { forwardRef, useLayoutEffect, useState, type ComponentPropsWithRef, useCallback } from 'react';
 
-import { type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, ListItem } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useStack, StackItemContext } from './StackContext';
+import { useStack, StackItemContext, type StackItemSize, type StackItemData } from './StackContext';
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
+import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
 import {
   StackItemHeading,
   StackItemHeadingLabel,
   type StackItemHeadingProps,
   type StackItemHeadingLabelProps,
 } from './StackItemHeading';
-import { StackItemResizeHandle } from './StackItemResizeHandle';
+import { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';
 import {
   StackItemSigil,
   type StackItemSigilProps,
@@ -35,31 +36,41 @@ import {
   StackItemSigilButton,
 } from './StackItemSigil';
 
-export type StackItemSize = number | 'min-content';
 export const DEFAULT_HORIZONTAL_SIZE = 44 satisfies StackItemSize;
 export const DEFAULT_VERTICAL_SIZE = 'min-content' satisfies StackItemSize;
 export const DEFAULT_EXTRINSIC_SIZE = DEFAULT_HORIZONTAL_SIZE satisfies StackItemSize;
 
-export type StackItemData = { id: string; type: 'column' | 'card' };
-
 export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
   item: Omit<StackItemData, 'type'>;
   order?: number;
-  onRearrange?: (source: StackItemData, target: StackItemData, closestEdge: Edge | null) => void;
   size?: StackItemSize;
   onSizeChange?: (nextSize: StackItemSize) => void;
   role?: 'article' | 'section';
+  disableRearrange?: boolean;
+  focusIndicatorVariant?: 'over-all' | 'group';
 };
 
 const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
   (
-    { item, children, classNames, onRearrange, size: propsSize, onSizeChange, role, order, style, ...props },
+    {
+      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);
-    const { orientation, rail, separators } = useStack();
+    const [closestEdge, setEdge] = useState<Edge | null>(null);
+    const { orientation, rail, onRearrange } = useStack();
     const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
       useState(propsSize);
 
@@ -80,7 +91,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     const type = orientation === 'horizontal' ? 'column' : 'card';
 
     useLayoutEffect(() => {
-      if (!itemElement || !onRearrange) {
+      if (!itemElement || !onRearrange || disableRearrange) {
         return;
       }
       return combine(
@@ -88,6 +99,21 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           element: itemElement,
           ...(selfDragHandleElement && { dragHandle: selfDragHandleElement }),
           getInitialData: () => ({ id: item.id, type }),
+          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({
           element: itemElement,
@@ -127,11 +153,15 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           tabIndex={0}
           {...focusGroupAttrs}
           className={mx(
-            'group/stack-item grid relative ch-focus-ring-inset-over-all',
+            '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',
             size === 'min-content' && (orientation === 'horizontal' ? 'is-min' : 'bs-min'),
             orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
             rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
-            separators && (orientation === 'horizontal' ? 'divide-separator divide-y' : 'divide-separator divide-x'),
             classNames,
           )}
           data-dx-stack-item
@@ -147,7 +177,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           ref={composedItemRef}
         >
           {children}
-          {/* {closestEdge && <DropIndicator edge={closestEdge} />} */}
+          {closestEdge && <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />}
         </Root>
       </StackItemContext.Provider>
     );
@@ -160,6 +190,7 @@ export const StackItem = {
   Heading: StackItemHeading,
   HeadingLabel: StackItemHeadingLabel,
   ResizeHandle: StackItemResizeHandle,
+  DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
   SigilButton: StackItemSigilButton,
 };
@@ -168,6 +199,8 @@ export type {
   StackItemContentProps,
   StackItemHeadingProps,
   StackItemHeadingLabelProps,
+  StackItemResizeHandleProps,
+  StackItemDragHandleProps,
   StackItemSigilProps,
   StackItemSigilButtonProps,
   StackItemSigilAction,

package/src/components/StackItemContent.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type ComponentPropsWithoutRef } from 'react';
+import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -10,38 +10,53 @@ import { mx } from '@dxos/react-ui-theme';
 import { useStack } from './StackContext';
 
 export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
-  toolbar?: boolean;
+  /**
+   * This flag is required in order to clarify a developer experience that seemed like it needed extra boilerplate
+   * (`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;
-};
 
-export const StackItemContent = ({
-  children,
-  toolbar = true,
-  statusbar,
-  classNames,
-  ...props
-}: StackItemContentProps) => {
-  const { size, separators } = useStack();
-
-  return (
-    <div
-      role='none'
-      {...props}
-      className={mx(
-        'group grid grid-cols-[100%]',
-        size === 'contain' && 'min-bs-0 overflow-hidden',
-        separators && 'divide-separator divide-y',
-        classNames,
-      )}
-      style={{
-        gridTemplateRows: [
-          ...(toolbar ? ['var(--rail-action)'] : []),
-          '1fr',
-          ...(statusbar ? ['var(--statusbar-size)'] : []),
-        ].join(' '),
-      }}
-    >
-      {children}
-    </div>
-  );
+  /**
+   * 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.
+   */
+  size?: 'intrinsic' | 'video' | 'square';
 };
+
+/**
+ * This component should be used by plugins for rendering content within a stack item, a.k.a. a “plank” or “section”.
+ * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.
+ */
+export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(
+  ({ children, toolbar, statusbar, classNames, size = 'intrinsic', ...props }, forwardedRef) => {
+    const { size: stackItemSize } = useStack();
+
+    return (
+      <div
+        role='none'
+        {...props}
+        className={mx(
+          'group grid grid-cols-[100%]',
+          stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
+          size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
+          classNames,
+        )}
+        style={{
+          gridTemplateRows: [
+            ...(toolbar ? ['var(--rail-action)'] : []),
+            '1fr',
+            ...(statusbar ? ['var(--statusbar-size)'] : []),
+          ].join(' '),
+        }}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/StackItemDragHandle.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithoutRef } from 'react';
+
+import { useStackItem } from './StackContext';
+
+export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild: boolean };
+
+export const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {
+  const { selfDragHandleRef } = useStackItem();
+
+  const Root = asChild ? Slot : 'div';
+
+  return (
+    <Root ref={selfDragHandleRef} role='button'>
+      {children}
+    </Root>
+  );
+};

package/src/components/StackItemHeading.tsx

@@ -9,13 +9,12 @@ import { type ThemedClassName } from '@dxos/react-ui';
 import { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useStack, useStackItem } from './StackContext';
+import { useStack } from './StackContext';
 
 export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
 export const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {
   const { orientation } = useStack();
-  const { selfDragHandleRef } = useStackItem();
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
   return (
     <div
@@ -24,11 +23,10 @@ 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,
       )}
-      ref={selfDragHandleRef}
     >
       {children}
     </div>
@@ -45,7 +43,7 @@ export const StackItemHeadingLabel = forwardRef<HTMLHeadingElement, StackItemHea
         {...props}
         data-attention={((related && isRelated) || hasAttention || isAncestor).toString()}
         className={mx(
-          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText',
+          'pli-1 min-is-0 is-0 grow truncate font-medium text-baseText data-[attention=true]:text-accentText self-center',
           classNames,
         )}
         ref={forwardedRef}