@dxos/plugin-pipeline 0.8.4-main.3eb6e50203 → 0.8.4-main.c85a9c8dae

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-pipeline",
-  "version": "0.8.4-main.3eb6e50203",
+  "version": "0.8.4-main.c85a9c8dae",
   "description": "Pipeline plugin for Composer",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -40,32 +40,34 @@
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "effect": "3.19.16",
-    "@dxos/app-framework": "0.8.4-main.3eb6e50203",
-    "@dxos/async": "0.8.4-main.3eb6e50203",
-    "@dxos/assistant-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/app-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/devtools": "0.8.4-main.3eb6e50203",
-    "@dxos/echo": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-query": "0.8.4-main.3eb6e50203",
-    "@dxos/log": "0.8.4-main.3eb6e50203",
-    "@dxos/operation": "0.8.4-main.3eb6e50203",
-    "@dxos/functions": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-deck": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-graph": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-space": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-markdown": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-inbox": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-components": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-form": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-list": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/types": "0.8.4-main.3eb6e50203",
-    "@dxos/schema": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203"
+    "@dxos/assistant-toolkit": "0.8.4-main.c85a9c8dae",
+    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
+    "@dxos/devtools": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo-atom": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo-query": "0.8.4-main.c85a9c8dae",
+    "@dxos/async": "0.8.4-main.c85a9c8dae",
+    "@dxos/functions": "0.8.4-main.c85a9c8dae",
+    "@dxos/log": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/operation": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-deck": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-graph": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-inbox": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-markdown": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-space": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-components": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-form": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-menu": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-list": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
+    "@dxos/app-toolkit": "0.8.4-main.c85a9c8dae",
+    "@dxos/schema": "0.8.4-main.c85a9c8dae",
+    "@dxos/types": "0.8.4-main.c85a9c8dae",
+    "@dxos/util": "0.8.4-main.c85a9c8dae"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -73,24 +75,25 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/plugin-inbox": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-preview": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-testing": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "vite": "^7.1.11",
+    "@dxos/plugin-preview": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-inbox": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-testing": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/random": "0.8.4-main.c85a9c8dae",
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
+    "@dxos/echo-db": "0.8.4-main.c85a9c8dae",
+    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
+    "@dxos/plugin-attention": "0.8.4-main.c85a9c8dae"
   },
   "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.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
