@dxos/react-ui-attention 0.9.1-staging.ee54ba693a → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-attention",
-  "version": "0.9.1-staging.ee54ba693a",
+  "version": "0.11.0",
   "description": "Signifier components and providers for attention system.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,20 +16,17 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "import": "./dist/lib/index.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"
+      "import": "./dist/lib/testing.mjs"
     },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "browser": "./dist/lib/browser/types/index.mjs",
-      "node": "./dist/lib/node-esm/types/index.mjs"
+      "import": "./dist/lib/types.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -38,6 +35,7 @@
     "src"
   ],
   "dependencies": {
+    "@effect-atom/atom": "^0.5.3",
     "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-compose-refs": "1.1.1",
@@ -47,12 +45,12 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "effect": "3.21.4",
-    "@dxos/echo": "0.9.1-staging.ee54ba693a",
-    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-hooks": "0.9.1-staging.ee54ba693a",
-    "@dxos/util": "0.9.1-staging.ee54ba693a",
-    "@dxos/keyboard": "0.9.1-staging.ee54ba693a",
-    "@dxos/log": "0.9.1-staging.ee54ba693a"
+    "@dxos/invariant": "0.11.0",
+    "@dxos/keyboard": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/react-hooks": "0.11.0",
+    "@dxos/util": "0.11.0",
+    "@dxos/echo": "0.11.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -61,18 +59,18 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
+    "vite": "^8.1.4",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AttentionProvider/AttentionProvider.stories.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { withAttention } from '../../testing';
-import { useAttentionAttributes } from './AttentionProvider';
+import { useAttentionAttributes } from './attention-context';
 
 const Attendable = ({ id }: { id: string }) => {
   const attentionAttrs = useAttentionAttributes(id);

package/src/components/AttentionProvider/AttentionProvider.tsx

@@ -3,7 +3,6 @@
 //
 
 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, {
@@ -13,9 +12,6 @@ import React, {
   forwardRef,
   useCallback,
   useContext,
-  useEffect,
-  useMemo,
-  useState,
 } from 'react';
 
 import { log } from '@dxos/log';
@@ -23,78 +19,8 @@ import { useDefaultValue } from '@dxos/react-hooks';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
-import { type Attention, AttentionManager, getAttendables } from '../../attention';
-
-const ATTENTION_NAME = 'Attention';
-const ATTENDABLE_ATTRIBUTE = 'data-attendable-id';
-const ATTENTION_SOURCE_ATTRIBUTE = 'data-w-attention-source';
-
-type AttentionContextValue = {
-  attention: AttentionManager;
-};
-
-const [AttentionContextProvider, useAttentionContext] = createContext<AttentionContextValue>(ATTENTION_NAME, {
-  attention: undefined as unknown as AttentionManager,
-});
-
-const UNKNOWN_ATTENDABLE = { hasAttention: false, isAncestor: false, isRelated: false } as Attention;
-
-/**
- * Subscribe to the attention state for a qualified graph ID.
- */
-// TODO(burdon): Unify with seleciton and change to contextId?
-const useAttention = (attendableId?: string): Attention => {
-  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]);
-
-  return state;
-};
-
-const useAttended = () => {
-  const { attention } = useAttentionContext(ATTENTION_NAME);
-  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.
- */
-const useAttentionAttributes = (attendableId?: string) => {
-  const { hasAttention } = useAttention(attendableId);
-  return useMemo(() => {
-    const attributes: Record<string, string | undefined> = { [ATTENDABLE_ATTRIBUTE]: attendableId };
-    if (hasAttention) {
-      attributes[ATTENTION_SOURCE_ATTRIBUTE] = 'true';
-    }
-
-    return attributes;
-  }, [attendableId, hasAttention]);
-};
+import { ATTENDABLE_SELECTOR, AttentionManager, getAttendables } from '../../types/Attention';
+import { AttentionContextProvider, useAttentionAttributes } from './attention-context';
 
 type RootAttentionProviderProps = PropsWithChildren<{
   attention?: AttentionManager;
@@ -111,7 +37,7 @@ const RootAttentionProvider = ({ children, attention: propsAttention, onChange }
       log('focus', { related: event.relatedTarget, target: event.target });
 
       const selector = [
-        '[data-attendable-id]',
+        ATTENDABLE_SELECTOR,
         ...Array.from(document.querySelectorAll('[aria-controls]')).map(
           (el) => `[id="${el.getAttribute('aria-controls')}"]`,
         ),
@@ -154,7 +80,6 @@ const AttendableContainer = forwardRef<HTMLDivElement, AttendableContainerProps>
     const Comp = asChild ? Slot : Primitive.div;
     return (
       <Comp
-        role='none'
         {...props}
         {...attentionAttrs}
         className={mx('dx-attention-surface', props.tabIndex === 0 && 'dx-focus-ring-inset-over-all', classNames)}
@@ -166,11 +91,4 @@ const AttendableContainer = forwardRef<HTMLDivElement, AttendableContainerProps>
   },
 );
 
-export {
-  AttendableContainer,
-  RootAttentionProvider,
-  useAttended,
-  useAttention,
-  useAttentionAttributes,
-  useAttentionContext,
-};
+export { AttendableContainer, RootAttentionProvider };

package/src/components/AttentionProvider/attention-context.ts

@@ -0,0 +1,81 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { useEffect, useMemo, useState } from 'react';
+
+import { ATTENDABLE_ATTRIBUTE, type Attention, AttentionManager } from '../../types/Attention';
+
+// Kept out of `AttentionProvider.tsx`: react-refresh only fast-refreshes a module whose exports are
+// all components, so the context and hooks exported beside them force a full page reload on every edit.
+
+export const ATTENTION_NAME = 'Attention';
+export const ATTENTION_SOURCE_ATTRIBUTE = 'data-w-attention-source';
+
+export type AttentionContextValue = {
+  attention: AttentionManager;
+};
+
+export const [AttentionContextProvider, useAttentionContext] = createContext<AttentionContextValue>(ATTENTION_NAME, {
+  attention: undefined as unknown as AttentionManager,
+});
+
+export const UNKNOWN_ATTENDABLE = { hasAttention: false, isAncestor: false, isRelated: false } as Attention;
+
+/**
+ * Subscribe to the attention state for a qualified graph ID.
+ */
+// TODO(burdon): Unify with selection state and change to contextId?
+export const useAttention = (attendableId?: string): Attention => {
+  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]);
+
+  return state;
+};
+
+export const useAttended = () => {
+  const { attention } = useAttentionContext(ATTENTION_NAME);
+  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.
+ */
+export const useAttentionAttributes = (attendableId?: string) => {
+  const { hasAttention } = useAttention(attendableId);
+  return useMemo(() => {
+    const attributes: Record<string, string | undefined> = { [ATTENDABLE_ATTRIBUTE]: attendableId };
+    if (hasAttention) {
+      attributes[ATTENTION_SOURCE_ATTRIBUTE] = 'true';
+    }
+
+    return attributes;
+  }, [attendableId, hasAttention]);
+};

package/src/components/AttentionProvider/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export { useAttended, useAttention, useAttentionAttributes, useAttentionContext } from './attention-context';
+
 export * from './AttentionProvider';

package/src/components/ViewStateProvider/ViewStateProvider.test.tsx

@@ -7,13 +7,15 @@ import { act, renderHook } from '@testing-library/react';
 import React, { type PropsWithChildren } from 'react';
 import { describe, test } from 'vitest';
 
-import { ViewStateManager, createDefaultBackends } from '../../view-state';
-import { ViewStateProvider, useSelection, useSelectionActions } from './ViewStateProvider';
+import { createDefaultBackends } from '../../core';
+import { ViewState } from '../../types';
+import { useSelection, useSelectionActions } from './view-state-hooks';
+import { ViewStateProvider } from './ViewStateProvider';
 
 describe('useSelection / useSelectionActions', () => {
   test('single select updates the resolved value', ({ expect }) => {
     const registry = Registry.make();
-    const manager = new ViewStateManager({ registry, backends: createDefaultBackends(registry) });
+    const manager = new ViewState.Manager({ registry, backends: createDefaultBackends(registry) });
     const Wrapper = wrapper(manager, registry);
     const { result: value } = renderHook(() => useSelection('ctx', 'single'), { wrapper: Wrapper });
     const { result: actions } = renderHook(() => useSelectionActions('ctx'), { wrapper: Wrapper });
@@ -24,7 +26,7 @@ describe('useSelection / useSelectionActions', () => {
 
   test('toggle within multi selection', ({ expect }) => {
     const registry = Registry.make();
-    const manager = new ViewStateManager({ registry, backends: createDefaultBackends(registry) });
+    const manager = new ViewState.Manager({ registry, backends: createDefaultBackends(registry) });
     const Wrapper = wrapper(manager, registry);
     const { result: value } = renderHook(() => useSelection('ctx', 'multi'), { wrapper: Wrapper });
     const { result: actions } = renderHook(() => useSelectionActions('ctx'), { wrapper: Wrapper });
@@ -37,7 +39,7 @@ describe('useSelection / useSelectionActions', () => {
 });
 
 const wrapper =
-  (manager: ViewStateManager, registry: Registry.Registry) =>
+  (manager: ViewState.Manager, registry: Registry.Registry) =>
   ({ children }: PropsWithChildren) => (
     <RegistryContext.Provider value={registry}>
       <ViewStateProvider manager={manager}>{children}</ViewStateProvider>

package/src/components/ViewStateProvider/ViewStateProvider.tsx

@@ -3,127 +3,23 @@
 //
 
 import { RegistryContext } from '@effect-atom/atom-react';
-import { createContext } from '@radix-ui/react-context';
-import React, { type PropsWithChildren, useContext, useEffect, useMemo, useState } from 'react';
+import React, { type PropsWithChildren, useContext } from 'react';
 
-import { invariant } from '@dxos/invariant';
 import { useDefaultValue } from '@dxos/react-hooks';
 
-import {
-  type SelectionMode,
-  type SelectionResult,
-  resolveSelection,
-  selectionAspect,
-  toggleSelection,
-} from '../../selection';
-import { type AspectDef, ViewStateManager, createDefaultBackends } from '../../view-state';
-
-const VIEW_STATE_NAME = 'ViewState';
-
-type ViewStateContextValue = { manager?: ViewStateManager };
-
-// Default value lets consumers render outside a provider (isolated stories/tests) without throwing;
-// `manager` reads as `undefined` and hooks fall back to aspect defaults / no-op actions.
-const [ViewStateContextProvider, useViewStateContext] = createContext<ViewStateContextValue>(VIEW_STATE_NAME, {
-  manager: undefined,
-});
+import { createDefaultBackends } from '../../core';
+import { ViewState } from '../../types';
+import { ViewStateContextProvider } from './view-state-hooks';
 
 /** Provides the per-context UI state manager. Replaces the former `SelectionProvider`. */
 export const ViewStateProvider = ({
   children,
   manager: managerProp,
-}: PropsWithChildren<{ manager?: ViewStateManager }>) => {
+}: PropsWithChildren<{ manager?: ViewState.Manager }>) => {
   const registry = useContext(RegistryContext);
   const manager = useDefaultValue(
     managerProp,
-    () => new ViewStateManager({ registry, backends: createDefaultBackends(registry) }),
+    () => new ViewState.Manager({ registry, backends: createDefaultBackends(registry) }),
   );
   return <ViewStateContextProvider manager={manager}>{children}</ViewStateContextProvider>;
 };
-
-/** Access the underlying ViewStateManager from context. Throws when used outside a `ViewStateProvider`. */
-export const useViewStateManager = (): ViewStateManager => {
-  const { manager } = useViewStateContext(VIEW_STATE_NAME);
-  invariant(manager, 'useViewStateManager() requires a ViewStateProvider ancestor.');
-  return manager;
-};
-
-/** Access the ViewStateManager if a provider is present; `undefined` otherwise (e.g. isolated stories/tests). */
-export const useViewStateManagerOptional = (): ViewStateManager | undefined => {
-  const { manager } = useViewStateContext(VIEW_STATE_NAME);
-  return manager;
-};
-
-/** Reactive read of an aspect value for a context; yields the aspect default when unset or unprovided. */
-export const useViewState = <T,>(aspect: AspectDef<T>, contextId?: string): T => {
-  const { manager } = useViewStateContext(VIEW_STATE_NAME);
-  const [value, setValue] = useState<T>(() =>
-    contextId && manager ? manager.get(aspect, contextId) : aspect.defaultValue(),
-  );
-  useEffect(() => {
-    if (!contextId || !manager) {
-      setValue(aspect.defaultValue());
-      return;
-    }
-    setValue(manager.get(aspect, contextId));
-    return manager.subscribe(aspect, contextId, setValue);
-  }, [manager, aspect, contextId]);
-  return value;
-};
-
-export type UseViewStateActions<T> = {
-  set: (value: T) => void;
-  update: (fn: (prev: T) => T) => void;
-  clear: () => void;
-};
-
-export const useViewStateActions = <T,>(aspect: AspectDef<T>, contextId?: string): UseViewStateActions<T> => {
-  const { manager } = useViewStateContext(VIEW_STATE_NAME);
-  return useMemo<UseViewStateActions<T>>(
-    () => ({
-      set: (value) => {
-        if (contextId) {
-          manager?.set(aspect, contextId, value);
-        }
-      },
-      update: (fn) => {
-        if (contextId) {
-          manager?.update(aspect, contextId, fn);
-        }
-      },
-      clear: () => {
-        if (contextId) {
-          manager?.set(aspect, contextId, aspect.defaultValue());
-        }
-      },
-    }),
-    [manager, aspect, contextId],
-  );
-};
-
-/** Resolved selection value for `contextId` in the requested `mode` (default `multi`). */
-export const useSelection = <T extends SelectionMode>(contextId?: string, mode: T = 'multi' as T): SelectionResult<T> =>
-  resolveSelection(useViewState(selectionAspect, contextId), mode);
-
-export type UseSelectionActions = {
-  single: (id: string) => void;
-  multi: (ids: string[]) => void;
-  range: (from: string, to: string) => void;
-  toggle: (id: string) => void;
-  clear: () => void;
-};
-
-/** Selection mutators for a single context, built on the generic ViewState actions. */
-export const useSelectionActions = (contextId?: string): UseSelectionActions => {
-  const { update, clear } = useViewStateActions(selectionAspect, contextId);
-  return useMemo<UseSelectionActions>(
-    () => ({
-      single: (id) => update(() => ({ mode: 'single', id })),
-      multi: (ids) => update(() => ({ mode: 'multi', ids: [...ids] })),
-      range: (from, to) => update(() => ({ mode: 'range', from, to })),
-      toggle: (id) => update((prev) => toggleSelection(prev, id)),
-      clear,
-    }),
-    [update, clear],
-  );
-};

package/src/components/ViewStateProvider/index.ts

@@ -2,4 +2,13 @@
 // Copyright 2026 DXOS.org
 //
 
+export {
+  useManager,
+  useManagerOptional,
+  useSelection,
+  useSelectionActions,
+  useViewState,
+  useViewStateActions,
+} from './view-state-hooks';
+
 export * from './ViewStateProvider';

package/src/components/ViewStateProvider/view-state-hooks.ts

@@ -0,0 +1,115 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { useEffect, useMemo, useState } from 'react';
+
+import { invariant } from '@dxos/invariant';
+
+import { Selection, ViewState } from '../../types';
+
+// Kept out of `ViewStateProvider.tsx`: react-refresh only fast-refreshes a module whose exports are
+// all components, so the context and hooks exported beside it force a full page reload on every edit.
+
+export const VIEW_STATE_NAME = 'ViewState';
+
+export type ViewStateContextValue = { manager?: ViewState.Manager };
+
+// Default value lets consumers render outside a provider (isolated stories/tests) without throwing;
+// `manager` reads as `undefined` and hooks fall back to aspect defaults / no-op actions.
+export const [ViewStateContextProvider, useViewStateContext] = createContext<ViewStateContextValue>(VIEW_STATE_NAME, {
+  manager: undefined,
+});
+
+/** Access the underlying Manager from context. Throws when used outside a `ViewStateProvider`. */
+export const useManager = (): ViewState.Manager => {
+  const { manager } = useViewStateContext(VIEW_STATE_NAME);
+  invariant(manager, 'useManager() requires a ViewStateProvider ancestor.');
+  return manager;
+};
+
+/** Access the Manager if a provider is present; `undefined` otherwise (e.g. isolated stories/tests). */
+export const useManagerOptional = (): ViewState.Manager | undefined => {
+  const { manager } = useViewStateContext(VIEW_STATE_NAME);
+  return manager;
+};
+
+/** Reactive read of an aspect value for a context; yields the aspect default when unset or unprovided. */
+export const useViewState = <T, Encoded = T>(aspect: ViewState.Aspect<T, Encoded>, contextId?: string): T => {
+  const { manager } = useViewStateContext(VIEW_STATE_NAME);
+  const [value, setValue] = useState<T>(() =>
+    contextId && manager ? manager.get(aspect, contextId) : aspect.defaultValue(),
+  );
+  useEffect(() => {
+    if (!contextId || !manager) {
+      setValue(aspect.defaultValue());
+      return;
+    }
+    setValue(manager.get(aspect, contextId));
+    return manager.subscribe(aspect, contextId, setValue);
+  }, [manager, aspect, contextId]);
+  return value;
+};
+
+export type UseViewStateActions<T> = {
+  set: (value: T) => void;
+  update: (fn: (prev: T) => T) => void;
+  clear: () => void;
+};
+
+export const useViewStateActions = <T, Encoded = T>(
+  aspect: ViewState.Aspect<T, Encoded>,
+  contextId?: string,
+): UseViewStateActions<T> => {
+  const { manager } = useViewStateContext(VIEW_STATE_NAME);
+  return useMemo<UseViewStateActions<T>>(
+    () => ({
+      set: (value) => {
+        if (contextId) {
+          manager?.set(aspect, contextId, value);
+        }
+      },
+      update: (fn) => {
+        if (contextId) {
+          manager?.update(aspect, contextId, fn);
+        }
+      },
+      clear: () => {
+        if (contextId) {
+          manager?.set(aspect, contextId, aspect.defaultValue());
+        }
+      },
+    }),
+    [manager, aspect, contextId],
+  );
+};
+
+/** Resolved selection value for `contextId` in the requested `mode` (default `multi`). */
+export const useSelection = <T extends Selection.SelectionMode>(
+  contextId?: string,
+  mode: T = 'multi' as T,
+): Selection.Result<T> => Selection.resolve(useViewState(Selection.aspect, contextId), mode);
+
+export type UseSelectionActions = {
+  single: (id: string) => void;
+  multi: (ids: string[]) => void;
+  range: (from: string, to: string) => void;
+  toggle: (id: string) => void;
+  clear: () => void;
+};
+
+/** Selection mutators for a single context, built on the generic ViewState actions. */
+export const useSelectionActions = (contextId?: string): UseSelectionActions => {
+  const { update, clear } = useViewStateActions(Selection.aspect, contextId);
+  return useMemo<UseSelectionActions>(
+    () => ({
+      single: (id) => update(() => ({ mode: 'single', id })),
+      multi: (ids) => update(() => ({ mode: 'multi', ids: [...ids] })),
+      range: (from, to) => update(() => ({ mode: 'range', from, to })),
+      toggle: (id) => update((prev) => Selection.toggle(prev, id)),
+      clear,
+    }),
+    [update, clear],
+  );
+};

package/src/{view-state → core}/backends.test.ts

@@ -2,14 +2,14 @@
 // Copyright 2026 DXOS.org
 //
 
-import { Registry } from '@effect-atom/atom-react';
+import { Registry } from '@effect-atom/atom';
 import * as Schema from 'effect/Schema';
 import { afterEach, describe, test } from 'vitest';
 
+import { ViewState } from '../types';
 import { LocalBackend } from './backends';
-import { ViewStateManager, defineViewState } from './view-state';
 
-const Editor = defineViewState({
+const Editor = ViewState.define({
   key: 'editor',
   backend: 'local',
   schema: Schema.Struct({ scrollTo: Schema.optional(Schema.Number) }).pipe(Schema.mutable),
@@ -43,7 +43,7 @@ describe('LocalBackend', () => {
     const storage = fakeStorage();
     const local = new LocalBackend({ registry, storage });
     disposables.push(local);
-    const manager = new ViewStateManager({ registry, backends: { memory: local, local } });
+    const manager = new ViewState.Manager({ registry, backends: { memory: local, local } });
     return { manager, storage };
   };
 
@@ -87,7 +87,7 @@ describe('LocalBackend', () => {
     const registry = Registry.make();
     const storage = fakeStorage();
     const local = new LocalBackend({ registry, storage });
-    const manager = new ViewStateManager({ registry, backends: { memory: local, local } });
+    const manager = new ViewState.Manager({ registry, backends: { memory: local, local } });
 
     // Touch the context so its atom is registered and observed by the storage listener.
     const key = 'dxos:view-state:editor:doc-4';