@dxos/plugin-wnfs 0.7.4-staging.f7e8224 → 0.7.5-labs.5f04cf6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-wnfs",
-  "version": "0.7.4-staging.f7e8224",
+  "version": "0.7.5-labs.5f04cf6",
   "description": "WNFS file management plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -11,10 +11,6 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs"
     },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs"
-    },
     "./types": {
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs"
@@ -23,9 +19,6 @@
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ],
       "types": [
         "dist/types/src/types/index.d.ts"
       ]
@@ -39,24 +32,34 @@
     "@codemirror/language": "^6.10.3",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",
+    "@ipld/car": "^5.3.3",
     "blockstore-core": "^5.0.1",
     "blockstore-idb": "^2.0.0",
+    "debounce": "^2.2.0",
+    "effect": "^3.12.3",
+    "idb-keyval": "^6.2.1",
     "interface-blockstore": "^5.2.10",
+    "it-all": "^3.0.6",
     "multiformats": "^13.2.2",
+    "react-dropzone": "^14.2.3",
     "uint8arrays": "^5.1.0",
     "wnfs": "0.2.2",
-    "@dxos/app-framework": "0.7.4-staging.f7e8224",
-    "@dxos/crypto": "0.7.4-staging.f7e8224",
-    "@dxos/echo-schema": "0.7.4-staging.f7e8224",
-    "@dxos/invariant": "0.7.4-staging.f7e8224",
-    "@dxos/local-storage": "0.7.4-staging.f7e8224",
-    "@dxos/log": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-space": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-markdown": "0.7.4-staging.f7e8224",
-    "@dxos/plugin-client": "0.7.4-staging.f7e8224",
-    "@dxos/react-client": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-mosaic": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-card": "0.7.4-staging.f7e8224"
+    "@dxos/app-framework": "0.7.5-labs.5f04cf6",
+    "@dxos/crypto": "0.7.5-labs.5f04cf6",
+    "@dxos/effect": "0.7.5-labs.5f04cf6",
+    "@dxos/echo-schema": "0.7.5-labs.5f04cf6",
+    "@dxos/invariant": "0.7.5-labs.5f04cf6",
+    "@dxos/local-storage": "0.7.5-labs.5f04cf6",
+    "@dxos/log": "0.7.5-labs.5f04cf6",
+    "@dxos/plugin-space": "0.7.5-labs.5f04cf6",
+    "@dxos/plugin-client": "0.7.5-labs.5f04cf6",
+    "@dxos/react-client": "0.7.5-labs.5f04cf6",
+    "@dxos/plugin-markdown": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui-editor": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui-form": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui-stack": "0.7.5-labs.5f04cf6",
+    "@dxos/util": "0.7.5-labs.5f04cf6"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -65,17 +68,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-editor": "0.7.4-staging.f7e8224",
-    "@dxos/storybook-utils": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui-theme": "0.7.4-staging.f7e8224"
+    "@dxos/react-ui-theme": "0.7.5-labs.5f04cf6",
+    "@dxos/random": "0.7.5-labs.5f04cf6",
+    "@dxos/storybook-utils": "0.7.5-labs.5f04cf6"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.4-staging.f7e8224",
-    "@dxos/react-ui": "0.7.4-staging.f7e8224"
+    "@dxos/react-ui": "0.7.5-labs.5f04cf6",
+    "@dxos/react-ui-theme": "0.7.5-labs.5f04cf6"
   },
   "publishConfig": {
     "access": "public"

package/src/WnfsPlugin.tsx

@@ -2,101 +2,86 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FileCloud, type IconProps } from '@phosphor-icons/react';
-import React, { type Ref } from 'react';
+import { pipe } from 'effect';
 
-import { type PluginDefinition, isObject, resolvePlugin } from '@dxos/app-framework';
-import { invariant } from '@dxos/invariant';
-import { parseClientPlugin } from '@dxos/plugin-client';
-import { type DocumentType } from '@dxos/plugin-markdown/types';
-import { type Space, getSpace } from '@dxos/react-client/echo';
-import { isTileComponentProps } from '@dxos/react-ui-mosaic';
+import {
+  Capabilities,
+  Events,
+  chain,
+  contributes,
+  createIntent,
+  defineModule,
+  definePlugin,
+  oneOf,
+} from '@dxos/app-framework';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { type Space } from '@dxos/react-client/echo';
 
