@dxos/react-list 0.1.5

package/dist/src/components/ListPrimitive/ListPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListPrimitive.stories.js","sourceRoot":"","sources":["../../../../src/components/ListPrimitive/ListPrimitive.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,mDAA6E;AAE7E,kBAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,6BAAa;IACxB,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA+C,EAAE,EAAE;IACnE,OAAO,CACL,wCAAM,SAAS,EAAC,gCAAgC;QAC9C,8BAAC,6BAAa,OAAK,IAAI,GAAI,CACtB,CACR,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AAC7E,eAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,SAAS;IACb,KAAK,EAAE;QACL,OAAO,EAAE;YACP,KAAK,EAAE,OAAO;SACf;QACD,OAAO,EAAE;YACP,KAAK,EAAE,QAAQ;YACf,WAAW,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;SAC/B;QACD,OAAO,EAAE;YACP,KAAK,EAAE,QAAQ;SAChB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,WAAW;SACnB;KACF;CACF,CAAC"}

package/dist/src/components/ListPrimitive/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ListPrimitive';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/ListPrimitive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ListPrimitive/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC"}

package/dist/src/components/ListPrimitive/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ListPrimitive"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/ListPrimitive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/ListPrimitive/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,kDAAgC"}

package/dist/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './List';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

package/dist/src/components/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./List"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,yCAAuB"}

package/dist/src/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePropStatefully';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC"}

package/dist/src/hooks/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./usePropStatefully"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,sDAAoC"}

package/dist/src/hooks/usePropStatefully.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+/**
+ * @deprecated
+ */
+export declare const usePropStatefully: <T>(propsValue: T, equivalentPredicate?: ((a: T, b: T) => boolean) | undefined) => [T, Dispatch<SetStateAction<T>>, string];
+//# sourceMappingURL=usePropStatefully.d.ts.map

package/dist/src/hooks/usePropStatefully.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePropStatefully.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePropStatefully.ts"],"names":[],"mappings":"AAIA,OAAO,EAA+B,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAM9E;;GAEG;AACH,eAAO,MAAM,iBAAiB,4DAEU,OAAO,0DAiB9C,CAAC"}

package/dist/src/hooks/usePropStatefully.js

@@ -0,0 +1,30 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePropStatefully = void 0;
+const react_1 = require("react");
+const react_uikit_1 = require("@dxos/react-uikit");
+const isEqual = (a, b) => a === b;
+/**
+ * @deprecated
+ */
+const usePropStatefully = (propsValue, equivalentPredicate) => {
+    const [value, setValue] = (0, react_1.useState)(propsValue);
+    const [valueSession, setValueSession] = (0, react_1.useState)((0, react_uikit_1.randomString)());
+    const mounted = (0, react_1.useRef)(false);
+    const predicate = equivalentPredicate !== null && equivalentPredicate !== void 0 ? equivalentPredicate : (isEqual);
+    (0, react_1.useEffect)(() => {
+        if (mounted.current && !predicate(propsValue, value)) {
+            setValue(propsValue);
+            setValueSession((0, react_uikit_1.randomString)());
+        }
+        else {
+            mounted.current = true;
+        }
+    }, [propsValue]);
+    return [value, setValue, valueSession];
+};
+exports.usePropStatefully = usePropStatefully;
+//# sourceMappingURL=usePropStatefully.js.map

package/dist/src/hooks/usePropStatefully.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePropStatefully.js","sourceRoot":"","sources":["../../../src/hooks/usePropStatefully.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAA8E;AAE9E,mDAAiD;AAEjD,MAAM,OAAO,GAAG,CAAI,CAAI,EAAE,CAAI,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;AAE3C;;GAEG;AACI,MAAM,iBAAiB,GAAG,CAC/B,UAAa,EACb,mBAA6C,EACH,EAAE;IAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAI,UAAU,CAAC,CAAC;IAClD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAA,0BAAY,GAAE,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,IAAI,OAAU,CAAA,CAAC;IAEpD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE;YACpD,QAAQ,CAAC,UAAU,CAAC,CAAC;YACrB,eAAe,CAAC,IAAA,0BAAY,GAAE,CAAC,CAAC;SACjC;aAAM;YACL,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;SACxB;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;AACzC,CAAC,CAAC;AAnBW,QAAA,iBAAiB,qBAmB5B"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './model';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,22 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./model"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,+CAA6B;AAC7B,0CAAwB"}

