@dxos/react-ui-attention 0.8.4-main.72ec0f3 → 0.8.4-main.74a063c4e0

package/src/components/AttentionGlyph.stories.tsx

@@ -13,7 +13,7 @@ import { AttentionGlyph, type AttentionGlyphProps } from './AttentionGlyph';
 
 const DefaultStory = (props: AttentionGlyphProps) => {
   return (
-    <ul className='flex gap-2 mbe-2'>
+    <ul className='flex gap-2 mb-2'>
       <li>
         <AttentionGlyph presence='none' {...props} />
       </li>
@@ -31,7 +31,7 @@ const meta = {
   title: 'ui/react-ui-attention/AttentionGlyph',
   component: AttentionGlyph as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -76,7 +76,7 @@ export const Syncing: Story = {
     });
 
     return (
-      <div className='flex flex-col p-2 is-[200px]'>
+      <div className='flex flex-col p-2 w-[200px]'>
         <Button onClick={handleChangeAttended}>Change attended</Button>
         {Array.from(spaces.entries()).map(([space, sync]) => (
           <div key={space} className='flex items-center'>

package/src/components/AttentionGlyph.tsx

@@ -6,13 +6,20 @@ import { type Primitive } from '@radix-ui/react-primitive';
 import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef, useMemo } from 'react';
 
 import { Icon, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-const attentionGlyphStyles =
-  'inline-block rounded-sm is-3 bs-3 bg-transparent text-accentText transition-colors [[data-contains-attended=true]_&]:bg-attentionRelated [[data-attention=true]_&]:bg-accentSurface [[data-attention=true]_&]:text-accentSurfaceText [[aria-current][data-attention=true]_&]:bg-accentSurface [[aria-current][data-attention=true]_&]:text-accentSurfaceText';
+const attentionGlyphStyles = mx(
+  'inline-block rounded-xs w-3 h-3 bg-transparent text-accent-text transition-colors',
+  '[[data-contains-attended=true]_&]:bg-attention-contains',
+  '[[data-attention=true]_&]:bg-accent-surface',
+  '[[data-attention=true]_&]:text-accent-surface-text',
+  '[[aria-current][data-attention=true]_&]:bg-accent-surface',
+  '[[aria-current][data-attention=true]_&]:text-accent-surface-text',
+  '[[aria-selected="true"][data-attention=true]_&]:bg-accent-surface',
+  '[[aria-selected="true"][data-attention=true]_&]:text-accent-surface-text',
+);
 
-const presenceIconStyles =
-  'is-3 bs-3 group-[[aria-current]_&:hover]/attentionGlyphButton:hidden group-[[aria-current]_&:focus]/attentionGlyphButton:hidden group-[[data-attention=true]_&:hover]/attentionGlyphButton:hidden group-[[data-attention=true]_&:focus]/attentionGlyphButton:hidden group-[[aria-current][data-attention=true]_&:hover]/attentionGlyphButton:hidden group-[[aria-current][data-attention=true]_&:focus]/attentionGlyphButton:hidden';
+const presenceIconStyles = mx('w-3 h-3');
 
 const PresenceOne = () => {
   return (
@@ -87,7 +94,7 @@ export const AttentionGlyph = forwardRef<HTMLSpanElement, AttentionGlyphProps>(
     ) : null;
 
     return (
-      <div role='none' className='flex' data-attention={attended} data-contains-attended={containsAttended}>
+      <div role='none' className='flex group' data-attention={attended} data-contains-attended={containsAttended}>
         <span role='none' {...props} className={mx(attentionGlyphStyles, classNames)} ref={forwardedRef}>
           {icon}
         </span>

package/src/components/AttentionProvider.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { withAttention } from '../testing';
-
 import { useAttentionAttributes } from './AttentionProvider';
 
 const Attendable = ({ id }: { id: string }) => {
@@ -16,7 +15,7 @@ const Attendable = ({ id }: { id: string }) => {
 
   return (
     <div {...attentionAttrs}>
-      <textarea className='attention-surface resize-none' placeholder={id} />
+      <textarea className='dx-attention-surface resize-none' placeholder={id} />
     </div>
   );
 };
@@ -35,7 +34,7 @@ const Story = () => {
 const meta = {
   title: 'ui/react-ui-attention/AttentionProvider',
   render: Story,
-  decorators: [withTheme, withAttention],
+  decorators: [withTheme(), withAttention()],
 } satisfies Meta;
 
 export default meta;

package/src/components/AttentionProvider.tsx

@@ -2,51 +2,88 @@
 // Copyright 2024 DXOS.org
 //
 
+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, { type ComponentPropsWithRef, type FocusEvent, type PropsWithChildren, forwardRef, useMemo } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type FocusEvent,
+  type PropsWithChildren,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { log } from '@dxos/log';
-import { type ThemedClassName, useDefaultValue } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { useDefaultValue } from '@dxos/react-hooks';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
 
-import { ATTENDABLE_PATH_SEPARATOR, type Attention, AttentionManager, getAttendables } from '../attention';
+import { AttentionManager, getAttendables } from '../attention';
+import { type Attention } from '../types';
 
 const ATTENTION_NAME = 'Attention';
 const ATTENDABLE_ATTRIBUTE = 'data-attendable-id';
-const ATTENTION_SOURCE_ATTRIBUTE = 'data-is-attention-source';
+const ATTENTION_SOURCE_ATTRIBUTE = 'data-w-attention-source';
 
 type AttentionContextValue = {
   attention: AttentionManager;
-  path: string[];
 };
 
 const [AttentionContextProvider, useAttentionContext] = createContext<AttentionContextValue>(ATTENTION_NAME, {
-  attention: new AttentionManager(),
-  path: [],
+  attention: undefined as unknown as AttentionManager,
 });
 
-const UNKNOWN_ATTENDABLE: Attention = { hasAttention: false, isAncestor: false, isRelated: false };
+const UNKNOWN_ATTENDABLE = { hasAttention: false, isAncestor: false, isRelated: false } as Attention;
 
+/**
+ * Subscribe to the attention state for a qualified graph ID.
+ */
 const useAttention = (attendableId?: string): Attention => {
-  const { attention, path } = useAttentionContext(ATTENTION_NAME);
-  if (!attendableId) {
-    return UNKNOWN_ATTENDABLE;
-  }
+  const { attention } = useAttentionContext(ATTENTION_NAME);
+  const [state, setState] = useState<Attention>(UNKNOWN_ATTENDABLE);
+
+  useEffect(() => {
+    if (!attendableId || !attention) {
+      setState(UNKNOWN_ATTENDABLE);
+      return;
+    }
+
+    const currentState = attention.get(attendableId);
+    setState(currentState);
+
+    return attention.subscribe(attendableId, (newState) => {
+      setState(newState);
+    });
+  }, [attention, attendableId]);
 
-  const current = [...attendableId.split(ATTENDABLE_PATH_SEPARATOR), ...path];
-  return attention.get(current);
+  return state;
 };
 
 const useAttended = () => {
   const { attention } = useAttentionContext(ATTENTION_NAME);
-  return attention.current;
+  const [current, setCurrent] = useState<readonly string[]>([]);
+
+  useEffect(() => {
+    if (!attention) {
+      return;
+    }
+
+    setCurrent(attention.getCurrent());
+
+    return attention.subscribeCurrent((newCurrent) => {
+      setCurrent(newCurrent);
+    });
+  }, [attention]);
+
+  return current;
 };
 
 /**
  * Computes HTML element attributes to apply so the attention system can detect changes.
- * @param attendableId
  */
 const useAttentionAttributes = (attendableId?: string) => {
   const { hasAttention } = useAttention(attendableId);
@@ -60,11 +97,6 @@ const useAttentionAttributes = (attendableId?: string) => {
   }, [attendableId, hasAttention]);
 };
 
-const useAttentionPath = () => {
-  const { path } = useAttentionContext(ATTENTION_NAME);
-  return path;
-};
-
 const RootAttentionProvider = ({
   children,
   attention: propsAttention,
@@ -75,7 +107,9 @@ 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 });
@@ -86,7 +120,7 @@ const RootAttentionProvider = ({
         (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.
@@ -97,102 +131,50 @@ 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}
-      >
+    <AttentionContextProvider attention={attention}>
+      <div role='none' className='contents' onFocusCapture={handleFocus}>
         {children}
       </div>
     </AttentionContextProvider>
   );
 };
 
-const AttentionProvider = ({ id, children }: PropsWithChildren<{ id: string }>) => {
-  const { attention, path } = useAttentionContext(ATTENTION_NAME);
-  const nextPath = useMemo(() => [id, ...path], [id, path]);
-
-  return (
-    <AttentionContextProvider attention={attention} path={nextPath}>
-      {children}
-    </AttentionContextProvider>
-  );
-};
-
 export type AttendableContainerProps = ThemedClassName<
   ComponentPropsWithRef<'div'> & { id: string; asChild?: boolean }
 >;
 
 /**
- * Note that DeckPlugin and StackPlugin both handle attention on their own, and when rendering content in those cases it
- * is not necessary to also render an `AttendableContainer`. This component is primarily for Storybook stories and other
- * testing scenarios, or the rare cases where an attendable entity is rendered outside of either of those plugins.
+ * Note that DeckPlugin and StackPlugin both handle attention on their own,
+ * and when rendering content in those cases it is not necessary to also render an `AttendableContainer`.
+ * This component is primarily for Storybook stories and other testing scenarios,
+ * or the rare cases where an attendable entity is rendered outside of either of those plugins.
  */
 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)}
+        {...attentionAttrs}
+        className={mx('dx-attention-surface', props.tabIndex === 0 && 'dx-focus-ring-inset-over-all', classNames)}
         ref={forwardedRef}
       >
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
 export {
   RootAttentionProvider,
-  AttentionProvider,
   AttendableContainer,
   useAttentionContext,
   useAttention,
   useAttended,
   useAttentionAttributes,
-  useAttentionPath,
   ATTENTION_NAME,
   ATTENDABLE_ATTRIBUTE,
   ATTENTION_SOURCE_ATTRIBUTE,

package/src/components/SelectionProvider.tsx

@@ -2,11 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
 import * as Match from 'effect/Match';
-import React, { type PropsWithChildren, useCallback, useMemo } from 'react';
+import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
-import { useDefaultValue } from '@dxos/react-ui';
+import { useDefaultValue } from '@dxos/react-hooks';
 
 import {
   type 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';