@dxos/plugin-wnfs 0.8.4-main.28f8d3d → 0.8.4-main.2c6827d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (82) hide show
  1. package/dist/lib/browser/{FileContainer-LTKYOYSO.mjs → FileContainer-LLNI7WXR.mjs} +34 -36
  2. package/dist/lib/browser/FileContainer-LLNI7WXR.mjs.map +7 -0
  3. package/dist/lib/browser/{blockstore-PSYZCC2O.mjs → blockstore-2JFU4NBU.mjs} +5 -5
  4. package/dist/lib/browser/{blockstore-PSYZCC2O.mjs.map → blockstore-2JFU4NBU.mjs.map} +1 -1
  5. package/dist/lib/browser/{chunk-CW4BENRQ.mjs → chunk-CWMKN2F6.mjs} +27 -20
  6. package/dist/lib/browser/chunk-CWMKN2F6.mjs.map +7 -0
  7. package/dist/lib/browser/chunk-F4QHZWQD.mjs +16 -0
  8. package/dist/lib/browser/chunk-F4QHZWQD.mjs.map +7 -0
  9. package/dist/lib/browser/chunk-OGPGLJCV.mjs +25 -0
  10. package/dist/lib/browser/chunk-OGPGLJCV.mjs.map +7 -0
  11. package/dist/lib/browser/chunk-ZFPJA5F4.mjs +16 -0
  12. package/dist/lib/browser/{file-uploader-YRZPRETS.mjs → file-uploader-W6TJLAAK.mjs} +11 -10
  13. package/dist/lib/browser/file-uploader-W6TJLAAK.mjs.map +7 -0
  14. package/dist/lib/browser/index.mjs +13 -15
  15. package/dist/lib/browser/index.mjs.map +3 -3
  16. package/dist/lib/browser/{intent-resolver-CKGJNE6P.mjs → intent-resolver-FSW2EQF4.mjs} +8 -9
  17. package/dist/lib/browser/intent-resolver-FSW2EQF4.mjs.map +7 -0
  18. package/dist/lib/browser/{markdown-RAGCVYGE.mjs → markdown-WYQDCVFQ.mjs} +6 -6
  19. package/dist/lib/browser/{markdown-RAGCVYGE.mjs.map → markdown-WYQDCVFQ.mjs.map} +2 -2
  20. package/dist/lib/browser/meta.json +1 -1
  21. package/dist/lib/browser/{react-surface-HGWZDLP2.mjs → react-surface-DMU47U3X.mjs} +13 -13
  22. package/dist/lib/browser/react-surface-DMU47U3X.mjs.map +7 -0
  23. package/dist/lib/browser/types/index.mjs +5 -5
  24. package/dist/types/src/WnfsPlugin.d.ts +1 -1
  25. package/dist/types/src/WnfsPlugin.d.ts.map +1 -1
  26. package/dist/types/src/capabilities/blockstore.d.ts +1 -1
  27. package/dist/types/src/capabilities/capabilities.d.ts.map +1 -1
  28. package/dist/types/src/capabilities/file-uploader.d.ts +1 -1
  29. package/dist/types/src/capabilities/file-uploader.d.ts.map +1 -1
  30. package/dist/types/src/capabilities/index.d.ts +5 -5
  31. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  32. package/dist/types/src/capabilities/intent-resolver.d.ts +1 -1
  33. package/dist/types/src/capabilities/intent-resolver.d.ts.map +1 -1
  34. package/dist/types/src/capabilities/markdown.d.ts +1 -1
  35. package/dist/types/src/capabilities/react-surface.d.ts +1 -1
  36. package/dist/types/src/components/FileContainer.d.ts +2 -2
  37. package/dist/types/src/components/FileContainer.d.ts.map +1 -1
  38. package/dist/types/src/components/FileInput.d.ts +1 -1
  39. package/dist/types/src/components/FileInput.d.ts.map +1 -1
  40. package/dist/types/src/extensions/image.stories.d.ts +5 -4
  41. package/dist/types/src/extensions/image.stories.d.ts.map +1 -1
  42. package/dist/types/src/meta.d.ts +0 -1
  43. package/dist/types/src/meta.d.ts.map +1 -1
  44. package/dist/types/src/translations.d.ts +2 -2
  45. package/dist/types/src/translations.d.ts.map +1 -1
  46. package/dist/types/src/types/File.d.ts +16 -0
  47. package/dist/types/src/types/File.d.ts.map +1 -0
  48. package/dist/types/src/types/index.d.ts +1 -1
  49. package/dist/types/src/types/index.d.ts.map +1 -1
  50. package/dist/types/src/types/types.d.ts +13 -9
  51. package/dist/types/src/types/types.d.ts.map +1 -1
  52. package/dist/types/tsconfig.tsbuildinfo +1 -1
  53. package/package.json +33 -34
  54. package/src/WnfsPlugin.tsx +71 -69
  55. package/src/capabilities/capabilities.ts +3 -3
  56. package/src/capabilities/file-uploader.ts +8 -5
  57. package/src/capabilities/intent-resolver.ts +2 -3
  58. package/src/capabilities/react-surface.tsx +6 -6
  59. package/src/components/FileContainer.tsx +21 -14
  60. package/src/components/FileInput.tsx +4 -4
  61. package/src/components/FilePreview.tsx +3 -3
  62. package/src/extensions/image.stories.tsx +14 -11
  63. package/src/extensions/image.tsx +5 -5
  64. package/src/meta.ts +7 -4
  65. package/src/translations.ts +2 -2
  66. package/src/types/File.ts +24 -0
  67. package/src/types/index.ts +1 -1
  68. package/src/types/types.ts +8 -8
  69. package/dist/lib/browser/FileContainer-LTKYOYSO.mjs.map +0 -7
  70. package/dist/lib/browser/chunk-CW4BENRQ.mjs.map +0 -7
  71. package/dist/lib/browser/chunk-KZANQHJY.mjs +0 -16
  72. package/dist/lib/browser/chunk-KZANQHJY.mjs.map +0 -7
  73. package/dist/lib/browser/chunk-VDDGZWAY.mjs +0 -15
  74. package/dist/lib/browser/chunk-VDDGZWAY.mjs.map +0 -7
  75. package/dist/lib/browser/chunk-ZMH2OULB.mjs +0 -16
  76. package/dist/lib/browser/file-uploader-YRZPRETS.mjs.map +0 -7
  77. package/dist/lib/browser/intent-resolver-CKGJNE6P.mjs.map +0 -7
  78. package/dist/lib/browser/react-surface-HGWZDLP2.mjs.map +0 -7
  79. package/dist/types/src/types/file.d.ts +0 -16
  80. package/dist/types/src/types/file.d.ts.map +0 -1
  81. package/src/types/file.ts +0 -17
  82. /package/dist/lib/browser/{chunk-ZMH2OULB.mjs.map → chunk-ZFPJA5F4.mjs.map} +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/plugin-wnfs",
