@dxos/react-ui-stack 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.3c1ae3b",
+  "version": "0.8.4-main.3eb6e50203",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -18,11 +22,6 @@
       "types": "./dist/types/src/playwright/index.d.ts",
       "browser": "./dist/lib/browser/playwright/index.mjs",
       "node": "./dist/lib/node-esm/playwright/index.mjs"
-    },
-    "./testing": {
-      "types": "./dist/types/src/testing/index.d.ts",
-      "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -41,11 +40,11 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.2",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "3.2.10",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
@@ -54,36 +53,40 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo": "0.8.4-main.3c1ae3b",
-    "@dxos/keyboard": "0.8.4-main.3c1ae3b",
-    "@dxos/live-object": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-dnd": "0.8.4-main.3c1ae3b",
-    "@dxos/util": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-attention": "0.8.4-main.3c1ae3b",
-    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b"
+    "@dxos/echo": "0.8.4-main.3eb6e50203",
+    "@dxos/keyboard": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-attention": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-dnd": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
+    "@dxos/util": "0.8.4-main.3eb6e50203"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
     "vite": "7.1.9",
-    "@dxos/app-graph": "0.8.4-main.3c1ae3b",
-    "@dxos/client": "0.8.4-main.3c1ae3b",
-    "@dxos/echo": "0.8.4-main.3c1ae3b",
-    "@dxos/random": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
-    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b",
-    "@dxos/test-utils": "0.8.4-main.3c1ae3b"
+    "@dxos/app-framework": "0.8.4-main.3eb6e50203",
+    "@dxos/app-graph": "0.8.4-main.3eb6e50203",
+    "@dxos/echo-db": "0.8.4-main.3eb6e50203",
+    "@dxos/echo": "0.8.4-main.3eb6e50203",
+    "@dxos/client": "0.8.4-main.3eb6e50203",
+    "@dxos/react-client": "0.8.4-main.3eb6e50203",
+    "@dxos/random": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
+    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
+    "@dxos/test-utils": "0.8.4-main.3eb6e50203",
+    "@dxos/schema": "0.8.4-main.3eb6e50203",
+    "@dxos/types": "0.8.4-main.3eb6e50203",
+    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/client": "0.8.4-main.3c1ae3b",
-    "@dxos/random": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
-    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/client": "0.8.4-main.3eb6e50203",
+    "@dxos/ui-theme": "0.8.4-main.3eb6e50203",
+    "@dxos/random": "0.8.4-main.3eb6e50203",
+    "@dxos/react-ui": "0.8.4-main.3eb6e50203"
   },
   "publishConfig": {
     "access": "public"

package/src/{exemplars → components}/CardStack/CardStack.stories.tsx

@@ -9,9 +9,9 @@ import React, { useCallback, useState } from 'react';
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { Card, CardDragPreview } from '@dxos/react-ui-mosaic';
 
-import { StackItem } from '../../components';
-import { Card, CardDragPreview } from '../Card';
+import { StackItem } from '../StackItem';
 
 import { CardStack } from './CardStack';
 
@@ -109,10 +109,10 @@ const CardStackStory = () => {
                   prevSiblingId={prevCardId}
                   nextSiblingId={nextCardId}
                 >
-                  <Card.StaticRoot>
+                  <Card.Root>
                     <Card.Toolbar>
                       <StackItem.DragHandle asChild>
-                        <Card.DragHandle toolbarItem />
+                        <Card.DragHandle />
                       </StackItem.DragHandle>
                       <Card.ToolbarSeparator variant='gap' />
                       <Card.ToolbarIconButton
@@ -125,18 +125,18 @@ const CardStackStory = () => {
                     </Card.Toolbar>
                     <Card.Poster alt={card.title} image={card.image} />
                     <Card.Heading>{card.title}</Card.Heading>
-                    <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
-                  </Card.StaticRoot>
+                    <Card.Text variant='description'>{card.description}</Card.Text>
+                  </Card.Root>
                   <StackItem.DragPreview>
                     {() => (
                       <CardDragPreview.Root>
                         <CardDragPreview.Content>
                           <Card.Toolbar>
-                            <Card.DragHandle toolbarItem />
+                            <Card.DragHandle />
                           </Card.Toolbar>
                           <Card.Poster alt={card.title} image={card.image} />
                           <Card.Heading>{card.title}</Card.Heading>
-                          <Card.Text classNames='line-clamp-2'>{card.description}</Card.Text>
+                          <Card.Text variant='description'>{card.description}</Card.Text>
                         </CardDragPreview.Content>
                       </CardDragPreview.Root>
                     )}
@@ -160,7 +160,7 @@ const CardStackStory = () => {
 const meta = {
   title: 'ui/react-ui-stack/CardStack',
   component: CardStackStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/{exemplars → components}/CardStack/CardStack.tsx

@@ -6,10 +6,15 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import type { ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { Card } from '@dxos/react-ui-mosaic';
+import { cardDefaultInlineSize, mx } from '@dxos/ui-theme';
 
-import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../../components';
-import { Card } from '../Card';
+import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../Stack';
+
+/**
+ * This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the inline axis.
+ */
+const cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
 
 //
 // Root
@@ -17,7 +22,6 @@ import { Card } from '../Card';
 
 const cardStackRoot = 'flex flex-col';
 
-// TODO(burdon): Root should be headless.
 const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
   ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
     const Root = asChild ? Slot : 'div';
@@ -168,6 +172,9 @@ const CardStackDragHandle = Card.DragHandle;
 // CardStack
 //
 
+/**
+ * @deprecated Replace with Mosaic.Stack.
+ */
 export const CardStack = {
   Root: CardStackRoot,
   Content: CardStackContent,
@@ -178,4 +185,11 @@ export const CardStack = {
   Item: CardStackItem,
 };
 
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };
+export {
+  cardStackRoot,
+  cardStackFooter,
+  cardStackHeading,
+  cardStackContent,
+  cardStackItem,
+  cardStackDefaultInlineSizeRem,
+};

package/src/{exemplars → components}/CardStack/CardStackDragPreview.tsx

@@ -4,11 +4,11 @@
 
 import React, { type PropsWithChildren } from 'react';
 
-import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { IconButton, ScrollArea, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
-import { type StackProps } from '../../components';
 import { translationKey } from '../../translations';
+import { type StackProps } from '../Stack';
 
 const CardStackDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
   return (
@@ -41,18 +41,21 @@ const CardStackDragPreviewContent = ({
   itemsCount = 0,
 }: PropsWithChildren<Pick<StackProps, 'itemsCount'>>) => {
   return (
-    <div
-      className={mx('overflow-y-auto flex-1 pli-2 flex flex-col gap-2', 'plb-1', itemsCount > 0 ? 'plb-2' : 'plb-1')}
-    >
-      {children}
-    </div>
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport classNames={mx('pli-2 plb-1 gap-2', itemsCount > 0 ? 'plb-2' : 'plb-1')}>
+        {children}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
   );
 };
 
 const CardStackDragPreviewFooter = ({ children }: PropsWithChildren<{}>) => {
-  return <div className='p-2 border-t border-separator'>{children}</div>;
+  return <div className='p-2 border-bs border-separator'>{children}</div>;
 };
 
+/**
+ * @deprecated
+ */
 export const CardStackDragPreview = {
   Root: CardStackDragPreviewRoot,
   Heading: CardStackDragPreviewHeading,

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

@@ -9,8 +9,8 @@ import React, { useCallback, useState } from 'react';
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
 
-import { type StackItemData } from '../defs';
 import { StackItem } from '../StackItem';
+import { type StackItemData } from '../types';
 
 import { Stack } from './Stack';
 
@@ -132,7 +132,7 @@ const meta = {
   title: 'ui/react-ui-stack/Stack',
   component: DefaultStory,
   argTypes: { orientation: { control: 'radio', options: ['horizontal', 'vertical'] } },
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Stack/Stack.tsx

@@ -17,11 +17,11 @@ 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';
 
@@ -195,6 +195,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                 scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
               }
             }
+
             if (perpendicularDelta !== 0) {
               if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
                 const siblingStacks = Array.from(

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

@@ -13,7 +13,7 @@ import { StackItem, type StackItemRootProps } from './StackItem';
 const DefaultStory = (props: StackItemRootProps) => {
   return (
     <StackItem.Root role='section' {...props} classNames='is-[20rem] border border-separator'>
-      <StackItem.Heading>
+      <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>
@@ -25,7 +25,9 @@ const DefaultStory = (props: StackItemRootProps) => {
           </DropdownMenu.Root>
         </div>
       </StackItem.Heading>
-      <StackItem.Content>Content</StackItem.Content>
+      <StackItem.Content>
+        <div className='p-4 text-center'>Content</div>
+      </StackItem.Content>
     </StackItem.Root>
   );
 };
@@ -34,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;
@@ -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 &&
@@ -268,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,82 +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';
 
-// 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.
-   */
   toolbar?: boolean;
-
-  /**
-   * Whether to provide for the layout of a statusbar after the content.
-   */
   statusbar?: boolean;
-
-  /**
-   * Whether to support y-axis scrolling.
-   */
-  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.
-   */
-  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;
 };
 
 /**
- * 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', scrollable, ...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',
-          size === 'video' ? 'aspect-video' : size === 'square' && 'aspect-square',
           stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
-          scrollable ? 'min-bs-0 overflow-y-auto scrollbar-thin contain-layout' : 'overflow-hidden',
-          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}
       >
@@ -89,3 +56,5 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
     );
   },
 );
+
+StackItemContent.displayName = 'StackItemContent';

package/src/components/StackItem/StackItemHeading.tsx

@@ -12,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';
 

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';