@dxos/plugin-kanban 0.8.1 → 0.8.2-main.10c050d

package/dist/types/src/types.d.ts

@@ -1,5 +1,4 @@
-import { S } from '@dxos/echo-schema';
-import { type Space } from '@dxos/react-client/echo';
+import { Schema } from 'effect';
 import { KanbanType } from '@dxos/react-ui-kanban';
 /**
  * Kanban data model.
@@ -11,67 +10,58 @@ import { KanbanType } from '@dxos/react-ui-kanban';
  */
 export declare const TypenameAnnotationId: unique symbol;
 export declare const PivotColumnAnnotationId: unique symbol;
-export declare const CreateKanbanSchema: S.Struct<{
-    name: S.optional<typeof S.String>;
-    typename: S.optional<S.SchemaClass<string, string, never>>;
-    initialPivotColumn: S.optional<S.SchemaClass<string, string, never>>;
+export declare const CreateKanbanSchema: Schema.Struct<{
+    name: Schema.optional<typeof Schema.String>;
+    typename: Schema.optional<Schema.SchemaClass<string, string, never>>;
+    initialPivotColumn: Schema.optional<Schema.SchemaClass<string, string, never>>;
 }>;
-export type CreateKanbanType = S.Schema.Type<typeof CreateKanbanSchema>;
+export type CreateKanbanType = Schema.Schema.Type<typeof CreateKanbanSchema>;
 export declare namespace KanbanAction {
-    const Create_base: S.TaggedClass<Create, "dxos.org/plugin/kanban/action/create", {
-        readonly _tag: S.tag<"dxos.org/plugin/kanban/action/create">;
+    const Create_base: Schema.TaggedClass<Create, "dxos.org/plugin/kanban/action/create", {
+        readonly _tag: Schema.tag<"dxos.org/plugin/kanban/action/create">;
     } & {
-        input: S.extend<S.Struct<{
-            space: S.Schema<Space, Space, never>;
-        }>, S.Struct<{
-            name: S.optional<typeof S.String>;
-            typename: S.optional<S.SchemaClass<string, string, never>>;
-            initialPivotColumn: S.optional<S.SchemaClass<string, string, never>>;
+        input: Schema.extend<Schema.Struct<{
+            space: Schema.Schema<import("@dxos/client-protocol").Space, import("@dxos/client-protocol").Space, never>;
+        }>, Schema.Struct<{
+            name: Schema.optional<typeof Schema.String>;
+            typename: Schema.optional<Schema.SchemaClass<string, string, never>>;
+            initialPivotColumn: Schema.optional<Schema.SchemaClass<string, string, never>>;
         }>>;
-        output: S.Struct<{
+        output: Schema.Struct<{
             object: typeof KanbanType;
         }>;
     }>;
     export class Create extends Create_base {
     }
-    const DeleteCardField_base: S.TaggedClass<DeleteCardField, "dxos.org/plugin/kanban/action/delete-card-field", {
-        readonly _tag: S.tag<"dxos.org/plugin/kanban/action/delete-card-field">;
+    const DeleteCardField_base: Schema.TaggedClass<DeleteCardField, "dxos.org/plugin/kanban/action/delete-card-field", {
+        readonly _tag: Schema.tag<"dxos.org/plugin/kanban/action/delete-card-field">;
     } & {
-        input: S.Struct<{
+        input: Schema.Struct<{
             kanban: typeof KanbanType;
-            fieldId: typeof S.String;
-            deletionData: S.optional<S.Struct<{
-                field: S.mutable<S.Struct<{
-                    id: typeof S.String;
-                    path: S.Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>;
-                    visible: S.optional<typeof S.Boolean>;
-                    size: S.optional<typeof S.
-                    /**
-                     * Kanban data model.
-                     * A Kanban board is a collection of columns, each of which contains a collection of items.
-                     * The layout of columns and items is controlled by models.
-                     * The underlying data model may be represented by direct object relationships
-                     * (e.g., a column object containing an array of ordered items) or projections constructed
-                     * by the model (e.g., a query of items based on metadata within a column object).
-                     */
-                    Number>;
-                    referencePath: S.optional<S.Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>>;
+            fieldId: typeof Schema.String;
+            deletionData: Schema.optional<Schema.Struct<{
+                field: Schema.mutable<Schema.Struct<{
+                    id: typeof Schema.String;
+                    path: Schema.Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>;
+                    visible: Schema.optional<typeof Schema.Boolean>;
+                    size: Schema.optional<typeof Schema.Number>;
+                    referencePath: Schema.optional<Schema.Schema<import("@dxos/effect").JsonPath, import("@dxos/effect").JsonPath, never>>;
                 }>>;
-                props: typeof S.Any;
-                index: typeof S.Number;
+                props: typeof Schema.Any;
+                index: typeof Schema.Number;
             }>>;
         }>;
-        output: typeof S.Void;
+        output: typeof Schema.Void;
     }>;
     export class DeleteCardField extends DeleteCardField_base {
     }
-    const DeleteCard_base: S.TaggedClass<DeleteCard, "dxos.org/plugin/kanban/action/delete-card", {
-        readonly _tag: S.tag<"dxos.org/plugin/kanban/action/delete-card">;
+    const DeleteCard_base: Schema.TaggedClass<DeleteCard, "dxos.org/plugin/kanban/action/delete-card", {
+        readonly _tag: Schema.tag<"dxos.org/plugin/kanban/action/delete-card">;
     } & {
-        input: S.Struct<{
-            card: typeof S.Any;
+        input: Schema.Struct<{
+            card: typeof Schema.Any;
         }>;
-        output: typeof S.Void;
+        output: typeof Schema.Void;
     }>;
     export class DeleteCard extends DeleteCard_base {
     }
@@ -84,10 +74,4 @@ export type Location = {
     idx?: number;
 };
 export declare const isKanban: (object: unknown) => object is KanbanType;
-export declare const createKanban: ({ space, name, typename, initialPivotColumn, }: {
-    space: Space;
-    name?: string;
-    typename?: string;
-    initialPivotColumn?: string;
-}) => Promise<KanbanType>;
 //# sourceMappingURL=types.d.ts.map

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AACtC,OAAO,EAAE,KAAK,KAAK,EAAe,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAMnD;;;;;;;GAOG;AAGH,eAAO,MAAM,oBAAoB,eAAwD,CAAC;AAC1F,eAAO,MAAM,uBAAuB,eAA2D,CAAC;AAEhG,eAAO,MAAM,kBAAkB;;;;EAc7B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAExE,yBAAiB,YAAY,CAAC;;;;;;;;;;;;;;;IAG5B,MAAM,OAAO,MAAO,SAAQ,WAK1B;KAAG;;;;;;;;;+BA5CY,EAAG,MAAM;0BAAW,EAAG,MAAM;6BACzB,EAAG,QAAQ,QAAO,EAEzC,OAAM;0BAAY,EAAG,QAAQ,QAAO;oBAEpC;;;;;;;uBAOG;oBAGH,MATA;mCACC,EAAE,QAAO,CAAE,EAAC,MAAM;;;;;;;;IAuCjB,MAAM,OAAO,eAAgB,SAAQ,oBAgBnC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,UAAW,SAAQ,eAK9B;KAAG;;CACN;AAUD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,WAAY,OAAO,KAAG,MAAM,IAAI,UAA4D,CAAC;AAElH,eAAO,MAAM,YAAY,mDAKtB;IACD,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,wBAGA,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAGhC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAKnD;;;;;;;GAOG;AAGH,eAAO,MAAM,oBAAoB,eAAwD,CAAC;AAC1F,eAAO,MAAM,uBAAuB,eAA2D,CAAC;AAEhG,eAAO,MAAM,kBAAkB;;;;EAc7B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE7E,yBAAiB,YAAY,CAAC;;;;;;;;;;;;;;;IAG5B,MAAM,OAAO,MAAO,SAAQ,WAK1B;KAAG;;;;;;;;;;;;;;;;;;;;;IAEL,MAAM,OAAO,eAAgB,SAAQ,oBAgBnC;KAAG;;;;;;;;;IAEL,MAAM,OAAO,UAAW,SAAQ,eAK9B;KAAG;;CACN;AAUD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,QAAQ,OAAO,KAAG,MAAM,IAAI,UAA4D,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.1",
+  "version": "0.8.2-main.10c050d",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,25 +33,29 @@
     "src"
   ],
   "dependencies": {
-    "@preact/signals-core": "^1.6.0",
-    "@dxos/app-framework": "0.8.1",
-    "@dxos/artifact": "0.8.1",
-    "@dxos/assistant": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/effect": "0.8.1",
-    "@dxos/async": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/invariant": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/plugin-space": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui-form": "0.8.1",
-    "@dxos/react-ui-kanban": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/plugin-search": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/schema": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
+    "effect": "3.14.21",
+    "@dxos/ai": "0.8.2-main.10c050d",
+    "@dxos/app-framework": "0.8.2-main.10c050d",
+    "@dxos/assistant": "0.8.2-main.10c050d",
+    "@dxos/async": "0.8.2-main.10c050d",
+    "@dxos/artifact": "0.8.2-main.10c050d",
+    "@dxos/echo": "0.8.2-main.10c050d",
+    "@dxos/echo-schema": "0.8.2-main.10c050d",
+    "@dxos/effect": "0.8.2-main.10c050d",
+    "@dxos/invariant": "0.8.2-main.10c050d",
+    "@dxos/plugin-client": "0.8.2-main.10c050d",
+    "@dxos/plugin-search": "0.8.2-main.10c050d",
+    "@dxos/plugin-graph": "0.8.2-main.10c050d",
+    "@dxos/plugin-space": "0.8.2-main.10c050d",
+    "@dxos/random": "0.8.2-main.10c050d",
+    "@dxos/react-client": "0.8.2-main.10c050d",
+    "@dxos/react-ui-form": "0.8.2-main.10c050d",
+    "@dxos/react-ui-stack": "0.8.2-main.10c050d",
+    "@dxos/react-ui-kanban": "0.8.2-main.10c050d",
+    "@dxos/schema": "0.8.2-main.10c050d",
+    "@dxos/util": "0.8.2-main.10c050d"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
@@ -59,16 +63,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/plugin-theme": "0.8.2-main.10c050d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/plugin-preview": "0.8.2-main.10c050d",
+    "@dxos/storybook-utils": "0.8.2-main.10c050d"
   },
   "peerDependencies": {
-    "effect": "3.13.3",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/artifact-definition.ts

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, pipe } from 'effect';
 
+import { createTool, ToolResult } from '@dxos/ai';
 import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
+import { defineArtifact } from '@dxos/artifact';
 import { createArtifactElement } from '@dxos/assistant';
-import { isInstanceOf, S } from '@dxos/echo-schema';
+import { isInstanceOf } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { Filter, fullyQualifiedId, type Space } from '@dxos/react-client/echo';
@@ -16,7 +17,7 @@ import { KanbanType } from '@dxos/react-ui-kanban';
 import { meta } from '../meta';
 import { KanbanAction } from '../types';
 
-const QualifiedId = S.String.annotations({
+const QualifiedId = Schema.String.annotations({
   description: 'The fully qualified ID of the kanban `spaceID:objectID`',
 });
 
@@ -38,17 +39,17 @@ export default () => {
     `,
     schema: KanbanType,
     tools: [
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'create',
         description: `
             Create a new kanban board using an existing schema.
             Use schema_create first to create a schema, or schema_list to choose an existing one.`,
         caption: 'Creating kanban board...',
-        schema: S.Struct({
-          typename: S.String.annotations({
+        schema: Schema.Struct({
+          typename: Schema.String.annotations({
             description: 'The fully qualified typename of the schema to use for the kanban cards.',
           }),
-          pivotColumn: S.optional(S.String).annotations({
+          pivotColumn: Schema.optional(Schema.String).annotations({
             description: 'Optional field name to use as the column pivot.',
           }),
         }),
@@ -79,15 +80,15 @@ export default () => {
           return ToolResult.Success(createArtifactElement(data.id));
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'list',
         description: 'List all kanban boards in the current space.',
         caption: 'Listing kanban boards...',
-        schema: S.Struct({}),
+        schema: Schema.Struct({}),
         execute: async (_input, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects: boards } = await space.db.query(Filter.schema(KanbanType)).run();
+          const { objects: boards } = await space.db.query(Filter.type(KanbanType)).run();
 
           const boardInfo = await Promise.all(
             boards.map(async (board: KanbanType) => {
@@ -102,15 +103,15 @@ export default () => {
           return ToolResult.Success(boardInfo);
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'inspect',
         description: 'Get details about a specific kanban board.',
         caption: 'Inspecting kanban board...',
-        schema: S.Struct({ id: QualifiedId }),
+        schema: Schema.Struct({ id: QualifiedId }),
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           const space = extensions.space;
-          const { objects: boards } = await space.db.query(Filter.schema(KanbanType)).run();
+          const { objects: boards } = await space.db.query(Filter.type(KanbanType)).run();
           const board = boards.find((board: KanbanType) => fullyQualifiedId(board) === id);
           invariant(isInstanceOf(KanbanType, board));
 

package/src/capabilities/intent-resolver.ts

@@ -2,21 +2,25 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
+import { contributes, Capabilities, createResolver, type PluginContext } 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_PLUGIN } from '../meta';
-import { createKanban, KanbanAction } from '../types';
+import { initializeKanban } from '../testing';
+import { KanbanAction } from '../types';
 
-export default () =>
+export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: KanbanAction.Create,
-      resolve: async ({ space, name, typename, initialPivotColumn }) => ({
-        data: { object: await createKanban({ space, name, typename, initialPivotColumn }) },
-      }),
+      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 } };
+      },
     }),
     createResolver({
       intent: KanbanAction.DeleteCardField,

package/src/capabilities/react-surface.tsx

@@ -2,12 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type Schema } from 'effect';
 import React, { useMemo } from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { type S } from '@dxos/echo-schema';
+import { Capabilities, contributes, createSurface, useCapabilities } from '@dxos/app-framework';
+import { getTypenameOrThrow, toJsonSchema } from '@dxos/echo-schema';
 import { findAnnotation } from '@dxos/effect';
+import { ClientCapabilities } from '@dxos/plugin-client';
 import { type CollectionType } from '@dxos/plugin-space/types';
+import { useClient } from '@dxos/react-client';
 import { getSpace, isSpace, type Space } from '@dxos/react-client/echo';
 import { type InputProps, SelectInput, useFormValues } from '@dxos/react-ui-form';
 import { type KanbanType } from '@dxos/react-ui-kanban';
@@ -31,28 +34,53 @@ export default () =>
       component: ({ data }) => <KanbanViewEditor kanban={data.subject} />,
     }),
     createSurface({
-      id: `${KANBAN_PLUGIN}/create-initial-schema-form-[schema]`,
+      id: `${KANBAN_PLUGIN}/create-initial-schema-form`,
       role: 'form-input',
-      filter: (data): data is { prop: string; schema: S.Schema<any>; target: Space | CollectionType | undefined } => {
-        const annotation = findAnnotation<boolean>((data.schema as S.Schema.All).ast, TypenameAnnotationId);
+      filter: (
+        data,
+      ): data is { prop: string; schema: Schema.Schema<any>; target: Space | CollectionType | undefined } => {
+        if (data.prop !== 'typename') {
+          return false;
+        }
+
+        const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, TypenameAnnotationId);
         return !!annotation;
       },
       component: ({ data: { target }, ...inputProps }) => {
+        const client = useClient();
         const props = inputProps as any as InputProps;
         const space = isSpace(target) ? target : getSpace(target);
         if (!space) {
           return null;
         }
 
-        const schemata = space?.db.schemaRegistry.query().runSync();
-        return <SelectInput {...props} options={schemata.map((schema) => ({ value: schema.typename }))} />;
+        const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
+        const whitelistedTypenames = useMemo(
+          () => new Set(schemaWhitelists.flatMap((typeArray) => typeArray.map((type) => type.typename))),
+          [schemaWhitelists],
+        );
+
+        const fixed = client.graph.schemaRegistry.schemas.filter((schema) =>
+          whitelistedTypenames.has(getTypenameOrThrow(schema)),
+        );
+        const dynamic = space?.db.schemaRegistry.query().runSync();
+        const typenames = Array.from(
+          new Set<string>([
+            ...fixed.map((schema) => getTypenameOrThrow(schema)),
+            ...dynamic.map((schema) => schema.typename),
+          ]),
+        ).sort();
+
+        return <SelectInput {...props} options={typenames.map((typename) => ({ value: typename }))} />;
       },
     }),
     createSurface({
       id: `${KANBAN_PLUGIN}/create-initial-schema-form-[pivot-column]`,
       role: 'form-input',
-      filter: (data): data is { prop: string; schema: S.Schema<any>; target: Space | CollectionType | undefined } => {
-        const annotation = findAnnotation<boolean>((data.schema as S.Schema.All).ast, PivotColumnAnnotationId);
+      filter: (
+        data,
+      ): data is { prop: string; schema: Schema.Schema<any>; target: Space | CollectionType | undefined } => {
+        const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, PivotColumnAnnotationId);
         return !!annotation;
       },
       component: ({ data: { target }, ...inputProps }) => {
@@ -62,14 +90,20 @@ export default () =>
           return null;
         }
         const { typename } = useFormValues();
+        // TODO(wittjosiah): Unify this schema lookup.
+        const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
+        const staticSchema = schemaWhitelists.flat().find((schema) => getTypenameOrThrow(schema) === typename);
         const [selectedSchema] = space?.db.schemaRegistry.query({ typename }).runSync();
 
         const singleSelectColumns = useMemo(() => {
-          if (!selectedSchema?.jsonSchema?.properties) {
+          const properties = staticSchema
+            ? toJsonSchema(staticSchema).properties
+            : selectedSchema?.jsonSchema?.properties;
+          if (!properties) {
             return [];
           }
 
-          const columns = Object.entries(selectedSchema.jsonSchema.properties).reduce<string[]>((acc, [key, value]) => {
+          const columns = Object.entries(properties).reduce<string[]>((acc, [key, value]) => {
             if (typeof value === 'object' && value?.format === 'single-select') {
               acc.push(key);
             }
@@ -77,7 +111,7 @@ export default () =>
           }, []);
 
           return columns;
-        }, [selectedSchema?.jsonSchema]);
+        }, [selectedSchema?.jsonSchema, staticSchema]);
 
         if (!typename) {
           return null;

package/src/components/KanbanContainer.stories.tsx

@@ -0,0 +1,191 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxos-theme';
+import { type StoryObj, type Meta } from '@storybook/react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Type } from '@dxos/echo';
+import { assertEchoSchema } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { ClientPlugin } from '@dxos/plugin-client';
+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, live } from '@dxos/react-client/echo';
+import { ViewEditor } from '@dxos/react-ui-form';
+import { Kanban, KanbanType, useKanbanModel } from '@dxos/react-ui-kanban';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { defaultTx } from '@dxos/react-ui-theme';
+import { DataType, ViewProjection } from '@dxos/schema';
+import { withLayout } from '@dxos/storybook-utils';
+
+import { initializeKanban } from '../testing';
+import translations from '../translations';
+
+faker.seed(0);
+
+//
+// Story components.
+//
+
+const rollOrg = () => ({
+  name: faker.commerce.productName(),
+  description: faker.lorem.paragraph(),
+  image: faker.image.url(),
+  website: faker.internet.url(),
+  status: faker.helpers.arrayElement(DataType.OrganizationStatusOptions).id,
+});
+
+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);
+
+  useEffect(() => {
+    if (kanbans.length && !kanban) {
+      const kanban = kanbans[0];
+      setKanban(kanban);
+    }
+  }, [kanbans]);
+
+  useEffect(() => {
+    if (kanban?.cardView?.target && schema) {
+      const jsonSchema = Type.toJsonSchema(schema);
+      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
+    }
+    // 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) : {})]);
+
+  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const filteredObjects = useGlobalFilteredObjects(objects);
+
+  const model = useKanbanModel({
+    kanban,
+    schema,
+    projection,
+    items: filteredObjects,
+  });
+
+  const handleAddCard = useCallback(
+    (columnValue: string | undefined) => {
+      const path = model?.columnFieldPath;
+      if (space && schema && path) {
+        const card = live(schema, {
+          ...rollOrg(),
+          [path]: columnValue,
+        });
+
+        space.db.add(card);
+        return card.id;
+      }
+    },
+    [space, schema, model],
+  );
+
+  const handleRemoveCard = useCallback((card: { id: string }) => space.db.remove(card), [space]);
+
+  const handleTypenameChanged = useCallback(
+    (typename: string) => {
+      invariant(schema);
+      invariant(kanban?.cardView?.target);
+      assertEchoSchema(schema).updateTypename(typename);
+      kanban.cardView.target.query.typename = typename;
+    },
+    [kanban?.cardView?.target, schema],
+  );
+
+  if (!schema || !kanban) {
+    return null;
+  }
+
+  return (
+    <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);
+            }}
+          />
+        )}
+        <SyntaxHighlighter language='json' className='w-full text-xs'>
+          {JSON.stringify({ cardView: kanban.cardView?.target, cardSchema: schema }, null, 2)}
+        </SyntaxHighlighter>
+      </div>
+    </div>
+  );
+};
+
+type StoryProps = {
+  rows?: number;
+};
+
+//
+// Story definitions.
+//
+
+const meta: Meta<StoryProps> = {
+  title: 'plugins/plugin-kanban/Kanban',
+  component: StorybookKanban,
+  render: () => <StorybookKanban />,
+  parameters: { translations },
+  decorators: [
+    withLayout({ fullscreen: true }),
+    withPluginManager({
+      plugins: [
+        ThemePlugin({ tx: defaultTx }),
+        ClientPlugin({
+          types: [DataType.Organization, DataType.Person, KanbanType],
+          onClientInitialized: async (_, client) => {
+            await client.halo.createIdentity();
+            const space = await client.spaces.create();
+            await space.waitUntilReady();
+            const { schema, kanban } = await initializeKanban({
+              space,
+              client,
+              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(live(schema, rollOrg()));
+              });
+            }
+          },
+        }),
+        StorybookLayoutPlugin(),
+        PreviewPlugin(),
+        SpacePlugin(),
+        IntentPlugin(),
+        SettingsPlugin(),
+      ],
+    }),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {};