@dxos/react-ui 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/components/Focus/Focus.stories.tsx

@@ -0,0 +1,230 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type PropsWithChildren, useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { withLayout, withTheme } from '../../testing';
+import { type ThemedClassName } from '../../util';
+import { Focus } from './Focus';
+
+type Item = { id: string; label: string };
+
+const ITEMS: Item[] = [
+  { id: '1', label: 'Item 1' },
+  { id: '2', label: 'Item 2' },
+  { id: '3', label: 'Item 3' },
+  { id: '4', label: 'Item 4' },
+  { id: '5', label: 'Item 5' },
+];
+
+const itemClassName = 'flex items-center gap-3 px-3 py-2 aria-current:bg-neutral-75 dark:aria-current:bg-neutral-800';
+
+const Container = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => {
+  return (
+    <div className='dx-container grid grid-cols-[1fr_2fr_1fr]'>
+      <div className='border-e border-separator' />
+      <div className='dx-expander grid grid-rows-[1fr_2fr_1fr]'>
+        <div className='border-b border-separator' />
+        <div className={mx('h-full flex flex-col gap-2', classNames)}>{children}</div>
+        <div className='border-t border-separator' />
+      </div>
+      <div className='border-s border-separator' />
+    </div>
+  );
+};
+
+const Text = ({ children }: PropsWithChildren) => {
+  return <p className='p-1 text-sm text-subdued'>{children}</p>;
+};
+
+//
+// Default (vertical list)
+//
+
+const DefaultStory = () => {
+  const [current, setCurrent] = useState<string | undefined>('1');
+
+  return (
+    <Container>
+      <Text>Tab into the group, then use arrow keys to navigate. Press Enter to select.</Text>
+      <Focus.Group classNames='h-full'>
+        {ITEMS.map((item) => (
+          <Focus.Item
+            key={item.id}
+            current={current === item.id}
+            onCurrentChange={() => setCurrent(item.id)}
+            className={itemClassName}
+          >
+            <span className='size-2 bg-primary-500 opacity-0 aria-[current]:opacity-100' />
+            <span>{item.label}</span>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+      <Text>Selected: {current ?? 'none'}</Text>
+    </Container>
+  );
+};
+
+//
+// Horizontal group
+//
+
+const HorizontalStory = () => {
+  const [current, setCurrent] = useState<string | undefined>();
+
+  return (
+    <Container>
+      <Text>Horizontal arrow-key navigation between cards.</Text>
+      <Focus.Group classNames='h-full flex flex-row gap-2 items-center justify-center' orientation='horizontal'>
+        {ITEMS.map((item) => (
+          <Focus.Item
+            key={item.id}
+            current={current === item.id}
+            onCurrentChange={() => setCurrent(item.id)}
+            className='flex flex-col items-center justify-center w-20 h-20 border border-separator aria-current:border-primary-500 aria-current:bg-primary-50 dark:aria-current:bg-primary-900/20 cursor-pointer'
+          >
+            <span className='text-xs mt-1'>{item.label}</span>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+      <Text>Selected: {current ?? 'none'}</Text>
+    </Container>
+  );
+};
+
+//
+// Grid (demonstrates border prop and overflow-hidden clipping)
+//
+
+const GridCell = ({ border, items }: { border?: boolean; items: Item[] }) => {
+  const [current, setCurrent] = useState<string | undefined>();
+  return (
+    <div className='overflow-hidden bg-base-surface'>
+      <Focus.Group classNames='h-full' border={border}>
+        {items.map((item) => (
+          <Focus.Item
+            key={item.id}
+            current={current === item.id}
+            onCurrentChange={() => setCurrent(item.id)}
+            className={itemClassName}
+          >
+            <span>{item.label}</span>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+    </div>
+  );
+};
+
+const GridStory = () => {
+  return (
+    <div className='p-8 space-y-8'>
+      <Text>Tab between groups to compare. Each cell has overflow-hidden.</Text>
+
+      {/* Default vs border. */}
+      <div className='grid grid-cols-2 gap-4'>
+        <div className='space-y-2'>
+          <p className='text-xs font-mono text-subdued'>Default (invisible until focused)</p>
+          <div className='h-48'>
+            <GridCell items={ITEMS} />
+          </div>
+        </div>
+        <div className='space-y-2'>
+          <p className='text-xs font-mono text-subdued'>border (always visible)</p>
+          <div className='h-48'>
+            <GridCell border items={ITEMS} />
+          </div>
+        </div>
+      </div>
+
+      {/* Tight grid — border. */}
+      <p className='text-xs font-mono text-subdued'>Tight grid — border</p>
+      <div className='grid grid-cols-3'>
+        {[0, 1, 2].map((col) => (
+          <div key={col} className='overflow-hidden'>
+            <GridCell border items={ITEMS.slice(0, 3)} />
+          </div>
+        ))}
+      </div>
+
+      {/* Tight grid — default. */}
+      <p className='text-xs font-mono text-subdued'>Tight grid — default</p>
+      <div className='grid grid-cols-3'>
+        {[0, 1, 2].map((col) => (
+          <div key={col} className='overflow-hidden'>
+            <GridCell items={ITEMS.slice(0, 3)} />
+          </div>
+        ))}
+      </div>
+
+      {/* Item-level border. */}
+      <p className='text-xs font-mono text-subdued'>Item-level border</p>
+      <div className='h-48 overflow-hidden'>
+        <Focus.Group classNames='h-full'>
+          {ITEMS.slice(0, 3).map((item) => (
+            <Focus.Item key={item.id} border className={itemClassName}>
+              <span>{item.label}</span>
+            </Focus.Item>
+          ))}
+        </Focus.Group>
+      </div>
+
+      {/* Error state. */}
+      <p className='text-xs font-mono text-subdued'>Error state</p>
+      <div className='h-48 overflow-hidden'>
+        <Focus.Group classNames='h-full' data-focus-state='error'>
+          {ITEMS.slice(0, 3).map((item) => (
+            <Focus.Item key={item.id} className={itemClassName}>
+              <span>{item.label}</span>
+            </Focus.Item>
+          ))}
+        </Focus.Group>
+      </div>
+    </div>
+  );
+};
+
+//
+// asChild (slot) usage
+//
+
+const AsChildStory = () => {
+  const [current, setCurrent] = useState<string | undefined>();
+
+  return (
+    <Container>
+      <Text>Focus.Item rendered as a custom element via asChild.</Text>
+      <Focus.Group classNames='h-full'>
+        {ITEMS.slice(0, 3).map((item) => (
+          <Focus.Item key={item.id} asChild current={current === item.id} onCurrentChange={() => setCurrent(item.id)}>
+            <button className='flex w-full items-center gap-3 px-3 py-2 text-left hover:bg-neutral-75 dark:hover:bg-neutral-800 aria-current:bg-primary-50 dark:aria-current:bg-primary-900/20 aria-current:text-primary-600'>
+              <span>{item.label}</span>
+            </button>
+          </Focus.Item>
+        ))}
+      </Focus.Group>
+    </Container>
+  );
+};
+
+//
+// Meta
+//
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/components/Focus',
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { render: DefaultStory };
+export const Horizontal: Story = { render: HorizontalStory };
+export const Grid: Story = { render: GridStory };
+export const AsChild: Story = { render: AsChildStory };

package/src/components/Focus/Focus.tsx

@@ -0,0 +1,201 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import {
+  useArrowNavigationGroup,
+  useFocusableGroup,
+  useMergedTabsterAttributes_unstable,
+} from '@fluentui/react-tabster';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, {
+  type FocusEvent,
+  type KeyboardEvent,
+  type MouseEvent,
+  createContext,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from 'react';
+
+import { composableProps, slottable } from '@dxos/ui-theme';
+import { type Axis } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+
+//
+// Context
+//
+
+type FocusState = 'active' | 'error';
+
+const FOCUS_STATE_ATTR = 'focus-state';
+
+type ContextValue = {
+  setFocus?: (state: FocusState | undefined) => void;
+  /** True when any item within the group has DOM focus. */
+  groupHasFocus?: boolean;
+};
+
+const FocusContext = createContext<ContextValue>({});
+
+const useFocus = () => useContext(FocusContext);
+
+//
+// Group
+//
+
+type GroupProps = {
+  orientation?: Axis;
+  /** Show a subdued ring when unfocused (e.g., as a cell border). */
+  border?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+};
+
+/**
+ * Provides arrow-key navigation across focusable children via tabster.
+ * Does not manage `aria-current` — use `Focus.Item` on each child for that.
+ */
+// TODO(wittjosiah): Consider how this could integrate with with react-ui-attention.
+//   Perhaps react-ui-attention comes under the mosaic umbrella as it supports selection?
+const Group = slottable<HTMLDivElement, GroupProps>(
+  ({ children, asChild, orientation = 'vertical', border = false, ...props }, forwardedRef) => {
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    const rootRef = useRef<HTMLDivElement>(null);
+    const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited-trap-focus' });
+    const arrowNavigationAttrs = useArrowNavigationGroup({ axis: orientation, memorizeCurrent: true });
+    const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+    const [state, setState] = useState<FocusState | undefined>();
+    const [groupHasFocus, setGroupHasFocus] = useState(false);
+
+    const handleFocusIn = useCallback(() => setGroupHasFocus(true), []);
+    const handleFocusOut = useCallback((event: FocusEvent<HTMLDivElement>) => {
+      const related = event.relatedTarget as HTMLElement | null;
+      if (!related || !rootRef.current?.contains(related)) {
+        setGroupHasFocus(false);
+      }
+    }, []);
+
+    const { className, ...rest } = composableProps(props);
+    return (
+      <FocusContext.Provider value={{ setFocus: setState, groupHasFocus }}>
+        <Comp
+          {...rest}
+          tabIndex={0}
+          className={tx('focus.group', { border }, className)}
+          {...tabsterAttrs}
+          {...(state && {
+            [`data-${FOCUS_STATE_ATTR}`]: state,
+          })}
+          onBlur={handleFocusOut}
+          onFocus={handleFocusIn}
+          ref={useComposedRefs<HTMLDivElement>(rootRef, forwardedRef)}
+        >
+          {children}
+        </Comp>
+      </FocusContext.Provider>
+    );
+  },
+);
+
+//
+// Item
+//
+
+type ItemProps = {
+  current?: boolean;
+  /** Show a subdued ring when unfocused (e.g., as a cell border). */
+  border?: boolean;
+  onCurrentChange?: () => void;
+};
+
+/**
+ * Focusable item within a `Focus.Group`.
+ * Uses `useFocusableGroup` so the parent Group's arrow navigation treats this as a single unit
+ * (internal buttons are not arrow-navigation targets; Enter/Escape to go in/out).
+ * Supports controlled (`current` prop) and uncontrolled (focus-driven) `aria-current`.
+ */
+const Item = slottable<HTMLDivElement, ItemProps>(
+  (
+    { children, asChild, current, border = false, onCurrentChange, onClick, onFocus, onBlur, ...props },
+    forwardedRef,
+  ) => {
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    // Tell tabster's groupper to ignore Enter so it doesn't move focus into the group.
+    const focusableGroupAttrs = useFocusableGroup({ ignoreDefaultKeydown: { Enter: true } });
+    const [focused, setFocused] = useState(false);
+
+    const handleClick = useCallback(
+      (event: MouseEvent<HTMLDivElement>) => {
+        onCurrentChange?.();
+        onClick?.(event);
+      },
+      [onCurrentChange, onClick],
+    );
+
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === 'Enter') {
+          onCurrentChange?.();
+        }
+      },
+      [onCurrentChange],
+    );
+
+    const handleFocus = useCallback(
+      (event: FocusEvent<HTMLDivElement>) => {
+        setFocused(true);
+        onFocus?.(event);
+      },
+      [onFocus],
+    );
+
+    const handleBlur = useCallback(
+      (event: FocusEvent<HTMLDivElement>) => {
+        setFocused(false);
+        onBlur?.(event);
+      },
+      [onBlur],
+    );
+
+    // Controlled `current` prop takes precedence (e.g., virtualized items that scroll back into view).
+    // Otherwise fall back to DOM focus state.
+    const isCurrent = current ?? focused;
+
+    const { className, ...rest } = composableProps(props);
+    return (
+      <Comp
+        {...rest}
+        tabIndex={0}
+        className={tx('focus.item', { border }, className)}
+        {...focusableGroupAttrs}
+        aria-current={isCurrent || undefined}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+//
+// Focus
+//
+
+export const Focus = {
+  Group,
+  Item,
+};
+
+export type { GroupProps as FocusGroupProps, ItemProps as FocusItemProps };
+
+export { useFocus };

package/src/components/Focus/index.ts

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

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

@@ -6,10 +6,9 @@ import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC, type ReactElement, type SVGProps, forwardRef } from 'react';
 
-import { getSize, mx } from '@dxos/ui-theme';
+import { getSize, iconSize, mx } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
-
 import { Icon } from './Icon';
 
 /**
@@ -50,29 +49,60 @@ const createIcon = ({
   return CustomIcon;
 };
 
-const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
-  return (
-    <div className='grid grid-cols-2 gap-8'>
-      <CustomIcon weight={'regular'} className={mx(getSize(16))} />
-      <Icon icon='ph--github-logo--regular' classNames={mx(getSize(16))} />
-    </div>
-  );
-};
-
 const meta = {
   title: 'ui/react-ui-core/components/Icon',
-  render: DefaultStory,
+  component: Icon,
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },
-} satisfies Meta<typeof DefaultStory>;
+} satisfies Meta<typeof Icon>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    icon: 'ph--github-logo--regular',
+  },
+};
+
+export const Static: Story = {
+  args: {
+    icon: 'ph--github-logo--regular',
+    classNames: getSize(8),
+  },
+};
+
+export const Dynamic: Story = {
+  args: {
+    icon: 'ph--github-logo--regular',
+  },
+  render: (args) => {
+    return (
+      <div className='flex gap-4'>
+        <Icon {...args} />
+        <div className='flex gap-4' style={iconSize(8)}>
+          <Icon {...args} />
+          <div className='flex gap-4' style={iconSize(null)}>
+            <Icon {...args} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Custom = {
+  render: ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
+    return (
+      <div className='grid grid-cols-2 gap-8'>
+        <CustomIcon weight={'regular'} className={mx(getSize(16))} />
+        <Icon icon='ph--github-logo--regular' classNames={mx(getSize(16))} />
+      </div>
+    );
+  },
   args: {
     CustomIcon: createIcon({
       name: 'GithubLogo',

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo, useMemo } from 'react';
 
 import { type Size } from '@dxos/ui-types';
 
@@ -13,15 +13,25 @@ import { type ThemedClassName } from '../../util';
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & {
   icon: string;
   size?: Size;
+  synchronized?: boolean;
 };
 
+/**
+ * The Icon's size can be set directly or inherited from the `--dx-icon-size` CSS variable.
+ */
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ classNames, icon, size, synchronized, style, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const spinDelay = useMemo(() => (synchronized ? `${-(Date.now() % 1_000)}ms` : undefined), [synchronized]);
     const href = useIconHref(icon);
 
     return (
-      <svg {...props} className={tx('icon.root', { size }, classNames)} ref={forwardedRef}>
+      <svg
+        {...props}
+        style={{ ...style, animationDelay: spinDelay }}
+        className={tx('icon.root', { size }, classNames)}
+        ref={forwardedRef}
+      >
         <use href={href} />
       </svg>
     );

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

@@ -5,14 +5,14 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { Image } from './Image';
 
 const seed = Math.random();
 
-faker.seed(seed);
+random.seed(seed);
 
 const meta = {
   title: 'ui/react-ui-mosaic/Image',
@@ -34,7 +34,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    src: faker.image.url(),
+    src: random.image.url(),
   },
 };
 

package/src/components/Image/Image.tsx

@@ -13,15 +13,16 @@ export type ImageProps = ThemedClassName<
   {
     src: string;
     alt?: string;
+    fit?: 'contain' | 'cover';
     crossOrigin?: 'anonymous' | 'use-credentials' | '';
   } & ColorOptions
 >;
 
-// TODO(burdon): Option for neutral background color.
 export const Image = ({
   classNames,
   src,
   alt = '',
+  fit = 'contain',
   crossOrigin = 'anonymous',
   sampleSize = 64,
   contrast = 0.9,
@@ -68,7 +69,16 @@ export const Image = ({
 
   return (
     <div
-      className={mx(`relative flex w-full justify-center overflow-hidden transition-all duration-700`, classNames)}
+      // `isolate` (`isolation: isolate`) creates a new stacking context so
+      // the inner <img>'s `z-10` stays scoped to this wrapper. Without it
+      // the z-10 leaks into the parent's stacking context and elevates the
+      // image above any pseudo-element rings (e.g. Focus.Item's
+      // `dx-ring-pseudo` `::after`) painted on ancestors — most visibly,
+      // the focus ring on a Card containing a Card.Poster.
+      className={mx(
+        `relative flex w-full justify-center overflow-hidden transition-all duration-700 isolate`,
+        classNames,
+      )}
       style={{
         backgroundColor: dominantColor,
       }}
@@ -94,7 +104,10 @@ export const Image = ({
         crossOrigin={crossOriginState}
         onError={handleImageError}
         onLoad={handleImageLoad}
-        className='z-10 object-contain transition-opacity duration-500'
+        className={mx(
+          'z-10 transition-opacity duration-500',
+          fit === 'cover' ? 'w-full h-full object-cover' : 'object-contain',
+        )}
         style={{
           opacity: imageLoaded ? 1 : 0,
         }}
@@ -162,7 +175,9 @@ const extractDominantColor = (
       const alpha = pixels[i + 3];
 
       // Skip transparent pixels.
-      if (alpha === 0) continue;
+      if (alpha === 0) {
+        continue;
+      }
 
       // Calculate saturation to weight vibrant colors more.
       const max = Math.max(red, green, blue);
@@ -202,21 +217,29 @@ const isTransparent = (pixels: Uint8ClampedArray, sampleSize: number, threshold:
   for (let x = 0; x < sampleSize; x++) {
     // Top edge.
     const topIndex = x * 4;
-    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[topIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Bottom edge.
     const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
-    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+    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++;
+    if (pixels[leftIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
 
     // Right edge.
     const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
-    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+    if (pixels[rightIndex + 3] === 0) {
+      edgeTransparentPixels++;
+    }
   }
 
   return edgeTransparentPixels / edgePixels > threshold;