@dxos/react-ui-stack 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.f9ba587",
+  "version": "0.8.4-main.fd6878d",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,18 +14,23 @@
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/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"
+    },
     "./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"
-      }
+      "node": "./dist/lib/node-esm/testing/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"
       ]
@@ -49,12 +54,13 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "react-resize-detector": "^11.0.1",
-    "@dxos/echo-schema": "0.8.4-main.f9ba587",
-    "@dxos/keyboard": "0.8.4-main.f9ba587",
-    "@dxos/live-object": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-attention": "0.8.4-main.f9ba587",
-    "@dxos/util": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-dnd": "0.8.4-main.f9ba587"
+    "@dxos/echo-schema": "0.8.4-main.fd6878d",
+    "@dxos/keyboard": "0.8.4-main.fd6878d",
+    "@dxos/live-object": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-attention": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-dnd": "0.8.4-main.fd6878d",
+    "@dxos/storybook-utils": "0.8.4-main.fd6878d",
+    "@dxos/util": "0.8.4-main.fd6878d"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -62,22 +68,22 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-graph": "0.8.4-main.f9ba587",
-    "@dxos/echo-schema": "0.8.4-main.f9ba587",
-    "@dxos/random": "0.8.4-main.f9ba587",
-    "@dxos/client": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
-    "@dxos/react-ui": "0.8.4-main.f9ba587",
-    "@dxos/storybook-utils": "0.8.4-main.f9ba587",
-    "@dxos/test-utils": "0.8.4-main.f9ba587"
+    "@dxos/client": "0.8.4-main.fd6878d",
+    "@dxos/app-graph": "0.8.4-main.fd6878d",
+    "@dxos/echo-schema": "0.8.4-main.fd6878d",
+    "@dxos/random": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/storybook-utils": "0.8.4-main.fd6878d",
+    "@dxos/test-utils": "0.8.4-main.fd6878d"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/client": "0.8.4-main.f9ba587",
-    "@dxos/random": "0.8.4-main.f9ba587",
-    "@dxos/react-ui": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+    "@dxos/client": "0.8.4-main.fd6878d",
+    "@dxos/random": "0.8.4-main.fd6878d",
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
   },
   "publishConfig": {
     "access": "public"

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

@@ -6,14 +6,15 @@ import '@dxos-theme';
 
 import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/storybook-utils';
 
-import { Stack } from './Stack';
-import { StackItem } from '../StackItem';
 import { type StackItemData } from '../defs';
+import { StackItem } from '../StackItem';
+
+import { Stack } from './Stack';
 
 type StoryStackItem = {
   id: string;

package/src/components/Stack/Stack.tsx

@@ -5,22 +5,22 @@
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, {
-  Children,
   type CSSProperties,
+  Children,
   type ComponentPropsWithRef,
   forwardRef,
-  useState,
-  useMemo,
   useCallback,
   useEffect,
+  useMemo,
+  useState,
 } from 'react';
 
-import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStackDropForElements } from '../../hooks';
-import { StackContext } from '../StackContext';
 import { type StackContextValue } from '../defs';
+import { StackContext } from '../StackContext';
 
 export type Orientation = 'horizontal' | 'vertical';
 export type Size = 'intrinsic' | 'contain' | 'contain-fit-content';

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 StackItemSize, type StackItemRearrangeHandler } from './defs';
 
 export type StackContextValue = {
   orientation: Orientation;

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Icon, DropdownMenu } from '@dxos/react-ui';
+import { DropdownMenu, Icon } from '@dxos/react-ui';
 import { withTheme } from '@dxos/storybook-utils';
 
 import { StackItem } from './StackItem';

package/src/components/StackItem/StackItem.tsx

@@ -7,46 +7,47 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
+  type Edge,
   attachClosestEdge,
   extractClosestEdge,
