@dxos/react-ui-stack 0.8.4-main.f9ba587 → 0.8.4-main.fffef41

package/src/components/Stack/Stack.tsx

@@ -2,40 +2,41 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, {
-  Children,
   type CSSProperties,
+  Children,
   type ComponentPropsWithRef,
+  type KeyboardEvent,
   forwardRef,
-  useState,
-  useMemo,
   useCallback,
   useEffect,
+  useMemo,
+  useState,
 } from 'react';
 
-import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { ListItem, type ThemedClassName, useId } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStackDropForElements } from '../../hooks';
-import { StackContext } from '../StackContext';
 import { type StackContextValue } from '../defs';
+import { StackContext } from '../StackContext';
 
 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;
-    getDropElement?: (stackElement: HTMLDivElement) => HTMLDivElement;
-    separatorOnScroll?: number;
-  };
+/**
+ * Size is how Stack and its StackItems coordinate the dimensions of the items with the available space.
+ * - `intrinsic` signals to Stack and its StackItems to occupy their intrinsic size
+ * - Any other size will extrinsically fill the available space along the axis of its orientation and handle overflow:
+ *   - `contain` causes StackItems to occupy their intrinsic size
+ *   - `split` divides the Stack’s available space among the StackItems
+ */
+export type Size = 'intrinsic' | 'contain' | 'split';
 
 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).
+// TODO(ZaymonFC): Magic 2px to stop overflow.
 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 =
@@ -43,6 +44,24 @@ export const railGridVerticalContainFitContent =
 
 export const autoScrollRootAttributes = { 'data-drag-autoscroll': 'idle' };
 
+const PERPENDICULAR_FOCUS_THRESHHOLD = 128;
+
+const scrollIntoViewAndFocus = (el: HTMLElement, orientation: StackProps['orientation']) => {
+  el.scrollIntoView({
+    behavior: 'instant',
+    [orientation === 'vertical' ? 'block' : 'inline']: 'center',
+  });
+  return el.focus();
+};
+
+export type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &
+  Partial<StackContextValue> & {
+    itemsCount?: number;
+    getDropElement?: (stackElement: HTMLDivElement) => HTMLDivElement;
+    separatorOnScroll?: number;
+    circularFocus?: boolean;
+  };
+
 export const Stack = forwardRef<HTMLDivElement, StackProps>(
   (
     {
@@ -50,23 +69,25 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       classNames,
       style,
       orientation = 'vertical',
-      rail = true,
+      rail = true, // TODO(burdon): Change default to false.
       size = 'intrinsic',
       onRearrange,
       itemsCount = Children.count(children),
       getDropElement,
       separatorOnScroll,
+      circularFocus,
       ...props
     },
     forwardedRef,
   ) => {
+    const stackId = useId('stack', props.id);
     const [stackElement, stackRef] = useState<HTMLDivElement | null>(null);
+    const [lastFocusedItem, setLastFocusedItem] = useState<string>();
     const composedItemRef = composeRefs<HTMLDivElement>(stackRef, forwardedRef);
-    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: orientation });
 
     const styles: CSSProperties = {
       [orientation === 'horizontal' ? 'gridTemplateColumns' : 'gridTemplateRows']:
-        `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
+        size === 'split' ? `repeat(${itemsCount}, 1fr)` : `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
       ...style,
     };
 
@@ -97,14 +118,186 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       }
     }, [stackElement, separatorOnScroll, orientation]);
 
