@dxos/react-ui-stack 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/{Stack.stories.tsx → Stack/Stack.stories.tsx}

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import '@dxos-theme';
+
 import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React, { useState, useCallback } from 'react';
@@ -10,8 +12,8 @@ import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { Stack } from './Stack';
-import { type StackItemData } from './StackContext';
-import { StackItem } from './StackItem';
+import { StackItem } from '../StackItem';
+import { type StackItemData } from '../defs';
 
 type StoryStackItem = {
   id: string;
@@ -27,7 +29,7 @@ const KanbanBlock = ({ item }: { item: StoryStackItem }) => {
   );
 };
 
-const StorybookStack = () => {
+const DefaultStory = () => {
   const [columns, setColumns] = useState<StoryStackItem[]>(
     faker.helpers.multiple(
       () =>
@@ -95,14 +97,24 @@ const StorybookStack = () => {
   return (
     <main className='fixed inset-0'>
       <Stack orientation='horizontal' size='contain' onRearrange={reorderItem}>
-        {columns.map((column) => (
-          <StackItem.Root key={column.id} item={column}>
+        {columns.map((column, columnIndex, columnsArray) => (
+          <StackItem.Root
+            key={column.id}
+            item={column}
+            prevSiblingId={columnIndex > 0 ? columnsArray[columnIndex - 1].id : undefined}
+            nextSiblingId={columnIndex < columnsArray.length - 1 ? columnsArray[columnIndex + 1].id : undefined}
+          >
             <StackItem.Heading>
               <StackItem.ResizeHandle />
             </StackItem.Heading>
             <Stack orientation='vertical' size='contain'>
-              {column.items?.map((card) => (
-                <StackItem.Root key={card.id} item={card}>
+              {column.items?.map((card, cardIndex, cardsArray) => (
+                <StackItem.Root
+                  key={card.id}
+                  item={card}
+                  prevSiblingId={cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined}
+                  nextSiblingId={cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined}
+                >
                   <StackItem.Heading>
                     <StackItem.ResizeHandle />
                   </StackItem.Heading>
@@ -117,19 +129,19 @@ const StorybookStack = () => {
   );
 };
 
-type Story = StoryObj<typeof StorybookStack>;
-
-export const Default: Story = {
-  args: {
-    orientation: 'horizontal',
-  },
-};
-
-const meta: Meta<typeof StorybookStack> = {
+const meta: Meta<typeof DefaultStory> = {
   title: 'ui/react-ui-stack/Stack',
-  component: StorybookStack,
+  component: DefaultStory,
   decorators: [withTheme],
   argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
 };
 
 export default meta;
+
+type Story = StoryObj<typeof DefaultStory>;
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+};

package/src/components/{Stack.tsx → Stack/Stack.tsx}

@@ -4,19 +4,33 @@
 
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
-import React, { Children, type CSSProperties, type ComponentPropsWithRef, forwardRef, useState, useMemo } from 'react';
+import React, {
+  Children,
+  type CSSProperties,
+  type ComponentPropsWithRef,
+  forwardRef,
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+} from 'react';
 
 import { type ThemedClassName, ListItem } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { type StackContextValue, StackContext } from './StackContext';
-import { useStackDropForElements } from '../hooks';
+import { useStackDropForElements } from '../../hooks';
+import { StackContext } from '../StackContext';
+import { type StackContextValue } from '../defs';
 
 export type Orientation = 'horizontal' | 'vertical';
 export type Size = 'intrinsic' | 'contain' | 'contain-fit-content';
 
 export type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &
-  Partial<StackContextValue> & { itemsCount?: number };
+  Partial<StackContextValue> & {
+    itemsCount?: number;
+    getDropElement?: (stackElement: HTMLDivElement) => HTMLDivElement;
+    separatorOnScroll?: 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]]';
@@ -40,6 +54,8 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       size = 'intrinsic',
       onRearrange,
       itemsCount = Children.count(children),
+      getDropElement,
+      separatorOnScroll,
       ...props
     },
     forwardedRef,
@@ -58,12 +74,29 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
 
     const { dropping } = useStackDropForElements({
       id: props.id,
-      element: stackElement,
+      element: getDropElement && stackElement ? getDropElement(stackElement) : stackElement,
+      scrollElement: stackElement,
       selfDroppable,
       orientation,
       onRearrange,
     });
 
+    const handleScroll = useCallback(() => {
+      if (stackElement && Number.isFinite(separatorOnScroll)) {
+        const scrollPosition = orientation === 'horizontal' ? stackElement.scrollLeft : stackElement.scrollTop;
+        const scrollSize = orientation === 'horizontal' ? stackElement.scrollWidth : stackElement.scrollHeight;
+        const clientSize = orientation === 'horizontal' ? stackElement.clientWidth : stackElement.clientHeight;
+        const separatorHost = stackElement.closest('[data-scroll-separator]');
+        if (separatorHost) {
+          separatorHost.setAttribute('data-scroll-separator', String(scrollPosition > separatorOnScroll!));
+          separatorHost.setAttribute(
+            'data-scroll-separator-end',
+            String(scrollSize - (scrollPosition + clientSize) > separatorOnScroll!),
+          );
+        }
+      }
+    }, [stackElement, separatorOnScroll, orientation]);
+
     const gridClasses = useMemo(() => {
       if (!rail) {
         return orientation === 'horizontal' ? 'grid-rows-1 pli-1' : 'grid-cols-1 plb-1';
@@ -75,6 +108,22 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       }
     }, [rail, orientation, size]);
 
+    useEffect(() => {
+      if (!(stackElement && Number.isFinite(separatorOnScroll))) {
+        return;
+      }
+
+      const observer = new MutationObserver(() => {
+        handleScroll();
+      });
+
+      observer.observe(stackElement, { childList: true, subtree: true });
+
+      return () => {
+        observer.disconnect();
+      };
+    }, [stackElement, handleScroll]);
+
     return (
       <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
         <div
@@ -93,6 +142,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
           aria-orientation={orientation}
           style={styles}
           ref={composedItemRef}
+          {...(Number.isFinite(separatorOnScroll) && { onScroll: handleScroll })}
         >
           {children}
           {selfDroppable && dropping && (

package/src/components/Stack/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './Stack';

package/src/components/StackContext.tsx

@@ -2,22 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-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 = DndSize;
-
-export type StackItemData = { id: string; type: 'column' | 'card' };
-
-export type StackItemRearrangeHandler<Data extends { id: string } = StackItemData> = (
-  source: Data,
-  target: Data,
-  closestEdge: Edge | null,
-) => void;
+import { type StackItemSize, type StackItemRearrangeHandler } from './defs';
 
 export type StackContextValue = {
   orientation: Orientation;
@@ -34,16 +22,36 @@ export const StackContext = createContext<StackContextValue>({
 
 export const useStack = () => useContext(StackContext);
 
+export type ItemDragState =
+  | {
+      type: 'idle';
+    }
+  | {
+      type: 'preview';
+      container: HTMLElement;
+      item: any;
+    }
+  | {
+      type: 'is-dragging';
+      item: any;
+    };
+
+export const idle: ItemDragState = { type: 'idle' };
+
 export type StackItemContextValue = {
   selfDragHandleRef: (element: HTMLDivElement | null) => void;
   size: StackItemSize;
   setSize: (nextSize: StackItemSize, commit?: boolean) => void;
+  state: ItemDragState;
+  setState: (state: ItemDragState) => void;
 };
 
 export const StackItemContext = createContext<StackItemContextValue>({
   selfDragHandleRef: () => {},
   size: 'min-content',
   setSize: () => {},
+  state: idle,
+  setState: () => {},
 });
 
 export const useStackItem = () => useContext(StackItemContext);

package/src/components/StackItem/StackItem.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Icon, DropdownMenu } from '@dxos/react-ui';
+import { withTheme } from '@dxos/storybook-utils';
+
+import { StackItem } from './StackItem';
+
+const meta: Meta<typeof StackItem.Root> = {
+  title: 'ui/react-ui-stack/StackItem',
+  component: StackItem.Root,
+  render: (args) => (
+    <StackItem.Root role='section' {...args} classNames='w-[20rem] border border-separator'>
+      <StackItem.Heading>
+        <span className='sr-only'>Title</span>
+        <div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <StackItem.SigilButton>
+                <Icon icon={'ph--dots-three--regular'} size={5} />
+              </StackItem.SigilButton>
+            </DropdownMenu.Trigger>
+          </DropdownMenu.Root>
+        </div>
+      </StackItem.Heading>
+      <StackItem.Content classNames='p-2'>Content</StackItem.Content>
+    </StackItem.Root>
+  ),
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StackItem.Root>;
+
+export const Default: Story = {
+  args: {
+    item: { id: '1' },
+  },
+};

package/src/components/{StackItem.tsx → StackItem/StackItem.tsx}

@@ -5,7 +5,7 @@
 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 { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
   attachClosestEdge,
   extractClosestEdge,
@@ -13,13 +13,20 @@ import {
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 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 React, {
+  forwardRef,
+  useLayoutEffect,
+  useState,
+  type ComponentPropsWithRef,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
 
 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';
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
 import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
 import {
@@ -36,15 +43,19 @@ import {
   type StackItemSigilButtonProps,
   StackItemSigilButton,
 } from './StackItemSigil';
+import { useStack, StackItemContext, idle, type ItemDragState, useStackItem } from '../StackContext';
+import { type StackItemSize, type StackItemData } from '../defs';
 
 // 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;
 
-export type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
+type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
   item: Omit<StackItemData, 'type'>;
   order?: number;
+  prevSiblingId?: string;
+  nextSiblingId?: string;
   size?: StackItemSize;
   onSizeChange?: (nextSize: StackItemSize) => void;
   role?: 'article' | 'section';
@@ -62,6 +73,8 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
       onSizeChange,
       role,
       order,
+      prevSiblingId,
+      nextSiblingId,
       style,
       disableRearrange,
       focusIndicatorVariant = 'over-all',
@@ -72,6 +85,8 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
     const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
     const [closestEdge, setEdge] = useState<Edge | null>(null);
+    const [sourceId, setSourceId] = useState<string | null>(null);
+    const [dragState, setDragState] = useState<ItemDragState>(idle);
     const { orientation, rail, onRearrange } = useStack();
     const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
       useState(propsSize);
@@ -104,18 +119,28 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           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,
+            const offsetFn = preserveOffsetOnSource({ element: source.element, input: location.current.input });
+            const rect = source.element.getBoundingClientRect();
+            setCustomNativeDragPreview({
+              nativeSetDragImage,
+              getOffset: ({ container }) => {
+                return offsetFn({ container });
+              },
+              render: ({ container }) => {
+                container.style.width = rect.width + 'px';
+                setDragState({ type: 'preview', container, item });
+                return () => {};
+              },
             });
-            nativeSetDragImage?.(source.element, x, y);
           },
           onDragStart: () => {
             document.body.removeAttribute('data-drag-preview');
             itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'active');
+            setDragState({ type: 'is-dragging', item });
           },
           onDrop: () => {
             itemElement?.closest('[data-drag-autoscroll]')?.setAttribute('data-drag-autoscroll', 'idle');
+            setDragState(idle);
           },
         }),
         dropTargetForElements({
@@ -129,16 +154,22 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           onDragEnter: ({ self, source }) => {
             if (source.data.type === self.data.type) {
               setEdge(extractClosestEdge(self.data));
+              setSourceId(source.data.id as string);
             }
           },
           onDrag: ({ self, source }) => {
             if (source.data.type === self.data.type) {
               setEdge(extractClosestEdge(self.data));
+              setSourceId(source.data.id as string);
             }
           },
-          onDragLeave: () => setEdge(null),
+          onDragLeave: () => {
+            setEdge(null);
+            setSourceId(null);
+          },
           onDrop: ({ self, source }) => {
             setEdge(null);
+            setSourceId(null);
             if (source.data.type === self.data.type) {
               onRearrange(source.data as StackItemData, self.data as StackItemData, extractClosestEdge(self.data));
             }
@@ -149,8 +180,42 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
+    // Determine if the drop would result in any changes
+    const shouldShowDropIndicator = () => {
+      if (!closestEdge || !sourceId) {
+        return false;
+      }
+
+      // Don't show indicator when dragged item is over itself
+      if (sourceId === item.id) {
+        return false;
+      }
+
+      // Don't show indicator when dragged item is over the trailing edge of its previous sibling
+      const isTrailingEdgeOfPrevSibling =
+        prevSiblingId !== undefined &&
+        sourceId === prevSiblingId &&
+        ((orientation === 'horizontal' && closestEdge === 'left') ||
+          (orientation === 'vertical' && closestEdge === 'top'));
+      if (isTrailingEdgeOfPrevSibling) {
+        return false;
+      }
+
+      // Don't show indicator when dragged item is over the leading edge of its next sibling
+      const isLeadingEdgeOfNextSibling =
+        nextSiblingId !== undefined &&
+        sourceId === nextSiblingId &&
+        ((orientation === 'horizontal' && closestEdge === 'right') ||
+          (orientation === 'vertical' && closestEdge === 'bottom'));
+      if (isLeadingEdgeOfNextSibling) {
+        return false;
+      }
+
+      return true;
+    };
+
     return (
-      <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize }}>
+      <StackItemContext.Provider value={{ selfDragHandleRef, size, setSize, state: dragState, setState: setDragState }}>
         <Root
           {...props}
           tabIndex={0}
@@ -178,13 +243,24 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
           ref={composedItemRef}
         >
           {children}
-          {closestEdge && <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />}
+          {shouldShowDropIndicator() && closestEdge && (
+            <ListItem.DropIndicator lineInset={8} terminalInset={-8} edge={closestEdge} />
+          )}
         </Root>
       </StackItemContext.Provider>
     );
   },
 );
 
+type StackItemDragPreviewProps = {
+  children: ({ item }: { item: any }) => ReactNode;
+};
+
+export const StackItemDragPreview = ({ children }: StackItemDragPreviewProps) => {
+  const { state } = useStackItem();
+  return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;
+};
+
 export const StackItem = {
   Root: StackItemRoot,
   Content: StackItemContent,
@@ -194,9 +270,11 @@ export const StackItem = {
   DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
   SigilButton: StackItemSigilButton,
+  DragPreview: StackItemDragPreview,
 };
 
 export type {
+  StackItemRootProps,
   StackItemContentProps,
   StackItemHeadingProps,
   StackItemHeadingLabelProps,
@@ -205,4 +283,5 @@ export type {
   StackItemSigilProps,
   StackItemSigilButtonProps,
   StackItemSigilAction,
+  StackItemDragPreviewProps,
 };

package/src/components/{StackItemContent.tsx → StackItem/StackItemContent.tsx}

@@ -7,7 +7,7 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { useStack } from './StackContext';
+import { useStack } from '../StackContext';
 
 export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
   /**
@@ -53,6 +53,7 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
             ...(statusbar ? ['var(--statusbar-size)'] : []),
           ].join(' '),
         }}
+        data-popover-collision-boundary={true}
         ref={forwardedRef}
       >
         {children}

package/src/components/{StackItemDragHandle.tsx → StackItem/StackItemDragHandle.tsx}

@@ -5,9 +5,9 @@
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef } from 'react';
 
-import { useStackItem } from './StackContext';
+import { useStackItem } from '../StackContext';
 
-export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild: boolean };
+export type StackItemDragHandleProps = ComponentPropsWithoutRef<'button'> & { asChild?: boolean };
 
 export const StackItemDragHandle = ({ asChild, children }: StackItemDragHandleProps) => {
   const { selfDragHandleRef } = useStackItem();

package/src/components/{StackItemHeading.tsx → StackItem/StackItemHeading.tsx}

@@ -3,34 +3,38 @@
 //
 
 import { useFocusableGroup } from '@fluentui/react-tabster';
+import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
 
 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 } from './StackContext';
+import { useStack } from '../StackContext';
 
-export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
+export type StackItemHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
 
-export const StackItemHeading = ({ children, classNames, ...props }: StackItemHeadingProps) => {
+export const StackItemHeading = ({ children, classNames, asChild, ...props }: StackItemHeadingProps) => {
   const { orientation } = useStack();
   const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
+  const Root = asChild ? Slot : 'div';
+
   return (
-    <div
+    <Root
       role='heading'
       {...props}
       tabIndex={0}
       {...focusableGroupAttrs}
       className={mx(
-        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0',
+        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator',
         orientation === 'horizontal' ? 'bs-[--rail-size]' : 'is-[--rail-size] flex-col',
+        orientation === 'horizontal' ? 'border-be' : 'border-ie',
         classNames,
       )}
     >
       {children}
-    </div>
+    </Root>
   );
 };
 

package/src/components/{StackItemResizeHandle.tsx → StackItem/StackItemResizeHandle.tsx}

@@ -6,8 +6,8 @@ import React from 'react';
 
 import { ResizeHandle } from '@dxos/react-ui-dnd';
 
-import { useStack, useStackItem } from './StackContext';
 import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
+import { useStack, useStackItem } from '../StackContext';
 
 const MIN_WIDTH = 20;
 const MIN_HEIGHT = 3;

package/src/components/{StackItemSigil.tsx → StackItem/StackItemSigil.tsx}

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, type PropsWithChildren, forwardRef, useRef, useState } from 'react';
+import React, { Fragment, type PropsWithChildren, forwardRef, useState } from 'react';
 
 import { type ActionLike } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
@@ -12,7 +12,7 @@ import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import { MenuSignifierHorizontal } from './MenuSignifier';
-import { translationKey } from '../translations';
+import { translationKey } from '../../translations';
 
 export type KeyBinding = {
   windows?: string;
@@ -62,7 +62,6 @@ export type StackItemSigilProps = PropsWithChildren<
 export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>(
   ({ actions: actionGroups, onAction, triggerLabel, attendableId, icon, related, children }, forwardedRef) => {
     const { t } = useTranslation(translationKey);
-    const suppressNextTooltip = useRef(false);
 
     const [optionsMenuOpen, setOptionsMenuOpen] = useState(false);
 
@@ -87,17 +86,7 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
     }
 
     return (
-      <DropdownMenu.Root
-        {...{
-          open: optionsMenuOpen,
-          onOpenChange: (nextOpen: boolean) => {
-            if (!nextOpen) {
-              suppressNextTooltip.current = true;
-            }
-            return setOptionsMenuOpen(nextOpen);
-          },
-        }}
-      >
+      <DropdownMenu.Root open={optionsMenuOpen} onOpenChange={setOptionsMenuOpen}>
         <DropdownMenu.Trigger asChild ref={forwardedRef}>
           {button}
         </DropdownMenu.Trigger>
@@ -127,7 +116,6 @@ export const StackItemSigil = forwardRef<HTMLButtonElement, StackItemSigilProps>
                             }
                             event.stopPropagation();
                             // TODO(thure): Why does Dialog’s modal-ness cause issues if we don’t explicitly close the menu here?
-                            suppressNextTooltip.current = true;
                             setOptionsMenuOpen(false);
                             onAction?.(action);
                           }}

package/src/components/StackItem/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './StackItem';