-  type Edge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 import React, {
-  forwardRef,
-  useLayoutEffect,
-  useState,
   type ComponentPropsWithRef,
-  useCallback,
   type ReactNode,
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
   useMemo,
+  useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 
-import { type ThemedClassName, ListItem } from '@dxos/react-ui';
+import { ListItem, type ThemedClassName } from '@dxos/react-ui';
 import { resizeAttributes, sizeStyle } from '@dxos/react-ui-dnd';
 import { mx } from '@dxos/react-ui-theme';
 
+import { type StackItemData, type StackItemSize } from '../defs';
+import { type ItemDragState, StackItemContext, idle, useStack, useStackItem } from '../StackContext';
+
 import { StackItemContent, type StackItemContentProps } from './StackItemContent';
 import { StackItemDragHandle, type StackItemDragHandleProps } from './StackItemDragHandle';
 import {
   StackItemHeading,
   StackItemHeadingLabel,
-  type StackItemHeadingProps,
   type StackItemHeadingLabelProps,
+  type StackItemHeadingProps,
   StackItemHeadingStickyContent,
 } from './StackItemHeading';
 import { StackItemResizeHandle, type StackItemResizeHandleProps } from './StackItemResizeHandle';
 import {
   StackItemSigil,
-  type StackItemSigilProps,
   type StackItemSigilAction,
-  type StackItemSigilButtonProps,
   StackItemSigilButton,
+  type StackItemSigilButtonProps,
+  type StackItemSigilProps,
 } from './StackItemSigil';
-import { useStack, StackItemContext, idle, type ItemDragState, useStackItem } from '../StackContext';
-import { type StackItemSize, type StackItemData } from '../defs';
 
 // NOTE: 48rem fills the screen on a MacbookPro with the sidebars closed.
 export const DEFAULT_HORIZONTAL_SIZE = 48 satisfies StackItemSize;

package/src/components/StackItem/StackItemContent.tsx

@@ -9,7 +9,7 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { useStack, useStackItem } from '../StackContext';
 
-export type StackItemContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+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.
@@ -54,15 +54,16 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
             },
       [toolbar, statusbar, layoutManaged],
     );