+    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
   },
   "publishConfig": {
     "access": "public"

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

@@ -7,7 +7,7 @@ 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 { ManagedCollection } from '@dxos/schema';
 import { Pipeline } from '@dxos/types';
 
 import { PipelineOperation } from '../../types';
@@ -18,7 +18,7 @@ export default Capability.makeModule(() =>
       OperationResolver.make({
         operation: PipelineOperation.OnCreateSpace,
         handler: Effect.fnUntraced(function* ({ rootCollection }) {
-          const collection = Collection.makeManaged({ key: Type.getTypename(Pipeline.Pipeline) });
+          const collection = ManagedCollection.makeManagedCollection({ key: Type.getTypename(Pipeline.Pipeline) });
           Obj.change(rootCollection, (c) => {
             c.objects.push(Ref.make(collection));
           });

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

@@ -9,10 +9,10 @@ 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 { Panel } from '@dxos/react-ui';
 import { Pipeline } from '@dxos/types';
 
-import { PipelineContainer, PipelineObjectSettings } from '../../components';
+import { PipelineContainer, PipelineObjectSettings } from '../../containers';
 import { meta } from '../../meta';
 
 export default Capability.makeModule(() =>
@@ -33,9 +33,11 @@ export default Capability.makeModule(() =>
           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>
+            <Panel.Root role={role} className='dx-article'>
+              <Panel.Content asChild>
+                <InvocationTraceContainer db={db} detailAxis='block' />
+              </Panel.Content>
+            </Panel.Root>
           );
         },
       }),

package/src/components/PipelineColumn.tsx

@@ -6,11 +6,13 @@ 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 { useObjectNavigate } from '@dxos/app-toolkit/ui';
+import { JsonSchema, Obj, Query, Type } from '@dxos/echo';
+import { resolveSchemaWithRegistry } from '@dxos/plugin-space';
+import { Filter, getSpace, useObject } from '@dxos/react-client/echo';
+import { useAsyncEffect, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Board, Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';
 import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
 import { type Pipeline } from '@dxos/types';
 
@@ -24,15 +26,12 @@ import { type ItemProps, usePipeline } from './PipelineComponent';
 
 const PIPELINE_COLUMN_NAME = 'PipelineColumn';
 
-export type PipelineColumnProps = {
-  column: Pipeline.Column;
-};
+export type PipelineColumnProps = Pick<MosaicTileProps<Pipeline.Column>, 'classNames' | 'location' | 'data' | 'debug'>;
 
-// 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) => {
+export const PipelineColumn = ({ data: column, location, classNames, debug }: PipelineColumnProps) => {
   const { t } = useTranslation(meta.id);
+  const dragHandleRef = useRef<HTMLButtonElement>(null);
   // Subscribe to the view target for reactivity.
   const [viewSnapshot] = useObject(column.view);
   const view = column.view.target;
@@ -50,7 +49,7 @@ export const PipelineColumn = ({ column }: PipelineColumnProps) => {
   }, [JSON.stringify(viewSnapshot?.query.ast)]);
 
   useAsyncEffect(async () => {
-    if (!query || !space) {
+    if (!query || !space?.db) {
       return;
     }
 
@@ -58,19 +57,13 @@ export const PipelineColumn = ({ column }: PipelineColumnProps) => {
     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 jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
     const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
     return new ProjectionModel({ view, baseSchema: jsonSchema, change });
   }, [schema, view]);
@@ -86,22 +79,16 @@ export const PipelineColumn = ({ column }: PipelineColumnProps) => {
   }
 
   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>
+    <Board.Column.Root
+      data={column}
+      location={location}
+      classNames={['group/column grid h-full overflow-hidden grid-rows-[var(--dx-rail-action)_1fr]', classNames]}
+      debug={debug}
+      dragHandleRef={dragHandleRef}
+    >
+      <Board.Column.Header label={column.name ?? t('untitled view title')} dragHandleRef={dragHandleRef} />
+      <Board.Column.Body data={column} Tile={Tile} />
+    </Board.Column.Root>
   );
 };
 
@@ -122,6 +109,7 @@ const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
     const rootRef = useRef<HTMLDivElement>(null);
     const composedRef = useComposedRefs<HTMLDivElement>(rootRef, forwardedRef);
     const { Item } = usePipeline(ITEM_TILE_NAME);
+    const handleNavigate = useObjectNavigate(data);
 
     return (
       <Mosaic.Tile asChild id={data.id} data={data} location={location} debug={debug}>
@@ -129,7 +117,7 @@ const ItemTile = forwardRef<HTMLDivElement, ItemTileProps>(
           <Card.Root classNames={classNames} ref={composedRef}>
             <Card.Toolbar>
               <Card.DragHandle />
-              <Card.Title>{Obj.getLabel(data)}</Card.Title>
+              <Card.Title onClick={handleNavigate}>{Obj.getLabel(data)}</Card.Title>
               <Card.Menu />
             </Card.Toolbar>
             <Card.Content>

package/src/components/PipelineComponent.stories.tsx

@@ -2,28 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback, useContext, useEffect } from 'react';
 
 import { Filter, Ref } from '@dxos/client/echo';
-import { Obj, Query, Type } from '@dxos/echo';
+import { JsonSchema, Obj, Query } from '@dxos/echo';
+import { Collection, View } 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 { ViewModel } from '@dxos/schema';
 import { createObjectFactory } from '@dxos/schema/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 import { Person, Pipeline } from '@dxos/types';
 
+import { usePipelineBoardModel } from '../hooks';
 import { translations } from '../translations';
 
-import { type ItemProps, PipelineComponent as PipelineComponent } from './PipelineComponent';
+import { type ItemProps, PipelineComponent } from './PipelineComponent';
 
 const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
   if (Obj.instanceOf(Person.Person, item)) {
-    const contact = item as Obj.Obj<Person.Person>;
+    const contact = item as Obj.OfShape<Person.Person>;
 
     return (
       <Form.Root schema={omitId(Person.Person)} projection={projectionModel} values={contact} autoSave>
@@ -40,9 +44,11 @@ const StorybookProjectItem = ({ item, projectionModel }: ItemProps) => {
 };
 
 const DefaultStory = () => {
+  const registry = useContext(RegistryContext);
   const { space } = useClientStory();
   const pipelines = useQuery(space?.db, Filter.type(Pipeline.Pipeline));
   const pipeline = pipelines[0];
+  const model = usePipelineBoardModel(pipeline, registry);
 
   const handleAddColumn = useCallback(() => {
     if (!space || !pipeline) {
@@ -50,9 +56,9 @@ const DefaultStory = () => {
     }
 
     // Create a new view for contacts similar to the initialization.
-    const view = View.make({
+    const view = ViewModel.make({
       query: Query.select(Filter.type(Person.Person)),
-      jsonSchema: Type.toJsonSchema(Person.Person),
+      jsonSchema: JsonSchema.toJsonSchema(Person.Person),
       fields: ['fullName'],
     });
 
@@ -73,16 +79,20 @@ const DefaultStory = () => {
 
   return (
     <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
-      <PipelineComponent.Content pipeline={pipeline} />
+      <PipelineComponent.Content model={model}>
+        <PipelineComponent.Columns pipeline={pipeline} />
+      </PipelineComponent.Content>
     </PipelineComponent.Root>
   );
 };
 
 const MutationsStory = () => {
+  const registry = useContext(RegistryContext);
   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 model = usePipelineBoardModel(pipeline, registry);
 
   const handleAddColumn = useCallback(() => {
     if (!space || !pipeline) {
@@ -90,9 +100,9 @@ const MutationsStory = () => {
     }
 
     // Create a new view for contacts similar to the initialization.
-    const view = View.make({
+    const view = ViewModel.make({
       query: Query.select(Filter.type(Person.Person)),
-      jsonSchema: Type.toJsonSchema(Person.Person),
+      jsonSchema: JsonSchema.toJsonSchema(Person.Person),
       fields: ['fullName'],
     });
 
@@ -142,16 +152,19 @@ const MutationsStory = () => {
 
   return (
     <PipelineComponent.Root Item={StorybookProjectItem} onAddColumn={handleAddColumn}>
-      <PipelineComponent.Content pipeline={pipeline} />
+      <PipelineComponent.Content model={model}>
+        <PipelineComponent.Columns pipeline={pipeline} />
+      </PipelineComponent.Content>
     </PipelineComponent.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-pipeline/PipelineComponent',
+  title: 'plugins/plugin-pipeline/components/PipelineComponent',
   decorators: [
     withTheme(),
     withLayout({ layout: 'column' }),
+    withRegistry,
     withMosaic(),
     withClientProvider({
       types: [Pipeline.Pipeline, View.View, Collection.Collection, Person.Person],
@@ -159,10 +172,10 @@ const meta = {
       createSpace: true,
       onCreateSpace: async ({ space }) => {
         // Create a view for contacts.
-        const view = View.make({
+        const view = ViewModel.make({
           name: 'Contacts',
           query: Query.select(Filter.type(Person.Person)),
-          jsonSchema: Type.toJsonSchema(Person.Person),
+          jsonSchema: JsonSchema.toJsonSchema(Person.Person),
           fields: ['fullName'],
         });
 

package/src/components/PipelineComponent.tsx

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import { createContext } from '@radix-ui/react-context';
-import React, { type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 
-import { type Obj } from '@dxos/echo';
-import { useObject } from '@dxos/react-client/echo';
+import { Obj } from '@dxos/echo';
 import { Toolbar, type ToolbarRootProps, useTranslation } from '@dxos/react-ui';
-import { Stack } from '@dxos/react-ui-stack';
+import { Board, type BoardModel, useBoard, useEventHandlerAdapter } from '@dxos/react-ui-mosaic';
 import { type ProjectionModel } from '@dxos/schema';
-import { type Pipeline as PipelineType } from '@dxos/types';
+import { type Pipeline } from '@dxos/types';
 
 import { meta } from '../meta';
 
@@ -23,26 +23,30 @@ type ItemProps = {
 
 const itemNoOp = ({ item }: ItemProps) => <span>{item.id}</span>;
 
+//
+// Root
+//
+
 type PipelineContextValue = {
   Item: FC<ItemProps>;
   // TODO(wittjosiah): Support adding items.
-  //   If the created item doesn't match the current query, it will not be visible.
-  // onAddItem?: (schema: Schema.Schema.AnyNoContext) => void;
+  //  If the created item doesn't match the current query, it will not be visible.
+  // TODO(wittjosiah): onAddItem?: (schema: Schema.Schema.AnyNoContext) => void;
   onAddColumn?: () => void;
 };
 
-//
-// Root
-//
-
-type PipelineRootProps = PipelineContextValue;
+type PipelineRootProps = PropsWithChildren<PipelineContextValue>;
 
 const PIPELINE_ROOT = 'Pipeline.Root';
 
-const [PipelineRoot, usePipeline] = createContext<PipelineContextValue>(PIPELINE_ROOT, {
+const [PipelineRootContext, usePipeline] = createContext<PipelineContextValue>(PIPELINE_ROOT, {
   Item: itemNoOp,
 });
 
+const PipelineRoot = ({ children, ...contextValue }: PipelineRootProps) => (
+  <PipelineRootContext {...contextValue}>{children}</PipelineRootContext>
+);
+
 PipelineRoot.displayName = PIPELINE_ROOT;
 
 //
@@ -51,23 +55,46 @@ PipelineRoot.displayName = PIPELINE_ROOT;
 
 const PIPELINE_CONTENT_NAME = 'Pipeline.Content';
 
-type PipelineContentProps = {
-  pipeline: PipelineType.Pipeline;
-};
+type PipelineContentProps = PropsWithChildren<{
+  model: BoardModel<Pipeline.Column, Obj.Unknown>;
+}>;
 
-const PipelineContent = ({ pipeline }: PipelineContentProps) => {
-  const [columns] = useObject(pipeline, 'columns');
+const PipelineContent = ({ model, children, ...props }: PipelineContentProps) => (
+  <Board.Root {...props} model={model}>
+    {children}
+  </Board.Root>
+);
 
-  return (
-    <Stack orientation='horizontal' size='contain' rail={false}>
-      {columns.map((column) => {
-        return <PipelineColumn key={column.view.dxn.toString()} column={column} />;
-      })}
-    </Stack>
-  );
+PipelineContent.displayName = PIPELINE_CONTENT_NAME;
+
+//
+// Columns
+//
+
+const PIPELINE_COLUMNS_NAME = 'Pipeline.Columns';
+
+type PipelineColumnsProps = {
+  pipeline: Pipeline.Pipeline;
 };
 
-PipelineContent.displayName = PIPELINE_CONTENT_NAME;
+const PipelineColumns = ({ pipeline }: PipelineColumnsProps) => {
+  const { model } = useBoard(PIPELINE_COLUMNS_NAME);
+  const columns = useAtomValue(model.columns);
+  const eventHandler = useEventHandlerAdapter<Pipeline.Column, Obj.Unknown>({
+    id: pipeline.id,
+    // TODO(wittjosiah): Cast because columns array is readonly.
+    items: columns as any,
+    getId: model.getColumnId,
+    get: (data) => data as unknown as Obj.Unknown,
+    make: (object) => object as unknown as Pipeline.Column,
+    canDrop: ({ source }) => model.isColumn(source.data),
+    onChange: (mutate) => Obj.change(pipeline, (p) => mutate(p.columns)),
+  });
+
+  return <Board.Content id='pipeline' eventHandler={eventHandler} Tile={PipelineColumn} />;
+};
+
+PipelineColumns.displayName = PIPELINE_COLUMNS_NAME;
 
 //
 // Toolbar
@@ -95,9 +122,10 @@ PipelineToolbar.displayName = PIPELINE_TOOLBAR_NAME;
 export const PipelineComponent = {
   Root: PipelineRoot,
   Content: PipelineContent,
+  Columns: PipelineColumns,
   Toolbar: PipelineToolbar,
 };
 
 export { usePipeline };
 
-export type { ItemProps, PipelineContextValue, PipelineRootProps };
+export type { ItemProps, PipelineContextValue, PipelineRootProps, PipelineContentProps, PipelineColumnsProps };

package/src/components/index.ts

@@ -2,10 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export type { PipelineContainerProps } from './PipelineContainer';
-export type { PipelineObjectSettingsProps } from './PipelineSettings';
-
-export const PipelineContainer = lazy(() => import('./PipelineContainer'));
-export const PipelineObjectSettings = lazy(() => import('./PipelineSettings'));
+export * from './PipelineColumn';
+export * from './PipelineComponent';