+    /**
+     * Handles blur events to track the last focused item within this stack.
+     */
+    const handleBlur = useCallback(
+      (event: React.FocusEvent<HTMLDivElement>) => {
+        if (event.target) {
+          const target = event.target as HTMLElement;
+          const closestStackItem = target.closest(`[data-dx-item-id]`) as HTMLElement | null;
+          if (closestStackItem?.closest(`[data-dx-stack="${stackId}"]`)) {
+            setLastFocusedItem(closestStackItem?.getAttribute('data-dx-item-id') ?? undefined);
+          }
+        }
+        props.onBlur?.(event);
+      },
+      [stackId, props.onBlur],
+    );
+
+    /**
+     * Handles moving focus using the arrow keys. Focus is only handled by the nearest stack;
+     * if the arrow key matches the orientation, focus cycles between items, otherwise focus is passed to an adjacent stack item;
+     * or, if there is no such stack item, focus is passed to the adjacent empty stack if one can be found.
+     */
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLDivElement>) => {
+        const target = event.target as HTMLElement;
+        if (
+          event.key.startsWith('Arrow') &&
+          !target.closest(
+            `input, textarea, [role="textbox"], [data-tabster*="mover"], [data-arrow-keys="all"], [data-arrow-keys~="${event.key.toLowerCase().slice(5)}"]`,
+          )
+        ) {
+          const closestOwnedItem = target.closest(`[data-dx-stack-item="${stackId}"]`);
+          const closestStack = target.closest('[data-dx-stack]') as HTMLElement | null;
+          const closestStackItems = Array.from(
+            closestStack?.querySelectorAll(`[data-dx-stack-item="${stackId}"]`) ?? [],
+          );
+          const closestStackOrientation = closestStack?.getAttribute('aria-orientation') as Orientation;
+          const ancestorStack = closestStack?.parentElement?.closest('[data-dx-stack]') as HTMLElement | null;
+          if (closestOwnedItem && closestStack) {
+            const ancestorOrientation = ancestorStack?.getAttribute('aria-orientation') as Orientation | undefined;
+            const parallelDelta = (
+              closestStackOrientation === 'vertical' ? event.key === 'ArrowUp' : event.key === 'ArrowLeft'
+            )
+              ? -1
+              : (closestStackOrientation === 'vertical' ? event.key === 'ArrowDown' : event.key === 'ArrowRight')
+                ? 1
+                : 0;
+            const perpendicularDelta = (
+              closestStackOrientation === 'vertical' ? event.key === 'ArrowLeft' : event.key === 'ArrowUp'
+            )
+              ? -1
+              : (closestStackOrientation === 'vertical' ? event.key === 'ArrowRight' : event.key === 'ArrowDown')
+                ? 1
+                : 0;
+            if (parallelDelta !== 0) {
+              const currentIndex = closestStackItems.indexOf(closestOwnedItem);
+              const nextIndex = currentIndex + parallelDelta;
+              let adjacentItem: HTMLElement | undefined;
+
+              if (circularFocus) {
+                // Circular navigation: wrap around using modulo.
+                adjacentItem = closestStackItems[(nextIndex + closestStackItems.length) % closestStackItems.length] as
+                  | HTMLElement
+                  | undefined;
+              } else {
+                // Non-circular navigation: only move if within bounds.
+                if (nextIndex >= 0 && nextIndex < closestStackItems.length) {
+                  adjacentItem = closestStackItems[nextIndex] as HTMLElement | undefined;
+                }
+              }
+
+              if (adjacentItem) {
+                event.preventDefault();
+                scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
+              }
+            }
+            if (perpendicularDelta !== 0) {
+              if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
+                const siblingStacks = Array.from(
+                  ancestorStack.querySelectorAll(
+                    `[data-dx-stack-item="${ancestorStack.getAttribute('data-dx-stack')}"] [data-dx-stack]`,
+                  ),
+                ) as HTMLElement[];
+                const currentStackIndex = siblingStacks.indexOf(closestStack);
+                const nextStackIndex = currentStackIndex + perpendicularDelta;
+                let adjacentStack: HTMLElement | undefined;
+
+                if (ancestorStack.getAttribute('data-dx-stack-circular-focus') === 'true') {
+                  // Circular navigation: wrap around using modulo.
+                  adjacentStack = siblingStacks[(nextStackIndex + siblingStacks.length) % siblingStacks.length] as
+                    | HTMLElement
+                    | undefined;
+                } else {
+                  // Non-circular navigation: only move if within bounds.
+                  if (nextStackIndex >= 0 && nextStackIndex < siblingStacks.length) {
+                    adjacentStack = siblingStacks[nextStackIndex] as HTMLElement | undefined;
+                  }
+                }
+                const adjacentStackSelfItem = adjacentStack?.closest(
+                  `[data-dx-stack-item=${ancestorStack.getAttribute('data-dx-stack')}]`,
+                ) as HTMLElement | undefined;
+                const adjacentStackItems = adjacentStack
+                  ? (Array.from(
+                      adjacentStack.querySelectorAll(
+                        `[data-dx-stack-item="${adjacentStack.getAttribute('data-dx-stack')}"]`,
+                      ),
+                    ) as HTMLElement[])
+                  : [];
+                if (adjacentStack && adjacentStackItems.length > 0) {
+                  // Check if the adjacent stack has a last focused item recorded, otherwise find the closest item by position.
+                  let closestItem = adjacentStackItems[0];
+                  // Try to find an item with matching data-dx-stack-item value.
+                  const lastFocusedItem = adjacentStack.querySelector(
+                    `[data-dx-item-id="${adjacentStack.getAttribute('data-dx-last-focused-item') ?? 'never'}"]`,
+                  );
+                  if (lastFocusedItem) {
+                    closestItem = lastFocusedItem as HTMLElement;
+                  } else {
+                    // Fall back to positional calculation
+                    const ownedItemRect = closestOwnedItem.getBoundingClientRect();
+                    const targetPosition =
+                      closestStackOrientation === 'vertical' ? ownedItemRect.top : ownedItemRect.left;
+
+                    let closestDistance = Infinity;
+                    for (const item of adjacentStackItems) {
+                      const itemRect = item.getBoundingClientRect();
+                      const itemPosition = closestStackOrientation === 'vertical' ? itemRect.top : itemRect.left;
+                      const distance = Math.abs(itemPosition - targetPosition);
+                      if (distance < closestDistance) {
+                        closestDistance = distance;
+                        closestItem = item;
+                      }
+                      if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
+                        break;
+                      }
+                    }
+                  }
+
+                  event.preventDefault();
+                  scrollIntoViewAndFocus(closestItem, closestStackOrientation);
+                } else if (adjacentStackSelfItem) {
+                  event.preventDefault();
+                  scrollIntoViewAndFocus(adjacentStackSelfItem, ancestorOrientation);
+                }
+              } else if (closestOwnedItem) {
+                const closestOwnedItemStack = closestOwnedItem.querySelector('[data-dx-stack]');
+                const closestOwnedItemStackItems = closestOwnedItemStack
+                  ? (Array.from(
+                      closestOwnedItemStack.querySelectorAll(
+                        `[data-dx-stack-item="${closestOwnedItemStack.getAttribute('data-dx-stack')}"]`,
+                      ),
+                    ) as HTMLElement[])
+                  : [];
+                if (closestOwnedItemStackItems.length > 0) {
+                  event.preventDefault();
+                  scrollIntoViewAndFocus(
+                    closestOwnedItemStackItems[
+                      ['ArrowUp', 'ArrowLeft'].includes(event.key) ? closestOwnedItemStackItems.length - 1 : 0
+                    ],
+                    closestOwnedItemStack?.getAttribute('aria-orientation') as Orientation,
+                  );
+                }
+              }
+            }
+          }
+        }
+        props.onKeyDown?.(event);
+      },
+      [props.onKeyDown, stackId, circularFocus],
+    );
+
     const gridClasses = useMemo(() => {
       if (!rail) {
-        return orientation === 'horizontal' ? 'grid-rows-1 pli-1' : 'grid-cols-1 plb-1';
+        return orientation === 'horizontal' ? 'grid-rows-1 pli-[--stack-gap]' : 'grid-cols-1 plb-[--stack-gap]';
       }
+
       if (orientation === 'horizontal') {
-        return size === 'contain-fit-content' ? railGridHorizontalContainFitContent : railGridHorizontal;
+        return railGridHorizontal;
       } else {
-        return size === 'contain-fit-content' ? railGridVerticalContainFitContent : railGridVertical;
+        return railGridVertical;
       }
     }, [rail, orientation, size]);
 
