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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.5ad4a44",
+  "version": "0.8.4-main.66e292d",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,48 +38,49 @@
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.12.1",
     "effect": "3.18.3",
-    "@dxos/ai": "0.8.4-main.5ad4a44",
-    "@dxos/app-framework": "0.8.4-main.5ad4a44",
-    "@dxos/assistant": "0.8.4-main.5ad4a44",
-    "@dxos/async": "0.8.4-main.5ad4a44",
-    "@dxos/echo": "0.8.4-main.5ad4a44",
-    "@dxos/functions": "0.8.4-main.5ad4a44",
-    "@dxos/invariant": "0.8.4-main.5ad4a44",
-    "@dxos/log": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-client": "0.8.4-main.5ad4a44",
-    "@dxos/effect": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-graph": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-search": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-space": "0.8.4-main.5ad4a44",
-    "@dxos/blueprints": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-form": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-kanban": "0.8.4-main.5ad4a44",
-    "@dxos/random": "0.8.4-main.5ad4a44",
-    "@dxos/util": "0.8.4-main.5ad4a44",
-    "@dxos/schema": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-stack": "0.8.4-main.5ad4a44",
-    "@dxos/react-client": "0.8.4-main.5ad4a44"
+    "@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": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
+    "@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.5ad4a44",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44",
-    "@dxos/plugin-theme": "0.8.4-main.5ad4a44",
-    "@dxos/test-utils": "0.8.4-main.5ad4a44",
-    "@dxos/storybook-utils": "0.8.4-main.5ad4a44"
+    "@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": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.5ad4a44",
-    "@dxos/react-ui-theme": "0.8.4-main.5ad4a44"
+    "@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';
 
