@dxos/plugin-kanban 0.8.4-main.7ace549 → 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,28 +2,33 @@
 // Copyright 2024 DXOS.org
 //
 
+import { RegistryContext } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useCallback } 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, useProjectionModel } 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 { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
 import { View, getTypenameFromQuery } from '@dxos/schema';
 import { Organization, Person } from '@dxos/types';
 
@@ -31,11 +36,7 @@ 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,18 +44,22 @@ 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 [object] = useQuery(space, Filter.type(Kanban.Kanban));
+  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(client, space, typename);
+  const schema = useSchema(space?.db, typename);
 
-  const objects = useQuery(space, schema ? Filter.type(schema) : Filter.nothing());
+  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
   const filteredObjects = useGlobalFilteredObjects(objects);
 
-  const projection = useProjectionModel(schema, object);
+  const projection = useProjectionModel(schema, object, registry);
   const model = useKanbanModel({
     object,
     projection,
@@ -64,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,
         });
 
@@ -86,7 +91,9 @@ const StorybookKanban = () => {
       invariant(object.view.target);
 
       schema.updateTypename(getTypenameFromQuery(newQuery));
-      object.view.target.query.ast = newQuery;
+      Obj.change(object.view.target, (v) => {
+        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      });
     },
     [object, schema],
   );
@@ -96,10 +103,11 @@ const StorybookKanban = () => {
   }
 
   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={object.view.target}
@@ -108,70 +116,111 @@ const StorybookKanban = () => {
             console.log('[ViewEditor]', 'onDelete', fieldId);
           }}
         />
