@dxos/plugin-masonry 0.8.4-main.66e292d → 0.8.4-main.6fa680abb7

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 (92) hide show
  1. package/dist/lib/browser/MasonryContainer-G5D7SXNF.mjs +82 -0
  2. package/dist/lib/browser/MasonryContainer-G5D7SXNF.mjs.map +7 -0
  3. package/dist/lib/browser/chunk-7W5GV4MG.mjs +19 -0
  4. package/dist/lib/browser/chunk-7W5GV4MG.mjs.map +7 -0
  5. package/dist/lib/browser/chunk-J5LGTIGS.mjs +10 -0
  6. package/dist/lib/browser/chunk-J5LGTIGS.mjs.map +7 -0
  7. package/dist/lib/browser/chunk-XTJ24XE2.mjs +64 -0
  8. package/dist/lib/browser/chunk-XTJ24XE2.mjs.map +7 -0
  9. package/dist/lib/browser/index.mjs +42 -54
  10. package/dist/lib/browser/index.mjs.map +4 -4
  11. package/dist/lib/browser/meta.json +1 -1
  12. package/dist/lib/browser/react-surface-THLOBRJW.mjs +42 -0
  13. package/dist/lib/browser/react-surface-THLOBRJW.mjs.map +7 -0
  14. package/dist/lib/browser/types/index.mjs +2 -1
  15. package/dist/lib/node-esm/MasonryContainer-HB775HET.mjs +83 -0
  16. package/dist/lib/node-esm/MasonryContainer-HB775HET.mjs.map +7 -0
  17. package/dist/lib/node-esm/chunk-CCWUD5KF.mjs +21 -0
  18. package/dist/lib/node-esm/chunk-CCWUD5KF.mjs.map +7 -0
  19. package/dist/lib/node-esm/chunk-HSLMI22Q.mjs +11 -0
  20. package/dist/lib/node-esm/chunk-HSLMI22Q.mjs.map +7 -0
  21. package/dist/lib/node-esm/chunk-JXCM7LNL.mjs +65 -0
  22. package/dist/lib/node-esm/chunk-JXCM7LNL.mjs.map +7 -0
  23. package/dist/lib/node-esm/index.mjs +42 -54
  24. package/dist/lib/node-esm/index.mjs.map +4 -4
  25. package/dist/lib/node-esm/meta.json +1 -1
  26. package/dist/lib/node-esm/react-surface-DC6QGTSE.mjs +43 -0
  27. package/dist/lib/node-esm/react-surface-DC6QGTSE.mjs.map +7 -0
  28. package/dist/lib/node-esm/types/index.mjs +2 -1
  29. package/dist/types/src/MasonryPlugin.d.ts +2 -1
  30. package/dist/types/src/MasonryPlugin.d.ts.map +1 -1
  31. package/dist/types/src/capabilities/index.d.ts +1 -2
  32. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  33. package/dist/types/src/capabilities/react-surface/index.d.ts +3 -0
  34. package/dist/types/src/capabilities/react-surface/index.d.ts.map +1 -0
  35. package/dist/types/src/capabilities/react-surface/react-surface.d.ts +5 -0
  36. package/dist/types/src/capabilities/react-surface/react-surface.d.ts.map +1 -0
  37. package/dist/types/src/components/index.d.ts +1 -0
  38. package/dist/types/src/components/index.d.ts.map +1 -0
  39. package/dist/types/src/containers/MasonryContainer/MasonryContainer.d.ts +12 -0
  40. package/dist/types/src/containers/MasonryContainer/MasonryContainer.d.ts.map +1 -0
  41. package/dist/types/src/containers/MasonryContainer/MasonryContainer.stories.d.ts.map +1 -0
  42. package/dist/types/src/containers/MasonryContainer/index.d.ts +3 -0
  43. package/dist/types/src/containers/MasonryContainer/index.d.ts.map +1 -0
  44. package/dist/types/src/containers/index.d.ts +3 -0
  45. package/dist/types/src/containers/index.d.ts.map +1 -0
  46. package/dist/types/src/meta.d.ts +2 -2
  47. package/dist/types/src/meta.d.ts.map +1 -1
  48. package/dist/types/src/translations.d.ts +2 -0
  49. package/dist/types/src/translations.d.ts.map +1 -1
  50. package/dist/types/src/types/Masonry.d.ts +10 -19
  51. package/dist/types/src/types/Masonry.d.ts.map +1 -1
  52. package/dist/types/src/types/MasonryAction.d.ts +0 -17
  53. package/dist/types/src/types/MasonryAction.d.ts.map +1 -1
  54. package/dist/types/tsconfig.tsbuildinfo +1 -1
  55. package/package.json +40 -34
  56. package/src/MasonryPlugin.tsx +27 -45
  57. package/src/capabilities/index.ts +1 -4
  58. package/src/capabilities/react-surface/index.ts +7 -0
  59. package/src/capabilities/react-surface/react-surface.tsx +32 -0
  60. package/src/components/index.ts +3 -0
  61. package/src/containers/MasonryContainer/MasonryContainer.stories.tsx +80 -0
  62. package/src/containers/MasonryContainer/MasonryContainer.tsx +91 -0
  63. package/src/containers/MasonryContainer/index.ts +7 -0
  64. package/src/containers/index.ts +7 -0
  65. package/src/meta.ts +3 -3
  66. package/src/translations.ts +1 -0
  67. package/src/types/Masonry.ts +11 -29
  68. package/src/types/MasonryAction.ts +0 -15
  69. package/dist/lib/browser/chunk-4I5S2QKH.mjs +0 -109
  70. package/dist/lib/browser/chunk-4I5S2QKH.mjs.map +0 -7
  71. package/dist/lib/browser/intent-resolver-7WOSAD4H.mjs +0 -35
  72. package/dist/lib/browser/intent-resolver-7WOSAD4H.mjs.map +0 -7
  73. package/dist/lib/browser/react-surface-CFD3AW3U.mjs +0 -95
  74. package/dist/lib/browser/react-surface-CFD3AW3U.mjs.map +0 -7
  75. package/dist/lib/node-esm/chunk-VKN225ZV.mjs +0 -110
  76. package/dist/lib/node-esm/chunk-VKN225ZV.mjs.map +0 -7
  77. package/dist/lib/node-esm/intent-resolver-AXT5HIJX.mjs +0 -36
  78. package/dist/lib/node-esm/intent-resolver-AXT5HIJX.mjs.map +0 -7
  79. package/dist/lib/node-esm/react-surface-7MHZZTKP.mjs +0 -96
  80. package/dist/lib/node-esm/react-surface-7MHZZTKP.mjs.map +0 -7
  81. package/dist/types/src/capabilities/intent-resolver.d.ts +0 -4
  82. package/dist/types/src/capabilities/intent-resolver.d.ts.map +0 -1
  83. package/dist/types/src/capabilities/react-surface.d.ts +0 -4
  84. package/dist/types/src/capabilities/react-surface.d.ts.map +0 -1
  85. package/dist/types/src/components/MasonryContainer.d.ts +0 -7
  86. package/dist/types/src/components/MasonryContainer.d.ts.map +0 -1
  87. package/dist/types/src/components/MasonryContainer.stories.d.ts.map +0 -1
  88. package/src/capabilities/intent-resolver.ts +0 -22
  89. package/src/capabilities/react-surface.tsx +0 -22
  90. package/src/components/MasonryContainer.stories.tsx +0 -79
  91. package/src/components/MasonryContainer.tsx +0 -59
  92. /package/dist/types/src/{components → containers/MasonryContainer}/MasonryContainer.stories.d.ts +0 -0
package/package.json CHANGED
@@ -1,9 +1,13 @@
1
1
  {
2
2
  "name": "@dxos/plugin-masonry",
3
- "version": "0.8.4-main.66e292d",
3
+ "version": "0.8.4-main.6fa680abb7",
4
4
  "description": "Masonry DXOS Surface plugin",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "https://github.com/dxos/dxos"
10
+ },
7
11
  "license": "MIT",
8
12
  "author": "DXOS.org",
9
13
  "sideEffects": true,
@@ -35,43 +39,45 @@
35
39
  "src"
36
40
  ],
37
41
  "dependencies": {
38
- "@preact-signals/safe-react": "^0.9.0",
39
- "@preact/signals-core": "^1.12.1",
40
- "@preact/signals-react": "^3.3.0",
41
- "@dxos/app-framework": "0.8.4-main.66e292d",
42
- "@dxos/echo": "0.8.4-main.66e292d",
43
- "@dxos/effect": "0.8.4-main.66e292d",
44
- "@dxos/plugin-search": "0.8.4-main.66e292d",
45
- "@dxos/plugin-client": "0.8.4-main.66e292d",
46
- "@dxos/react-client": "0.8.4-main.66e292d",
47
- "@dxos/plugin-space": "0.8.4-main.66e292d",
48
- "@dxos/react-ui": "0.8.4-main.66e292d",
49
- "@dxos/react-ui-form": "0.8.4-main.66e292d",
50
- "@dxos/react-ui-stack": "0.8.4-main.66e292d",
51
- "@dxos/react-ui-masonry": "0.8.4-main.66e292d",
52
- "@dxos/schema": "0.8.4-main.66e292d",
53
- "@dxos/types": "0.8.4-main.66e292d",
54
- "@dxos/util": "0.8.4-main.66e292d"
42
+ "@dxos/app-framework": "0.8.4-main.6fa680abb7",
43
+ "@dxos/app-toolkit": "0.8.4-main.6fa680abb7",
44
+ "@dxos/echo": "0.8.4-main.6fa680abb7",
45
+ "@dxos/effect": "0.8.4-main.6fa680abb7",
46
+ "@dxos/operation": "0.8.4-main.6fa680abb7",
47
+ "@dxos/plugin-client": "0.8.4-main.6fa680abb7",
48
+ "@dxos/plugin-search": "0.8.4-main.6fa680abb7",
49
+ "@dxos/plugin-space": "0.8.4-main.6fa680abb7",
50
+ "@dxos/react-ui": "0.8.4-main.6fa680abb7",
51
+ "@dxos/react-client": "0.8.4-main.6fa680abb7",
52
+ "@dxos/react-ui-form": "0.8.4-main.6fa680abb7",
53
+ "@dxos/react-ui-menu": "0.8.4-main.6fa680abb7",
54
+ "@dxos/react-ui-masonry": "0.8.4-main.6fa680abb7",
55
+ "@dxos/react-ui-mosaic": "0.8.4-main.6fa680abb7",
56
+ "@dxos/react-ui-stack": "0.8.4-main.6fa680abb7",
57
+ "@dxos/schema": "0.8.4-main.6fa680abb7",
58
+ "@dxos/types": "0.8.4-main.6fa680abb7",
59
+ "@dxos/util": "0.8.4-main.6fa680abb7"
55
60
  },
