@dxos/plugin-kanban 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,7 +20,13 @@
     "#hooks": "./src/hooks/index.ts",
     "#meta": "./src/meta.ts",
     "#operations": "./src/operations/index.ts",
+    "#plugin": {
+      "browser": "./src/KanbanPlugin.tsx",
+      "node": "./src/KanbanPlugin.node.ts",
+      "default": "./src/KanbanPlugin.tsx"
+    },
     "#testing": "./src/testing/index.ts",
+    "#translations": "./src/translations.ts",
     "#types": "./src/types/index.ts"
   },
   "exports": {
@@ -42,6 +48,12 @@
       "node": "./dist/lib/node-esm/operations/index.mjs",
       "types": "./dist/types/src/operations/index.d.ts"
     },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -50,16 +62,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "blueprints": [
-        "dist/types/src/blueprints/index.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -68,56 +70,54 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-context": "1.1.1",
     "effect": "3.20.0",
-    "@dxos/ai": "0.8.4-main.9be5663bfe",
-    "@dxos/async": "0.8.4-main.9be5663bfe",
-    "@dxos/blueprints": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/echo-atom": "0.8.4-main.9be5663bfe",
-    "@dxos/app-framework": "0.8.4-main.9be5663bfe",
-    "@dxos/effect": "0.8.4-main.9be5663bfe",
-    "@dxos/functions": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
-    "@dxos/assistant": "0.8.4-main.9be5663bfe",
-    "@dxos/operation": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-space": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-client": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-search": "0.8.4-main.9be5663bfe",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-form": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/schema": "0.8.4-main.9be5663bfe",
-    "@dxos/types": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe"
+    "@dxos/ai": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/async": "0.8.4-main.abd8ff62ef",
+    "@dxos/compute": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-toolkit": "0.8.4-main.abd8ff62ef",
+    "@dxos/assistant": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo-atom": "0.8.4-main.abd8ff62ef",
+    "@dxos/effect": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-search": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-space": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-form": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-stack": "0.8.4-main.abd8ff62ef",
+    "@dxos/schema": "0.8.4-main.abd8ff62ef",
+    "@dxos/types": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/echo-db": "0.8.4-main.9be5663bfe",
-    "@dxos/keys": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-preview": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-testing": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/test-utils": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/echo-db": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-testing": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-preview": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/keys": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef",
+    "@dxos/test-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/KanbanPlugin.node.ts

@@ -0,0 +1,55 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { Annotation, Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+import { type CreateObject } from '@dxos/plugin-space/types';
+import { ViewModel } from '@dxos/schema';
+
+import { BlueprintDefinition, OperationHandler, UndoMappings } from '#capabilities';
+import { meta } from '#meta';
+import { CreateKanbanSchema, Kanban } from '#types';
+
+export const KanbanPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addMetadataModule({
+    metadata: {
+      id: Type.getTypename(Kanban.Kanban),
+      metadata: {
+        icon: Annotation.IconAnnotation.get(Kanban.Kanban).pipe(Option.getOrThrow).icon,
+        iconHue: Annotation.IconAnnotation.get(Kanban.Kanban).pipe(Option.getOrThrow).hue ?? 'white',
+        inputSchema: CreateKanbanSchema,
+        createObject: ((props, options) =>
+          Effect.gen(function* () {
+            const object = yield* Effect.promise(async () => {
+              const { view } = await ViewModel.makeFromDatabase({
+                db: options.db,
+                typename: props.typename,
+                pivotFieldName: props.initialPivotColumn,
+              });
+              return Kanban.make({ name: props.name, view });
+            });
+            return yield* Operation.invoke(SpaceOperation.AddObject, {
+              object,
+              target: options.target,
+              hidden: true,
+              targetNodeId: options.targetNodeId,
+            });
+          })) satisfies CreateObject,
+      },
+    },
+  }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addUndoMappingsModule({ activate: UndoMappings }),
+  AppPlugin.addSchemaModule({ schema: [Kanban.Kanban] }),
+  Plugin.make,
+);
+
+export default KanbanPlugin;

package/src/KanbanPlugin.test.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { KanbanPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('KanbanPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [KanbanPlugin()],
+    });
+
+    // After autoStart: OperationHandler and UndoMappings auto-cascade from OperationPlugin.
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('OperationHandler'), moduleId('UndoMappings')]),
+    );
+
+    // BlueprintDefinition fires when AssistantPlugin loads blueprint definitions.
+    await harness.fire(AppActivationEvents.SetupArtifactDefinition);
+    expect(harness.manager.getActive()).toContain(moduleId('BlueprintDefinition'));
+  });
+});

