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

package/package.json

@@ -1,20 +1,32 @@
 {
   "name": "@dxos/react-ui-attention",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Signifier components and providers for attention system.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
+    "./types": {
+      "source": "./src/types.ts",
+      "types": "./dist/types/src/types.d.ts",
+      "browser": "./dist/lib/browser/types.mjs",
+      "node": "./dist/lib/node-esm/types.mjs"
+    },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs"
@@ -23,6 +35,9 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
+      "types": [
+        "dist/types/src/types.d.ts"
+      ],
       "testing": [
         "dist/types/src/testing/index.d.ts"
       ]
@@ -33,8 +48,7 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
@@ -42,30 +56,30 @@
     "@radix-ui/react-primitive": "2.0.2",
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "effect": "3.17.0",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068"
+    "effect": "3.19.16",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-hooks": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/attention.test.ts

@@ -2,14 +2,16 @@
 // Copyright 2024 DXOS.org
 //
 
-import { describe, test, expect } from 'vitest';
+import { Registry } from '@effect-atom/atom-react';
+import { describe, expect, test } from 'vitest';
 
 import { AttentionManager } from './attention';
 
 describe('AttentionManager', () => {
   test('takes an initial attendable', () => {
-    const attention = new AttentionManager(['a', 'b', 'c']);
-    expect(attention.current).to.deep.equal(['a', 'b', 'c']);
+    const registry = Registry.make();
+    const attention = new AttentionManager(registry, ['a', 'b', 'c']);
+    expect(attention.getCurrent()).to.deep.equal(['a', 'b', 'c']);
     expect(attention.keys()).to.deep.equal([['a'], ['b', 'c'], ['c'], ['a', 'b', 'c']]);
     expect(attention.get(['a'])).to.deep.equal({ hasAttention: false, isAncestor: false, isRelated: true });
     expect(attention.get(['b', 'c'])).to.deep.equal({ hasAttention: false, isAncestor: true, isRelated: false });
@@ -19,15 +21,17 @@ describe('AttentionManager', () => {
   });
 
   test('current returns last updated key', () => {
-    const attention = new AttentionManager();
-    expect(attention.current).to.deep.equal([]);
+    const registry = Registry.make();
+    const attention = new AttentionManager(registry);
+    expect(attention.getCurrent()).to.deep.equal([]);
 
     attention.update(['a', 'b', 'c']);
-    expect(attention.current).to.deep.equal(['a', 'b', 'c']);
+    expect(attention.getCurrent()).to.deep.equal(['a', 'b', 'c']);
   });
 
   test('keys returns all stored attendables', () => {
-    const attention = new AttentionManager();
+    const registry = Registry.make();
+    const attention = new AttentionManager(registry);
     expect(attention.keys()).to.deep.equal([]);
 
     attention.update(['a']);
@@ -38,7 +42,8 @@ describe('AttentionManager', () => {
   });
 
   test('get returns attention object for a given key', () => {
-    const attention = new AttentionManager();
+    const registry = Registry.make();
+    const attention = new AttentionManager(registry);
     expect(attention.get(['a'])).to.deep.equal({ hasAttention: false, isAncestor: false, isRelated: false });
 
     attention.update(['a']);

package/src/attention.ts

@@ -2,24 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { untracked } from '@preact/signals-core';
-import { Schema } from 'effect';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 
-import { live, type Live } from '@dxos/live-object';
 import { ComplexMap } from '@dxos/util';
 
-// NOTE: Chosen from RFC 1738’s `safe` characters: http://www.faqs.org/rfcs/rfc1738.html
-export const ATTENDABLE_PATH_SEPARATOR = '~';
-
-export const AttentionSchema = Schema.mutable(
-  Schema.Struct({
-    hasAttention: Schema.Boolean,
-    isAncestor: Schema.Boolean,
-    isRelated: Schema.Boolean,
-  }),
-);
-
-export type Attention = Schema.Schema.Type<typeof AttentionSchema>;
+import { ATTENDABLE_PATH_SEPARATOR, type Attention } from './types';
 
 // TODO(wittjosiah): Use mosaic path utility?
 const stringKey = (key: string[]) => key.join(',');
@@ -27,26 +14,44 @@ const stringKey = (key: string[]) => key.join(',');
 /**
  * Manages attention state for an application.
  */
-// TODO(wittjosiah): Write unit tests.
 export class AttentionManager {
-  // Each attention path is associated with an attention object.
+  // Each attention path is associated with an attention atom.
   // The lookup is not a reactive object to ensure that attention for each path is subscribable independently.
-  private readonly _map = new ComplexMap<string[], Live<Attention>>(stringKey);
-  private readonly _state = live<{ current: string[] }>({ current: [] });
-
-  constructor(initial: string[] = []) {
+  private readonly _map = new ComplexMap<string[], Atom.Writable<Attention>>(stringKey);
+  private readonly _currentAtom: Atom.Writable<string[]>;
+
+  constructor(
+    private readonly _registry: Registry.Registry,
+    initial: string[] = [],
+  ) {
+    this._currentAtom = Atom.make<string[]>([]);
     if (initial.length > 0) {
       this.update(initial);
     }
   }
 
   /**
-   * Currently attended element.
-   *
-   * @reactive
+   * Atom for the currently attended element path.
+   */
+  get current(): Atom.Atom<string[]> {
+    return this._currentAtom;
+  }
+
+  /**
+   * Gets the currently attended element path.
+   */
+  getCurrent(): readonly string[] {
+    return this._registry.get(this._currentAtom);
+  }
+
+  /**
+   * Subscribe to changes in the current attention path.
    */
-  get current(): Live<readonly string[]> {
-    return this._state.current;
+  subscribeCurrent(cb: (current: readonly string[]) => void): () => void {
+    this._registry.get(this._currentAtom);
+    return this._registry.subscribe(this._currentAtom, () => {
+      cb(this._registry.get(this._currentAtom));
+    });
   }
 
   /**
@@ -59,15 +64,31 @@ export class AttentionManager {
   /**
    * Get the attention state for a given path.
    */
-  get(key: string[]): Live<Attention> {
-    const object = this._map.get(key);
-    if (object) {
-      return object;
+  get(key: string[]): Attention {
+    const atom = this._getAtom(key);
+    return this._registry.get(atom);
+  }
+
+  /**
+   * Subscribe to changes in the attention state for a given path.
+   */
+  subscribe(key: string[], cb: (attention: Attention) => void): () => void {
+    const atom = this._getAtom(key);
+    this._registry.get(atom);
+    return this._registry.subscribe(atom, () => {
+      cb(this._registry.get(atom));
+    });
+  }
+
+  private _getAtom(key: string[]): Atom.Writable<Attention> {
+    const existing = this._map.get(key);
+    if (existing) {
+      return existing;
     }
 
-    const newObject = live(AttentionSchema, { hasAttention: false, isAncestor: false, isRelated: false });
-    this._map.set(key, newObject);
-    return newObject;
+    const newAtom = Atom.make<Attention>({ hasAttention: false, isAncestor: false, isRelated: false });
+    this._map.set(key, newAtom);
+    return newAtom;
   }
 
   /**
@@ -76,12 +97,12 @@ export class AttentionManager {
    * @internal
    */
   update(nextKey: string[]): void {
-    const currentKey = untracked(() => this.current);
+    const currentKey = this.getCurrent();
     const currentRelatedTo = currentKey[0];
     const nextRelatedTo = nextKey[0];
 
     // Ensure related attention object is initialized.
-    this.get([nextRelatedTo]);
+    this._getAtom([nextRelatedTo]);
 
     const currentRelatedKeys = this.keys().filter((key) => key[0] === currentRelatedTo);
     const nextRelatedKeys = this.keys().filter(
@@ -97,7 +118,7 @@ export class AttentionManager {
       (curr) => !nextAncestorKeys.find((next) => stringKey(curr) === stringKey(next)),
     );
 
-    this._state.current = nextKey;
+    this._registry.set(this._currentAtom, nextKey);
     prevRelatedKeys.forEach((key) => this._set(key, {}));
     prevAncestorKeys.forEach((key) => this._set(key, {}));
     nextRelatedKeys.forEach((key) => this._set(key, { isRelated: true }));
@@ -106,15 +127,17 @@ export class AttentionManager {
   }
 
   private _set(key: string[], attention: Partial<Attention>): void {
-    const object = this.get(key);
-    object.hasAttention = attention.hasAttention ?? false;
-    object.isAncestor = attention.isAncestor ?? false;
-    object.isRelated = attention.isRelated ?? false;
+    const atom = this._getAtom(key);
+    this._registry.set(atom, {
+      hasAttention: attention.hasAttention ?? false,
+      isAncestor: attention.isAncestor ?? false,
+      isRelated: attention.isRelated ?? false,
+    });
   }
 }
 
 /**
- * Accumulates all attendable id’s between the element provided and the root, inclusive.
+ * Accumulates all attendable id's between the element provided and the root, inclusive.
  */
 export const getAttendables = (selector: string, cursor: Element, acc: string[] = []): string[] => {
   // Find the closest element with `data-attendable-id`, if any; start from cursor and move up the DOM tree.

package/src/components/AttentionGlyph.stories.tsx

@@ -2,19 +2,18 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { Button } from '@dxos/react-ui';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 import { range } from '@dxos/util';
 
 import { AttentionGlyph, type AttentionGlyphProps } from './AttentionGlyph';
 
-const Story = (props: AttentionGlyphProps) => {
+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>
@@ -28,26 +27,30 @@ const Story = (props: AttentionGlyphProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-attention/AttentionGlyph',
-  component: AttentionGlyph,
-  render: Story,
-  decorators: [withTheme],
-};
+  component: AttentionGlyph as any,
+  render: DefaultStory,
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };
 
-export const Attention = {
+export const Attention: Story = {
   args: { attended: true },
 };
 
-export const Contains = {
+export const Contains: Story = {
   args: { containsAttended: true },
 };
 
-export const Syncing = {
+export const Syncing: Story = {
   render: () => {
     const [spaces, setSpaces] = useState(
       new Map<string, boolean>(range(8).map((i) => [`space-${i + 1}`, Math.random() > 0.5])),

package/src/components/AttentionGlyph.tsx

@@ -3,16 +3,23 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, type CSSProperties, forwardRef, useMemo } from 'react';
+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-surface-surface',
+  '[[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

@@ -2,21 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { useAttentionAttributes } from './AttentionProvider';
 import { withAttention } from '../testing';
 
+import { useAttentionAttributes } from './AttentionProvider';
+
 const Attendable = ({ id }: { id: string }) => {
   const attentionAttrs = useAttentionAttributes(id);
 
   return (
     <div {...attentionAttrs}>
-      <textarea className='attention-surface resize-none' placeholder={id} />
+      <textarea className='dx-attention-surface resize-none' placeholder={id} />
     </div>
   );
 };
@@ -32,10 +32,14 @@ const Story = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-attention/AttentionProvider',
   render: Story,
-  decorators: [withTheme, withAttention],
-};
+  decorators: [withTheme(), withAttention()],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};