@dxos/plugin-kanban 0.8.4-main.2e9d522 → 0.8.4-main.548089c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.2e9d522",
+  "version": "0.8.4-main.548089c",
   "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"
@@ -34,50 +36,51 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
-    "effect": "3.17.0",
-    "@dxos/ai": "0.8.4-main.2e9d522",
-    "@dxos/assistant": "0.8.4-main.2e9d522",
-    "@dxos/async": "0.8.4-main.2e9d522",
-    "@dxos/blueprints": "0.8.4-main.2e9d522",
-    "@dxos/echo": "0.8.4-main.2e9d522",
-    "@dxos/echo-schema": "0.8.4-main.2e9d522",
-    "@dxos/app-framework": "0.8.4-main.2e9d522",
-    "@dxos/effect": "0.8.4-main.2e9d522",
-    "@dxos/log": "0.8.4-main.2e9d522",
-    "@dxos/plugin-client": "0.8.4-main.2e9d522",
-    "@dxos/plugin-graph": "0.8.4-main.2e9d522",
-    "@dxos/plugin-search": "0.8.4-main.2e9d522",
-    "@dxos/plugin-space": "0.8.4-main.2e9d522",
-    "@dxos/random": "0.8.4-main.2e9d522",
-    "@dxos/invariant": "0.8.4-main.2e9d522",
-    "@dxos/react-client": "0.8.4-main.2e9d522",
-    "@dxos/react-ui": "0.8.4-main.2e9d522",
-    "@dxos/react-ui-form": "0.8.4-main.2e9d522",
-    "@dxos/react-ui-kanban": "0.8.4-main.2e9d522",
-    "@dxos/schema": "0.8.4-main.2e9d522",
-    "@dxos/react-ui-stack": "0.8.4-main.2e9d522",
-    "@dxos/util": "0.8.4-main.2e9d522"
+    "@preact/signals-core": "^1.12.1",
+    "effect": "3.18.3",
+    "@dxos/ai": "0.8.4-main.548089c",
+    "@dxos/app-framework": "0.8.4-main.548089c",
+    "@dxos/async": "0.8.4-main.548089c",
+    "@dxos/blueprints": "0.8.4-main.548089c",
+    "@dxos/echo": "0.8.4-main.548089c",
+    "@dxos/assistant": "0.8.4-main.548089c",
+    "@dxos/effect": "0.8.4-main.548089c",
+    "@dxos/functions": "0.8.4-main.548089c",
+    "@dxos/log": "0.8.4-main.548089c",
+    "@dxos/plugin-client": "0.8.4-main.548089c",
+    "@dxos/plugin-graph": "0.8.4-main.548089c",
+    "@dxos/invariant": "0.8.4-main.548089c",
+    "@dxos/plugin-search": "0.8.4-main.548089c",
+    "@dxos/plugin-space": "0.8.4-main.548089c",
+    "@dxos/random": "0.8.4-main.548089c",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-form": "0.8.4-main.548089c",
+    "@dxos/react-ui-stack": "0.8.4-main.548089c",
+    "@dxos/react-client": "0.8.4-main.548089c",
+    "@dxos/schema": "0.8.4-main.548089c",
+    "@dxos/types": "0.8.4-main.548089c",
+    "@dxos/react-ui-kanban": "0.8.4-main.548089c",
+    "@dxos/util": "0.8.4-main.548089c"
   },
   "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.4-main.2e9d522",