@@ -125,19 +318,23 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
     }, [stackElement, handleScroll]);
 
     return (
-      <StackContext.Provider value={{ orientation, rail, size, onRearrange }}>
+      <StackContext.Provider value={{ orientation, rail, size, onRearrange, stackId }}>
         <div
           {...props}
-          {...arrowNavigationAttrs}
           className={mx(
-            'grid relative',
+            'grid relative [--stack-gap:var(--dx-trimXs)]',
             gridClasses,
-            (size === 'contain' || size === 'contain-fit-content') &&
+            size === 'contain' &&
               (orientation === 'horizontal'
-                ? 'overflow-x-auto min-bs-0 max-bs-full bs-full'
+                ? 'overflow-x-auto overscroll-x-contain min-bs-0 max-bs-full bs-full'
                 : 'overflow-y-auto min-is-0 max-is-full is-full'),
             classNames,
           )}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          data-dx-stack={stackId}
+          data-dx-stack-circular-focus={circularFocus}
+          data-dx-last-focused-item={lastFocusedItem}
           data-rail={rail}
           aria-orientation={orientation}
           style={styles}

package/src/components/StackContext.tsx

@@ -4,14 +4,15 @@
 
 import { createContext, useContext } from 'react';
 
+import { type StackItemRearrangeHandler, type StackItemSize } from './defs';
 import { type Orientation, type Size } from './Stack';
-import { type StackItemSize, type StackItemRearrangeHandler } from './defs';
 
 export type StackContextValue = {
   orientation: Orientation;
   rail: boolean;
   size: Size;
   onRearrange?: StackItemRearrangeHandler;
+  stackId?: string;
 };
 
 export const StackContext = createContext<StackContextValue>({

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

@@ -2,21 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Icon, DropdownMenu } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { DropdownMenu, Icon } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { StackItem } from './StackItem';
+import { StackItem, type StackItemRootProps } 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'>
+const DefaultStory = (props: StackItemRootProps) => {
+  return (
+    <StackItem.Root role='section' {...props} classNames='is-[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'>
@@ -29,18 +25,24 @@ const meta: Meta<typeof StackItem.Root> = {
           </DropdownMenu.Root>
         </div>
       </StackItem.Heading>
-      <StackItem.Content classNames='p-2'>Content</StackItem.Content>
+      <StackItem.Content>Content</StackItem.Content>
     </StackItem.Root>
-  ),
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-stack/StackItem',
+  component: StackItem.Root as any,
+  render: DefaultStory,
   decorators: [withTheme],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<typeof StackItem.Root>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/StackItem/StackItem.tsx

@@ -7,46 +7,47 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
+  type Edge,
   attachClosestEdge,
   extractClosestEdge,
-  type Edge,
 } 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,
   type ReactNode,
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
   useMemo,
+  useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 
-import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type StackItemData, type StackItemSize } from '../defs';
+import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
+
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
 import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
 import {
   StackItemHeading,
   StackItemHeadingLabel,
-  type StackItemHeadingProps,
   type StackItemHeadingLabelProps,
+  type StackItemHeadingProps,
   StackItemHeadingStickyContent,
 } from './StackItemHeading';
 import { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';
 import {
   StackItemSigil,
-  type StackItemSigilProps,
   type StackItemSigilAction,
-  type StackItemSigilButtonProps,
   StackItemSigilButton,
+  type StackItemSigilButtonProps,
+  type StackItemSigilProps,
 } 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;
@@ -62,7 +63,7 @@ type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
   onSizeChange?: (nextSize: StackItemSize) => void;
   role?: 'article' | 'section';
   disableRearrange?: boolean;
-  focusIndicatorVariant?: 'over-all' | 'group';
+  focusIndicatorVariant?: 'over-all' | 'group' | 'over-all-always' | 'group-always';
 };
 
 const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
@@ -89,7 +90,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     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 { orientation, rail, onRearrange, size: stackSize, stackId } = useStack();
     const [size = orientation === 'horizontal' ? DEFAULT_HORIZONTAL_SIZE : DEFAULT_VERTICAL_SIZE, setInternalSize] =
       useState(propsSize);
 
@@ -231,18 +232,25 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
             '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',
+              : focusIndicatorVariant === 'over-all-always'
+                ? 'dx-focus-ring-inset-over-all-always'
+                : orientation === 'horizontal'
+                  ? focusIndicatorVariant === 'group-always'
+                    ? 'dx-focus-ring-group-x-always'
+                    : 'dx-focus-ring-group-x'
+                  : focusIndicatorVariant === 'group-always'
+                    ? 'dx-focus-ring-group-y-always'
+                    : 'dx-focus-ring-group-y',
             orientation === 'horizontal' ? 'grid-rows-subgrid' : 'grid-cols-subgrid',
             rail && (orientation === 'horizontal' ? 'row-span-2' : 'col-span-2'),
             role === 'section' && orientation !== 'horizontal' && 'border-be border-subduedSeparator',
             classNames,
           )}
