@dxos/plugin-kanban 0.8.4-main.5ea62a8 → 0.8.4-main.66e292d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.5ea62a8",
+  "version": "0.8.4-main.66e292d",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -36,51 +36,51 @@
   ],
   "dependencies": {
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
-    "effect": "3.17.7",
-    "@dxos/app-framework": "0.8.4-main.5ea62a8",
-    "@dxos/ai": "0.8.4-main.5ea62a8",
-    "@dxos/assistant": "0.8.4-main.5ea62a8",
-    "@dxos/async": "0.8.4-main.5ea62a8",
-    "@dxos/echo": "0.8.4-main.5ea62a8",
-    "@dxos/echo-schema": "0.8.4-main.5ea62a8",
-    "@dxos/blueprints": "0.8.4-main.5ea62a8",
-    "@dxos/effect": "0.8.4-main.5ea62a8",
-    "@dxos/functions": "0.8.4-main.5ea62a8",
-    "@dxos/invariant": "0.8.4-main.5ea62a8",
-    "@dxos/log": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-graph": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-space": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-search": "0.8.4-main.5ea62a8",
-    "@dxos/random": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-form": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-kanban": "0.8.4-main.5ea62a8",
-    "@dxos/react-client": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-stack": "0.8.4-main.5ea62a8",
-    "@dxos/schema": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-client": "0.8.4-main.5ea62a8",
-    "@dxos/util": "0.8.4-main.5ea62a8"
+    "@preact/signals-core": "^1.12.1",
+    "effect": "3.18.3",
+    "@dxos/app-framework": "0.8.4-main.66e292d",
+    "@dxos/assistant": "0.8.4-main.66e292d",
+    "@dxos/blueprints": "0.8.4-main.66e292d",
+    "@dxos/echo": "0.8.4-main.66e292d",
+    "@dxos/effect": "0.8.4-main.66e292d",
+    "@dxos/invariant": "0.8.4-main.66e292d",
+    "@dxos/functions": "0.8.4-main.66e292d",
+    "@dxos/async": "0.8.4-main.66e292d",
+    "@dxos/ai": "0.8.4-main.66e292d",
+    "@dxos/log": "0.8.4-main.66e292d",
+    "@dxos/plugin-client": "0.8.4-main.66e292d",
+    "@dxos/plugin-search": "0.8.4-main.66e292d",
+    "@dxos/plugin-graph": "0.8.4-main.66e292d",
+    "@dxos/random": "0.8.4-main.66e292d",
+    "@dxos/react-client": "0.8.4-main.66e292d",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-form": "0.8.4-main.66e292d",
+    "@dxos/react-ui-kanban": "0.8.4-main.66e292d",
+    "@dxos/react-ui-stack": "0.8.4-main.66e292d",
+    "@dxos/schema": "0.8.4-main.66e292d",
+    "@dxos/plugin-space": "0.8.4-main.66e292d",
+    "@dxos/types": "0.8.4-main.66e292d",
+    "@dxos/util": "0.8.4-main.66e292d"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/plugin-theme": "0.8.4-main.5ea62a8",
-    "@dxos/plugin-preview": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
-    "@dxos/storybook-utils": "0.8.4-main.5ea62a8",
-    "@dxos/test-utils": "0.8.4-main.5ea62a8"
+    "@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.66e292d",
+    "@dxos/plugin-theme": "0.8.4-main.66e292d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d",
+    "@dxos/storybook-utils": "0.8.4-main.66e292d",
+    "@dxos/test-utils": "0.8.4-main.66e292d"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.5ea62a8",
-    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.66e292d",
+    "@dxos/react-ui-theme": "0.8.4-main.66e292d"
   },
   "publishConfig": {
     "access": "public"

package/src/KanbanPlugin.tsx

@@ -3,9 +3,9 @@
 //
 
 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 { Type } from '@dxos/echo';
+import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
+import { type CreateObjectIntent } from '@dxos/plugin-space/types';
 import { translations as kanbanTranslations } from '@dxos/react-ui-kanban';
 import { Kanban } from '@dxos/react-ui-kanban/types';
 
@@ -14,51 +14,45 @@ 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: Kanban.Kanban.typename,
-          metadata: {
-            icon: 'ph--kanban--regular',
-          },
-        }),
-    }),
-    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/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,
-    }),
-  ]);
+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: Type.getTypename(Kanban.Kanban),
+        metadata: {
+          icon: 'ph--kanban--regular',
+          iconHue: 'green',
+          inputSchema: CreateKanbanSchema,
+          createObjectIntent: ((props, options) =>
+            createIntent(KanbanAction.Create, { ...props, space: options.space })) satisfies CreateObjectIntent,
+        },
+      }),
+  }),
+  defineModule({
+    id: `${meta.id}/module/schema`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () => contributes(ClientCapabilities.Schema, [Kanban.Kanban]),
+  }),
+  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

