@dxos/plugin-kanban 0.8.4-main.72ec0f3 → 0.8.4-main.937b3ca

package/src/capabilities/react-surface/react-surface.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import type * as Schema from 'effect/Schema';
+import React, { useMemo } from 'react';
+
+import { Capability, Common } from '@dxos/app-framework';
+import { Database, Obj, Type } from '@dxos/echo';
+import { findAnnotation } from '@dxos/effect';
+import { type FormFieldComponentProps, SelectField, useFormValues } from '@dxos/react-ui-form';
+import { Kanban } from '@dxos/react-ui-kanban/types';
+import { type Collection } from '@dxos/schema';
+
+import { KanbanContainer, KanbanViewEditor } from '../../components';
+import { meta } from '../../meta';
+import { PivotColumnAnnotationId } from '../../types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Common.Capability.ReactSurface, [
+      Common.createSurface({
+        id: meta.id,
+        role: ['article', 'section'],
+        filter: (data): data is { subject: Kanban.Kanban } => Obj.instanceOf(Kanban.Kanban, data.subject),
+        component: ({ data, role }) => <KanbanContainer role={role} subject={data.subject} />,
+      }),
+      Common.createSurface({
+        id: `${meta.id}/object-settings`,
+        role: 'object-settings',
+        position: 'hoist',
+        filter: (data): data is { subject: Kanban.Kanban } => Obj.instanceOf(Kanban.Kanban, data.subject),
+        component: ({ data }) => <KanbanViewEditor object={data.subject} />,
+      }),
+      Common.createSurface({
+        id: `${meta.id}/create-initial-schema-form-[pivot-column]`,
+        role: 'form-input',
+        filter: (
+          data,
+        ): data is {
+          prop: string;
+          schema: Schema.Schema<any>;
+          target: Database.Database | Collection.Collection | undefined;
+        } => {
+          const annotation = findAnnotation<boolean>((data.schema as Schema.Schema.All).ast, PivotColumnAnnotationId);
+          return !!annotation;
+        },
+        component: ({ data: { target }, ...inputProps }) => {
+          const props = inputProps as any as FormFieldComponentProps;
+          const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
+          if (!db) {
+            return null;
+          }
+
+          const { typename } = useFormValues('KanbanForm');
+          const [selectedSchema] = useMemo(
+            () => db.schemaRegistry.query({ location: ['database', 'runtime'], typename }).runSync(),
+            [db, typename],
+          );
+          const singleSelectColumns = useMemo(() => {
+            const properties = Type.toJsonSchema(selectedSchema).properties;
+            if (!properties) {
+              return [];
+            }
+
+            const columns = Object.entries(properties).reduce<string[]>((acc, [key, value]) => {
+              if (typeof value === 'object' && value?.format === 'single-select') {
+                acc.push(key);
+              }
+              return acc;
+            }, []);
+
+            return columns;
+          }, [selectedSchema]);
+
+          if (!typename) {
+            return null;
+          }
+
+          return <SelectField {...props} options={singleSelectColumns.map((column) => ({ value: column }))} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/components/KanbanContainer.stories.tsx

@@ -2,40 +2,41 @@
 // Copyright 2024 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useState } from 'react';
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useContext } from 'react';
+import { expect, waitFor, within } from 'storybook/test';
 
-import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, type QueryAST, Type } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
 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 { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 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,
+  translations as kanbanTranslations,
+  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 { ProjectionModel, View, getTypenameFromQuery } from '@dxos/schema';
+import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
+import { View, getTypenameFromQuery } from '@dxos/schema';
 import { Organization, Person } from '@dxos/types';
 
 import { translations } from '../translations';
 
 faker.seed(0);
 
-//
-// Story components.
-//
-
-const rollOrg = () => ({
+const createOrg = () => ({
   name: faker.commerce.productName(),
   description: faker.lorem.paragraph(),
   image: faker.image.url(),
@@ -43,38 +44,24 @@ const rollOrg = () => ({
   status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
 });
 
-const StorybookKanban = () => {
-  const client = useClient();
+//
+// Story components.
+//
+
+const DefaultComponent = () => {
+  const registry = useContext(RegistryContext);
   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 objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const [object] = useQuery(space?.db, Filter.type(Kanban.Kanban));
+  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
+  const schema = useSchema(space?.db, typename);
+
+  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(schema, object, registry);
   const model = useKanbanModel({
-    view,
-    schema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -82,9 +69,9 @@ const StorybookKanban = () => {
   const handleAddCard = useCallback(
     (columnValue: string | undefined) => {
       const path = model?.columnFieldPath;
-      if (space && schema && path) {
+      if (space && schema && Type.isObjectSchema(schema) && path) {
         const card = Obj.make(schema, {
-          ...rollOrg(),
+          ...createOrg(),
           [path]: columnValue,
         });
 
@@ -95,100 +82,145 @@ 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;
+      Obj.change(object.view.target, (v) => {
+        v.query.ast = newQuery as Mutable<typeof 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 border-l border-separator'>
         <ViewEditor
+          classNames='p-2'
           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.
 //
 
 const meta = {
   title: 'plugins/plugin-kanban/Kanban',
-  component: StorybookKanban,
-  render: () => <StorybookKanban />,
+  component: DefaultComponent,
+  render: () => <DefaultComponent />,
   decorators: [
     withTheme,
     withPluginManager({
       plugins: [
+        ...corePlugins(),
         ClientPlugin({
           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({
-              client,
-              space,
-              typename: Organization.Organization.typename,
-              pivotFieldName: 'status',
-            });
-            space.db.add(view);
-
-            // TODO(burdon): Replace with sdk/schema/testing.
-            Array.from({ length: 80 }).map(() => {
-              return space.db.add(Obj.make(Organization.Organization, rollOrg()));
-            });
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+              const space = yield* Effect.promise(() => client.spaces.create());
+              yield* Effect.promise(() => space.waitUntilReady());
+
+              const { view } = yield* Effect.promise(() =>
+                View.makeFromDatabase({
+                  db: space.db,
+                  typename: Organization.Organization.typename,
+                  pivotFieldName: 'status',
+                }),
+              );
+              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(Organization.Organization, createOrg()));
+              });
+            }),
         }),
-        SpacePlugin({}),
-        IntentPlugin(),
-        SettingsPlugin(),
-
-        // UI
-        ThemePlugin({ tx: defaultTx }),
         PreviewPlugin(),
-        StorybookLayoutPlugin({}),
+        SpacePlugin({}),
+        StorybookPlugin({}),
       ],
     }),
   ],
   parameters: {
     layout: 'fullscreen',
-    translations,
+    translations: [...translations, ...kanbanTranslations],
   },
-} satisfies Meta<typeof StorybookKanban>;
+} satisfies Meta<typeof DefaultComponent>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the kanban columns to render by finding the status tags.
+    // Organization.StatusOptions: prospect, qualified, active, commit, reject.
+    const activeTag = await canvas.findByText('Active', undefined, { timeout: 30_000 });
+    const prospectTag = await canvas.findByText('Prospect', undefined, { timeout: 10_000 });
+    const commitTag = await canvas.findByText('Commit', undefined, { timeout: 10_000 });
+
+    // Verify all expected columns are rendered.
+    await expect(activeTag).toBeTruthy();
+    await expect(prospectTag).toBeTruthy();
+    await expect(commitTag).toBeTruthy();
+
+    // Find the column containers.
+    const activeColumn = activeTag.closest('[data-dx-stack-item]') as HTMLElement;
+    const prospectColumn = prospectTag.closest('[data-dx-stack-item]') as HTMLElement;
+    await expect(activeColumn).toBeTruthy();
+    await expect(prospectColumn).toBeTruthy();
+
+    // Wait for cards to render in the columns.
+    // Cards have data-dx-item-id attribute from StackItem.Root.
+    const getColumnCards = (column: HTMLElement) =>
+      Array.from(column.querySelectorAll('[data-dx-item-id]')) as HTMLElement[];
+
+    await waitFor(() => expect(getColumnCards(activeColumn).length).toBeGreaterThan(0));
+
+    // Verify cards are distributed across columns.
+    const activeCards = getColumnCards(activeColumn);
+    const prospectCards = getColumnCards(prospectColumn);
+    await expect(activeCards.length).toBeGreaterThan(0);
+    await expect(prospectCards.length).toBeGreaterThan(0);
+
+    // Verify cards have drag handles (first button in toolbar).
+    const firstActiveCard = activeCards[0];
+    const buttons = firstActiveCard.querySelectorAll('button');
+    await expect(buttons.length).toBeGreaterThan(0);
+
+    // Verify the drop zone exists in each column.
+    const activeDropZone = activeColumn.querySelector('.kanban-drop');
+    const prospectDropZone = prospectColumn.querySelector('.kanban-drop');
+    await expect(activeDropZone).toBeTruthy();
+    await expect(prospectDropZone).toBeTruthy();
+
+    // TODO(wittjosiah): Get drag & drop tests working.
+    //   See packages/apps/composer-app/src/playwright/stack.spec.ts for reference.
+  },
+};

package/src/components/KanbanContainer.tsx

@@ -2,43 +2,38 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+import { Common } from '@dxos/app-framework';
+import { type SurfaceComponentProps, useCapabilities, useOperationInvoker } from '@dxos/app-framework/react';
 import { Filter, Obj, Type } from '@dxos/echo';
-import { EchoSchema, 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 { StackItem } from '@dxos/react-ui-stack';
-import { ProjectionModel, type View, getTypenameFromQuery } from '@dxos/schema';
+import { useQuery } from '@dxos/react-client/echo';
+import { Kanban as KanbanComponent, useKanbanModel, useProjectionModel } from '@dxos/react-ui-kanban';
+import { type Kanban } from '@dxos/react-ui-kanban/types';
+import { Layout } from '@dxos/react-ui-mosaic';
+import { getTypenameFromQuery } from '@dxos/schema';
 
-import { KanbanAction } from '../types';
+import { KanbanOperation } from '../types';
 
-export const KanbanContainer = ({ view }: { view: View.View; role: string }) => {
-  const client = useClient();
-  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const [projection, setProjection] = useState<ProjectionModel>();
-  const space = getSpace(view);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
+export type KanbanContainerProps = SurfaceComponentProps<Kanban.Kanban>;
 
-  const jsonSchema = useMemo(() => {
-    if (!cardSchema) {
-      return undefined;
-    }
-    return cardSchema instanceof EchoSchema ? cardSchema.jsonSchema : Type.toJsonSchema(cardSchema);
-  }, [cardSchema]);
+export const KanbanContainer = ({ role, subject: object }: KanbanContainerProps) => {
+  const registry = useContext(RegistryContext);
+  const schemas = useCapabilities(Common.Capability.Schema);
+  const [cardSchema, setCardSchema] = useState<Type.Obj.Any>();
+  const db = Obj.getDatabase(object);
+  const { invokePromise } = useOperationInvoker();
+  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>);
+      setCardSchema(staticSchema);
     }
-    if (!staticSchema && typename && space) {
-      const query = space.db.schemaRegistry.query({ typename });
+    if (!staticSchema && typename && db) {
+      const query = db.schemaRegistry.query({ typename });
       const unsubscribe = query.subscribe(
         () => {
           const [schema] = query.results;
@@ -50,21 +45,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, db, typename]);
 
-  const objects = useQuery(space, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
+  const objects = useQuery(db, cardSchema ? Filter.type(cardSchema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
+  const projection = useProjectionModel(cardSchema, object, registry);
   const model = useKanbanModel({
-    view,
-    schema: cardSchema,
+    object,
     projection,
     items: filteredObjects,
   });
@@ -72,25 +60,25 @@ export const KanbanContainer = ({ view }: { view: View.View; role: string }) =>
   const handleAddCard = useCallback(
     (columnValue: string | undefined) => {
       const path = model?.columnFieldPath;
-      if (space && cardSchema && path) {
+      if (db && cardSchema && path) {
         const card = Obj.make(cardSchema, { [path]: columnValue });
-        space.db.add(card);
+        db.add(card);
         return card.id;
       }
     },
-    [space, cardSchema, model],
+    [db, cardSchema, model],
   );
 
   const handleRemoveCard = useCallback(
     (card: { id: string }) => {
-      void dispatch(createIntent(KanbanAction.DeleteCard, { card }));
+      void invokePromise(KanbanOperation.DeleteCard, { card });
     },
-    [dispatch],
+    [invokePromise],
   );
 
   return (
-    <StackItem.Content>
-      {model && <Kanban model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
-    </StackItem.Content>
+    <Layout.Main role={role}>
+      {model && <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
+    </Layout.Main>
   );
 };

package/src/components/KanbanViewEditor.tsx

@@ -2,63 +2,58 @@
 // Copyright 2025 DXOS.org
 //
 
-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 { 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';
-
-type KanbanViewEditorProps = { view: View.View };
-
-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);
-
-  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)]);
+import { RegistryContext } from '@effect-atom/atom-react';
+import React, { useCallback, useContext, useMemo } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { Format } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { useSchema } from '@dxos/react-client/echo';
+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';
+
+import { SettingsSchema } from '../types';
+
+type KanbanViewEditorProps = { object: Kanban.Kanban };
+
+export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
+  const registry = useContext(RegistryContext);
+  const db = Obj.getDatabase(object);
+  const view = object.view.target;
+  const currentTypename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
+  const schema = useSchema(db, currentTypename);
+  const projection = useProjectionModel(schema, object, registry);
 
   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 }>) => {
-      view.projection.pivotFieldId = values.columnFieldId;
+      invariant(view);
+      Obj.change(view, (v) => {
+        v.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/meta.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
-export const meta: PluginMeta = {
+export const meta: Plugin.Meta = {
   id: 'dxos.org/plugin/kanban',
   name: 'Kanban',
   description: trim`