+
     return (
       <div
         role='none'
         {...props}
         className={mx(
-          'group grid grid-cols-[100%]',
+          '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',
+          toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
           role === 'section' &&
             toolbar &&
             '[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0',

package/src/components/StackItem/StackItemHeading.tsx

@@ -5,14 +5,14 @@
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
-  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
-  forwardRef,
+  type ComponentPropsWithoutRef,
   type PropsWithChildren,
+  forwardRef,
 } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { useAttention, type AttendableId, type Related } from '@dxos/react-ui-attention';
+import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-attention';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useStack } from '../StackContext';

package/src/components/StackItem/StackItemResizeHandle.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 
 import { ResizeHandle } from '@dxos/react-ui-dnd';
 
-import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
 import { useStack, useStackItem } from '../StackContext';
 
+import { DEFAULT_EXTRINSIC_SIZE } from './StackItem';
+
 const MIN_WIDTH = 20;
 const MIN_HEIGHT = 3;
 

package/src/components/StackItem/StackItemSigil.tsx

@@ -11,9 +11,10 @@ import { type AttendableId, type Related, useAttention } from '@dxos/react-ui-at
 import { descriptionText, mx } from '@dxos/react-ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
-import { MenuSignifierHorizontal } from './MenuSignifier';
 import { translationKey } from '../../translations';
 
+import { MenuSignifierHorizontal } from './MenuSignifier';
+
 export type KeyBinding = {
   windows?: string;
   macos?: string;

package/src/components/index.ts

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

package/src/exemplars/Card/Card.tsx

@@ -5,20 +5,21 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
-  type ComponentPropsWithoutRef,
   type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
   type FC,
-  forwardRef,
   type PropsWithChildren,
+  forwardRef,
 } from 'react';
 
 import { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
 import { hoverableControls, mx } from '@dxos/react-ui-theme';
 
-import { cardChrome, cardRoot, cardHeading, cardText, cardSpacing } from './fragments';
 import { StackItem } from '../../components';
 import { translationKey } from '../../translations';
 
+import { cardChrome, cardHeading, cardRoot, cardSpacing, cardText } from './fragments';
+
 type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
 
 const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
@@ -38,16 +39,35 @@ const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
  * in a Popover) and knows this based on the `role` it receives. This will render a `Card.StaticRoot` by default, otherwise
  * it will render a `div` primitive with the appropriate styling for specific handled situations.
  */
-const CardSurfaceRoot = ({ role = 'never', children }: PropsWithChildren<{ role?: string }>) => {
-  if (['popover', 'card--kanban'].includes(role)) {
+const CardSurfaceRoot = ({
+  role = 'never',
+  children,
+  classNames,
+}: ThemedClassName<PropsWithChildren<{ role?: string }>>) => {
+  if (['card--popover', 'card--intrinsic', 'card--extrinsic'].includes(role)) {
     return (
-      <div className={role === 'popover' ? 'popover-card-width' : role === 'card--kanban' ? 'contents' : ''}>
+      <div
+        className={mx(
+          role === 'card--popover'
+            ? 'popover-card-width'
+            : ['card--intrinsic', 'card--extrinsic'].includes(role)
+              ? 'contents'
+              : '',
+          classNames,
+        )}
+      >
         {children}
       </div>
     );
   } else {
     return (
-      <CardStaticRoot {...(role === 'card--document' && { classNames: ['mlb-[1em]', hoverableControls] })}>
+      <CardStaticRoot
+        classNames={[
+          role === 'card--transclusion' && 'mlb-[1em]',
+          role === 'card--transclusion' && hoverableControls,
+          classNames,
+        ]}
+      >
         {children}
       </CardStaticRoot>
     );

package/src/exemplars/CardStack/CardStack.stories.tsx

@@ -6,16 +6,17 @@ import '@dxos-theme';
 
 import { type Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { faker } from '@dxos/random';
 import { IconButton } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { CardStack } from './CardStack';
 import { StackItem } from '../../components';
 import { Card, CardDragPreview } from '../Card';
 
+import { CardStack } from './CardStack';
+
 // Set a seed for reproducible random values
 faker.seed(0);
 

package/src/exemplars/CardStack/CardStack.tsx

@@ -8,7 +8,7 @@ import React, { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import type { ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { railGridHorizontalContainFitContent, Stack, type StackProps } from '../../components';
+import { Stack, type StackProps, railGridHorizontalContainFitContent } from '../../components';
 import { Card } from '../Card';
 
 type SharedCardStackProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };

package/src/hooks/useStackDropForElements.ts

@@ -8,7 +8,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { useLayoutEffect, useState } from 'react';
 
-import { type StackItemRearrangeHandler, type StackItemData, type Orientation } from '../components';
+import { type Orientation, type StackItemData, type StackItemRearrangeHandler } from '../components';
 
 /**
  * Hook to handle drag and drop functionality for Stack components.

package/src/playwright/index.ts

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

package/src/playwright/smoke.spec.ts

@@ -6,7 +6,7 @@ import { expect, test } from '@playwright/test';
 
 import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
 
-import { StackManager } from '../testing';
+import { StackManager } from './stack-manager';
 
 const PORT = 9003;
 

package/src/testing/CardContainer.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+
+import { ExtrinsicCardContainer, IntrinsicCardContainer, PopoverCardContainer } from '@dxos/storybook-utils';
+
+import { Card } from '../exemplars';
+
+export const CardContainer = ({
+  children,
+  icon = 'ph--placeholder--regular',
+  role,
+}: PropsWithChildren<{ icon?: string; role?: string }>) => {
+  switch (role) {
+    case 'card--popover':
+      return <PopoverCardContainer icon={icon}>{children}</PopoverCardContainer>;
+
+    case 'card--extrinsic':
+      return (
+        <ExtrinsicCardContainer>
+          <Card.StaticRoot>{children}</Card.StaticRoot>
+        </ExtrinsicCardContainer>
+      );
+
+    case 'card--intrinsic':
+      return (
+        <IntrinsicCardContainer>
+          <Card.StaticRoot>{children}</Card.StaticRoot>
+        </IntrinsicCardContainer>
+      );
+
+    default:
+      return <Card.StaticRoot>{children}</Card.StaticRoot>;
+  }
+};

package/src/testing/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './stack-manager';
+export * from './CardContainer';

package/dist/types/src/testing/stack-manager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stack-manager.d.ts","sourceRoot":"","sources":["../../../../src/testing/stack-manager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAQ,MAAM,kBAAkB,CAAC;AAEtD,qBAAa,YAAY;IAGX,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAIrC,QAAQ,IAAI,OAAO;IAInB,KAAK;IAIL,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc;CAGvC;AAED,qBAAa,cAAc;IAGb,QAAQ,CAAC,OAAO,EAAE,OAAO;IAFrC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAO;gBAER,OAAO,EAAE,OAAO;IAI/B,EAAE,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAI5B,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAKvB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC;IAK3B,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,GAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAmB,GAAG,OAAO,CAAC,IAAI,CAAC;CAehG"}