-import * as Blockstore from './blockstore';
-import { FileCard, FileMain, FileSection, FileSlide } from './components';
-import { image as imageExtension } from './extensions';
-import meta, { WNFS_PLUGIN } from './meta';
+import { Blockstore, FileUploader, IntentResolver, Markdown, ReactSurface, WnfsCapabilities } from './capabilities';
+import { meta, WNFS_PLUGIN } from './meta';
 import translations from './translations';
-import { FileType } from './types';
-import { type WnfsPluginProvides } from './types';
-import { upload } from './upload';
+import { FileType, WnfsAction } from './types';
 
-export const WnfsPlugin = (): PluginDefinition<WnfsPluginProvides> => {
-  let blockstore: Blockstore.MixedBlockstore | undefined;
-
-  return {
-    meta,
-    ready: async (plugins) => {
-      const client = resolvePlugin(plugins, parseClientPlugin)?.provides.client;
-      invariant(client);
-      const apiHost = client.config.values.runtime?.services?.edge?.url || 'http://localhost:8787';
-      blockstore = Blockstore.create(apiHost);
-      await blockstore.open();
-    },
-    provides: {
-      translations,
-      metadata: {
-        records: {
-          [FileType.typename]: {
+export const WnfsPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/blockstore`,
+      activatesOn: ClientEvents.ClientReady,
+      activate: Blockstore,
+    }),
+    defineModule({
+      id: `${meta.id}/module/instances`,
+      activatesOn: Events.Startup,
+      activate: () => {
+        const instances: WnfsCapabilities.Instances = {};
+        return contributes(WnfsCapabilities.Instances, instances);
+      },
+    }),
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/metadata`,
+      activatesOn: oneOf(Events.Startup, Events.SetupAppGraph),
+      activate: () =>
+        contributes(Capabilities.Metadata, {
+          id: FileType.typename,
+          metadata: {
+            creationSchema: WnfsAction.UploadFileSchema,
+            createObject: ({ file }: WnfsAction.UploadFileForm, { space }: { space: Space }) =>
+              pipe(createIntent(WnfsAction.Upload, { file, space }), chain(WnfsAction.Create, {})),
+            label: (object: any) => (object instanceof FileType ? object.name : undefined),
             placeholder: ['file title placeholder', { ns: WNFS_PLUGIN }],
-            icon: (props: IconProps) => <FileCloud {...props} />,
+            // TODO(wittjosiah): Would be nice if icon could change based on the type of the file.
+            icon: 'ph--file--regular',
           },
-        },
-      },
-      echo: {
-        system: [FileType],
-      },
-      // TODO(burdon): Add intent to upload file.
-      file: {
-        upload: async (file: File, space: Space) => {
-          if (!blockstore) {
-            throw new Error('Blockstore is not ready yet');
-          }
-
-          return await upload({ blockstore, file, space });
-        },
-      },
-      markdown: {
-        extensions: ({ document }: { document?: DocumentType }) => {
-          if (!blockstore) {
-            throw new Error('Blockstore is not ready yet');
-          }
-
-          if (document) {
-            const space = getSpace(document);
-            return space ? [imageExtension({ blockstore, space })] : [];
-          }
-
-          return [];
-        },
-      },
-      surface: {
-        component: ({ data, role, ...props }, forwardedRef) => {
-          switch (role) {
-            case 'main':
-              return data.active instanceof FileType ? <FileMain file={data.active} /> : null;
-            case 'slide':
-              return data.slide instanceof FileType ? <FileSlide file={data.slide} cover={false} /> : null;
-            case 'section':
-              return data.object instanceof FileType ? <FileSection file={data.object} /> : null;
-            case 'card': {
-              if (
-                isObject(data.content) &&
-                typeof data.content.id === 'string' &&
-                data.content.object instanceof FileType
-              ) {
-                const cardProps = { ...props, item: { id: data.content.id, object: data.content.object } };
-                return isTileComponentProps(cardProps) ? (
-                  <FileCard {...cardProps} ref={forwardedRef as Ref<HTMLDivElement>} />
-                ) : null;
-              }
-              break;
-            }
-          }
-
-          return null;
-        },
-      },
-    },
-  };
-};
+        }),
+    }),
+    defineModule({
+      id: `${meta.id}/module/schema`,
+      activatesOn: ClientEvents.SetupClient,
+      activate: () => contributes(ClientCapabilities.Schema, [FileType]),
+    }),
+    defineModule({
+      id: `${meta.id}/module/file-uploader`,
+      activatesOn: ClientEvents.ClientReady,
+      activate: FileUploader,
+    }),
+    defineModule({
+      id: `${meta.id}/module/markdown`,
+      activatesOn: Events.Startup,
+      activate: Markdown,
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.Startup,
+      activate: ReactSurface,
+    }),
+    defineModule({
+      id: `${meta.id}/module/intent-resolver`,
+      activatesOn: Events.SetupIntents,
+      activate: IntentResolver,
+    }),
+  ]);