3
- "version": "0.8.4-main.28f8d3d",
3
+ "version": "0.8.4-main.2c6827d",
4
4
  "description": "WNFS file management plugin",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -32,15 +32,15 @@
32
32
  "src"
33
33
  ],
34
34
  "dependencies": {
35
- "@codemirror/language": "^6.10.3",
36
- "@codemirror/state": "^6.4.1",
37
- "@codemirror/view": "^6.34.1",
35
+ "@codemirror/language": "^6.11.3",
36
+ "@codemirror/state": "^6.5.2",
37
+ "@codemirror/view": "^6.38.4",
38
38
  "@ipld/car": "^5.3.3",
39
39
  "@preact-signals/safe-react": "^0.9.0",
40
40
  "blockstore-core": "^5.0.1",
41
41
  "blockstore-idb": "^2.0.0",
42
42
  "debounce": "^2.2.0",
43
- "effect": "3.17.7",
43
+ "effect": "3.18.3",
44
44
  "idb-keyval": "^6.2.1",
45
45
  "interface-blockstore": "^5.2.10",
46
46
  "it-all": "^3.0.6",
@@ -48,40 +48,39 @@
48
48
  "react-dropzone": "^14.2.3",
49
49
  "uint8arrays": "^5.1.0",
50
50
  "wnfs": "0.2.2",
51
- "@dxos/app-framework": "0.8.4-main.28f8d3d",
52
- "@dxos/crypto": "0.8.4-main.28f8d3d",
53
- "@dxos/echo-schema": "0.8.4-main.28f8d3d",
54
- "@dxos/echo": "0.8.4-main.28f8d3d",
55
- "@dxos/effect": "0.8.4-main.28f8d3d",
56
- "@dxos/invariant": "0.8.4-main.28f8d3d",
57
- "@dxos/log": "0.8.4-main.28f8d3d",
58
- "@dxos/local-storage": "0.8.4-main.28f8d3d",
59
- "@dxos/plugin-markdown": "0.8.4-main.28f8d3d",
60
- "@dxos/plugin-client": "0.8.4-main.28f8d3d",
61
- "@dxos/plugin-space": "0.8.4-main.28f8d3d",
62
- "@dxos/react-client": "0.8.4-main.28f8d3d",
63
- "@dxos/react-ui-editor": "0.8.4-main.28f8d3d",
64
- "@dxos/react-ui-form": "0.8.4-main.28f8d3d",
65
- "@dxos/react-ui-stack": "0.8.4-main.28f8d3d",
66
- "@dxos/util": "0.8.4-main.28f8d3d",
67
- "@dxos/react-ui": "0.8.4-main.28f8d3d"
51
+ "@dxos/app-framework": "0.8.4-main.2c6827d",
52
+ "@dxos/crypto": "0.8.4-main.2c6827d",
53
+ "@dxos/invariant": "0.8.4-main.2c6827d",
54
+ "@dxos/effect": "0.8.4-main.2c6827d",
55
+ "@dxos/echo": "0.8.4-main.2c6827d",
56
+ "@dxos/plugin-client": "0.8.4-main.2c6827d",
57
+ "@dxos/log": "0.8.4-main.2c6827d",
58
+ "@dxos/plugin-markdown": "0.8.4-main.2c6827d",
59
+ "@dxos/plugin-space": "0.8.4-main.2c6827d",
60
+ "@dxos/react-client": "0.8.4-main.2c6827d",
61
+ "@dxos/react-ui": "0.8.4-main.2c6827d",
62
+ "@dxos/react-ui-editor": "0.8.4-main.2c6827d",
63
+ "@dxos/react-ui-form": "0.8.4-main.2c6827d",
64
+ "@dxos/util": "0.8.4-main.2c6827d",
65
+ "@dxos/react-ui-stack": "0.8.4-main.2c6827d",
66
+ "@dxos/local-storage": "0.8.4-main.2c6827d"
68
67
  },
