@dxos/plugin-pipeline 0.8.3-main.ef1bc66f44

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@dxos/plugin-pipeline",
+  "version": "0.8.3-main.ef1bc66f44",
+  "description": "Pipeline plugin for Composer",
+  "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",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
+    },
+    "./types": {
+      "source": "./src/types/index.ts",
+      "types": "./dist/types/src/types/index.d.ts",
+      "browser": "./dist/lib/browser/types/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "types": [
+        "dist/types/src/types/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@radix-ui/react-compose-refs": "1.1.1",
+    "@radix-ui/react-context": "1.1.1",
+    "effect": "3.19.16",
+    "@dxos/app-toolkit": "0.8.3-main.ef1bc66f44",
+    "@dxos/devtools": "0.8.3-main.ef1bc66f44",
+    "@dxos/async": "0.8.3-main.ef1bc66f44",
+    "@dxos/assistant-toolkit": "0.8.3-main.ef1bc66f44",
+    "@dxos/echo": "0.8.3-main.ef1bc66f44",
+    "@dxos/operation": "0.8.3-main.ef1bc66f44",
+    "@dxos/functions": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-deck": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-client": "0.8.3-main.ef1bc66f44",
+    "@dxos/app-framework": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-graph": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-inbox": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-markdown": "0.8.3-main.ef1bc66f44",
+    "@dxos/log": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-client": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui-list": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui-components": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui-attention": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui-stack": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui-mosaic": "0.8.3-main.ef1bc66f44",
+    "@dxos/echo-query": "0.8.3-main.ef1bc66f44",
+    "@dxos/schema": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui-form": "0.8.3-main.ef1bc66f44",
+    "@dxos/util": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-space": "0.8.3-main.ef1bc66f44",
+    "@dxos/types": "0.8.3-main.ef1bc66f44"
+  },
+  "devDependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/plugin-inbox": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-attention": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-preview": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-testing": "0.8.3-main.ef1bc66f44",
+    "@dxos/random": "0.8.3-main.ef1bc66f44",
+    "@dxos/react-ui": "0.8.3-main.ef1bc66f44",
+    "@dxos/plugin-theme": "0.8.3-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.3-main.ef1bc66f44",
+    "@dxos/storybook-utils": "0.8.3-main.ef1bc66f44"
+  },
+  "peerDependencies": {
+    "@effect-atom/atom-react": "^0.5.0",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.3-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.3-main.ef1bc66f44"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/PipelinePlugin.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/operation';
+import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
+import { type CreateObject } from '@dxos/plugin-space/types';
+import { Pipeline } from '@dxos/types';
+
+import { AppGraphBuilder, OperationResolver, ReactSurface } from './capabilities';
+import { meta } from './meta';
+import { translations } from './translations';
+import { PipelineOperation } from './types';
+
+export const PipelinePlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Pipeline.Pipeline.typename,
+      metadata: {
+        icon: 'ph--path--regular',
+        iconHue: 'purple',
+        createObject: ((props) => Effect.sync(() => Pipeline.make(props))) satisfies CreateObject,
+      },
+    },
+  }),
+  AppPlugin.addOperationResolverModule({ activate: OperationResolver }),
+  AppPlugin.addSchemaModule({ schema: [Pipeline.Pipeline] }),
+  AppPlugin.addSurfaceModule({ activate: ReactSurface }),
+  AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    id: 'on-space-created',
+    activatesOn: SpaceEvents.SpaceCreated,
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(SpaceCapabilities.OnCreateSpace, (params) =>
+          Operation.invoke(PipelineOperation.OnCreateSpace, params),
+        ),
+      ),
+  }),
+  Plugin.make,
+);

