@dxos/react-ui-stack 0.8.3 → 0.8.4-main.1068cf700f

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "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": {
     ".": {
@@ -14,18 +18,18 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
-    "./testing": {
-      "types": "./dist/types/src/testing/index.d.ts",
-      "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": {
-        "require": "./dist/lib/node/testing/index.cjs",
-        "default": "./dist/lib/node-esm/testing/index.mjs"
-      }
+    "./playwright": {
+      "types": "./dist/types/src/playwright/index.d.ts",
+      "browser": "./dist/lib/browser/playwright/index.mjs",
+      "node": "./dist/lib/node-esm/playwright/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
+      "playwright": [
+        "dist/types/src/playwright/index.d.ts"
+      ],
       "testing": [
         "dist/types/src/testing/index.d.ts"
       ]
@@ -36,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",
@@ -49,37 +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-schema": "0.8.3",
-    "@dxos/keyboard": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/react-ui-dnd": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/echo": "0.8.4-main.1068cf700f",
+    "@dxos/keyboard": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui-dnd": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui-mosaic": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui-attention": "0.8.4-main.1068cf700f"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "@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.3",
-    "@dxos/client": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/test-utils": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@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-framework": "0.8.4-main.1068cf700f",
+    "@dxos/app-graph": "0.8.4-main.1068cf700f",
+    "@dxos/client": "0.8.4-main.1068cf700f",
+    "@dxos/random": "0.8.4-main.1068cf700f",
+    "@dxos/echo-db": "0.8.4-main.1068cf700f",
+    "@dxos/echo": "0.8.4-main.1068cf700f",
+    "@dxos/react-client": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/schema": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f",
+    "@dxos/test-utils": "0.8.4-main.1068cf700f",
+    "@dxos/types": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/client": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/client": "0.8.4-main.1068cf700f",
+    "@dxos/random": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "publishConfig": {
     "access": "public"

package/src/components/CardStack/CardStack.stories.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 '../StackItem';
+
+import { CardStack } from './CardStack';
+
+faker.seed(0);
+
+type CardItem = {
+  id: string;
+  title: string;
+  description: string;
+  image: string;
+};
+
+type StackItemData = {
+  id: string;
+  type?: 'column' | 'card';
+};
+
+const CardStackStory = () => {
+  const [column, setColumn] = useState<CardItem[]>(
+    faker.helpers.multiple(
+      () => ({
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        description: faker.lorem.paragraph(),
+        image: faker.image.url(),
+      }),
+      { count: 12 },
+    ),
+  );
+
+  const handleRearrange = useCallback((source: StackItemData, target: StackItemData, closestEdge: Edge | null) => {
+    setColumn((prevColumn) => {
+      const newColumns = [...prevColumn];
+      // Reordering cards within a column
+      const sourceCardIndex = prevColumn.findIndex((card) => card.id === source.id);
+      const targetCardIndex = prevColumn.findIndex((card) => card.id === target.id);
+
+      if (typeof sourceCardIndex === 'number' && typeof targetCardIndex === 'number') {
+        const [movedCard] = newColumns.splice(sourceCardIndex, 1);
+
+        let insertIndex;
+        if (sourceCardIndex < targetCardIndex) {
+          insertIndex = closestEdge === 'bottom' ? targetCardIndex : targetCardIndex - 1;
+        } else {
+          insertIndex = closestEdge === 'bottom' ? targetCardIndex + 1 : targetCardIndex;
+        }
+        newColumns.splice(insertIndex, 0, movedCard);
+      }
+      return newColumns;
+    });
+  }, []);
+
+  const handleAddCard = useCallback(() => {
+    setColumn((prevColumn) => {
+      const newColumn = [...prevColumn];
+      const newCard = {
+        id: faker.string.uuid(),
+        title: faker.commerce.productName(),
+        description: faker.lorem.paragraph(),
+        image: faker.image.url(),
+      } satisfies CardItem;
+      newColumn.push(newCard);
+      console.log('[add card]', prevColumn.length, newColumn.length);
+      return newColumn;
+    });
+  }, []);
+
+  const handleRemoveCard = useCallback((cardId: string) => {
+    setColumn((prevColumn) => {
+      const newColumn = [...prevColumn];
+
+      const cardIndex = prevColumn.findIndex((card) => card.id === cardId);
+      if (cardIndex !== -1) {
+        newColumn.splice(cardIndex, 1);
+      }
+
+      return newColumn;
+    });
+  }, []);
+
+  return (
+    <CardStack.Root classNames='is-96'>
+      <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 };
+            const prevCardId = cardIndex > 0 ? cardsArray[cardIndex - 1].id : undefined;
+            const nextCardId = cardIndex < cardsArray.length - 1 ? cardsArray[cardIndex + 1].id : undefined;
+
+            return (
+              <CardStack.Item asChild key={card.id}>
+                <StackItem.Root
+                  item={cardItem}
+                  focusIndicatorVariant='group'
+                  prevSiblingId={prevCardId}
+                  nextSiblingId={nextCardId}
+                >
+                  <Card.Root>
+                    <Card.Toolbar>
+                      <StackItem.DragHandle asChild>
+                        <Card.DragHandle />
+                      </StackItem.DragHandle>
+                      <Card.ToolbarSeparator variant='gap' />
+                      <Card.ToolbarIconButton
+                        iconOnly
+                        variant='ghost'
+                        icon='ph--x--regular'
+                        label='Remove card'
+                        onClick={() => handleRemoveCard(card.id)}
+                      />
+                    </Card.Toolbar>
+                    <Card.Poster alt={card.title} image={card.image} />
+                    <Card.Heading>{card.title}</Card.Heading>
+                    <Card.Text variant='description'>{card.description}</Card.Text>
+                  </Card.Root>
+                  <StackItem.DragPreview>
+                    {() => (
+                      <CardDragPreview.Root>
+                        <CardDragPreview.Content>
+                          <Card.Toolbar>
+                            <Card.DragHandle />
+                          </Card.Toolbar>
+                          <Card.Poster alt={card.title} image={card.image} />
+                          <Card.Heading>{card.title}</Card.Heading>
+                          <Card.Text variant='description'>{card.description}</Card.Text>
+                        </CardDragPreview.Content>
+                      </CardDragPreview.Root>
+                    )}
+                  </StackItem.DragPreview>
+                </StackItem.Root>
+              </CardStack.Item>
+            );
+          })}
+        </CardStack.Stack>
+
+        <CardStack.Footer>
+          <IconButton icon='ph--plus--regular' label='Add card' onClick={handleAddCard} classNames='is-full' />
+        </CardStack.Footer>
+
+        <CardStack.Heading>{faker.company.name()}</CardStack.Heading>
+      </CardStack.Content>
+    </CardStack.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-stack/CardStack',
+  component: CardStackStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof CardStackStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof CardStackStory>;
+
+export const Default: Story = {};

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

@@ -6,17 +6,78 @@ 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 { railGridHorizontalContainFitContent, Stack, type StackProps } 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';
+
+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 +85,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,7 +98,30 @@ const CardStackStack = forwardRef<
   );
 });
 
