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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-masonry",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "Masonry DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,76 +8,109 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#capabilities": {
+      "source": "./src/capabilities/index.ts",
+      "types": "./dist/types/src/capabilities/index.d.ts",
+      "default": "./dist/lib/neutral/capabilities/index.mjs"
+    },
+    "#components": {
+      "source": "./src/components/index.ts",
+      "types": "./dist/types/src/components/index.d.ts",
+      "default": "./dist/lib/neutral/components/index.mjs"
+    },
+    "#containers": {
+      "source": "./src/containers/index.ts",
+      "types": "./dist/types/src/containers/index.d.ts",
+      "default": "./dist/lib/neutral/containers/index.mjs"
+    },
+    "#meta": {
+      "source": "./src/meta.ts",
+      "types": "./dist/types/src/meta.d.ts",
+      "default": "./dist/lib/neutral/meta.mjs"
+    },
+    "#plugin": {
+      "source": "./src/MasonryPlugin.tsx",
+      "types": "./dist/types/src/MasonryPlugin.d.ts",
+      "default": "./dist/lib/neutral/MasonryPlugin.mjs"
+    },
+    "#translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
+    },
+    "#types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "default": "./dist/lib/neutral/types/index.mjs"
+    }
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "default": "./dist/lib/neutral/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"
+    "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
+    "./plugin": {
+      "source": "./src/plugin.ts",
+      "types": "./dist/types/src/plugin.d.ts",
+      "default": "./dist/lib/neutral/plugin.mjs"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@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"
+    "@dxos/app-framework": "0.8.4-main.d9fc60f731",
+    "@dxos/compute": "0.8.4-main.d9fc60f731",
+    "@dxos/app-toolkit": "0.8.4-main.d9fc60f731",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/effect": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-client": "0.8.4-main.d9fc60f731",
+    "@dxos/keys": "0.8.4-main.d9fc60f731",
+    "@dxos/react-client": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-space": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-masonry": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-menu": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-search": "0.8.4-main.d9fc60f731",
+    "@dxos/schema": "0.8.4-main.d9fc60f731",
+    "@dxos/types": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.21.2",
     "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"
+    "vite": "^8.0.14",
+    "@dxos/plugin-testing": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-preview": "0.8.4-main.d9fc60f731",
+    "@dxos/random": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/plugin-theme": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
-    "effect": "3.19.16",
+    "effect": "3.21.2",
     "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"
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

package/src/MasonryPlugin.test.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { MasonryPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('MasonryPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), MasonryPlugin()],
+    });
+
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('CreateObject'), moduleId('schema'), moduleId('ReactSurface')]),
+    );
+  });
+});

package/src/MasonryPlugin.tsx

@@ -2,37 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
-
 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';
+import { CreateObject, ReactSurface } from '#capabilities';
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { Masonry } from '#types';
+
+// eslint-disable-next-line import/no-relative-packages
+import pluginSpec from '../PLUGIN.mdl?raw';
 
 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.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addSchemaModule({ schema: [Masonry.Masonry] }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
+  AppPlugin.addPluginAssetModule({
+    asset: { pluginId: meta.id, path: 'PLUGIN.mdl', content: pluginSpec, mimeType: 'application/x-mdl' },
+  }),
   Plugin.make,
 );
+
+export default MasonryPlugin;

package/src/capabilities/create-object.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { ViewModel } from '@dxos/schema';
+
+import { Masonry, MasonryAction } from '#types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+      id: Type.getTypename(Masonry.Masonry),
+      inputSchema: MasonryAction.MasonryProps,
+      createObject: (props, options) =>
+        Effect.gen(function* () {
+          const object = yield* Effect.promise(async () => {
+            const { view } = await ViewModel.makeFromDatabase({ db: options.db, typename: props.typename });
+            return Masonry.make({ name: props.name, view });
+          });
+          return yield* Operation.invoke(SpaceOperation.AddObject, {
+            object,
+            target: options.target,
+            hidden: true,
+            targetNodeId: options.targetNodeId,
+          });
+        }),
+    });
+  }),
+);

package/src/capabilities/index.ts

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

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -7,21 +7,22 @@ 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 { AppSurface } from '@dxos/app-toolkit/ui';
+import { Obj, View } from '@dxos/echo';
 
