@dxos/plugin-kanban 0.8.4-main.2c6827d → 0.8.4-main.3c1ae3b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.2c6827d",
+  "version": "0.8.4-main.3c1ae3b",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -38,29 +38,29 @@
     "@preact-signals/safe-react": "^0.9.0",
     "@preact/signals-core": "^1.12.1",
     "effect": "3.18.3",
-    "@dxos/ai": "0.8.4-main.2c6827d",
-    "@dxos/async": "0.8.4-main.2c6827d",
-    "@dxos/assistant": "0.8.4-main.2c6827d",
-    "@dxos/blueprints": "0.8.4-main.2c6827d",
-    "@dxos/echo": "0.8.4-main.2c6827d",
-    "@dxos/effect": "0.8.4-main.2c6827d",
-    "@dxos/app-framework": "0.8.4-main.2c6827d",
-    "@dxos/functions": "0.8.4-main.2c6827d",
-    "@dxos/plugin-client": "0.8.4-main.2c6827d",
-    "@dxos/plugin-graph": "0.8.4-main.2c6827d",
-    "@dxos/invariant": "0.8.4-main.2c6827d",
-    "@dxos/plugin-search": "0.8.4-main.2c6827d",
-    "@dxos/plugin-space": "0.8.4-main.2c6827d",
-    "@dxos/random": "0.8.4-main.2c6827d",
-    "@dxos/react-client": "0.8.4-main.2c6827d",
-    "@dxos/react-ui": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-form": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-stack": "0.8.4-main.2c6827d",
-    "@dxos/schema": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-kanban": "0.8.4-main.2c6827d",
-    "@dxos/types": "0.8.4-main.2c6827d",
-    "@dxos/util": "0.8.4-main.2c6827d",
-    "@dxos/log": "0.8.4-main.2c6827d"
+    "@dxos/ai": "0.8.4-main.3c1ae3b",
+    "@dxos/app-framework": "0.8.4-main.3c1ae3b",
+    "@dxos/assistant": "0.8.4-main.3c1ae3b",
+    "@dxos/blueprints": "0.8.4-main.3c1ae3b",
+    "@dxos/effect": "0.8.4-main.3c1ae3b",
+    "@dxos/echo": "0.8.4-main.3c1ae3b",
+    "@dxos/async": "0.8.4-main.3c1ae3b",
+    "@dxos/invariant": "0.8.4-main.3c1ae3b",
+    "@dxos/functions": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-client": "0.8.4-main.3c1ae3b",
+    "@dxos/log": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-graph": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-search": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-space": "0.8.4-main.3c1ae3b",
+    "@dxos/random": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-client": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-form": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-kanban": "0.8.4-main.3c1ae3b",
+    "@dxos/schema": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-stack": "0.8.4-main.3c1ae3b",
+    "@dxos/util": "0.8.4-main.3c1ae3b",
+    "@dxos/types": "0.8.4-main.3c1ae3b"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
@@ -68,19 +68,19 @@
     "react": "~19.2.0",
     "react-dom": "~19.2.0",
     "vite": "7.1.9",
-    "@dxos/plugin-preview": "0.8.4-main.2c6827d",
-    "@dxos/plugin-theme": "0.8.4-main.2c6827d",
-    "@dxos/storybook-utils": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.2c6827d",
-    "@dxos/test-utils": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-theme": "0.8.4-main.2c6827d"
+    "@dxos/plugin-preview": "0.8.4-main.3c1ae3b",
+    "@dxos/plugin-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3c1ae3b",
+    "@dxos/storybook-utils": "0.8.4-main.3c1ae3b",
+    "@dxos/test-utils": "0.8.4-main.3c1ae3b"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.2c6827d",
-    "@dxos/react-ui-theme": "0.8.4-main.2c6827d"
+    "@dxos/react-ui": "0.8.4-main.3c1ae3b",
+    "@dxos/react-ui-theme": "0.8.4-main.3c1ae3b"
   },
   "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,26 +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