-const CardStackDragHandle = Card.DragHandle;
+//
+// Item
+//
+
+const cardStackItem = 'contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0';
+
+const CardStackItem = 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 };
+
+    return (
+      <Root {...props} {...rootProps} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+//
+// Heading
+//
 
 const cardStackHeading = 'mli-2 order-first bg-transparent rounded-bs-md flex items-center';
 
@@ -47,6 +131,7 @@ const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
     const rootProps = asChild
       ? { classNames: [cardStackHeading, classNames] }
       : { className: mx(cardStackHeading, classNames), role };
+
     return (
       <Root {...props} {...rootProps} ref={forwardedRef}>
         {children}
@@ -55,6 +140,10 @@ const CardStackHeading = forwardRef<HTMLDivElement, SharedCardStackProps>(
   },
 );
 
+//
+// Footer
+//
+
 const cardStackFooter =
   'plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end="true"]_&]:border-subduedSeparator';
 
@@ -64,6 +153,7 @@ const CardStackFooter = forwardRef<HTMLDivElement, SharedCardStackProps>(
     const rootProps = asChild
       ? { classNames: [cardStackFooter, classNames] }
       : { className: mx(cardStackFooter, classNames), role };
+
     return (
       <Root {...props} {...rootProps} ref={forwardedRef}>
         {children}
@@ -72,41 +162,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',
-  railGridHorizontalContainFitContent,
-];
-
-const CardStackContent = forwardRef<HTMLDivElement, SharedCardStackProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [...cardStackContent, classNames] }
-      : { className: mx(...cardStackContent, classNames), role };
-    return (
-      <Root {...props} {...rootProps} data-scroll-separator='false' ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
+//
+// DragHandle
+//
 
-const cardStackRoot = 'flex flex-col pli-2 plb-2';
+const CardStackDragHandle = Card.DragHandle;
 
-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>
-    );
-  },
-);
+//
+// CardStack
+//
 
+/**
+ * @deprecated Replace with Mosaic.Stack.
+ */
 export const CardStack = {
   Root: CardStackRoot,
   Content: CardStackContent,
@@ -114,6 +182,14 @@ export const CardStack = {
   Heading: CardStackHeading,
   Footer: CardStackFooter,
   DragHandle: CardStackDragHandle,
+  Item: CardStackItem,
 };
 
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent };
+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

@@ -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';
-import React, { useState, useCallback } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 { type StackItemData } from '../types';
+
+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;