@dxos/plugin-kanban 0.9.1-staging.ee54ba693a → 0.11.0

package/dx.config.ts

@@ -32,5 +32,6 @@ export default Config2.make({
     icon: { key: 'ph--kanban--regular', hue: 'green' },
     spec: 'PLUGIN.mdl',
     screenshots: [{ dark: 'https://dxos.network/plugin-details-kanban-dark.png' }],
+    tags: ['beta'],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-kanban",
-  "version": "0.9.1-staging.ee54ba693a",
+  "version": "0.11.0",
   "description": "Kanban DXOS Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,37 +16,41 @@
     "#skills": {
       "source": "./src/skills/index.ts",
       "types": "./dist/types/src/skills/index.d.ts",
-      "default": "./dist/lib/neutral/skills/index.mjs"
+      "default": "./dist/lib/skills.mjs"
     },
     "#capabilities": {
-      "source": "./src/capabilities/index.ts",
+      "source": {
+        "node": "./src/capabilities/node.ts",
+        "default": "./src/capabilities/index.ts"
+      },
       "types": "./dist/types/src/capabilities/index.d.ts",
-      "default": "./dist/lib/neutral/capabilities/index.mjs"
+      "node": "./dist/lib/capabilities/node.mjs",
+      "default": "./dist/lib/capabilities.mjs"
     },
     "#components": {
       "source": "./src/components/index.ts",
       "types": "./dist/types/src/components/index.d.ts",
-      "default": "./dist/lib/neutral/components/index.mjs"
+      "default": "./dist/lib/components.mjs"
     },
     "#containers": {
       "source": "./src/containers/index.ts",
       "types": "./dist/types/src/containers/index.d.ts",
-      "default": "./dist/lib/neutral/containers/index.mjs"
+      "default": "./dist/lib/containers.mjs"
     },
     "#hooks": {
       "source": "./src/hooks/index.ts",
       "types": "./dist/types/src/hooks/index.d.ts",
-      "default": "./dist/lib/neutral/hooks/index.mjs"
+      "default": "./dist/lib/hooks.mjs"
     },
     "#meta": {
       "source": "./src/meta.ts",
       "types": "./dist/types/src/meta.d.ts",
-      "default": "./dist/lib/neutral/meta.mjs"
+      "default": "./dist/lib/meta.mjs"
     },
     "#operations": {
       "source": "./src/operations/index.ts",
       "types": "./dist/types/src/operations/index.d.ts",
-      "default": "./dist/lib/neutral/operations/index.mjs"
+      "default": "./dist/lib/operations.mjs"
     },
     "#plugin": {
       "source": {
@@ -55,48 +59,48 @@
         "default": "./src/KanbanPlugin.tsx"
       },
       "types": "./dist/types/src/KanbanPlugin.d.ts",
-      "workerd": "./dist/lib/neutral/KanbanPlugin.workerd.mjs",
-      "node": "./dist/lib/neutral/KanbanPlugin.node.mjs",
-      "default": "./dist/lib/neutral/KanbanPlugin.mjs"
+      "workerd": "./dist/lib/KanbanPlugin.workerd.mjs",
+      "node": "./dist/lib/KanbanPlugin.node.mjs",
+      "default": "./dist/lib/KanbanPlugin.mjs"
     },
     "#testing": "./src/testing/index.ts",
     "#translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "default": "./dist/lib/translations.mjs"
     },
     "#types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "default": "./dist/lib/types.mjs"
     }
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "default": "./dist/lib/neutral/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
     "./skills": {
       "source": "./src/skills/index.ts",
       "types": "./dist/types/src/skills/index.d.ts",
-      "default": "./dist/lib/neutral/skills/index.mjs"
+      "import": "./dist/lib/skills.mjs"
     },
     "./plugin": {
       "source": "./src/plugin.ts",
       "types": "./dist/types/src/plugin.d.ts",
-      "default": "./dist/lib/neutral/plugin.mjs"
+      "import": "./dist/lib/plugin.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "import": "./dist/lib/types.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -107,52 +111,55 @@
     "PLUGIN.mdl"
   ],
   "dependencies": {
+    "@effect-atom/atom": "^0.5.3",
     "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-context": "1.1.1",
     "effect": "3.21.4",
-    "@dxos/ai": "0.9.1-staging.ee54ba693a",
-    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
-    "@dxos/assistant": "0.9.1-staging.ee54ba693a",
-    "@dxos/compute": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo": "0.9.1-staging.ee54ba693a",
-    "@dxos/effect": "0.9.1-staging.ee54ba693a",
-    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
-    "@dxos/log": "0.9.1-staging.ee54ba693a",
-    "@dxos/random": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-form": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-space": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-mosaic": "0.9.1-staging.ee54ba693a",
-    "@dxos/schema": "0.9.1-staging.ee54ba693a",
-    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
-    "@dxos/types": "0.9.1-staging.ee54ba693a",
-    "@dxos/util": "0.9.1-staging.ee54ba693a"
+    "@dxos/ai": "0.11.0",
+    "@dxos/app-framework": "0.11.0",
+    "@dxos/app-toolkit": "0.11.0",
+    "@dxos/assistant": "0.11.0",
+    "@dxos/compute": "0.11.0",
+    "@dxos/echo": "0.11.0",
+    "@dxos/echo-react": "0.11.0",
+    "@dxos/effect": "0.11.0",
+    "@dxos/invariant": "0.11.0",
+    "@dxos/log": "0.11.0",
+    "@dxos/plugin-client": "0.11.0",
+    "@dxos/plugin-space": "0.11.0",
+    "@dxos/random": "0.11.0",
+    "@dxos/react-client": "0.11.0",
+    "@dxos/react-ui": "0.11.0",
+    "@dxos/react-ui-dnd": "0.11.0",
+    "@dxos/react-ui-form": "0.11.0",
+    "@dxos/react-ui-menu": "0.11.0",
+    "@dxos/react-ui-mosaic": "0.11.0",
+    "@dxos/schema": "0.11.0",
+    "@dxos/types": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/keys": "0.9.1-staging.ee54ba693a",
-    "@dxos/echo-client": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-preview": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a",
-    "@dxos/plugin-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-staging.ee54ba693a",
-    "@dxos/test-utils": "0.9.1-staging.ee54ba693a",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a"
+    "vite": "^8.1.4",
+    "@dxos/echo-client": "0.11.0",
+    "@dxos/keys": "0.11.0",
+    "@dxos/plugin-preview": "0.11.0",
+    "@dxos/plugin-testing": "0.11.0",
+    "@dxos/plugin-theme": "0.11.0",
+    "@dxos/react-ui-syntax-highlighter": "0.11.0",
+    "@dxos/storybook-utils": "0.11.0",
+    "@dxos/test-utils": "0.11.0",
+    "@dxos/ui-theme": "0.11.0"
   },
   "peerDependencies": {
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
-    "@dxos/react-ui": "0.9.1-staging.ee54ba693a"
+    "@dxos/react-ui": "^0.11.0",
+    "@dxos/ui-theme": "^0.11.0"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/PivotColumnField.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Surface } from '@dxos/app-framework/ui';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { Database, Obj, Type } from '@dxos/echo';
+import { type FormFieldRendererProps, SelectField, useFormValues } from '@dxos/react-ui-form';
+
+/** The form renderer's own props ride alongside `data` on the surface envelope; `type` comes from the field AST. */
+export type PivotColumnFieldProps = Surface.ComponentProps<AppSurface.FormInputData> &
+  Omit<FormFieldRendererProps, 'type'>;
+
+/**
+ * Form field offering the single-select properties of the form's currently chosen typename as the
+ * kanban's pivot column. It consumes the whole surface envelope, so it takes no `props` mapper.
+ */
+export const PivotColumnField = ({ data, ...inputProps }: PivotColumnFieldProps) => {
+  const ast = data.fieldPropertyAst;
+  const target = data.target;
+  const db = Database.isDatabase(target) ? target : Obj.isObject(target) ? Obj.getDatabase(target) : undefined;
+  const { typename } = useFormValues('KanbanForm');
+  const [selectedSchema] = useMemo(
+    () =>
+      db
+        ? db.graph.registry
+            .list()
+            .filter(Type.isType)
+            .filter((type) => Type.getTypename(type) === typename)
+        : [],
+    [db, typename],
+  );
+  const singleSelectColumns = useMemo(() => {
+    const properties = selectedSchema?.jsonSchema.properties;
+    if (!properties) {
+      return [];
+    }
+
+    return Object.entries(properties).reduce<string[]>((acc, [key, value]) => {
+      if (typeof value === 'object' && value !== null && (value as { format?: string }).format === 'single-select') {
+        acc.push(key);
+      }
+      return acc;
+    }, []);
+  }, [selectedSchema]);
+
+  if (!ast || !db || !typename) {
+    return null;
+  }
+
+  const props: FormFieldRendererProps = { ...inputProps, type: ast };
+
+  return <SelectField {...props} options={singleSelectColumns.map((column) => ({ value: column }))} />;
+};