package/dist/src/model.d.ts

@@ -0,0 +1,3 @@
+export declare const LIST_TYPE = "dxos:type/list";
+export declare const LIST_ITEM_TYPE = "dxos:type/list-item";
+//# sourceMappingURL=model.d.ts.map

package/dist/src/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../src/model.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,mBAAmB,CAAC;AAC1C,eAAO,MAAM,cAAc,wBAAwB,CAAC"}

package/dist/src/model.js

@@ -0,0 +1,9 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LIST_ITEM_TYPE = exports.LIST_TYPE = void 0;
+exports.LIST_TYPE = 'dxos:type/list';
+exports.LIST_ITEM_TYPE = 'dxos:type/list-item';
+//# sourceMappingURL=model.js.map

package/dist/src/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/model.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,SAAS,GAAG,gBAAgB,CAAC;AAC7B,QAAA,cAAc,GAAG,qBAAqB,CAAC"}

package/dist/src/testing/index.d.ts

@@ -0,0 +1,2 @@
+export * from './templateForComponent';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,wBAAwB,CAAC"}

package/dist/src/testing/index.js

@@ -0,0 +1,21 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./templateForComponent"), exports);
+//# sourceMappingURL=index.js.map

package/dist/src/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/testing/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,yDAAuC"}

package/dist/src/testing/templateForComponent.d.ts

@@ -0,0 +1,4 @@
+import { Story } from '@storybook/react';
+import React, { FC } from 'react';
+export declare const templateForComponent: <P extends {}>(Component: React.FC<P>) => (props: P) => Story<P>;
+//# sourceMappingURL=templateForComponent.d.ts.map

package/dist/src/testing/templateForComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"templateForComponent.d.ts","sourceRoot":"","sources":["../../../src/testing/templateForComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAkB,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,oBAAoB,kEAQ9B,CAAC"}

package/dist/src/testing/templateForComponent.js

@@ -0,0 +1,18 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.templateForComponent = void 0;
+const react_1 = __importDefault(require("react"));
+const templateForComponent = (Component) => (props) => {
+    const template = (args) => react_1.default.createElement(Component, { ...args });
+    const story = template.bind({});
+    story.args = props;
+    return story;
+};
+exports.templateForComponent = templateForComponent;
+//# sourceMappingURL=templateForComponent.js.map

