@dxos/react-ui-stack 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/dist/types/src/exemplars/CardStack/CardStack.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-import { type StackProps } from '../../components';
-declare const cardStackHeading = "mli-2 order-first bg-transparent rounded-bs-md flex items-center";
-declare const cardStackFooter = "plb-2 mli-2 border-bs border-transparent [[data-scroll-separator-end=\"true\"]_&]:border-subduedSeparator";
-declare const cardStackContent = "shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop";
-declare const cardStackRoot = "flex flex-col pli-2 plb-2";
-declare const cardStackItem = "contain-layout pli-2 plb-1 first-of-type:pbs-0 last-of-type:pbe-0";
-export declare const CardStack: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & {
-        footer?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Stack: React.ForwardRefExoticComponent<Omit<Omit<StackProps, "orientation" | "rail" | "size" | "separatorOnScroll">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Heading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Footer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    DragHandle: React.ForwardRefExoticComponent<{
-        toolbarItem?: boolean;
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & {
-        asChild?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-};
-export { cardStackRoot, cardStackFooter, cardStackHeading, cardStackContent, cardStackItem };
-//# sourceMappingURL=CardStack.d.ts.map

package/dist/types/src/exemplars/CardStack/CardStack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStack.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStack.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAKzE,OAAO,EAAS,KAAK,UAAU,EAAuC,MAAM,kBAAkB,CAAC;AA+B/F,QAAA,MAAM,gBAAgB,qEAAqE,CAAC;AAgB5F,QAAA,MAAM,eAAe,8GACsF,CAAC;AAgB5G,QAAA,MAAM,gBAAgB,uHACgG,CAAC;AAqBvH,QAAA,MAAM,aAAa,8BAA8B,CAAC;AAgBlD,QAAA,MAAM,aAAa,sEAAsE,CAAC;AAgB1F,eAAO,MAAM,SAAS;;;;kBAnHqE,OAAO;;;;;kBAAP,OAAO;;iBAiEvF,OAAO;;;;;;kBAjEyE,OAAO;;;;;kBAAP,OAAO;;;;;;;;kBAAP,OAAO;;CA2HjG,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,CAAC"}

package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts

@@ -1,15 +0,0 @@
-import { type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-declare const CardStackStory: () => React.JSX.Element;
-declare const meta: {
-    title: string;
-    component: () => React.JSX.Element;
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof CardStackStory>;
-export declare const Default: Story;
-//# sourceMappingURL=CardStack.stories.d.ts.map

package/dist/types/src/exemplars/CardStack/CardStack.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStack.stories.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStack.stories.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAgC,MAAM,OAAO,CAAC;AAyBrD,QAAA,MAAM,cAAc,yBA8HnB,CAAC;AAEF,QAAA,MAAM,IAAI;;;;;;;CAO6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAE7C,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}

package/dist/types/src/exemplars/CardStack/CardStackDragPreview.d.ts

@@ -1,9 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type StackProps } from '../../components';
-export declare const CardStackDragPreview: {
-    Root: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-    Heading: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-    Content: ({ children, itemsCount, }: PropsWithChildren<Pick<StackProps, "itemsCount">>) => React.JSX.Element;
-    Footer: ({ children }: PropsWithChildren<{}>) => React.JSX.Element;
-};
-//# sourceMappingURL=CardStackDragPreview.d.ts.map

package/dist/types/src/exemplars/CardStack/CardStackDragPreview.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardStackDragPreview.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/CardStackDragPreview.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA8CnD,eAAO,MAAM,oBAAoB;yBA3Ce,iBAAiB,CAAC,EAAE,CAAC;4BAUlB,iBAAiB,CAAC,EAAE,CAAC;yCAmBrE,iBAAiB,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;2BAUF,iBAAiB,CAAC,EAAE,CAAC;CAStE,CAAC"}

package/dist/types/src/exemplars/CardStack/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CardStack';
-export * from './CardStackDragPreview';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/exemplars/CardStack/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/exemplars/CardStack/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC"}

package/dist/types/src/exemplars/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Card';
-export * from './CardStack';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/exemplars/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/exemplars/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/dist/types/src/testing/CardContainer.d.ts

@@ -1,6 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-export declare const CardContainer: ({ children, icon, role, }: PropsWithChildren<{
-    icon?: string;
-    role?: string;
-}>) => React.JSX.Element;
-//# sourceMappingURL=CardContainer.d.ts.map

package/dist/types/src/testing/CardContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CardContainer.d.ts","sourceRoot":"","sources":["../../../../src/testing/CardContainer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMtD,eAAO,MAAM,aAAa,GAAI,2BAI3B,iBAAiB,CAAC;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,sBAsBrD,CAAC"}

package/dist/types/src/testing/index.d.ts

@@ -1,2 +0,0 @@
-export * from './CardContainer';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

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

@@ -1,84 +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: '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: '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

@@ -1,222 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import React, { type SyntheticEvent, useCallback, useRef, useState } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-const cache = new Map<string, string>();
-
-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.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);
-
-  // CORS not supported by server.
-  const handleImageError = (): void => {
-    setCrossOriginState(undefined);
-  };
-
-  const handleImageLoad = useCallback(
-    ({ target }: SyntheticEvent<HTMLImageElement>): void => {
-      const rgb = cache.get(src);
-      if (rgb) {
-        setDominantColor(rgb);
-        setImageLoaded(true);
-        return;
-      }
-
-      const img = target as HTMLImageElement;
-      if (!canvasRef.current) {
-        return;
-      }
-
-      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);
-      }
-
-      setImageLoaded(true);
-    },
-    [sampleSize, contrast, src],
-  );
-
-  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;
-};
-
-/**
- * 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/Image/index.ts

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

package/src/components/deprecated/LayoutControls.tsx

@@ -1,109 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import React, { forwardRef } from 'react';
-
-import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
-
-import { translationKey } from '../../translations';
-
-export type LayoutControlEvent = 'solo' | 'close' | `${'pin' | 'increment'}-${'start' | 'end'}`;
-export type LayoutControlHandler = (event: LayoutControlEvent) => void;
-
-export type LayoutCapabilities = {
-  incrementStart?: boolean;
-  incrementEnd?: boolean;
-  solo?: boolean;
-};
-
-export type LayoutControlsProps = Omit<ButtonGroupProps, 'onClick'> & {
-  onClick?: LayoutControlHandler;
-  variant?: 'hide-disabled' | 'default';
-  close?: boolean | 'minify-start' | 'minify-end';
-  capabilities: LayoutCapabilities;
-  isSolo?: boolean;
-  pin?: 'start' | 'end' | 'both';
-};
-
-const LayoutControl = ({ icon, label, ...props }: Omit<ButtonProps, 'children'> & { label: string; icon: string }) => {
-  return <IconButton iconOnly icon={icon} label={label} tooltipSide='bottom' variant='ghost' {...props} />;
-};
-
-export const LayoutControls = forwardRef<HTMLDivElement, LayoutControlsProps>(
-  (
-    { onClick, variant = 'default', capabilities: can, isSolo, pin, close = false, children, ...props },
-    forwardedRef,
-  ) => {
-    const { t } = useTranslation(translationKey);
-    const buttonClassNames = variant === 'hide-disabled' ? 'disabled:hidden !p-1' : '!p-1';
-
-    return (
-      <ButtonGroup {...props} ref={forwardedRef}>
-        {pin && !isSolo && ['both', 'start'].includes(pin) && (
-          <LayoutControl
-            label={t('pin start label')}
-            variant='ghost'
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-start')}
-            icon='ph--caret-line-left--regular'
-          />
-        )}
-
-        {can.solo && (
-          <LayoutControl
-            label={t('solo layout label')}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('solo')}
-            icon={isSolo ? 'ph--arrows-in--regular' : 'ph--arrows-out--regular'}
-          />
-        )}
-
-        {!isSolo && can.solo && (
-          <>
-            <LayoutControl
-              label={t('increment start label')}
-              disabled={!can.incrementStart}
-              classNames={buttonClassNames}
-              onClick={() => onClick?.('increment-start')}
-              icon='ph--caret-left--regular'
-            />
-            <LayoutControl
-              label={t('increment end label')}
-              disabled={!can.incrementEnd}
-              classNames={buttonClassNames}
-              onClick={() => onClick?.('increment-end')}
-              icon='ph--caret-right--regular'
-            />
-          </>
-        )}
-
-        {pin && !isSolo && ['both', 'end'].includes(pin) && (
-          <LayoutControl
-            label={t('pin end label')}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('pin-end')}
-            icon='ph--caret-line-right--regular'
-          />
-        )}
-
-        {close && !isSolo && (
-          <LayoutControl
-            label={t(`${typeof close === 'string' ? 'minify' : 'close'} label`)}
-            classNames={buttonClassNames}
-            onClick={() => onClick?.('close')}
-            data-testid='layoutHeading.close'
-            icon={
-              close === 'minify-start'
-                ? 'ph--caret-line-left--regular'
-                : close === 'minify-end'
-                  ? 'ph--caret-line-right--regular'
-                  : 'ph--x--regular'
-            }
-          />
-        )}
-        {children}
-      </ButtonGroup>
-    );
-  },
-);

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,
-  },
-};