package/src/capabilities/node.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+// The capabilities `KanbanPlugin.node` activates, and only those. `Capability.lazy` defers the
+// import at runtime but a bundler still walks it, so listing the React surfaces here would pull
+// the plugin's components into every node and bun build.
+
+export const SkillDefinition = Capability.lazy('SkillDefinition', () => import('./skill-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const UndoMappings = Capability.lazy('UndoMappings', () => import('./undo-mappings'));

package/src/capabilities/react-surface.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { SchemaEx } from '@dxos/effect';
+import { Position } from '@dxos/util';
+
+import { KanbanArticle, KanbanProperties } from '#containers';
+import { Kanban, PivotColumnAnnotationId } from '#types';
+
+import { PivotColumnField } from './PivotColumnField';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'root',
+        // TODO(wittjosiah): Split into multiple surfaces if this filter proves too strict for non-article roles.
+        filter: AppSurface.oneOf(
+          AppSurface.object(AppSurface.Article, Kanban.Kanban),
+          AppSurface.object(AppSurface.Section, Kanban.Kanban),
+        ),
+        component: KanbanArticle,
+        props: ({ role, data: { subject } }) => ({ role, subject }),
+      }),
+      Surface.create({
+        id: 'objectProperties',
+        position: Position.first,
+        filter: AppSurface.object(AppSurface.ObjectProperties, Kanban.Kanban),
+        component: KanbanProperties,
+        props: ({ data: { subject } }) => ({ subject }),
+      }),
+      Surface.create({
+        id: 'createInitialSchemaForm',
+        filter: AppSurface.formInputBySchema((ast) => !!SchemaEx.findAnnotation<boolean>(ast, PivotColumnAnnotationId)),
+        component: PivotColumnField,
+      }),
+    ]),
+  ),
+);

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