-          data-dx-stack-item
+          data-dx-stack-item={stackId}
+          data-dx-item-id={item.id}
           {...resizeAttributes}
           style={{
-            ...sizeStyle(size, orientation),
+            ...(stackSize !== 'split' && sizeStyle(size, orientation)),
             ...(Number.isFinite(order) && {
               [orientation === 'horizontal' ? 'gridColumn' : 'gridRow']: `${order}`,
             }),

package/src/components/StackItem/StackItemContent.tsx

@@ -9,7 +9,8 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { useStack, useStackItem } from '../StackContext';
 
-export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+// TODO(burdon): Add prop for container-max-width?
+export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'scrollable'>> & {
   /**
    * 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.
@@ -22,15 +23,21 @@ export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'di
   statusbar?: boolean;
 
   /**
-   * Whether the consumer intends to do something custom and typical affordances should not apply
+   * Whether to support y-axis scrolling.
    */
-  layoutManaged?: boolean;
+  scrollable?: 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.
+   * 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';
+
+  /**
+   * Whether the consumer intends to do something custom and typical affordances should not apply.
+   * @deprecated Replace with override for gridTempateRows.
+   */
+  layoutManaged?: boolean;
 };
 
 /**
@@ -38,7 +45,10 @@ export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'di
  * 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, layoutManaged, classNames, size = 'intrinsic', ...props }, forwardedRef) => {
+  (
+    { children, toolbar, statusbar, layoutManaged, classNames, size = 'intrinsic', scrollable, ...props },
+    forwardedRef,
+  ) => {
     const { size: stackItemSize } = useStack();
     const { role } = useStackItem();
     const style = useMemo(
@@ -54,18 +64,20 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
             },
       [toolbar, statusbar, layoutManaged],
     );
+
     return (
       <div
         role='none'
         {...props}
         className={mx(
-          'group grid grid-cols-[100%]',
-          stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
+          'group grid grid-cols-[100%] density-coarse',
           size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
-          toolbar && '[&_.dx-toolbar]:relative [&_.dx-toolbar]:border-be [&_.dx-toolbar]:border-subduedSeparator',
+          stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
+          scrollable ? 'min-bs-0 overflow-y-auto scrollbar-thin contain-layout' : 'overflow-hidden',
           role === 'section' &&
             toolbar &&
             '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',
+          toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
           classNames,
         )}
         style={style}

package/src/components/StackItem/StackItemHeading.tsx

@@ -2,17 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
-  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
-  forwardRef,
+  type ComponentPropsWithoutRef,
   type PropsWithChildren,
+  forwardRef,
 } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';
+import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStack } from '../StackContext';
@@ -30,7 +29,6 @@ export const StackItemHeading = ({
   ...props
 }: StackItemHeadingProps) => {
   const { orientation } = useStack();
-  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
   const Root = asChild ? Slot : 'div';
 
@@ -38,10 +36,8 @@ export const StackItemHeading = ({
     <Root
       role='heading'
       {...props}
-      tabIndex={0}
-      {...focusableGroupAttrs}
       className={mx(
-        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface',
+        'flex items-center !border-is-0 bg-headerSurface',
         separateOnScroll
           ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator'
           : 'border-subduedSeparator',

package/src/components/StackItem/StackItemResizeHandle.tsx

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

package/src/components/StackItem/StackItemSigil.tsx

@@ -11,9 +11,10 @@ import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-at
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { MenuSignifierHorizontal } from './MenuSignifier';
 import { translationKey } from '../../translations';
 
+import { MenuSignifierHorizontal } from './MenuSignifier';
+
 export type KeyBinding = {
   windows?: string;
   macos?: string;

package/src/components/index.ts

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './defs';
+export type * from './defs';
 
+export * from './Image';
 export * from './Stack';
 export * from './StackItem';