@dxos/plugin-kanban 0.8.2-main.12df754 → 0.8.2-main.30e4dbb

package/package.json

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

package/src/capabilities/artifact-definition.ts

@@ -2,12 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { pipe } from 'effect';
+import { Schema, pipe } from 'effect';
 
 import { Capabilities, chain, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
 import { defineArtifact, defineTool, ToolResult } 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 +16,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`',
 });
 
@@ -44,11 +44,11 @@ export default () => {
             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.',
           }),
         }),
@@ -83,7 +83,7 @@ export default () => {
         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;
@@ -106,7 +106,7 @@ export default () => {
         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;

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 PluginsContext } 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: PluginsContext) =>
   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.requestCapability(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,186 @@
+//
+// 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 { 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.schema(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) {
+      setProjection(new ViewProjection(schema.jsonSchema, kanban.cardView.target));
+    }
+    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
+  }, [kanban?.cardView?.target, schema, JSON.stringify(schema?.jsonSchema)]);
+
+  const objects = useQuery(space, schema ? Filter.schema(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) => {
+      if (kanban?.cardView?.target) {
+        schema?.mutable.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: 'ui/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 = {};

package/src/components/KanbanContainer.tsx

@@ -2,11 +2,12 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { type EchoSchema } from '@dxos/echo-schema';
+import { EchoSchema, getTypenameOrThrow, toJsonSchema, type TypedObject } from '@dxos/echo-schema';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
+import { useClient } from '@dxos/react-client';
 import { Filter, useQuery, getSpace, live } from '@dxos/react-client/echo';
 import { type KanbanType, useKanbanModel, Kanban } from '@dxos/react-ui-kanban';
 import { StackItem } from '@dxos/react-ui-stack';
@@ -15,14 +16,26 @@ import { ViewProjection } from '@dxos/schema';
 import { KanbanAction } from '../types';
 
 export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }) => {
-  const [cardSchema, setCardSchema] = useState<EchoSchema>();
+  const client = useClient();
+  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
   const [projection, setProjection] = useState<ViewProjection>();
   const space = getSpace(kanban);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
 
+  const jsonSchema = useMemo(
+    () =>
+      cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : cardSchema ? toJsonSchema(cardSchema) : undefined,
+    [cardSchema],
+  );
+
   useEffect(() => {
-    if (kanban.cardView?.target?.query?.typename && space) {
-      const query = space.db.schemaRegistry.query({ typename: kanban.cardView.target.query.typename });
+    const typename = kanban.cardView?.target?.query?.typename;
+    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => getTypenameOrThrow(schema) === typename);
+    if (staticSchema) {
+      setCardSchema(() => staticSchema as TypedObject<any, any>);
+    }
+    if (!staticSchema && typename && space) {
+      const query = space.db.schemaRegistry.query({ typename });
       const unsubscribe = query.subscribe(
         () => {
           const [schema] = query.results;
@@ -37,11 +50,11 @@ export const KanbanContainer = ({ kanban }: { kanban: KanbanType; role: string }
   }, [kanban.cardView?.target?.query, space]);
 
   useEffect(() => {
-    if (kanban.cardView?.target && cardSchema) {
-      setProjection(new ViewProjection(cardSchema.jsonSchema, kanban.cardView.target));
+    if (kanban.cardView?.target && jsonSchema) {
+      setProjection(new ViewProjection(jsonSchema, kanban.cardView.target));
     }
     // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-  }, [kanban.cardView?.target, cardSchema, JSON.stringify(cardSchema?.jsonSchema)]);
+  }, [kanban.cardView?.target, JSON.stringify(jsonSchema)]);
 
   const objects = useQuery(space, cardSchema ? Filter.schema(cardSchema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);

package/src/testing/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './kanban-manager';
+export * from './initialize-kanban';

package/src/testing/initialize-kanban.ts

@@ -0,0 +1,139 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { Schema, SchemaAST } from 'effect';
+
+import {
+  TypedObject,
+  FormatEnum,
+  TypeEnum,
+  type JsonProp,
+  type EchoSchema,
+  getTypenameOrThrow,
+  toJsonSchema,
+} from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { type Client, PublicKey } from '@dxos/react-client';
+import { type Space, live, makeRef } from '@dxos/react-client/echo';
+import { KanbanType } from '@dxos/react-ui-kanban';
+import { createView, ViewProjection, createFieldId, getSchemaProperties } from '@dxos/schema';
+import { capitalize } from '@dxos/util';
+
+// TODO(wittjosiah): UI package shouldn't depend on client.
+
+type InitializeKanbanProps = {
+  client: Client;
+  space: Space;
+  name?: string;
+  typename?: string;
+  initialPivotColumn?: string;
+};
+
+const createDefaultTaskSchema = () => {
+  const stateOptions = [
+    { id: PublicKey.random().truncate(), title: 'Draft', color: 'indigo' },
+    { id: PublicKey.random().truncate(), title: 'Active', color: 'cyan' },
+    { id: PublicKey.random().truncate(), title: 'Completed', color: 'emerald' },
+  ];
+
+  const schema = TypedObject({
+    typename: `example.com/type/${PublicKey.random().truncate()}`,
+    version: '0.1.0',
+  })({
+    title: Schema.optional(Schema.String).annotations({
+      [SchemaAST.TitleAnnotationId]: 'Title',
+    }),
+    description: Schema.optional(Schema.String).annotations({
+      [SchemaAST.TitleAnnotationId]: 'Description',
+    }),
+    state: Schema.optional(Schema.String),
+  });
+
+  return { schema, stateOptions };
+};
+
+export const initializeKanban = async ({
+  client,
+  space,
+  name,
+  typename,
+  initialPivotColumn,
+}: InitializeKanbanProps): Promise<{ kanban: KanbanType; schema?: EchoSchema }> => {
+  if (typename) {
+    const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => getTypenameOrThrow(schema) === typename);
+    const schema = await space.db.schemaRegistry.query({ typename }).firstOrUndefined();
+
+    const ast = staticSchema?.ast ?? schema?.ast;
+    const jsonSchema = staticSchema ? toJsonSchema(staticSchema) : schema?.jsonSchema;
+    invariant(ast, `Schema not found: ${typename}`);
+    invariant(jsonSchema, `Schema not found: ${typename}`);
+
+    const fields = getSchemaProperties(ast)
+      .filter((prop) => prop.type !== 'object' || prop.format === FormatEnum.Ref)
+      .map((prop) => prop.name);
+
+    const view = createView({
+      name: "Kanban's card view",
+      typename,
+      jsonSchema,
+      fields,
+    });
+
+    const kanban = live(KanbanType, { cardView: makeRef(view), columnFieldId: undefined, name });
+    if (initialPivotColumn) {
+      const viewProjection = new ViewProjection(jsonSchema, view);
+      const fieldId = viewProjection.getFieldId(initialPivotColumn);
+      if (fieldId) {
+        kanban.columnFieldId = fieldId;
+      }
+    }
+    return { kanban, schema };
+  } else {
+    const { schema: taskSchema, stateOptions } = createDefaultTaskSchema();
+    const [schema] = await space.db.schemaRegistry.register([taskSchema]);
+
+    const view = createView({
+      name: "Kanban's card view",
+      typename: schema.typename,
+      jsonSchema: schema.jsonSchema,
+      fields: ['title', 'description'],
+    });
+
+    const viewProjection = new ViewProjection(schema.jsonSchema, view);
+
+    // Set description field to Markdown format.
+    const descriptionFieldId = viewProjection.getFieldId('description');
+    if (descriptionFieldId) {
+      const fieldProjection = viewProjection.getFieldProjection(descriptionFieldId);
+      if (fieldProjection) {
+        viewProjection.setFieldProjection({
+          ...fieldProjection,
+          props: { ...fieldProjection.props, format: FormatEnum.Markdown },
+        });
+      }
+    }
+
+    const initialPivotField = 'state';
+    viewProjection.setFieldProjection({
+      field: {
+        id: createFieldId(),
+        path: initialPivotField as JsonProp,
+        size: 150,
+      },
+      props: {
+        property: initialPivotField as JsonProp,
+        type: TypeEnum.String,
+        format: FormatEnum.SingleSelect,
+        title: capitalize(initialPivotField),
+        options: stateOptions,
+      },
+    });
+
+    const fieldId = viewProjection.getFieldId(initialPivotField);
+    invariant(fieldId);
+
+    const kanban = live(KanbanType, { cardView: makeRef(view), columnFieldId: fieldId });
+    return { kanban, schema };
+  }
+};