56
61
  "devDependencies": {
57
- "@types/react": "~19.2.2",
58
- "@types/react-dom": "~19.2.2",
59
- "effect": "3.18.3",
60
- "react": "~19.2.0",
61
- "react-dom": "~19.2.0",
62
- "vite": "7.1.9",
63
- "@dxos/plugin-preview": "0.8.4-main.66e292d",
64
- "@dxos/plugin-theme": "0.8.4-main.66e292d",
65
- "@dxos/random": "0.8.4-main.66e292d",
66
- "@dxos/react-ui-theme": "0.8.4-main.66e292d",
67
- "@dxos/storybook-utils": "0.8.4-main.66e292d"
62
+ "@types/react": "~19.2.7",
63
+ "@types/react-dom": "~19.2.3",
64
+ "effect": "3.19.16",
65
+ "react": "~19.2.3",
66
+ "react-dom": "~19.2.3",
67
+ "vite": "^7.1.11",
68
+ "@dxos/plugin-preview": "0.8.4-main.6fa680abb7",
69
+ "@dxos/plugin-testing": "0.8.4-main.6fa680abb7",
70
+ "@dxos/plugin-theme": "0.8.4-main.6fa680abb7",
71
+ "@dxos/random": "0.8.4-main.6fa680abb7",
72
+ "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
73
+ "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
68
74
  },
69
75
  "peerDependencies": {
70
- "effect": "^3.13.3",
71
- "react": "^19.0.0",
72
- "react-dom": "^19.0.0",
73
- "@dxos/react-ui": "0.8.4-main.66e292d",
74
- "@dxos/react-ui-theme": "0.8.4-main.66e292d"
76
+ "effect": "3.19.16",
77
+ "react": "~19.2.3",
78
+ "react-dom": "~19.2.3",
79
+ "@dxos/react-ui": "0.8.4-main.6fa680abb7",
80
+ "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
75
81
  },