-import { MasonryContainer } from '../../containers';
-import { meta } from '../../meta';
-import { Masonry } from '../../types';
+import { MasonryContainer } from '#containers';
+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),
+        id: 'root',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, [Masonry.Masonry, View.View]),
+          AppSurface.object(AppSurface.Section, [Masonry.Masonry, View.View]),
+        ),
         component: ({ data, role }) => {
           const view = Obj.instanceOf(View.View, data.subject) ? data.subject : data.subject.view;
           return <MasonryContainer view={view} role={role} />;

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

@@ -7,22 +7,22 @@ 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 { Filter, Type, View } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 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 { random } from '@dxos/random';
+import { useObject, useQuery, useSpaces } from '@dxos/react-client/echo';
 import { ViewModel } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
 import { Organization } from '@dxos/types';
 
-import { Masonry } from '../../types';
+import { Masonry } from '#types';
 
 import { MasonryContainer } from './MasonryContainer';
 
-faker.seed(0);
+random.seed(0);
 
 const StorybookMasonry = () => {
   const spaces = useSpaces();
@@ -38,8 +38,6 @@ const meta = {
   component: StorybookMasonry,
   render: () => <StorybookMasonry />,
   decorators: [
-    withTheme(),
-    withLayout({ layout: 'fullscreen' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),
@@ -48,18 +46,18 @@ const meta = {
           types: [Organization.Organization, View.View, Masonry.Masonry],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
               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,
+                  typename: Type.getTypename(Organization.Organization),
                 }),
               );
               const masonry = Masonry.make({ view });
               space.db.add(masonry);
-              const factory = createObjectFactory(space.db, faker as any);
+              const factory = createObjectFactory(space.db, random as any);
               yield* Effect.promise(() => factory([{ type: Organization.Organization, count: 64 }]));
             }),
         }),

package/src/containers/MasonryContainer/MasonryContainer.tsx

@@ -2,20 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import type * as Schema from 'effect/Schema';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, 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 { AppSurface, useObjectMenuItems, useSchemaFilter } from '@dxos/app-toolkit/ui';
+import { Filter, Obj, Query, type Ref, Type, type View } from '@dxos/echo';
 import { useObject, useQuery } from '@dxos/react-client/echo';
