@dxos/plugin-masonry 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-masonry",
-  "version": "0.8.4-main.7996785055",
+  "version": "0.8.4-main.8baae0fced",
   "description": "Masonry DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,56 +8,90 @@
     "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"
+    "./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"
   ],
   "dependencies": {
-    "@dxos/app-framework": "0.8.4-main.7996785055",
-    "@dxos/app-toolkit": "0.8.4-main.7996785055",
-    "@dxos/echo": "0.8.4-main.7996785055",
-    "@dxos/effect": "0.8.4-main.7996785055",
-    "@dxos/plugin-client": "0.8.4-main.7996785055",
-    "@dxos/operation": "0.8.4-main.7996785055",
-    "@dxos/plugin-space": "0.8.4-main.7996785055",
-    "@dxos/plugin-search": "0.8.4-main.7996785055",
-    "@dxos/react-ui-form": "0.8.4-main.7996785055",
-    "@dxos/react-ui": "0.8.4-main.7996785055",
-    "@dxos/react-ui-masonry": "0.8.4-main.7996785055",
-    "@dxos/react-ui-search": "0.8.4-main.7996785055",
-    "@dxos/react-ui-menu": "0.8.4-main.7996785055",
-    "@dxos/react-ui-stack": "0.8.4-main.7996785055",
-    "@dxos/types": "0.8.4-main.7996785055",
-    "@dxos/react-ui-mosaic": "0.8.4-main.7996785055",
-    "@dxos/schema": "0.8.4-main.7996785055",
-    "@dxos/util": "0.8.4-main.7996785055",
-    "@dxos/react-client": "0.8.4-main.7996785055"
+    "@dxos/app-framework": "0.8.4-main.8baae0fced",
+    "@dxos/echo": "0.8.4-main.8baae0fced",
+    "@dxos/app-toolkit": "0.8.4-main.8baae0fced",
+    "@dxos/effect": "0.8.4-main.8baae0fced",
+    "@dxos/plugin-client": "0.8.4-main.8baae0fced",
+    "@dxos/compute": "0.8.4-main.8baae0fced",
+    "@dxos/plugin-search": "0.8.4-main.8baae0fced",
+    "@dxos/plugin-space": "0.8.4-main.8baae0fced",
+    "@dxos/react-client": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-form": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-list": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-mosaic": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-menu": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-search": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-stack": "0.8.4-main.8baae0fced",
+    "@dxos/types": "0.8.4-main.8baae0fced",
+    "@dxos/util": "0.8.4-main.8baae0fced",
+    "@dxos/schema": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui-masonry": "0.8.4-main.8baae0fced"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -65,20 +99,20 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.7996785055",
-    "@dxos/plugin-preview": "0.8.4-main.7996785055",
-    "@dxos/plugin-theme": "0.8.4-main.7996785055",
-    "@dxos/storybook-utils": "0.8.4-main.7996785055",
-    "@dxos/random": "0.8.4-main.7996785055",
-    "@dxos/ui-theme": "0.8.4-main.7996785055"
+    "vite": "^8.0.13",
+    "@dxos/plugin-preview": "0.8.4-main.8baae0fced",
+    "@dxos/plugin-testing": "0.8.4-main.8baae0fced",
+    "@dxos/plugin-theme": "0.8.4-main.8baae0fced",
+    "@dxos/random": "0.8.4-main.8baae0fced",
+    "@dxos/storybook-utils": "0.8.4-main.8baae0fced",
+    "@dxos/ui-theme": "0.8.4-main.8baae0fced"
   },
   "peerDependencies": {
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.7996785055",
-    "@dxos/ui-theme": "0.8.4-main.7996785055"
+    "@dxos/ui-theme": "0.8.4-main.8baae0fced",
+    "@dxos/react-ui": "0.8.4-main.8baae0fced"
   },
   "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,49 +2,20 @@
 // 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 { Annotation, Type } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
