@dxos/react-ui-stack 0.8.4-main.c1de068 → 0.8.4-main.c4373fc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.c4373fc",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -54,36 +54,36 @@
     "@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.8.4-main.c1de068",
-    "@dxos/keyboard": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/react-ui-attention": "0.8.4-main.c1de068",
-    "@dxos/react-ui-dnd": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068"
+    "@dxos/echo": "0.8.4-main.c4373fc",
+    "@dxos/live-object": "0.8.4-main.c4373fc",
+    "@dxos/keyboard": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-dnd": "0.8.4-main.c4373fc",
+    "@dxos/util": "0.8.4-main.c4373fc",
+    "@dxos/storybook-utils": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-attention": "0.8.4-main.c4373fc"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/app-graph": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/client": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/test-utils": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/app-graph": "0.8.4-main.c4373fc",
+    "@dxos/client": "0.8.4-main.c4373fc",
+    "@dxos/echo": "0.8.4-main.c4373fc",
+    "@dxos/random": "0.8.4-main.c4373fc",
+    "@dxos/react-ui": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-theme": "0.8.4-main.c4373fc",
+    "@dxos/storybook-utils": "0.8.4-main.c4373fc",
+    "@dxos/test-utils": "0.8.4-main.c4373fc"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/client": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/random": "0.8.4-main.c4373fc",
+    "@dxos/client": "0.8.4-main.c4373fc",
+    "@dxos/react-ui": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Image/Image.stories.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { Image } from './Image';
+
+faker.seed(1);
+
+const meta = {
+  title: 'ui/react-ui-stack/Image',
+  component: Image,
+  render: (args) => (
+    <div className='absolute inset-0 flex place-items-center'>
+      <Image {...args} />
+    </div>
+  ),
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Image>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    src: faker.image.url(),
+  },
+};
+
+/**
+ * Access to image at 'https://dxos.network/dxos-logotype-blue.png'
+ * from origin 'http://localhost:9009' has been blocked by CORS policy:
+ * No 'Access-Control-Allow-Origin' header is present on the requested resource.
+ */
+export const Cors: Story = {
+  args: {
+    src: 'https://dxos.network/dxos-logotype-blue.png',
+    classNames: 'w-[20rem]',
+  },
+};
+
+export const SVG: Story = {
+  args: {
+    src: 'https://dxos.network/bg-kube.svg',
+    classNames: 'w-[20rem]',
+  },
+};

package/src/components/Image/Image.tsx

@@ -0,0 +1,137 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type SyntheticEvent, useRef, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+export type ImageProps = ThemedClassName<{
+  src: string;
+  alt?: string;
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  sampleSize?: number;
+  contrast?: number;
+}>;
+
+export const Image = ({
+  classNames,
+  src,
+  alt = '',
+  crossOrigin = 'anonymous',
+  sampleSize = 64,
+  contrast = 0.95,
+}: ImageProps) => {
+  const [crossOriginState, setCrossOriginState] = useState<ImageProps['crossOrigin']>(crossOrigin);
+  const [dominantColor, setDominantColor] = useState<string | undefined>(undefined);
+  const [imageLoaded, setImageLoaded] = useState<boolean>(false);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  // TODO(burdon): Cache?
+  const extractDominantColor = (img: HTMLImageElement): void => {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (!canvas || !ctx) {
+      return;
+    }
+
+    // Draw the image scaled down.
+    canvas.width = sampleSize;
+    canvas.height = sampleSize;
+    ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+
+    try {
+      // Get image data.
+      const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+      const pixels = imageData.data;
+
+      // Calculate average color with more weight to vibrant colors.
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      let totalWeight = 0;
+      for (let i = 0; i < pixels.length; i += 4) {
+        const red = pixels[i];
+        const green = pixels[i + 1];
+        const blue = pixels[i + 2];
+        const alpha = pixels[i + 3];
+
+        // Skip transparent pixels.
+        if (alpha === 0) continue;
+
+        // Calculate saturation to weight vibrant colors more.
+        const max = Math.max(red, green, blue);
+        const min = Math.min(red, green, blue);
+        const saturation = max === 0 ? 0 : (max - min) / max;
+        const weight = 1 + saturation * 2; // Give more weight to saturated colors.
+
+        r += red * weight;
+        g += green * weight;
+        b += blue * weight;
+        totalWeight += weight;
+      }
+
+      if (totalWeight > 0) {
+        r = Math.round(r / totalWeight);
+        g = Math.round(g / totalWeight);
+        b = Math.round(b / totalWeight);
+
+        // Slightly darken the color for better contrast.
+        r = Math.round(r * contrast);
+        g = Math.round(g * contrast);
+        b = Math.round(b * contrast);
+        setDominantColor(`rgb(${r}, ${g}, ${b})`);
+      }
+    } catch {
+      setCrossOriginState(undefined);
+    }
+  };
+
+  // CORS not supported by server.
+  const handleImageError = (): void => {
+    setCrossOriginState(undefined);
+  };
+
+  const handleImageLoad = (ev: SyntheticEvent<HTMLImageElement>): void => {
+    const img = ev.target as HTMLImageElement;
+    extractDominantColor(img);
+    setImageLoaded(true);
+  };
+
+  return (
+    <div
+      className={mx(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames)}
+      style={{
+        backgroundColor: dominantColor,
+      }}
+    >
+      {/* Hidden canvas for color extraction. */}
+      <canvas ref={canvasRef} style={{ display: 'none' }} aria-hidden='true' />
+
+      {/* Background gradient overlay for smooth transition. */}
+      <div
+        className='absolute inset-0 pointer-events-none'
+        style={{
+          background: dominantColor
+            ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)`
+            : undefined,
+          transition: 'opacity 0.7s ease-in-out',
+          opacity: 0.5,
+        }}
+      />
+
+      <img
+        src={src}
+        alt={alt}
+        crossOrigin={crossOriginState}
+        onError={handleImageError}
+        onLoad={handleImageLoad}
+        className={mx('z-10 object-contain transition-opacity duration-500', classNames)}
+        style={{
+          opacity: imageLoaded ? 1 : 0,
+        }}
+      />
+    </div>
+  );
+};

package/src/components/Image/index.ts

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

package/src/components/Stack/Stack.stories.tsx

@@ -2,18 +2,17 @@
 // 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-vite';
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { Stack } from './Stack';
-import { StackItem } from '../StackItem';
 import { type StackItemData } from '../defs';
+import { StackItem } from '../StackItem';
+
+import { Stack } from './Stack';
 
 type StoryStackItem = {
   id: string;
@@ -129,12 +128,12 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof DefaultStory> = {
+const meta = {
   title: 'ui/react-ui-stack/Stack',
   component: DefaultStory,
-  decorators: [withTheme],
   argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
-};
+  decorators: [withTheme],
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 

package/src/components/Stack/Stack.tsx

@@ -2,40 +2,48 @@
 // 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';
+/**
+ * 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 type StackProps = Omit<ThemedClassName<ComponentPropsWithRef<'div'>>, 'aria-orientation'> &
   Partial<StackContextValue> & {
     itemsCount?: number;
     getDropElement?: (stackElement: HTMLDivElement) => HTMLDivElement;
     separatorOnScroll?: number;
+    circularFocus?: boolean;
   };
 
 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 +51,16 @@ 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 const Stack = forwardRef<HTMLDivElement, StackProps>(
   (
     {
@@ -56,17 +74,19 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       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 +117,187 @@ 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>({