76
82
  "publishConfig": {
77
83
  "access": "public"
@@ -2,55 +2,37 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
5
+ import * as Effect from 'effect/Effect';
6
+
7
+ import { Plugin } from '@dxos/app-framework';
8
+ import { AppPlugin } from '@dxos/app-toolkit';
6
9
  import { Type } from '@dxos/echo';
7
- import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
8
- import { type CreateObjectIntent } from '@dxos/plugin-space/types';
10
+ import { type CreateObject } from '@dxos/plugin-space/types';
11
+ import { ViewModel } from '@dxos/schema';
9
12
 
10
- import { IntentResolver, ReactSurface } from './capabilities';
13
+ import { ReactSurface } from './capabilities';
11
14
  import { meta } from './meta';
12
15
  import { translations } from './translations';
13
16
  import { Masonry, MasonryAction } from './types';
14
17
 
15
- export const MasonryPlugin = definePlugin(meta, () => [
16
- defineModule({
17
- id: `${meta.id}/module/translations`,
18
- activatesOn: Events.SetupTranslations,
19
- activate: () => contributes(Capabilities.Translations, translations),
20
- }),
21
- defineModule({
22
- id: `${meta.id}/module/react-surface`,
23
- activatesOn: Events.SetupReactSurface,
24
- activate: ReactSurface,
25
- }),
26
- defineModule({
27
- id: `${meta.id}/module/metadata`,
28
- activatesOn: Events.SetupMetadata,
29
- activate: () =>
30
- contributes(Capabilities.Metadata, {
31
- id: Type.getTypename(Masonry.Masonry),
32
- metadata: {
33
- icon: 'ph--wall--regular',
34
- iconHue: 'green',
35
- inputSchema: MasonryAction.MasonryProps,
36
- createObjectIntent: ((props, options) =>
37
- createIntent(MasonryAction.CreateMasonry, { ...props, space: options.space })) satisfies CreateObjectIntent,
38
- },
39
- }),
40
- }),
41
- defineModule({
42
- id: `${meta.id}/module/schema`,
43
- activatesOn: ClientEvents.SetupSchema,
44
- activate: () => contributes(ClientCapabilities.Schema, [Masonry.Masonry]),
45
- }),
46
- defineModule({
47
- id: `${meta.id}/module/react-surface`,
48
- activatesOn: Events.SetupReactSurface,
49
- activate: ReactSurface,
50
- }),
51
- defineModule({
52
- id: `${meta.id}/module/intent-resolver`,
53
- activatesOn: Events.SetupIntentResolver,
54
- activate: IntentResolver,
18
+ export const MasonryPlugin = Plugin.define(meta).pipe(
19
+ AppPlugin.addMetadataModule({
20
+ metadata: {
21
+ id: Type.getTypename(Masonry.Masonry),
22
+ metadata: {
23
+ icon: 'ph--wall--regular',
24
+ iconHue: 'green',
25
+ inputSchema: MasonryAction.MasonryProps,
26
+ createObject: ((props, { db }) =>
27
+ Effect.promise(async () => {
28
+ const { view } = await ViewModel.makeFromDatabase({ db, typename: props.typename });
29
+ return Masonry.make({ name: props.name, view });
30
+ })) satisfies CreateObject,
31
+ },
32
+ },
55
33
  }),
56
- ]);
34
+ AppPlugin.addSchemaModule({ schema: [Masonry.Masonry] }),
35
+ AppPlugin.addSurfaceModule({ activate: ReactSurface }),
36
+ AppPlugin.addTranslationsModule({ translations }),
37
+ Plugin.make,
38
+ );
@@ -2,7 +2,4 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { lazy } from '@dxos/app-framework';
6
-
7
- export const ReactSurface = lazy(() => import('./react-surface'));
8
- export const IntentResolver = lazy(() => import('./intent-resolver'));
5
+ export * from './react-surface';
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { Capability } from '@dxos/app-framework';
6
+
7
+ export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
@@ -0,0 +1,32 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import * as Effect from 'effect/Effect';
6
+ import React from 'react';
7
+
8
+ import { Capabilities, Capability } from '@dxos/app-framework';
9
+ import { Surface } from '@dxos/app-framework/ui';
10
+ import { Obj } from '@dxos/echo';
11
+ import { View } from '@dxos/echo';
12
+
13
+ import { MasonryContainer } from '../../containers';
14
+ import { meta } from '../../meta';
15
+ import { Masonry } from '../../types';
16
+
17
+ export default Capability.makeModule(() =>
18
+ Effect.succeed(
19
+ Capability.contributes(Capabilities.ReactSurface, [
20
+ Surface.create({
21
+ id: meta.id,
22
+ role: ['article', 'section'],
23
+ filter: (data): data is { subject: Masonry.Masonry | View.View } =>
24
+ Obj.instanceOf(Masonry.Masonry, data.subject) || Obj.instanceOf(View.View, data.subject),
25
+ component: ({ data, role }) => {
26
+ const view = Obj.instanceOf(View.View, data.subject) ? data.subject : data.subject.view;
27
+ return <MasonryContainer view={view} role={role} />;
28
+ },
29
+ }),
30
+ ]),
31
+ ),
32
+ );
@@ -0,0 +1,3 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
@@ -0,0 +1,80 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { type Meta, type StoryObj } from '@storybook/react-vite';
6
+ import * as Effect from 'effect/Effect';
7
+ import React from 'react';
8
+
9
+ import { withPluginManager } from '@dxos/app-framework/testing';
10
+ import { View } from '@dxos/echo';
11
+ import { ClientPlugin } from '@dxos/plugin-client';
12
+ import { PreviewPlugin } from '@dxos/plugin-preview';
13
+ import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
14
+ import { faker } from '@dxos/random';
15
+ import { Filter, useObject, useQuery, useSpaces } from '@dxos/react-client/echo';
16
+ import { withLayout, withTheme } from '@dxos/react-ui/testing';
17
+ import { ViewModel } from '@dxos/schema';
18
+ import { createObjectFactory } from '@dxos/schema/testing';
19
+ import { Organization } from '@dxos/types';
20
+
21
+ import { Masonry } from '../../types';
22
+
23
+ import { MasonryContainer } from './MasonryContainer';
24
+
25
+ faker.seed(0);
26
+
27
+ const StorybookMasonry = () => {
28
+ const spaces = useSpaces();
29
+ const space = spaces[spaces.length - 1];
30
+ const masonries = useQuery(space?.db, Filter.type(Masonry.Masonry));
31
+ const [masonry] = useObject(masonries.at(0));
32
+
33
+ return masonry ? <MasonryContainer view={masonry.view} role='story' /> : null;
34
+ };
35
+
36
+ const meta = {
37
+ title: 'plugins/plugin-masonry/containers/Masonry',
38
+ component: StorybookMasonry,
39
+ render: () => <StorybookMasonry />,
40
+ decorators: [
41
+ withTheme(),
42
+ withLayout({ layout: 'fullscreen' }),
43
+ withPluginManager({
44
+ plugins: [
45
+ ...corePlugins(),
46
+ StorybookPlugin({}),
47
+ ClientPlugin({
48
+ types: [Organization.Organization, View.View, Masonry.Masonry],
49
+ onClientInitialized: ({ client }) =>
50
+ Effect.gen(function* () {
51
+ yield* Effect.promise(() => client.halo.createIdentity());
52
+ const space = yield* Effect.promise(() => client.spaces.create());
53
+ yield* Effect.promise(() => space.waitUntilReady());
54
+ const { view } = yield* Effect.promise(() =>
55
+ ViewModel.makeFromDatabase({
56
+ db: space.db,
57
+ typename: Organization.Organization.typename,
58
+ }),
59
+ );
60
+ const masonry = Masonry.make({ view });
61
+ space.db.add(masonry);
62
+ const factory = createObjectFactory(space.db, faker as any);
63
+ yield* Effect.promise(() => factory([{ type: Organization.Organization, count: 64 }]));
64
+ }),
65
+ }),
66
+
67
+ PreviewPlugin(),
68
+ ],
69
+ }),
70
+ ],
71
+ parameters: {
72
+ layout: 'fullscreen',
73
+ },
74
+ } satisfies Meta;
75
+
76
+ export default meta;
77
+
78
+ type Story = StoryObj<typeof meta>;
79
+
80
+ export const Default: Story = {};
@@ -0,0 +1,91 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import type * as Schema from 'effect/Schema';
6
+ import React, { useEffect, useState } from 'react';
7
+
8
+ import { Surface, useCapabilities } from '@dxos/app-framework/ui';
9
+ import { AppCapabilities } from '@dxos/app-toolkit';
10
+ import { useObjectMenuItems, useObjectNavigate } from '@dxos/app-toolkit/ui';
11
+ import { Filter, Obj, type Ref, Type } from '@dxos/echo';
12
+ import { type View } from '@dxos/echo';
13
+ import { useGlobalFilteredObjects } from '@dxos/plugin-search';
14
+ import { useObject, useQuery } from '@dxos/react-client/echo';
15
+ import { Card, Toolbar } from '@dxos/react-ui';
16
+ import { Masonry as MasonryComponent } from '@dxos/react-ui-masonry';
17
+ import { Menu } from '@dxos/react-ui-menu';
18
+ import { getTypenameFromQuery } from '@dxos/schema';
19
+
20
+ export type MasonryContainerProps = {
21
+ view: View.View;
22
+ role?: string;
23
+ };
24
+
25
+ export const MasonryContainer = ({
26
+ view: viewOrRef,
27
+ role: _role,
28
+ }: {
29
+ view: View.View | Ref.Ref<View.View>;
30
+ role?: string;
31
+ }) => {
32
+ const [view] = useObject(viewOrRef);
33
+ const schemas = useCapabilities(AppCapabilities.Schema);
34
+ const db = view && Obj.getDatabase(view);
35
+ const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
36
+
37
+ const [cardSchema, setCardSchema] = useState<Schema.Schema.AnyNoContext>();
38
+
39
+ useEffect(() => {
40
+ const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
41
+ if (staticSchema) {
42
+ setCardSchema(() => staticSchema);
43
+ }
44
+ if (!staticSchema && typename && db) {
45
+ const query = db.schemaRegistry.query({ typename });
46
+ const unsubscribe = query.subscribe(
47
+ () => {
48
+ const [schema] = query.results;
49
+ if (schema) {
50
+ setCardSchema(schema);
51
+ }
52
+ },
53
+ { fire: true },
54
+ );
55
+ return unsubscribe;
56
+ }
57
+ }, [schemas, typename, db]);
58
+
59
+ const objects = useQuery(db, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
60
+ const filteredObjects = useGlobalFilteredObjects(objects);
61
+
62
+ return (
63
+ <MasonryComponent.Root
64
+ items={filteredObjects}
65
+ render={Item as any}
66
+ classNames='w-full max-w-full h-full max-h-full overflow-y-auto p-4'
67
+ />
68
+ );
69
+ };
70
+
71
+ const Item = ({ data }: { data: any }) => {
72
+ const objectMenuItems = useObjectMenuItems(data);
73
+ const handleNavigate = useObjectNavigate(data);
74
+
75
+ return (
76
+ <Menu.Root>
77
+ <Card.Root>
78
+ <Card.Toolbar>
79
+ <span />
80
+ <Card.Title onClick={handleNavigate}>{Obj.getLabel(data)}</Card.Title>
81
+ {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
82
+ <Menu.Trigger asChild disabled={!objectMenuItems?.length}>
83
+ <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
84
+ </Menu.Trigger>
85
+ <Menu.Content items={objectMenuItems} />
86
+ </Card.Toolbar>
87
+ <Surface.Surface role='card--content' limit={1} data={{ subject: data }} />
88
+ </Card.Root>
89
+ </Menu.Root>
90
+ );
91
+ };
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { MasonryContainer } from './MasonryContainer';
6
+
7
+ export default MasonryContainer;
@@ -0,0 +1,7 @@
1
+ //
2
+ // Copyright 2025 DXOS.org
3
+ //
4
+
5
+ import { type ComponentType, lazy } from 'react';
6
+
7
+ export const MasonryContainer: ComponentType<any> = lazy(() => import('./MasonryContainer'));
package/src/meta.ts CHANGED
@@ -2,11 +2,11 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import { type PluginMeta } from '@dxos/app-framework';
5
+ import { type Plugin } from '@dxos/app-framework';
6
6
  import { trim } from '@dxos/util';
7
7
 
8
- export const meta: PluginMeta = {
9
- id: 'dxos.org/plugin/masonry',
8
+ export const meta: Plugin.Meta = {
9
+ id: 'org.dxos.plugin.masonry',
10
10
  name: 'Masonry',
11
11
  description: trim`
12
12
  Responsive grid layout that displays query results in an adaptive masonry pattern.
@@ -17,6 +17,7 @@ export const translations = [
17
17
  'typename label_one': 'Masonry',
18
18
  'typename label_other': 'Masonries',
19
19
  'object name placeholder': 'New masonry',
20
+ 'add object label': 'Add masonry',
20
21
  'rename object label': 'Rename masonry',
21
22
  'delete object label': 'Delete masonry',
22
23
  'object deleted label': 'Masonry deleted',
@@ -5,32 +5,32 @@
5
5
  import * as Schema from 'effect/Schema';
6
6
 
7
7
  import { Obj, Ref, Type } from '@dxos/echo';
8
+ import { View } from '@dxos/echo';
8
9
  import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
9
- import { View, ViewAnnotation } from '@dxos/schema';
10
+ import { ViewAnnotation } from '@dxos/schema';
10
11
 
11
- const MasonrySchema = Schema.Struct({
12
+ export const Masonry = Schema.Struct({
12
13
  name: Schema.String.pipe(Schema.optional),
13
14
 
14
- view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
15
+ view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
15
16
 
16
17
  arrangement: Schema.Array(
17
18
  Schema.Struct({
18
19
  ids: Schema.Array(Obj.ID),
19
20
  hidden: Schema.optional(Schema.Boolean),
20
- }).pipe(Schema.mutable),
21
- ).pipe(Schema.mutable, FormInputAnnotation.set(false), Schema.optional),
21
+ }),
22
+ ).pipe(FormInputAnnotation.set(false), Schema.optional),
22
23
  // TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.
23
24
  }).pipe(
24
- Type.Obj({
25
- typename: 'dxos.org/type/Masonry',
26
- version: '0.2.0',
25
+ Type.object({
26
+ typename: 'org.dxos.type.masonry',
27
+ version: '0.1.0',
27
28
  }),
28
29
  LabelAnnotation.set(['name']),
29
30
  ViewAnnotation.set(true),
30
31
  );
31
- export interface Masonry extends Schema.Schema.Type<typeof MasonrySchema> {}
32
- export interface MasonryEncoded extends Schema.Schema.Encoded<typeof MasonrySchema> {}
33
- export const Masonry: Schema.Schema<Masonry, MasonryEncoded> = MasonrySchema;
32
+
33
+ export interface Masonry extends Schema.Schema.Type<typeof Masonry> {}
34
34
 
35
35
  type MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {
36
36
  view: View.View;
@@ -42,21 +42,3 @@ type MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {
42
42
  export const make = ({ name, arrangement = [], view }: MakeProps): Masonry => {
43
43
  return Obj.make(Masonry, { name, view: Ref.make(view), arrangement });
44
44
  };
45
-
46
- //
47
- // V1
48
- //
49
-
50
- export const MasonryV1 = Schema.Struct({
51
- arrangement: Schema.Array(
52
- Schema.Struct({
53
- ids: Schema.Array(Obj.ID),
54
- hidden: Schema.optional(Schema.Boolean),
55
- }).pipe(Schema.mutable),
56
- ).pipe(Schema.mutable, Schema.optional),
57
- }).pipe(
58
- Type.Obj({
59
- typename: 'dxos.org/type/Masonry',
60
- version: '0.1.0',
61
- }),
62
- );
@@ -5,13 +5,6 @@
5
5
  import * as Schema from 'effect/Schema';
6
6
 
7
7
  import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
8
- import { SpaceSchema } from '@dxos/react-client/echo';
9
-
10
- import { meta } from '../meta';
11
-
12
- import * as Masonry from './Masonry';
13
-
14
- const MASONRY_ACTION = `${meta.id}/action`;
15
8
 
16
9
  export const MasonryProps = Schema.Struct({
17
10
  name: Schema.optional(Schema.String),
@@ -21,15 +14,7 @@ export const MasonryProps = Schema.Struct({
21
14
  TypeInputOptionsAnnotation.set({
22
15
  location: ['database', 'runtime'],
23
16
  kind: ['user'],
24
- registered: ['registered'],
25
17
  }),
26
18
  Schema.optional,
27
19
  ),
28
20
  });
29
-
30
- export class CreateMasonry extends Schema.TaggedClass<CreateMasonry>()(`${MASONRY_ACTION}/create`, {
31
- input: Schema.extend(Schema.Struct({ space: SpaceSchema }), MasonryProps),
32
- output: Schema.Struct({
33
- object: Masonry.Masonry,
34
- }),
35
- }) {}
@@ -1,109 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __export = (target, all) => {
3
- for (var name in all)
4
- __defProp(target, name, { get: all[name], enumerable: true });
5
- };
6
-
7
- // src/types/Masonry.ts
8
- var Masonry_exports = {};
9
- __export(Masonry_exports, {
10
- Masonry: () => Masonry,
11
- MasonryV1: () => MasonryV1,
12
- make: () => make
13
- });
14
- import * as Schema from "effect/Schema";
15
- import { Obj, Ref, Type } from "@dxos/echo";
16
- import { FormInputAnnotation, LabelAnnotation } from "@dxos/echo/internal";
17
- import { View, ViewAnnotation } from "@dxos/schema";
18
- var MasonrySchema = Schema.Struct({
19
- name: Schema.String.pipe(Schema.optional),
20
- view: Type.Ref(View.View).pipe(FormInputAnnotation.set(false)),
21
- arrangement: Schema.Array(Schema.Struct({
22
- ids: Schema.Array(Obj.ID),
23
- hidden: Schema.optional(Schema.Boolean)
24
- }).pipe(Schema.mutable)).pipe(Schema.mutable, FormInputAnnotation.set(false), Schema.optional)
25
- }).pipe(Type.Obj({
26
- typename: "dxos.org/type/Masonry",
27
- version: "0.2.0"
28
- }), LabelAnnotation.set([
29
- "name"
30
- ]), ViewAnnotation.set(true));
31
- var Masonry = MasonrySchema;
32
- var make = ({ name, arrangement = [], view }) => {
33
- return Obj.make(Masonry, {
34
- name,
35
- view: Ref.make(view),
36
- arrangement
37
- });
38
- };
39
- var MasonryV1 = Schema.Struct({
40
- arrangement: Schema.Array(Schema.Struct({
41
- ids: Schema.Array(Obj.ID),
42
- hidden: Schema.optional(Schema.Boolean)
43
- }).pipe(Schema.mutable)).pipe(Schema.mutable, Schema.optional)
44
- }).pipe(Type.Obj({
45
- typename: "dxos.org/type/Masonry",
46
- version: "0.1.0"
47
- }));
48
-
49
- // src/types/MasonryAction.ts
50
- var MasonryAction_exports = {};
51
- __export(MasonryAction_exports, {
52
- CreateMasonry: () => CreateMasonry,
53
- MasonryProps: () => MasonryProps
54
- });
55
- import * as Schema2 from "effect/Schema";
56
- import { TypeInputOptionsAnnotation } from "@dxos/plugin-space/types";
57
- import { SpaceSchema } from "@dxos/react-client/echo";
58
-
59
- // src/meta.ts
60
- import { trim } from "@dxos/util";
61
- var meta = {
62
- id: "dxos.org/plugin/masonry",
63
- name: "Masonry",
64
- description: trim`
65
- Responsive grid layout that displays query results in an adaptive masonry pattern.
66
- Visualize collections of cards, images, or mixed content that automatically adjusts to available screen space.
67
- `,
68
- icon: "ph--wall--regular",
69
- iconHue: "green",
70
- source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry",
71
- screenshots: []
72
- };
73
-
74
- // src/types/MasonryAction.ts
75
- var MASONRY_ACTION = `${meta.id}/action`;
76
- var MasonryProps = Schema2.Struct({
77
- name: Schema2.optional(Schema2.String),
78
- // TODO(wittjosiah): This should be a query input instead.
79
- typename: Schema2.String.pipe(Schema2.annotations({
80
- title: "Select card type"
81
- }), TypeInputOptionsAnnotation.set({
82
- location: [
83
- "database",
84
- "runtime"
85
- ],
86
- kind: [
87
- "user"
88
- ],
89
- registered: [
90
- "registered"
91
- ]
92
- }), Schema2.optional)
93
- });
94
- var CreateMasonry = class extends Schema2.TaggedClass()(`${MASONRY_ACTION}/create`, {
95
- input: Schema2.extend(Schema2.Struct({
96
- space: SpaceSchema
97
- }), MasonryProps),
98
- output: Schema2.Struct({
99
- object: Masonry
100
- })
101
- }) {
102
- };
103
-
104
- export {
105
- meta,
106
- Masonry_exports,
107
- MasonryAction_exports
108
- };
109
- //# sourceMappingURL=chunk-4I5S2QKH.mjs.map