@dxos/plugin-masonry 0.8.4-main.ae835ea → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/plugin-masonry",
-  "version": "0.8.4-main.ae835ea",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Masonry DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -14,50 +18,66 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs",
+      "node": "./dist/lib/node-esm/types/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
-    "@preact/signals-react": "^3.3.0",
-    "@dxos/echo": "0.8.4-main.ae835ea",
-    "@dxos/plugin-client": "0.8.4-main.ae835ea",
-    "@dxos/app-framework": "0.8.4-main.ae835ea",
-    "@dxos/effect": "0.8.4-main.ae835ea",
-    "@dxos/plugin-search": "0.8.4-main.ae835ea",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/plugin-space": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-form": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-stack": "0.8.4-main.ae835ea",
-    "@dxos/schema": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-masonry": "0.8.4-main.ae835ea",
-    "@dxos/util": "0.8.4-main.ae835ea",
-    "@dxos/react-client": "0.8.4-main.ae835ea"
+    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
+    "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/operation": "0.8.4-main.c85a9c8dae",
+    "@dxos/effect": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-search": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
+    "@dxos/schema": "0.8.4-main.c85a9c8dae",
+    "@dxos/types": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-form": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-masonry": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/plugin-preview": "0.8.4-main.ae835ea",
-    "@dxos/random": "0.8.4-main.ae835ea",
-    "@dxos/plugin-theme": "0.8.4-main.ae835ea",
-    "@dxos/storybook-utils": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/plugin-preview": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-testing": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "peerDependencies": {
-    "effect": "^3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

package/src/MasonryPlugin.tsx

@@ -2,61 +2,37 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
-import { ClientEvents } from '@dxos/plugin-client';
-import { SpaceCapabilities } from '@dxos/plugin-space';
-import { defineObjectForm } from '@dxos/plugin-space/types';
+import * as Effect from 'effect/Effect';
 
-import { IntentResolver, ReactSurface } from './capabilities';
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Type } from '@dxos/echo';
+import { type CreateObject } from '@dxos/plugin-space/types';
+import { ViewModel } from '@dxos/schema';
+
+import { ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
 import { Masonry, MasonryAction } from './types';
 
-export const MasonryPlugin = definePlugin(meta, () => [
-  defineModule({
-    id: `${meta.id}/module/translations`,
-    activatesOn: Events.SetupTranslations,
-    activate: () => contributes(Capabilities.Translations, translations),
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface,
-  }),
-  defineModule({
-    id: `${meta.id}/module/metadata`,
-    activatesOn: Events.SetupMetadata,
-    activate: () =>
-      contributes(Capabilities.Metadata, {
-        id: Masonry.Masonry.typename,
-        metadata: {
-          icon: 'ph--wall--regular',
-          iconHue: 'green',
-        },
-      }),
-  }),
-  defineModule({
-    id: `${meta.id}/module/object-form`,
-    activatesOn: ClientEvents.SetupSchema,
-    activate: () =>
-      contributes(
-        SpaceCapabilities.ObjectForm,
-        defineObjectForm({
-          objectSchema: Masonry.Masonry,
-          formSchema: MasonryAction.MasonryProps,
-          hidden: true,
-          getIntent: (props, options) => createIntent(MasonryAction.CreateMasonry, { ...props, space: options.space }),
-        }),
-      ),
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface,
-  }),
-  defineModule({
-    id: `${meta.id}/module/intent-resolver`,
-    activatesOn: Events.SetupIntentResolver,
-    activate: IntentResolver,
+export const MasonryPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Type.getTypename(Masonry.Masonry),
+      metadata: {
+        icon: 'ph--wall--regular',
+        iconHue: 'green',
+        inputSchema: MasonryAction.MasonryProps,
+        createObject: ((props, { db }) =>
+          Effect.promise(async () => {
+            const { view } = await ViewModel.makeFromDatabase({ db, typename: props.typename });
+            return Masonry.make({ name: props.name, view });
+          })) satisfies CreateObject,
+      },
+    },
   }),
-]);
+  AppPlugin.addSchemaModule({ schema: [Masonry.Masonry] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.make,
+);

package/src/capabilities/index.ts

@@ -2,7 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const ReactSurface = lazy(() => import('./react-surface'));
-export const IntentResolver = lazy(() => import('./intent-resolver'));
+export * from './react-surface';

package/src/capabilities/react-surface/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { Obj } from '@dxos/echo';
+import { View } from '@dxos/echo';
+
+import { MasonryContainer } from '../../containers';
+import { meta } from '../../meta';
+import { Masonry } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: meta.id,
+        role: ['article', 'section'],
+        filter: (data): data is { subject: Masonry.Masonry | View.View } =>
+          Obj.instanceOf(Masonry.Masonry, data.subject) || Obj.instanceOf(View.View, data.subject),
+        component: ({ data, role }) => {
+          const view = Obj.instanceOf(View.View, data.subject) ? data.subject : data.subject.view;
+          return <MasonryContainer view={view} role={role} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/components/index.ts

@@ -0,0 +1,3 @@
+//
+// Copyright 2025 DXOS.org
+//

package/src/containers/MasonryContainer/MasonryContainer.stories.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { View } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { PreviewPlugin } from '@dxos/plugin-preview';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { faker } from '@dxos/random';
+import { Filter, useObject, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { ViewModel } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Organization } from '@dxos/types';
+
+import { Masonry } from '../../types';
+
+import { MasonryContainer } from './MasonryContainer';
+
+faker.seed(0);
+
+const StorybookMasonry = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const masonries = useQuery(space?.db, Filter.type(Masonry.Masonry));
+  const [masonry] = useObject(masonries.at(0));
+
+  return masonry ? <MasonryContainer view={masonry.view} role='story' /> : null;
+};
+
+const meta = {
+  title: 'plugins/plugin-masonry/containers/Masonry',
+  component: StorybookMasonry,
+  render: () => <StorybookMasonry />,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Organization.Organization, View.View, Masonry.Masonry],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+              const { view } = yield* Effect.promise(() =>
+                ViewModel.makeFromDatabase({
+                  db: space.db,
+                  typename: Organization.Organization.typename,
+                }),
+              );
+              const masonry = Masonry.make({ view });
+              space.db.add(masonry);
+              const factory = createObjectFactory(space.db, faker as any);
+              yield* Effect.promise(() => factory([{ type: Organization.Organization, count: 64 }]));
+            }),
+        }),
+
+        PreviewPlugin(),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/containers/MasonryContainer/MasonryContainer.tsx

@@ -0,0 +1,91 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type * as Schema from 'effect/Schema';
+import React, { useEffect, useState } from 'react';
+
+import { Surface, useCapabilities } from '@dxos/app-framework/ui';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { useObjectMenuItems, useObjectNavigate } from '@dxos/app-toolkit/ui';
+import { Filter, Obj, type Ref, Type } from '@dxos/echo';
+import { type View } from '@dxos/echo';
+import { useGlobalFilteredObjects } from '@dxos/plugin-search';
+import { useObject, useQuery } from '@dxos/react-client/echo';
+import { Card, Toolbar } from '@dxos/react-ui';
+import { Masonry as MasonryComponent } from '@dxos/react-ui-masonry';
+import { Menu } from '@dxos/react-ui-menu';
+import { getTypenameFromQuery } from '@dxos/schema';
+
+export type MasonryContainerProps = {
+  view: View.View;
+  role?: string;
+};
+
+export const MasonryContainer = ({
+  view: viewOrRef,
+  role: _role,
+}: {
+  view: View.View | Ref.Ref<View.View>;
+  role?: string;
+}) => {
+  const [view] = useObject(viewOrRef);
+  const schemas = useCapabilities(AppCapabilities.Schema);
+  const db = view && Obj.getDatabase(view);
+  const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+
+  const [cardSchema, setCardSchema] = useState<Schema.Schema.AnyNoContext>();
+
+  useEffect(() => {
+    const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
+    if (staticSchema) {
+      setCardSchema(() => staticSchema);
+    }
+    if (!staticSchema && typename && db) {
+      const query = db.schemaRegistry.query({ typename });
+      const unsubscribe = query.subscribe(
+        () => {
+          const [schema] = query.results;
+          if (schema) {
+            setCardSchema(schema);
+          }
+        },
+        { fire: true },
+      );
+      return unsubscribe;
+    }
+  }, [schemas, typename, db]);
+
+  const objects = useQuery(db, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
+  const filteredObjects = useGlobalFilteredObjects(objects);
+
+  return (
+    <MasonryComponent.Root
+      items={filteredObjects}
+      render={Item as any}
+      classNames='w-full max-w-full h-full max-h-full overflow-y-auto p-4'
+    />
+  );
+};
+
+const Item = ({ data }: { data: any }) => {
+  const objectMenuItems = useObjectMenuItems(data);
+  const handleNavigate = useObjectNavigate(data);
+
+  return (
+    <Menu.Root>
+      <Card.Root>
+        <Card.Toolbar>
+          <span />
+          <Card.Title onClick={handleNavigate}>{Obj.getLabel(data)}</Card.Title>
+          {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+          <Menu.Trigger asChild disabled={!objectMenuItems?.length}>
+            <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />
+          </Menu.Trigger>
+          <Menu.Content items={objectMenuItems} />
+        </Card.Toolbar>
+        <Surface.Surface role='card--content' limit={1} data={{ subject: data }} />
+      </Card.Root>
+    </Menu.Root>
+  );
+};

package/src/containers/MasonryContainer/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { MasonryContainer } from './MasonryContainer';
+
+export default MasonryContainer;

package/src/containers/index.ts

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

package/src/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/masonry',
   name: 'Masonry',
   description: trim`

package/src/translations.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Type } from '@dxos/echo';
 import { type Resource } from '@dxos/react-ui';
 
 import { meta } from './meta';
@@ -10,12 +11,15 @@ import { Masonry } from './types';
 export const translations = [
   {
     'en-US': {
-      [Masonry.Masonry.typename]: {
+      [Type.getTypename(Masonry.Masonry)]: {
         'typename label': 'Masonry',
         'typename label_zero': 'Masonries',
         'typename label_one': 'Masonry',
         'typename label_other': 'Masonries',
         'object name placeholder': 'New masonry',
+        'rename object label': 'Rename masonry',
+        'delete object label': 'Delete masonry',
+        'object deleted label': 'Masonry deleted',
       },
       [meta.id]: {
         'plugin name': 'Masonry',

package/src/types/Masonry.ts

@@ -4,47 +4,59 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Obj, Type } from '@dxos/echo';
-import { type JsonSchemaType, ViewAnnotation, toEffectSchema } from '@dxos/echo/internal';
-import { type CreateViewFromSpaceProps, type DataType, createViewFromSpace } from '@dxos/schema';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
+import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
+import { ViewAnnotation } from '@dxos/schema';
 
 export const Masonry = Schema.Struct({
+  name: Schema.String.pipe(Schema.optional),
+
+  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
+
   arrangement: Schema.Array(
     Schema.Struct({
-      ids: Schema.Array(Type.ObjectId),
+      ids: Schema.Array(Obj.ID),
       hidden: Schema.optional(Schema.Boolean),
-    }).pipe(Schema.mutable),
-  ).pipe(Schema.mutable, Schema.optional),
+    }),
+  ).pipe(FormInputAnnotation.set(false), Schema.optional),
   // TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Masonry',
-    version: '0.1.0',
+    version: '0.2.0',
   }),
+  LabelAnnotation.set(['name']),
   ViewAnnotation.set(true),
 );
 
-export type Masonry = Schema.Schema.Type<typeof Masonry>;
+export interface Masonry extends Schema.Schema.Type<typeof Masonry> {}
+
+type MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {
+  view: View.View;
+};
 
 /**
- * Make a masonry object.
+ * Make a masonry as a view of a data set.
  */
-export const make = (props: Obj.MakeProps<typeof Masonry> = {}) => Obj.make(Masonry, props);
-
-export type MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'>;
-
-export const makeView = async ({
-  ...props
-}: MakeViewProps): Promise<{
-  jsonSchema: JsonSchemaType;
-  view: DataType.View;
-  schema: ReturnType<typeof toEffectSchema>;
-}> => {
-  const masonry = Obj.make(Masonry, {});
-  const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: masonry });
+export const make = ({ name, arrangement = [], view }: MakeProps): Masonry => {
+  return Obj.make(Masonry, { name, view: Ref.make(view), arrangement });
+};
 
-  // Preset sizes.
-  const schema = toEffectSchema(jsonSchema);
+//
+// V1
+//
 
-  return { jsonSchema, schema, view };
-};
+export const MasonryV1 = Schema.Struct({
+  arrangement: Schema.Array(
+    Schema.Struct({
+      ids: Schema.Array(Obj.ID),
+      hidden: Schema.optional(Schema.Boolean),
+    }),
+  ).pipe(Schema.optional),
+}).pipe(
+  Type.object({
+    typename: 'dxos.org/type/Masonry',
+    version: '0.1.0',
+  }),
+);

package/src/types/MasonryAction.ts

@@ -4,26 +4,18 @@
 
 import * as Schema from 'effect/Schema';
 
-import { SpaceSchema } from '@dxos/react-client/echo';
-import { DataType, TypenameAnnotationId } from '@dxos/schema';
-
-import { meta } from '../meta';
-
-const MASONRY_ACTION = `${meta.id}/action`;
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
 
 export const MasonryProps = Schema.Struct({
   name: Schema.optional(Schema.String),
-  typename: Schema.optional(
-    Schema.String.annotations({
-      [TypenameAnnotationId]: ['used-static', 'dynamic'],
-      title: 'Select card record type (leave empty to start fresh)',
+  // TODO(wittjosiah): This should be a query input instead.
+  typename: Schema.String.pipe(
+    Schema.annotations({ title: 'Select card type' }),
+    TypeInputOptionsAnnotation.set({
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered'],
     }),
+    Schema.optional,
   ),
 });
-
-export class CreateMasonry extends Schema.TaggedClass<CreateMasonry>()(`${MASONRY_ACTION}/create`, {
-  input: Schema.extend(Schema.Struct({ space: SpaceSchema }), MasonryProps),
-  output: Schema.Struct({
-    object: DataType.View,
-  }),
-}) {}