@@ -10,7 +10,7 @@ import { Filter, JsonSchema, Obj, Query, type View } from '@dxos/echo';
 import { random } from '@dxos/random';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
-import { ProjectionModel, ViewModel, createEchoChangeCallback } from '@dxos/schema';
+import { ProjectionModel, ViewModel, createDirectChangeCallback, createEchoChangeCallback } from '@dxos/schema';
 import { withRegistry } from '@dxos/storybook-utils';
 import { Organization } from '@dxos/types';
 
@@ -46,9 +46,14 @@ const DefaultStory = () => {
   }>();
 
   useEffect(() => {
+    // Single mutable schema shared by the view, the projection base, and the change callback so
+    // schema mutations (e.g. reordering pivot-field options during a column drag) persist and read
+    // back. `createDirectChangeCallback` mutates it in place — the ECHO callback would throw
+    // "Schema is not mutable" for these non-ECHO, in-memory story objects.
+    const jsonSchema = JsonSchema.toJsonSchema(Organization.Organization);
     const view = ViewModel.make({
       query: Query.select(Filter.type(Organization.Organization)),
-      jsonSchema: JsonSchema.toJsonSchema(Organization.Organization),
+      jsonSchema,
       pivotFieldName: 'status',
     });
     const kanban = Kanban.make({ view });
@@ -56,8 +61,14 @@ const DefaultStory = () => {
     const projection = new ProjectionModel({
       registry,
       view,
-      baseSchema: JsonSchema.toJsonSchema(Organization.Organization),
-      change: createEchoChangeCallback(view),
+      baseSchema: jsonSchema,
+      // Hybrid change callback: the view is reactive (nested in the Kanban object) so its
+      // projection must be mutated via Obj.update, but the plain in-memory jsonSchema is
+      // mutated directly. Neither factory alone fits, so compose the correct mutator from each.
+      change: {
+        projection: createEchoChangeCallback(view).projection,
+        schema: createDirectChangeCallback(view.projection, jsonSchema).schema,
+      },
     });
     projection.normalizeView();
 

package/src/components/KanbanBoard/KanbanBoard.tsx

@@ -139,7 +139,6 @@ export const KanbanBoardContent = composable<HTMLDivElement, KanbanBoardContentP
     <Board.Content
       {...composableProps(props)}
       ref={forwardedRef}
-      id={kanbanId}
       eventHandler={columnEventHandler}
       Tile={KanbanColumn}
     />
@@ -159,6 +158,4 @@ export const KanbanBoard = {
   Card: KanbanCard,
 };
 
-export { useKanbanBoard };
-
 export type { KanbanBoardRootProps as KanbanBoardProps, KanbanCardProps, KanbanColumnProps };

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 { AppSurface, useObjectMenuItems } from '@dxos/app-toolkit/ui';
+import { AppSurface, useCardPivot, useObjectMenuItems } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { Card, IconButton, useTranslation } from '@dxos/react-ui';
 import { Menu, createMenuAction } from '@dxos/react-ui-menu';
@@ -31,7 +31,9 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(
     const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
     const dragHandleRef = useCallback((el: HTMLButtonElement | null) => setDragHandle(el), []);
 
-    const objectMenuItems = useObjectMenuItems(data);
+    // Card.Root already takes the forwarded ref; walk from the header to resolve the origin plank.
+    const [cardRef, pivotId] = useCardPivot();
+    const objectMenuItems = useObjectMenuItems(data, pivotId);
 
     const menuItems = useMemo(
       () => [
@@ -61,7 +63,7 @@ export const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(
         >
           <Focus.Item asChild>
             <Card.Root ref={forwardedRef} data-testid='board-item'>
-              <Card.Header>
+              <Card.Header ref={cardRef}>
                 <Card.DragHandle ref={dragHandleRef} testId='mosaicBoard.cardDragHandle' />
                 <Card.Title data-testid='mosaicBoard.cardTitle'>{Obj.getLabel(data)}</Card.Title>
                 {/* TODO(wittjosiah): Reconcile with Card.Menu. */}

package/src/components/KanbanBoard/index.ts

@@ -2,4 +2,6 @@
 // Copyright 2026 DXOS.org
 //
 
+export { useKanbanBoard } from './context';
+
 export * from './KanbanBoard';

package/src/containers/KanbanArticle/KanbanArticle.stories.tsx

@@ -12,6 +12,7 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Filter, Obj, type QueryAST, Type, View } from '@dxos/echo';
+import { useQuery, useType } from '@dxos/echo-react';
 import { type Mutable } from '@dxos/echo/Obj';
 import { invariant } from '@dxos/invariant';
 // `/plugin` entrypoints used here for the same reason as `corePlugins()` —
@@ -22,7 +23,7 @@ import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { SpacePlugin } from '@dxos/plugin-space/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { type Space, useQuery, useSpaces, useType } from '@dxos/react-client/echo';
+import { type Space, useSpaces } from '@dxos/react-client/echo';
 import { ViewEditor } from '@dxos/react-ui-form';
 import { Syntax } from '@dxos/react-ui-syntax-highlighter';
 import { withLayout } from '@dxos/react-ui/testing';

package/src/containers/KanbanArticle/KanbanArticle.tsx

@@ -9,7 +9,7 @@ import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { type AppSurface, useSchemaFilter } from '@dxos/app-toolkit/ui';
 import { Filter, Obj, Query, type Ref, Type } from '@dxos/echo';
-import { useObject, useType } from '@dxos/react-client/echo';
+import { useObject, useType } from '@dxos/echo-react';
 import { Panel, Toolbar } from '@dxos/react-ui';
 import { getTagFromQuery, getTypeURIFromQuery } from '@dxos/schema';
 
@@ -177,3 +177,5 @@ const ItemsKanbanArticle = ({ role, subject: object }: ItemsKanbanArticleProps)
     </Panel.Root>
   );
 };
+
+KanbanArticle.displayName = 'KanbanArticle';

package/src/containers/KanbanProperties/KanbanProperties.tsx

@@ -7,8 +7,8 @@ import React, { useCallback, useContext, useMemo } from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
+import { useObject, useType } from '@dxos/echo-react';
 import { Format } from '@dxos/echo/Format';
-import { useObject, useType } from '@dxos/react-client/echo';
 import { Form, type FormFieldMap, SelectField } from '@dxos/react-ui-form';
 import { getTypeURIFromQuery } from '@dxos/schema';
 
@@ -99,3 +99,5 @@ export const KanbanProperties = ({ subject: object }: KanbanPropertiesProps) =>
     </Form.Section>
   );
 };
+
+KanbanProperties.displayName = 'KanbanProperties';

package/src/hooks/useItemsProjection.ts

@@ -2,7 +2,7 @@
 // Copyright 2026 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-react';
+import { Atom } from '@effect-atom/atom';
 import { useMemo } from 'react';
 
 import type { ProjectionModel } from '@dxos/schema';

package/src/hooks/useKanbanBoardModel.browser.test.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom, Registry } from '@effect-atom/atom-react';
+import { Atom, Registry } from '@effect-atom/atom';
 import { act, renderHook } from '@testing-library/react';
 import * as Schema from 'effect/Schema';
 import { beforeEach, describe, test } from 'vitest';

package/src/hooks/useKanbanBoardModel.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom, type Registry } from '@effect-atom/atom-react';
+import { Atom, type Registry } from '@effect-atom/atom';
 import { useMemo } from 'react';
 
 import { Obj } from '@dxos/echo';

