@dxos/react-ui-stack 0.8.4-main.1f223c7 → 0.8.4-main.2244d791bb

package/src/components/Stack/Stack.tsx

@@ -7,6 +7,7 @@ import React, {
   type CSSProperties,
   Children,
   type ComponentPropsWithRef,
+  type FocusEvent,
   type KeyboardEvent,
   forwardRef,
   useCallback,
@@ -16,13 +17,14 @@ import React, {
 } from 'react';
 
 import { ListItem, type ThemedClassName, useId } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useStackDropForElements } from '../../hooks';
-import { type StackContextValue } from '../defs';
 import { StackContext } from '../StackContext';
+import { type StackContextValue } from '../types';
 
 export type Orientation = 'horizontal' | 'vertical';
+
 /**
  * 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
@@ -32,13 +34,6 @@ export type Orientation = 'horizontal' | 'vertical';
  */
 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;
-  };
-
 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]]';
 
@@ -60,6 +55,14 @@ const scrollIntoViewAndFocus = (el: HTMLElement, orientation: StackProps['orient
   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>(
   (
     {
@@ -67,18 +70,20 @@ 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 styles: CSSProperties = {
@@ -115,9 +120,26 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
     }, [stackElement, separatorOnScroll, orientation]);
 
     /**
-     * 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.
+     * Handles blur events to track the last focused item within this stack.
+     */
+    const handleBlur = useCallback(
+      (event: 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>) => {
@@ -152,15 +174,28 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                 ? 1
                 : 0;
             if (parallelDelta !== 0) {
-              const adjacentItem = closestStackItems[
-                (closestStackItems.indexOf(closestOwnedItem) + parallelDelta + closestStackItems.length) %
-                  closestStackItems.length
-              ] as HTMLElement | undefined;
+              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(
@@ -168,10 +203,21 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                     `[data-dx-stack-item="${ancestorStack.getAttribute('data-dx-stack')}"] [data-dx-stack]`,
                   ),
                 ) as HTMLElement[];
-                const adjacentStack = siblingStacks[
-                  (siblingStacks.indexOf(closestStack) + perpendicularDelta + siblingStacks.length) %
-                    siblingStacks.length
-                ] as HTMLElement | undefined;
+                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;
@@ -182,26 +228,33 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                       ),
                     ) as HTMLElement[])
                   : [];
-                if (adjacentStackItems.length > 0) {
-                  // Find the closest item by position
-                  const ownedItemRect = closestOwnedItem.getBoundingClientRect();
-                  const targetPosition =
-                    closestStackOrientation === 'vertical' ? ownedItemRect.top : ownedItemRect.left;
-
+                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];
-                  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);
+                  // 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;
 
-                    if (distance < closestDistance) {
-                      closestDistance = distance;
-                      closestItem = item;
-                    }
-                    if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
-                      break;
+                    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;
+                      }
                     }
                   }
 
@@ -235,13 +288,14 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
         }
         props.onKeyDown?.(event);
       },
