@dxos/plugin-kanban 0.8.4-main.f9ba587 → 0.8.4-main.fd6878d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.f9ba587",
+  "version": "0.8.4-main.fd6878d",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,21 +10,23 @@
   "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": {
-      "types": "./dist/types/src/types.d.ts",
-      "browser": "./dist/lib/browser/types.mjs",
-      "node": "./dist/lib/node-esm/types.mjs"
+      "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"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
     "*": {
       "types": [
-        "dist/types/src/types.d.ts"
+        "dist/types/src/types/index.d.ts"
       ]
     }
   },
@@ -35,29 +37,29 @@
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
-    "effect": "3.16.13",
-    "@dxos/ai": "0.8.4-main.f9ba587",
-    "@dxos/app-framework": "0.8.4-main.f9ba587",
-    "@dxos/assistant": "0.8.4-main.f9ba587",
-    "@dxos/async": "0.8.4-main.f9ba587",
-    "@dxos/artifact": "0.8.4-main.f9ba587",
-    "@dxos/echo": "0.8.4-main.f9ba587",
-    "@dxos/echo-schema": "0.8.4-main.f9ba587",
-    "@dxos/effect": "0.8.4-main.f9ba587",
-    "@dxos/invariant": "0.8.4-main.f9ba587",
-    "@dxos/plugin-client": "0.8.4-main.f9ba587",
-    "@dxos/log": "0.8.4-main.f9ba587",
-    "@dxos/plugin-graph": "0.8.4-main.f9ba587",
-    "@dxos/plugin-search": "0.8.4-main.f9ba587",
-    "@dxos/plugin-space": "0.8.4-main.f9ba587",
-    "@dxos/random": "0.8.4-main.f9ba587",
-    "@dxos/react-client": "0.8.4-main.f9ba587",
-    "@dxos/react-ui": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-form": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-kanban": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-stack": "0.8.4-main.f9ba587",
-    "@dxos/schema": "0.8.4-main.f9ba587",
-    "@dxos/util": "0.8.4-main.f9ba587"
+    "effect": "3.17.7",
+    "@dxos/app-framework": "0.8.4-main.fd6878d",
+    "@dxos/async": "0.8.4-main.fd6878d",
+    "@dxos/blueprints": "0.8.4-main.fd6878d",
+    "@dxos/assistant": "0.8.4-main.fd6878d",
+    "@dxos/echo": "0.8.4-main.fd6878d",
+    "@dxos/echo-schema": "0.8.4-main.fd6878d",
+    "@dxos/effect": "0.8.4-main.fd6878d",
+    "@dxos/invariant": "0.8.4-main.fd6878d",
+    "@dxos/plugin-graph": "0.8.4-main.fd6878d",
+    "@dxos/log": "0.8.4-main.fd6878d",
+    "@dxos/plugin-search": "0.8.4-main.fd6878d",
+    "@dxos/plugin-client": "0.8.4-main.fd6878d",
+    "@dxos/plugin-space": "0.8.4-main.fd6878d",
+    "@dxos/random": "0.8.4-main.fd6878d",
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-client": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-kanban": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-form": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-stack": "0.8.4-main.fd6878d",
+    "@dxos/schema": "0.8.4-main.fd6878d",
+    "@dxos/util": "0.8.4-main.fd6878d",
+    "@dxos/ai": "0.8.4-main.fd6878d"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -65,19 +67,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/plugin-preview": "0.8.4-main.f9ba587",
-    "@dxos/plugin-theme": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587",
-    "@dxos/storybook-utils": "0.8.4-main.f9ba587",
-    "@dxos/test-utils": "0.8.4-main.f9ba587"
+    "@dxos/plugin-preview": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
+    "@dxos/plugin-theme": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.fd6878d",
+    "@dxos/test-utils": "0.8.4-main.fd6878d",
+    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.f9ba587",
-    "@dxos/react-ui-theme": "0.8.4-main.f9ba587"
+    "@dxos/react-ui": "0.8.4-main.fd6878d",
+    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
   },
   "publishConfig": {
     "access": "public"

package/src/KanbanPlugin.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { createIntent, defineModule, contributes, Capabilities, Events, definePlugin } from '@dxos/app-framework';
+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 { KanbanType, translations as kanbanTranslations } from '@dxos/react-ui-kanban';
+import { KanbanView, translations as kanbanTranslations } from '@dxos/react-ui-kanban';
 
-import { ArtifactDefinition, IntentResolver, ReactSurface } from './capabilities';
+import { IntentResolver, ReactSurface } from './capabilities';
 import { meta } from './meta';
 import { translations } from './translations';
 import { CreateKanbanSchema, KanbanAction } from './types';
@@ -25,7 +25,7 @@ export const KanbanPlugin = () =>
       activatesOn: Events.SetupMetadata,
       activate: () =>
         contributes(Capabilities.Metadata, {
-          id: KanbanType.typename,
+          id: KanbanView.typename,
           metadata: {
             icon: 'ph--kanban--regular',
           },
@@ -38,8 +38,9 @@ export const KanbanPlugin = () =>
         contributes(
           SpaceCapabilities.ObjectForm,
           defineObjectForm({
-            objectSchema: KanbanType,
+            objectSchema: KanbanView,
             formSchema: CreateKanbanSchema,
+            hidden: true,
             getIntent: (props, options) => createIntent(KanbanAction.Create, { ...props, space: options.space }),
           }),
         ),
@@ -54,9 +55,4 @@ export const KanbanPlugin = () =>
       activatesOn: Events.SetupIntentResolver,
       activate: IntentResolver,
     }),
-    defineModule({
-      id: `${meta.id}/module/artifact-definition`,
-      activatesOn: Events.SetupArtifactDefinition,
-      activate: ArtifactDefinition,
-    }),
   ]);