-import { type CreateObject } from '@dxos/plugin-space/types';
-import { SpaceOperation } from '@dxos/plugin-space/operations';
-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';
 
 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 }),
   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 { Filter, 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 { faker } from '@dxos/random';
-import { Filter, useObject, useQuery, useSpaces } from '@dxos/react-client/echo';
+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();
@@ -57,7 +57,7 @@ const meta = {
               );
               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

@@ -4,14 +4,12 @@
 
 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 { 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 { Annotation, 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';
@@ -38,7 +36,7 @@ export const MasonryContainer = ({
   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);
@@ -60,10 +58,11 @@ export const MasonryContainer = ({
     }
   }, [schemas, typename, 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(
@@ -87,7 +86,9 @@ export const MasonryContainer = ({
             </Toolbar.Root>
           </Panel.Toolbar>
           <Panel.Content>
-            <MasonryComponent.Content items={results} getId={(data: any) => data?.id} />
+            <MasonryComponent.Content>
+              <MasonryComponent.Viewport items={results} getId={(data: any) => data?.id} />
+            </MasonryComponent.Content>
           </Panel.Content>
         </Panel.Root>
       </SearchList.Root>
@@ -117,7 +118,11 @@ const Item = ({ data }: { data: any }) => {
           </Menu.Trigger>
           <Menu.Content items={objectMenuItems} />
         </Card.Toolbar>
-        <Surface.Surface role='card--content' limit={1} data={{ subject: data }} />
+        <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

@@ -8,6 +8,7 @@ import { trim } from '@dxos/util';
 export const meta: Plugin.Meta = {
   id: '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.

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,25 +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',
-        'add object label': 'Add 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',
       },
     },
   },

package/src/types/Masonry.ts

@@ -4,8 +4,7 @@
 
 import * as Schema from 'effect/Schema';
 
-import { Annotation, Obj, Ref, Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { Annotation, Obj, Ref, Type, View } from '@dxos/echo';
 import { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';
 import { ViewAnnotation } from '@dxos/schema';
 
@@ -27,7 +26,7 @@ export const Masonry = Schema.Struct({
     version: '0.1.0',
   }),
   LabelAnnotation.set(['name']),
-  ViewAnnotation.set(true),
+  ViewAnnotation.set(['view']),
   Annotation.IconAnnotation.set({
     icon: 'ph--wall--regular',
     hue: 'green',

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/dist/lib/browser/MasonryContainer-4JARBSYY.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/containers/MasonryContainer/MasonryContainer.tsx", "../../../src/containers/MasonryContainer/index.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Function from 'effect/Function';\nimport * as Option from 'effect/Option';\nimport type * as Schema from 'effect/Schema';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { Surface, useCapabilities } from '@dxos/app-framework/ui';\nimport { AppCapabilities } from '@dxos/app-toolkit';\nimport { useObjectMenuItems } from '@dxos/app-toolkit/ui';\nimport { Annotation, Filter, Obj, Query, type Ref, Type } from '@dxos/echo';\nimport { type View } from '@dxos/echo';\nimport { useObject, useQuery } from '@dxos/react-client/echo';\nimport { Card, Panel, Toolbar } from '@dxos/react-ui';\nimport { Masonry as MasonryComponent } from '@dxos/react-ui-masonry';\nimport { Menu } from '@dxos/react-ui-menu';\nimport { SearchList, useSearchListResults } from '@dxos/react-ui-search';\nimport { getTagFromQuery, getTypenameFromQuery } from '@dxos/schema';\nimport { isNonNullable } from '@dxos/util';\n\nexport type MasonryContainerProps = {\n  view: View.View;\n  role?: string;\n};\n\nexport const MasonryContainer = ({\n  view: viewOrRef,\n  role: _role,\n}: {\n  view: View.View | Ref.Ref<View.View>;\n  role?: string;\n}) => {\n  const [view] = useObject(viewOrRef);\n  const schemas = useCapabilities(AppCapabilities.Schema);\n  const db = view && Obj.getDatabase(view);\n  const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;\n  const tag = view?.query ? getTagFromQuery(view.query.ast) : undefined;\n\n  const [cardSchema, setCardSchema] = useState<Schema.Schema.AnyNoContext>();\n\n  useEffect(() => {\n    const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);\n    if (staticSchema) {\n      setCardSchema(() => staticSchema);\n    }\n    if (!staticSchema && typename && db) {\n      const query = db.schemaRegistry.query({ typename });\n      const unsubscribe = query.subscribe(\n        () => {\n          const [schema] = query.results;\n          if (schema) {\n            setCardSchema(schema);\n          }\n        },\n        { fire: true },\n      );\n      return unsubscribe;\n    }\n  }, [schemas, typename, db]);\n\n  const query = useMemo(() => {\n    const baseFilter = cardSchema ? Filter.type(cardSchema) : Filter.nothing();\n    return tag ? Query.select(baseFilter).select(Filter.tag(tag)) : Query.select(baseFilter);\n  }, [cardSchema, tag]);\n  const objects = useQuery(db, query);\n\n  const sortedObjects = useMemo(\n    () =>\n      objects.filter(isNonNullable).toSorted((a, b) => (Obj.getLabel(a) ?? '').localeCompare(Obj.getLabel(b) ?? '')),\n    [objects],\n  );\n\n  const { results, handleSearch } = useSearchListResults({\n    items: sortedObjects,\n    extract: (obj) => Obj.getLabel(obj) ?? '',\n  });\n\n  return (\n    <MasonryComponent.Root Tile={Item}>\n      <SearchList.Root onSearch={handleSearch}>\n        <Panel.Root>\n          <Panel.Toolbar asChild>\n            <Toolbar.Root>\n              <SearchList.Input placeholder='Search...' />\n            </Toolbar.Root>\n          </Panel.Toolbar>\n          <Panel.Content>\n            <MasonryComponent.Content items={results} getId={(data: any) => data?.id} />\n          </Panel.Content>\n        </Panel.Root>\n      </SearchList.Root>\n    </MasonryComponent.Root>\n  );\n};\n\nconst Item = ({ data }: { data: any }) => {\n  const objectMenuItems = useObjectMenuItems(data);\n  const icon = Function.pipe(\n    Obj.getSchema(data),\n    Option.fromNullable,\n    Option.flatMap(Annotation.IconAnnotation.get),\n    Option.map(({ icon }) => icon),\n    Option.getOrElse(() => 'ph--placeholder--regular'),\n  );\n\n  return (\n    <Menu.Root>\n      <Card.Root>\n        <Card.Toolbar>\n          <Card.Icon icon={icon} />\n          <Card.Title>{Obj.getLabel(data)}</Card.Title>\n          {/* TODO(wittjosiah): Reconcile with Card.Menu. */}\n          <Menu.Trigger asChild disabled={!objectMenuItems?.length}>\n            <Toolbar.IconButton iconOnly variant='ghost' icon='ph--dots-three-vertical--regular' label='Actions' />\n          </Menu.Trigger>\n          <Menu.Content items={objectMenuItems} />\n        </Card.Toolbar>\n        <Surface.Surface role='card--content' limit={1} data={{ subject: data }} />\n      </Card.Root>\n    </Menu.Root>\n  );\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { MasonryContainer } from './MasonryContainer';\n\nexport default MasonryContainer;\n"],
-  "mappings": "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",
-  "names": ["Function", "Option", "React", "useEffect", "useMemo", "useState", "Surface", "useCapabilities", "AppCapabilities", "useObjectMenuItems", "Annotation", "Filter", "Obj", "Query", "Type", "useObject", "useQuery", "Card", "Panel", "Toolbar", "Masonry", "MasonryComponent", "Menu", "SearchList", "useSearchListResults", "getTagFromQuery", "getTypenameFromQuery", "isNonNullable", "MasonryContainer", "view", "viewOrRef", "role", "_role", "useObject", "schemas", "useCapabilities", "AppCapabilities", "Schema", "db", "Obj", "getDatabase", "typename", "query", "getTypenameFromQuery", "ast", "undefined", "tag", "getTagFromQuery", "cardSchema", "setCardSchema", "useState", "useEffect", "staticSchema", "flat", "find", "schema", "Type", "getTypename", "schemaRegistry", "unsubscribe", "subscribe", "results", "fire", "useMemo", "baseFilter", "Filter", "type", "nothing", "Query", "select", "objects", "useQuery", "sortedObjects", "filter", "isNonNullable", "toSorted", "a", "b", "getLabel", "localeCompare", "handleSearch", "useSearchListResults", "items", "extract", "obj", "MasonryComponent", "Root", "Tile", "Item", "SearchList", "onSearch", "Panel", "Toolbar", "asChild", "Input", "placeholder", "Content", "getId", "data", "id", "objectMenuItems", "useObjectMenuItems", "icon", "pipe", "getSchema", "fromNullable", "flatMap", "Annotation", "IconAnnotation", "get", "map", "getOrElse", "Menu", "Card", "Icon", "Title", "Trigger", "disabled", "length", "IconButton", "iconOnly", "variant", "label", "Surface", "limit", "subject", "MasonryContainer"]
-}

package/dist/lib/browser/chunk-7W5GV4MG.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n  id: 'org.dxos.plugin.masonry',\n  name: 'Masonry',\n  description: trim`\n    Responsive grid layout that displays query results in an adaptive masonry pattern.\n    Visualize collections of cards, images, or mixed content that automatically adjusts to available screen space.\n  `,\n  icon: 'ph--wall--regular',\n  iconHue: 'green',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry',\n  screenshots: [],\n};\n"],
-  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,aAAa,CAAA;AACf;",
-  "names": ["trim", "meta", "id", "name", "description", "trim", "icon", "iconHue", "source", "screenshots"]
-}

package/dist/lib/browser/chunk-ANLADCDB.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/Masonry.ts", "../../../src/types/MasonryAction.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Annotation, Obj, Ref, Type } from '@dxos/echo';\nimport { View } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';\nimport { ViewAnnotation } from '@dxos/schema';\n\nexport const Masonry = Schema.Struct({\n  name: Schema.String.pipe(Schema.optional),\n\n  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n  arrangement: Schema.Array(\n    Schema.Struct({\n      ids: Schema.Array(Obj.ID),\n      hidden: Schema.optional(Schema.Boolean),\n    }),\n  ).pipe(FormInputAnnotation.set(false), Schema.optional),\n  // TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.\n}).pipe(\n  Type.object({\n    typename: 'org.dxos.type.masonry',\n    version: '0.1.0',\n  }),\n  LabelAnnotation.set(['name']),\n  ViewAnnotation.set(true),\n  Annotation.IconAnnotation.set({\n    icon: 'ph--wall--regular',\n    hue: 'green',\n  }),\n);\n\nexport interface Masonry extends Schema.Schema.Type<typeof Masonry> {}\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {\n  view: View.View;\n};\n\n/**\n * Make a masonry as a view of a data set.\n */\nexport const make = ({ name, arrangement = [], view }: MakeProps): Masonry => {\n  return Obj.make(Masonry, { name, view: Ref.make(view), arrangement });\n};\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';\n\nexport const MasonryProps = Schema.Struct({\n  name: Schema.optional(Schema.String),\n  // TODO(wittjosiah): This should be a query input instead.\n  typename: Schema.String.pipe(\n    Schema.annotations({ title: 'Select card type' }),\n    TypeInputOptionsAnnotation.set({\n      location: ['database', 'runtime'],\n      kind: ['user'],\n    }),\n    Schema.optional,\n  ),\n});\n"],
-  "mappings": ";;;;;AAAA;;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,YAAYC,KAAKC,KAAKC,YAAY;AAC3C,SAASC,YAAY;AACrB,SAASC,qBAAqBC,uBAAuB;AACrD,SAASC,sBAAsB;AAExB,IAAMC,UAAiBC,cAAO;EACnCC,MAAaC,cAAOC,KAAYC,eAAQ;EAExCC,MAAMC,IAAIA,IAAIC,KAAKA,IAAI,EAAEJ,KAAKK,oBAAoBC,IAAI,KAAA,CAAA;EAEtDC,aAAoBC,aACXX,cAAO;IACZY,KAAYD,aAAME,IAAIC,EAAE;IACxBC,QAAeX,gBAAgBY,cAAO;EACxC,CAAA,CAAA,EACAb,KAAKK,oBAAoBC,IAAI,KAAA,GAAeL,eAAQ;AAExD,CAAA,EAAGD,KACDc,KAAKC,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBZ,IAAI;EAAC;CAAO,GAC5Ba,eAAeb,IAAI,IAAA,GACnBc,WAAWC,eAAef,IAAI;EAC5BgB,MAAM;EACNC,KAAK;AACP,CAAA,CAAA;AAYK,IAAMC,OAAO,CAAC,EAAE1B,MAAMS,cAAc,CAAA,GAAIL,KAAI,MAAa;AAC9D,SAAOQ,IAAIc,KAAK5B,SAAS;IAAEE;IAAMI,MAAMC,IAAIqB,KAAKtB,IAAAA;IAAOK;EAAY,CAAA;AACrE;;;AC/CA;;;;AAIA,YAAYkB,aAAY;AAExB,SAASC,kCAAkC;AAEpC,IAAMC,eAAsBC,eAAO;EACxCC,MAAaC,iBAAgBC,cAAM;;EAEnCC,UAAiBD,eAAOE,KACfC,oBAAY;IAAEC,OAAO;EAAmB,CAAA,GAC/CC,2BAA2BC,IAAI;IAC7BC,UAAU;MAAC;MAAY;;IACvBC,MAAM;MAAC;;EACT,CAAA,GACOT,gBAAQ;AAEnB,CAAA;",
-  "names": ["Schema", "Annotation", "Obj", "Ref", "Type", "View", "FormInputAnnotation", "LabelAnnotation", "ViewAnnotation", "Masonry", "Struct", "name", "String", "pipe", "optional", "view", "Ref", "View", "FormInputAnnotation", "set", "arrangement", "Array", "ids", "Obj", "ID", "hidden", "Boolean", "Type", "object", "typename", "version", "LabelAnnotation", "ViewAnnotation", "Annotation", "IconAnnotation", "icon", "hue", "make", "Schema", "TypeInputOptionsAnnotation", "MasonryProps", "Struct", "name", "optional", "String", "typename", "pipe", "annotations", "title", "TypeInputOptionsAnnotation", "set", "location", "kind"]
-}