@dxos/react-ui-stack 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.5ad4a44",
+  "version": "0.8.4-main.66e292d",
   "description": "A stack component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -54,36 +54,36 @@
     "@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.5ad4a44",
-    "@dxos/keyboard": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-attention": "0.8.4-main.5ad4a44",
-    "@dxos/live-object": "0.8.4-main.5ad4a44",
-    "@dxos/storybook-utils": "0.8.4-main.5ad4a44",
-    "@dxos/util": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-dnd": "0.8.4-main.5ad4a44"
+    "@dxos/echo": "0.8.4-main.66e292d",
+    "@dxos/live-object": "0.8.4-main.66e292d",
+    "@dxos/keyboard": "0.8.4-main.66e292d",
+    "@dxos/react-ui-attention": "0.8.4-main.66e292d",
+    "@dxos/react-ui-dnd": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@types/react-dom": "~19.2.2",
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/app-graph": "0.8.4-main.5ad4a44",
-    "@dxos/echo": "0.8.4-main.5ad4a44",
-    "@dxos/client": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/random": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44",
-    "@dxos/storybook-utils": "0.8.4-main.5ad4a44",
-    "@dxos/test-utils": "0.8.4-main.5ad4a44"
+    "@dxos/app-graph": "0.8.4-main.66e292d",
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/client": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d",
+    "@dxos/test-utils": "0.8.4-main.66e292d",
+    "@dxos/echo": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/client": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44",
-    "@dxos/random": "0.8.4-main.5ad4a44"
+    "@dxos/client": "0.8.4-main.66e292d",
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Image/Image.stories.tsx

@@ -3,14 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { faker } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { Image } from './Image';
 
-faker.seed(1);
+const seed = Math.random();
+
+faker.seed(seed);
 
 const meta = {
   title: 'ui/react-ui-stack/Image',
@@ -22,7 +24,7 @@ const meta = {
   ),
   decorators: [withTheme],
   parameters: {
-    layout: 'fullscreen',
+    layout: 'centered',
   },
 } satisfies Meta<typeof Image>;
 
