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

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import ErrorStackParser from 'error-stack-parser';
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+type LocalFrame = { href: string; fileName: string };
+
+/**
+ * Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
+ */
+export const ErrorStack = ({ error }: { error: Error }) => {
+  const frames = ErrorStackParser.parse(error);
+
+  return (
+    <div className='font-mono text-sm'>
+      {frames.map((frame, i) => {
+        const isLast = i === frames.length - 1;
+        const local = frame.fileName
+          ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber)
+          : undefined;
+        const name = frame.functionName ?? '<anonymous>';
+        return (
+          <div
+            key={i}
+            className={mx(
+              'grid grid-cols-[16px_1fr_auto_auto] items-stretch gap-x-2',
+              local && 'cursor-pointer hover:bg-hover-surface',
+            )}
+          >
+            {/* Tree connector: vertical line full-height + horizontal branch at midpoint */}
+            <div className='relative'>
+              <div
+                className={mx(
+                  'absolute left-1/2 -translate-x-1/2 w-px bg-neutral-500',
+                  isLast ? 'top-0 h-1/2' : 'inset-y-0',
+                )}
+              />
+              <div className='absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500' />
+            </div>
+            {local ? (
+              <a href={local.href} className='truncate self-center'>
+                {name}
+              </a>
+            ) : (
+              <span className='text-subdued truncate self-center'>{name}</span>
+            )}
+            <span className='text-xs text-subdued truncate self-center'>{local?.fileName ?? ''}</span>
+            <span className='text-xs text-subdued text-right self-center'>
+              {local ? `${frame.lineNumber}:${frame.columnNumber}` : ''}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+/**
+ * Parses a Vite `/@fs/` URL into a `vscode://` deep link and short filename.
+ * Returns undefined if the URL cannot be resolved to a local file.
+ */
+const parseLocalFrame = (fileUrl: string, line?: number, col?: number): LocalFrame | undefined => {
+  try {
+    const { pathname } = new URL(fileUrl);
+    if (!pathname.startsWith('/@fs/')) {
+      return undefined;
+    }
+    const localPath = pathname.slice(4); // /@fs/Users/... → /Users/...
+    return {
+      href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
+      fileName: pathname.split('/').pop() ?? localPath,
+    };
+  } catch {
+    return undefined;
+  }
+};

package/src/components/ErrorFallback/ThrowError.tsx

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+export type ThrowErrorProps = {
+  error?: () => Error;
+  delay?: number;
+};
+
+/**
+ * Use this to debug the error boundary.
+ */
+export const ThrowError = ({ delay = 1_000, ...props }: ThrowErrorProps) => {
+  const [error, setError] = useState<Error>();
+  useEffect(() => {
+    if (delay < 0) {
+      return;
+    }
+
+    const t = setTimeout(() => {
+      setError(generator({ delay, ...props }));
+    }, delay);
+    return () => clearTimeout(t);
+  }, [delay, generator]);
+
+  if (error) {
+    throw error;
+  }
+
+  return null;
+};
+
+const generator = ({ error, delay }: ThrowErrorProps) => {
+  return error?.() ?? new Error(`Error generated after ${delay}ms`);
+};

package/src/components/ErrorFallback/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export { ErrorBoundary, type ErrorBoundaryProps, type FallbackProps } from '@dxos/react-error-boundary';
+
+export * from './ErrorFallback';
+export * from './ErrorStack';
+export * from './ThrowError';

package/src/components/Icon/Icon.stories.tsx

@@ -60,9 +60,9 @@ const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Icon',
+  title: 'ui/react-ui-core/components/Icon',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/Icon/Icon.tsx

@@ -20,7 +20,7 @@ export const Icon = memo(
     const { tx } = useThemeContext();
     const href = useIconHref(icon);
     return (
-      <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
+      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
         <use href={href} />
       </svg>
     );

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

@@ -0,0 +1,86 @@
+//
+// 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-mosaic/Image',
+  component: Image,
+  render: (args) => (
+    <div className='absolute inset-0 flex justify-center 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(),
+  },
+};
+
+const classNames = 'h-[12rem] w-[18rem]';
+
+/**
+ * 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,
+  },
+};
+
+export const Corners: Story = {
+  args: {
+    src: 'https://picsum.photos/seed/picsum/200/200',
+    classNames,
+  },
+};
+
+export const SVG: Story = {
+  args: {
+    src: 'https://dxos.network/bg-kube.svg',
+    classNames,
+  },
+};
+
+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='w-[60rem] grid grid-cols-3 grid-rows-3 gap-8'>
+        {images.map((src, i) => (
+          <Image key={i} src={src} classNames={classNames} />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/Image/Image.tsx

@@ -0,0 +1,223 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type SyntheticEvent, useCallback, useRef, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+const cache = new Map<string, string>();
+
+export type ImageProps = ThemedClassName<
+  {
+    src: string;
+    alt?: string;
+    crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  } & ColorOptions
+>;
+
+// TODO(burdon): Option for neutral background color.
+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 w-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='z-10 object-contain transition-opacity duration-500'
+        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

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

package/src/components/Input/Input.stories.tsx

@@ -5,10 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/ui-theme';
 import { type MessageValence } from '@dxos/ui-types';
 
-import { withTheme } from '../../testing';
+import { withLayoutVariants, withTheme } from '../../testing';
 
 import {
   type CheckboxProps,
@@ -29,7 +28,7 @@ type VariantMap = {
 
 type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
 
-type BaseProps = Partial<{
+type StoryProps = Partial<{
   kind: keyof VariantMap;
   label: string;
   labelVisuallyHidden: boolean;
@@ -39,7 +38,7 @@ type BaseProps = Partial<{
   validationMessage: string;
 }>;
 
-const Wrapper = ({
+const DefaultStory = ({
   kind,
   label,
   description,
@@ -48,7 +47,7 @@ const Wrapper = ({
   validationValence,
   validationMessage,
   ...props
-}: BaseProps) => {
+}: StoryProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
@@ -60,48 +59,28 @@ const Wrapper = ({
       {kind === 'switch' && <Input.Switch {...props} />}
 
       <Input.DescriptionAndValidation srOnly={descriptionVisuallyHidden}>
-        {validationMessage && (
-          <>
-            <Input.Validation>{validationMessage}</Input.Validation>{' '}
-          </>
-        )}
+        {validationMessage && <Input.Validation classNames='block'>{validationMessage}</Input.Validation>}
         <Input.Description>{description}</Input.Description>
       </Input.DescriptionAndValidation>
     </Input.Root>
   );
 };
 
-const DefaultStory = (props: BaseProps) => {
-  return (
-    <div className='space-b-4'>
-      <div className={mx(baseSurface, 'p-4 rounded-md')}>
-        <Wrapper {...props} />
-      </div>
-      <div className={mx('bg-cardSurface', 'p-4 rounded-md', surfaceShadow({ elevation: 'positioned' }))}>
-        <Wrapper {...props} />
-      </div>
-      <div className={mx(modalSurface, 'p-4 rounded-md', surfaceShadow({ elevation: 'dialog' }))}>
-        <Wrapper {...props} />
-      </div>
-    </div>
-  );
-};
-
 const meta = {
-  title: 'ui/react-ui-core/Input',
+  title: 'ui/react-ui-core/components/Input',
   component: Input.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayoutVariants()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-type Story = StoryObj<BaseProps & Variant>;
+type Story = StoryObj<StoryProps & Variant>;
 
-export const Default: Story = {
+export const DensityCoarse: Story = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is an input',
     disabled: false,
     description: undefined,
@@ -109,13 +88,14 @@ export const Default: Story = {
     descriptionVisuallyHidden: false,
     validationMessage: '',
     validationValence: undefined,
+    density: 'coarse',
   },
 };
 
 export const DensityFine: Story = {
   args: {
     kind: 'text',
-    label: 'This is an Input with a density value of ‘fine’',
+    label: 'Input value',
     placeholder: 'This is a density:fine input',
     disabled: false,
     description: undefined,
@@ -130,7 +110,7 @@ export const DensityFine: Story = {
 export const Subdued: Story = {
   args: {
     kind: 'text',
-    label: 'Hello',
+    label: 'Input value',
     placeholder: 'This is a subdued input',
     disabled: false,
     description: undefined,
@@ -160,7 +140,7 @@ export const LabelVisuallyHidden: Story = {
   },
 };
 
-export const InputWithDescription: Story = {
+export const WithDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input',
@@ -169,7 +149,7 @@ export const InputWithDescription: Story = {
   },
 };
 
-export const InputWithErrorAndDescription: Story = {
+export const WithErrorAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described invalid input',
@@ -180,7 +160,7 @@ export const InputWithErrorAndDescription: Story = {
   },
 };
 
-export const InputWithValidationAndDescription: Story = {
+export const WithValidationAndDescription: Story = {
   args: {
     kind: 'text',
     label: 'Described input with validation message',
@@ -206,7 +186,8 @@ export const PinInput: Story = {
     label: 'This input is a PIN-style input',
     length: 6,
     description: 'Type in secret you received',
-    placeholder: '••••••',
+    pattern: '\\d*',
+    density: 'coarse',
   },
 };
 
@@ -214,7 +195,7 @@ export const Checkbox: Story = {
   args: {
     kind: 'checkbox',
     label: 'This is a checkbox',
-    description: 'It’s checked, indeterminate, or unchecked',
+    description: 'Checked, indeterminate, or unchecked',
     size: 5,
   },
 };
@@ -223,6 +204,6 @@ export const Switch: Story = {
   args: {
     kind: 'switch',
     label: 'This is a switch',
-    description: "It's either off... or on.",
+    description: 'On or off',
   },
 };