package/src/KanbanPlugin.tsx

@@ -7,18 +7,18 @@ import * as Option from 'effect/Option';
 
 import { Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { Annotation, Type } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
+import { ClientEvents } from '@dxos/plugin-client/types';
 import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { type CreateObject } from '@dxos/plugin-space/types';
 import { ViewModel } from '@dxos/schema';
 
-import { BlueprintDefinition, OperationHandler, UndoMappings, ReactSurface } from '#capabilities';
+import { BlueprintDefinition, Migrations, OperationHandler, UndoMappings, ReactSurface } from '#capabilities';
 import { meta } from '#meta';
+import { translations } from '#translations';
 import { CreateKanbanSchema, Kanban } from '#types';
 
-import { translations } from './translations';
-
 export const KanbanPlugin = Plugin.define(meta).pipe(
   AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
   AppPlugin.addMetadataModule({
@@ -49,9 +49,15 @@ export const KanbanPlugin = Plugin.define(meta).pipe(
     },
   }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
-  AppPlugin.addOperationHandlerModule({ id: 'undo-mappings', activate: UndoMappings }),
+  AppPlugin.addUndoMappingsModule({ activate: UndoMappings }),
   AppPlugin.addSchemaModule({ schema: [Kanban.Kanban] }),
   AppPlugin.addSurfaceModule({ activate: ReactSurface }),
   AppPlugin.addTranslationsModule({ translations }),
+  Plugin.addModule({
+    activatesOn: ClientEvents.SetupMigration,
+    activate: Migrations,
+  }),
   Plugin.make,
 );
+
+export default KanbanPlugin;

package/src/blueprints/kanban-blueprint.ts

@@ -2,8 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AppCapabilities } from '@dxos/app-toolkit';
-import { Blueprint, Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/compute';
 import { trim } from '@dxos/util';
 
 const BLUEPRINT_KEY = 'org.dxos.blueprint.kanban';
@@ -20,7 +19,7 @@ const make = () =>
     }),
   });
 
-const blueprint: AppCapabilities.BlueprintDefinition = {
+const blueprint: Blueprint.Definition = {
   key: BLUEPRINT_KEY,
   make,
 };

package/src/capabilities/artifact-definition.ts

@@ -11,7 +11,7 @@ import * as Schema from 'effect/Schema';
 import { ToolResult, createTool } from '@dxos/ai';
 import { Capabilities, Capability, type PromiseIntentDispatcher } from '@dxos/app-framework';
 import { createArtifactElement } from '@dxos/assistant';
-import { defineArtifact } from '@dxos/blueprints';
+import { defineArtifact } from '@dxos/compute';
 import { Obj, Query } from '@dxos/echo';
 import { View } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';

package/src/capabilities/blueprint-definition.ts

@@ -6,6 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint } from '@dxos/compute';
 
 import { KanbanBlueprint } from '#blueprints';
 

package/src/capabilities/index.ts

@@ -3,9 +3,11 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
 
 export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const Migrations = Capability.lazy('Migrations', () => import('./migrations'));
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
   'OperationHandler',
   () => import('./operation-handler'),