package/src/hooks/useKanbanColumnEventHandler.ts

@@ -4,7 +4,8 @@
 
 import { useMemo } from 'react';
 
-import type { BoardModel, MosaicEventHandler, MosaicTileData } from '@dxos/react-ui-mosaic';
+import type { DndContainerHandler, DndTileData } from '@dxos/react-ui-dnd';
+import type { BoardModel } from '@dxos/react-ui-mosaic';
 import type { ProjectionModel } from '@dxos/schema';
 import { arrayMove } from '@dxos/util';
 
@@ -19,7 +20,7 @@ import { type BaseKanbanItem, type ColumnStructure, type KanbanChangeCallback, U
  * @param projection - ProjectionModel for pivot field options (column order).
  * @param pivotFieldId - Pivot field id; undefined disables drop.
  * @param change - Callback to persist kanban.arrangement.order.
- * @returns MosaicEventHandler for column tiles.
+ * @returns DndContainerHandler for column tiles.
  */
 export function useKanbanColumnEventHandler<T extends BaseKanbanItem>({
   id,
@@ -33,8 +34,8 @@ export function useKanbanColumnEventHandler<T extends BaseKanbanItem>({
   projection: ProjectionModel | undefined;
   pivotFieldId: string | undefined;
   change: KanbanChangeCallback<T>;
-}): MosaicEventHandler<ColumnStructure> {
-  return useMemo<MosaicEventHandler<ColumnStructure>>(
+}): DndContainerHandler<ColumnStructure> {
+  return useMemo<DndContainerHandler<ColumnStructure>>(
     () => ({
       id,
       canDrop: ({ source }) => {
@@ -46,7 +47,7 @@ export function useKanbanColumnEventHandler<T extends BaseKanbanItem>({
         return (
           model.isColumn(source.data) &&
           columnValue !== UNCATEGORIZED_VALUE &&
-          (source as MosaicTileData<ColumnStructure>).id !== UNCATEGORIZED_VALUE
+          (source as DndTileData<ColumnStructure>).id !== UNCATEGORIZED_VALUE
         );
       },
       onDrop: ({ source, target }) => {

package/src/hooks/useKanbanItemEventHandler.ts

@@ -4,7 +4,8 @@
 
 import { useMemo } from 'react';
 
-import type { BoardModel, MosaicEventHandler, MosaicTileData } from '@dxos/react-ui-mosaic';
+import type { DndContainerHandler, DndTileData } from '@dxos/react-ui-dnd';
+import type { BoardModel } from '@dxos/react-ui-mosaic';
 
 import {
   type ArrangedCards,
@@ -29,7 +30,7 @@ function findColumn<T extends BaseKanbanItem>(
  * @param columnFieldPath - Item property path for the pivot field (used when moving to another column).
  * @param model - Board model for getColumns / getItems.
  * @param change - Callback to persist arrangement and item field updates.
- * @returns MosaicEventHandler for item tiles in this column.
+ * @returns DndContainerHandler for item tiles in this column.
  */
 export function useKanbanItemEventHandler<T extends BaseKanbanItem>({
   column,
@@ -41,8 +42,8 @@ export function useKanbanItemEventHandler<T extends BaseKanbanItem>({
   columnFieldPath: string | undefined;
   model: BoardModel<ColumnStructure, T>;
   change: KanbanChangeCallback<T>;
-}): MosaicEventHandler<T> {
-  return useMemo<MosaicEventHandler<T>>(
+}): DndContainerHandler<T> {
+  return useMemo<DndContainerHandler<T>>(
     () => ({
       id: column.columnValue,
       canDrop: ({ source }) => model.isItem(source.data),
@@ -91,9 +92,7 @@ export function useKanbanItemEventHandler<T extends BaseKanbanItem>({
         // 5. Compute insert index in target column, then insert.
         const existingTargetIndex =
           target?.type === 'tile'
-            ? targetColumnInWorking.cards.findIndex(
-                (card) => model.getItemId(card) === (target as MosaicTileData<T>).id,
-              )
+            ? targetColumnInWorking.cards.findIndex((card) => model.getItemId(card) === (target as DndTileData<T>).id)
             : -1;
         const closestEdge: 'top' | 'bottom' =
           target?.type === 'placeholder' && typeof target.location === 'number'

package/src/hooks/useProjectionModel.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Registry } from '@effect-atom/atom-react';
+import { type Registry } from '@effect-atom/atom';
 import { useState } from 'react';
 
 import { JsonSchema, Type } from '@dxos/echo';

package/src/testing/KanbanCardTileSimple.tsx

@@ -18,7 +18,7 @@ const KANBAN_CARD_TILE_SIMPLE_NAME = 'KanbanCardTileSimple';
  * Card tile without Surface; for stories and tests when plugin manager is not available.
  */
 export const KanbanCardTileSimple = forwardRef<HTMLDivElement, KanbanCardProps>(
-  ({ data, location, debug }, forwardedRef) => {
+  ({ data, location, debug, draggable }, forwardedRef) => {
     const { t } = useTranslation(meta.profile.key);
     const { model } = useBoard(KANBAN_CARD_TILE_SIMPLE_NAME);
     const { onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_SIMPLE_NAME);
@@ -46,6 +46,7 @@ export const KanbanCardTileSimple = forwardRef<HTMLDivElement, KanbanCardProps>(
           data={data}
           location={location}
           debug={debug}
+          draggable={draggable}
           dragHandle={dragHandle}
         >
           <Focus.Item asChild>