package/src/capabilities/app-graph-builder/app-graph-builder.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { ATTENDABLE_PATH_SEPARATOR, PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { GraphBuilder } from '@dxos/plugin-graph';
+import { Pipeline } from '@dxos/types';
+
+import { meta } from '../../meta';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const extensions = yield* Effect.all([
+      GraphBuilder.createTypeExtension({
+        id: `${meta.id}/triggers`,
+        type: Pipeline.Pipeline,
+        connector: (pipeline) => {
+          const nodeId = pipeline.id;
+          return Effect.succeed([
+            {
+              id: [nodeId, 'invocations'].join(ATTENDABLE_PATH_SEPARATOR),
+              type: PLANK_COMPANION_TYPE,
+              data: 'invocations',
+              properties: {
+                label: ['pipeline invocations label', { ns: meta.id }],
+                icon: 'ph--clock-countdown--regular',
+                disposition: 'hidden',
+              },
+            },
+            {
+              id: [nodeId, 'automation'].join(ATTENDABLE_PATH_SEPARATOR),
+              type: PLANK_COMPANION_TYPE,
+              data: 'automation',
+              properties: {
+                label: ['pipeline automation label', { ns: meta.id }],
+                icon: 'ph--lightning--regular',
+                disposition: 'hidden',
+              },
+            },
+          ]);
+        },
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

package/src/capabilities/app-graph-builder/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));

package/src/capabilities/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './app-graph-builder';
+export * from './operation-resolver';
+export * from './react-surface';

package/src/capabilities/operation-resolver/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { default as OperationResolver } from './operation-resolver';

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Obj, Ref, Type } from '@dxos/echo';
+import { OperationResolver } from '@dxos/operation';
+import { Collection } from '@dxos/schema';
+import { Pipeline } from '@dxos/types';
+
+import { PipelineOperation } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.OperationResolver, [
+      OperationResolver.make({
+        operation: PipelineOperation.OnCreateSpace,
+        handler: Effect.fnUntraced(function* ({ rootCollection }) {
+          const collection = Collection.makeManaged({ key: Type.getTypename(Pipeline.Pipeline) });
+          Obj.change(rootCollection, (c) => {
+            c.objects.push(Ref.make(collection));
+          });
+        }),
+      }),
+    ]),
+  ),
+);

package/src/capabilities/react-surface/index.ts

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

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,50 @@
+//
+// 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 { InvocationTraceContainer } from '@dxos/devtools';
+import { Obj } from '@dxos/echo';
+import { Layout } from '@dxos/react-ui';
+import { Pipeline } from '@dxos/types';
+
+import { PipelineContainer, PipelineObjectSettings } from '../../components';
+import { meta } from '../../meta';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: meta.id,
+        role: 'article',
+        filter: (data): data is { subject: Pipeline.Pipeline } => Obj.instanceOf(Pipeline.Pipeline, data.subject),
+        component: ({ data, role }) => <PipelineContainer role={role} subject={data.subject} />,
+      }),
+      Surface.create({
+        id: `${meta.id}/companion/invocations`,
+        role: 'article',
+        filter: (data): data is { companionTo: Pipeline.Pipeline } =>
+          Obj.instanceOf(Pipeline.Pipeline, data.companionTo) && data.subject === 'invocations',
+        component: ({ data, role }) => {
+          const db = Obj.getDatabase(data.companionTo);
+          // TODO(wittjosiah): Filter the invocations to those relevant to the project.
+          return (
+            <Layout.Main role={role}>
+              <InvocationTraceContainer db={db} detailAxis='block' />
+            </Layout.Main>
+          );
+        },
+      }),
+      Surface.create({
+        id: `${meta.id}/object-settings`,
+        role: 'object-settings',
+        filter: (data): data is { subject: Pipeline.Pipeline } => Obj.instanceOf(Pipeline.Pipeline, data.subject),
+        component: ({ data }) => <PipelineObjectSettings pipeline={data.subject} />,
+      }),
+    ]),
+  ),
+);

package/src/components/PipelineColumn.tsx

