@dxos/react-ui-stack 0.8.4-main.ead640a → 0.8.4-main.ef1bc66f44

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

@@ -1,78 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useMemo } from 'react';
-
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { Image } from './Image';
-
-const seed = Math.random();
-
-faker.seed(seed);
-
-const meta = {
-  title: 'ui/react-ui-stack/Image',
-  component: Image,
-  render: (args) => (
-    <div className='absolute inset-0 flex place-items-center'>
-      <Image {...args} />
-    </div>
-  ),
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Image>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    src: faker.image.url(),
-  },
-};
-
-/**
- * Access to image at 'https://dxos.network/dxos-logotype-blue.png'
- * from origin 'http://localhost:9009' has been blocked by CORS policy:
- * No 'Access-Control-Allow-Origin' header is present on the requested resource.
- */
-export const Cors: Story = {
-  args: {
-    src: 'https://dxos.network/dxos-logotype-blue.png',
-    classNames: 'w-[20rem]',
-  },
-};
-
-export const SVG: Story = {
-  args: {
-    src: 'https://dxos.network/bg-kube.svg',
-    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

@@ -1,192 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-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' | '';
-  } & ColorOptions
->;
-
-export const Image = ({
-  classNames,
-  src,
-  alt = '',
-  crossOrigin = 'anonymous',
-  sampleSize = 64,
-  contrast = 0.95,
-}: 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);
-
-  // 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;
-    }
-
-    try {
-      const color = extractDominantColor(canvasRef.current, img, { sampleSize, contrast });
-      if (color) {
-        setDominantColor(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
-      }
-    } catch {
-      setCrossOriginState(undefined);
-    }
-
-    setImageLoaded(true);
-  };
-
-  return (
-    <div
-      className={mx(`relative flex is-full justify-center overflow-hidden transition-all duration-700`, classNames)}
-      style={{
-        backgroundColor: dominantColor,
-      }}
-    >
-      {/* Hidden canvas for color extraction. */}
-      <canvas ref={canvasRef} style={{ display: 'none' }} aria-hidden='true' />
-
-      {/* Background gradient overlay for smooth transition. */}
-      <div
-        className='absolute inset-0 pointer-events-none'
-        style={{
-          background: dominantColor
-            ? `radial-gradient(circle at center, transparent 30%, ${dominantColor} 100%)`
-            : undefined,
-          transition: 'opacity 0.7s ease-in-out',
-          opacity: 0.5,
-        }}
-      />
-
-      <img
-        src={src}
-        alt={alt}
-        crossOrigin={crossOriginState}
-        onError={handleImageError}
-        onLoad={handleImageLoad}
-        className={mx('z-10 object-contain transition-opacity duration-500', classNames)}
-        style={{
-          opacity: imageLoaded ? 1 : 0,
-        }}
-      />
-    </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/Image/index.ts

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

package/src/exemplars/Card/Card.stories.tsx

@@ -1,64 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
-
-import { Card } from './Card';
-
-faker.seed(0);
-
-type CardStoryProps = {
-  title: string;
-  description: string;
-  image: string;
-  showImage: boolean;
-  showIcon: boolean;
-};
-
-const DefaultStory = ({ title, description, image, showImage, showIcon }: CardStoryProps) => {
-  return (
-    <div className='max-is-md'>
-      <Card.StaticRoot>
-        <Card.Toolbar>
-          <Card.DragHandle toolbarItem />
-          <Card.ToolbarSeparator variant='gap' />
-          <Card.ToolbarIconButton iconOnly variant='ghost' icon='ph--x--regular' label={'remove card label'} />
-        </Card.Toolbar>
-        {showImage && <Card.Poster alt={title} image={image} />}
-        {!showImage && showIcon && <Card.Poster alt={title} icon='ph--building-office--regular' />}
-        <Card.Heading>{title}</Card.Heading>
-        {description && <Card.Text classNames='line-clamp-2'>{description}</Card.Text>}
-      </Card.StaticRoot>
-    </div>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-stack/Card',
-  render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    layout: 'centered',
-  },
-} 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(),
-    image,
-    showImage: true,
-    showIcon: true,
-  },
-};

package/src/exemplars/Card/Card.tsx

