@dxos/plugin-kanban 0.8.4-main.1da679c → 0.8.4-main.21d9917

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,80 +2,66 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
+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, Query, Type } from '@dxos/echo';
+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 { DataType, ProjectionModel, typenameFromQuery } from '@dxos/schema';
-import { withLayout } from '@dxos/storybook-utils';
+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(),
   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();
+//
+// Story components.
+//
+
+const DefaultComponent = () => {
+  const registry = useContext(RegistryContext);
   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 ? typenameFromQuery(view.query) : 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,
   });
@@ -83,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,
         });
 
@@ -96,95 +82,144 @@ 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 = Query.select(Filter.typename(typename)).ast;
+      schema.updateTypename(getTypenameFromQuery(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 />,
-  parameters: { translations },
+  component: DefaultComponent,
+  render: () => <DefaultComponent />,
   decorators: [
-    withLayout({ fullscreen: true }),
+    withTheme,
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
+        ...corePlugins(),
         ClientPlugin({
-          types: [DataType.Organization, DataType.Person, DataType.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: DataType.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(DataType.Organization, rollOrg()));
-            });
-          },
+          types: [Organization.Organization, Person.Person, View.View, Kanban.Kanban],
+          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()));
+              });
+            }),
         }),
-        StorybookLayoutPlugin(),
         PreviewPlugin(),
-        SpacePlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
+        SpacePlugin({}),
+        StorybookPlugin({}),
       ],
     }),
   ],
-} satisfies Meta<typeof StorybookKanban>;
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, ...kanbanTranslations],
+  },
+} 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,42 +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, useIntentDispatcher } from '@dxos/app-framework';
+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-schema';
 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 { type DataType, ProjectionModel, typenameFromQuery } 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: DataType.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 ? typenameFromQuery(view.query) : 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;
@@ -49,21 +45,14 @@ export const KanbanContainer = ({ view }: { view: DataType.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,
   });
@@ -71,25 +60,25 @@ export const KanbanContainer = ({ view }: { view: DataType.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,61 +2,58 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
-
-import { Type } from '@dxos/echo';
-import { EchoSchema, FormatEnum } from '@dxos/echo-schema';
-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, typenameFromQuery } from '@dxos/schema';
-
-type KanbanViewEditorProps = { view: DataType.View };
-
-export const KanbanViewEditor = ({ view }: KanbanViewEditorProps) => {
-  const client = useClient();
-  const space = getSpace(view);
-  const currentTypename = view.query ? typenameFromQuery(view.query) : undefined;
-  const schema = useSchema(client, space, currentTypename);
-
-  const projection = useMemo(() => {
-    if (schema) {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : Type.toJsonSchema(schema);
-      return new ProjectionModel(jsonSchema, view.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,16 +2,18 @@
 // 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 KANBAN_PLUGIN = 'dxos.org/plugin/kanban';
-
-export const meta: PluginMeta = {
-  id: KANBAN_PLUGIN,
+export const meta: Plugin.Meta = {
+  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'],
 };