@dxos/react-ui-mosaic 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

package/src/components/Image/Image.tsx

@@ -1,223 +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/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 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/Layout/Layout.stories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { Input, Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-
-import { Scrollable } from '../Scrollable';
-
-import { Layout } from './Layout';
-
-const DefaultStory = ({ count }: { count: number }) => {
-  return (
-    <Layout.Main toolbar statusbar>
-      <Toolbar.Root classNames='gap-2'>
-        <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
-        <Input.Root>
-          <Input.TextInput placeholder='Search' />
-        </Input.Root>
-        <Toolbar.IconButton icon='ph--dots-three-vertical--regular' iconOnly label='Menu' />
-      </Toolbar.Root>
-      <Scrollable axis='vertical'>
-        <Layout.Flex role='list' column classNames='pli-2 plb-1 gap-1'>
-          {Array.from({ length: count }).map((_, index) => (
-            <div key={index} role='listitem' className='pli-2 plb-1 border border-separator'>
-              {index}
-            </div>
-          ))}
-        </Layout.Flex>
-      </Scrollable>
-      <Toolbar.Root classNames='justify-between'>
-        <Toolbar.IconButton variant='ghost' icon='ph--house--regular' iconOnly label='Add' size={4} />
-        <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' size={4} />
-      </Toolbar.Root>
-    </Layout.Main>
-  );
-};
-
-const meta: Meta<typeof DefaultStory> = {
-  title: 'ui/react-ui-mosaic/Layout',
-  component: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    count: 100,
-  },
-};

package/src/components/Layout/Layout.tsx