package/dist/src/testing/templateForComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"templateForComponent.js","sourceRoot":"","sources":["../../../src/testing/templateForComponent.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAGF,kDAAkC;AAE3B,MAAM,oBAAoB,GAC/B,CAAe,SAAgB,EAAE,EAAE,CACnC,CAAC,KAAQ,EAAY,EAAE;IACrB,MAAM,QAAQ,GAAqC,CAAC,IAAI,EAAE,EAAE,CAAC,8BAAC,SAAS,OAAK,IAAI,GAAI,CAAC;IAErF,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAChC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;IACnB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AARS,QAAA,oBAAoB,wBAQ7B"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@dxos/react-list",
+  "version": "0.1.5",
+  "description": "A list editing experience component for DXOS.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@dxos/client": "0.1.6",
+    "@dxos/config": "0.1.6",
+    "@dxos/object-model": "0.1.6",
+    "@dxos/react-appkit": "0.1.6",
+    "@dxos/react-async": "0.1.6",
+    "@dxos/react-client": "0.1.6",
+    "@dxos/react-ui": "0.1.6",
+    "@dxos/react-uikit": "0.1.6",
+    "classnames": "^2.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@dxos/async": "0.1.6",
+    "@dxos/debug": "0.1.6",
+    "@dxos/vite-plugin": "0.1.6",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "phosphor-react": "^1.4.1"
+  },
+  "peerDependencies": {
+    "phosphor-react": "^1.4.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/List/List.stories.tsx

@@ -0,0 +1,123 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React, { useMemo, useState } from 'react';
+
+import { Trigger } from '@dxos/async';
+import { Client, Invitation, PublicKey, TestClientBuilder } from '@dxos/client';
+import { raise } from '@dxos/debug';
+import { ObjectModel } from '@dxos/object-model';
+import { useAsyncEffect } from '@dxos/react-async';
+import { ClientProvider, useSelection, useSpace } from '@dxos/react-client';
+import { Loading } from '@dxos/react-uikit';
+
+import { LIST_TYPE } from '../../model';
+import { templateForComponent } from '../../testing';
+import { List, ListProps } from './List';
+
+// TODO(wittjosiah): @dxos/log.
+const log = console.log;
+
+export default {
+  title: 'react-list/List',
+  component: List,
+  argTypes: {}
+};
+
+const Template = (args: Omit<ListProps, 'itemId' | 'spaceKey'> & { spaceKey?: PublicKey; id?: number }) => {
+  const space = useSpace(args.spaceKey);
+  const [item] = useSelection(space?.database.select({ type: LIST_TYPE })) ?? [];
+
+  useAsyncEffect(async () => {
+    if (args.id === 0) {
+      await space?.database.createItem({
+        model: ObjectModel,
+        type: LIST_TYPE
+      });
+    }
+  }, [space]);
+
+  return (
+    <main className='max-is-lg mli-auto pli-7 mbs-7'>
+      {item && space ? <List {...args} itemId={item.id} spaceKey={space?.key} /> : <Loading label='Loading…' />}
+    </main>
+  );
+};
+
+export const Default = templateForComponent(Template)({});
+Default.args = {};
+Default.decorators = [
+  // TODO(wittjosiah): Factor out.
+  (Story) => {
+    const n = 2;
+    const clients = useMemo(() => {
+      const testBuilder = new TestClientBuilder();
+      return [...Array(n)].map(() => new Client({ services: testBuilder.createClientServicesHost() }));
+    }, []);
+    const [spaceKey, setSpaceKey] = useState<PublicKey>();
+
+    useAsyncEffect(async () => {
+      await Promise.all(clients.map((client) => client.initialize()));
+      log('initialized');
+
+      await Promise.all(clients.map((client) => client.halo.createProfile()));
+      log('identity created');
+
+      const space = await clients[0].echo.createSpace();
+      log('space created');
+
+      await Promise.all(
+        clients.slice(1).map(async (client) => {
+          const success1 = new Trigger<Invitation>();
+          const success2 = new Trigger<Invitation>();
+
+          const observable1 = await space.createInvitation({ type: Invitation.Type.INTERACTIVE_TESTING });
+          log('invitation created');
+
+          const observable2 = await client.echo.acceptInvitation(observable1.invitation!);
+          log('invitation accepted');
+
+          observable1.subscribe({
+            onSuccess: (invitation) => {
+              success1.wake(invitation);
+              log('invitation success1');
+            },
+            onError: (err) => raise(err)
+          });
+
+          observable2.subscribe({
+            onSuccess: (invitation: Invitation) => {
+              success2.wake(invitation);
+              log('invitation success2');
+            },
+            onError: (err: Error) => raise(err)
+          });
+
+          await Promise.all([success1.wait(), success2.wait()]);
+        })
+      );
+
+      setSpaceKey(space.key);
+
+      return () => {
+        void Promise.all(clients.map((client) => client.destroy()));
+      };
+    }, clients);
+
+    if (!spaceKey) {
+      return <Loading label='Loading…' />;
+    }
+
+    return (
+      <div className='flex'>
+        {clients.map((client, index) => (
+          <ClientProvider key={index} client={client} fallback={<Loading label='Loading…' />}>
+            <Story args={{ spaceKey, id: index }} />
+          </ClientProvider>
+        ))}
+      </div>
+    );
+  }
+];

package/src/components/List/List.tsx

@@ -0,0 +1,111 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import React, { useCallback } from 'react';
+
+import { Item, PublicKey, Space } from '@dxos/client';
+import { ObjectModel } from '@dxos/object-model';
+import { useSelection, useSpace } from '@dxos/react-client';
+import { Loading } from '@dxos/react-ui';
+import { useTranslation } from '@dxos/react-uikit';
+
+import { LIST_ITEM_TYPE } from '../../model';
+import {
+  ListPrimitive,
+  ListAction,
+  ListItems,
+  isListItemChangedAction,
+  isListItemDeletedAction,
+  isListItemCreatedAction,
+  ListItemProps,
+  ListPrimitiveProps
+} from '../ListPrimitive';
+
+interface ListLoadedProps {
+  space: Space;
+  list: Item<ObjectModel>;
+  listItems: Item<ObjectModel>[];
+}
+
+export interface ListProps {
+  spaceKey: PublicKey;
+  itemId: Item<ObjectModel>['id'];
+}
+
+const ListLoaded = ({ space, list, listItems: propsListItems }: ListLoadedProps) => {
+  const listItems = useSelection(list?.select().children().filter({ type: LIST_ITEM_TYPE })) ?? propsListItems;
+
+  const onAction = useCallback(
+    async (action: ListAction) => {
+      if (isListItemDeletedAction(action)) {
+        const subject = space.database.getItem(action.deleted.id);
+        // TODO(thure): use Echo’s native deletion
+        return subject?.model.set('annotations.deleted', true);
+      } else if (isListItemCreatedAction(action)) {
+        // do nothing?
+      } else if (isListItemChangedAction(action)) {
+        const subject = space.database.getItem(action.listItemId);
+        return Promise.all(
+          (Object.keys(action.next) as (keyof ListItemProps)[]).map((prop) => {
+            return subject?.model.set(prop, action.next[prop]);
+          })
+        );
+      } else {
+        return Promise.all(
+          (Object.keys(action.next) as (keyof ListPrimitiveProps)[]).map((prop) => {
+            return list?.model.set(prop, action.next[prop]);
+          })
+        );
+      }
+    },
+    [list, listItems]
+  );
+
+  const createListItemId = useCallback(async () => {
+    const listItem = await space?.database.createItem({
+      model: ObjectModel,
+      type: LIST_ITEM_TYPE,
+      parent: list.id
+    });
+    return listItem.id;
+  }, [space]);
+
+  return (
+    <ListPrimitive
+      {...{
+        id: list.id,
+        title: list.model.get('title') ?? '',
+        description: list.model.get('description') ?? '',
+        items: (listItems ?? [])
+          // TODO(thure): use Echo’s native deletion
+          .filter((item) => !item.model.get('annotations.deleted'))
+          .reduce((acc: ListItems, item) => {
+            acc[item.id] = {
+              title: item.model.get('title'),
+              description: item.model.get('description'),
+              annotations: item.model.get('annotations')
+            };
+            return acc;
+          }, {}),
+        onAction,
+        createListItemId
+      }}
+    />
+  );
+};
+
+export const List = ({ spaceKey, itemId }: ListProps) => {
+  const { t } = useTranslation('uikit');
+
+  const space = useSpace(spaceKey);
+  const list = (useSelection(space?.database.select({ id: itemId })) ?? [])[0];
+  const listItems = useSelection(list?.select().children().filter({ type: LIST_ITEM_TYPE }));
+
+  // TODO(thure): this should become `Suspense` when the above hooks support it
+  return space && list && listItems ? (
+    <ListLoaded {...{ space, list, listItems }} />
+  ) : (
+    <Loading label={t('generic loading label')} />
+  );
+};

package/src/components/List/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './List';

package/src/components/ListPrimitive/ListPrimitive.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+import React from 'react';
+
+import { templateForComponent } from '../../testing';
+import { ListPrimitive, ListPrimitiveComponentProps } from './ListPrimitive';
+
+export default {
+  title: 'react-list/ListPrimitive',
+  component: ListPrimitive,
+  argTypes: {}
+};
+
+const Template = (args: Omit<ListPrimitiveComponentProps, 'item'>) => {
+  return (
+    <main className='max-is-lg mli-auto pli-7 mbs-7'>
+      <ListPrimitive {...args} />
+    </main>
+  );
+};
+
+export const Default = templateForComponent(Template)({ id: '', items: {} });
+Default.args = {
+  id: 'x123456',
+  items: {
+    x234567: {
+      title: 'Apple'
+    },
+    x345678: {
+      title: 'Grapes',
+      annotations: { state: 'done' }
+    },
+    x456789: {
+      title: 'Banana'
+    },
+    x567890: {
+      title: 'Courgette'
+    }
+  }
+};