@@ -0,0 +1,145 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import type * as Schema from 'effect/Schema';
+import React, { forwardRef, useMemo, useRef, useState } from 'react';
+
+import { Obj, Query, Type } from '@dxos/echo';
+import { getQueryTarget, resolveSchemaWithRegistry } from '@dxos/plugin-space';
+import { Filter, getSpace, isSpace, useObject, useQuery } from '@dxos/react-client/echo';
+import { ScrollArea, useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Card, Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
+import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
+import { type Pipeline } from '@dxos/types';
+
+import { meta } from '../meta';
+
+import { type ItemProps, usePipeline } from './PipelineComponent';
+
+//
+// PipelineColumn
+//
+
+const PIPELINE_COLUMN_NAME = 'PipelineColumn';
+
+export type PipelineColumnProps = {
+  column: Pipeline.Column;
+};
+
+// TODO(thure): Duplicates a lot of the same boilerplate as Kanban columns; is there an opportunity to DRY these out?
+// TODO(wittjosiah): Support column DnD reordering.
+// TODO(wittjosiah): Support item DnD reordering (ordering needs to be stored on the view presentation collection).
+export const PipelineColumn = ({ column }: PipelineColumnProps) => {
+  const { t } = useTranslation(meta.id);
+  // Subscribe to the view target for reactivity.
+  const [viewSnapshot] = useObject(column.view);
+  const view = column.view.target;
+  const space = getSpace(view);
+  const { Item } = usePipeline(PIPELINE_COLUMN_NAME);
+  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>();
+  const query = useMemo(() => {
+    if (!view) {
+      return Query.select(Filter.nothing());
+    } else {
+      // NOTE: Snapshot is required to prevent signal read in prohibited scope.
+      // TODO(wittjosiah): Without stringify, filter.filters remains a proxied array.
+      return Query.fromAst(JSON.parse(JSON.stringify(viewSnapshot?.query.ast)));
+    }
+  }, [JSON.stringify(viewSnapshot?.query.ast)]);
+
+  useAsyncEffect(async () => {
+    if (!query || !space) {
+      return;
+    }
+
+    const schema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
+    setSchema(() => schema);
+  }, [space, query]);
+
+  const queryTarget = getQueryTarget(query.ast, space);
+  const items = useQuery(queryTarget, query);
+  const sortedItems = useMemo(() => {
+    // TODO(burdon): Hack to reverse queue.
+    return isSpace(queryTarget) ? items : [...items.reverse()];
+  }, [queryTarget, items]);
+  const projectionModel = useMemo(() => {
+    if (!schema || !view) {
+      return undefined;
+    }
+
+    // For mutable schemas (EchoSchema), use the live jsonSchema reference for reactivity.
+    const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : Type.toJsonSchema(schema);
+    const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
+    return new ProjectionModel({ view, baseSchema: jsonSchema, change });
+  }, [schema, view]);
+
+  const Tile = useMemo(() => {
+    return forwardRef<HTMLDivElement, Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'>>(
+      (props, ref) => <ItemTile {...props} ref={ref} itemProps={{ item: props.data, projectionModel }} />,
+    );
+  }, [Item, projectionModel]);
+
+  if (!view) {
+    return null;
+  }
+
+  return (
+    <Focus.Group asChild>
+      <div className='grid bs-full card-default-width overflow-hidden grid-rows-[min-content_1fr] density-fine border border-separator rounded-md bg-deckSurface'>
+        <Card.Toolbar>
+          <Card.DragHandle />
+          <Card.Title>{column.name ?? t('untitled view title')}</Card.Title>
+          <Card.Menu />
+        </Card.Toolbar>
+        <Mosaic.Container asChild orientation='vertical' withFocus>
+          <ScrollArea.Root orientation='vertical'>
+            <ScrollArea.Viewport classNames='p-2'>
+              <Mosaic.Stack orientation='vertical' items={sortedItems} getId={(item) => item.id} Tile={Tile} />
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Mosaic.Container>
+      </div>
+    </Focus.Group>
+  );
+};
+
+PipelineColumn.displayName = PIPELINE_COLUMN_NAME;
+
+//
+// ItemTile
+//
+
+const ITEM_TILE_NAME = 'ItemTile';
+
+type ItemTileProps = Pick<MosaicTileProps<Obj.Unknown>, 'classNames' | 'location' | 'data' | 'debug'> & {
+  itemProps: ItemProps;
+};
+
+const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
+  ({ classNames, data, location, debug, itemProps }, forwardedRef) => {
+    const rootRef = useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
+    const { Item } = usePipeline(ITEM_TILE_NAME);
+
+    return (
+      <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
+        <Focus.Group asChild>
+          <Card.Root classNames={classNames} ref={composedRef}>
+            <Card.Toolbar>
+              <Card.DragHandle />
+              <Card.Title>{Obj.getLabel(data)}</Card.Title>
+              <Card.Menu />
+            </Card.Toolbar>
+            <Card.Content>
+              <Item {...itemProps} />
+            </Card.Content>
+          </Card.Root>
+        </Focus.Group>
+      </Mosaic.Tile>
+    );
+  },
+);
+
+ItemTile.displayName = ITEM_TILE_NAME;

package/src/components/PipelineComponent.stories.tsx