-      [props.onKeyDown, stackId],
+      [props.onKeyDown, stackId, circularFocus],
     );
 
     const gridClasses = useMemo(() => {
       if (!rail) {
         return orientation === 'horizontal' ? 'grid-rows-1 pli-[--stack-gap]' : 'grid-cols-1 plb-[--stack-gap]';
       }
+
       if (orientation === 'horizontal') {
         return railGridHorizontal;
       } else {
@@ -279,7 +333,10 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
             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,8 +4,8 @@
 
 import { createContext, useContext } from 'react';
 
-import { type StackItemRearrangeHandler, type StackItemSize } from './defs';
 import { type Orientation, type Size } from './Stack';
+import { type StackItemRearrangeHandler, type StackItemSize } from './types';
 
 export type StackContextValue = {
   orientation: Orientation;

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

@@ -2,20 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { DropdownMenu, Icon } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { StackItem, type StackItemRootProps } from './StackItem';
 
 const DefaultStory = (props: StackItemRootProps) => {
   return (
-    <StackItem.Root role='section' {...props} classNames='w-[20rem] border border-separator'>
-      <StackItem.Heading>
+    <StackItem.Root role='section' {...props} classNames='is-[20rem] border border-separator'>
+      <StackItem.Heading classNames='is-full border-be border-separator'>
         <span className='sr-only'>Title</span>
         <div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>
           <DropdownMenu.Root>
@@ -27,7 +25,9 @@ const DefaultStory = (props: StackItemRootProps) => {
           </DropdownMenu.Root>
         </div>
       </StackItem.Heading>
-      <StackItem.Content classNames='p-2'>Content</StackItem.Content>
+      <StackItem.Content>
+        <div className='p-4 text-center'>Content</div>
+      </StackItem.Content>
     </StackItem.Root>
   );
 };
@@ -36,7 +36,7 @@ const meta = {
   title: 'ui/react-ui-stack/StackItem',
   component: StackItem.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/StackItem/StackItem.tsx

@@ -26,10 +26,10 @@ import { createPortal } from 'react-dom';
 
 import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { type StackItemData, type StackItemSize } from '../defs';
 import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
+import { type StackItemData, type StackItemSize } from '../types';
 
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
 import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
@@ -54,6 +54,10 @@ 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;
 
+//
+// StackItemRoot
+//
+
 type StackItemRootProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
   item: Omit<StackItemData, 'type'>;
   order?: number;
@@ -63,7 +67,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>(
@@ -86,6 +90,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
     forwardedRef,
   ) => {
     const [itemElement, itemRef] = useState<HTMLDivElement | null>(null);
+    const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);
     const [selfDragHandleElement, selfDragHandleRef] = useState<HTMLDivElement | null>(null);
     const [closestEdge, setEdge] = useState<Edge | null>(null);
     const [sourceId, setSourceId] = useState<string | null>(null);
@@ -96,8 +101,6 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const Root = role ?? 'div';
 
-    const composedItemRef = composeRefs<HTMLDivElement>(itemRef, forwardedRef);
-
     const setSize = useCallback(
       (nextSize: StackItemSize, commit?: boolean) => {
         setInternalSize(nextSize);
@@ -110,6 +113,7 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const type = orientation === 'horizontal' ? 'column' : 'card';
 
+    // TODO(burdon): Factor out?
     useLayoutEffect(() => {
       if (!itemElement || !onRearrange || disableRearrange) {
         return;
@@ -183,18 +187,18 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
 
     const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
-    // Determine if the drop would result in any changes
+    // 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
+      // 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
+      // Don't show indicator when dragged item is over the trailing edge of its previous sibling.
       const isTrailingEdgeOfPrevSibling =
         prevSiblingId !== undefined &&
         sourceId === prevSiblingId &&
@@ -232,15 +236,22 @@ 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={stackId}
+          data-dx-item-id={item.id}
           {...resizeAttributes}
           style={{
             ...(stackSize !== 'split' && sizeStyle(size, orientation)),
@@ -261,37 +272,45 @@ const StackItemRoot = forwardRef<HTMLDivElement, StackItemRootProps>(
   },
 );
 
+//
+// StackItemDragPreview
+//
+
 type StackItemDragPreviewProps = {
   children: ({ item }: { item: any }) => ReactNode;
 };
 
-export const StackItemDragPreview = ({ children }: StackItemDragPreviewProps) => {
+const StackItemDragPreview = ({ children }: StackItemDragPreviewProps) => {
   const { state } = useStackItem();
   return state?.type === 'preview' ? createPortal(children({ item: state.item }), state.container) : null;
 };
 
+//
+// StackItem
+//
+
 export const StackItem = {
   Root: StackItemRoot,
   Content: StackItemContent,
+  DragHandle: StackItemDragHandle,
+  DragPreview: StackItemDragPreview,
   Heading: StackItemHeading,
   HeadingLabel: StackItemHeadingLabel,
   HeadingStickyContent: StackItemHeadingStickyContent,
   ResizeHandle: StackItemResizeHandle,
-  DragHandle: StackItemDragHandle,
   Sigil: StackItemSigil,
   SigilButton: StackItemSigilButton,
-  DragPreview: StackItemDragPreview,
 };
 
 export type {
   StackItemRootProps,
   StackItemContentProps,
+  StackItemDragHandleProps,
+  StackItemDragPreviewProps,
   StackItemHeadingProps,
   StackItemHeadingLabelProps,
   StackItemResizeHandleProps,
-  StackItemDragHandleProps,
   StackItemSigilProps,
   StackItemSigilButtonProps,
   StackItemSigilAction,
-  StackItemDragPreviewProps,
 };

package/src/components/StackItem/StackItemContent.tsx

@@ -5,71 +5,49 @@
 import React, { type ComponentPropsWithoutRef, forwardRef, useMemo } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useStack, useStackItem } from '../StackContext';
 
-export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role'>> & {
-  /**
-   * 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.
-   */
+export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'scrollable'>> & {
   toolbar?: boolean;
-
-  /**
-   * Whether to provide for the layout of a statusbar after the content.
-   */
   statusbar?: boolean;
-
-  /**
-   * Whether the consumer intends to do something custom and typical affordances should not apply
-   */
-  layoutManaged?: 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.
-   */
-  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.
+ * This component should be used by plugins for rendering content within a stack item (i.e., a “plank” or “section”).
  */
 export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(
-  ({ children, toolbar, statusbar, layoutManaged, classNames, size = 'intrinsic', ...props }, forwardedRef) => {
+  ({ classNames, children, toolbar, statusbar, ...props }, forwardedRef) => {
     const { size: stackItemSize } = useStack();
     const { role } = useStackItem();
     const style = useMemo(
-      () =>
-        layoutManaged
-          ? {}
-          : {
-              gridTemplateRows: [
-                ...(toolbar ? [role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)'] : []),
-                '1fr',
-                ...(statusbar ? ['var(--statusbar-size)'] : []),
-              ].join(' '),
-            },
-      [toolbar, statusbar, layoutManaged],
+      () => ({
+        gridTemplateRows: [
+          toolbar && role === 'section' ? 'calc(var(--toolbar-size) - 1px)' : 'var(--toolbar-size)',
+          '1fr',
+          statusbar && 'var(--statusbar-size)',
+        ]
+          .filter(Boolean)
+          .join(' '),
+      }),
+      [toolbar, statusbar],
     );
 
     return (
       <div
-        role='none'
         {...props}
+        role='none'
+        style={style}
         className={mx(
           'group grid grid-cols-[100%] density-coarse',
           stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
-          size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
-          toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
-          role === 'section' &&
-            toolbar &&
+          toolbar &&
+            role === 'section' &&
             '[&_.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}
         data-popover-collision-boundary={true}
         ref={forwardedRef}
       >
@@ -78,3 +56,5 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
     );
   },
 );
+
+StackItemContent.displayName = 'StackItemContent';

package/src/components/StackItem/StackItemHeading.tsx

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
@@ -13,7 +12,7 @@ import React, {
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/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/StackItemSigil.tsx

@@ -4,11 +4,11 @@
 
 import React, { Fragment, type PropsWithChildren, forwardRef, useState } from 'react';
 
-import { type ActionLike } from '@dxos/app-graph';
+import { type Node } from '@dxos/app-graph';
 import { keySymbols } from '@dxos/keyboard';
 import { Button, type ButtonProps, DropdownMenu, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { descriptionText, mx } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import { translationKey } from '../../translations';
@@ -23,7 +23,7 @@ export type KeyBinding = {
   unknown?: string;
 };
 
-export type StackItemSigilAction = Pick<ActionLike, 'id' | 'properties' | 'data'>;
+export type StackItemSigilAction = Pick<Node.ActionLike, 'id' | 'properties' | 'data'>;
 
 export type StackItemSigilButtonProps = Omit<ButtonProps, 'variant'> &
   AttendableId &

package/src/components/deprecated/LayoutControls.tsx

@@ -30,6 +30,9 @@ const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'>
   return <IconButton iconOnly icon={icon} label={label} tooltipSide='bottom' variant='ghost' {...props} />;
 };
 
+/**
+ * @deprecated
+ */
 export const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(
   (
     { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },

package/src/components/index.ts

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