package/src/capabilities/migrations.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { defineObjectMigration } from '@dxos/client/echo';
+import { ClientCapabilities } from '@dxos/plugin-client/types';
+
+import { Kanban } from '#types';
+
+/**
+ * v0.1.0 → v0.2.0: nests the existing `view` ref under a `spec: { kind: 'view', view }`
+ * discriminated union. v0.2.0 introduced an items-variant for externally-synced kanbans;
+ * pre-migration objects were all view-based by construction.
+ */
+const migrations = [
+  defineObjectMigration({
+    from: Kanban.KanbanV1,
+    to: Kanban.Kanban,
+    transform: async (from) => ({
+      name: from.name,
+      arrangement: from.arrangement,
+      spec: { kind: 'view' as const, view: from.view },
+    }),
+    onMigration: async () => {},
+  }),
+];
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(ClientCapabilities.Migration, migrations);
+  }),
+);

package/src/capabilities/operation-handler.ts

@@ -3,7 +3,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 import { KanbanOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -4,6 +4,7 @@
 
 import * as Effect from 'effect/Effect';
 import type * as Schema from 'effect/Schema';
+import * as SchemaAST from 'effect/SchemaAST';
 import React, { useMemo } from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
@@ -14,7 +15,7 @@ import { type Collection } from '@dxos/echo';
 import { findAnnotation } from '@dxos/effect';
 import { type FormFieldComponentProps, SelectField, useFormValues } from '@dxos/react-ui-form';
 
-import { KanbanContainer, KanbanViewEditor } from '#containers';
+import { KanbanContainer, KanbanSettings } from '#containers';
 import { Kanban, PivotColumnAnnotationId } from '#types';
 
 export default Capability.makeModule(() =>
@@ -23,16 +24,17 @@ export default Capability.makeModule(() =>
       Surface.create({
         id: 'root',
         // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
-        role: ['article', 'section'],
-        filter: AppSurface.objectArticle(Kanban.Kanban),
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Kanban.Kanban),
+          AppSurface.object(AppSurface.Section, Kanban.Kanban),
+        ),
         component: ({ data, role }) => <KanbanContainer role={role} subject={data.subject} />,
       }),
       Surface.create({
         id: 'object-properties',
-        role: 'object-properties',
         position: 'hoist',
-        filter: AppSurface.objectProperties(Kanban.Kanban),
-        component: ({ data }) => <KanbanViewEditor subject={data.subject} />,
+        filter: AppSurface.object(AppSurface.ObjectProperties, Kanban.Kanban),
+        component: ({ data }) => <KanbanSettings subject={data.subject} />,
       }),
       Surface.create({
         id: 'create-initial-schema-form-[pivot-column]',
@@ -43,12 +45,18 @@ export default Capability.makeModule(() =>
           prop: string;
           schema: Schema.Schema<any>;
           target: Database.Database | Collection.Collection | undefined;
+          fieldPropertyAst?: SchemaAST.AST;
         } => {
           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;
+        component: ({ data: { target, fieldPropertyAst }, ...inputProps }) => {
+          const ast = fieldPropertyAst;
+          if (!ast) {
+            return null;
+          }
+
+          const props = { ...inputProps, type: ast } as any as FormFieldComponentProps;
           const db = Database.isDatabase(target) ? target : target && Obj.getDatabase(target);
           if (!db) {
             return null;

package/src/components/KanbanBoard/KanbanBoard.stories.tsx

@@ -17,9 +17,9 @@ import { Organization } from '@dxos/types';
 
 import { createEchoChangeCallback as createKanbanChangeCallback } from '#hooks';
 import { KanbanCardTileSimple } from '#testing';
+import { translations } from '#translations';
 import { Kanban } from '#types';
 
-import { translations } from '../../translations';
 import { KanbanBoard } from './KanbanBoard';
 
 random.seed(1);
@@ -79,7 +79,9 @@ const DefaultStory = () => {
 
   const handleCardAdd = useCallback(
     (columnValue: string | undefined) => {
-      if (!state || !columnFieldPath || !registry) return undefined;
+      if (!state || !columnFieldPath || !registry) {
+        return undefined;
+      }
       const card = Obj.make(Organization.Organization, {
         ...createOrg(),
         ...(columnFieldPath ? { [columnFieldPath]: columnValue } : {}),
@@ -93,7 +95,9 @@ const DefaultStory = () => {
 
   const handleCardRemove = useCallback(
     (card: Obj.Unknown) => {
-      if (!registry) return;
+      if (!registry) {
+        return;
+      }
       const current = registry.get(items) ?? [];
       registry.set(
         items,

package/src/components/KanbanBoard/KanbanBoard.tsx

@@ -94,15 +94,20 @@ export const KanbanBoardRoot = ({
   const { t } = useTranslation(meta.id);
   const model = useKanbanBoardModel(kanban, projection, items, registry);
   const columns = model?.getColumns?.() ?? [];
-  const view = kanban?.view?.target;
+  const view = kanban?.spec.kind === 'view' ? kanban.spec.view.target : undefined;
   const pivotFieldId = view?.projection?.pivotFieldId;
   const columnFieldPath = useMemo(() => {
+    // Items-variant kanbans use the property name itself as the pivot field
+    // (no view/projection translation layer).
+    if (kanban?.spec.kind === 'items') {
+      return kanban.spec.pivotField;
+    }
     if (pivotFieldId === undefined || !projection) {
       return undefined;
     }
 
     return projection.tryGetFieldProjection(pivotFieldId)?.props.property;
-  }, [projection, pivotFieldId]);
+  }, [kanban?.spec, projection, pivotFieldId]);
 
   const getPivotAttributes = useCallback<KanbanBoardContextValue['getPivotAttributes']>(
     (columnValue) => {

package/src/components/KanbanBoard/KanbanCard.tsx

@@ -5,7 +5,7 @@
 import React, { forwardRef, useCallback, useMemo, useState } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
-import { useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { Card, Toolbar, useTranslation } from '@dxos/react-ui';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
@@ -26,7 +26,7 @@ export type KanbanCardProps = Pick<MosaicTileProps<Obj.Unknown>, 'location' | 'd
 export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(({ data, location, debug }, forwardedRef) => {
   const { t } = useTranslation(meta.id);
   const { model } = useBoard(KANBAN_CARD_TILE_NAME);
-  const { projection, onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_NAME);
+  const { projection, columnFieldPath, onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_NAME);
   const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
   const dragHandleRef = useCallback((el: HTMLButtonElement | null) => setDragHandle(el), []);
 
@@ -74,7 +74,19 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(({ data, l
               <Menu.Content items={menuItems} />
             </Card.Toolbar>
             <Card.Content>
-              {projection && <Surface.Surface role='card--content' limit={1} data={{ subject: data, projection }} />}
+              {projection && (
+                <Surface.Surface
+                  type={AppSurface.Card}
+                  limit={1}
+                  data={{
+                    subject: data,
+                    projection,
+                    // Hide the pivot field: its value is already conveyed by
+                    // which column the card sits in.
+                    ignorePaths: columnFieldPath ? [columnFieldPath] : undefined,
+                  }}
+                />
+              )}
             </Card.Content>
           </Card.Root>
         </Focus.Item>

package/src/components/KanbanBoard/KanbanColumn.tsx

@@ -56,11 +56,13 @@ export const KanbanColumn = forwardRef<HTMLDivElement, KanbanColumnProps>(
           eventHandler={eventHandler}
           Tile={itemTile as FC<MosaicTileProps<Obj.Unknown>>}
         />
-        {onCardAdd && (
-          <Board.Column.Footer
-            onAdd={() => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? undefined : column.columnValue)}
-          />
-        )}
+        <Board.Column.Footer
+          onAdd={
+            onCardAdd
+              ? () => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? undefined : column.columnValue)
+              : undefined
+          }
+        />
       </Board.Column.Root>
     );
   },

package/src/containers/KanbanContainer/KanbanContainer.stories.tsx

@@ -10,6 +10,7 @@ import { expect, waitFor, within } from 'storybook/test';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj, type QueryAST, Type } from '@dxos/echo';
 import { View } from '@dxos/echo';
 import { type Mutable } from '@dxos/echo/internal';
@@ -22,17 +23,17 @@ import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
 import { Filter, type Space, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
 import { ViewEditor } from '@dxos/react-ui-form';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout } from '@dxos/react-ui/testing';
 import { ViewModel, getTypenameFromQuery } from '@dxos/schema';
 // TODO(wittjosiah): Replace with echo/testing.
 import { Organization, Person } from '@dxos/types';
 
 import { useProjectionModel } from '#hooks';
+import { translations } from '#translations';
 import { Kanban } from '#types';
 
 import { KanbanPlugin } from '../../KanbanPlugin';
-import { translations } from '../../translations';
 
 random.seed(0);
 
@@ -87,24 +88,26 @@ const DefaultComponent = () => {
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
   const [kanban] = useQuery(space?.db, Filter.type(Kanban.Kanban));
-  const typename = kanban?.view.target?.query ? getTypenameFromQuery(kanban.view.target.query.ast) : undefined;
+  const viewRef = kanban && kanban.spec.kind === 'view' ? kanban.spec.view : undefined;
+  const view = viewRef?.target;
+  const typename = view?.query ? getTypenameFromQuery(view.query.ast) : undefined;
   const schema = useSchema(space?.db, typename);
   const projection = useProjectionModel(schema, kanban, registry);
 
-  const data = useMemo(() => (kanban ? { subject: kanban, attendableId: 'story' } : {}), [kanban]);
+  const data = useMemo(() => (kanban ? { subject: kanban, attendableId: 'story' } : undefined), [kanban]);
 
   const handleUpdateQuery = useCallback(
     (newQuery: QueryAST.Query) => {
       invariant(schema);
-      invariant(kanban?.view.target);
+      invariant(view);
       if (Type.isMutable(schema)) {
         schema.updateTypename(getTypenameFromQuery(newQuery));
       }
-      Obj.change(kanban.view.target, (view) => {
+      Obj.update(view, (view) => {
         view.query.ast = newQuery as Mutable<QueryAST.Query>;
       });
     },
-    [kanban, schema],
+    [view, schema],
   );
 
   const handleDeleteField = useCallback(
@@ -116,27 +119,29 @@ const DefaultComponent = () => {
     [schema, projection],
   );
 
-  if (!schema || !kanban?.view.target) {
+  if (!schema || !view) {
     return null;
   }
 
   return (
     <div className='grow grid grid-cols-[1fr_350px] overflow-hidden h-full w-full'>
-      <Surface.Surface role='article' data={data} limit={1} />
+      <Surface.Surface type={AppSurface.Article} data={data} limit={1} />
       <div className='flex flex-col h-full overflow-hidden border-l border-separator'>
         <ViewEditor
           registry={space?.db.schemaRegistry}
           schema={schema}
-          view={kanban.view.target}
+          view={view}
           onQueryChanged={handleUpdateQuery}
           onDelete={schema && Type.isMutable(schema) ? handleDeleteField : undefined}
         />
-        <Json.Root data={{ view: kanban.view.target, schema }}>
-          <Json.Content>
-            <Json.Filter />
-            <Json.Data classNames='text-xs' />
-          </Json.Content>
-        </Json.Root>
+        <Syntax.Root data={{ view, schema }}>
+          <Syntax.Content>
+            <Syntax.Filter />
+            <Syntax.Viewport>
+              <Syntax.Code classNames='text-xs' />
+            </Syntax.Viewport>
+          </Syntax.Content>
+        </Syntax.Root>
       </div>
     </div>
   );