DOM

createAttentionStore

A store that uses page visibility, window focus, the focused area, and response visibility to estimate where the user is working.

Create and register app elements

AttentionStore reads browser focus and visibility. It does not inspect a screen reader's cursor or move focus.

typescript
const attention = createAttentionStore({ document });

const unregisterComposer = attention.registerComposer(composer);
const unregisterConversation = attention.registerConversation(conversation);
const unregisterNewest = attention.registerNewestResponse(latestResponse);

const unsubscribe = attention.subscribe(() => {
  console.log(attention.getSnapshot());
});

unsubscribe();
unregisterNewest();
unregisterConversation();
unregisterComposer();
attention.dispose();

How this code works

  1. 01
    Read browser signals

    AttentionStore reads document visibility, window focus, element focus, and intersection changes.

  2. 02
    Register app areas

    Register the composer, conversation history, and newest response so the store can identify them.

  3. 03
    Clean up

    Each registration and subscription returns its own cleanup function.

Options and return values

optionsAttentionStoreOptionsOptional

Injects the document, intersection observer factory, and observer configuration.

Default
browser document
returnAttentionStoreReturn

External store with snapshots, registrations, subscriptions, and disposal.

Default
n/a

AttentionSnapshot

A field stays unknown when the browser cannot provide enough information. AttentionStore never guesses.

FieldValuesBrowser signal
visibilityvisible, hidden, unknownDocument visibility
windowFocusfocused, blurred, unknownWindow focus
focusAreacomposer, conversation, elsewhere, none, unknownDeep active element
newestResponsevisible, outside, unobserved, unknownIntersection observer
modeforeground, background, reading-history, away, unknownDerived from the fields above