@dxos/plugin-wnfs 0.8.4-main.f9ba587 → 0.8.4-main.fcc0d83b33

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.File>;
+
+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 { WnfsCapabilities } from './types';
 export * from './meta';
 export * from './WnfsPlugin';

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,31 @@
+//
+// 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/types';
+
+import { upload } from '../helpers';
+import { WnfsCapabilities, WnfsFile } from '../types';
+import { CreateFile } from './definitions';
+
+const handler: Operation.WithHandler<typeof CreateFile> = 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,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Operation } from '@dxos/compute';
+
+import { WnfsFile } from '../types';
+import { Create } from './definitions';
+
+const handler: Operation.WithHandler<typeof Create> = Create.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ name, type, cid }) {
+      return {
+        object: WnfsFile.make({ name, type, cid }),
+      };
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/definitions.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { FileInfoSchema } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { Database } from '@dxos/echo';
+
+import { meta } from '#meta';
+
+import { WnfsFile, WnfsAction } from '../types';
+
+const WNFS_OPERATION = `${meta.id}.operation`;
+
+export const Create = Operation.make({
+  meta: { key: `${WNFS_OPERATION}.create`, name: 'Create WNFS File' },
+  services: [Capability.Service],
+  input: FileInfoSchema.pick('name', 'type', 'cid').pipe(Schema.required),
+  output: Schema.Struct({
+    object: WnfsFile.File,
+  }),
+});
+
+export const Upload = Operation.make({
+  meta: { key: `${WNFS_OPERATION}.upload`, name: 'Upload File' },
+  services: [Capability.Service],
+  input: Schema.extend(WnfsAction.UploadFileSchema, Schema.Struct({ db: Database.Database })),
+  output: Schema.required(FileInfoSchema),
+});
+
+export const CreateFile = Operation.make({
+  meta: { key: `${WNFS_OPERATION}.create-file`, name: 'Create File' },
+  services: [Capability.Service],
+  input: Schema.extend(WnfsAction.UploadFileSchema, Schema.Struct({ db: Database.Database })),
+  output: Schema.Struct({
+    object: WnfsFile.File,
+  }),
+});

package/src/operations/index.ts

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

package/src/operations/upload.ts

@@ -0,0 +1,29 @@
+//
+// 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/types';
+
+import { upload } from '../helpers';
+import { WnfsCapabilities } from '../types';
+import { Upload } from './definitions';
+
+const handler: Operation.WithHandler<typeof Upload> = 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/translations.ts

@@ -4,20 +4,26 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-import { meta } from './meta';
-import { FileType } from './types';
+import { meta } from '#meta';
+import { WnfsFile } from '#types';
 
 export const translations = [
   {
     'en-US': {
-      [FileType.typename]: {
-        'typename label': 'File',
-        'object name placeholder': 'New file',
+      [WnfsFile.File.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/File.ts

@@ -0,0 +1,28 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Annotation, Obj, Type } from '@dxos/echo';
+import { FormInputAnnotation } from '@dxos/echo/internal';
+
+export const File = 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 File = Schema.Schema.Type<typeof File>;
+
+export const make = (props: Obj.MakeProps<typeof File>) => Obj.make(File, props);

package/src/{capabilities → types}/capabilities.ts

@@ -5,14 +5,14 @@
 import { type Blockstore } from 'interface-blockstore';
 import { type PrivateDirectory, type PrivateForest } from 'wnfs';
 
-import { defineCapability } from '@dxos/app-framework';
+import { Capability } from '@dxos/app-framework';
 import { type SpaceId } from '@dxos/keys';
 
-import { WNFS_PLUGIN } from '../meta';
+import { meta } from '#meta';
 
 export namespace WnfsCapabilities {
-  export const Blockstore = defineCapability<Blockstore>(`${WNFS_PLUGIN}/capability/blockstore`);
+  export const Blockstore = Capability.make<Blockstore>(`${meta.id}.capability.blockstore`);
 
   export type Instances = Record<SpaceId, { directory: PrivateDirectory; forest: PrivateForest }>;
-  export const Instances = defineCapability<Instances>(`${WNFS_PLUGIN}/capability/instances`);
+  export const Instances = Capability.make<Instances>(`${meta.id}.capability.instances`);
 }

package/src/types/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './file';
+export * from './capabilities';
+export * as WnfsFile from './File';
 export * from './types';