package/src/blockstore.ts

@@ -2,11 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
+import { CarWriter } from '@ipld/car';
+import type { Block } from '@ipld/car/api';
 import { BaseBlockstore } from 'blockstore-core';
 import { IDBBlockstore } from 'blockstore-idb';
-import type { CID } from 'multiformats';
+import debounce from 'debounce';
+import * as IDB from 'idb-keyval';
+import all from 'it-all';
+import { CID } from 'multiformats';
+import * as Uint8Arrays from 'uint8arrays';
 
-import { storeName } from './common';
+import { storeName } from './helpers';
 
 export const create = (apiHost?: string) => {
   return new MixedBlockstore(apiHost);
@@ -18,29 +24,48 @@ export const create = (apiHost?: string) => {
  */
 export class MixedBlockstore extends BaseBlockstore {
   readonly #apiHost: string | undefined;
-  readonly #idbStore: IDBBlockstore;
+  readonly #localStore: IDBBlockstore;
+
+  #isConnected: boolean;
+  #flushQueue: () => void;
+  #queue: string[];
 
   constructor(apiHost?: string) {
     super();
 
-    this.#apiHost = apiHost;
-    this.#idbStore = new IDBBlockstore(storeName());
+    this.#apiHost = apiHost ? apiHost.replace(/\/?$/, '') : undefined;
+    this.#localStore = new IDBBlockstore(storeName());
+    this.#isConnected = navigator.onLine;
+    this.#queue = [];
+
+    this.#flushQueue = debounce(this.#flushQueueInt, 5000);
   }
 
   async open() {
-    await this.#idbStore.open();
+    await this.#localStore.open();
+    await this.#restoreQueue();
+
+    window.addEventListener('offline', async () => {
+      this.#isConnected = false;
+    });
+
+    window.addEventListener('online', async () => {
+      this.#isConnected = true;
+      this.#flushQueue();
+    });
   }
 
   url(apiHost: string, cid?: CID) {
     const path = cid ? cid.toString() : '';
-    return `${apiHost}/api/file/${path}`;
+    return `${apiHost}/api/file${path.length ? '/' + path : ''}`;
   }
 
-  // Blockstore implementation
+  // BLOCKSTORE IMPLEMENTATION
+
   override async delete(key: CID): Promise<void> {
-    await this.#idbStore.delete(key);
+    await this.#localStore.delete(key);
 
-    if (this.#apiHost) {
+    if (this.#isConnected && this.#apiHost) {
       await fetch(this.url(this.#apiHost, key), {
         method: 'DELETE',
       });
@@ -48,27 +73,32 @@ export class MixedBlockstore extends BaseBlockstore {
   }
 
   override async get(key: CID): Promise<Uint8Array> {
-    if (await this.#idbStore.has(key)) {
-      return await this.#idbStore.get(key);
+    if (await this.#localStore.has(key)) {
+      return await this.#localStore.get(key);
     }
 
-    if (this.#apiHost) {
-      return await fetch(this.url(this.#apiHost, key), {
+    if (this.#isConnected && this.#apiHost) {
+      const block = await fetch(this.url(this.#apiHost, key), {
         method: 'GET',
       })
         .then((r) => r.arrayBuffer())
         .then((r) => new Uint8Array(r));
+
+      // Make sure it is cached locally
+      await this.#localStore.put(key, block);
+
+      return block;
     }
 
-    return await this.#idbStore.get(key);
+    return await this.#localStore.get(key);
   }
 
   override async has(key: CID): Promise<boolean> {
-    if (await this.#idbStore.has(key)) {
+    if (await this.#localStore.has(key)) {
       return true;
     }
 
-    if (this.#apiHost) {
+    if (this.#isConnected && this.#apiHost) {
       return await fetch(this.url(this.#apiHost, key), {
         method: 'HEAD',
       }).then((r) => r.ok);
@@ -78,19 +108,119 @@ export class MixedBlockstore extends BaseBlockstore {
   }
 
   override async put(key: CID, val: Uint8Array): Promise<CID> {
-    await this.#idbStore.put(key, val);
+    await this.#localStore.put(key, val);
+
+    await this.#addToQueue(key);
+    this.#flushQueue();
 
+    return key;
+  }
+
+  async destroy(): Promise<void> {
+    await this.#localStore.destroy();
+  }
+
+  // REMOTE
+
+  async putRemote(key: CID, val: Uint8Array) {
     if (this.#apiHost) {
       await fetch(this.url(this.#apiHost, key), {
         method: 'POST',
         body: val,
       });
     }
+  }
 
-    return key;
+  async putCarRemote(car: Uint8Array) {
+    if (this.#apiHost) {
+      await fetch(this.url(this.#apiHost), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/vnd.ipld.car',
+        },
+        body: car,
+      });
+    }
   }
 
-  async destroy(): Promise<void> {
-    await this.#idbStore.destroy();
+  // QUEUE
+
+  readonly queueCacheName = `${storeName()}/state/queue`;
+
+  async #addToQueue(key: CID) {
+    await this.#saveQueue([...this.#queue, key.toString()]);
+  }
+
+  async #flushQueueInt() {
+    if (!this.#isConnected || !this.#apiHost) {
+      return;
+    }
+
+    const keys = [...this.#queue];
+    if (keys.length === 0) {
+      return;
+    }
+
+    // Collect blocks
+    const blocks = await Promise.all(
+      keys.map(async (key) => {
+        const cid = CID.parse(key);
+        const bytes = await this.#localStore.get(cid);
+        return { cid, bytes };
+      }),
+    );
+
+    // TODO: Create & submit CAR
+    //       DEPENDS ON EDGE BLOB-SERVICE CHANGES
+    // const car = await this.#createCar(blocks);
+    // await this.putCarRemote(car);
+    //
+    // Temporary solution:
+    await Promise.all(
+      blocks.map((block: Block) => {
+        return this.putRemote(block.cid, block.bytes);
+      }),
+    );
+
+    // Adjust queue
+    const queue = [...this.#queue].filter((k) => {
+      if (keys.includes(k)) {
+        return false;
+      }
+
+      return true;
+    });
+
+    await this.#saveQueue(queue);
+  }
+
+  async #restoreQueue() {
+    const fromCache = await IDB.get(this.queueCacheName);
+    if (fromCache && Array.isArray(fromCache)) {
+      this.#queue = fromCache;
+      this.#flushQueue();
+    }
+  }
+
+  async #saveQueue(items: string[]) {
+    const arr = [...items];
+    this.#queue = arr;
+    await IDB.set(this.queueCacheName, arr);
+  }
+
+  // 🛠️
+
+  async #createCar(blocks: Block[]) {
+    const { writer, out } = CarWriter.create();
+    const outPromise = all(out);
+
+    await Promise.all(
+      blocks.map((block) => {
+        return writer.put(block);
+      }),
+    );
+
+    await writer.close();
+    return Uint8Arrays.concat(await outPromise);
   }
 }

package/src/capabilities/blockstore.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { WnfsCapabilities } from './capabilities';
+import * as Blockstore from '../blockstore';
+
+export default async (context: PluginsContext) => {
+  const client = context.requestCapability(ClientCapabilities.Client);
+  const apiHost = client.config.values.runtime?.services?.edge?.url || 'http://localhost:8787';
+  const blockstore = Blockstore.create(apiHost);
+  await blockstore.open();
+
+  return contributes(WnfsCapabilities.Blockstore, blockstore);
+};

package/src/capabilities/capabilities.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Blockstore } from 'interface-blockstore';
+import { type PrivateDirectory, type PrivateForest } from 'wnfs';
+
+import { defineCapability } from '@dxos/app-framework';
+import { type SpaceId } from '@dxos/keys';
+
+import { WNFS_PLUGIN } from '../meta';
+
+export namespace WnfsCapabilities {
+  export const Blockstore = defineCapability<Blockstore>(`${WNFS_PLUGIN}/capability/blockstore`);
+
+  export type Instances = Record<SpaceId, { directory: PrivateDirectory; forest: PrivateForest }>;
+  export const Instances = defineCapability<Instances>(`${WNFS_PLUGIN}/capability/instances`);
+}

package/src/capabilities/file-uploader.ts

@@ -0,0 +1,24 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Effect, pipe } from 'effect';
+
+import { Capabilities, chain, contributes, createIntent, type PluginsContext } from '@dxos/app-framework';
+import { SpaceAction } from '@dxos/plugin-space/types';
+
+import { WnfsAction } from '../types';
+
+export default (context: PluginsContext) => {
+  return contributes(Capabilities.FileUploader, (file, space) => {
+    const { dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+
+    const program = Effect.gen(function* () {
+      const fileInfo = yield* dispatch(createIntent(WnfsAction.Upload, { file, space }));
+      yield* dispatch(pipe(createIntent(WnfsAction.Create, fileInfo), chain(SpaceAction.AddObject, { target: space })));
+      return fileInfo;
+    });
+
+    return Effect.runPromise(program);
+  });
+};

package/src/capabilities/index.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { lazy } from '@dxos/app-framework';
+
+export const Blockstore = lazy(() => import('./blockstore'));
+export const FileUploader = lazy(() => import('./file-uploader'));
+export const IntentResolver = lazy(() => import('./intent-resolver'));
+export const Markdown = lazy(() => import('./markdown'));
+export const ReactSurface = lazy(() => import('./react-surface'));
+
+export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, Capabilities, createResolver, type PluginsContext } from '@dxos/app-framework';
+import { create } from '@dxos/react-client/echo';
+
+import { WnfsCapabilities } from './capabilities';
+import { upload } from '../helpers';
+import { FileType, WnfsAction } from '../types';
+
+export default (context: PluginsContext) =>
+  contributes(Capabilities.IntentResolver, [
+    // TODO(wittjosiah): Deleting the object doesn't delete the wnfs blob.
+    //  Consider ways to trigger blob deletion based on object deletion and/or adding file system manager.
+    createResolver(WnfsAction.Create, ({ name, type, cid }) => ({
+      data: {
+        object: create(FileType, { name, type, cid }),
+      },
+    })),
+    createResolver(WnfsAction.Upload, async ({ file, space }) => {
+      const blockstore = context.requestCapability(WnfsCapabilities.Blockstore);
+      const info = await upload({ file, blockstore, space });
+      return { data: info };
+    }),
+  ]);

package/src/capabilities/markdown.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginsContext } from '@dxos/app-framework';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown';
+import { getSpace } from '@dxos/react-client/echo';
+
+import { WnfsCapabilities } from './capabilities';
+import { image } from '../extensions';
+
+export default (context: PluginsContext) =>
+  contributes(MarkdownCapabilities.Extensions, [
+    ({ document }) => {
+      const blockstore = context.requestCapability(WnfsCapabilities.Blockstore);
+      const instances = context.requestCapability(WnfsCapabilities.Instances);
+
+      if (document) {
+        const space = getSpace(document);
+        return space ? [image({ blockstore, instances, space })] : [];
+      }
+
+      return [];
+    },
+  ]);