-    "@dxos/plugin-theme": "0.8.4-main.2e9d522",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2e9d522",
-    "@dxos/storybook-utils": "0.8.4-main.2e9d522",
-    "@dxos/test-utils": "0.8.4-main.2e9d522",
-    "@dxos/react-ui-theme": "0.8.4-main.2e9d522"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/plugin-preview": "0.8.4-main.548089c",
+    "@dxos/plugin-theme": "0.8.4-main.548089c",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c",
+    "@dxos/storybook-utils": "0.8.4-main.548089c",
+    "@dxos/test-utils": "0.8.4-main.548089c"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.2e9d522",
-    "@dxos/react-ui-theme": "0.8.4-main.2e9d522"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.548089c",
+    "@dxos/react-ui-theme": "0.8.4-main.548089c"
   },
   "publishConfig": {
     "access": "public"

package/src/KanbanPlugin.tsx

@@ -2,62 +2,63 @@
 // 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 { KanbanView, 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 { CreateKanbanSchema, KanbanAction } from './types';
 
-export const KanbanPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, [...translations, ...kanbanTranslations]),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () =>
-        contributes(Capabilities.Metadata, {
-          id: KanbanView.typename,
-          metadata: {
-            icon: 'ph--kanban--regular',
-          },
+export const KanbanPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, [...translations, ...kanbanTranslations]),
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () =>
+      contributes(Capabilities.Metadata, {
+        id: Kanban.Kanban.typename,
+        metadata: {
+          icon: 'ph--kanban--regular',
+          iconHue: 'green',
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/object-form`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () =>
+      contributes(
+        SpaceCapabilities.ObjectForm,
+        defineObjectForm({
+          objectSchema: Kanban.Kanban,
+          formSchema: CreateKanbanSchema,
+          hidden: true,
+          getIntent: (props, options) => createIntent(KanbanAction.Create, { ...props, space: options.space }),
         }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/object-form`,
-      activatesOn: ClientEvents.SetupSchema,
-      activate: () =>
-        contributes(
-          SpaceCapabilities.ObjectForm,
-          defineObjectForm({
-            objectSchema: KanbanView,
-            formSchema: CreateKanbanSchema,
-            hidden: true,
-            getIntent: (props, options) => createIntent(KanbanAction.Create, { ...props, space: options.space }),
-          }),
-        ),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/artifact-definition`,
-      activatesOn: Events.SetupArtifactDefinition,
-      activate: ArtifactDefinition,
-    }),
-  ]);
+      ),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/blueprint`,
+    activatesOn: Events.SetupArtifactDefinition,
+    activate: BlueprintDefinition,
+  }),
+]);

package/src/capabilities/artifact-definition.ts

@@ -2,18 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema, pipe } from 'effect';
+// ISSUE(burdon): defineArtifact
+// @ts-nocheck
 
-import { createTool, ToolResult } from '@dxos/ai';
-import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
+
+import { ToolResult, createTool } from '@dxos/ai';
+import { Capabilities, type PromiseIntentDispatcher, chain, contributes, createIntent } from '@dxos/app-framework';
 import { createArtifactElement } from '@dxos/assistant';
 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 { Filter, type Space } from '@dxos/react-client/echo';
 import { KanbanView } from '@dxos/react-ui-kanban';
-import { DataType } from '@dxos/schema';
+import { View } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
 import { meta } from '../meta';
@@ -49,7 +53,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.',
@@ -65,7 +69,7 @@ export default () => {
             return ToolResult.Error(`Schema not found: ${typename}`);
           }
 
