@dxos/react-ui 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.69d29f4",
+  "version": "0.8.4-main.6fa680abb7",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -15,15 +15,15 @@
   "exports": {
     ".": {
       "source": "./src/index.ts",
-      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "node": "./dist/lib/node-esm/index.mjs",
+      "types": "./dist/types/src/index.d.ts"
     },
     "./testing": {
       "source": "./src/testing/index.ts",
-      "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "node": "./dist/lib/node-esm/testing/index.mjs",
+      "types": "./dist/types/src/testing/index.d.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -40,7 +40,7 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
@@ -74,40 +74,44 @@
     "@radix-ui/react-visually-hidden": "1.1.2",
     "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
+    "error-stack-parser": "^2.1.4",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
+    "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/invariant": "0.8.4-main.69d29f4",
-    "@dxos/debug": "0.8.4-main.69d29f4",
-    "@dxos/async": "0.8.4-main.69d29f4",
-    "@dxos/lit-ui": "0.8.4-main.69d29f4",
-    "@dxos/log": "0.8.4-main.69d29f4",
-    "@dxos/react-hooks": "0.8.4-main.69d29f4",
-    "@dxos/react-input": "0.8.4-main.69d29f4",
-    "@dxos/ui-types": "0.8.4-main.69d29f4",
-    "@dxos/react-list": "0.8.4-main.69d29f4",
-    "@dxos/util": "0.8.4-main.69d29f4"
+    "@dxos/async": "0.8.4-main.6fa680abb7",
+    "@dxos/debug": "0.8.4-main.6fa680abb7",
+    "@dxos/invariant": "0.8.4-main.6fa680abb7",
+    "@dxos/lit-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/log": "0.8.4-main.6fa680abb7",
+    "@dxos/react-input": "0.8.4-main.6fa680abb7",
+    "@dxos/react-hooks": "0.8.4-main.6fa680abb7",
+    "@dxos/react-list": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7",
+    "@dxos/react-error-boundary": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-types": "0.8.4-main.6fa680abb7"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
     "@phosphor-icons/react": "2.1.10",
+    "@tanstack/react-virtual": "^3.13.18",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4",
-    "@dxos/util": "0.8.4-main.69d29f4"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -5,8 +5,7 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
-import { type HuePalette } from '@dxos/ui-theme';
-import { type Size } from '@dxos/ui-types';
+import { type ChromaticPalette, type Size } from '@dxos/ui-types';
 import { hexToFallback } from '@dxos/util';
 
 import { withTheme } from '../../testing';
@@ -23,7 +22,7 @@ type StoryProps = PropsWithChildren<{
   variant?: AvatarVariant;
   animation?: AvatarAnimation;
   size?: Size;
-  hue?: HuePalette;
+  hue?: ChromaticPalette;
 }>;
 
 const DefaultStory = (props: StoryProps) => {
@@ -57,15 +56,15 @@ const DefaultStory = (props: StoryProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Avatar',
+  title: 'ui/react-ui-core/components/Avatar',
   component: Avatar.Root,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Avatar.Root>;
 
 export default meta;
 
 const sampleImage =
-  'https://png.pngtree.com/thumb_back/fh260/background/20230614/pngtree-the-photo-of-a-woman-with-red-sunglasses-is-surrounded-by-image_2931163.jpg';
+  'https://png.pngtree.com/thumb_back/fh260/background/20230614/pngtree-the-photo-of-a-woman-with-red-sunglasses-w-surrounded-by-image_2931163.jpg';
 
 const brokenImage = 'https://png.pngtree.com/potato_squirrel.png';
 

package/src/components/Avatars/Avatar.tsx

@@ -64,17 +64,10 @@ type AvatarLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primit
 
 const AvatarLabel = forwardRef<HTMLSpanElement, AvatarLabelProps>(
   ({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : Primitive.span;
+    const Comp = asChild ? Slot : Primitive.span;
     const { tx } = useThemeContext();
     const { labelId } = useAvatarContext('AvatarLabel');
-    return (
-      <Root
-        {...props}
-        id={labelId}
-        ref={forwardedRef}
-        className={tx('avatar.label', 'avatar__label', { srOnly }, classNames)}
-      />
-    );
+    return <Comp {...props} id={labelId} ref={forwardedRef} className={tx('avatar.label', { srOnly }, classNames)} />;
   },
 );
 
@@ -85,15 +78,15 @@ type AvatarDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof
 
 const AvatarDescription = forwardRef<HTMLSpanElement, AvatarDescriptionProps>(
   ({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : Primitive.span;
+    const Comp = asChild ? Slot : Primitive.span;
     const { tx } = useThemeContext();
     const { descriptionId } = useAvatarContext('AvatarDescription');
     return (
-      <Root
+      <Comp
         {...props}
         id={descriptionId}
         ref={forwardedRef}
-        className={tx('avatar.description', 'avatar__description', { srOnly }, classNames)}
+        className={tx('avatar.description', { srOnly }, classNames)}
       />
     );
   },

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -38,9 +38,9 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/AvatarGroup',
+  title: 'ui/react-ui-core/components/AvatarGroup',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -16,7 +16,7 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
-            <Button variant='ghost' density='fine' classNames='pli-0 text-baseText font-normal'>
+            <Button variant='ghost' density='fine' classNames='px-0 text-base-surface-text font-normal'>
               Grocery
             </Button>
           </Breadcrumb.Link>
@@ -39,10 +39,10 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Breadcrumb',
+  title: 'ui/react-ui-core/components/Breadcrumb',
   component: Breadcrumb.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -19,15 +19,8 @@ type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitiv
 const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    return (
-      <Root
-        role='navigation'
-        {...props}
-        className={tx('breadcrumb.root', 'breadcrumb', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    const Comp = asChild ? Slot : Primitive.div;
+    return <Comp role='navigation' {...props} className={tx('breadcrumb.root', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -36,15 +29,8 @@ type BreadcrumbListProps = ThemedClassName<ComponentPropsWithRef<typeof Primitiv
 const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.ol;
-    return (
-      <Root
-        role='list'
-        {...props}
-        className={tx('breadcrumb.list', 'breadcrumb__list', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    const Comp = asChild ? Slot : Primitive.ol;
+    return <Comp role='list' {...props} className={tx('breadcrumb.list', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -53,23 +39,16 @@ type BreadcrumbListItemProps = ThemedClassName<ComponentPropsWithRef<typeof Prim
 const BreadcrumbListItem = forwardRef<HTMLLIElement, BreadcrumbListItemProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.li;
-    return (
-      <Root
-        role='listitem'
-        {...props}
-        className={tx('breadcrumb.listItem', 'breadcrumb__list__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    const Comp = asChild ? Slot : Primitive.li;
+    return <Comp role='listitem' {...props} className={tx('breadcrumb.listItem', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
 type BreadcrumbLinkProps = LinkProps;
 
 const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ asChild, ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : Link;
-  return <Root {...props} ref={forwardedRef} />;
+  const Comp = asChild ? Slot : Link;
+  return <Comp {...props} ref={forwardedRef} />;
 });
 
 type BreadcrumbCurrentProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & { asChild?: boolean };
@@ -77,14 +56,9 @@ type BreadcrumbCurrentProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & { a
 const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : 'h1';
+    const Comp = asChild ? Slot : 'h1';
     return (
-      <Root
-        {...props}
-        aria-current='page'
-        className={tx('breadcrumb.current', 'breadcrumb__item__heading--current', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <Comp {...props} aria-current='page' className={tx('breadcrumb.current', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -98,7 +72,7 @@ const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSepar
       role='separator'
       aria-hidden='true'
       {...props}
-      className={tx('breadcrumb.separator', 'breadcrumb__separator', {}, classNames)}
+      className={tx('breadcrumb.separator', {}, classNames)}
     >
       {children ?? <Icon icon='ph--dot--bold' />}
     </Primitive.span>

package/src/components/Button/Button.stories.tsx

@@ -13,7 +13,7 @@ import { Button, ButtonGroup, type ButtonProps } from './Button';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
-    <div>
+    <div className='flex items-center gap-2'>
       <Button {...args}>{children}</Button>
       <Button {...args} disabled>
         {children}
@@ -33,10 +33,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Button',
+  title: 'ui/react-ui-core/components/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme, withLayoutVariants()],
+  decorators: [withTheme(), withLayoutVariants()],
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/components/Button/Button.tsx

@@ -46,9 +46,9 @@ const Button = memo(
       const { tx } = useThemeContext();
       const elevation = useElevationContext(propsElevation);
       const density = useDensityContext(propsDensity);
-      const Root = asChild ? Slot : Primitive.button;
+      const Comp = asChild ? Slot : Primitive.button;
       return (
-        <Root
+        <Comp
           ref={ref}
           {...props}
           data-variant={variant}
@@ -56,7 +56,6 @@ const Button = memo(
           data-props={inGroup ? 'grouped' : ''}
           className={tx(
             'button.root',
-            'button',
             {
               variant,
               inGroup,
@@ -69,7 +68,7 @@ const Button = memo(
           {...(props.disabled && { disabled: true })}
         >
           {children}
-        </Root>
+        </Comp>
       );
     },
   ),
@@ -86,16 +85,11 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   ({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('button.group', 'button-group', { elevation }, classNames)}
-        ref={forwardedRef}
-      >
+      <Comp role='none' {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
         <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
-      </Root>
+      </Comp>
     );
   },
 );

package/src/components/Button/IconButton.stories.tsx

@@ -13,10 +13,10 @@ import { IconButton, type IconButtonProps } from './IconButton';
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
-      <div className='mbe-4'>
+      <div className='mb-4'>
         <IconButton {...props} />
       </div>
-      <div className='mbe-4'>
+      <div className='mb-4'>
         <IconButton iconOnly {...props} />
       </div>
     </Tooltip.Provider>
@@ -24,10 +24,10 @@ const DefaultStory = (props: IconButtonProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/IconButton',
+  title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
   render: DefaultStory as any,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof IconButton>;
 
 export default meta;

package/src/components/Button/IconButton.tsx

@@ -52,7 +52,7 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}

package/src/components/Button/Toggle.stories.tsx

@@ -19,10 +19,10 @@ const DefaultStory = (props: ToggleProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Toggle',
+  title: 'ui/react-ui-core/components/Toggle',
   component: Toggle,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/Button/ToggleGroup.stories.tsx

@@ -25,10 +25,10 @@ const DefaultStory = (props: ToggleGroupProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/ToggleGroup',
+  title: 'ui/react-ui-core/components/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof ToggleGroup>;
 
 export default meta;

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useRef } from 'react';
+
+import { faker } from '@dxos/random';
+import { Icon } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Card } from './Card';
+
+faker.seed(0);
+
+type StoryProps = {
+  title: string;
+  description?: string;
+  image?: string;
+  fullWidth?: boolean;
+};
+
+const DefaultStory = ({ title, description, image, fullWidth }: StoryProps) => {
+  const handleRef = useRef<HTMLButtonElement>(null);
+  console.log(title);
+  return (
+    <Card.Root fullWidth={fullWidth}>
+      <Card.Toolbar>
+        <Card.DragHandle ref={handleRef} />
+        <Card.Title>{title}</Card.Title>
+        <Card.CloseIconButton onClick={() => console.log('close')} />
+      </Card.Toolbar>
+      <Card.Content>
+        <Card.Poster alt='Card.Poster' image={image} />
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Heading>Card.Heading</Card.Heading>
+        </Card.Row>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Text>Card.Text (default)</Card.Text>
+        </Card.Row>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Text variant='description'>
+            Card.Text (description)
+            <br />
+            {description}
+          </Card.Text>
+        </Card.Row>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Heading variant='subtitle'>Card.Heading (subtitle)</Card.Heading>
+        </Card.Row>
+        <Card.Action label='Card.Action' onClick={() => console.log('action')} />
+        <Card.Link label='Card.Link' href='https://dxos.org' />
+      </Card.Content>
+    </Card.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/Card',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'grid w-[30rem] place-items-center' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const image = faker.image.url();
+
+export const Default: Story = {
+  args: {
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraph(3),
+    image,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraph(3),
+    image,
+    fullWidth: true,
+  },
+};
+
+export const Simple: Story = {
+  args: {
+    title: faker.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.CloseIconButton onClick={() => console.log('close')} />
+        </Card.Toolbar>
+      </Card.Root>
+    );
+  },
+};
+
+export const Description: Story = {
+  args: {
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraph(3),
+  },
+  render: ({ title, description }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.CloseIconButton onClick={() => console.log('close')} />
+        </Card.Toolbar>
+        <Card.Content>
+          <Card.Row>
+            <Card.Text variant='description'>{description}</Card.Text>
+          </Card.Row>
+        </Card.Content>
+      </Card.Root>
+    );
+  },
+};
+
+export const Mock = () => (
+  <div className='grid grid-cols-[2rem_1fr_2rem] w-full dx-card-min-width dx-card-max-width border border-separator rounded-xs'>
+    <div className='grid grid-cols-subgrid col-span-full'>
+      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+        <Icon icon='ph--dots-six-vertical--regular' />
+      </div>
+      <div className='p-1 whitespace-normal break-words text-description items-center'>
+        This line is very very long and it should wrap.
+      </div>
+      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+        <Icon icon='ph--x--regular' />
+      </div>
+    </div>
+    <div className='grid grid-cols-subgrid col-span-3'>
+      <div role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+        <Icon icon='ph--dots-six-vertical--regular' />
+      </div>
+      <div className='p-1 text-description items-center col-span-2'>
+        This line is very very long and it should wrap.
+      </div>
+    </div>
+  </div>
+);