@dxos/plugin-masonry 0.8.4-main.03d5cd7b56

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@dxos/plugin-masonry",
+  "version": "0.8.4-main.03d5cd7b56",
+  "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,
+  "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",
+      "default": "./dist/lib/neutral/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",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@dxos/compute": "0.8.4-main.03d5cd7b56",
+    "@dxos/app-framework": "0.8.4-main.03d5cd7b56",
+    "@dxos/app-toolkit": "0.8.4-main.03d5cd7b56",
+    "@dxos/echo": "0.8.4-main.03d5cd7b56",
+    "@dxos/plugin-client": "0.8.4-main.03d5cd7b56",
+    "@dxos/effect": "0.8.4-main.03d5cd7b56",
+    "@dxos/plugin-search": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56",
+    "@dxos/plugin-space": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-client": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-form": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-list": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-masonry": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-mosaic": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-search": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-stack": "0.8.4-main.03d5cd7b56",
+    "@dxos/schema": "0.8.4-main.03d5cd7b56",
+    "@dxos/types": "0.8.4-main.03d5cd7b56",
+    "@dxos/util": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui-menu": "0.8.4-main.03d5cd7b56"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.03d5cd7b56",
+    "@dxos/plugin-testing": "0.8.4-main.03d5cd7b56",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/storybook-utils": "0.8.4-main.03d5cd7b56",
+    "@dxos/plugin-preview": "0.8.4-main.03d5cd7b56",
+    "@dxos/plugin-theme": "0.8.4-main.03d5cd7b56"
+  },
+  "peerDependencies": {
+    "effect": "3.20.0",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.03d5cd7b56",
+    "@dxos/react-ui": "0.8.4-main.03d5cd7b56"
+  },
+  "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

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+
+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.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

@@ -0,0 +1,8 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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

@@ -0,0 +1,34 @@
+//
+// 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 { AppSurface } from '@dxos/app-toolkit/ui';
+import { Obj } from '@dxos/echo';
+import { View } from '@dxos/echo';
+
+import { MasonryContainer } from '#containers';
+import { Masonry } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        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/components/index.ts

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

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

@@ -0,0 +1,78 @@
+//
+// 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/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+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 { ViewModel } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Organization } from '@dxos/types';
+
+import { Masonry } from '#types';
+
+import { MasonryContainer } from './MasonryContainer';
+
+random.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: [
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [Organization.Organization, View.View, Masonry.Masonry],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              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,
+                }),
+              );
+              const masonry = Masonry.make({ view });
+              space.db.add(masonry);
+              const factory = createObjectFactory(space.db, random 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,130 @@
+//
+// 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 { 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 { isNonNullable } from '@dxos/util';
+
+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 tag = view?.query ? getTagFromQuery(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 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 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 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 icon = Function.pipe(
+    Obj.getSchema(data),
+    Option.fromNullable,
+    Option.flatMap(Annotation.IconAnnotation.get),
+    Option.map(({ icon }) => icon),
+    Option.getOrElse(() => 'ph--placeholder--regular'),
+  );
+
+  return (
+    <Menu.Root>
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.Icon icon={icon} />
+          <Card.Title>{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
+          type={AppSurface.Card}
+          limit={1}
+          data={{ subject: data } satisfies AppSurface.ObjectCardData}
+        />
+      </Card.Root>
+    </Menu.Root>
+  );
+};

package/src/containers/MasonryContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { MasonryContainer as default } from './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/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './meta';
+export * from './types';

package/src/meta.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
+
+export const meta: Plugin.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: [],
+};

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

@@ -0,0 +1,30 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Type } from '@dxos/echo';
+import { type Resource } from '@dxos/react-ui';
+
+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',
+      },
+      [meta.id]: {
+        'plugin.name': 'Masonry',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types/Masonry.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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';
+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(Obj.ID),
+      hidden: Schema.optional(Schema.Boolean),
+    }),
+  ).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',
+  }),
+);
+
+export interface Masonry extends Schema.Schema.Type<typeof Masonry> {}
+
+type MakeProps = Omit<Partial<Obj.MakeProps<typeof Masonry>>, 'view'> & {
+  view: View.View;
+};
+
+/**
+ * Make a masonry as a view of a data set.
+ */
+export const make = ({ name, arrangement = [], view }: MakeProps): Masonry => {
+  return Obj.make(Masonry, { name, view: Ref.make(view), arrangement });
+};

package/src/types/MasonryAction.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space';
+
+export const MasonryProps = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  // 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'],
+    }),
+    Schema.optional,
+  ),
+});

package/src/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * as Masonry from './Masonry';
+export * as MasonryAction from './MasonryAction';