-          const intent = pipe(
+          const intent = Function.pipe(
             createIntent(KanbanAction.Create, {
               space: extensions.space,
               typename,
@@ -90,7 +94,7 @@ export default () => {
         execute: async (_input, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects } = await space.db.query(Filter.type(DataType.View)).run();
+          const { objects } = await space.db.query(Filter.type(View.View)).run();
 
           const boardInfo = await Promise.all(
             objects.map(async (view) => {
@@ -100,7 +104,7 @@ export default () => {
               }
 
               return {
-                id: fullyQualifiedId(view),
+                id: Obj.getDXN(view).toString(),
                 name: view.name ?? 'Unnamed Kanban',
                 typename: view.query.typename,
               };
@@ -120,8 +124,8 @@ export default () => {
           const space = extensions.space;
           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;
+            .query(Query.select(Filter.and(Filter.type(View.View), Filter.ids(id))))
+            .first()) as View.View;
 
           const kanban = await view.presentation.load();
           invariant(Obj.instanceOf(KanbanView, kanban));

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,15 @@
 // 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 { ProjectionModel } from '@dxos/schema';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
 
-import { KANBAN_PLUGIN } from '../meta';
-import { createKanban, KanbanAction } from '../types';
+import { meta } from '../meta';
+import { KanbanAction } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
@@ -17,12 +18,12 @@ export default (context: PluginContext) =>
       intent: KanbanAction.Create,
       resolve: async ({ space, name, typename, initialPivotColumn }) => {
         const client = context.getCapability(ClientCapabilities.Client);
-        const { view } = await createKanban({
+        const { view } = await Kanban.makeView({
           client,
           space,
           name,
           typename,
-          initialPivotColumn,
+          pivotFieldName: initialPivotColumn,
         });
         return { data: { object: view } };
       },
@@ -30,7 +31,7 @@ export default (context: PluginContext) =>
     createResolver({
       intent: KanbanAction.DeleteCardField,
       resolve: async ({ view, fieldId, deletionData }, undo) => {
-        const schema = getSpace(view)?.db.schemaRegistry.getSchema(view.query.typename!);
+        const schema = getSpace(view)?.db.schemaRegistry.getSchema(getTypenameFromQuery(view.query.ast)!);
         invariant(schema);
         const projection = new ProjectionModel(schema.jsonSchema, view.projection);
 
@@ -38,7 +39,7 @@ export default (context: PluginContext) =>
           const { deleted, index } = projection.deleteFieldProjection(fieldId);
           return {
             undoable: {
-              message: ['card field deleted label', { ns: KANBAN_PLUGIN }],
+              message: ['card field deleted label', { ns: meta.id }],
               data: { deletionData: { ...deleted, index } },
             },
           };
@@ -58,7 +59,7 @@ export default (context: PluginContext) =>
           space.db.remove(card);
           return {
             undoable: {
-              message: ['card deleted label', { ns: KANBAN_PLUGIN }],
+              message: ['card deleted label', { ns: meta.id }],
               data: { card },
             },
           };

package/src/capabilities/react-surface.tsx

@@ -2,17 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import React, { useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface, useCapabilities } from '@dxos/app-framework';
+import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
+import { useCapabilities } from '@dxos/app-framework/react';
 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 { KanbanView } from '@dxos/react-ui-kanban';
-import { DataType } from '@dxos/schema';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { type Collection, View } from '@dxos/schema';
 
 import { KanbanContainer, KanbanViewEditor } from '../components';
 import { meta } from '../meta';
@@ -23,16 +24,16 @@ export default () =>
     createSurface({
       id: meta.id,
       role: ['article', 'section'],
-      filter: (data): data is { subject: DataType.View } =>
-        Obj.instanceOf(DataType.View, data.subject) && Obj.instanceOf(KanbanView, data.subject.presentation.target),
+      filter: (data): data is { subject: View.View } =>
+        Obj.instanceOf(View.View, data.subject) && Obj.instanceOf(Kanban.Kanban, data.subject.presentation.target),
       component: ({ data, role }) => <KanbanContainer view={data.subject} role={role} />,
     }),
     createSurface({
       id: `${meta.id}/object-settings`,
       role: 'object-settings',
       position: 'hoist',
-      filter: (data): data is { subject: DataType.View } =>
-        Obj.instanceOf(DataType.View, data.subject) && Obj.instanceOf(KanbanView, data.subject.presentation.target),
+      filter: (data): data is { subject: View.View } =>
+        Obj.instanceOf(View.View, data.subject) && Obj.instanceOf(Kanban.Kanban, data.subject.presentation.target),
       component: ({ data }) => <KanbanViewEditor view={data.subject} />,
     }),
     createSurface({
@@ -40,7 +41,11 @@ export default () =>
       role: 'form-input',
       filter: (
         data,
-      ): data is { prop: string; schema: Schema.Schema<any>; target: Space | DataType.Collection | undefined } => {
+      ): data is {
+        prop: string;
+        schema: Schema.Schema<any>;
+        target: Space | Collection.Collection | undefined;
+      } => {
         const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, PivotColumnAnnotationId);
         return !!annotation;
       },

package/src/components/KanbanContainer.stories.tsx

@@ -2,14 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-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';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Type } from '@dxos/echo';
+import { Obj, type QueryAST, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { PreviewPlugin } from '@dxos/plugin-preview';
@@ -19,16 +17,17 @@ 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 { withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
-import { Kanban, KanbanView, 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, ProjectionModel } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+import { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
 
 import { translations } from '../translations';
-import { createKanban } from '../types';
 
 faker.seed(0);
 
@@ -41,17 +40,18 @@ const rollOrg = () => ({
   description: faker.lorem.paragraph(),
   image: faker.image.url(),
   website: faker.internet.url(),
-  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id as DataType.Organization['status'],
+  status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
 });
 
 const StorybookKanban = () => {
   const client = useClient();
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
-  const views = useQuery(space, Filter.type(DataType.View));
-  const [view, setView] = useState<DataType.View>();
+  const views = useQuery(space, Filter.type(View.View));
+  const [view, setView] = useState<View.View>();
   const [projection, setProjection] = useState<ProjectionModel>();
-  const schema = useSchema(client, space, view?.query.typename);
+  const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(client, space, typename);
 
   useEffect(() => {
     if (views.length && !view) {
@@ -97,14 +97,14 @@ const StorybookKanban = () => {
 
   const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
 
-  const handleTypenameChanged = useCallback(
-    (typename: string) => {
+  const handleUpdateQuery = useCallback(
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
       invariant(view);
 
-      schema.updateTypename(typename);
-      view.query.typename = typename;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
+      view.query.ast = newQuery;
     },
     [view, schema],
   );
@@ -115,18 +115,18 @@ const StorybookKanban = () => {
 
   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'>
         <ViewEditor
           registry={space?.db.schemaRegistry}
           schema={schema}
           view={view}
-          onTypenameChanged={handleTypenameChanged}
+          onQueryChanged={handleUpdateQuery}
           onDelete={(fieldId: string) => {
             console.log('[ViewEditor]', 'onDelete', fieldId);
           }}
         />
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
+        <SyntaxHighlighter language='json' className='text-xs'>
           {JSON.stringify({ view, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
@@ -142,48 +142,53 @@ type StoryProps = {
 // Story definitions.
 //
 
-const meta: Meta<StoryProps> = {
+const meta = {
   title: 'plugins/plugin-kanban/Kanban',
   component: StorybookKanban,
   render: () => <StorybookKanban />,
-  parameters: { translations },
   decorators: [
-    withLayout({ fullscreen: true }),
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
         ClientPlugin({
-          types: [DataType.Organization, DataType.Person, DataType.View, KanbanView],
-          onClientInitialized: async (_, client) => {
+          types: [Organization.Organization, Person.Person, View.View, Kanban.Kanban],
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
             const space = await client.spaces.create();
             await space.waitUntilReady();
-            const { view } = await createKanban({
+            const { view } = await Kanban.makeView({
               client,
               space,
-              typename: DataType.Organization.typename,
-              initialPivotColumn: 'status',
+              typename: Organization.Organization.typename,
+              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()));
+              return space.db.add(Obj.make(Organization.Organization, rollOrg()));
             });
           },
         }),
-        StorybookLayoutPlugin(),
-        PreviewPlugin(),
-        SpacePlugin(),
+        SpacePlugin({}),
         IntentPlugin(),
         SettingsPlugin(),
+
+        // UI
+        ThemePlugin({ tx: defaultTx }),
+        PreviewPlugin(),
+        StorybookLayoutPlugin({}),
       ],
     }),
   ],
-};
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof StorybookKanban>;
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};