69
68
  "devDependencies": {
70
- "@types/react": "~18.2.0",
71
- "@types/react-dom": "~18.2.0",
72
- "react": "~18.2.0",
73
- "react-dom": "~18.2.0",
74
- "vite": "5.4.7",
75
- "@dxos/random": "0.8.4-main.28f8d3d",
76
- "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
77
- "@dxos/storybook-utils": "0.8.4-main.28f8d3d"
69
+ "@types/react": "~19.2.2",
70
+ "@types/react-dom": "~19.2.2",
71
+ "react": "~19.2.0",
72
+ "react-dom": "~19.2.0",
73
+ "vite": "7.1.9",
74
+ "@dxos/react-ui-theme": "0.8.4-main.2c6827d",
75
+ "@dxos/random": "0.8.4-main.2c6827d",
76
+ "@dxos/storybook-utils": "0.8.4-main.2c6827d"
78
77
  },
79
78
  "peerDependencies": {
80
79
  "effect": "^3.13.3",
81
- "react": "~18.2.0",
82
- "react-dom": "~18.2.0",
83
- "@dxos/react-ui": "0.8.4-main.28f8d3d",
84
- "@dxos/react-ui-theme": "0.8.4-main.28f8d3d"
80
+ "react": "^19.0.0",
81
+ "react-dom": "^19.0.0",
82
+ "@dxos/react-ui": "0.8.4-main.2c6827d",
83
+ "@dxos/react-ui-theme": "0.8.4-main.2c6827d"
85
84
  },
