@dxos/plugin-kanban 0.8.3 → 0.8.4-main.1da679c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1da679c",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "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": {
+      "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"
@@ -35,47 +37,50 @@
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.9.0",
-    "effect": "3.14.21",
-    "@dxos/ai": "0.8.3",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/assistant": "0.8.3",
-    "@dxos/artifact": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/effect": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/plugin-client": "0.8.3",
-    "@dxos/plugin-graph": "0.8.3",
-    "@dxos/plugin-search": "0.8.3",
-    "@dxos/plugin-space": "0.8.3",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-form": "0.8.3",
-    "@dxos/react-ui-kanban": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/schema": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "effect": "3.17.7",
+    "@dxos/ai": "0.8.4-main.1da679c",
+    "@dxos/app-framework": "0.8.4-main.1da679c",
+    "@dxos/assistant": "0.8.4-main.1da679c",
+    "@dxos/async": "0.8.4-main.1da679c",
+    "@dxos/echo": "0.8.4-main.1da679c",
+    "@dxos/blueprints": "0.8.4-main.1da679c",
+    "@dxos/echo-schema": "0.8.4-main.1da679c",
+    "@dxos/effect": "0.8.4-main.1da679c",
+    "@dxos/functions": "0.8.4-main.1da679c",
+    "@dxos/invariant": "0.8.4-main.1da679c",
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/plugin-space": "0.8.4-main.1da679c",
+    "@dxos/plugin-client": "0.8.4-main.1da679c",
+    "@dxos/react-client": "0.8.4-main.1da679c",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/plugin-search": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-form": "0.8.4-main.1da679c",
+    "@dxos/react-ui-kanban": "0.8.4-main.1da679c",
+    "@dxos/react-ui-stack": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c",
+    "@dxos/schema": "0.8.4-main.1da679c",
+    "@dxos/plugin-graph": "0.8.4-main.1da679c"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/plugin-preview": "0.8.3",
-    "@dxos/plugin-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3"
+    "vite": "7.1.1",
+    "@dxos/plugin-preview": "0.8.4-main.1da679c",
+    "@dxos/plugin-theme": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.1da679c",
+    "@dxos/test-utils": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "publishConfig": {
     "access": "public"

package/src/KanbanPlugin.tsx

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

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/blueprint-definition.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capabilities, contributes } from '@dxos/app-framework';
+import { Blueprint, Template } from '@dxos/blueprints';
+import { type FunctionDefinition } from '@dxos/functions';
+import { trim } from '@dxos/util';
+
+const functions: FunctionDefinition[] = [];
+const tools: string[] = [];
+
+export default () => {
+  return [
+    contributes(Capabilities.Functions, functions),
+    contributes(
+      Capabilities.BlueprintDefinition,
+      Blueprint.make({
+        key: 'dxos.org/blueprint/kanban',
+        name: 'Kanban',
+        tools: Blueprint.toolDefinitions({ functions, tools }),
+        instructions: Template.make({
+          source: trim`
+            You can create and update kanban boards to show data in sorted columns defined by schema.
+          `,
+        }),
+      }),
+    ),
+  ];
+};

package/src/capabilities/index.ts

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

package/src/capabilities/intent-resolver.ts

@@ -2,14 +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 { Kanban } from '@dxos/react-ui-kanban/types';
+import { ProjectionModel, typenameFromQuery } from '@dxos/schema';
 
 import { KANBAN_PLUGIN } from '../meta';
-import { initializeKanban } from '../testing';
 import { KanbanAction } from '../types';
 
 export default (context: PluginContext) =>