@@ -0,0 +1,204 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useCallback, useEffect } from 'react';
+
+import { Filter, Ref } from '@dxos/client/echo';
+import { Obj, Query, Type } from '@dxos/echo';
+import { faker } from '@dxos/random';
+import { useQuery } from '@dxos/react-client/echo';
+import { useClientStory, withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { Form, omitId } from '@dxos/react-ui-form';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
+import { Collection, View } from '@dxos/schema';
+import { createObjectFactory } from '@dxos/schema/testing';
+import { Person, Pipeline } from '@dxos/types';
+
+import { translations } from '../translations';
+
+import { type ItemProps, PipelineComponent as PipelineComponent } from './PipelineComponent';
+
+const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
+  if (Obj.instanceOf(Person.Person, item)) {
+    const contact = item as Obj.Obj<Person.Person>;
+
+    return (
+      <Form.Root schema={omitId(Person.Person)} projection={projectionModel} values={contact} autoSave>
+        <Form.Viewport>
+          <Form.Content>
+            <Form.FieldSet />
+          </Form.Content>
+        </Form.Viewport>
+      </Form.Root>
+    );
+  }
+
+  return <span>{item.id}</span>;
+};
+
+const DefaultStory = () => {
+  const { space } = useClientStory();
+  const pipelines = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
+  const pipeline = pipelines[0];
+
+  const handleAddColumn = useCallback(() => {
+    if (!space || !pipeline) {
+      return;
+    }
+
+    // Create a new view for contacts similar to the initialization.
+    const view = View.make({
+      query: Query.select(Filter.type(Person.Person)),
+      jsonSchema: Type.toJsonSchema(Person.Person),
+      fields: ['fullName'],
+    });
+
+    Obj.change(pipeline, (p) => {
+      p.columns.push({
+        name: 'New Contacts',
+        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        order: [],
+      });
+    });
+
+    return Ref.make(view);
+  }, [space, pipeline]);
+
+  if (!pipeline) {
+    return <p>Loading…</p>;
+  }
+
+  return (
+    <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
+      <PipelineComponent.Content pipeline={pipeline} />
+    </PipelineComponent.Root>
+  );
+};
+
+const MutationsStory = () => {
+  const { space } = useClientStory();
+  const pipelines = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
+  const contacts = useQuery(space?.db, Filter.type(Person.Person));
+  const pipeline = pipelines[0];
+
+  const handleAddColumn = useCallback(() => {
+    if (!space || !pipeline) {
+      return;
+    }
+
+    // Create a new view for contacts similar to the initialization.
+    const view = View.make({
+      query: Query.select(Filter.type(Person.Person)),
+      jsonSchema: Type.toJsonSchema(Person.Person),
+      fields: ['fullName'],
+    });
+
+    Obj.change(pipeline, (p) => {
+      p.columns.push({
+        name: 'New Contacts',
+        view: Ref.make(view) as (typeof p.columns)[number]['view'],
+        order: [],
+      });
+    });
+
+    return view;
+  }, [space, pipeline]);
+
+  useEffect(() => {
+    if (!space || !pipeline) {
+      return;
+    }
+
+    const interval = setInterval(() => {
+      const factory = createObjectFactory(space.db, faker as any);
+      const p = Math.random();
+
+      if (p < 0.4) {
+        // Append to the name
+        const contactToAdjust = faker.helpers.arrayElement(contacts);
+        Obj.change(contactToAdjust, (c) => {
+          c.fullName = (c.fullName ?? '') + ' X';
+        });
+        return;
+      } else if (p < 0.7 && contacts.length > 1) {
+        // Remove a contact (30% chance, but only if we have more than 1)
+        const contactToRemove = faker.helpers.arrayElement(contacts);
+        space.db.remove(contactToRemove);
+      } else {
+        // Add a new contact (30% chance)
+        void factory([{ type: Person.Person, count: 1 }]);
+      }
+    }, 3_000);
+
+    return () => clearInterval(interval);
+  }, [space, pipeline, contacts]);
+
+  if (!pipeline) {
+    return <p>Loading…</p>;
+  }
+
+  return (
+    <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
+      <PipelineComponent.Content pipeline={pipeline} />
+    </PipelineComponent.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-pipeline/PipelineComponent',
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    withMosaic(),
+    withClientProvider({
+      types: [Pipeline.Pipeline, View.View, Collection.Collection, Person.Person],
+      createIdentity: true,
+      createSpace: true,
+      onCreateSpace: async ({ space }) => {
+        // Create a view for contacts.
+        const view = View.make({
+          name: 'Contacts',
+          query: Query.select(Filter.type(Person.Person)),
+          jsonSchema: Type.toJsonSchema(Person.Person),
+          fields: ['fullName'],
+        });
+
+        // Create a pipeline with columns.
+        space.db.add(
+          Pipeline.make({
+            columns: [
+              {
+                name: 'Contacts',
+                view: Ref.make(view),
+                order: [],
+              },
+            ],
+          }),
+        );
+
+        // Generate random contacts.
+        const factory = createObjectFactory(space.db, faker as any);
+        await factory([{ type: Person.Person, count: 12 }]);
+      },
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof PipelineComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: DefaultStory,
+};
+
+export const Mutations: Story = {
+  render: MutationsStory,
+};