@@ -124,7 +124,7 @@ 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(View.View), Filter.ids(id))))
+            .query(Query.select(Filter.and(Filter.type(View.View), Filter.id(id))))
             .first()) as View.View;
 
           const kanban = await view.presentation.load();

package/src/capabilities/intent-resolver.ts

@@ -4,10 +4,9 @@
 
 import { Capabilities, type PluginContext, contributes, createResolver } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
-import { ClientCapabilities } from '@dxos/plugin-client';
 import { getSpace } from '@dxos/react-client/echo';
 import { 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';
@@ -17,15 +16,9 @@ export default (context: PluginContext) =>
     createResolver({
       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({ space, typename, pivotFieldName: initialPivotColumn });
+        const kanban = Kanban.make({ name, view });
+        return { data: { object: kanban } };
       },
     }),
     createResolver({

package/src/capabilities/react-surface.tsx

@@ -6,14 +6,12 @@ import type * as Schema from 'effect/Schema';
 import React, { useMemo } from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { useCapabilities } from '@dxos/app-framework/react';
 import { Obj, Type } from '@dxos/echo';
 import { findAnnotation } from '@dxos/effect';
-import { ClientCapabilities } from '@dxos/plugin-client';
 import { type Space, getSpace, isSpace } from '@dxos/react-client/echo';
-import { type InputProps, SelectInput, useFormValues } from '@dxos/react-ui-form';
+import { type FormFieldComponentProps, SelectField, useFormValues } from '@dxos/react-ui-form';
 import { Kanban } from '@dxos/react-ui-kanban/types';
-import { type Collection, View } from '@dxos/schema';
+import { type Collection } from '@dxos/schema';
 
 import { KanbanContainer, KanbanViewEditor } from '../components';
 import { meta } from '../meta';
@@ -24,17 +22,15 @@ export default () =>
     createSurface({
       id: meta.id,
       role: ['article', 'section'],
-      filter: (data): data is { subject: View.View } =>
-        Obj.instanceOf(View.View, data.subject) && Obj.instanceOf(Kanban.Kanban, data.subject.presentation.target),
-      component: ({ data, role }) => <KanbanContainer view={data.subject} role={role} />,
+      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: View.View } =>
-        Obj.instanceOf(View.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]`,
@@ -50,21 +46,19 @@ export default () =>
         return !!annotation;
       },
       component: ({ data: { target }, ...inputProps }) => {
-        const props = inputProps as any as InputProps;
+        const props = inputProps as any as FormFieldComponentProps;
         const space = isSpace(target) ? target : getSpace(target);
         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('KanbanForm');
+        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 [];
           }
@@ -77,13 +71,13 @@ export default () =>
           }, []);
 
           return columns;
-        }, [selectedSchema?.jsonSchema, staticSchema]);
+        }, [selectedSchema]);
 
         if (!typename) {
           return null;
         }
 
-        return <SelectInput {...props} options={singleSelectColumns.map((column) => ({ value: column }))} />;
+        return <SelectField {...props} options={singleSelectColumns.map((column) => ({ value: column }))} />;
       },
     }),
   ]);

package/src/components/KanbanContainer.stories.tsx

@@ -3,7 +3,7 @@
 //
 
 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';
@@ -16,15 +16,14 @@ 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, 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 { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { defaultTx } from '@dxos/react-ui-theme';
-import { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
+import { View, getTypenameFromQuery } from '@dxos/schema';
 import { Organization, Person } from '@dxos/types';
 
 import { translations } from '../translations';
@@ -44,37 +43,18 @@ const rollOrg = () => ({
 });
 
 const StorybookKanban = () => {
-  const client = useClient();
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
-  const views = useQuery(space, Filter.type(View.View));
-  const [view, setView] = useState<View.View>();
-  const [projection, setProjection] = useState<ProjectionModel>();
-  const typename = view?.query ? getTypenameFromQuery(view.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 [object] = useQuery(space, Filter.type(Kanban.Kanban));
+  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
+  const schema = useSchema(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,49 +75,43 @@ 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(
     (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
-      invariant(view);
+      invariant(object.view.target);
 
       schema.updateTypename(getTypenameFromQuery(newQuery));
-      view.query.ast = newQuery;
+      object.view.target.query.ast = newQuery;
     },
-    [view, schema],
+    [object, schema],
   );
 
-  if (!schema || !view) {
+  if (!schema || !object.view.target) {
     return null;
   }
 
   return (
-    <div className='grow grid grid-cols-[1fr_350px]'>
+    <div className='grow grid grid-cols-[1fr_350px] overflow-hidden'>
       {model ? <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} /> : <div />}
-      <div className='flex flex-col bs-full border-is border-separator overflow-y-auto'>
+      <div className='flex flex-col bs-full overflow-hidden'>
         <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)}
-        </SyntaxHighlighter>
+        <JsonFilter data={{ view: object.view.target, schema }} classNames='text-xs' />
       </div>
     </div>
   );
 };
 
-type StoryProps = {
-  rows?: number;
-};
-
 //
 // Story definitions.
 //
@@ -156,13 +130,13 @@ const meta = {
             await client.halo.createIdentity();
             const space = await client.spaces.create();
             await space.waitUntilReady();
-            const { view } = await Kanban.makeView({
-              client,
+            const { view } = await View.makeFromSpace({
               space,
               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(() => {

package/src/components/KanbanContainer.tsx

@@ -2,38 +2,31 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { useCapabilities, 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 { ClientCapabilities } from '@dxos/plugin-client';
 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 { ProjectionModel, type View, getTypenameFromQuery } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 
 import { KanbanAction } from '../types';
 
-export const KanbanContainer = ({ view }: { view: View.View; role: string }) => {
-  const client = useClient();
+export const KanbanContainer = ({ object }: { object: Kanban.Kanban; role: string }) => {
+  const schemas = useCapabilities(ClientCapabilities.Schema);
   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);
+    const staticSchema = schemas.flat().find((schema) => Type.getTypename(schema) === typename);
     if (staticSchema) {
       setCardSchema(() => staticSchema as TypedObject<any, any>);
     }
@@ -50,21 +43,14 @@ export const KanbanContainer = ({ view }: { view: View.View; role: string }) =>
       );
       return unsubscribe;
     }
-  }, [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)]);
+  }, [schemas, space, typename]);
 
   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,
   });
@@ -90,7 +76,7 @@ export const KanbanContainer = ({ view }: { view: View.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,61 +4,51 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { EchoSchema, FormatEnum } from '@dxos/echo/internal';
-import { useClient } from '@dxos/react-client';
+import { Format } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
 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 { ProjectionModel, type View, getTypenameFromQuery } from '@dxos/schema';
+import { Form, type FormFieldMap, SelectField } from '@dxos/react-ui-form';
+import { useProjectionModel } from '@dxos/react-ui-kanban';
+import { type Kanban } from '@dxos/react-ui-kanban/types';
+import { getTypenameFromQuery } from '@dxos/schema';
 
-type KanbanViewEditorProps = { view: View.View };
+import { SettingsSchema } from '../types';
 
-export const KanbanViewEditor = ({ view }: KanbanViewEditorProps) => {
-  const client = useClient();
-  const space = getSpace(view);
-  const currentTypename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
-  const schema = useSchema(client, space, currentTypename);
+type KanbanViewEditorProps = { object: Kanban.Kanban };
 
-  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)]);
+export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
+  const space = getSpace(object);
+  const view = object.view.target;
+  const currentTypename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(space, currentTypename);
+  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} /> }),
+
+  const fieldMap: FormFieldMap = useMemo(
+    () => ({ columnFieldId: (props) => <SelectField {...props} options={selectFields} /> }),
     [selectFields],
   );
 
   return (
-    <Form
-      Custom={custom}
-      schema={Kanban.SettingsSchema}
-      values={initialValues}
-      onSave={handleSave}
-      autoSave
-      outerSpacing={false}
-      classNames='pbs-inputSpacingBlock'
-    />
+    <Form.Root schema={SettingsSchema} values={initialValues} fieldMap={fieldMap} autoSave onSave={handleSave}>
+      <Form.FieldSet />
+    </Form.Root>
   );
 };

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',
       },