-        <SyntaxHighlighter language='json' className='text-xs'>
-          {JSON.stringify({ view: object.view.target, 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 View.makeFromSpace({
-              client,
-              space,
-              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, 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,36 +2,38 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, 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 { 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 { 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 { StackItem } from '@dxos/react-ui-stack';
+import { Layout } from '@dxos/react-ui-mosaic';
 import { getTypenameFromQuery } from '@dxos/schema';
 
-import { KanbanAction } from '../types';
+import { KanbanOperation } from '../types';
 
-export const KanbanContainer = ({ object }: { object: Kanban.Kanban; role: string }) => {
-  const client = useClient();
-  const [cardSchema, setCardSchema] = useState<TypedObject<any, any>>();
-  const space = getSpace(object);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+export type KanbanContainerProps = SurfaceComponentProps<Kanban.Kanban>;
+
+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;
@@ -43,12 +45,12 @@ export const KanbanContainer = ({ object }: { object: Kanban.Kanban; role: strin
       );
       return unsubscribe;
     }
-  }, [typename, space]);
+  }, [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);
+  const projection = useProjectionModel(cardSchema, object, registry);
   const model = useKanbanModel({
     object,
     projection,
@@ -58,25 +60,25 @@ export const KanbanContainer = ({ object }: { object: Kanban.Kanban; role: strin
   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>
+    <Layout.Main role={role}>
       {model && <KanbanComponent model={model} onAddCard={handleAddCard} onRemoveCard={handleRemoveCard} />}
-    </StackItem.Content>
+    </Layout.Main>
   );
 };

package/src/components/KanbanViewEditor.tsx

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+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 { useClient } from '@dxos/react-client';
-import { getSpace, useSchema } from '@dxos/react-client/echo';
-import { type CustomInputMap, Form, SelectInput } from '@dxos/react-ui-form';
+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';
@@ -18,12 +19,12 @@ import { SettingsSchema } from '../types';
 type KanbanViewEditorProps = { object: Kanban.Kanban };
 
 export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
-  const client = useClient();
-  const space = getSpace(object);
+  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(client, space, currentTypename);
-  const projection = useProjectionModel(schema, object);
+  const schema = useSchema(db, currentTypename);
+  const projection = useProjectionModel(schema, object, registry);
 
   const fieldProjections = projection?.getFieldProjections() || [];
   const selectFields = fieldProjections
@@ -33,7 +34,9 @@ export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
   const handleSave = useCallback(
     (values: Partial<{ columnFieldId: string }>) => {
       invariant(view);
-      view.projection.pivotFieldId = values.columnFieldId;
+      Obj.change(view, (v) => {
+        v.projection.pivotFieldId = values.columnFieldId;
+      });
     },
     [view],
   );
@@ -42,20 +45,15 @@ export const KanbanViewEditor = ({ object }: KanbanViewEditorProps) => {
     () => ({ 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={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`

package/src/types/schema.ts

@@ -4,9 +4,9 @@
 
 import * as Schema from 'effect/Schema';
 
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/operation';
 import { TypeInputOptionsAnnotation } from '@dxos/plugin-space/types';
-import { SpaceSchema } from '@dxos/react-client/echo';
-import { Kanban } from '@dxos/react-ui-kanban/types';
 import { FieldSchema, View } from '@dxos/schema';
 
 import { meta } from '../meta';
@@ -25,7 +25,7 @@ export const PivotColumnAnnotationId = Symbol.for('@dxos/plugin-kanban/annotatio
 
 export const SettingsSchema = Schema.Struct({
   columnFieldId: Schema.String.annotations({
-    title: 'Column field identifier',
+    title: 'Column field',
   }),
 });
 
@@ -49,38 +49,72 @@ export const CreateKanbanSchema = Schema.Struct({
   ),
 });
 
-export namespace KanbanAction {
-  const KANBAN_ACTION = `${meta.id}/action`;
+const KANBAN_OPERATION = `${meta.id}/operation`;
 
-  export class Create extends Schema.TaggedClass<Create>()(`${KANBAN_ACTION}/create`, {
-    input: Schema.extend(Schema.Struct({ space: SpaceSchema }), CreateKanbanSchema),
-    output: Schema.Struct({
-      object: Kanban.Kanban,
-    }),
-  }) {}
-
-  export class DeleteCardField extends Schema.TaggedClass<DeleteCardField>()(`${KANBAN_ACTION}/delete-card-field`, {
-    input: Schema.Struct({
-      view: View.View,
-      fieldId: Schema.String,
-      // TODO(wittjosiah): Separate fields for undo data?
-      deletionData: Schema.optional(
-        Schema.Struct({
-          field: FieldSchema,
-          // TODO(wittjosiah): This creates a type error.
-          // props: PropertySchema,
-          props: Schema.Any,
-          index: Schema.Number,
-        }),
-      ),
-    }),
-    output: Schema.Void,
-  }) {}
+export namespace KanbanOperation {
+  export const DeleteCardFieldOutput = Schema.Struct({
+    field: FieldSchema.annotations({ description: 'The deleted field schema.' }),
+    props: Schema.Any.annotations({ description: 'The deleted field properties.' }),
+    index: Schema.Number.annotations({ description: 'The index the field was at.' }),
+  });
 
-  export class DeleteCard extends Schema.TaggedClass<DeleteCard>()(`${KANBAN_ACTION}/delete-card`, {
-    input: Schema.Struct({
-      card: Schema.Any, // The card object to delete
-    }),
-    output: Schema.Void,
-  }) {}
+  export type DeleteCardFieldOutput = Schema.Schema.Type<typeof DeleteCardFieldOutput>;
+
+  export const DeleteCardField = Operation.make({
+    meta: { key: `${KANBAN_OPERATION}/delete-card-field`, name: 'Delete Card Field' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        view: View.View,
+        fieldId: Schema.String,
+      }),
+      output: DeleteCardFieldOutput,
+    },
+  });
+
+  export const DeleteCardOutput = Schema.Struct({
+    card: Schema.Any.annotations({ description: 'The deleted card.' }),
+  });
+
+  export type DeleteCardOutput = Schema.Schema.Type<typeof DeleteCardOutput>;
+
+  export const DeleteCard = Operation.make({
+    meta: { key: `${KANBAN_OPERATION}/delete-card`, name: 'Delete Card' },
+    schema: {
+      input: Schema.Struct({
+        card: Schema.Any,
+      }),
+      output: DeleteCardOutput,
+    },
+  });
+
+  /**
+   * Restore a deleted card field (inverse of DeleteCardField).
+   */
+  export const RestoreCardField = Operation.make({
+    meta: { key: `${KANBAN_OPERATION}/restore-card-field`, name: 'Restore Card Field' },
+    services: [Capability.Service],
+    schema: {
+      input: Schema.Struct({
+        view: View.View.annotations({ description: 'The view to restore the field to.' }),
+        field: FieldSchema.annotations({ description: 'The field schema to restore.' }),
+        props: Schema.Any.annotations({ description: 'The field properties to restore.' }),
+        index: Schema.Number.annotations({ description: 'The index to restore the field at.' }),
+      }),
+      output: Schema.Void,
+    },
+  });
+
+  /**
+   * Restore a deleted card (inverse of DeleteCard).
+   */
+  export const RestoreCard = Operation.make({
+    meta: { key: `${KANBAN_OPERATION}/restore-card`, name: 'Restore Card' },
+    schema: {
+      input: Schema.Struct({
+        card: Schema.Any.annotations({ description: 'The card to restore.' }),
+      }),
+      output: Schema.Void,
+    },
+  });
 }