@dxos/plugin-wnfs 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

package/src/capabilities/react-surface.tsx

@@ -2,44 +2,59 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 import React, { useCallback } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { findAnnotation } from '@dxos/effect';
-import { type InputProps } from '@dxos/react-ui-form';
+import { type FormFieldComponentProps } from '@dxos/react-ui-form';
 
-import { FileContainer, FileInput } from '../components';
-import { meta } from '../meta';
-import { WnfsAction, WnfsFile } from '../types';
+import { FileInput } from '#components';
+import { FileArticle } from '#containers';
+import { WnfsAction, WnfsFile } from '#types';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/article`,
-      role: ['article', 'section', 'slide'],
-      filter: (data): data is { subject: WnfsFile.File } => Obj.instanceOf(WnfsFile.File, data.subject),
-      component: ({ data, role }) => <FileContainer role={role} file={data.subject} />,
-    }),
-    createSurface({
-      id: `${meta.id}/create-form`,
-      role: 'form-input',
-      filter: (data): data is { prop: string; schema: Schema.Schema.Any } => {
-        const annotation = findAnnotation<boolean>(
-          (data.schema as Schema.Schema.All).ast,
-          WnfsAction.UploadAnnotationId,
-        );
-        return !!annotation;
-      },
-      component: ({ data: { prop, schema }, ...props }) => {
-        const inputProps = props as unknown as InputProps;
-        const handleChange = useCallback(
-          (file: File) => inputProps.onValueChange?.('object', file),
-          [prop, inputProps.onValueChange],
-        );
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'article',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, WnfsFile.WnfsFile),
+          AppSurface.object(AppSurface.Section, WnfsFile.WnfsFile),
+          AppSurface.object(AppSurface.Slide, WnfsFile.WnfsFile),
+        ),
+        component: ({ data, role }) => <FileArticle role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: 'create-form',
+        role: 'form-input',
+        filter: (data): data is { prop: string; schema: Schema.Schema.Any; fieldPropertyAst?: SchemaAST.AST } => {
+          const annotation = findAnnotation<boolean>(
+            (data.schema as Schema.Schema.All).ast,
+            WnfsAction.UploadAnnotationId,
+          );
+          return !!annotation;
+        },
+        component: ({ data: { schema, fieldPropertyAst }, ...props }) => {
+          const ast = fieldPropertyAst;
+          if (!ast) {
+            return null;
+          }
 
-        return <FileInput schema={schema} onChange={handleChange} />;
-      },
-    }),
-  ]);
+          const inputProps = { ...props, type: ast } as unknown as FormFieldComponentProps;
+          const handleChange = useCallback(
+            (file: File) => inputProps.onValueChange?.(ast, file),
+            [ast, inputProps.onValueChange],
+          );
+
+          return <FileInput schema={schema} onChange={handleChange} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/components/{FileInput.tsx → FileInput/FileInput.tsx}

@@ -8,10 +8,10 @@ import { useDropzone } from 'react-dropzone';
 
 import { findAnnotation } from '@dxos/effect';
 import { useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { meta } from '../meta';
-import { WnfsAction } from '../types';
+import { meta } from '#meta';
+import { WnfsAction } from '#types';
 
 export type FileInputProps = {
   schema: Schema.Schema.Any;
@@ -36,12 +36,12 @@ export const FileInput = ({ schema, onChange }: FileInputProps) => {
       className={mx(
         'flex flex-col items-center p-8 border border-separator',
         isFocused && 'focus-ring',
-        isDragAccept && 'bg-attention',
-        isDragReject && 'border-error',
+        isDragAccept && 'bg-attention-surface',
+        isDragReject && 'border-rose-fill',
       )}
     >
       <input {...getInputProps()} />
-      {acceptedFiles[0] ? <p>{acceptedFiles[0].name}</p> : <p>{t('file input placeholder')}</p>}
+      {acceptedFiles[0] ? <p>{acceptedFiles[0].name}</p> : <p>{t('file-input.placeholder')}</p>}
     </div>
   );
 };

package/src/components/FileInput/index.ts

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

package/src/components/FilePreview/FilePreview.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { ForwardedRef } from 'react';
+
+import { composable, composableProps } from '@dxos/ui-theme';
+
+export type FilePreviewProps = { type: string; url: string };
+
+/**
+ * File/content preview iframe.
+ */
+export const FilePreview = composable<HTMLElement, FilePreviewProps>(
+  ({ type, url, children, ...props }, forwardedRef) => {
+    if (type.startsWith('image/')) {
+      return (
+        <img
+          {...composableProps(props, { classNames: 'h-full w-full object-contain' })}
+          src={url}
+          ref={forwardedRef as ForwardedRef<HTMLImageElement>}
+        />
+      );
+    } else if (type.startsWith('video/')) {
+      return (
+        <video
+          {...composableProps(props, { classNames: 'h-full w-full object-contain' })}
+          src={url}
+          controls
+          ref={forwardedRef as ForwardedRef<HTMLVideoElement>}
+        />
+      );
+    } else {
+      return (
+        <iframe
+          {...composableProps(props, { classNames: 'h-full w-full overflow-auto' })}
+          src={url}
+          ref={forwardedRef as ForwardedRef<HTMLIFrameElement>}
+        />
+      );
+    }
+  },
+);

package/src/components/FilePreview/index.ts

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

package/src/components/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export const FileContainer = lazy(() => import('./FileContainer'));
-
 export * from './FileInput';
+export * from './FilePreview';

package/src/containers/FileArticle/FileArticle.tsx

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useState } from 'react';
+
+import { useCapability } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { invariant } from '@dxos/invariant';
+import { getSpace } from '@dxos/react-client/echo';
+import { Panel, useAsyncEffect } from '@dxos/react-ui';
+
+import { FilePreview } from '#components';
+import { WnfsCapabilities, type WnfsFile } from '#types';
+
+import { filePath, getBlobUrl, loadWnfs, wnfsUrl } from '../../helpers';
+
+export type FileArticleProps = AppSurface.ObjectArticleProps<WnfsFile.WnfsFile>;
+
+export const FileArticle = ({ role, subject: file }: FileArticleProps) => {
+  const blockstore = useCapability(WnfsCapabilities.Blockstore);
+  const instances = useCapability(WnfsCapabilities.Instances);
+  const [blobUrl, setBlobUrl] = useState<string>();
+
+  useAsyncEffect(async () => {
+    const space = getSpace(file);
+    invariant(space);
+    const { directory, forest } = await loadWnfs({
+      blockstore,
+      instances,
+      space,
+    });
+    const path = filePath(file.cid.toString(), space);
+    const url = await getBlobUrl({
+      wnfsUrl: wnfsUrl(path),
+      blockstore,
+      directory,
+      forest,
+      type: file.type,
+    });
+    setBlobUrl(url);
+  }, [file]);
+
+  if (!blobUrl) {
+    return null;
+  }
+
+  return (
+    <Panel.Root role={role} className='dx-document'>
+      <Panel.Content asChild>
+        <FilePreview type={file.type} url={blobUrl} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};
+
+export default FileArticle;

package/src/containers/FileArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { FileArticle as default } from './FileArticle';

package/src/containers/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+export const FileArticle: ComponentType<any> = lazy(() => import('./FileArticle'));

package/src/extensions/image.stories.tsx

@@ -6,10 +6,11 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import type { Blockstore } from 'interface-blockstore';
 import React, { type ChangeEvent, useEffect, useState } from 'react';
 
-import { faker } from '@dxos/random';
-import { useSpace } from '@dxos/react-client/echo';
+import { random } from '@dxos/random';
+import { useSpaces } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useThemeContext } from '@dxos/react-ui';
+import { useTextEditor } from '@dxos/react-ui-editor';
 import { withTheme } from '@dxos/react-ui/testing';
 import {
   createBasicExtensions,
@@ -17,21 +18,19 @@ import {
   createThemeExtensions,
   decorateMarkdown,
   processEditorPayload,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
+} from '@dxos/ui-editor';
 
 import { create as createBlockstore } from '../blockstore';
 import { upload } from '../helpers';
-
 import { image } from './image';
 
-faker.seed(1);
-const initialValue = faker.lorem.paragraphs(100);
+random.seed(1);
+const initialValue = random.lorem.paragraphs(100);
 const instances = {};
 
 const DefaultStory = () => {
   const { themeMode } = useThemeContext();
-  const space = useSpace();
+  const [space] = useSpaces();
   const [blockstore, setBlockstore] = useState<Blockstore>();
 
   useEffect(() => {
@@ -92,9 +91,9 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-wnfs/image',
+  title: 'plugins/plugin-wnfs/extensions/image',
   render: DefaultStory,
-  decorators: [withTheme, withClientProvider({ createIdentity: true, createSpace: true })],
+  decorators: [withTheme(), withClientProvider({ createIdentity: true, createSpace: true })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/extensions/image.tsx

@@ -11,11 +11,12 @@ import { createRoot } from 'react-dom/client';
 
 import { type Space } from '@dxos/react-client/echo';
 import { Status, ThemeProvider } from '@dxos/react-ui';
-import { focusField } from '@dxos/react-ui-editor';
-import { defaultTx } from '@dxos/react-ui-theme';
+import { focusField } from '@dxos/ui-editor';
+import { defaultTx } from '@dxos/ui-theme';
 import { type MaybePromise } from '@dxos/util';
 
-import { type WnfsCapabilities } from '../capabilities';
+import { type WnfsCapabilities } from '#types';
+
 import { getBlobUrl, getPathFromUrl, loadWnfs } from '../helpers';
 
 const WAIT_UNTIL_LOADER = 1500;
@@ -165,11 +166,11 @@ class WnfsImageWidget extends WidgetType {
     super();
   }
 
-  override eq(other: this): boolean {
-    return this._wnfsUrl === (other as any as WnfsImageWidget)._wnfsUrl;
+  override eq(other: this) {
+    return this._wnfsUrl === other._wnfsUrl;
   }
 
-  override toDOM(view: EditorView): HTMLDivElement {
+  override toDOM(view: EditorView) {
     if (typeof this._url === 'string') {
       return createImg(view, this._url);
     }

package/src/helpers/load.ts

@@ -7,9 +7,10 @@ import { CID } from 'multiformats';
 import * as Uint8Arrays from 'uint8arrays';
 import { AccessKey, PrivateDirectory, PrivateForest, PrivateNode } from 'wnfs';
 
+import { Obj } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 
-import { type WnfsCapabilities } from '../capabilities';
+import { type WnfsCapabilities } from '#types';
 
 import { Rng, store } from './common';
 
@@ -29,8 +30,10 @@ export const loadWnfs = async ({
   // TODO(wittjosiah): Remove.
   // Delete old properties if they exist.
   if (space.properties.wnfs_access_key !== undefined && space.properties.wnfs_private_forest_cid !== undefined) {
-    delete space.properties.wnfs_access_key;
-    delete space.properties.wnfs_private_forest_cid;
+    Obj.update(space.properties, (obj) => {
+      delete obj['wnfs_access_key'];
+      delete obj['wnfs_private_forest_cid'];
+    });
   }
 
   const cacheKey = space.properties.wnfs?.privateForestCid;
@@ -65,10 +68,12 @@ const createWnfsDir = async (blockstore: Blockstore, space: Space) => {
 
   const cidBytes = await newForest.store(wnfsStore);
 
-  space.properties.wnfs = {
-    accessKey: Uint8Arrays.toString(accessKeyRaw.toBytes(), 'base64'),
-    privateForestCid: CID.decode(cidBytes).toString(),
-  };
+  Obj.update(space.properties, (obj) => {
+    obj.wnfs = {
+      accessKey: Uint8Arrays.toString(accessKeyRaw.toBytes(), 'base64'),
+      privateForestCid: CID.decode(cidBytes).toString(),
+    };
+  });
 
   return {
     directory: dir,

package/src/helpers/upload.ts

@@ -8,9 +8,10 @@ import * as Raw from 'multiformats/codecs/raw';
 import { sha256 } from 'multiformats/hashes/sha2';
 
 import type { Space } from '@dxos/client/echo';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 
-import { type WnfsCapabilities } from '../capabilities';
+import { type WnfsCapabilities } from '#types';
 
 import { Rng, filePath, store } from './common';
 import { loadWnfs } from './load';
@@ -46,7 +47,9 @@ export const upload = async ({
   const cidBytes = await updatedForest.store(wnfsStore);
 
   // Update the forest pointer on the associated space.
-  space.properties.wnfs.privateForestCid = CID.decode(cidBytes).toString();
+  Obj.update(space.properties, (obj) => {
+    obj.wnfs.privateForestCid = CID.decode(cidBytes).toString();
+  });
 
   // Generate `wnfs://` URL & return the info.
   const info = {

package/src/index.ts

@@ -2,6 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export { WnfsCapabilities } from './capabilities';
+export * from './helpers';
 export * from './meta';
-export * from './WnfsPlugin';
+export * from './types';

package/src/meta.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
-  id: 'dxos.org/plugin/wnfs',
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.wnfs',
   name: 'WNFS',
   description: trim`
     Decentralized file storage using the Web Native File System protocol.

package/src/operations/create-file.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { invariant } from '@dxos/invariant';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { upload } from '../helpers';
+import { WnfsCapabilities, WnfsFile, WnfsOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof WnfsOperation.CreateFile> = WnfsOperation.CreateFile.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ file, db }) {
+      const client = yield* Capability.get(ClientCapabilities.Client);
+      const blockstore = yield* Capability.get(WnfsCapabilities.Blockstore);
+      const space = client.spaces.get(db.spaceId);
+      invariant(space, 'Space not found');
+      const info = yield* Effect.promise(() => upload({ file, blockstore, space }));
+      return {
+        object: WnfsFile.make({ name: info.name, type: info.type, cid: info.cid }),
+      };
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/create.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Operation } from '@dxos/compute';
+
+import { WnfsFile, WnfsOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof WnfsOperation.Create> = WnfsOperation.Create.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ name, type, cid }) {
+      return {
+        object: WnfsFile.make({ name, type, cid }),
+      };
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+export const WnfsOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./create'),
+  () => import('./create-file'),
+  () => import('./upload'),
+);

package/src/operations/upload.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { invariant } from '@dxos/invariant';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { upload } from '../helpers';
+import { WnfsCapabilities, WnfsOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof WnfsOperation.Upload> = WnfsOperation.Upload.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ file, db }) {
+      const client = yield* Capability.get(ClientCapabilities.Client);
+      const blockstore = yield* Capability.get(WnfsCapabilities.Blockstore);
+      const space = client.spaces.get(db.spaceId);
+      invariant(space, 'Space not found');
+      const info = yield* Effect.promise(() => upload({ file, blockstore, space }));
+      return info;
+    }),
+  ),
+);
+
+export default handler;

package/src/plugin.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const WnfsPlugin = Plugin.lazy(meta, () => import('#plugin'));
+
+export { WnfsOperationHandlerSet } from './operations';

package/src/translations.ts

@@ -4,22 +4,26 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-import { meta } from './meta';
-import { WnfsFile } from './types';
+import { meta } from '#meta';
+import { WnfsFile } from '#types';
 
 export const translations = [
   {
     'en-US': {
-      [WnfsFile.File.typename]: {
-        'typename label': 'File',
-        'object name placeholder': 'New file',
-        'rename object label': 'Rename file',
-        'delete object label': 'Delete file',
+      [WnfsFile.WnfsFile.typename]: {
+        'typename.label': 'File',
+        'typename.label_zero': 'Files',
+        'typename.label_one': 'File',
+        'typename.label_other': 'Files',
+        'object-name.placeholder': 'New file',
+        'add-object.label': 'Add file',
+        'rename-object.label': 'Rename file',
+        'delete-object.label': 'Delete file',
+        'object-deleted.label': 'File deleted',
       },
       [meta.id]: {
-        'plugin name': 'Files',
-        'delete object label': 'Delete',
-        'file input placeholder': 'Drop a file here, or click to select a file',
+        'plugin.name': 'Files',
+        'file-input.placeholder': 'Drop a file here, or click to select a file',
       },
     },
   },

package/src/types/WnfsCapabilities.ts

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

package/src/types/WnfsFile.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// @import-as-namespace
+
+import * as Schema from 'effect/Schema';
+
+import { Annotation, Obj, Type } from '@dxos/echo';
+import { FormInputAnnotation } from '@dxos/echo/internal';
+
+export const WnfsFile = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+  type: Schema.String.pipe(FormInputAnnotation.set(false)),
+  cid: Schema.String.pipe(FormInputAnnotation.set(false)),
+  timestamp: Schema.String.pipe(FormInputAnnotation.set(false), Schema.optional),
+}).pipe(
+  Type.object({
+    typename: 'org.dxos.type.file',
+    version: '0.1.0',
+  }),
+  Annotation.IconAnnotation.set({
+    icon: 'ph--file--regular',
+    hue: 'teal',
+  }),
+);
+
+export type WnfsFile = Schema.Schema.Type<typeof WnfsFile>;
+
+export const make = (props: Obj.MakeProps<typeof WnfsFile>) => Obj.make(WnfsFile, props);