package/src/capabilities/artifact-definition.ts

@@ -2,17 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
+// ISSUE(burdon): defineArtifact
+// @ts-nocheck
+
 import { Schema, pipe } from 'effect';
 
-import { createTool, ToolResult } from '@dxos/ai';
-import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { defineArtifact } from '@dxos/artifact';
+import { ToolResult, createTool } from '@dxos/ai';
+import { Capabilities, type PromiseIntentDispatcher, chain, contributes, createIntent } from '@dxos/app-framework';
 import { createArtifactElement } from '@dxos/assistant';
-import { Obj } from '@dxos/echo';
+import { defineArtifact } from '@dxos/blueprints';
+import { Obj, Query } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { Filter, fullyQualifiedId, type Space } from '@dxos/react-client/echo';
-import { KanbanType } from '@dxos/react-ui-kanban';
+import { Filter, type Space, fullyQualifiedId } from '@dxos/react-client/echo';
+import { KanbanView } from '@dxos/react-ui-kanban';
+import { DataType } from '@dxos/schema';
+import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../meta';
 import { KanbanAction } from '../types';
@@ -37,7 +42,7 @@ export default () => {
       - When adding items, you must not include the 'id' field -- it is automatically generated
       - BEFORE adding items, always make sure the board has been shown to the user!
     `,
-    schema: KanbanType,
+    schema: KanbanView,
     tools: [
       createTool(meta.id, {
         name: 'create',
@@ -47,7 +52,7 @@ export default () => {
         caption: 'Creating kanban board...',
         schema: Schema.Struct({
           typename: Schema.String.annotations({
-            description: 'The fully qualified typename of the schema to use for the kanban cards.',
+            description: 'The fully qualified name of the record type to use for the kanban cards.',
           }),
           pivotColumn: Schema.optional(Schema.String).annotations({
             description: 'Optional field name to use as the column pivot.',
@@ -88,19 +93,24 @@ export default () => {
         execute: async (_input, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects: boards } = await space.db.query(Filter.type(KanbanType)).run();
+          const { objects } = await space.db.query(Filter.type(DataType.View)).run();
 
           const boardInfo = await Promise.all(
-            boards.map(async (board: KanbanType) => {
-              const view = await board.cardView?.load();
+            objects.map(async (view) => {
+              const kanban = await view.presentation.load();
+              if (!Obj.instanceOf(KanbanView, kanban)) {
+                return null;
+              }
+
               return {
-                id: fullyQualifiedId(board),
-                typename: view?.query.typename,
+                id: fullyQualifiedId(view),
+                name: view.name ?? 'Unnamed Kanban',
+                typename: view.query.typename,
               };
             }),
           );
 
-          return ToolResult.Success(boardInfo);
+          return ToolResult.Success(boardInfo.filter(isNonNullable));
         },
       }),
       createTool(meta.id, {
@@ -111,12 +121,13 @@ export default () => {
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects: boards } = await space.db.query(Filter.type(KanbanType)).run();
-          const board = boards.find((board: KanbanType) => fullyQualifiedId(board) === id);
-          invariant(Obj.instanceOf(KanbanType, board));
+          const view = (await space.db
+            // TODO(wittjosiah): Filter.and should aggregate type
+            .query(Query.select(Filter.and(Filter.type(DataType.View), Filter.ids(id))))
+            .first()) as DataType.View;
 
-          const view = await board.cardView?.load();
-          invariant(view);
+          const kanban = await view.presentation.load();
+          invariant(Obj.instanceOf(KanbanView, kanban));
 
           const typename = view.query.typename;
           const schema = await space.db.schemaRegistry.query({ typename }).firstOrUndefined();
@@ -124,8 +135,8 @@ export default () => {
 
           return ToolResult.Success({
             schema,
-            columnField: board.columnFieldId,
-            viewFields: view.fields,
+            columnField: kanban.columnFieldId,
+            viewFields: view.projection.fields,
           });
         },
       }),

package/src/capabilities/index.ts

@@ -4,6 +4,5 @@
 
 import { lazy } from '@dxos/app-framework';
 
-export const ArtifactDefinition = lazy(() => import('./artifact-definition'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));

package/src/capabilities/intent-resolver.ts

@@ -2,15 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, Capabilities, createResolver, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { getSpace } from '@dxos/react-client/echo';
-import { ViewProjection } from '@dxos/schema';
+import { ProjectionModel } from '@dxos/schema';
 
 import { KANBAN_PLUGIN } from '../meta';
-import { initializeKanban } from '../testing';
-import { KanbanAction } from '../types';
+import { KanbanAction, createKanban } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
@@ -18,22 +17,22 @@ export default (context: PluginContext) =>
       intent: KanbanAction.Create,
       resolve: async ({ space, name, typename, initialPivotColumn }) => {
         const client = context.getCapability(ClientCapabilities.Client);
-        const { kanban } = await initializeKanban({ client, space, name, typename, initialPivotColumn });
-        return { data: { object: kanban } };
+        const { view } = await createKanban({
+          client,
+          space,
+          name,
+          typename,
+          initialPivotColumn,
+        });
+        return { data: { object: view } };
       },
     }),
     createResolver({
       intent: KanbanAction.DeleteCardField,
-      resolve: ({ kanban, fieldId, deletionData }, undo) => {
-        invariant(kanban.cardView);
-        invariant(kanban.cardView.target?.query.typename);
-
-        const schema =
-          kanban.cardView.target &&
-          getSpace(kanban)?.db.schemaRegistry.getSchema(kanban.cardView.target.query.typename);
+      resolve: async ({ view, fieldId, deletionData }, undo) => {
+        const schema = getSpace(view)?.db.schemaRegistry.getSchema(view.query.typename!);
         invariant(schema);
-        invariant(kanban.cardView.target);
-        const projection = new ViewProjection(schema.jsonSchema, kanban.cardView.target);
+        const projection = new ProjectionModel(schema.jsonSchema, view.projection);
 
         if (!undo) {
           const { deleted, index } = projection.deleteFieldProjection(fieldId);

package/src/capabilities/react-surface.tsx

@@ -6,31 +6,34 @@ import { type Schema } from 'effect';
 import React, { useMemo } from 'react';
 
 import { Capabilities, contributes, createSurface, useCapabilities } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
+import { Obj, Type } from '@dxos/echo';
 import { findAnnotation } from '@dxos/effect';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { getSpace, isSpace, type Space } from '@dxos/react-client/echo';
+import { type Space, getSpace, isSpace } from '@dxos/react-client/echo';
 import { type InputProps, SelectInput, useFormValues } from '@dxos/react-ui-form';
-import { type KanbanType } from '@dxos/react-ui-kanban';
-import { type DataType } from '@dxos/schema';
+import { KanbanView } from '@dxos/react-ui-kanban';
+import { DataType } from '@dxos/schema';
 
 import { KanbanContainer, KanbanViewEditor } from '../components';
 import { meta } from '../meta';
-import { isKanban, PivotColumnAnnotationId } from '../types';
+import { PivotColumnAnnotationId } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
       id: meta.id,
       role: ['article', 'section'],
-      filter: (data): data is { subject: KanbanType } => isKanban(data.subject),
-      component: ({ data, role }) => <KanbanContainer kanban={data.subject} role={role} />,
+      filter: (data): data is { subject: DataType.View } =>
+        Obj.instanceOf(DataType.View, data.subject) && Obj.instanceOf(KanbanView, data.subject.presentation.target),
+      component: ({ data, role }) => <KanbanContainer view={data.subject} role={role} />,
     }),
     createSurface({
       id: `${meta.id}/object-settings`,
       role: 'object-settings',
-      filter: (data): data is { subject: KanbanType } => isKanban(data.subject),
-      component: ({ data }) => <KanbanViewEditor kanban={data.subject} />,
+      position: 'hoist',
+      filter: (data): data is { subject: DataType.View } =>
+        Obj.instanceOf(DataType.View, data.subject) && Obj.instanceOf(KanbanView, data.subject.presentation.target),
+      component: ({ data }) => <KanbanViewEditor view={data.subject} />,
     }),
     createSurface({
       id: `${meta.id}/create-initial-schema-form-[pivot-column]`,

package/src/components/KanbanContainer.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
@@ -16,17 +16,19 @@ import { PreviewPlugin } from '@dxos/plugin-preview';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 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 { useClient } from '@dxos/react-client';
-import { Filter, useSpaces, useQuery, useSchema } from '@dxos/react-client/echo';
+import { Filter, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
 import { ViewEditor } from '@dxos/react-ui-form';
-import { Kanban, KanbanType, useKanbanModel } from '@dxos/react-ui-kanban';
+import { Kanban, KanbanView, useKanbanModel } from '@dxos/react-ui-kanban';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType, ViewProjection } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { DataType, ProjectionModel } from '@dxos/schema';
+import { withLayout } from '@dxos/storybook-utils';
 
-import { initializeKanban } from '../testing';
 import { translations } from '../translations';
+import { createKanban } from '../types';
 
 faker.seed(0);
 
@@ -39,39 +41,39 @@ const rollOrg = () => ({
   description: faker.lorem.paragraph(),
   image: faker.image.url(),
   website: faker.internet.url(),
-  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
+  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id as DataType.Organization['status'],
 });
 
 const StorybookKanban = () => {
   const client = useClient();
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
-  const kanbans = useQuery(space, Filter.type(KanbanType));
-  const [kanban, setKanban] = useState<KanbanType>();
-  const [projection, setProjection] = useState<ViewProjection>();
-  const schema = useSchema(client, space, kanban?.cardView?.target?.query.typename);
+  const views = useQuery(space, Filter.type(DataType.View));
+  const [view, setView] = useState<DataType.View>();
+  const [projection, setProjection] = useState<ProjectionModel>();
+  const schema = useSchema(client, space, view?.query.typename);
 
   useEffect(() => {
-    if (kanbans.length && !kanban) {
-      const kanban = kanbans[0];
-      setKanban(kanban);
+    if (views.length && !view) {
+      const view = views[0];
+      setView(view);
     }
-  }, [kanbans]);
+  }, [views]);
 
   useEffect(() => {
-    if (kanban?.cardView?.target && schema) {
+    if (view?.projection && schema) {
       const jsonSchema = Type.toJsonSchema(schema);
-      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
+      setProjection(new ProjectionModel(jsonSchema, view.projection));
     }
     // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
     //  @dmaretskyi? Once resolved, update in multiple places (e.g., storybooks).
-  }, [kanban?.cardView?.target, schema, JSON.stringify(schema ? Type.toJsonSchema(schema) : {})]);
+  }, [view?.projection, schema, JSON.stringify(schema ? Type.toJsonSchema(schema) : {})]);
 
   const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
   const model = useKanbanModel({
-    kanban,
+    view,
     schema,
     projection,
     items: filteredObjects,
@@ -99,15 +101,15 @@ const StorybookKanban = () => {
     (typename: string) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      invariant(kanban?.cardView?.target);
+      invariant(view);
 
       schema.updateTypename(typename);
-      kanban.cardView.target.query.typename = typename;
+      view.query.typename = typename;
     },
-    [kanban?.cardView?.target, schema],
+    [view, schema],
   );
 
-  if (!schema || !kanban) {
+  if (!schema || !view) {
     return null;
   }
 
@@ -115,19 +117,17 @@ const StorybookKanban = () => {
     <div className='grow grid grid-cols-[1fr_350px]'>
       {model ? <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
       <div className='flex flex-col bs-full border-is border-separator overflow-y-auto'>
-        {kanban.cardView && (
-          <ViewEditor
-            registry={space?.db.schemaRegistry}
-            schema={schema}
-            view={kanban.cardView.target!}
-            onTypenameChanged={handleTypenameChanged}
-            onDelete={(fieldId: string) => {
-              console.log('[ViewEditor]', 'onDelete', fieldId);
-            }}
-          />
-        )}
+        <ViewEditor
+          registry={space?.db.schemaRegistry}
+          schema={schema}
+          view={view}
+          onTypenameChanged={handleTypenameChanged}
+          onDelete={(fieldId: string) => {
+            console.log('[ViewEditor]', 'onDelete', fieldId);
+          }}
+        />
         <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ cardView: kanban.cardView?.target, cardSchema: schema }, null, 2)}
+          {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -148,30 +148,28 @@ const meta: Meta<StoryProps> = {
   render: () => <StorybookKanban />,
   parameters: { translations },
   decorators: [
-    withTheme,
     withLayout({ fullscreen: true }),
     withPluginManager({
       plugins: [
+        ThemePlugin({ tx: defaultTx }),
         ClientPlugin({
-          types: [DataType.Organization, DataType.Person, KanbanType],
-          onClientInitialized: async (_, client) => {
+          types: [DataType.Organization, DataType.Person, DataType.View, KanbanView],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
             const space = await client.spaces.create();
             await space.waitUntilReady();
-            const { schema, kanban } = await initializeKanban({
-              space,
+            const { view } = await createKanban({
               client,
+              space,
               typename: DataType.Organization.typename,
               initialPivotColumn: 'status',
             });
-            space.db.add(kanban);
-
-            if (schema) {
-              // TODO(burdon): Replace with sdk/schema/testing.
-              Array.from({ length: 80 }).map(() => {
-                return space.db.add(Obj.make(schema, rollOrg()));
-              });
-            }
+            space.db.add(view);
+
+            // TODO(burdon): Replace with sdk/schema/testing.
+            Array.from({ length: 80 }).map(() => {
+              return space.db.add(Obj.make(DataType.Organization, rollOrg()));
+            });
           },
         }),
         StorybookLayoutPlugin(),

package/src/components/KanbanContainer.tsx

@@ -9,18 +9,18 @@ import { Filter, Obj, Type } from '@dxos/echo';
 import { EchoSchema, type TypedObject } from '@dxos/echo-schema';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { useClient } from '@dxos/react-client';
-import { useQuery, getSpace } from '@dxos/react-client/echo';
-import { type KanbanType, useKanbanModel, Kanban } from '@dxos/react-ui-kanban';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { Kanban, useKanbanModel } from '@dxos/react-ui-kanban';
 import { StackItem } from '@dxos/react-ui-stack';
-import { ViewProjection } from '@dxos/schema';
+import { type DataType, ProjectionModel } from '@dxos/schema';
 
 import { KanbanAction } from '../types';
 
-export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }) => {
+export const KanbanContainer = ({ view }: { view: DataType.View; role: string }) => {
   const client = useClient();
   const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ViewProjection>();
-  const space = getSpace(kanban);
+  const [projection, setProjection] = useState<ProjectionModel>();
+  const space = getSpace(view);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const jsonSchema = useMemo(() => {
@@ -31,7 +31,7 @@ export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }
   }, [cardSchema]);
 
   useEffect(() => {
-    const typename = kanban.cardView?.target?.query?.typename;
+    const typename = view.query.typename;
     const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
     if (staticSchema) {
       setCardSchema(() => staticSchema as TypedObject<any, any>);
@@ -49,20 +49,20 @@ export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }
       );
       return unsubscribe;
     }
-  }, [kanban.cardView?.target?.query, space]);
+  }, [view.query.typename, space]);
 
   useEffect(() => {
-    if (kanban.cardView?.target && jsonSchema) {
-      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
+    if (jsonSchema) {
+      setProjection(new ProjectionModel(jsonSchema, view.projection));
     }
     // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-  }, [kanban.cardView?.target, JSON.stringify(jsonSchema)]);
+  }, [view.projection, JSON.stringify(jsonSchema)]);
 
   const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
   const model = useKanbanModel({
-    kanban,
+    view,
     schema: cardSchema,
     projection,
     items: filteredObjects,