@@ -18,22 +18,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 Kanban.makeView({
+          client,
+          space,
+          name,
+          typename,
+          pivotFieldName: 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(typenameFromQuery(view.query)!);
         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,34 +6,37 @@ 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 { Kanban } from '@dxos/react-ui-kanban/types';
+import { DataType } from '@dxos/schema';
 
 import { KanbanContainer, KanbanViewEditor } from '../components';
-import { KANBAN_PLUGIN } from '../meta';
-import { isKanban, PivotColumnAnnotationId } from '../types';
+import { meta } from '../meta';
+import { PivotColumnAnnotationId } from '../types';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [
     createSurface({
-      id: `${KANBAN_PLUGIN}/kanban`,
+      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(Kanban.Kanban, data.subject.presentation.target),
+      component: ({ data, role }) => <KanbanContainer view={data.subject} role={role} />,
     }),
     createSurface({
-      id: `${KANBAN_PLUGIN}/object-settings`,
+      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(Kanban.Kanban, data.subject.presentation.target),
+      component: ({ data }) => <KanbanViewEditor view={data.subject} />,
     }),
     createSurface({
-      id: `${KANBAN_PLUGIN}/create-initial-schema-form-[pivot-column]`,
+      id: `${meta.id}/create-initial-schema-form-[pivot-column]`,
       role: 'form-input',
       filter: (
         data,

package/src/components/KanbanContainer.stories.tsx

@@ -3,12 +3,13 @@
 //
 
 import '@dxos-theme';
-import { type StoryObj, type Meta } from '@storybook/react';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Type } from '@dxos/echo';
+import { Obj, Query, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
@@ -18,16 +19,16 @@ 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 as KanbanComponent, useKanbanModel } from '@dxos/react-ui-kanban';
+import { Kanban } from '@dxos/react-ui-kanban/types';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { DataType, ViewProjection } from '@dxos/schema';
+import { DataType, ProjectionModel, typenameFromQuery } from '@dxos/schema';
 import { withLayout } from '@dxos/storybook-utils';
 
-import { initializeKanban } from '../testing';
-import translations from '../translations';
+import { translations } from '../translations';
 
 faker.seed(0);
 
@@ -40,39 +41,40 @@ 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 typename = view?.query ? typenameFromQuery(view.query) : undefined;
+  const schema = useSchema(client, space, 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,
@@ -96,39 +98,37 @@ const StorybookKanban = () => {
 
   const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
 
-  const handleTypenameChanged = useCallback(
+  const handleUpdateQuery = useCallback(
     (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 = Query.select(Filter.typename(typename)).ast;
     },
-    [kanban?.cardView?.target, schema],
+    [view, schema],
   );
 
-  if (!schema || !kanban) {
+  if (!schema || !view) {
     return null;
   }
 
   return (
     <div className='grow grid grid-cols-[1fr_350px]'>
-      {model ? <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
+      {model ? <KanbanComponent 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);
-            }}
-          />
-        )}
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ cardView: kanban.cardView?.target, cardSchema: schema }, null, 2)}
+        <ViewEditor
+          registry={space?.db.schemaRegistry}
+          schema={schema}
+          view={view}
+          onQueryChanged={handleUpdateQuery}
+          onDelete={(fieldId: string) => {
+            console.log('[ViewEditor]', 'onDelete', fieldId);
+          }}
+        />
+        <SyntaxHighlighter language='json' className='text-xs'>
+          {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -143,7 +143,7 @@ type StoryProps = {
 // Story definitions.
 //
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'plugins/plugin-kanban/Kanban',
   component: StorybookKanban,
   render: () => <StorybookKanban />,
@@ -154,25 +154,23 @@ const meta: Meta<StoryProps> = {
       plugins: [
         ThemePlugin({ tx: defaultTx }),
         ClientPlugin({
-          types: [DataType.Organization, DataType.Person, KanbanType],
-          onClientInitialized: async (_, client) => {
+          types: [DataType.Organization, DataType.Person, DataType.View, Kanban.Kanban],
+          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 Kanban.makeView({
               client,
+              space,
               typename: DataType.Organization.typename,
-              initialPivotColumn: 'status',
+              pivotFieldName: 'status',
+            });
+            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()));
             });
-            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()));
-              });
-            }
           },
         }),
         StorybookLayoutPlugin(),
@@ -183,10 +181,10 @@ const meta: Meta<StoryProps> = {
       ],
     }),
   ],
-};
+} satisfies Meta<typeof StorybookKanban>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};