-import { Card, Toolbar } from '@dxos/react-ui';
+import { Card, Panel, 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';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
+import { getTagFromQuery, getTypenameFromQuery } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 export type MasonryContainerProps = {
   view: View.View;
@@ -33,58 +32,89 @@ export const MasonryContainer = ({
   const schemas = useCapabilities(AppCapabilities.Schema);
   const db = view && Obj.getDatabase(view);
   const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const tag = view?.query ? getTagFromQuery(view.query.ast) : undefined;
 
-  const [cardSchema, setCardSchema] = useState<Schema.Schema.AnyNoContext>();
+  const [cardSchema, setCardSchema] = useState<Type.AnyEntity>();
 
   useEffect(() => {
     const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
     if (staticSchema) {
       setCardSchema(() => staticSchema);
+      return;
     }
-    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;
+    if (typename && db) {
+      const findInRegistry = () =>
+        db.graph.registry
+          .list()
+          .filter(Type.isType)
+          .find((t) => Type.getTypename(t) === typename);
+      setCardSchema(() => findInRegistry());
+      return db.graph.registry.changed.on(() => {
+        setCardSchema(() => findInRegistry());
+      });
     }
+    setCardSchema(undefined);
   }, [schemas, typename, db]);
 
-  const objects = useQuery(db, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
+  const baseFilter = useSchemaFilter(cardSchema);
+  const query = useMemo(
+    () => (tag ? Query.select(baseFilter).select(Filter.tag(tag)) : Query.select(baseFilter)),
+    [baseFilter, tag],
+  );
+  const objects = useQuery(db, query);
+
+  const sortedObjects = useMemo(
+    () =>
+      objects.filter(isNonNullable).toSorted((a, b) => (Obj.getLabel(a) ?? '').localeCompare(Obj.getLabel(b) ?? '')),
+    [objects],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: sortedObjects,
+    extract: (obj) => Obj.getLabel(obj) ?? '',
+  });
 
   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'
-    />
+    <MasonryComponent.Root Tile={Item}>
+      <SearchList.Root onSearch={handleSearch}>
+        <Panel.Root>
+          <Panel.Toolbar asChild>
+            <Toolbar.Root>
+              <SearchList.Input placeholder='Search...' />
+            </Toolbar.Root>
+          </Panel.Toolbar>
+          <Panel.Content>
+            <MasonryComponent.Content>
+              <MasonryComponent.Viewport items={results} getId={(data: any) => data?.id} />
+            </MasonryComponent.Content>
+          </Panel.Content>
+        </Panel.Root>
+      </SearchList.Root>
+    </MasonryComponent.Root>
   );
 };
 
 const Item = ({ data }: { data: any }) => {
   const objectMenuItems = useObjectMenuItems(data);
-  const handleNavigate = useObjectNavigate(data);
+  const icon = Obj.getIcon(data)?.icon ?? 'ph--circle-dashed--regular';
 
   return (
     <Menu.Root>
       <Card.Root>
-        <Card.Toolbar>
-          <span />
-          <Card.Title onClick={handleNavigate}>{Obj.getLabel(data)}</Card.Title>
+        <Card.Header>
+          <Card.Icon icon={icon} />
+          <Card.Title>{Obj.getLabel(data, { fallback: 'typename' })}</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.Header>
+        <Surface.Surface
+          type={AppSurface.Card}
+          limit={1}
+          data={{ subject: data } satisfies AppSurface.ObjectCardData}
+        />
       </Card.Root>
     </Menu.Root>
   );

package/src/containers/MasonryContainer/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-import { MasonryContainer } from './MasonryContainer';
-
-export default MasonryContainer;
+export { MasonryContainer as default } from './MasonryContainer';

package/src/index.ts

@@ -3,5 +3,4 @@
 //
 
 export * from './meta';
-
-export * from './MasonryPlugin';
+export * from './types';

package/src/meta.ts

@@ -2,18 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Plugin } from '@dxos/app-framework';
+import { Plugin } from '@dxos/app-framework';
+import { DXN } from '@dxos/keys';
 import { trim } from '@dxos/util';
 
-export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/masonry',
+export const meta = Plugin.makeMeta({
+  key: DXN.make('org.dxos.plugin.masonry'),
   name: 'Masonry',
+  author: 'DXOS',
   description: trim`
-    Responsive grid layout that displays query results in an adaptive masonry pattern.
-    Visualize collections of cards, images, or mixed content that automatically adjusts to available screen space.
+    Masonry renders a live, query-driven collection as a responsive column-balanced card grid.
+
+    A Masonry object wraps an ECHO View that defines which objects to show and in what order.
+    As objects are added or removed — by any peer — the grid reflows automatically, keeping cards
+    balanced across columns without manual arrangement.
+
+    Each card delegates its body to a Surface slot, so other plugins can supply rich, type-specific
+    content while Masonry handles layout, search, and context menus.
+
+    A built-in search bar filters cards client-side by label without modifying the underlying query,
+    making it easy to explore large collections without leaving the view.
   `,
   icon: 'ph--wall--regular',
-  iconHue: 'green',
+  iconHue: 'teal',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry',
+  spec: 'PLUGIN.mdl',
   screenshots: [],
-};
+});

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const MasonryPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/translations.ts

@@ -5,24 +5,25 @@
 import { Type } from '@dxos/echo';
 import { type Resource } from '@dxos/react-ui';
 
-import { meta } from './meta';
-import { Masonry } from './types';
+import { meta } from '#meta';
+import { Masonry } from '#types';
 
 export const translations = [
   {
     'en-US': {
       [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',
+        'typename.label': 'Masonry',
+        'typename.label_zero': 'Masonries',
+        'typename.label_one': 'Masonry',
+        'typename.label_other': 'Masonries',
+        'object-name.placeholder': 'New masonry',
+        'add-object.label': 'Add masonry',
+        'rename-object.label': 'Rename masonry',
+        'delete-object.label': 'Delete masonry',
+        'object-deleted.label': 'Masonry deleted',
       },
       [meta.id]: {
-        'plugin name': 'Masonry',
+        'plugin.name': 'Masonry',
       },
     },
   },