@dxos/plugin-masonry 0.8.4-main.fcc0d83b33 → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-masonry",
-  "version": "0.8.4-main.fcc0d83b33",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "Masonry DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,84 +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": "./src/capabilities/index.ts",
-    "#components": "./src/components/index.ts",
-    "#containers": "./src/containers/index.ts",
-    "#meta": "./src/meta.ts",
-    "#translations": "./src/translations.ts",
-    "#types": "./src/types/index.ts"
+    "#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"
+    },
+    "./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",
-      "browser": "./dist/lib/browser/translations.mjs",
-      "node": "./dist/lib/node-esm/translations.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"
+      "default": "./dist/lib/neutral/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@dxos/compute": "0.8.4-main.fcc0d83b33",
-    "@dxos/app-framework": "0.8.4-main.fcc0d83b33",
-    "@dxos/app-toolkit": "0.8.4-main.fcc0d83b33",
-    "@dxos/echo": "0.8.4-main.fcc0d83b33",
-    "@dxos/plugin-client": "0.8.4-main.fcc0d83b33",
-    "@dxos/effect": "0.8.4-main.fcc0d83b33",
-    "@dxos/plugin-search": "0.8.4-main.fcc0d83b33",
-    "@dxos/plugin-space": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-client": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-form": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-masonry": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-mosaic": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-menu": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-search": "0.8.4-main.fcc0d83b33",
-    "@dxos/react-ui-stack": "0.8.4-main.fcc0d83b33",
-    "@dxos/schema": "0.8.4-main.fcc0d83b33",
-    "@dxos/types": "0.8.4-main.fcc0d83b33",
-    "@dxos/util": "0.8.4-main.fcc0d83b33"
+    "@dxos/app-toolkit": "0.8.4-staging.60fe92afc8",
+    "@dxos/app-framework": "0.8.4-staging.60fe92afc8",
+    "@dxos/compute": "0.8.4-staging.60fe92afc8",
+    "@dxos/keys": "0.8.4-staging.60fe92afc8",
+    "@dxos/effect": "0.8.4-staging.60fe92afc8",
+    "@dxos/echo": "0.8.4-staging.60fe92afc8",
+    "@dxos/plugin-client": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-client": "0.8.4-staging.60fe92afc8",
+    "@dxos/plugin-space": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-menu": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-search": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui-masonry": "0.8.4-staging.60fe92afc8",
+    "@dxos/types": "0.8.4-staging.60fe92afc8",
+    "@dxos/schema": "0.8.4-staging.60fe92afc8",
+    "@dxos/util": "0.8.4-staging.60fe92afc8"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^8.0.10",
-    "@dxos/plugin-preview": "0.8.4-main.fcc0d83b33",
-    "@dxos/plugin-testing": "0.8.4-main.fcc0d83b33",
-    "@dxos/random": "0.8.4-main.fcc0d83b33",
-    "@dxos/plugin-theme": "0.8.4-main.fcc0d83b33",
-    "@dxos/storybook-utils": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui-theme": "0.8.4-main.fcc0d83b33"
+    "vite": "^8.0.16",
+    "@dxos/plugin-preview": "0.8.4-staging.60fe92afc8",
+    "@dxos/plugin-testing": "0.8.4-staging.60fe92afc8",
+    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8",
+    "@dxos/plugin-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/random": "0.8.4-staging.60fe92afc8"
   },
   "peerDependencies": {
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.fcc0d83b33",
-    "@dxos/ui-theme": "0.8.4-main.fcc0d83b33"
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8"
   },
   "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,48 +2,26 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
-import * as Option from 'effect/Option';
-
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
-import { Operation } from '@dxos/compute';
-import { Annotation, Type } from '@dxos/echo';
-import { SpaceOperation } from '@dxos/plugin-space/operations';
-import { type CreateObject } from '@dxos/plugin-space/types';
-import { ViewModel } from '@dxos/schema';
 