86
85
  "publishConfig": {
87
86
  "access": "public"
@@ -2,7 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import { pipe } from 'effect';
5
+ import * as Function from 'effect/Function';
6
6
 
7
7
  import {
8
8
  Capabilities,
@@ -21,73 +21,75 @@ import { defineObjectForm } from '@dxos/plugin-space/types';
21
21
  import { Blockstore, FileUploader, IntentResolver, Markdown, ReactSurface, WnfsCapabilities } from './capabilities';
22
22
  import { meta } from './meta';
23
23
  import { translations } from './translations';
24
- import { FileType, WnfsAction } from './types';
24
+ import { WnfsAction, WnfsFile } from './types';
25
25
 
26
- export const WnfsPlugin = () =>
27
- definePlugin(meta, [
28
- defineModule({
29
- id: `${meta.id}/module/blockstore`,
30
- activatesOn: ClientEvents.ClientReady,
31
- activate: Blockstore,
32
- }),
33
- defineModule({
34
- id: `${meta.id}/module/instances`,
35
- activatesOn: ClientEvents.ClientReady,
36
- activate: () => {
37
- const instances: WnfsCapabilities.Instances = {};
38
- return contributes(WnfsCapabilities.Instances, instances);
39
- },
40
- }),
41
- defineModule({
42
- id: `${meta.id}/module/translations`,
43
- activatesOn: Events.SetupTranslations,
44
- activate: () => contributes(Capabilities.Translations, translations),
45
- }),
46
- defineModule({
47
- id: `${meta.id}/module/metadata`,
48
- activatesOn: Events.SetupMetadata,
49
- activate: () =>
50
- contributes(Capabilities.Metadata, {
51
- id: FileType.typename,
52
- metadata: {
53
- label: (object: any) => (object instanceof FileType ? object.name : undefined),
54
- // TODO(wittjosiah): Would be nice if icon could change based on the type of the file.
55
- icon: 'ph--file--regular',
56
- },
26
+ export const WnfsPlugin = definePlugin(meta, () => [
27
+ defineModule({
28
+ id: `${meta.id}/module/blockstore`,
29
+ activatesOn: ClientEvents.ClientReady,
30
+ activate: Blockstore,
31
+ }),
32
+ defineModule({
33
+ id: `${meta.id}/module/instances`,
34
+ activatesOn: ClientEvents.ClientReady,
35
+ activate: () => {
36
+ const instances: WnfsCapabilities.Instances = {};
37
+ return contributes(WnfsCapabilities.Instances, instances);
38
+ },
39
+ }),
40
+ defineModule({
41
+ id: `${meta.id}/module/translations`,
42
+ activatesOn: Events.SetupTranslations,
43
+ activate: () => contributes(Capabilities.Translations, translations),
44
+ }),
45
+ defineModule({
46
+ id: `${meta.id}/module/metadata`,
47
+ activatesOn: Events.SetupMetadata,
48
+ activate: () =>
49
+ contributes(Capabilities.Metadata, {
50
+ id: WnfsFile.File.typename,
51
+ metadata: {
52
+ // TODO(wittjosiah): Would be nice if icon could change based on the type of the file.
53
+ icon: 'ph--file--regular',
54
+ iconHue: 'teal',
55
+ },
56
+ }),
57
+ }),
58
+ defineModule({
59
+ id: `${meta.id}/module/object-form`,
60
+ activatesOn: ClientEvents.SetupSchema,
61
+ activate: () =>
62
+ contributes(
63
+ SpaceCapabilities.ObjectForm,
64
+ defineObjectForm({
65
+ objectSchema: WnfsFile.File,
66
+ formSchema: WnfsAction.UploadFileSchema,
67
+ getIntent: (props, options) =>
68
+ Function.pipe(
69
+ createIntent(WnfsAction.Upload, { ...props, space: options.space }),
70
+ chain(WnfsAction.Create, {}),
71
+ ),
57
72
  }),
58
- }),
59
- defineModule({
60
- id: `${meta.id}/module/object-form`,
61
- activatesOn: ClientEvents.SetupSchema,
62
- activate: () =>
63
- contributes(
64
- SpaceCapabilities.ObjectForm,
65
- defineObjectForm({
66
- objectSchema: FileType,
67
- formSchema: WnfsAction.UploadFileSchema,
68
- getIntent: (props, options) =>
69
- pipe(createIntent(WnfsAction.Upload, { ...props, space: options.space }), chain(WnfsAction.Create, {})),
70
- }),
71
- ),
72
- }),
73
- defineModule({
74
- id: `${meta.id}/module/file-uploader`,
75
- activatesOn: ClientEvents.ClientReady,
76
- activate: FileUploader,
77
- }),
78
- defineModule({
79
- id: `${meta.id}/module/markdown`,
80
- activatesOn: MarkdownEvents.SetupExtensions,
81
- activate: Markdown,
82
- }),
83
- defineModule({
84
- id: `${meta.id}/module/react-surface`,
85
- activatesOn: Events.SetupReactSurface,
86
- activate: ReactSurface,
87
- }),
88
- defineModule({
89
- id: `${meta.id}/module/intent-resolver`,
90
- activatesOn: Events.SetupIntentResolver,
91
- activate: IntentResolver,
92
- }),
93
- ]);
73
+ ),
74
+ }),
75
+ defineModule({
76
+ id: `${meta.id}/module/file-uploader`,
77
+ activatesOn: ClientEvents.ClientReady,
78
+ activate: FileUploader,
79
+ }),
80
+ defineModule({
81
+ id: `${meta.id}/module/markdown`,
82
+ activatesOn: MarkdownEvents.SetupExtensions,
83
+ activate: Markdown,
84
+ }),
85
+ defineModule({
86
+ id: `${meta.id}/module/react-surface`,
87
+ activatesOn: Events.SetupReactSurface,
88
+ activate: ReactSurface,
89
+ }),
90
+ defineModule({
91
+ id: `${meta.id}/module/intent-resolver`,
92
+ activatesOn: Events.SetupIntentResolver,
93
+ activate: IntentResolver,
94
+ }),
95
+ ]);
@@ -8,11 +8,11 @@ import { type PrivateDirectory, type PrivateForest } from 'wnfs';
8
8
  import { defineCapability } from '@dxos/app-framework';
9
9
  import { type SpaceId } from '@dxos/keys';
10
10
 
11
- import { WNFS_PLUGIN } from '../meta';
11
+ import { meta } from '../meta';
12
12
 
13
13
  export namespace WnfsCapabilities {
14
- export const Blockstore = defineCapability<Blockstore>(`${WNFS_PLUGIN}/capability/blockstore`);
14
+ export const Blockstore = defineCapability<Blockstore>(`${meta.id}/capability/blockstore`);
15
15
 
16
16
  export type Instances = Record<SpaceId, { directory: PrivateDirectory; forest: PrivateForest }>;
17
- export const Instances = defineCapability<Instances>(`${WNFS_PLUGIN}/capability/instances`);
17
+ export const Instances = defineCapability<Instances>(`${meta.id}/capability/instances`);
18
18
  }
@@ -2,7 +2,8 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { Effect, pipe } from 'effect';
5
+ import * as Effect from 'effect/Effect';
6
+ import * as Function from 'effect/Function';
6
7
 
7
8
  import { Capabilities, type PluginContext, chain, contributes, createIntent } from '@dxos/app-framework';
8
9
  import { SpaceAction } from '@dxos/plugin-space/types';
@@ -10,12 +11,14 @@ import { SpaceAction } from '@dxos/plugin-space/types';
10
11
  import { WnfsAction } from '../types';
11
12
 
12
13
  export default (context: PluginContext) => {
13
- return contributes(Capabilities.FileUploader, (file, space) => {
14
+ return contributes(Capabilities.FileUploader, (space, file) => {
14
15
  const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
15
-
16
16
  const program = Effect.gen(function* () {
17
- const fileInfo = yield* dispatch(createIntent(WnfsAction.Upload, { file, space }));
18
- yield* dispatch(pipe(createIntent(WnfsAction.Create, fileInfo), chain(SpaceAction.AddObject, { target: space })));
17
+ const fileInfo = yield* dispatch(createIntent(WnfsAction.Upload, { space, file }));
18
+ yield* dispatch(
19
+ Function.pipe(createIntent(WnfsAction.Create, fileInfo), chain(SpaceAction.AddObject, { target: space })),
20
+ );
21
+
19
22
  return fileInfo;
20
23
  });
21
24
 
@@ -3,10 +3,9 @@
3
3
  //
4
4
 
5
5
  import { Capabilities, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
6
- import { Obj } from '@dxos/echo';
7
6
 
8
7
  import { upload } from '../helpers';
9
- import { FileType, WnfsAction } from '../types';
8
+ import { WnfsAction, WnfsFile } from '../types';
10
9
 
11
10
  import { WnfsCapabilities } from './capabilities';
12
11
 
@@ -18,7 +17,7 @@ export default (context: PluginContext) =>
18
17
  intent: WnfsAction.Create,
19
18
  resolve: ({ name, type, cid }) => ({
20
19
  data: {
21
- object: Obj.make(FileType, { name, type, cid }),
20
+ object: WnfsFile.make({ name, type, cid }),
22
21
  },
23
22
  }),
24
23
  }),
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { type Schema } from 'effect';
5
+ import type * as Schema from 'effect/Schema';
6
6
  import React, { useCallback } from 'react';
7
7
 
8
8
  import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
@@ -11,19 +11,19 @@ import { findAnnotation } from '@dxos/effect';
11
11
  import { type InputProps } from '@dxos/react-ui-form';
12
12
 
13
13
  import { FileContainer, FileInput } from '../components';
14
- import { WNFS_PLUGIN } from '../meta';
15
- import { FileType, WnfsAction } from '../types';
14
+ import { meta } from '../meta';
15
+ import { WnfsAction, WnfsFile } from '../types';
16
16
 
17
17
  export default () =>
18
18
  contributes(Capabilities.ReactSurface, [
19
19
  createSurface({
20
- id: `${WNFS_PLUGIN}/article`,
20
+ id: `${meta.id}/article`,
21
21
  role: ['article', 'section', 'slide'],
22
- filter: (data): data is { subject: FileType } => Obj.instanceOf(FileType, data.subject),
22
+ filter: (data): data is { subject: WnfsFile.File } => Obj.instanceOf(WnfsFile.File, data.subject),
23
23
  component: ({ data, role }) => <FileContainer role={role} file={data.subject} />,
24
24
  }),
25
25
  createSurface({
26
- id: `${WNFS_PLUGIN}/create-form`,
26
+ id: `${meta.id}/create-form`,
27
27
  role: 'form-input',
28
28
  filter: (data): data is { prop: string; schema: Schema.Schema.Any } => {
29
29
  const annotation = findAnnotation<boolean>(
@@ -2,22 +2,23 @@
2
2
  // Copyright 2023 DXOS.org
3
3
  //
4
4
 
5
- import React, { useEffect, useState } from 'react';
5
+ import React, { useState } from 'react';
6
6
 
7
- import { useCapability } from '@dxos/app-framework';
7
+ import { useCapability } from '@dxos/app-framework/react';
8
8
  import { invariant } from '@dxos/invariant';
9
9
  import { getSpace } from '@dxos/react-client/echo';
10
+ import { useAsyncEffect } from '@dxos/react-ui';
10
11
  import { StackItem } from '@dxos/react-ui-stack';
11
12
 
12
13
  import { WnfsCapabilities } from '../capabilities';
13
14
  import { filePath, getBlobUrl, loadWnfs, wnfsUrl } from '../helpers';
14
- import { type FileType } from '../types';
15
+ import { type WnfsFile } from '../types';
15
16
 
16
17
  import { FilePreview } from './FilePreview';
17
18
 
18
19
  export type FileContainerProps = {
19
20
  role: string;
20
- file: FileType;
21
+ file: WnfsFile.File;
21
22
  };
22
23
 
23
24
  export const FileContainer = ({ file }: FileContainerProps) => {
@@ -25,17 +26,23 @@ export const FileContainer = ({ file }: FileContainerProps) => {
25
26
  const instances = useCapability(WnfsCapabilities.Instances);
26
27
  const [blobUrl, setBlobUrl] = useState<string>();
27
28
 
28
- useEffect(() => {
29
- const timeout = setTimeout(async () => {
30
- const space = getSpace(file);
31
- invariant(space);
32
- const { directory, forest } = await loadWnfs({ blockstore, instances, space });
33
- const path = filePath(file.cid.toString(), space);
34
- const url = await getBlobUrl({ wnfsUrl: wnfsUrl(path), blockstore, directory, forest, type: file.type });
35
- setBlobUrl(url);
29
+ useAsyncEffect(async () => {
30
+ const space = getSpace(file);
31
+ invariant(space);
32
+ const { directory, forest } = await loadWnfs({
33
+ blockstore,
34
+ instances,
35
+ space,
36
36
  });
37
-
38
- return () => clearTimeout(timeout);
37
+ const path = filePath(file.cid.toString(), space);
38
+ const url = await getBlobUrl({
39
+ wnfsUrl: wnfsUrl(path),
40
+ blockstore,
41
+ directory,
42
+ forest,
43
+ type: file.type,
44
+ });
45
+ setBlobUrl(url);
39
46
  }, [file]);
40
47
 
41
48
  if (!blobUrl) {
@@ -2,7 +2,7 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { type Schema } from 'effect';
5
+ import type * as Schema from 'effect/Schema';
6
6
  import React, { useCallback } from 'react';
7
7
  import { useDropzone } from 'react-dropzone';
8
8
 
@@ -10,7 +10,7 @@ import { findAnnotation } from '@dxos/effect';
10
10
  import { useTranslation } from '@dxos/react-ui';
11
11
  import { mx } from '@dxos/react-ui-theme';
12
12
 
13
- import { WNFS_PLUGIN } from '../meta';
13
+ import { meta } from '../meta';
14
14
  import { WnfsAction } from '../types';
15
15
 
16
16
  export type FileInputProps = {
@@ -19,7 +19,7 @@ export type FileInputProps = {
19
19
  };
20
20
 
21
21
  export const FileInput = ({ schema, onChange }: FileInputProps) => {
22
- const { t } = useTranslation(WNFS_PLUGIN);
22
+ const { t } = useTranslation(meta.id);
23
23
  const accept = findAnnotation<Record<string, string[]>>(schema.ast, WnfsAction.UploadAnnotationId);
24
24
 
25
25
  const onDropAccepted = useCallback((files: File[]) => onChange?.(files[0]), [onChange]);
@@ -37,7 +37,7 @@ export const FileInput = ({ schema, onChange }: FileInputProps) => {
37
37
  'flex flex-col items-center p-8 border border-separator',
38
38
  isFocused && 'focus-ring',
39
39
  isDragAccept && 'bg-attention',
40
- isDragReject && 'border-error',
40
+ isDragReject && 'border-roseFill',
41
41
  )}
42
42
  >
43
43
  <input {...getInputProps()} />
@@ -14,10 +14,10 @@ export type FilePreviewProps = ThemedClassName<{ type: string; url: string }>;
14
14
  */
15
15
  export const FilePreview = ({ type, url, classNames }: FilePreviewProps) => {
16
16
  if (type.startsWith('image/')) {
17
- return <img className={mx('w-full h-full object-contain', classNames)} src={url} />;
17
+ return <img className={mx('is-full bs-full object-contain', classNames)} src={url} />;
18
18
  } else if (type.startsWith('video/')) {
19
- return <video className={mx('w-full h-full object-contain', classNames)} src={url} controls />;
19
+ return <video className={mx('is-full bs-full object-contain', classNames)} src={url} controls />;
20
20
  } else {
21
- return <iframe className={mx('w-full h-full overflow-auto', classNames)} src={url} />;
21
+ return <iframe className={mx('is-full bs-full overflow-auto', classNames)} src={url} />;
22
22
  }
23
23
  };
@@ -2,8 +2,7 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- import '@dxos-theme';
6
-
5
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
7
6
  import type { Blockstore } from 'interface-blockstore';
8
7
  import React, { type ChangeEvent, useEffect, useState } from 'react';
9
8
 
@@ -11,6 +10,7 @@ import { faker } from '@dxos/random';
11
10
  import { useSpace } from '@dxos/react-client/echo';
12
11
  import { withClientProvider } from '@dxos/react-client/testing';
13
12
  import { useThemeContext } from '@dxos/react-ui';
13
+ import { withTheme } from '@dxos/react-ui/testing';
14
14
  import {
15
15
  createBasicExtensions,
16
16
  createMarkdownExtensions,
@@ -19,7 +19,6 @@ import {
19
19
  processEditorPayload,
20
20
  useTextEditor,
21
21
  } from '@dxos/react-ui-editor';
22
- import { withLayout, withTheme } from '@dxos/storybook-utils';
23
22
 
24
23
  import { create as createBlockstore } from '../blockstore';
25
24
  import { upload } from '../helpers';
@@ -30,7 +29,7 @@ faker.seed(1);
30
29
  const initialValue = faker.lorem.paragraphs(100);
31
30
  const instances = {};
32
31
 
33
- const Story = () => {
32
+ const DefaultStory = () => {
34
33
  const { themeMode } = useThemeContext();
35
34
  const space = useSpace();
36
35
  const [blockstore, setBlockstore] = useState<Blockstore>();
@@ -55,7 +54,7 @@ const Story = () => {
55
54
  initialValue,
56
55
  extensions: [
57
56
  createBasicExtensions(),
58
- createMarkdownExtensions({ themeMode }),
57
+ createMarkdownExtensions(),
59
58
  createThemeExtensions({ themeMode, syntaxHighlighting: true }),
60
59
  blockstore && space ? [image({ blockstore, instances, space })] : [],
61
60
  decorateMarkdown(),
@@ -87,15 +86,19 @@ const Story = () => {
87
86
  <div className='mb-2'>
88
87
  <input type='file' accept='image/*' onChange={onFileChange} />
89
88
  </div>
90
- <div className='w-[50rem]' ref={parentRef} {...focusAttributes} />
89
+ <div className='is-[50rem]' ref={parentRef} {...focusAttributes} />
91
90
  </>
92
91
  );
93
92
  };
94
93
 
95
- export default {
94
+ const meta = {
96
95
  title: 'plugins/plugin-wnfs/image',
97
- render: Story,
98
- decorators: [withClientProvider({ createIdentity: true, createSpace: true }), withTheme, withLayout()],
99
- };
96
+ render: DefaultStory,
97
+ decorators: [withTheme, withClientProvider({ createIdentity: true, createSpace: true })],
98
+ } satisfies Meta<typeof DefaultStory>;
99
+
100
+ export default meta;
101
+
102
+ type Story = StoryObj<typeof meta>;
100
103
 
101
- export const Default = {};
104
+ export const Default: Story = {};
@@ -80,16 +80,16 @@ export const image = (options: ImageOptions): Extension[] => {
80
80
  };
81
81
 
82
82
  const buildDecorations = ({
83
+ state,
83
84
  from,
84
85
  to,
85
- state,
86
86
  blobUrlCache,
87
87
  preload,
88
88
  options: { blockstore, instances, space },
89
89
  }: {
90
+ state: EditorState;
90
91
  from: number;
91
92
  to: number;
92
- state: EditorState;
93
93
  blobUrlCache: Record<string, string>;
94
94
  preload: (url: string) => void;
95
95
  options: ImageOptions;
@@ -165,11 +165,11 @@ class WnfsImageWidget extends WidgetType {
165
165
  super();
166
166
  }
167
167
 
168
- override eq(other: this): boolean {
169
- return this._wnfsUrl === (other as any as WnfsImageWidget)._wnfsUrl;
168
+ override eq(other: this) {
169
+ return this._wnfsUrl === other._wnfsUrl;
170
170
  }
171
171
 
172
- override toDOM(view: EditorView): HTMLDivElement {
172
+ override toDOM(view: EditorView) {
173
173
  if (typeof this._url === 'string') {
174
174
  return createImg(view, this._url);
175
175
  }
package/src/meta.ts CHANGED
@@ -3,13 +3,16 @@
3
3
  //
4
4
 
5
5
  import { type PluginMeta } from '@dxos/app-framework';
6
-
7
- export const WNFS_PLUGIN = 'dxos.org/plugin/wnfs';
6
+ import { trim } from '@dxos/util';
8
7
 
9
8
  export const meta: PluginMeta = {
10
- id: WNFS_PLUGIN,
9
+ id: 'dxos.org/plugin/wnfs',
11
10
  name: 'WNFS',
12
- description: 'Manage and view files with via the Web Native File System (WNFS).',
11
+ description: trim`
12
+ Decentralized file storage using the Web Native File System protocol.
13
+ Store and sync files with end-to-end encryption across devices without central servers.
14
+ `,
13
15
  icon: 'ph--file-cloud--regular',
16
+ iconHue: 'teal',
14
17
  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-wnfs',
15
18
  };
@@ -5,12 +5,12 @@
5
5
  import { type Resource } from '@dxos/react-ui';
6
6
 
7
7
  import { meta } from './meta';
8
- import { FileType } from './types';
8
+ import { WnfsFile } from './types';
9
9
 
10
10
  export const translations = [
11
11
  {
12
12
  'en-US': {
13
- [FileType.typename]: {
13
+ [WnfsFile.File.typename]: {
14
14
  'typename label': 'File',
15
15
  'object name placeholder': 'New file',
16
16
  'rename object label': 'Rename file',
@@ -0,0 +1,24 @@
1
+ //
2
+ // Copyright 2024 DXOS.org
3
+ //
4
+
5
+ import * as Schema from 'effect/Schema';
6
+
7
+ import { Obj, Type } from '@dxos/echo';
8
+ import { FormAnnotation } from '@dxos/echo/internal';
9
+
10
+ export const File = Schema.Struct({
11
+ name: Schema.String.pipe(Schema.optional),
12
+ type: Schema.String.pipe(FormAnnotation.set(false)),
13
+ cid: Schema.String.pipe(FormAnnotation.set(false)),
14
+ timestamp: Schema.String.pipe(FormAnnotation.set(false), Schema.optional),
15
+ }).pipe(
16
+ Type.Obj({
17
+ typename: 'dxos.org/type/File',
18
+ version: '0.1.0',
19
+ }),
20
+ );
21
+
22
+ export type File = Schema.Schema.Type<typeof File>;
23
+
24
+ export const make = (props: Obj.MakeProps<typeof File>) => Obj.make(File, props);
@@ -2,5 +2,5 @@
2
2
  // Copyright 2024 DXOS.org
3
3
  //
4
4
 
5
- export * from './file';
5
+ export * as WnfsFile from './File';
6
6
  export * from './types';