@dxos/react-ui-stack 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.ae835ea",
+  "version": "0.8.4-main.bc674ce",
   "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.ae835ea",
-    "@dxos/keyboard": "0.8.4-main.ae835ea",
-    "@dxos/live-object": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-attention": "0.8.4-main.ae835ea",
-    "@dxos/storybook-utils": "0.8.4-main.ae835ea",
-    "@dxos/util": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-dnd": "0.8.4-main.ae835ea"
+    "@dxos/keyboard": "0.8.4-main.bc674ce",
+    "@dxos/echo": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-attention": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-dnd": "0.8.4-main.bc674ce",
+    "@dxos/react-ui-mosaic": "0.8.4-main.bc674ce",
+    "@dxos/util": "0.8.4-main.bc674ce"
   },
   "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/client": "0.8.4-main.ae835ea",
-    "@dxos/echo": "0.8.4-main.ae835ea",
-    "@dxos/random": "0.8.4-main.ae835ea",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
-    "@dxos/storybook-utils": "0.8.4-main.ae835ea",
-    "@dxos/test-utils": "0.8.4-main.ae835ea",
-    "@dxos/app-graph": "0.8.4-main.ae835ea"
+    "@dxos/app-framework": "0.8.4-main.bc674ce",
+    "@dxos/app-graph": "0.8.4-main.bc674ce",
+    "@dxos/client": "0.8.4-main.bc674ce",
+    "@dxos/echo": "0.8.4-main.bc674ce",
+    "@dxos/echo-db": "0.8.4-main.bc674ce",
+    "@dxos/random": "0.8.4-main.bc674ce",
+    "@dxos/react-ui": "0.8.4-main.bc674ce",
+    "@dxos/schema": "0.8.4-main.bc674ce",
+    "@dxos/test-utils": "0.8.4-main.bc674ce",
+    "@dxos/react-client": "0.8.4-main.bc674ce",
+    "@dxos/types": "0.8.4-main.bc674ce",
+    "@dxos/ui-theme": "0.8.4-main.bc674ce",
+    "@dxos/storybook-utils": "0.8.4-main.bc674ce"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/client": "0.8.4-main.ae835ea",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/random": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/random": "0.8.4-main.bc674ce",
+    "@dxos/client": "0.8.4-main.bc674ce",
+    "@dxos/react-ui": "0.8.4-main.bc674ce",
+    "@dxos/ui-theme": "0.8.4-main.bc674ce"
   },
   "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';
 
@@ -94,7 +94,7 @@ const CardStackStory = () => {
 
   return (
     <CardStack.Root classNames='is-96'>
-      <CardStack.Content>
+      <CardStack.Content footer>
         <CardStack.Stack id='story column' onRearrange={handleRearrange} itemsCount={column.length}>
           {column.map((card, cardIndex, cardsArray) => {
             const cardItem = { id: card.id, type: 'card' as const };
@@ -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>
                     )}

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

@@ -6,17 +6,79 @@ 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';
 
-type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
+/**
+ * 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
+//
+
+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';
+    const rootProps = asChild
+      ? { classNames: [cardStackRoot, classNames] }
+      : { className: mx(cardStackRoot, classNames), role };
+
+    return (
+      <Root {...props} {...rootProps} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+//
+// Content
+// TODO(burdon): Rename Viewport (should be the component that scrolls).
+//
+
+const cardStackContent = 'shrink min-bs-0 grid dx-focus-ring-group-x-indicator bg-baseSurface';
+
+type CardStackContentProps = SharedCardStackProps & {
+  footer?: boolean;
+};
+
+const CardStackContent = forwardRef<HTMLDivElement, CardStackContentProps>(
+  ({ children, classNames, asChild, role = 'none', footer, ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : 'div';
+    const baseClassNames = footer ? [cardStackContent, railGridHorizontalContainFitContent] : [cardStackContent];
+    const rootProps = asChild
+      ? { classNames: [...baseClassNames, classNames] }
+      : { className: mx(...baseClassNames, classNames), role };
+
+    return (
+      <Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+//
+// Stack
+// TODO(burdon): Rename Content.
+//
+
+type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+  asChild?: boolean;
+};
 
 const CardStackStack = forwardRef<
   HTMLDivElement,
   Omit<StackProps, 'orientation' | 'size' | 'rail' | 'separatorOnScroll'>
 >(({ children, classNames, itemsCount = 0, ...props }, forwardedRef) => {
+  // NOTE: Should not have horizontal padding since separatorOnScroll should be full width.
   return (
     <Stack
       orientation='vertical'
@@ -24,7 +86,7 @@ const CardStackStack = forwardRef<
       rail={false}
       classNames={
         /* NOTE(thure): Do not let this element have zero intrinsic size, otherwise the drop indicator will not display. See #9035. */
-        ['plb-1', itemsCount > 0 && 'plb-2', classNames]
+        ['plb-2', classNames]
       }
       itemsCount={itemsCount}
       separatorOnScroll={9}
@@ -37,33 +99,19 @@ const CardStackStack = forwardRef<
   );
 });
 