@@ -1,108 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import React, { type HTMLAttributes, type PropsWithChildren, forwardRef, useMemo } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-//
-// Main
-//
-
-type MainProps = ThemedClassName<
-  PropsWithChildren<{
-    role?: string;
-    toolbar?: boolean;
-    statusbar?: boolean;
-  }>
->;
-
-// TODO(burdon): Borders.
-const Main = forwardRef<HTMLDivElement, MainProps>(
-  ({ classNames, children, role, toolbar, statusbar }, forwardedRef) => {
-    const style = useMemo(
-      () => ({
-        gridTemplateRows: [toolbar && 'var(--toolbar-size)', '1fr', statusbar && 'var(--statusbar-size)']
-          .filter(Boolean)
-          .join(' '),
-      }),
-      [toolbar, statusbar],
-    );
-
-    return (
-      <div
-        ref={forwardedRef}
-        role={role ?? 'none'}
-        style={style}
-        className={mx(
-          'bs-full is-full grid grid-cols-[100%] overflow-hidden',
-          toolbar && '[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
-          classNames,
-        )}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-//
-// Container
-//
-
-type ContainerProps = ThemedClassName<
-  PropsWithChildren<{
-    role?: string;
-    scrollable?: boolean;
-  }>
->;
-
-const Container = forwardRef<HTMLDivElement, ContainerProps>(
-  ({ classNames, children, role, scrollable }, forwardedRef) => {
-    return (
-      <div
-        ref={forwardedRef}
-        role={role ?? 'none'}
-        className={mx('grid bs-full', scrollable ? 'overflow-y-auto' : 'overflow-hidden', classNames)}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-//
-// Flex
-//
-
-type FlexProps = ThemedClassName<
-  HTMLAttributes<HTMLDivElement> & {
-    column?: boolean;
-    grow?: boolean;
-  }
->;
-
-const Flex = ({ children, classNames, role, column, grow }: FlexProps) => {
-  return (
-    <div
-      role={role ?? 'none'}
-      className={mx('flex', column && 'flex-col', grow && 'flex-1 overflow-hidden', classNames)}
-    >
-      {children}
-    </div>
-  );
-};
-
-//
-// Layout
-//
-
-export const Layout = {
-  Main,
-  Container,
-  Flex,
-};
-
-export type { MainProps as LayoutMainProps, ContainerProps as LayoutContainerProps, FlexProps as LayoutFlexProps };

package/src/components/Mosaic/Mosaic.stories.tsx

@@ -1,113 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { type Database, Filter, Obj, Ref } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { useQuery } from '@dxos/react-client/echo';
-import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { mx } from '@dxos/ui-theme';
-
-import { Board, TestColumn, TestItem } from '../../testing';
-import { Focus } from '../Focus';
-
-import { Mosaic } from './Mosaic';
-
-faker.seed(999);
-
-const createTestData = (db: Database.Database, columnCount: number) => {
-  Array.from({ length: columnCount }).forEach((_, i) => {
-    db.add(
-      Obj.make(TestColumn, {
-        items: Array.from({ length: faker.number.int({ min: 0, max: 20 }) }).map((_, j) => {
-          const item = db.add(
-            Obj.make(TestItem, {
-              name: faker.lorem.sentence(3),
-              description: faker.lorem.paragraph(1),
-              label: `${String.fromCharCode(65 + i)}-${j}`,
-            }),
-          );
-
-          return Ref.make(item);
-        }),
-      }),
-    );
-  });
-};
-
-type StoryProps = {
-  columns?: number;
-  debug?: boolean;
-};
-
-const DefaultStory = ({ debug = false }: StoryProps) => {
-  const { space } = useClientStory();
-  const columns = useQuery(space?.db, Filter.type(TestColumn));
-
-  if (columns.length === 0) {
-    return <></>;
-  }
-
-  return (
-    <Mosaic.Root asChild debug={debug}>
-      <div className={mx('grid overflow-hidden', debug && 'grid-cols-[1fr_20rem] gap-2')}>
-        <Board.Root id='board' columns={columns} debug={debug} />
-        {debug && (
-          <Focus.Group classNames='flex flex-col gap-2 overflow-hidden'>
-            <Board.Debug classNames='p-2' />
-          </Focus.Group>
-        )}
-      </div>
-    </Mosaic.Root>
-  );
-};
-
-const meta = {
-  title: 'ui/react-ui-mosaic/Mosaic',
-  render: DefaultStory,
-  decorators: [
-    withTheme,
-    withLayout({ layout: 'fullscreen' }),
-    withClientProvider({
-      types: [TestColumn, TestItem],
-      createIdentity: true,
-      createSpace: true,
-      onCreateSpace: ({ space }, context) => {
-        const columnCount = (context.args as StoryProps).columns ?? 4;
-        createTestData(space.db, columnCount);
-      },
-    }),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    columns: {
-      control: 'number',
-    },
-    debug: {
-      control: 'boolean',
-    },
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    columns: 5,
-  },
-};
-
-export const Debug: Story = {
-  args: {
-    debug: true,
-    columns: 2,
-  },
-};

package/src/components/Scrollable/Scrollable.stories.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
-
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { mx } from '@dxos/ui-theme';
-
-import { Scrollable, type ScrollableProps } from './Scrollable';
-
-const DefaultStory = (props: ScrollableProps) => {
-  return (
-    <Scrollable {...props} classNames='bs-full is-full'>
-      <div role='none' className={mx('bg-cubes', props.axis === 'vertical' ? 'bs-[200rem]' : 'bs-full is-[200rem]')} />
-    </Scrollable>
-  );
-};
-
-const meta: Meta<typeof Scrollable> = {
-  title: 'ui/react-ui-mosaic/Scrollable',
-  component: Scrollable,
-  render: (args) => <DefaultStory {...args} />,
-  decorators: [withTheme, withLayout({ layout: 'fullscreen' })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Vertical: Story = {
-  args: {
-    axis: 'vertical',
-  },
-};
-
-export const Horizontal: Story = {
-  args: {
-    axis: 'horizontal',
-  },
-};
-
-export const VerticalPadding: Story = {
-  args: {
-    axis: 'vertical',
-    padding: true,
-  },
-};
-
-export const HorizontalPadding: Story = {
-  args: {
-    axis: 'horizontal',
-    padding: true,
-  },
-};

package/src/components/Scrollable/Scrollable.tsx

@@ -1,88 +0,0 @@
-//
-// Copyright 2026 DXOS.org
-//
-
-import { type EventListeners } from 'overlayscrollbars';
-import {
-  OverlayScrollbarsComponent,
-  type OverlayScrollbarsComponentProps,
-  type OverlayScrollbarsComponentRef,
-} from 'overlayscrollbars-react';
-import React, { type RefCallback, forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-
-import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/ui-theme';
-
-import { type Axis } from '../Mosaic';
-
-import 'overlayscrollbars/styles/overlayscrollbars.css';
-import './scrollable.css';
-
-const defaultOptions: ScrollableProps['options'] = {
-  scrollbars: {
-    autoHide: 'leave',
-    autoHideDelay: 1_000,
-    autoHideSuspend: true,
-  },
-};
-
-export type ScrollableProps = ThemedClassName<Omit<OverlayScrollbarsComponentProps, 'ref'>> & {
-  axis?: Axis;
-  padding?: boolean;
-  onScroll?: (event: Event) => void;
-  viewportRef?: RefCallback<HTMLElement | null>;
-};
-
-/**
- * https://www.npmjs.com/package/overlayscrollbars-react
- */
-export const Scrollable = forwardRef<HTMLDivElement, ScrollableProps>(
-  (
-    { classNames, axis = 'vertical', padding, options: optionsProp = defaultOptions, onScroll, viewportRef, ...props },
-    forwardedRef,
-  ) => {
-    const osRef = useRef<OverlayScrollbarsComponentRef>(null);
-    const options = useMemo(() => {
-      const options = { ...optionsProp };
-      if (axis) {
-        options.overflow = {
-          x: axis === 'horizontal' ? 'scroll' : 'hidden',
-          y: axis === 'vertical' ? 'scroll' : 'hidden',
-        };
-      }
-
-      return options;
-    }, [axis, optionsProp]);
-
-    useImperativeHandle(forwardedRef, () => osRef.current?.getElement() as HTMLDivElement, [osRef]);
-
-    useEffect(() => {
-      const instance = osRef.current?.osInstance();
-      if (viewportRef) {
-        viewportRef(instance?.elements().viewport ?? null);
-      }
-    }, [osRef, viewportRef]);
-
-    const events = useMemo<EventListeners | null>(() => {
-      if (!onScroll) {
-        return null;
-      }
-
-      return {
-        scroll: (_, event: Event) => {
-          onScroll(event);
-        },
-      } satisfies EventListeners;
-    }, [onScroll]);
-
-    return (
-      <OverlayScrollbarsComponent
-        {...props}
-        className={mx(padding && (axis === 'vertical' ? 'pli-3' : 'pbe-3'), classNames)}
-        options={options}
-        events={events}
-        ref={osRef}
-      />
-    );
-  },
-);

package/src/components/Scrollable/index.ts

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

package/src/components/Scrollable/scrollable.css

@@ -1,20 +0,0 @@
-/**
- * Override OverlayScrollbars theme variables.
- * This file should be imported after 'overlayscrollbars/styles/overlayscrollbars.css'
- * to ensure proper CSS cascade order.
- * 
- * https://www.npmjs.com/package/overlayscrollbars
- * https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/src/styles/scrollbars.scss
- */
-/** TODO(burdon): Tailwind. */
-.os-theme-dark {
-  --os-size: 6px;
-  --os-padding-perpendicular: 0px;
-  --os-padding-axis: 0px;
-  --os-track-border-radius: 0px;
-  --os-handle-interactive-area-offset: 0px;
-  --os-handle-border-radius: 0px;
-  --os-handle-bg: rgba(128, 128, 128, 0.4);
-  --os-handle-bg-hover: rgba(128, 128, 128, 0.5);
-  --os-handle-bg-active: rgba(128, 128, 128, 0.7);
-}