@dxos/app-framework 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/react/Surface.stories.tsx

@@ -3,94 +3,134 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { Button, List, ListItem } from '@dxos/react-ui';
+import { List, ListItem, Toolbar } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
+import { type ColorStyles, getHashStyles, mx } from '@dxos/ui-theme';
 
-import { Capabilities, createSurface } from '../common';
-import { type PluginManager } from '../core';
-import { setupPluginManager } from '../testing';
+import * as Common from '../common';
+import { withPluginManager } from '../testing';
 
-import { PluginManagerProvider, usePluginManager } from './PluginManagerProvider';
+import { usePluginManager } from './PluginManagerProvider';
 import { Surface, useSurfaces } from './Surface';
 
-const randomColor = (): string => {
-  const hue = faker.number.int({ min: 0, max: 360 });
-  const saturation = faker.number.int({ min: 50, max: 90 });
-  const lightness = faker.number.int({ min: 40, max: 70 });
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+type TestComponentProps = {
+  id: string;
+  styles: ColorStyles;
 };
 
-const Component = () => {
+const TestComponent = forwardRef<HTMLDivElement, TestComponentProps>(({ styles, id }, forwardedRef) => {
+  return (
+    <div
+      className={mx('flex justify-center items-center border rounded', styles.surface, styles.border)}
+      ref={forwardedRef}
+    >
+      <span className={mx('dx-tag font-mono text-lg', styles.text)}>{id}</span>
+    </div>
+  );
+});
+
+const DefaultStory = () => {
   const manager = usePluginManager();
   const surfaces = useSurfaces();
-  const [picked, setPicked] = useState('test');
+  const [selected, setSelected] = useState<string | undefined>();
 
   const handleAdd = useCallback(() => {
-    const id = `test-${faker.number.int({ min: 0, max: 1_000_000 })}`;
-    const backgroundColor = randomColor();
-
-    manager.context.contributeCapability({
+    const id = `test-${faker.number.int({ min: 0, max: 1_000 })}`;
+    const styles = getHashStyles(id);
+    manager.capabilities.contribute({
       module: 'test',
-      interface: Capabilities.ReactSurface,
-      implementation: createSurface({
+      interface: Common.Capability.ReactSurface,
+      implementation: Common.createSurface({
         id,
-        role: id,
-        component: () => (
-          <div className='flex-1' style={{ backgroundColor }}>
-            {id}
-          </div>
-        ),
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === id,
+        component: ({ ref }) => <TestComponent id={id} styles={styles} ref={ref} />,
       }),
     });
 
-    setPicked(id);
+    setSelected(id);
   }, [manager]);
 
-  const handlePick = useCallback(() => {
-    setPicked(faker.helpers.arrayElement(surfaces).id);
+  const handleSelect = useCallback(() => {
+    setSelected(faker.helpers.arrayElement(surfaces)?.id);
   }, [surfaces]);
 
+  const handleError = useCallback(() => {
+    manager.capabilities.contribute({
+      module: 'error',
+      interface: Common.Capability.ReactSurface,
+      implementation: Common.createSurface({
+        id: 'error',
+        role: 'item',
+        filter: (data): data is any => (data as any)?.id === 'error',
+        component: () => {
+          const [count, setCount] = useState(3);
+          useEffect(() => {
+            const interval = setInterval(() => {
+              setCount((count) => {
+                if (count <= 1) {
+                  clearInterval(interval);
+                }
+
+                return count - 1;
+              });
+            }, 1_000);
+            return () => clearInterval(interval);
+          }, []);
+
+          if (count <= 0) {
+            throw new Error('BANG!');
+          }
+
+          return (
+            <div className='flex justify-center items-center border border-roseFill rounded'>
+              <span className='font-mono'>Ticking... {count}</span>
+            </div>
+          );
+        },
+      }),
+    });
+
+    setSelected('error');
+  }, [manager]);
+
+  const ref = useRef<HTMLElement>(null);
+  useEffect(() => {
+    console.log(ref.current);
+  }, [ref]);
+
   return (
-    <div className='flex flex-col gap-2'>
-      <div className='flex gap-2'>
-        <Button onClick={handleAdd}>Add</Button>
-        <Button onClick={handlePick}>Pick</Button>
-      </div>
-      <div className='flex gap-2'>
-        <div className='flex-1'>
-          <List itemSizes='one'>
+    <div className='flex flex-col bs-full overflow-hidden'>
+      <Toolbar.Root>
+        <Toolbar.Button onClick={handleAdd}>Add</Toolbar.Button>
+        <Toolbar.Button onClick={handleSelect}>Pick</Toolbar.Button>
+        <Toolbar.Button onClick={handleError}>Error</Toolbar.Button>
+      </Toolbar.Root>
+      <div className='grid grid-cols-2 bs-full gap-4 overflow-hidden'>
+        <Surface role='item' data={selected ? { id: selected } : undefined} limit={1} ref={ref} />
+        <div className='overflow-y-auto bs-full'>
+          <List>
             {surfaces.map((surface) => (
               <ListItem.Root key={surface.id} id={surface.id}>
-                <ListItem.Heading classNames='grow pbs-2'>{surface.id}</ListItem.Heading>
+                <ListItem.Heading classNames='flex items-center'>{surface.id}</ListItem.Heading>
               </ListItem.Root>
             ))}
           </List>
         </div>
-        <div className='flex-1'>
-          <Surface role={picked} limit={1} />
-        </div>
       </div>
     </div>
   );
 };
 
-const DefaultStory = (props: { manager: PluginManager }) => {
-  return (
-    <PluginManagerProvider value={props.manager}>
-      <Component />
-    </PluginManagerProvider>
-  );
-};
-
 const meta = {
   title: 'sdk/app-framework/Surface',
   render: DefaultStory,
-  decorators: [withTheme],
-  args: {
-    manager: setupPluginManager(),
+  decorators: [withTheme, withPluginManager({ capabilities: [] })],
+  parameters: {
+    layout: 'fullscreen',
   },
 } satisfies Meta<typeof DefaultStory>;
 

package/src/react/Surface.tsx

@@ -3,35 +3,220 @@
 //
 
 import React, {
+  type Context,
   Fragment,
   type NamedExoticComponent,
   type RefAttributes,
   Suspense,
+  createContext,
   forwardRef,
   memo,
+  useContext,
+  useEffect,
   useMemo,
+  useRef,
 } from 'react';
 
+import { raise } from '@dxos/debug';
+import { log } from '@dxos/log';
 import { useDefaultValue } from '@dxos/react-hooks';
 import { byPosition } from '@dxos/util';
 
-import { Capabilities, type SurfaceDefinition, type SurfaceProps } from '../common';
-import { type PluginContext } from '../core';
+import * as Common from '../common';
+import { type CapabilityManager } from '../core';
 
 import { ErrorBoundary } from './ErrorBoundary';
+import { SurfaceInfo } from './SurfaceInfo';
 import { useCapabilities } from './useCapabilities';
 
 const DEFAULT_PLACEHOLDER = <Fragment />;
 
+const DEBUG = import.meta.env.VITE_DEBUG;
+
+export type SurfaceContext = Pick<Common.SurfaceProps, 'id' | 'role' | 'data'>;
+
+// TODO(burdon): Use @radix-ui/react-context
+const SurfaceContext: Context<SurfaceContext | undefined> = createContext<SurfaceContext | undefined>(undefined);
+
 /**
- * @internal
+ * Wrapper component for rendering Web Component surfaces.
+ * Handles creation, prop setting, and cleanup of Web Components.
  */
-export const useSurfaces = () => {
-  const surfaces = useCapabilities(Capabilities.ReactSurface);
-  return useMemo(() => surfaces.flat(), [surfaces]);
+const WebComponentWrapper = memo(
+  forwardRef<HTMLElement, Common.SurfaceProps & { definition: Common.WebComponentSurfaceDefinition }>(
+    ({ id, role, data, limit, definition, ...rest }, forwardedRef) => {
+      const containerRef = useRef<HTMLDivElement>(null);
+      const elementRef = useRef<HTMLElement | null>(null);
+      const propsRef = useRef({ id, role, data, limit, ...rest });
+
+      // Update props ref on every render
+      propsRef.current = { id, role, data, limit, ...rest };
+
+      // Create element only once
+      useEffect(() => {
+        if (!containerRef.current || elementRef.current) return;
+
+        // Create the Web Component
+        const element = document.createElement(definition.tagName);
+        elementRef.current = element;
+
+        // Set initial properties on the Web Component
+        Object.assign(element, propsRef.current);
+
+        // Append to container
+        containerRef.current.appendChild(element);
+
+        // Setup ref forwarding if provided
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(element);
+        } else if (forwardedRef) {
+          forwardedRef.current = element;
+        }
+
+        // Cleanup on unmount to prevent memory leaks
+        return () => {
+          if (elementRef.current && containerRef.current?.contains(elementRef.current)) {
+            containerRef.current.removeChild(elementRef.current);
+          }
+          if (typeof forwardedRef === 'function') {
+            forwardedRef(null);
+          } else if (forwardedRef) {
+            forwardedRef.current = null;
+          }
+          elementRef.current = null;
+        };
+      }, [definition.tagName, forwardedRef]);
+
+      // Update props on existing element without recreating it
+      // This runs on every render to ensure all props (including those in `rest`) are kept up to date
+      useEffect(() => {
+        const element = elementRef.current;
+        if (!element) return;
+
+        // Update properties on the existing Web Component
+        Object.assign(element, propsRef.current);
+      });
+
+      return <div ref={containerRef} />;
+    },
+  ),
+);
+
+WebComponentWrapper.displayName = 'WebComponentWrapper';
+
+/**
+ * Wrapper component that provides context for a surface.
+ */
+const SurfaceContextProvider = memo(
+  forwardRef<HTMLElement, Common.SurfaceProps & { definition: Common.SurfaceDefinition }>(
+    ({ id, role, data, limit, fallback = DefaultFallback, definition, ...rest }, forwardedRef) => {
+      const contextValue = useMemo(() => ({ id, role, data }), [id, role, data]);
+
+      // Handle Web Component surfaces
+      if (definition.kind === 'web-component') {
+        return (
+          <ErrorBoundary data={data} fallback={fallback}>
+            <SurfaceContext.Provider value={contextValue}>
+              <WebComponentWrapper
+                id={id}
+                role={role}
+                data={data}
+                limit={limit}
+                definition={definition}
+                ref={forwardedRef}
+                {...rest}
+              />
+            </SurfaceContext.Provider>
+          </ErrorBoundary>
+        );
+      }
+
+      // Handle React component surfaces
+      const Component = definition.component;
+
+      // TODO(burdon): Remove from production build?
+      const debug = DEBUG || '__DX_DEBUG__' in window;
+      if (debug) {
+        return (
+          <ErrorBoundary data={data} fallback={fallback}>
+            <div role='none' className='contents' data-id={id} data-role={role}>
+              <SurfaceContext.Provider value={contextValue}>
+                <SurfaceInfo ref={forwardedRef}>
+                  <Component id={id} role={role} data={data} limit={limit} {...rest} />
+                </SurfaceInfo>
+              </SurfaceContext.Provider>
+            </div>
+          </ErrorBoundary>
+        );
+      }
+
+      return (
+        <ErrorBoundary data={data} fallback={fallback}>
+          <div role='none' className='contents' data-id={id} data-role={role}>
+            <SurfaceContext.Provider value={contextValue}>
+              <Component id={id} role={role} data={data} limit={limit} {...rest} ref={forwardedRef} />
+            </SurfaceContext.Provider>
+          </div>
+        </ErrorBoundary>
+      );
+    },
+  ),
+);
+
+SurfaceContextProvider.displayName = 'SurfaceContextProvider';
+
+export const useSurface = (): SurfaceContext => {
+  const context = useContext(SurfaceContext) ?? raise(new Error('Missing SurfaceContext'));
+  return context;
 };
 
-const findCandidates = (surfaces: SurfaceDefinition[], { role, data }: Pick<SurfaceProps, 'role' | 'data'>) => {
+/**
+ * A surface is a named region of the screen that can be populated by plugins.
+ */
+export const Surface: NamedExoticComponent<Common.SurfaceProps & RefAttributes<HTMLElement>> = memo(
+  forwardRef(({ id: _id, role, data: dataProp, limit, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
+    const data = useDefaultValue(dataProp, () => ({}));
+
+    // TODO(wittjosiah): This will make all surfaces depend on a single signal.
+    //   This isn't ideal because it means that any change to the data will cause all surfaces to re-render.
+    //   This effectively means that plugin modules which contribute surfaces need to all be activated at startup.
+    //   This should be fine for now because it's how it worked prior to capabilities api anyway.
+    //   In the future, it would be nice to be able to bucket the surface contributions by role.
+    const surfaces = useSurfaces();
+
+    // NOTE: Memoizing the candidates makes the surface not re-render based on reactivity within data.
+    const definitions = findCandidates(surfaces, { role, data });
+    const candidates = limit ? definitions.slice(0, limit) : definitions;
+    if (DEBUG && candidates.length === 0) {
+      log.warn('no candidates for surface', { role, data });
+      return null;
+    }
+
+    return (
+      <Suspense fallback={placeholder}>
+        {candidates.map((definition) => (
+          <SurfaceContextProvider
+            key={definition.id}
+            id={definition.id}
+            role={role}
+            data={data}
+            limit={limit}
+            definition={definition}
+            ref={forwardedRef}
+            {...rest}
+          />
+        ))}
+      </Suspense>
+    );
+  }),
+);
+
+Surface.displayName = 'Surface';
+
+const findCandidates = (
+  surfaces: Common.SurfaceDefinition[],
+  { role, data }: Pick<Common.SurfaceProps, 'role' | 'data'>,
+) => {
   return Object.values(surfaces)
     .filter((definition) =>
       Array.isArray(definition.role) ? definition.role.includes(role) : definition.role === role,
@@ -40,47 +225,43 @@ const findCandidates = (surfaces: SurfaceDefinition[], { role, data }: Pick<Surf
     .toSorted(byPosition);
 };
 
+// TODO(burdon): Make user facing, with telemetry.
+// TODO(burdon): Change based on dev/prod mode; infer subject type, id.
+const DefaultFallback = ({ data, error, dev }: { data: any; error: Error; dev?: boolean }) => {
+  if (dev) {
+    return (
+      <div className='flex flex-col gap-4 p-4 is-full overflow-y-auto'>
+        <h1 className='flex gap-2 text-sm mbs-2'>{error.message}</h1>
+        <pre className='overflow-auto text-xs text-description'>{JSON.stringify(data, null, 2)}</pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col gap-4 p-4 is-full overflow-y-auto border border-roseFill'>
+      <h1 className='flex gap-2 text-sm mbs-2 text-rose-500'>{error.message}</h1>
+      <pre className='overflow-auto text-xs text-description'>{error.stack}</pre>
+      <pre className='overflow-auto text-xs text-description'>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+};
+
 /**
- * @returns `true` if there is a contributed surface which matches the specified role & data, `false` otherwise.
+ * @internal
  */
-export const isSurfaceAvailable = (context: PluginContext, { role, data }: Pick<SurfaceProps, 'role' | 'data'>) => {
-  const surfaces = context.getCapabilities(Capabilities.ReactSurface);
-  const candidates = findCandidates(surfaces.flat(), { role, data });
-  return candidates.length > 0;
+export const useSurfaces = () => {
+  const surfaces = useCapabilities(Common.Capability.ReactSurface);
+  return useMemo(() => surfaces.flat(), [surfaces]);
 };
 
 /**
- * A surface is a named region of the screen that can be populated by plugins.
+ * @returns `true` if there is a contributed surface which matches the specified role & data, `false` otherwise.
  */
-export const Surface: NamedExoticComponent<SurfaceProps & RefAttributes<HTMLElement>> = memo(
-  forwardRef(
-    ({ id: _id, role, data: _data, limit, fallback, placeholder = DEFAULT_PLACEHOLDER, ...rest }, forwardedRef) => {
-      // TODO(wittjosiah): This will make all surfaces depend on a single signal.
-      //   This isn't ideal because it means that any change to the data will cause all surfaces to re-render.
-      //   This effectively means that plugin modules which contribute surfaces need to all be activated at startup.
-      //   This should be fine for now because it's how it worked prior to capabilities api anyways.
-      //   In the future, it would be nice to be able to bucket the surface contributions by role.
-      const surfaces = useSurfaces();
-      const data = useDefaultValue(_data, () => ({}));
-
-      // NOTE: Memoizing the candidates makes the surface not re-render based on reactivity within data.
-      const definitions = findCandidates(surfaces, { role, data });
-      const candidates = limit ? definitions.slice(0, limit) : definitions;
-      const nodes = candidates.map(({ component: Component, id }) => (
-        <Component ref={forwardedRef} key={id} id={id} role={role} data={data} limit={limit} {...rest} />
-      ));
-
-      const suspense = <Suspense fallback={placeholder}>{nodes}</Suspense>;
-
-      return fallback ? (
-        <ErrorBoundary data={data} fallback={fallback}>
-          {suspense}
-        </ErrorBoundary>
-      ) : (
-        suspense
-      );
-    },
-  ),
-);
-
-Surface.displayName = 'Surface';
+export const isSurfaceAvailable = (
+  capabilityManager: CapabilityManager.CapabilityManager,
+  { role, data }: Pick<Common.SurfaceProps, 'role' | 'data'>,
+) => {
+  const surfaces = capabilityManager.getAll(Common.Capability.ReactSurface);
+  const candidates = findCandidates(surfaces.flat(), { role, data });
+  return candidates.length > 0;
+};

package/src/react/SurfaceInfo.tsx

@@ -0,0 +1,107 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, {
+  type ReactElement,
+  type Ref,
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { addEventListener, combine } from '@dxos/async';
+import { useMergeRefs } from '@dxos/react-hooks';
+
+import { useSurface } from './Surface';
+
+export type SurfaceInfoProps = {
+  children: ReactElement<{ ref?: Ref<HTMLElement> }>;
+};
+
+/**
+ * Debug wrapper for surfaces.
+ */
+export const SurfaceInfo = forwardRef<HTMLElement, SurfaceInfoProps>(({ children }, forwardedRef) => {
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const [expand, setExpand] = useState(false);
+  const info = useSurface();
+
+  const [root, setRoot] = useState<HTMLElement | null>(null);
+  const measureRef = useCallback((node: HTMLElement | null) => setRoot(node), []);
+  const mergedRef = useMergeRefs([measureRef, forwardedRef]);
+  const childWithRef = cloneElement(children, { ref: mergedRef });
+
+  useLayoutEffect(() => {
+    if (!root) {
+      setRect(null);
+      return;
+    }
+
+    const measure = () => {
+      setRect(root.getBoundingClientRect());
+    };
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(root);
+    measure();
+
+    return combine(
+      addEventListener(window, 'scroll', measure, true),
+      addEventListener(window, 'resize', measure),
+      () => {
+        observer.disconnect();
+      },
+    );
+  }, [root]);
+
+  const padding = 0;
+  return (
+    <>
+      {childWithRef}
+      {rect &&
+        createPortal(
+          <div
+            role='none'
+            className='z-[100] fixed flex flex-col-reverse scrollbar-none overflow-auto pointer-events-none'
+            style={{
+              top: rect.top + padding,
+              left: rect.left + padding,
+              width: rect.width - padding * 2,
+              height: rect.height - padding * 2,
+            }}
+          >
+            {expand ? (
+              <div
+                className='absolute inset-0 bg-deckSurface border border-green-500 cursor-pointer pointer-events-auto overflow-auto'
+                onPointerDown={(ev) => ev.stopPropagation()}
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  setExpand(false);
+                }}
+              >
+                <pre className='p-2 text-xs text-description font-mono'>{JSON.stringify({ info }, null, 2)}</pre>
+              </div>
+            ) : (
+              <span
+                className='absolute right-1 bottom-0 flex items-center p-1 text-green-500 opacity-80 hover:opacity-100 text-xl cursor-pointer pointer-events-auto'
+                title={info.id}
+                onPointerDown={(ev) => ev.stopPropagation()}
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  setExpand(true);
+                }}
+              >
+                ⓘ
+              </span>
+            )}
+          </div>,
+          // TODO(burdon): Create well-known element to gather all debug portals.
+          document.body,
+        )}
+    </>
+  );
+});

package/src/react/common.ts

@@ -2,12 +2,36 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities } from '../common';
+import { type Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { useCallback, useContext } from 'react';
 
-import { useCapability } from './useCapabilities';
+import * as Common from '../common';
 
-export const useIntentDispatcher = () => useCapability(Capabilities.IntentDispatcher);
+import { useAtomCapability, useCapability } from './useCapabilities';
 
-export const useAppGraph = () => useCapability(Capabilities.AppGraph);
+export const useOperationInvoker = (): Common.Capability.OperationInvoker =>
+  useCapability(Common.Capability.OperationInvoker);
 
-export const useLayout = () => useCapability(Capabilities.Layout);
+export const useAppGraph = (): Common.Capability.AppGraph => useCapability(Common.Capability.AppGraph);
+
+export const useLayout = (): Common.Capability.Layout => useAtomCapability(Common.Capability.Layout);
+
+/**
+ * Hook to read and update a settings atom.
+ * Returns the current value and an update function.
+ */
+export const useSettingsState = <T>(
+  atom: Atom.Writable<T>,
+): { settings: T; updateSettings: (fn: (current: T) => T) => void } => {
+  const registry = useContext(RegistryContext);
+  const settings = useAtomValue(atom);
+
+  const updateSettings = useCallback(
+    (fn: (current: T) => T) => {
+      registry.set(atom, fn(registry.get(atom)));
+    },
+    [registry, atom],
+  );
+
+  return { settings, updateSettings };
+};

package/src/react/index.ts

@@ -3,8 +3,12 @@
 //
 
 export * from './common';
+export * from './types';
+
 export * from './ErrorBoundary';
 export * from './PluginManagerProvider';
 export * from './Surface';
+
+export * from './useApp';
 export * from './useCapabilities';
-export * from './useIntentResolver';
+export * from './useOperationResolver';