@@ -5,7 +5,8 @@
 // ISSUE(burdon): defineArtifact
 // @ts-nocheck
 
-import { Schema, pipe } from 'effect';
+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';
@@ -14,9 +15,9 @@ 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, type Space, fullyQualifiedId } 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';
@@ -68,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,
@@ -93,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) => {
@@ -103,7 +104,7 @@ export default () => {
               }
 
               return {
-                id: fullyQualifiedId(view),
+                id: Obj.getDXN(view).toString(),
                 name: view.name ?? 'Unnamed Kanban',
                 typename: view.query.typename,
               };
@@ -123,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/intent-resolver.ts

@@ -7,9 +7,9 @@ import { invariant } from '@dxos/invariant';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { getSpace } from '@dxos/react-client/echo';
 import { Kanban } from '@dxos/react-ui-kanban/types';
-import { ProjectionModel } from '@dxos/schema';
+import { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
 
-import { KANBAN_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { KanbanAction } from '../types';
 
 export default (context: PluginContext) =>
@@ -18,20 +18,15 @@ export default (context: PluginContext) =>
       intent: KanbanAction.Create,
       resolve: async ({ space, name, typename, initialPivotColumn }) => {
         const client = context.getCapability(ClientCapabilities.Client);
-        const { view } = await Kanban.makeView({
-          client,
-          space,
-          name,
-          typename,
-          pivotFieldName: initialPivotColumn,
-        });
-        return { data: { object: view } };
+        const { view } = await View.makeFromSpace({ client, space, typename, pivotFieldName: initialPivotColumn });
+        const kanban = Kanban.make({ name, view });
+        return { data: { object: kanban } };
       },
     }),
     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);
 
@@ -39,7 +34,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 } },
             },
           };
@@ -59,7 +54,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,16 @@
 // 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 { Obj, Type } from '@dxos/echo';
 import { findAnnotation } from '@dxos/effect';
-import { ClientCapabilities } from '@dxos/plugin-client';
 import { type Space, getSpace, isSpace } from '@dxos/react-client/echo';
 import { type InputProps, SelectInput, useFormValues } from '@dxos/react-ui-form';
 import { Kanban } from '@dxos/react-ui-kanban/types';
-import { DataType } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
 import { KanbanContainer, KanbanViewEditor } from '../components';
 import { meta } from '../meta';