-const CardStackDragHandle = Card.DragHandle;
-
-const cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';
-
-const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackHeading, classNames] }
-      : { className: mx(cardStackHeading, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
+//
+// Item
+//
 
-const cardStackFooter =
-  'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
+const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
 
-const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
+const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
   ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
     const Root = asChild ? Slot : 'div';
     const rootProps = asChild
-      ? { classNames: [cardStackFooter, classNames] }
-      : { className: mx(cardStackFooter, classNames), role };
+      ? { classNames: [cardStackItem, classNames] }
+      : { className: mx(cardStackItem, classNames), role };
+
     return (
       <Root {...props} {...rootProps} ref={forwardedRef}>
         {children}
@@ -72,36 +120,19 @@ const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
   },
 );
 
-const cardStackContent =
-  'shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop';
+//
+// Heading
+//
 
-type CardStackContentProps = SharedCardStackProps & {
-  footer?: boolean;
-};
+const cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';
 
-const CardStackContent = forwardRef<HTMLDivElement, CardStackContentProps>(
-  ({ children, classNames, asChild, role = 'none', footer = true, ...props }, forwardedRef) => {
+const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
+  ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
     const Root = asChild ? Slot : 'div';
-    const baseClassNames = footer ? [cardStackContent, railGridHorizontalContainFitContent] : [cardStackContent];
     const rootProps = asChild
-      ? { classNames: [...baseClassNames, classNames] }
-      : { className: mx(...baseClassNames, classNames), role };
-    return (
-      <Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const cardStackRoot = 'flex flex-col pli-2 plb-2';
+      ? { classNames: [cardStackHeading, classNames] }
+      : { className: mx(cardStackHeading, classNames), role };
 
-const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardStackRoot, classNames] }
-      : { className: mx(cardStackRoot, classNames), role };
     return (
       <Root {...props} {...rootProps} ref={forwardedRef}>
         {children}
@@ -110,14 +141,20 @@ const CardStackRoot = forwardRef<HTMLDivElement, SharedCardStackProps>(
   },
 );
 
-const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
+//
+// Footer
+//
 
-const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
+const cardStackFooter =
+  'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
+
+const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
   ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
     const Root = asChild ? Slot : 'div';
     const rootProps = asChild
-      ? { classNames: [cardStackItem, classNames] }
-      : { className: mx(cardStackItem, classNames), role };
+      ? { classNames: [cardStackFooter, classNames] }
+      : { className: mx(cardStackFooter, classNames), role };
+
     return (
       <Root {...props} {...rootProps} ref={forwardedRef}>
         {children}
@@ -126,6 +163,19 @@ const CardStackItem = forwardRef<HTMLDivElement, SharedCardStackProps>(
   },
 );
 
+//
+// DragHandle
+//
+
+const CardStackDragHandle = Card.DragHandle;
+
+//
+// CardStack
+//
+
+/**
+ * @deprecated Replace with Mosaic.Stack.
+ */
 export const CardStack = {
   Root: CardStackRoot,
   Content: CardStackContent,
@@ -136,4 +186,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

@@ -5,10 +5,10 @@
 import React, { type PropsWithChildren } from 'react';
 
 import { IconButton, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+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 (
@@ -50,7 +50,7 @@ const CardStackDragPreviewContent = ({
 };
 
 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>;
 };
 
 export const CardStackDragPreview = {

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

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,14 +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;
-    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]]';
 
@@ -61,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>(
   (
     {
@@ -68,7 +70,7 @@ 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),
@@ -121,7 +123,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
      * Handles blur events to track the last focused item within this stack.
      */
     const handleBlur = useCallback(
-      (event: React.FocusEvent<HTMLDivElement>) => {
+      (event: FocusEvent<HTMLDivElement>) => {
         if (event.target) {
           const target = event.target as HTMLElement;
           const closestStackItem = target.closest(`[data-dx-item-id]`) as HTMLElement | null;
@@ -135,9 +137,9 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
     );
 
     /**
-     * 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 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>) => {
@@ -193,6 +195,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                 scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
               }
             }
+
             if (perpendicularDelta !== 0) {
               if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
                 const siblingStacks = Array.from(
@@ -241,12 +244,10 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
                       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;
@@ -294,6 +295,7 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
       if (!rail) {
         return orientation === 'horizontal' ? 'grid-rows-1 pli-[--stack-gap]' : 'grid-cols-1 plb-[--stack-gap]';
       }
+
       if (orientation === 'horizontal') {
         return railGridHorizontal;
       } else {

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

@@ -12,8 +12,8 @@ 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>
@@ -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>
   );
 };