@dxos/react-ui-attention 0.8.4-main.c1de068 → 0.8.4-main.c85a9c8dae

package/src/components/AttentionProvider.tsx

@@ -2,22 +2,32 @@
 // Copyright 2024 DXOS.org
 //
 
-// NOTE(thure): The following unused imports quell TS2742 (“likely not portable”).
-
-// eslint-disable-next-line unused-imports/no-unused-imports
-import { createContext, type Scope, type CreateScope } from '@radix-ui/react-context';
+import { RegistryContext } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { useMemo, type FocusEvent, type PropsWithChildren, type ComponentPropsWithRef, forwardRef } from 'react';
-
-import { useDefaultValue, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-import { ATTENDABLE_PATH_SEPARATOR, type Attention, AttentionManager, getAttendables } from '../attention';
+import React, {
+  type ComponentPropsWithRef,
+  type FocusEvent,
+  type PropsWithChildren,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+
+import { log } from '@dxos/log';
+import { useDefaultValue } from '@dxos/react-hooks';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { AttentionManager, getAttendables } from '../attention';
+import { ATTENDABLE_PATH_SEPARATOR, type Attention } from '../types';
 
 const ATTENTION_NAME = 'Attention';
-const ATTENABLE_ATTRIBUTE = 'data-attendable-id';
-const ATTENTION_SOURCE_ATTRIBUTE = 'data-is-attention-source';
+const ATTENDABLE_ATTRIBUTE = 'data-attendable-id';
+const ATTENTION_SOURCE_ATTRIBUTE = 'data-w-attention-source';
 
 type AttentionContextValue = {
   attention: AttentionManager;
@@ -25,35 +35,70 @@ type AttentionContextValue = {
 };
 
 const [AttentionContextProvider, useAttentionContext] = createContext<AttentionContextValue>(ATTENTION_NAME, {
-  attention: new AttentionManager(),
+  attention: undefined as unknown as AttentionManager,
   path: [],
 });
 
-const UNKNOWN_ATTENDABLE = { hasAttention: false, isAncestor: false, isRelated: false };
+const UNKNOWN_ATTENDABLE = { hasAttention: false, isAncestor: false, isRelated: false } as Attention;
 
 const useAttention = (attendableId?: string): Attention => {
   const { attention, path } = useAttentionContext(ATTENTION_NAME);
-  if (!attendableId) {
-    return UNKNOWN_ATTENDABLE;
-  }
+  const [state, setState] = useState<Attention>(UNKNOWN_ATTENDABLE);
+
+  const key = useMemo(() => {
+    if (!attendableId) {
+      return undefined;
+    }
+    return [...attendableId.split(ATTENDABLE_PATH_SEPARATOR), ...path];
+  }, [attendableId, path]);
 
-  const current = [...attendableId.split(ATTENDABLE_PATH_SEPARATOR), ...path];
-  return attention.get(current);
+  useEffect(() => {
+    if (!key || !attention) {
+      setState(UNKNOWN_ATTENDABLE);
+      return;
+    }
+
+    // Set initial state.
+    setState(attention.get(key));
+
+    // Subscribe to changes.
+    return attention.subscribe(key, (newState) => {
+      setState(newState);
+    });
+  }, [attention, key]);
+
+  return state;
 };
 
 const useAttended = () => {
   const { attention } = useAttentionContext(ATTENTION_NAME);
-  return attention.current;
+  const [current, setCurrent] = useState<readonly string[]>([]);
+
+  useEffect(() => {
+    if (!attention) {
+      return;
+    }
+
+    // Set initial state.
+    setCurrent(attention.getCurrent());
+
+    // Subscribe to changes.
+    return attention.subscribeCurrent((newCurrent) => {
+      setCurrent(newCurrent);
+    });
+  }, [attention]);
+
+  return current;
 };
 
 /**
- * Computes HTML element attributes to apply so the attention system can detect changes
+ * Computes HTML element attributes to apply so the attention system can detect changes.
  * @param attendableId
  */
 const useAttentionAttributes = (attendableId?: string) => {
   const { hasAttention } = useAttention(attendableId);
   return useMemo(() => {
-    const attributes: Record<string, string | undefined> = { [ATTENABLE_ATTRIBUTE]: attendableId };
+    const attributes: Record<string, string | undefined> = { [ATTENDABLE_ATTRIBUTE]: attendableId };
     if (hasAttention) {
       attributes[ATTENTION_SOURCE_ATTRIBUTE] = 'true';
     }
@@ -77,15 +122,20 @@ const RootAttentionProvider = ({
     onChange: (nextAttended: string[]) => void;
   }>
 >) => {
-  const attention = useDefaultValue(propsAttention, () => new AttentionManager());
+  const registry = useContext(RegistryContext);
+  const attention = useDefaultValue(propsAttention, () => new AttentionManager(registry));
+
   const handleFocus = (event: FocusEvent) => {
+    // NOTE(thure): Use the following to debug focus movement across the app:
+    log('focus', { related: event.relatedTarget, target: event.target });
+
     const selector = [
       '[data-attendable-id]',
       ...Array.from(document.querySelectorAll('[aria-controls]')).map(
         (el) => `[id="${el.getAttribute('aria-controls')}"]`,
       ),
     ].join(',');
-    const prev = attention.current;
+    const prev = attention.getCurrent();
     const next = getAttendables(selector, event.target);
     // TODO(wittjosiah): Not allowing empty state means that the attended item is not strictly guaranteed to be in the DOM.
     //   Currently this depends on the deck in order to ensure that when the attended item is removed something else is attended.
@@ -96,49 +146,9 @@ const RootAttentionProvider = ({
     }
   };
 
-  // NOTE(thure): Use the following to debug the macOS package issue #8540
-
-  // const [startEl, setStartEl] = useState<HTMLElement | null>(null);
-  // const [endEl, setEndEl] = useState<HTMLElement | null>(null);
-  //
-  // const handleEventDebug = useCallback((event: any) => {
-  //   console.log(`[${event.type}]`, event.target, event.currentTarget, [event.clientX, event.clientY]);
-  // }, []);
-  //
-  // const handleStartDebug = useCallback(
-  //   (event: any) => {
-  //     setStartEl(event.target);
-  //     handleEventDebug(event);
-  //   },
-  //   [handleEventDebug],
-  // );
-  //
-  // const handleEndDebug = useCallback(
-  //   (event: any) => {
-  //     setEndEl(event.target);
-  //     handleEventDebug(event);
-  //   },
-  //   [handleEventDebug],
-  // );
-  //
-  // const handleClickDebug = useCallback(
-  //   (event: any) => {
-  //     console.log('[click compare]', startEl, endEl, startEl === endEl);
-  //     handleEventDebug(event);
-  //   },
-  //   [startEl, endEl, handleEventDebug],
-  // );
-
   return (
     <AttentionContextProvider attention={attention} path={[]}>
-      <div
-        role='none'
-        className='contents'
-        onFocusCapture={handleFocus}
-        // onClick={handleClickDebug}
-        // onMouseDown={handleStartDebug}
-        // onMouseUp={handleEndDebug}
-      >
+      <div role='none' className='contents' onFocusCapture={handleFocus}>
         {children}
       </div>
     </AttentionContextProvider>
@@ -168,17 +178,17 @@ export type AttendableContainerProps = ThemedClassName<
 const AttendableContainer = forwardRef<HTMLDivElement, AttendableContainerProps>(
   ({ id, classNames, children, asChild, ...props }, forwardedRef) => {
     const attentionAttrs = useAttentionAttributes(id);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root
+      <Comp
         role='none'
         {...attentionAttrs}
         {...props}
-        className={mx('attention-surface', props.tabIndex === 0 && 'dx-focus-ring-inset-over-all', classNames)}
+        className={mx('dx-attention-surface', props.tabIndex === 0 && 'dx-focus-ring-inset-over-all', classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -193,6 +203,6 @@ export {
   useAttentionAttributes,
   useAttentionPath,
   ATTENTION_NAME,
-  ATTENABLE_ATTRIBUTE,
+  ATTENDABLE_ATTRIBUTE,
   ATTENTION_SOURCE_ATTRIBUTE,
 };

package/src/components/SelectionProvider.tsx

@@ -2,18 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
-import { Match } from 'effect';
-import React, { useCallback, useMemo, type PropsWithChildren } from 'react';
+import * as Match from 'effect/Match';
+import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
-import { useDefaultValue } from '@dxos/react-ui';
+import { useDefaultValue } from '@dxos/react-hooks';
 
 import {
-  defaultSelection,
-  SelectionManager,
-  type SelectionResult,
   type Selection,
+  SelectionManager,
   type SelectionMode,
+  type SelectionResult,
+  defaultSelection,
 } from '../selection';
 
 const SELECTION_NAME = 'Selection';
@@ -23,7 +24,7 @@ type SelectionContextValue = {
 };
 
 const [SelectionContextProvider, useSelectionContext] = createContext<SelectionContextValue>(SELECTION_NAME, {
-  selection: new SelectionManager(),
+  selection: undefined as unknown as SelectionManager,
 });
 
 /**
@@ -34,7 +35,8 @@ export const SelectionProvider = ({
   children,
   selection: propsSelection,
 }: PropsWithChildren<{ selection?: SelectionManager }>) => {
-  const selection = useDefaultValue(propsSelection, () => new SelectionManager());
+  const registry = useContext(RegistryContext);
+  const selection = useDefaultValue(propsSelection, () => new SelectionManager(registry));
   return <SelectionContextProvider selection={selection}>{children}</SelectionContextProvider>;
 };
 
@@ -46,6 +48,18 @@ export const useSelectionManager = () => {
   return selection;
 };
 
+const getDefaultResult = <T extends SelectionMode>(mode: T): SelectionResult<T> => {
+  return Match.type<Selection>().pipe(
+    Match.when({ mode: 'single' }, (selection) => selection.id),
+    Match.when({ mode: 'multi' }, (selection) => selection.ids),
+    Match.when({ mode: 'range' }, (selection) =>
+      selection.from && selection.to ? { from: selection.from, to: selection.to } : undefined,
+    ),
+    Match.when({ mode: 'multi-range' }, (selection) => selection.ranges),
+    Match.exhaustive,
+  )(defaultSelection(mode)) as SelectionResult<T>;
+};
+
 /**
  * Get the selected objects for a given context.
  */
@@ -54,28 +68,49 @@ export const useSelected = <T extends SelectionMode>(
   mode: T = 'multi' as T,
 ): SelectionResult<T> => {
   const { selection } = useSelectionContext(SELECTION_NAME);
-  if (contextId) {
-    return selection.getSelected(contextId, mode);
-  }
+  const [state, setState] = useState<SelectionResult<T>>(() =>
+    contextId && selection ? selection.getSelected(contextId, mode) : getDefaultResult(mode),
+  );
 
-  return Match.type<Selection>().pipe(
-    Match.when({ mode: 'single' }, (s) => s.id),
-    Match.when({ mode: 'multi' }, (s) => s.ids),
-    Match.when({ mode: 'range' }, (s) => (s.from && s.to ? { from: s.from, to: s.to } : undefined)),
-    Match.when({ mode: 'multi-range' }, (s) => s.ranges),
-    Match.exhaustive,
-  )(defaultSelection(mode)) as any;
+  useEffect(() => {
+    if (!contextId || !selection) {
+      setState(getDefaultResult(mode));
+      return;
+    }
+
+    // Set initial state.
+    setState(selection.getSelected(contextId, mode));
+
+    // Subscribe to changes.
+    return selection.subscribe(() => {
+      setState(selection.getSelected(contextId, mode));
+    });
+  }, [selection, contextId, mode]);
+
+  return state;
+};
+
+export type UseSelectionActions = {
+  singleSelect: (id: string) => void;
+  multiSelect: (ids: string[]) => void;
+  rangeSelect: (from: string, to: string) => void;
+  toggle: (id: string) => void;
+  clear: () => void;
 };
 
 /**
  * Provides functions to manage the selection state for multiple contexts.
  */
-export const useSelectionActions = (contextIds: string[], mode: SelectionMode = 'multi') => {
+// TODO(burdon): Mode not used.
+export const useSelectionActions = (contextIds: string[], mode: SelectionMode = 'multi'): UseSelectionActions => {
   const stableContextIds = useMemo(() => contextIds, [JSON.stringify(contextIds)]); // TODO(burdon): Avoid stringify.
   const { selection } = useSelectionContext(SELECTION_NAME);
 
   const singleSelect = useCallback(
     (id: string) => {
+      if (!selection) {
+        return;
+      }
       for (const contextId of stableContextIds) {
         selection.updateSingle(contextId, id);
       }
@@ -85,6 +120,9 @@ export const useSelectionActions = (contextIds: string[], mode: SelectionMode =
 
   const multiSelect = useCallback(
     (ids: string[]) => {
+      if (!selection) {
+        return;
+      }
       for (const contextId of stableContextIds) {
         selection.updateMulti(contextId, ids);
       }
@@ -94,6 +132,9 @@ export const useSelectionActions = (contextIds: string[], mode: SelectionMode =
 
   const rangeSelect = useCallback(
     (from: string, to: string) => {
+      if (!selection) {
+        return;
+      }
       for (const contextId of stableContextIds) {
         selection.updateRange(contextId, from, to);
       }
@@ -103,6 +144,9 @@ export const useSelectionActions = (contextIds: string[], mode: SelectionMode =
 
   const toggle = useCallback(
     (id: string) => {
+      if (!selection) {
+        return;
+      }
       for (const contextId of stableContextIds) {
         selection.toggleSelection(contextId, id);
       }
@@ -111,6 +155,9 @@ export const useSelectionActions = (contextIds: string[], mode: SelectionMode =
   );
 
   const clear = useCallback(() => {
+    if (!selection) {
+      return;
+    }
     for (const contextId of stableContextIds) {
       selection.clearSelection(contextId);
     }

package/src/index.ts

@@ -5,3 +5,4 @@
 export * from './attention';
 export * from './components';
 export * from './selection';
+export * from './types';

package/src/selection.ts

@@ -2,11 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { untracked } from '@preact/signals-core';
-import { Match, Schema } from 'effect';
+import { Atom, type Registry } from '@effect-atom/atom-react';
+import * as Match from 'effect/Match';
+import * as Schema from 'effect/Schema';
 
 import { invariant } from '@dxos/invariant';
-import { live, type Live } from '@dxos/live-object';
 
 // TODO(burdon): Reconcile with @dxos/graph.
 
@@ -69,117 +69,158 @@ export const getSelectionSet = (selectionManager: SelectionManager, contextId?:
  * Each context maintains its own selection mode and state.
  */
 export class SelectionManager {
-  private readonly _state = live<{ selections: Record<string, Selection> }>({ selections: {} });
+  private readonly _state: Atom.Writable<{ selections: Record<string, Selection> }>;
+
+  constructor(
+    private readonly _registry: Registry.Registry,
+    initial: Record<string, Selection> = {},
+  ) {
+    this._state = Atom.make<{ selections: Record<string, Selection> }>({
+      selections: { ...initial },
+    });
+  }
 
-  constructor(initial: Record<string, Selection> = {}) {
-    if (Object.keys(initial).length > 0) {
-      untracked(() => {
-        this._state.selections = initial;
-      });
-    }
+  /**
+   * Get the state atom for reactive access in the graph system.
+   */
+  get state(): Atom.Atom<{ selections: Record<string, Selection> }> {
+    return this._state;
+  }
+
+  /**
+   * Gets the current state.
+   */
+  getState(): { selections: Record<string, Selection> } {
+    return this._registry.get(this._state);
+  }
+
+  /**
+   * Subscribe to changes in the selection state.
+   */
+  subscribe(cb: (state: { selections: Record<string, Selection> }) => void): () => void {
+    this._registry.get(this._state);
+    return this._registry.subscribe(this._state, () => {
+      cb(this._registry.get(this._state));
+    });
   }
 
   getSelectionContexts(): string[] {
-    return Object.keys(this._state.selections);
+    return Object.keys(this._registry.get(this._state).selections);
   }
 
+  getSelection(contextId: string): Selection | undefined;
+  getSelection<T extends SelectionMode>(contextId: string, mode: T): Selection;
   getSelection<T extends SelectionMode | undefined>(
     contextId: string,
     mode: T = undefined as T,
-  ): T extends undefined ? Live<Selection> | undefined : Live<Selection> {
-    const selection = untracked(() => this._state.selections[contextId]);
+  ): Selection | undefined {
+    const state = this._registry.get(this._state);
+    const selection = state.selections[contextId];
     if (!mode || selection) {
       return selection;
     }
 
-    return untracked(() => {
-      this._state.selections[contextId] = defaultSelection(mode);
-      return this._state.selections[contextId];
-    });
+    // Create new selection for the context.
+    const newSelection = defaultSelection(mode);
+    this._registry.update(this._state, (state) => ({
+      selections: { ...state.selections, [contextId]: newSelection },
+    }));
+    return newSelection;
   }
 
   // TODO(burdon): Disambiguate with getSelection?
   getSelected<T extends SelectionMode>(contextId: string, mode: T = 'multi' as T): SelectionResult<T> {
     const selection = this.getSelection(contextId, mode);
     invariant(selection?.mode === mode, 'Selection mode mismatch');
+    // Cast required because TypeScript can't infer the relationship between T and the matched result.
     return Match.type<Selection>().pipe(
       Match.when({ mode: 'single' }, (s) => s.id),
       Match.when({ mode: 'multi' }, (s) => s.ids),
       Match.when({ mode: 'range' }, (s) => (s.from && s.to ? { from: s.from, to: s.to } : undefined)),
       Match.when({ mode: 'multi-range' }, (s) => s.ranges),
       Match.exhaustive,
-    )(selection) as any;
+    )(selection) as SelectionResult<T>;
   }
 
   updateSingle(contextId: string, id: string): void {
-    untracked(() => {
-      const selection = this.getSelection(contextId, 'single');
-      invariant(selection?.mode === 'single', 'Selection mode is not single');
-      selection.id = id;
-    });
+    const selection = this.getSelection(contextId, 'single');
+    invariant(selection?.mode === 'single', 'Selection mode is not single');
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: { ...selection, id },
+      },
+    }));
   }
 
   updateMulti(contextId: string, ids: string[]) {
-    untracked(() => {
-      const selection = this.getSelection(contextId, 'multi');
-      invariant(selection?.mode === 'multi', 'Selection mode is not multi');
-      selection.ids.splice(0, selection.ids.length, ...ids);
-    });
+    const selection = this.getSelection(contextId, 'multi');
+    invariant(selection?.mode === 'multi', 'Selection mode is not multi');
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: { ...selection, ids: [...ids] },
+      },
+    }));
   }
 
   updateRange(contextId: string, from: string, to: string) {
-    untracked(() => {
-      const selection = this.getSelection(contextId, 'range');
-      invariant(selection?.mode === 'range', 'Selection mode is not range');
-      selection.from = from;
-      selection.to = to;
-    });
+    const selection = this.getSelection(contextId, 'range');
+    invariant(selection?.mode === 'range', 'Selection mode is not range');
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: { ...selection, from, to },
+      },
+    }));
   }
 
   updateMultiRange(contextId: string, ranges: { from: string; to: string }[]) {
-    untracked(() => {
-      const selection = this.getSelection(contextId, 'multi-range');
-      invariant(selection?.mode === 'multi-range', 'Selection mode is not multi-range');
-      selection.ranges.splice(0, selection.ranges.length, ...ranges);
-    });
+    const selection = this.getSelection(contextId, 'multi-range');
+    invariant(selection?.mode === 'multi-range', 'Selection mode is not multi-range');
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: { ...selection, ranges: [...ranges] },
+      },
+    }));
   }
 
   clearSelection(contextId: string): void {
-    untracked(() => {
-      const selection = this.getSelection(contextId);
-      Match.type<Selection | undefined>().pipe(
-        Match.when(undefined, () => {
-          // No-op.
-        }),
-        Match.when({ mode: 'single' }, (s) => {
-          s.id = undefined;
-        }),
-        Match.when({ mode: 'multi' }, (s) => {
-          s.ids.splice(0, s.ids.length);
-        }),
-        Match.when({ mode: 'range' }, (s) => {
-          s.from = undefined;
-          s.to = undefined;
-        }),
-        Match.when({ mode: 'multi-range' }, (s) => {
-          s.ranges.splice(0, s.ranges.length);
-        }),
-        Match.exhaustive,
-      )(selection);
-    });
+    const selection = this.getSelection(contextId);
+    if (!selection) {
+      return;
+    }
+
+    const clearedSelection = Match.type<Selection>().pipe(
+      Match.when({ mode: 'single' }, (s) => ({ ...s, id: undefined })),
+      Match.when({ mode: 'multi' }, (s) => ({ ...s, ids: [] })),
+      Match.when({ mode: 'range' }, (s) => ({ ...s, from: undefined, to: undefined })),
+      Match.when({ mode: 'multi-range' }, (s) => ({ ...s, ranges: [] })),
+      Match.exhaustive,
+    )(selection);
+
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: clearedSelection,
+      },
+    }));
   }
 
   toggleSelection(contextId: string, id: string): void {
-    untracked(() => {
-      const selection = this.getSelection(contextId, 'multi');
-      invariant(selection?.mode === 'multi', 'Selection mode is not multi');
-
-      if (selection.ids.includes(id)) {
-        const index = selection.ids.indexOf(id);
-        selection.ids.splice(index, 1);
-      } else {
-        selection.ids.push(id);
-      }
-    });
+    const selection = this.getSelection(contextId, 'multi');
+    invariant(selection?.mode === 'multi', 'Selection mode is not multi');
+
+    const newIds = selection.ids.includes(id)
+      ? selection.ids.filter((existingId) => existingId !== id)
+      : [...selection.ids, id];
+
+    this._registry.update(this._state, (state) => ({
+      selections: {
+        ...state.selections,
+        [contextId]: { ...selection, ids: newIds },
+      },
+    }));
   }
 }

package/src/testing/decorators/withAttention.ts

@@ -2,11 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
+import { Registry, RegistryContext } from '@effect-atom/atom-react';
 import { type Decorator } from '@storybook/react';
-import { createElement } from 'react';
+import { createElement, useMemo } from 'react';
 
-import { RootAttentionProvider } from '../../components';
+import { AttentionManager } from '../../attention';
+import { RootAttentionProvider, SelectionProvider } from '../../components';
 
-export const withAttention: Decorator = (Story) => {
-  return createElement(RootAttentionProvider, {}, createElement(Story));
+/**
+ * Storybook decorator that provides attention context.
+ * @param initialAttendedId Optional ID to set as initially attended.
+ */
+export const withAttention = (initialAttendedId?: string): Decorator => {
+  return (Story) => {
+    const registry = useMemo(() => Registry.make(), []);
+    const attention = useMemo(
+      () => (initialAttendedId ? new AttentionManager(registry, [initialAttendedId]) : undefined),
+      [registry],
+    );
+    return createElement(
+      RegistryContext.Provider,
+      { value: registry },
+      createElement(RootAttentionProvider, { attention }, createElement(SelectionProvider, {}, createElement(Story))),
+    );
+  };
 };