@@ -23,24 +22,26 @@ export default () =>
     createSurface({
       id: meta.id,
       role: ['article', 'section'],
-      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} />,
+      filter: (data): data is { subject: Kanban.Kanban } => Obj.instanceOf(Kanban.Kanban, data.subject),
+      component: ({ data, role }) => <KanbanContainer object={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(Kanban.Kanban, data.subject.presentation.target),
-      component: ({ data }) => <KanbanViewEditor view={data.subject} />,
+      filter: (data): data is { subject: Kanban.Kanban } => Obj.instanceOf(Kanban.Kanban, data.subject),
+      component: ({ data }) => <KanbanViewEditor object={data.subject} />,
     }),
     createSurface({
       id: `${meta.id}/create-initial-schema-form-[pivot-column]`,
       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;
       },
@@ -50,16 +51,14 @@ export default () =>
         if (!space) {
           return null;
         }
-        const { typename } = useFormValues();
-        // TODO(wittjosiah): Unify this schema lookup.
-        const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
-        const staticSchema = schemaWhitelists.flat().find((schema) => Type.getTypename(schema) === typename);
-        const [selectedSchema] = space?.db.schemaRegistry.query({ typename }).runSync();
 
+        const { typename } = useFormValues();
+        const [selectedSchema] = useMemo(
+          () => space?.db.schemaRegistry.query({ location: ['database', 'runtime'], typename }).runSync(),
+          [space, typename],
+        );
         const singleSelectColumns = useMemo(() => {
-          const properties = staticSchema
-            ? Type.toJsonSchema(staticSchema).properties
-            : selectedSchema?.jsonSchema?.properties;
+          const properties = Type.toJsonSchema(selectedSchema).properties;
           if (!properties) {
             return [];
           }
@@ -72,7 +71,7 @@ export default () =>
           }, []);
 
           return columns;
-        }, [selectedSchema?.jsonSchema, staticSchema]);
+        }, [selectedSchema]);
 
         if (!typename) {
           return null;

package/src/components/KanbanContainer.stories.tsx

@@ -2,14 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } 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';
@@ -20,13 +18,14 @@ import { ThemePlugin } from '@dxos/plugin-theme';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 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 as KanbanComponent, useKanbanModel } from '@dxos/react-ui-kanban';
+import { Kanban as KanbanComponent, useKanbanModel, useProjectionModel } 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 { View, getTypenameFromQuery } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
 
 import { translations } from '../translations';
 
@@ -41,40 +40,23 @@ 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 [projection, setProjection] = useState<ProjectionModel>();
-  const schema = useSchema(client, space, view?.query.typename);
-
-  useEffect(() => {
-    if (views.length && !view) {
-      const view = views[0];
-      setView(view);
-    }
-  }, [views]);
-
-  useEffect(() => {
-    if (view?.projection && schema) {
-      const jsonSchema = Type.toJsonSchema(schema);
-      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).
-  }, [view?.projection, schema, JSON.stringify(schema ? Type.toJsonSchema(schema) : {})]);
+  const [object] = useQuery(space, Filter.type(Kanban.Kanban));
+  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
+  const schema = useSchema(client, space, typename);
 
   const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(schema, object);
   const model = useKanbanModel({
-    view,
-    schema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -95,21 +77,21 @@ const StorybookKanban = () => {
     [space, schema, model],
   );
 
-  const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
+  const handleRemoveCard = useCallback((card: { id: string }) => Obj.isObject(card) && space?.db.remove(card), [space]);
 
-  const handleTypenameChanged = useCallback(
-    (typename: string) => {
+  const handleUpdateQuery = useCallback(
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      invariant(view);
+      invariant(object.view.target);
 
-      schema.updateTypename(typename);
-      view.query.typename = typename;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
+      object.view.target.query.ast = newQuery;
     },
-    [view, schema],
+    [object, schema],
   );
 
-  if (!schema || !view) {
+  if (!schema || !object.view.target) {
     return null;
   }
 
@@ -120,14 +102,14 @@ const StorybookKanban = () => {
         <ViewEditor
           registry={space?.db.schemaRegistry}
           schema={schema}
-          view={view}
-          onTypenameChanged={handleTypenameChanged}
+          view={object.view.target}
+          onQueryChanged={handleUpdateQuery}
           onDelete={(fieldId: string) => {
             console.log('[ViewEditor]', 'onDelete', fieldId);
           }}
         />
-        <SyntaxHighlighter language='json' className='w-full text-xs'>
-          {JSON.stringify({ view, schema }, null, 2)}
+        <SyntaxHighlighter language='json' className='text-xs'>
+          {JSON.stringify({ view: object.view.target, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -146,40 +128,46 @@ 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, Kanban.Kanban],
+          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 Kanban.makeView({
+            const { view } = await View.makeFromSpace({
               client,
               space,
-              typename: DataType.Organization.typename,
+              typename: Organization.Organization.typename,
               pivotFieldName: 'status',
             });
-            space.db.add(view);
+            const kanban = Kanban.make({ view });
+            space.db.add(kanban);
 
             // 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;