@dxos/plugin-wnfs 0.8.3 → 0.8.4-main.03d5cd7b56

package/src/capabilities/react-surface.tsx

@@ -2,44 +2,59 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+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 { contributes, Capabilities, 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 { WNFS_PLUGIN } from '../meta';
-import { FileType, WnfsAction } from '../types';
+import { FileInput } from '#components';
+import { FileContainer } from '#containers';
+import { WnfsAction, WnfsFile } from '#types';
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${WNFS_PLUGIN}/article`,
-      role: ['article', 'section', 'slide'],
-      filter: (data): data is { subject: FileType } => Obj.instanceOf(FileType, data.subject),
-      component: ({ data, role }) => <FileContainer role={role} file={data.subject} />,
-    }),
-    createSurface({
-      id: `${WNFS_PLUGIN}/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 }) => <FileContainer 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}

@@ -2,16 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 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 { WNFS_PLUGIN } from '../meta';
-import { WnfsAction } from '../types';
+import { meta } from '#meta';
+import { WnfsAction } from '#types';
 
 export type FileInputProps = {
   schema: Schema.Schema.Any;
@@ -19,7 +19,7 @@ export type FileInputProps = {
 };
 
 export const FileInput = ({ schema, onChange }: FileInputProps) => {
-  const { t } = useTranslation(WNFS_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const accept = findAnnotation<Record<string, string[]>>(schema.ast, WnfsAction.UploadAnnotationId);
 
   const onDropAccepted = useCallback((files: File[]) => onChange?.(files[0]), [onChange]);
@@ -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/FileContainer/FileContainer.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 FileContainerProps = AppSurface.ObjectArticleProps<WnfsFile.WnfsFile>;
+
+export const FileContainer = ({ role, subject: file }: FileContainerProps) => {
+  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 FileContainer;

package/src/containers/FileContainer/index.ts

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

package/src/containers/index.ts

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

package/src/extensions/image.stories.tsx

@@ -2,36 +2,35 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
+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,
   createMarkdownExtensions,
   createThemeExtensions,
   decorateMarkdown,
   processEditorPayload,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+} from '@dxos/ui-editor';
 
-import { image } from './image';
 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 Story = () => {
+const DefaultStory = () => {
   const { themeMode } = useThemeContext();
-  const space = useSpace();
+  const [space] = useSpaces();
   const [blockstore, setBlockstore] = useState<Blockstore>();
 
   useEffect(() => {
@@ -54,7 +53,7 @@ const Story = () => {
       initialValue,
       extensions: [
         createBasicExtensions(),
-        createMarkdownExtensions({ themeMode }),
+        createMarkdownExtensions(),
         createThemeExtensions({ themeMode, syntaxHighlighting: true }),
         blockstore && space ? [image({ blockstore, instances, space })] : [],
         decorateMarkdown(),
@@ -91,10 +90,14 @@ const Story = () => {
   );
 };
 
-export default {
-  title: 'plugins/plugin-wnfs/image',
-  render: Story,
-  decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
-};
+const meta = {
+  title: 'plugins/plugin-wnfs/extensions/image',
+  render: DefaultStory,
+  decorators: [withTheme(), withClientProvider({ createIdentity: true, createSpace: true })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};

package/src/extensions/image.tsx

@@ -3,7 +3,7 @@
 //
 
 import { syntaxTree } from '@codemirror/language';
-import { type EditorState, type Extension, StateField, type Range } from '@codemirror/state';
+import { type EditorState, type Extension, type Range, StateField } from '@codemirror/state';
 import { Decoration, EditorView, WidgetType } from '@codemirror/view';
 import type { Blockstore } from 'interface-blockstore';
 import React from 'react';
@@ -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;
@@ -80,16 +81,16 @@ export const image = (options: ImageOptions): Extension[] => {
 };
 
 const buildDecorations = ({
+  state,
   from,
   to,
-  state,
   blobUrlCache,
   preload,
   options: { blockstore, instances, space },
 }: {
+  state: EditorState;
   from: number;
   to: number;
-  state: EditorState;
   blobUrlCache: Record<string, string>;
   preload: (url: string) => void;
   options: ImageOptions;
@@ -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

@@ -5,12 +5,14 @@
 import type { Blockstore } from 'interface-blockstore';
 import { CID } from 'multiformats';
 import * as Uint8Arrays from 'uint8arrays';
-import { AccessKey, PrivateForest, PrivateDirectory, PrivateNode } from 'wnfs';
+import { AccessKey, PrivateDirectory, PrivateForest, PrivateNode } from 'wnfs';
 
+import { Obj } from '@dxos/echo';
 import { type Space } from '@dxos/react-client/echo';
 
+import { type WnfsCapabilities } from '#types';
+
 import { Rng, store } from './common';
-import { type WnfsCapabilities } from '../capabilities';
 
 //
 // LOAD
@@ -28,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;
@@ -64,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,12 +8,14 @@ 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 '#types';
+
 import { Rng, filePath, store } from './common';
 import { loadWnfs } from './load';
 import { wnfsUrl } from './wnfs-url';
-import { type WnfsCapabilities } from '../capabilities';
 
 export const upload = async ({
   file,
@@ -45,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,14 +2,17 @@
 // 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 WNFS_PLUGIN = 'dxos.org/plugin/wnfs';
-
-export const meta: PluginMeta = {
-  id: WNFS_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.wnfs',
   name: 'WNFS',
-  description: 'Manage and view files with via the Web Native File System (WNFS).',
+  description: trim`
+    Decentralized file storage using the Web Native File System protocol.
+    Store and sync files with end-to-end encryption across devices without central servers.
+  `,
   icon: 'ph--file-cloud--regular',
+  iconHue: 'teal',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-wnfs',
 };

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';