@@ -44,13 +46,39 @@ export const Default: Story = {
 export const Cors: Story = {
   args: {
     src: 'https://dxos.network/dxos-logotype-blue.png',
-    classNames: 'w-[20rem]',
+    classNames: 'is-[20rem]',
+  },
+};
+
+export const Corners: Story = {
+  args: {
+    src: 'https://media.licdn.com/dms/image/v2/D4D0BAQEY4OiENeMR4A/company-logo_200_200/company-logo_200_200/0/1728648673877/moonfire_logo?e=1763596800&v=beta&t=_Jmhg-vu5uqUR88YiTbDFOC4ShlUbjk63_7-JQpgK9A',
+    classNames: 'is-[20rem]',
   },
 };
 
 export const SVG: Story = {
   args: {
     src: 'https://dxos.network/bg-kube.svg',
-    classNames: 'w-[20rem]',
+    classNames: 'is-[20rem]',
+  },
+};
+
+export const Many: Story = {
+  args: {
+    src: 'https://dxos.network/bg-kube.svg',
+  },
+  render: () => {
+    const images = useMemo(
+      () => Array.from({ length: 9 }, (_, i) => `https://picsum.photos/seed/${seed + i}/500/500`),
+      [],
+    );
+    return (
+      <div className='is-[60rem] grid grid-cols-3 grid-rows-3 gap-8'>
+        {images.map((src, i) => (
+          <Image key={i} src={src} classNames='is-[18rem] bs-[12rem]' />
+        ))}
+      </div>
+    );
   },
 };

package/src/components/Image/Image.tsx

@@ -2,18 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type SyntheticEvent, useRef, useState } from 'react';
+import React, { type SyntheticEvent, useCallback, useRef, useState } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-export type ImageProps = ThemedClassName<{
-  src: string;
-  alt?: string;
-  crossOrigin?: 'anonymous' | 'use-credentials' | '';
-  sampleSize?: number;
-  contrast?: number;
-}>;
+const cache = new Map<string, string>();
+
+export type ImageProps = ThemedClassName<
+  {
+    src: string;
+    alt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  } & ColorOptions
+>;
 
 export const Image = ({
   classNames,
@@ -21,83 +23,47 @@ export const Image = ({
   alt = '',
   crossOrigin = 'anonymous',
   sampleSize = 64,
-  contrast = 0.95,
+  contrast = 0.9,
 }: ImageProps) => {
   const [crossOriginState, setCrossOriginState] = useState<ImageProps['crossOrigin']>(crossOrigin);
   const [dominantColor, setDominantColor] = useState<string | undefined>(undefined);
   const [imageLoaded, setImageLoaded] = useState<boolean>(false);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
-  // TODO(burdon): Cache?
-  const extractDominantColor = (img: HTMLImageElement): void => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) {
-      return;
-    }
+  // CORS not supported by server.
+  const handleImageError = (): void => {
+    setCrossOriginState(undefined);
+  };
 
-    // Draw the image scaled down.
-    canvas.width = sampleSize;
-    canvas.height = sampleSize;
-    ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
-
-    try {
-      // Get image data.
-      const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
-      const pixels = imageData.data;
-
-      // Calculate average color with more weight to vibrant colors.
-      let r = 0;
-      let g = 0;
-      let b = 0;
-      let totalWeight = 0;
-      for (let i = 0; i < pixels.length; i += 4) {
-        const red = pixels[i];
-        const green = pixels[i + 1];
-        const blue = pixels[i + 2];
-        const alpha = pixels[i + 3];
-
-        // Skip transparent pixels.
-        if (alpha === 0) continue;
-
-        // Calculate saturation to weight vibrant colors more.
-        const max = Math.max(red, green, blue);
-        const min = Math.min(red, green, blue);
-        const saturation = max === 0 ? 0 : (max - min) / max;
-        const weight = 1 + saturation * 2; // Give more weight to saturated colors.
-
-        r += red * weight;
-        g += green * weight;
-        b += blue * weight;
-        totalWeight += weight;
+  const handleImageLoad = useCallback(
+    ({ target }: SyntheticEvent<HTMLImageElement>): void => {
+      const rgb = cache.get(src);
+      if (rgb) {
+        setDominantColor(rgb);
+        setImageLoaded(true);
+        return;
       }
 
-      if (totalWeight > 0) {
-        r = Math.round(r / totalWeight);
-        g = Math.round(g / totalWeight);
-        b = Math.round(b / totalWeight);
-
-        // Slightly darken the color for better contrast.
-        r = Math.round(r * contrast);
-        g = Math.round(g * contrast);
-        b = Math.round(b * contrast);
-        setDominantColor(`rgb(${r}, ${g}, ${b})`);
+      const img = target as HTMLImageElement;
+      if (!canvasRef.current) {
+        return;
       }
-    } catch {
-      setCrossOriginState(undefined);
-    }
-  };
 
-  // CORS not supported by server.
-  const handleImageError = (): void => {
-    setCrossOriginState(undefined);
-  };
+      try {
+        const color = extractDominantColor(canvasRef.current, img, { sampleSize, contrast });
+        if (color) {
+          const rgb = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+          cache.set(src, rgb);
+          setDominantColor(rgb);
+        }
+      } catch {
+        setCrossOriginState(undefined);
+      }
 
-  const handleImageLoad = (ev: SyntheticEvent<HTMLImageElement>): void => {
-    const img = ev.target as HTMLImageElement;
-    extractDominantColor(img);
-    setImageLoaded(true);
-  };
+      setImageLoaded(true);
+    },
+    [sampleSize, contrast, src],
+  );
 
   return (
     <div
@@ -135,3 +101,122 @@ export const Image = ({
     </div>
   );
 };
+
+type ColorOptions = {
+  sampleSize?: number;
+  contrast?: number;
+};
+
+/**
+ * Get dominant color from image (esp. from corners).
+ */
+const extractDominantColor = (
+  canvas: HTMLCanvasElement,
+  img: HTMLImageElement,
+  { sampleSize = 64, contrast = 0.95 }: ColorOptions,
+): [number, number, number] | null => {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  }
+
+  // Draw the image scaled down.
+  canvas.width = sampleSize;
+  canvas.height = sampleSize;
+  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+
+  // Get image data.
+  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+  const pixels = imageData.data;
+
+  // Check for transparent background.
+  if (isTransparent(pixels, sampleSize)) {
+    return null;
+  }
+
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let totalWeight = 0;
+
+  // Define corner sampling areas (e.g., 25% of each dimension from each corner).
+  const cornerSize = Math.floor(sampleSize * 0.125);
+
+  // Sample only pixels in corner areas.
+  for (let y = 0; y < sampleSize; y++) {
+    for (let x = 0; x < sampleSize; x++) {
+      // Check if pixel is in any corner area.
+      const isInTopLeft = x < cornerSize && y < cornerSize;
+      const isInTopRight = x >= sampleSize - cornerSize && y < cornerSize;
+      const isInBottomLeft = x < cornerSize && y >= sampleSize - cornerSize;
+      const isInBottomRight = x >= sampleSize - cornerSize && y >= sampleSize - cornerSize;
+      if (!isInTopLeft && !isInTopRight && !isInBottomLeft && !isInBottomRight) {
+        continue; // Skip pixels not in corner areas.
+      }
+
+      const i = (y * sampleSize + x) * 4;
+      const red = pixels[i];
+      const green = pixels[i + 1];
+      const blue = pixels[i + 2];
+      const alpha = pixels[i + 3];
+
+      // Skip transparent pixels.
+      if (alpha === 0) continue;
+
+      // Calculate saturation to weight vibrant colors more.
+      const max = Math.max(red, green, blue);
+      const min = Math.min(red, green, blue);
+      const saturation = max === 0 ? 0 : (max - min) / max;
+      const weight = 1 + saturation * 2;
+
+      r += red * weight;
+      g += green * weight;
+      b += blue * weight;
+      totalWeight += weight;
+    }
+  }
+
+  if (totalWeight > 0) {
+    // Slightly darken the color for better contrast.
+    r = Math.round(Math.round(r / totalWeight) * contrast);
+    g = Math.round(Math.round(g / totalWeight) * contrast);
+    b = Math.round(Math.round(b / totalWeight) * contrast);
+    return [r, g, b];
+  }
+
+  return null;
+};
+
+/**
+ * Detects if an image has a transparent background by examining edge pixels.
+ * @param pixels - Image pixel data from canvas
+ * @param sampleSize - Size of the sampled image
+ * @param threshold - Percentage threshold for considering background transparent (default: 0.5)
+ * @returns True if the image has a transparent background
+ */
+const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold: number = 0.5): boolean => {
+  let edgeTransparentPixels = 0;
+  const edgePixels = sampleSize * 4 - 4; // Perimeter minus corners counted twice.
+
+  for (let x = 0; x < sampleSize; x++) {
+    // Top edge.
+    const topIndex = x * 4;
+    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+
+    // Bottom edge.
+    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
+    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+  }
+
+  for (let y = 1; y < sampleSize - 1; y++) {
+    // Left edge.
+    const leftIndex = y * sampleSize * 4;
+    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+
+    // Right edge.
+    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
+    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+  }
+
+  return edgeTransparentPixels / edgePixels > threshold;
+};

package/src/components/Stack/Stack.tsx

@@ -23,6 +23,7 @@ import { type StackContextValue } from '../defs';
 import { StackContext } from '../StackContext';
 
 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 +33,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 +54,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 +69,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),
@@ -135,9 +136,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>) => {
@@ -241,12 +242,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 +293,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/StackItem/StackItem.stories.tsx

@@ -12,7 +12,7 @@ import { StackItem, type StackItemRootProps } from './StackItem';
 
 const DefaultStory = (props: StackItemRootProps) => {
   return (
-    <StackItem.Root role='section' {...props} classNames='w-[20rem] border border-separator'>
+    <StackItem.Root role='section' {...props} classNames='is-[20rem] border border-separator'>
       <StackItem.Heading>
         <span className='sr-only'>Title</span>
         <div role='none' className='sticky -block-start-px bg-[--sticky-bg] p-1 is-full'>

package/src/components/StackItem/StackItemContent.tsx

@@ -27,17 +27,17 @@ export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRe
    */
   scrollable?: boolean;
 
-  /**
-   * Whether the consumer intends to do something custom and typical affordances should not apply.
-   */
-  // TODO(burdon): This is cryptic; can we remove (only used by plugin-inbox?) Normalize toolbar?
-  layoutManaged?: 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;
 };
 
 /**
@@ -71,13 +71,13 @@ export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps
         {...props}
         className={mx(
           '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',
+          stackItemSize === 'contain' && 'min-bs-0 overflow-hidden',
           scrollable ? 'min-bs-0 overflow-y-auto scrollbar-thin contain-layout' : 'overflow-hidden',
           role === 'section' &&
             toolbar &&
             '[&_.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}

package/src/exemplars/Card/Card.tsx

@@ -13,31 +13,31 @@ import React, {
 } from 'react';
 
 import { Icon, IconButton, type ThemedClassName, Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
-import { hoverableControls, mx } from '@dxos/react-ui-theme';
+import { cardMinInlineSize, hoverableControls, mx } from '@dxos/react-ui-theme';
 
 import { Image, StackItem } from '../../components';
 import { translationKey } from '../../translations';
 
 import { cardChrome, cardHeading, cardRoot, cardSpacing, cardText } from './fragments';
 
-type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
-
 /**
  * The default width of cards. It should be no larger than 320px per WCAG 2.1 SC 1.4.10.
  */
-const cardDefaultInlineSize = 18;
+const cardDefaultInlineSize = cardMinInlineSize;
+
 /**
- * This is `cardDefaultInlineSize` plus 2 times the sum of the inner and outer spacing applied by CardStack on the
- * inline axis.
+ * 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;
 
-const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'group', ...props }, forwardedRef) => {
+type SharedCardProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { asChild?: boolean };
+
+const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps & { id?: string }>(
+  ({ children, classNames, id, asChild, role = 'group', ...props }, forwardedRef) => {
     const Root = asChild ? Slot : 'div';
     const rootProps = asChild ? { classNames: [cardRoot, classNames] } : { className: mx(cardRoot, classNames), role };
     return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
+      <Root {...(id && { 'data-object-id': id })} {...props} {...rootProps} ref={forwardedRef}>
         {children}
       </Root>
     );
@@ -45,18 +45,19 @@ const CardStaticRoot = forwardRef<HTMLDivElement, SharedCardProps>(
 );
 
 /**
- * This should be used by Surface fulfillments in cases where the content may or may not already be encapsulated (e.g.
- * 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.
+ * This should be used by Surface fulfillments in cases where the content may or may not already be encapsulated (e.g., 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 = ({
+  id,
   role = 'never',
   children,
   classNames,
-}: ThemedClassName<PropsWithChildren<{ role?: string }>>) => {
+}: ThemedClassName<PropsWithChildren<{ id?: string; role?: string }>>) => {
   if (['card--popover', 'card--intrinsic', 'card--extrinsic'].includes(role)) {
     return (
       <div
+        {...(id && { 'data-object-id': id })}
         className={mx(
           role === 'card--popover'
             ? 'popover-card-width'
@@ -72,6 +73,7 @@ const CardSurfaceRoot = ({
   } else {
     return (
       <CardStaticRoot
+        id={id}
         classNames={[
           role === 'card--transclusion' && 'mlb-1',
           role === 'card--transclusion' && hoverableControls,
@@ -128,22 +130,26 @@ const CardDragPreview = StackItem.DragPreview;
 
 const CardMenu = Primitive.div as FC<ComponentPropsWithRef<'div'>>;
 
-type CardPosterProps = {
-  alt: string;
-  aspect?: 'video' | 'auto';
-} & Partial<{ image: string; icon: string }>;
+type CardPosterProps = ThemedClassName<
+  {
+    alt: string;
+    aspect?: 'video' | 'auto';
+  } & Partial<{ image: string; icon: string }>
+>;
 
 const CardPoster = (props: CardPosterProps) => {
   const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';
   if (props.image) {
-    return <Image classNames={[`dx-card__poster is-full __bs-auto`, aspect]} src={props.image} alt={props.alt} />;
+    return (
+      <Image classNames={[`dx-card__poster is-full`, aspect, props.classNames]} src={props.image} alt={props.alt} />
+    );
   }
 
   if (props.icon) {
     return (
       <div
         role='image'
-        className={mx(`dx-card__poster grid place-items-center bg-inputSurface text-subdued`, aspect)}
+        className={mx(`dx-card__poster grid place-items-center bg-inputSurface text-subdued`, aspect, props.classNames)}
         aria-label={props.alt}
       >
         <Icon icon={props.icon} size={10} />