@dxos/plugin-masonry 0.8.4-main.406dc2a

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@dxos/plugin-masonry",
+  "version": "0.8.4-main.406dc2a",
+  "description": "Masonry DXOS Surface plugin",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "type": "module",
+  "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"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.12.1",
+    "@preact/signals-react": "^3.3.0",
+    "@dxos/app-framework": "0.8.4-main.406dc2a",
+    "@dxos/echo": "0.8.4-main.406dc2a",
+    "@dxos/effect": "0.8.4-main.406dc2a",
+    "@dxos/plugin-client": "0.8.4-main.406dc2a",
+    "@dxos/plugin-search": "0.8.4-main.406dc2a",
+    "@dxos/react-client": "0.8.4-main.406dc2a",
+    "@dxos/plugin-space": "0.8.4-main.406dc2a",
+    "@dxos/react-ui": "0.8.4-main.406dc2a",
+    "@dxos/react-ui-form": "0.8.4-main.406dc2a",
+    "@dxos/react-ui-masonry": "0.8.4-main.406dc2a",
+    "@dxos/react-ui-stack": "0.8.4-main.406dc2a",
+    "@dxos/schema": "0.8.4-main.406dc2a"
+  },
+  "devDependencies": {
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/plugin-preview": "0.8.4-main.406dc2a",
+    "@dxos/random": "0.8.4-main.406dc2a",
+    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
+    "@dxos/plugin-theme": "0.8.4-main.406dc2a",
+    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+  },
+  "peerDependencies": {
+    "effect": "^3.13.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
+    "@dxos/react-ui": "0.8.4-main.406dc2a"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/MasonryPlugin.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
+import { ClientEvents } from '@dxos/plugin-client';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { defineObjectForm } from '@dxos/plugin-space/types';
+
+import { IntentResolver, ReactSurface } from './capabilities';
+import { meta } from './meta';
+import { translations } from './translations';
+import { Masonry, MasonryAction } from './types';
+
+export const MasonryPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () =>
+      contributes(Capabilities.Metadata, {
+        id: Masonry.Masonry.typename,
+        metadata: {
+          icon: 'ph--wall--regular',
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/object-form`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () =>
+      contributes(
+        SpaceCapabilities.ObjectForm,
+        defineObjectForm({
+          objectSchema: Masonry.Masonry,
+          formSchema: MasonryAction.MasonryProps,
+          hidden: true,
+          getIntent: (props, options) => createIntent(MasonryAction.CreateMasonry, { ...props, space: options.space }),
+        }),
+      ),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+]);

package/src/capabilities/index.ts

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

package/src/capabilities/intent-resolver.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { Masonry, MasonryAction } from '../types';
+
+export default (context: PluginContext) =>
+  contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: MasonryAction.CreateMasonry,
+      resolve: async ({ space, name, typename }) => {
+        const client = context.getCapability(ClientCapabilities.Client);
+        const { view } = await Masonry.makeView({
+          client,
+          space,
+          name,
+          typename,
+        });
+        return { data: { object: view } };
+      },
+    }),
+  ]);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { Obj } from '@dxos/echo';
+import { DataType } from '@dxos/schema';
+
+import { MasonryContainer } from '../components/MasonryContainer';
+import { meta } from '../meta';
+import { Masonry } from '../types';
+
+export default () =>
+  contributes(Capabilities.ReactSurface, [
+    createSurface({
+      id: meta.id,
+      role: ['article', 'section'],
+      filter: (data): data is { subject: DataType.View } =>
+        Obj.instanceOf(DataType.View, data.subject) &&
+        Obj.instanceOf(Masonry.Masonry, data.subject.presentation?.target),
+      component: ({ data, role }) => <MasonryContainer view={data.subject} role={role} />,
+    }),
+  ]);

package/src/components/MasonryContainer.stories.tsx

@@ -0,0 +1,83 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
+
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { PreviewPlugin } from '@dxos/plugin-preview';
+import { SpacePlugin } from '@dxos/plugin-space';
+import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
+import { ThemePlugin } from '@dxos/plugin-theme';
+import { faker } from '@dxos/random';
+import { Filter, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { withTheme } from '@dxos/react-ui/testing';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { DataType } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+
+import { Masonry } from '../types';
+
+import { MasonryContainer } from './MasonryContainer';
+
+faker.seed(0);
+
+const StorybookMasonry = () => {
+  const spaces = useSpaces();
+  const space = spaces[spaces.length - 1];
+  const views = useQuery(space, Filter.type(DataType.View));
+  const [view, setView] = useState<DataType.View>();
+  useEffect(() => {
+    if (views.length && !view) {
+      const view = views[0];
+      setView(view);
+    }
+  }, [views]);
+
+  return view ? <MasonryContainer view={view} role='story' /> : null;
+};
+
+const meta = {
+  title: 'plugins/plugin-masonry/Masonry',
+  component: StorybookMasonry,
+  render: () => <StorybookMasonry />,
+  decorators: [
+    withTheme,
+    withPluginManager({
+      plugins: [
+        ClientPlugin({
+          types: [DataType.Organization, DataType.View, Masonry.Masonry],
+          onClientInitialized: async ({ client }) => {
+            await client.halo.createIdentity();
+            const space = await client.spaces.create();
+            await space.waitUntilReady();
+
+            const { view } = await Masonry.makeView({ space, client, typename: DataType.Organization.typename });
+            space.db.add(view);
+
+            const factory = createObjectFactory(space.db, faker as any);
+            await factory([{ type: DataType.Organization, count: 64 }]);
+          },
+        }),
+        SpacePlugin({}),
+        IntentPlugin(),
+        SettingsPlugin(),
+        ThemePlugin({ tx: defaultTx }),
+        PreviewPlugin(),
+        StorybookLayoutPlugin({}),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/MasonryContainer.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Filter, Type } from '@dxos/echo';
+import { EchoSchema, type TypedObject } from '@dxos/echo/internal';
+import { useGlobalFilteredObjects } from '@dxos/plugin-search';
+import { useClient } from '@dxos/react-client';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { Masonry } from '@dxos/react-ui-masonry';
+import { type DataType, ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
+
+const Item = ({ data }: { data: any }) => {
+  return <Surface role='card' limit={1} data={{ subject: data }} />;
+};
+
+export const MasonryContainer = ({ view, role }: { view: DataType.View; role: string }) => {
+  const client = useClient();
+  const space = getSpace(view);
+  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
+
+  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
+  const [projection, setProjection] = useState<ProjectionModel>();
+
+  const jsonSchema = useMemo(() => {
+    if (!cardSchema) return undefined;
+    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
+  }, [cardSchema]);
+
+  useEffect(() => {
+    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
+    if (staticSchema) {
+      setCardSchema(() => staticSchema as TypedObject<any, any>);
+    }
+    if (!staticSchema && typename && space) {
+      const query = space.db.schemaRegistry.query({ typename });
+      const unsubscribe = query.subscribe(
+        () => {
+          const [schema] = query.results;
+          if (schema) {
+            setCardSchema(schema);
+          }
+        },
+        { fire: true },
+      );
+      return unsubscribe;
+    }
+  }, [typename, space]);
+
+  useEffect(() => {
+    if (jsonSchema) {
+      setProjection(new ProjectionModel(jsonSchema, view.projection));
+    }
+  }, [view.projection, JSON.stringify(jsonSchema)]);
+
+  const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
+  const filteredObjects = useGlobalFilteredObjects(objects);
+
+  return (
+    <Masonry.Root
+      items={filteredObjects}
+      render={Item as any}
+      classNames='is-full max-is-full bs-full max-bs-full overflow-y-auto p-4'
+    />
+  );
+};

package/src/index.ts

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

package/src/meta.ts

@@ -0,0 +1,14 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type PluginMeta } from '@dxos/app-framework';
+
+export const meta: PluginMeta = {
+  id: 'dxos.org/plugin/masonry',
+  name: 'Masonry',
+  description: 'Masonry displays items from a View query in a responsive grid.',
+  icon: 'ph--wall--regular',
+  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-masonry',
+  screenshots: [],
+};

package/src/translations.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Resource } from '@dxos/react-ui';
+
+import { meta } from './meta';
+import { Masonry } from './types';
+
+export const translations = [
+  {
+    'en-US': {
+      [Masonry.Masonry.typename]: {
+        'typename label': 'Masonry',
+        'typename label_zero': 'Masonries',
+        'typename label_one': 'Masonry',
+        'typename label_other': 'Masonries',
+        'object name placeholder': 'New masonry',
+      },
+      [meta.id]: {
+        'plugin name': 'Masonry',
+      },
+    },
+  },
+] as const satisfies Resource[];

package/src/types/Masonry.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { Obj, Type } from '@dxos/echo';
+import { type JsonSchemaType, ViewAnnotation, toEffectSchema } from '@dxos/echo/internal';
+import { type CreateViewFromSpaceProps, type DataType, createViewFromSpace } from '@dxos/schema';
+
+export const Masonry = Schema.Struct({
+  arrangement: Schema.Array(
+    Schema.Struct({
+      ids: Schema.Array(Type.ObjectId),
+      hidden: Schema.optional(Schema.Boolean),
+    }).pipe(Schema.mutable),
+  ).pipe(Schema.mutable, Schema.optional),
+  // TODO(wittjosiah): Consider Masonry supporting not being just a view but referencing arbitrary data directly.
+}).pipe(
+  Type.Obj({
+    typename: 'dxos.org/type/Masonry',
+    version: '0.1.0',
+  }),
+  ViewAnnotation.set(true),
+);
+
+export type Masonry = Schema.Schema.Type<typeof Masonry>;
+
+/**
+ * Make a masonry object.
+ */
+export const make = (props: Obj.MakeProps<typeof Masonry> = {}) => Obj.make(Masonry, props);
+
+export type MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'>;
+
+export const makeView = async ({
+  ...props
+}: MakeViewProps): Promise<{
+  jsonSchema: JsonSchemaType;
+  view: DataType.View;
+  schema: ReturnType<typeof toEffectSchema>;
+}> => {
+  const masonry = Obj.make(Masonry, {});
+  const { jsonSchema, view } = await createViewFromSpace({ ...props, presentation: masonry });
+
+  // Preset sizes.
+  const schema = toEffectSchema(jsonSchema);
+
+  return { jsonSchema, schema, view };
+};

package/src/types/MasonryAction.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { SpaceSchema } from '@dxos/react-client/echo';
+import { DataType, TypenameAnnotationId } from '@dxos/schema';
+
+import { meta } from '../meta';
+
+const MASONRY_ACTION = `${meta.id}/action`;
+
+export const MasonryProps = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  typename: Schema.optional(
+    Schema.String.annotations({
+      [TypenameAnnotationId]: ['used-static', 'dynamic'],
+      title: 'Select card record type (leave empty to start fresh)',
+    }),
+  ),
+});
+
+export class CreateMasonry extends Schema.TaggedClass<CreateMasonry>()(`${MASONRY_ACTION}/create`, {
+  input: Schema.extend(Schema.Struct({ space: SpaceSchema }), MasonryProps),
+  output: Schema.Struct({
+    object: DataType.View,
+  }),
+}) {}

package/src/types/index.ts

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