@@ -25,25 +25,20 @@ export const KanbanPlugin = definePlugin(meta, () => [
     activatesOn: Events.SetupMetadata,
     activate: () =>
       contributes(Capabilities.Metadata, {
-        id: Kanban.Kanban.typename,
+        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/object-form`,
+    id: `${meta.id}/module/schema`,
     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 }),
-        }),
-      ),
+    activate: () => contributes(ClientCapabilities.Schema, [Kanban.Kanban]),
   }),
   defineModule({
     id: `${meta.id}/module/react-surface`,

package/src/capabilities/artifact-definition.ts

@@ -15,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';
@@ -94,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) => {
@@ -104,7 +104,7 @@ export default () => {
               }
 
               return {
-                id: fullyQualifiedId(view),
+                id: Obj.getDXN(view).toString(),
                 name: view.name ?? 'Unnamed Kanban',
                 typename: view.query.typename,
               };
@@ -124,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,7 +7,7 @@ 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, getTypenameFromQuery } from '@dxos/schema';
+import { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
 
 import { meta } from '../meta';
 import { KanbanAction } from '../types';
@@ -18,14 +18,9 @@ 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({

package/src/capabilities/react-surface.tsx

@@ -5,14 +5,13 @@
 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

@@ -3,11 +3,11 @@
 //
 
 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, Query, 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,11 +20,12 @@ 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, getTypenameFromQuery } from '@dxos/schema';
+import { View, getTypenameFromQuery } from '@dxos/schema';
+import { Organization, Person } from '@dxos/types';
 
 import { translations } from '../translations';
 
@@ -39,41 +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 typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  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);
 
-  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 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,
   });
@@ -94,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 handleUpdateQuery = useCallback(
-    (typename: string) => {
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      invariant(view);
+      invariant(object.view.target);
 
-      schema.updateTypename(typename);
-      view.query.ast = Query.select(Filter.typename(typename)).ast;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
+      object.view.target.query.ast = newQuery;
     },
-    [view, schema],
+    [object, schema],
   );
 
-  if (!schema || !view) {
+  if (!schema || !object.view.target) {
     return null;
   }
 
@@ -119,14 +102,14 @@ const StorybookKanban = () => {
         <ViewEditor
           registry={space?.db.schemaRegistry}
           schema={schema}
-          view={view}
+          view={object.view.target}
           onQueryChanged={handleUpdateQuery}
           onDelete={(fieldId: string) => {
             console.log('[ViewEditor]', 'onDelete', fieldId);
           }}
         />
         <SyntaxHighlighter language='json' className='text-xs'>
-          {JSON.stringify({ view, schema }, null, 2)}
+          {JSON.stringify({ view: object.view.target, schema }, null, 2)}
         </SyntaxHighlighter>
       </div>
     </div>
@@ -150,22 +133,23 @@ const meta = {
     withPluginManager({
       plugins: [
         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()));
             });
           },
         }),

package/src/components/KanbanContainer.tsx

@@ -2,34 +2,28 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { Filter, Obj, Type } from '@dxos/echo';
-import { EchoSchema, type TypedObject } from '@dxos/echo/internal';
+import { type TypedObject } from '@dxos/echo/internal';
 import { useGlobalFilteredObjects } from '@dxos/plugin-search';
 import { useClient } from '@dxos/react-client';
 import { getSpace, useQuery } from '@dxos/react-client/echo';
-import { Kanban, useKanbanModel } from '@dxos/react-ui-kanban';
+import { Kanban as KanbanComponent, useKanbanModel, useProjectionModel } from '@dxos/react-ui-kanban';
+import { type Kanban } from '@dxos/react-ui-kanban/types';
 import { StackItem } from '@dxos/react-ui-stack';
-import { type DataType, ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 
 import { KanbanAction } from '../types';
 
-export const KanbanContainer = ({ view }: { view: DataType.View; role: string }) => {
+export const KanbanContainer = ({ object }: { object: Kanban.Kanban; role: string }) => {
   const client = useClient();
   const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ProjectionModel>();
-  const space = getSpace(view);
+  const space = getSpace(object);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
-
-  const jsonSchema = useMemo(() => {
-    if (!cardSchema) {
-      return undefined;
-    }
-    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
-  }, [cardSchema]);
+  const typename = object.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
 
   useEffect(() => {
     const staticSchema = client.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
@@ -51,19 +45,12 @@ export const KanbanContainer = ({ view }: { view: DataType.View; role: string })
     }
   }, [typename, space]);
 
-  useEffect(() => {
-    if (jsonSchema) {
-      setProjection(new ProjectionModel(jsonSchema, view.projection));
-    }
-    // TODO(ZaymonFC): Is there a better way to get notified about deep changes in the json schema?
-  }, [view.projection, JSON.stringify(jsonSchema)]);
-
   const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(cardSchema, object);
   const model = useKanbanModel({
-    view,
-    schema: cardSchema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -89,7 +76,7 @@ export const KanbanContainer = ({ view }: { view: DataType.View; role: string })
 
   return (
     <StackItem.Content>
-      {model && <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
+      {model && <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
     </StackItem.Content>
   );
 };

package/src/components/KanbanViewEditor.tsx

@@ -4,46 +4,43 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { EchoSchema, FormatEnum } from '@dxos/echo/internal';
+import { Format } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { getSpace, useSchema } from '@dxos/react-client/echo';
 import { type CustomInputMap, Form, SelectInput } from '@dxos/react-ui-form';
-import { Kanban } from '@dxos/react-ui-kanban/types';
-import { type DataType, ProjectionModel, getTypenameFromQuery } from '@dxos/schema';
+import { useProjectionModel } from '@dxos/react-ui-kanban';
+import { type Kanban } from '@dxos/react-ui-kanban/types';
+import { getTypenameFromQuery } from '@dxos/schema';
 
-type KanbanViewEditorProps = { view: DataType.View };
+import { SettingsSchema } from '../types';
 
-export const KanbanViewEditor = ({ view }: KanbanViewEditorProps) => {
+type KanbanViewEditorProps = { object: Kanban.Kanban };
+
+export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
   const client = useClient();
-  const space = getSpace(view);
-  const currentTypename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const space = getSpace(object);
+  const view = object.view.target;
+  const currentTypename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
   const schema = useSchema(client, space, currentTypename);
-
-  const projection = useMemo(() => {
-    if (schema) {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : Type.toJsonSchema(schema);
-      const projection = new ProjectionModel(jsonSchema, view.projection);
-      projection.normalizeView();
-      return projection;
-    }
-  }, [view.projection, JSON.stringify(schema)]);
+  const projection = useProjectionModel(schema, object);
 
   const fieldProjections = projection?.getFieldProjections() || [];
   const selectFields = fieldProjections
-    .filter((field) => field.props.format === FormatEnum.SingleSelect)
+    .filter((field) => field.props.format === Format.TypeFormat.SingleSelect)
     .map(({ field }) => ({ value: field.id, label: field.path }));
 
   const handleSave = useCallback(
     (values: Partial<{ columnFieldId: string }>) => {
+      invariant(view);
       view.projection.pivotFieldId = values.columnFieldId;
     },
     [view],
   );
 
   const initialValues = useMemo(
-    () => ({ columnFieldId: view.projection.pivotFieldId }),
-    [view.projection.pivotFieldId],
+    () => ({ columnFieldId: view?.projection.pivotFieldId }),
+    [view?.projection.pivotFieldId],
   );
   const custom: CustomInputMap = useMemo(
     () => ({ columnFieldId: (props) => <SelectInput {...props} options={selectFields} /> }),
@@ -53,7 +50,7 @@ export const KanbanViewEditor = ({ view }: KanbanViewEditorProps) => {
   return (
     <Form
       Custom={custom}
-      schema={Kanban.SettingsSchema}
+      schema={SettingsSchema}
       values={initialValues}
       onSave={handleSave}
       autoSave

package/src/meta.ts

@@ -3,13 +3,17 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
   id: 'dxos.org/plugin/kanban',
   name: 'Kanban',
-  description:
-    'Kanban allows you to explore Table data in sorted columns defined by your custom schema. You can use Kanbans to track progress or trigger custom automations when cards are moved from one state to another.',
+  description: trim`
+    Visual project management using customizable kanban boards to track workflow progress.
+    Organize table data into columns, drag and drop items between stages, and trigger automations based on status changes.
+  `,
   icon: 'ph--kanban--regular',
+  iconHue: 'green',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-kanban',
   screenshots: ['https://dxos.network/plugin-details-kanban-dark.png'],
 };

package/src/translations.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Type } from '@dxos/echo';
 import { type Resource } from '@dxos/react-ui';
 import { Kanban } from '@dxos/react-ui-kanban/types';
 
@@ -10,24 +11,23 @@ import { meta } from './meta';
 export const translations = [
   {
     'en-US': {
-      [Kanban.Kanban.typename]: {
+      [Type.getTypename(Kanban.Kanban)]: {
         'typename label': 'Kanban',
         'typename label_zero': 'Kanbans',
         'typename label_one': 'Kanban',
         'typename label_other': 'Kanbans',
         'object name placeholder': 'New kanban',
+        'rename object label': 'Rename kanban',
+        'delete object label': 'Delete kanban',
+        'object deleted label': 'Kanban deleted',
       },
       [meta.id]: {
         'plugin name': 'Kanban',
         'kanban title label': 'Title',
         'column title label': 'Column title',
         'column title placeholder': 'New column',
-        'item title label': 'Item title',
-        'item title placeholder': 'New item',
         'add column label': 'Add column',
-        'add item label': 'Add card',
         'delete column label': 'Delete column',
-        'delete item label': 'Delete card',
         'card field deleted label': 'Card field deleted',
         'card deleted label': 'Card deleted',
       },