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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-stack",
-  "version": "0.8.4-main.a4bbb77",
+  "version": "0.8.4-main.ae835ea",
   "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/keyboard": "0.8.4-main.a4bbb77",
-    "@dxos/live-object": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-attention": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-dnd": "0.8.4-main.a4bbb77",
-    "@dxos/storybook-utils": "0.8.4-main.a4bbb77",
-    "@dxos/util": "0.8.4-main.a4bbb77",
-    "@dxos/echo-schema": "0.8.4-main.a4bbb77"
+    "@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"
   },
   "devDependencies": {
-    "@types/react": "~19.2.0",
-    "@types/react-dom": "~19.2.0",
+    "@types/react": "~19.2.2",
+    "@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.a4bbb77",
-    "@dxos/client": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77",
-    "@dxos/storybook-utils": "0.8.4-main.a4bbb77",
-    "@dxos/test-utils": "0.8.4-main.a4bbb77",
-    "@dxos/random": "0.8.4-main.a4bbb77",
-    "@dxos/echo-schema": "0.8.4-main.a4bbb77"
+    "@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"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/client": "0.8.4-main.a4bbb77",
-    "@dxos/random": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui": "0.8.4-main.a4bbb77",
-    "@dxos/react-ui-theme": "0.8.4-main.a4bbb77"
+    "@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"
   },
   "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>;
 
@@ -54,3 +56,23 @@ export const SVG: Story = {
     classNames: 'w-[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`),
+      [],
+    );
+    console.log(images);
+    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

@@ -7,13 +7,13 @@ import React, { type SyntheticEvent, 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;
-}>;
+export type ImageProps = ThemedClassName<
+  {
+    src: string;
+    alt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  } & ColorOptions
+>;
 
 export const Image = ({
   classNames,
@@ -28,74 +28,26 @@ export const Image = ({
   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) {
+  // CORS not supported by server.
+  const handleImageError = (): void => {
+    setCrossOriginState(undefined);
+  };
+
+  const handleImageLoad = ({ target }: SyntheticEvent<HTMLImageElement>): void => {
+    const img = target as HTMLImageElement;
+    if (!canvasRef.current) {
       return;
     }
 
-    // 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;
-      }
-
-      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 color = extractDominantColor(canvasRef.current, img, { sampleSize, contrast });
+      if (color) {
+        setDominantColor(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
       }
     } catch {
       setCrossOriginState(undefined);
     }
-  };
 
-  // CORS not supported by server.
-  const handleImageError = (): void => {
-    setCrossOriginState(undefined);
-  };
-
-  const handleImageLoad = (ev: SyntheticEvent<HTMLImageElement>): void => {
-    const img = ev.target as HTMLImageElement;
-    extractDominantColor(img);
     setImageLoaded(true);
   };
 
@@ -135,3 +87,106 @@ export const Image = ({
     </div>
   );
 };
+
+type ColorOptions = {
+  sampleSize?: number;
+  contrast?: number;
+};
+
+// TODO(burdon): Cache?
+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;
+
+  // Calculate average color with more weight to vibrant colors.
+  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);
+    // Give more weight to saturated colors.
+    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/StackItem/StackItem.stories.tsx

@@ -25,7 +25,7 @@ const DefaultStory = (props: StackItemRootProps) => {
           </DropdownMenu.Root>
         </div>
       </StackItem.Heading>
-      <StackItem.Content classNames='p-2'>Content</StackItem.Content>
+      <StackItem.Content>Content</StackItem.Content>
     </StackItem.Root>
   );
 };

package/src/components/StackItem/StackItemContent.tsx

@@ -9,7 +9,8 @@ import { mx } from '@dxos/react-ui-theme';
 
 import { useStack, useStackItem } from '../StackContext';
 
-export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role'>> & {
+// TODO(burdon): Add prop for container-max-width?
+export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'role' | 'scrollable'>> & {
   /**
    * 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.
@@ -22,15 +23,21 @@ export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRe
   statusbar?: boolean;
 
   /**
-   * Whether the consumer intends to do something custom and typical affordances should not apply
+   * Whether to support y-axis scrolling.
    */
-  layoutManaged?: boolean;
+  scrollable?: 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.
+   * 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;
 };
 
 /**
@@ -38,7 +45,10 @@ export type StackItemContentProps = ThemedClassName<Omit<ComponentPropsWithoutRe
  * The `toolbar` flag must be provided since this component provides for the layout of content with the toolbar.
  */
 export const StackItemContent = forwardRef<HTMLDivElement, StackItemContentProps>(
-  ({ children, toolbar, statusbar, layoutManaged, classNames, size = 'intrinsic', ...props }, forwardedRef) => {
+  (
+    { children, toolbar, statusbar, layoutManaged, classNames, size = 'intrinsic', scrollable, ...props },
+    forwardedRef,
+  ) => {
     const { size: stackItemSize } = useStack();
     const { role } = useStackItem();
     const style = useMemo(
@@ -61,12 +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/components/StackItem/StackItemHeading.tsx

@@ -2,7 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentPropsWithRef,
@@ -30,7 +29,6 @@ export const StackItemHeading = ({
   ...props
 }: StackItemHeadingProps) => {
   const { orientation } = useStack();
-  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
 
   const Root = asChild ? Slot : 'div';
 
@@ -38,10 +36,8 @@ export const StackItemHeading = ({
     <Root
       role='heading'
       {...props}
-      tabIndex={0}
-      {...focusableGroupAttrs}
       className={mx(
-        'flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface',
+        'flex items-center !border-is-0 bg-headerSurface',
         separateOnScroll
           ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator'
           : 'border-subduedSeparator',

package/src/exemplars/Card/Card.tsx

@@ -22,6 +22,16 @@ import { cardChrome, cardHeading, cardRoot, cardSpacing, cardText } from './frag
 
 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;
+/**
+ * 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) => {
     const Root = asChild ? Slot : 'div';
@@ -126,7 +136,7 @@ type CardPosterProps = {
 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]} src={props.image} alt={props.alt} />;
   }
 
   if (props.icon) {
@@ -183,4 +193,12 @@ export const Card = {
   Text: CardText,
 };
 
-export { cardRoot, cardHeading, cardText, cardChrome, cardSpacing };
+export {
+  cardRoot,
+  cardHeading,
+  cardText,
+  cardChrome,
+  cardSpacing,
+  cardStackDefaultInlineSizeRem,
+  cardDefaultInlineSize,
+};