-import { ReactSurface } from '#capabilities';
+import { CreateObject, ReactSurface } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
-import { Masonry, MasonryAction } from '#types';
+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: Annotation.IconAnnotation.get(Masonry.Masonry).pipe(Option.getOrThrow).icon,
-        iconHue: Annotation.IconAnnotation.get(Masonry.Masonry).pipe(Option.getOrThrow).hue ?? 'white',
-        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,
-            });
-          })) 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

@@ -4,4 +4,5 @@
 
 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.tsx

@@ -8,8 +8,7 @@ import React from 'react';
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { Obj } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Obj, View } from '@dxos/echo';
 
 import { MasonryContainer } from '#containers';
 import { Masonry } from '#types';

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

@@ -7,13 +7,13 @@ 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 { 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';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { Filter, useObject, useQuery, useSpaces } from '@dxos/react-client/echo';
+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';
@@ -52,7 +52,7 @@ const meta = {
               const { view } = yield* Effect.promise(() =>
                 ViewModel.makeFromDatabase({
                   db: space.db,
-                  typename: Organization.Organization.typename,
+                  typename: Type.getTypename(Organization.Organization),
                 }),
               );
               const masonry = Masonry.make({ view });

package/src/containers/MasonryContainer/MasonryContainer.tsx

@@ -2,22 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Function from 'effect/Function';
-import * as Option from 'effect/Option';
-import type * as Schema from 'effect/Schema';
 import React, { useEffect, useMemo, useState } from 'react';
 
 import { Surface, useCapabilities } from '@dxos/app-framework/ui';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
-import { Annotation, Filter, Obj, Query, type Ref, Type } from '@dxos/echo';
-import { type View } from '@dxos/echo';
+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, Panel, Toolbar } from '@dxos/react-ui';
 import { Masonry as MasonryComponent } from '@dxos/react-ui-masonry';
 import { Menu } from '@dxos/react-ui-menu';
 import { SearchList, useSearchListResults } from '@dxos/react-ui-search';
-import { getTagFromQuery, getTypenameFromQuery } from '@dxos/schema';
+import { getTagFromQuery, getTypeURIFromQuery } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 export type MasonryContainerProps = {
@@ -35,35 +31,36 @@ export const MasonryContainer = ({
   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 typeUri = view?.query ? getTypeURIFromQuery(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);
+    const staticSchema = schemas.flat().find((schema) => Type.getURI(schema) === typeUri);
     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 (typeUri && db) {
+      const findInRegistry = () =>
+        db.graph.registry
+          .list()
+          .filter(Type.isType)
+          .find((t) => Type.getURI(t) === typeUri);
+      setCardSchema(() => findInRegistry());
+      return db.graph.registry.changed.on(() => {
+        setCardSchema(() => findInRegistry());
+      });
     }
-  }, [schemas, typename, db]);
+    setCardSchema(undefined);
+  }, [schemas, typeUri, db]);
 