@@ -1,204 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import React, {
-  type ComponentPropsWithRef,
-  type ComponentPropsWithoutRef,
-  type FC,
-  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 { 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;
-/**
- * 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';
-    const rootProps = asChild ? { classNames: [cardRoot, classNames] } : { className: mx(cardRoot, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-/**
- * 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 = ({
-  role = 'never',
-  children,
-  classNames,
-}: ThemedClassName<PropsWithChildren<{ role?: string }>>) => {
-  if (['card--popover', 'card--intrinsic', 'card--extrinsic'].includes(role)) {
-    return (
-      <div
-        className={mx(
-          role === 'card--popover'
-            ? 'popover-card-width'
-            : ['card--intrinsic', 'card--extrinsic'].includes(role)
-              ? 'contents'
-              : '',
-          classNames,
-        )}
-      >
-        {children}
-      </div>
-    );
-  } else {
-    return (
-      <CardStaticRoot
-        classNames={[
-          role === 'card--transclusion' && 'mlb-1',
-          role === 'card--transclusion' && hoverableControls,
-          classNames,
-        ]}
-      >
-        {children}
-      </CardStaticRoot>
-    );
-  }
-};
-
-const CardHeading = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'heading', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardHeading, cardText, classNames] }
-      : { className: mx(cardHeading, cardText, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const CardToolbar = forwardRef<HTMLDivElement, ToolbarRootProps>(({ children, classNames, ...props }, forwardedRef) => {
-  return (
-    <Toolbar.Root {...props} classNames={['bg-transparent density-coarse', classNames]} ref={forwardedRef}>
-      {children}
-    </Toolbar.Root>
-  );
-});
-
-const CardToolbarIconButton = Toolbar.IconButton;
-const CardToolbarSeparator = Toolbar.Separator;
-
-const CardDragHandle = forwardRef<HTMLButtonElement, { toolbarItem?: boolean }>(({ toolbarItem }, forwardedRef) => {
-  const { t } = useTranslation(translationKey);
-  const Root = toolbarItem ? Toolbar.IconButton : IconButton;
-  return (
-    <Root
-      iconOnly
-      icon='ph--dots-six-vertical--regular'
-      variant='ghost'
-      label={t('drag handle label')}
-      classNames='pli-2'
-      ref={forwardedRef}
-    />
-  );
-});
-
-const CardDragPreview = StackItem.DragPreview;
-
-const CardMenu = Primitive.div as FC<ComponentPropsWithRef<'div'>>;
-
-type CardPosterProps = {
-  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`, aspect]} 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)}
-        aria-label={props.alt}
-      >
-        <Icon icon={props.icon} size={10} />
-      </div>
-    );
-  }
-};
-
-const CardChrome = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild
-      ? { classNames: [cardChrome, classNames] }
-      : { className: mx(cardChrome, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-const CardText = forwardRef<HTMLDivElement, SharedCardProps>(
-  ({ children, classNames, asChild, role = 'none', ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : 'div';
-    const rootProps = asChild ? { classNames: [cardText, classNames] } : { className: mx(cardText, classNames), role };
-    return (
-      <Root {...props} {...rootProps} ref={forwardedRef}>
-        {children}
-      </Root>
-    );
-  },
-);
-
-export const Card = {
-  StaticRoot: CardStaticRoot,
-  SurfaceRoot: CardSurfaceRoot,
-  Heading: CardHeading,
-  Toolbar: CardToolbar,
-  ToolbarIconButton: CardToolbarIconButton,
-  ToolbarSeparator: CardToolbarSeparator,
-  DragHandle: CardDragHandle,
-  DragPreview: CardDragPreview,
-  Menu: CardMenu,
-  Poster: CardPoster,
-  Chrome: CardChrome,
-  Text: CardText,
-};
-
-export {
-  cardRoot,
-  cardHeading,
-  cardText,
-  cardChrome,
-  cardSpacing,
-  cardStackDefaultInlineSizeRem,
-  cardDefaultInlineSize,
-};

package/src/exemplars/Card/CardDragPreview.tsx

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type PropsWithChildren } from 'react';
-
-import { mx } from '@dxos/react-ui-theme';
-
-import { cardRoot } from './fragments';
-
-const CardDragPreviewRoot = ({ children }: PropsWithChildren<{}>) => {
-  return <div className='p-2'>{children}</div>;
-};
-
-const CardDragPreviewContent = ({ children }: PropsWithChildren<{}>) => {
-  return <div className={mx(cardRoot, 'ring-focusLine ring-neutralFocusIndicator')}>{children}</div>;
-};
-
-export const CardDragPreview = {
-  Root: CardDragPreviewRoot,
-  Content: CardDragPreviewContent,
-};

package/src/exemplars/Card/fragments.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export const cardRoot =
-  'rounded overflow-hidden bg-cardSurface border border-separator dark:border-subduedSeparator dx-focus-ring-group-y-indicator relative min-bs-[--rail-item] group/card';
-
-export const cardSpacing = 'pli-cardSpacingInline mlb-cardSpacingBlock';
-export const cardNoSpacing = 'pli-0 mlb-0';
-export const labelSpacing = 'mbs-inputSpacingBlock mbe-labelSpacingBlock';
-
-export const cardDialogContent = 'p-0 bs-content min-bs-[8rem] max-bs-full md:max-is-[32rem] overflow-hidden';
-export const cardDialogHeader = 'pli-cardSpacingInline mbs-cardSpacingBlock flex justify-between';
-export const cardDialogOverflow = 'overflow-y-auto min-bs-0 flex-1';
-export const cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
-export const cardDialogSearchListRoot =
-  'pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col';
-
-export const cardText = cardSpacing;
-
-export const cardHeading = 'text-lg font-medium line-clamp-2 grow';
-
-export const cardChrome =
-  'pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full [&_.dx-button]:pis-[calc(var(--dx-cardSpacingInline)-var(--dx-cardSpacingChrome))]';

package/src/exemplars/Card/index.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Card';
-export * from './CardDragPreview';
-export * from './fragments';

package/src/exemplars/index.ts

@@ -1,6 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './Card';
-export * from './CardStack';

package/src/testing/CardContainer.tsx

@@ -1,37 +0,0 @@
-//
-// 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

@@ -1,5 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-export * from './CardContainer';