@dxos/react-ui 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -0,0 +1,76 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type PropsWithChildren } from 'react';
+import { type FallbackProps } from 'react-error-boundary';
+
+import { safeStringify } from '@dxos/util';
+
+import { translationKey } from '#translations';
+
+import { useTranslation } from '../../primitives';
+import { IconButton } from '../Button';
+import { ErrorStack } from './ErrorStack';
+
+export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'> & { title?: string; data?: any }>;
+
+/**
+ * Themed fallback component for `ErrorBoundary`.
+ */
+export const ErrorFallback = ({ children, error, title, data }: ErrorFallbackProps) => {
+  const { t } = useTranslation(translationKey);
+  const isDev = process.env.NODE_ENV === 'development';
+  const message = error instanceof Error ? error.message : String(error);
+
+  return (
+    <div role='alert' data-testid='error-boundary-fallback' className='flex flex-col p-4 gap-4 overflow-auto'>
+      <h1 className='text-lg text-info-text'>{title ?? 'Runtime Error'}</h1>
+      <p>{message}</p>
+
+      {isDev && error instanceof Error && (
+        <Section
+          title='Stack'
+          onClick={() => {
+            const text = error instanceof Error ? (error.stack ?? error.message) : String(error);
+            void navigator.clipboard.writeText(text);
+          }}
+        >
+          <ErrorStack error={error} />
+        </Section>
+      )}
+
+      {data && (
+        <Section
+          title='Data'
+          onClick={() => {
+            void navigator.clipboard.writeText(JSON.stringify(data, undefined, 2));
+          }}
+        >
+          <pre className='overflow-x-auto text-xs'>{safeStringify(data, undefined, 2)}</pre>
+        </Section>
+      )}
+
+      {children}
+    </div>
+  );
+};
+
+const Section = ({ children, title, onClick }: PropsWithChildren<{ title?: string; onClick?: () => void }>) => {
+  return (
+    <div className='flex flex-col gap-1'>
+      {onClick && (
+        <div>
+          <IconButton
+            classNames='text-xs uppercase'
+            label={title ?? 'Copy'}
+            icon='ph--clipboard-text--regular'
+            size={5}
+            onClick={onClick}
+          />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -0,0 +1,120 @@
+//
+// 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 };
+
+export type ParsedStackFrame = ReturnType<typeof ErrorStackParser.parse>[number];
+
+export type ErrorStackProps = {
+  /** When set, these frames are shown instead of parsing `error`. */
+  frames?: ParsedStackFrame[];
+  /** Used when `frames` is omitted. */
+  error?: Error;
+};
+
+/**
+ * Parses `captureOwnerStack()` output (React dev) into frames for {@link ErrorStack}.
+ * Prefixes a synthetic Error line when needed so `error-stack-parser` can read V8-style stacks.
+ */
+export const parseCaptureOwnerStack = (stack: string | null): ParsedStackFrame[] | null => {
+  if (stack == null || stack.length === 0) {
+    return null;
+  }
+  const err = new Error();
+  err.stack = stack;
+  try {
+    return ErrorStackParser.parse(err);
+  } catch {
+    err.stack = `Error\n${stack}`;
+    try {
+      return ErrorStackParser.parse(err);
+    } catch {
+      return null;
+    }
+  }
+};
+
+/**
+ * Renders a parsed error stack trace with tree connector symbols and clickable vscode:// links for local frames.
+ */
+export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
+  const frames = framesProp ?? (error ? ErrorStackParser.parse(error) : []);
+  if (frames.length === 0) {
+    return null;
+  }
+
+  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 functionName = 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'>
+                {functionName}
+              </a>
+            ) : (
+              <span className='text-subdued truncate self-center'>{functionName}</span>
+            )}
+            <span className='text-xs text-subdued truncate self-center truncate'>{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 FILE_PREFIX = '/@fs';
+    const localPath = pathname.slice(FILE_PREFIX.length); // /@fs/Users/... → /Users/...
+    const PKG_PREFIX = '/packages/';
+    const i = localPath.indexOf(PKG_PREFIX);
+    const path = i === -1 ? localPath : localPath.substring(i + PKG_PREFIX.length);
+    return {
+      href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
+      fileName: path,
+    };
+  } 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/Focus/AUDIT.md

@@ -0,0 +1,43 @@
+# Focus
+
+## Problem
+
+Grid cells use `overflow-hidden` which clips outward CSS `ring` (box-shadow) and `outline` styles.
+Using `border` for focus indicators creates doubled lines at grid cell boundaries.
+Inset `box-shadow` alone is obscured by child elements with backgrounds (e.g., toolbar headers).
+
+## Solution
+
+Uses a `::after` pseudo-element overlay with `ring-inset` to paint the focus ring above all child content.
+The pseudo-element is absolutely positioned, `pointer-events-none`, and inherits `border-radius`.
+
+- **Default**: ring is transparent (invisible until focused).
+- **`border` prop**: shows a CSS `border-separator` when unfocused (e.g., for grid cell edges).
+- **Focus/active/error states**: ring color changes to the appropriate indicator color.
+
+Both `Focus.Group` and `Focus.Item` support the `border` prop.
+
+## Why `::after` overlay
+
+| Approach                 | Clipped? | Obscured by children? | Notes                                                                 |
+| ------------------------ | -------- | --------------------- | --------------------------------------------------------------------- |
+| `ring` (outward)         | Yes      | N/A                   | Extends outside bounds, clipped by parent `overflow-hidden`.          |
+| `ring-inset`             | No       | Yes                   | Inset box-shadow is part of background layer; children paint over it. |
+| `::after` + `ring-inset` | No       | No                    | Pseudo-element paints above children. Requires `position: relative`.  |
+
+## Relationship to `dx-focus-ring-inset-over-all`
+
+The CSS class `dx-focus-ring-inset-over-all` (in `focus-ring.css`) uses the same `::after` technique
+but only reacts to `:focus-visible`. `Focus.Group/Item` additionally support programmatic states
+via `data-focus-state` (`active`, `error`).
+
+## Clean-up
+
+- [ ] Unify: extend `dx-focus-ring-inset-over-all` to support `data-focus-state` attributes,
+      then have `Focus.Group/Item` use the CSS class instead of inline Tailwind utilities.
+      Consumers: Plank, StackItem, Tabs, AttentionProvider, main sidebar.
+
+## Audit
+
+- [ ] Create a list of all container components (outside of `react-ui`) that directly use `overflow-hidden`;
+      Consider containers to be components that have `children` and expand (e.g., `grid`, `grow`, `h-full`, `w-full`).

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.theme.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type FocusStyleProps = {
+  border?: boolean;
+};
+
+/**
+ * Focus ring styles shared by Focus.Group and Focus.Item.
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
+ * (inset box-shadow alone is obscured by children with backgrounds).
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
+ */
+const ring: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
+  mx(
+    'dx-ring-pseudo outline-hidden',
+    'focus:after:ring-focus-ring-subtle',
+    'data-[focus-state=active]:after:ring-focus-ring-subtle',
+    'data-[focus-state=error]:after:ring-rose-500',
+    border && 'border border-separator',
+    ...etc,
+  );
+
+export const focusTheme: Theme<FocusStyleProps> = {
+  group: ring,
+  item: ring,
+};