-  const query = useMemo(() => {
-    const baseFilter = cardSchema ? Filter.type(cardSchema) : Filter.nothing();
-    return tag ? Query.select(baseFilter).select(Filter.tag(tag)) : Query.select(baseFilter);
-  }, [cardSchema, tag]);
+  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(
@@ -99,26 +96,20 @@ export const MasonryContainer = ({
 
 const Item = ({ data }: { data: any }) => {
   const objectMenuItems = useObjectMenuItems(data);
-  const icon = Function.pipe(
-    Obj.getSchema(data),
-    Option.fromNullable,
-    Option.flatMap(Annotation.IconAnnotation.get),
-    Option.map(({ icon }) => icon),
-    Option.getOrElse(() => 'ph--placeholder--regular'),
-  );
+  const icon = Obj.getIcon(data)?.icon ?? 'ph--circle-dashed--regular';
 
   return (
     <Menu.Root>
       <Card.Root>
-        <Card.Toolbar>
+        <Card.Header>
           <Card.Icon icon={icon} />
-          <Card.Title>{Obj.getLabel(data)}</Card.Title>
+          <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>
+        </Card.Header>
         <Surface.Surface
           type={AppSurface.Card}
           limit={1}

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: 'org.dxos.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/types/Masonry.ts

@@ -4,12 +4,15 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Annotation, Obj, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
-import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
+// QueryAST is referenced indirectly through `Type.InstanceType<typeof MasonrySchema>`
+// (Ref.Ref(View.View) → View.View → QueryAST.Query) in the emitted .d.ts; the
+// namespace import keeps the inferred types portable.
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { DXN, Annotation, Obj, QueryAST, Ref, Type, View } from '@dxos/echo';
+import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/Annotation';
 import { ViewAnnotation } from '@dxos/schema';
 
-export const Masonry = Schema.Struct({
+const MasonrySchema = Schema.Struct({
   name: Schema.String.pipe(Schema.optional),
 
   view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),
@@ -22,19 +25,15 @@ export const Masonry = Schema.Struct({
   ).pipe(FormInputAnnotation.set(false), Schema.optional),
   // TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.
 }).pipe(
-  Type.object({
-    typename: 'org.dxos.type.masonry',
-    version: '0.1.0',
-  }),
   LabelAnnotation.set(['name']),
   ViewAnnotation.set(['view']),
-  Annotation.IconAnnotation.set({
-    icon: 'ph--wall--regular',
-    hue: 'green',
-  }),
+  Annotation.IconAnnotation.set({ icon: 'ph--wall--regular', hue: 'green' }),
+  Type.makeObject(DXN.make('org.dxos.type.masonry', '0.1.0')),
 );
 
-export interface Masonry extends Schema.Schema.Type<typeof Masonry> {}
+// TODO(wittjosiah): Try to clean up this type inference.
+export interface Masonry extends Type.InstanceType<typeof MasonrySchema> {}
+export const Masonry: Type.Obj<Masonry> = MasonrySchema as any;
 
 type MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {
   view: View.View;

package/src/types/MasonryAction.ts

@@ -4,7 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space';
 
 export const MasonryProps = Schema.Struct({
   name: Schema.optional(Schema.String),

package/src/vite-env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+//
+// Copyright 2026 DXOS.org
+//
+
+declare module '*.mdl?raw' {
+  const content: string;
+  export default content;
+}

package/dist/lib/browser/index.mjs

@@ -1,71 +0,0 @@
-import "./chunk-J5LGTIGS.mjs";
-
-// src/meta.ts
-import { trim } from "@dxos/util";
-var meta = {
-  id: "org.dxos.plugin.masonry",
-  name: "Masonry",
-  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.
-  `,
-  icon: "ph--wall--regular",
-  iconHue: "green",
-  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry",
-  screenshots: []
-};
-
-// src/MasonryPlugin.tsx
-import * as Effect from "effect/Effect";
-import * as Option from "effect/Option";
-import { Plugin } from "@dxos/app-framework";
-import { AppPlugin } from "@dxos/app-toolkit";
-import { Operation } from "@dxos/compute";
-import { Annotation, Type } from "@dxos/echo";
-import { SpaceOperation } from "@dxos/plugin-space/operations";
-import { ViewModel } from "@dxos/schema";
-import { ReactSurface } from "#capabilities";
-import { meta as meta2 } from "#meta";
-import { translations } from "#translations";
-import { Masonry, MasonryAction } from "#types";
-var MasonryPlugin = Plugin.define(meta2).pipe(AppPlugin.addMetadataModule({
-  metadata: {
-    id: Type.getTypename(Masonry.Masonry),
-    metadata: {
-      icon: Annotation.IconAnnotation.get(Masonry.Masonry).pipe(Option.getOrThrow).icon,
-      iconHue: Annotation.IconAnnotation.get(Masonry.Masonry).pipe(Option.getOrThrow).hue ?? "white",
-      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
-        });
-      })
-    }
-  }
-}), AppPlugin.addSchemaModule({
-  schema: [
-    Masonry.Masonry
-  ]
-}), AppPlugin.addSurfaceModule({
-  activate: ReactSurface
-}), AppPlugin.addTranslationsModule({
-  translations
-}), Plugin.make);
-export {
-  MasonryPlugin,
-  meta
-};
-//# sourceMappingURL=index.mjs.map