@dxos/plugin-kanban 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/components/KanbanBoard/KanbanBoard.tsx

@@ -0,0 +1,183 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom, RegistryContext } from '@effect-atom/atom-react';
+import { createContext } from '@radix-ui/react-context';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
+
+import { Obj } from '@dxos/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { Board, useBoard } from '@dxos/react-ui-mosaic';
+import type { ProjectionModel } from '@dxos/schema';
+
+import { useKanbanBoardModel, useKanbanColumnEventHandler } from '../../hooks';
+import { meta } from '../../meta';
+import { type Kanban, type KanbanChangeCallback, UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from '../../types';
+
+import { KanbanCard, type KanbanCardProps } from './KanbanCard';
+import { KanbanColumn, type KanbanColumnProps } from './KanbanColumn';
+
+// TODO(burdon): Rename Kanban.
+
+//
+// Context
+//
+
+const KANBAN_BOARD_NAME = 'KanbanBoard.Context';
+
+/**
+ * Context value for the Kanban board.
+ * Items are Echo objects (Obj.Unknown).
+ */
+type KanbanBoardContextValue = {
+  kanbanId: string;
+  projection: ProjectionModel | undefined;
+  columnFieldPath: string | undefined;
+  change: KanbanChangeCallback<Obj.Unknown>;
+  pivotFieldId: string | undefined;
+  getPivotAttributes: (columnValue: string) => { title: string; color: string };
+  itemTile?: ComponentType<KanbanCardProps>; // TODO(burdon): Prop.
+  onCardAdd?: (columnValue: string | undefined) => string | undefined;
+  onCardRemove?: (card: Obj.Unknown) => void;
+};
+
+const [KanbanBoardContext, useKanbanBoard] = createContext<KanbanBoardContextValue>(KANBAN_BOARD_NAME, {
+  kanbanId: 'never',
+  projection: undefined,
+  columnFieldPath: undefined,
+  change: { kanban: () => {}, setItemField: () => {} },
+  pivotFieldId: undefined,
+  getPivotAttributes: (id: string) =>
+    id === UNCATEGORIZED_VALUE ? UNCATEGORIZED_ATTRIBUTES : { title: id, color: 'neutral' },
+  itemTile: (() => null) as ComponentType<KanbanCardProps>,
+});
+
+//
+// Root
+//
+
+const KANBAN_BOARD_ROOT = 'KanbanBoard.Root';
+
+type KanbanBoardRootProps = PropsWithChildren<
+  Pick<KanbanBoardContextValue, 'change' | 'itemTile'> & {
+    kanban: Kanban.Kanban;
+    /** Required when providing context; Root derives columnFieldPath, pivotFieldId, getPivotAttributes from kanban + projection. */
+    projection: ProjectionModel;
+    /** Atom of items (e.g. from AtomQuery for DB, or Atom.make([]) for in-memory). */
+    items: Atom.Atom<Obj.Unknown[]>;
+    onCardAdd?: (columnValue: string | undefined) => string | undefined;
+    onCardRemove?: (card: Obj.Unknown) => void;
+  } & ComponentPropsWithoutRef<'div'>
+>;
+
+export const KanbanBoardRoot = ({
+  children,
+  change,
+  itemTile = KanbanCard,
+  kanban,
+  projection,
+  items,
+  onCardAdd,
+  onCardRemove,
+}: KanbanBoardRootProps) => {
+  const registry = useContext(RegistryContext);
+  const { t } = useTranslation(meta.id);
+  const model = useKanbanBoardModel(kanban, projection, items, registry);
+  const columns = model?.getColumns?.() ?? [];
+  const view = kanban?.view?.target;
+  const pivotFieldId = view?.projection?.pivotFieldId;
+  const columnFieldPath = useMemo(() => {
+    if (pivotFieldId === undefined || !projection) {
+      return undefined;
+    }
+
+    return projection.tryGetFieldProjection(pivotFieldId)?.props.property;
+  }, [projection, pivotFieldId]);
+
+  const getPivotAttributes = useCallback<KanbanBoardContextValue['getPivotAttributes']>(
+    (columnValue) => {
+      if (columnValue === UNCATEGORIZED_VALUE) {
+        return UNCATEGORIZED_ATTRIBUTES;
+      }
+
+      const options = projection?.tryGetFieldProjection(pivotFieldId ?? '')?.props.options ?? [];
+      const option = options.find((option) => option.id === columnValue);
+      return option ?? ({ title: columnValue, color: 'neutral' } as const);
+    },
+    [projection, pivotFieldId],
+  );
+
+  if (columns.length === 0) {
+    return (
+      <div className='flex flex-1 items-center justify-center p-8 text-center text-description'>
+        {t('select pivot placeholder')}
+      </div>
+    );
+  }
+
+  return (
+    <KanbanBoardContext
+      kanbanId={Obj.getDXN(kanban).toString()}
+      projection={projection}
+      columnFieldPath={columnFieldPath}
+      pivotFieldId={pivotFieldId}
+      getPivotAttributes={getPivotAttributes}
+      itemTile={itemTile}
+      change={change}
+      onCardAdd={onCardAdd}
+      onCardRemove={onCardRemove}
+    >
+      <Board.Root model={model}>{children}</Board.Root>
+    </KanbanBoardContext>
+  );
+};
+
+KanbanBoardRoot.displayName = KANBAN_BOARD_ROOT;
+
+//
+// KanbanBoardContent
+//
+
+const KANBAN_BOARD_CONTENT = 'KanbanBoard.Content';
+
+type KanbanBoardContentProps = {};
+
+export const KanbanBoardContent = (props: KanbanBoardContentProps) => {
+  const { model } = useBoard(KANBAN_BOARD_CONTENT);
+  const { kanbanId, projection, pivotFieldId, change } = useKanbanBoard(KANBAN_BOARD_CONTENT);
+
+  const columnEventHandler = useKanbanColumnEventHandler({
+    id: `${kanbanId}-columns`,
+    model,
+    projection: projection ?? undefined,
+    pivotFieldId: pivotFieldId ?? undefined,
+    change,
+  });
+
+  return <Board.Content id={kanbanId} eventHandler={columnEventHandler} Tile={KanbanColumn} />;
+};
+
+KanbanBoardContent.displayName = KANBAN_BOARD_CONTENT;
+
+//
+// KanbanBoard
+//
+
+export const KanbanBoard = {
+  Root: KanbanBoardRoot,
+  Content: KanbanBoardContent,
+  Column: KanbanColumn,
+  Card: KanbanCard,
+};
+
+export { useKanbanBoard };
+
+export type { KanbanBoardRootProps as KanbanBoardProps, KanbanCardProps, KanbanColumnProps };

package/src/components/KanbanBoard/KanbanCard.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { Surface } from '@dxos/app-framework/ui';
+import { useObjectMenuItems, useObjectNavigate } 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';
+import { Focus, Mosaic, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';
+
+import { meta } from '../../meta';
+
+import { useKanbanBoard } from './KanbanBoard';
+
+const KANBAN_CARD_TILE_NAME = 'KanbanBoard.Card';
+
+export type KanbanCardProps = Pick<MosaicTileProps<Obj.Unknown>, 'location' | 'data' | 'debug'>;
+
+/**
+ * Mosaic Tile for Kanban card.
+ * Uses Surface for content; requires plugin manager context.
+ */
+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 [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);
+  const dragHandleRef = useCallback((el: HTMLButtonElement | null) => setDragHandle(el), []);
+
+  const objectMenuItems = useObjectMenuItems(data);
+  const handleNavigate = useObjectNavigate(data);
+
+  const menuItems = useMemo(
+    () => [
+      ...objectMenuItems,
+      ...(onCardRemove
+        ? [
+            createMenuAction('remove', () => onCardRemove(data), {
+              label: t('remove card label'),
+              icon: 'ph--trash--regular',
+            }),
+          ]
+        : []),
+    ],
+    [objectMenuItems, onCardRemove, data, t],
+  );
+
+  return (
+    <Mosaic.Tile
+      asChild
+      id={model.getItemId(data)}
+      data={data}
+      location={location}
+      debug={debug}
+      dragHandle={dragHandle}
+    >
+      <Focus.Group asChild>
+        <Menu.Root>
+          <Card.Root ref={forwardedRef} data-testid='board-item'>
+            <Card.Toolbar>
+              <Card.DragHandle ref={dragHandleRef} />
+              <Card.Title onClick={handleNavigate}>{Obj.getLabel(data)}</Card.Title>
+              {/* TODO(wittjosiah): Reconcile with Card.Menu. */}
+              <Menu.Trigger asChild disabled={!menuItems?.length}>
+                <Toolbar.IconButton
+                  iconOnly
+                  variant='ghost'
+                  icon='ph--dots-three-vertical--regular'
+                  label={t('action menu label')}
+                />
+              </Menu.Trigger>
+              <Menu.Content items={menuItems} />
+            </Card.Toolbar>
+            <Card.Content>
+              {projection && <Surface.Surface role='card--content' limit={1} data={{ subject: data, projection }} />}
+            </Card.Content>
+          </Card.Root>
+        </Menu.Root>
+      </Focus.Group>
+    </Mosaic.Tile>
+  );
+});
+
+KanbanCard.displayName = KANBAN_CARD_TILE_NAME;

package/src/components/KanbanBoard/KanbanColumn.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { forwardRef, useRef } from 'react';
+
+import type { Obj } from '@dxos/echo';
+import { Board, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';
+
+import { useKanbanItemEventHandler } from '../../hooks';
+import { type ColumnStructure, UNCATEGORIZED_VALUE } from '../../types';
+
+import { useKanbanBoard } from './KanbanBoard';
+
+const KANBAN_COLUMN_NAME = 'KanbanBoard.Column';
+
+export type KanbanColumnProps = Pick<MosaicTileProps<ColumnStructure>, 'location' | 'data' | 'debug'>;
+
+/**
+ * Mosaic Tile for Kanban column.
+ */
+export const KanbanColumn = forwardRef<HTMLDivElement, KanbanColumnProps>(
+  ({ data: column, location, debug }, forwardedRef) => {
+    const { model } = useBoard<ColumnStructure, Obj.Unknown>(KANBAN_COLUMN_NAME);
+    const { columnFieldPath, change, onCardAdd, getPivotAttributes, itemTile } = useKanbanBoard(KANBAN_COLUMN_NAME);
+
+    const { title } = getPivotAttributes(column.columnValue);
+    const uncategorized = column.columnValue === UNCATEGORIZED_VALUE;
+    const dragHandleRef = useRef<HTMLButtonElement | null>(null);
+
+    const eventHandler = useKanbanItemEventHandler({
+      column,
+      columnFieldPath,
+      model,
+      change,
+    });
+
+    return (
+      <Board.Column.Root
+        data={column}
+        location={location}
+        classNames='grid grid-rows-[var(--dx-rail-action)_1fr_var(--dx-rail-action)]'
+        debug={debug}
+        dragHandleRef={dragHandleRef}
+        ref={forwardedRef}
+      >
+        {uncategorized ? (
+          <div className='border-b border-separator p-2' data-testid='board-column-header'>
+            <span className='font-medium'>{title}</span>
+          </div>
+        ) : (
+          <Board.Column.Header label={title} dragHandleRef={dragHandleRef as React.RefObject<HTMLButtonElement>} />
+        )}
+        <Board.Column.Body
+          data={column}
+          eventHandler={eventHandler}
+          Tile={itemTile as React.FC<MosaicTileProps<Obj.Unknown>>}
+        />
+        {onCardAdd && (
+          <Board.Column.Footer
+            onAdd={() => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? undefined : column.columnValue)}
+          />
+        )}
+      </Board.Column.Root>
+    );
+  },
+);
+
+KanbanColumn.displayName = KANBAN_COLUMN_NAME;

package/src/components/KanbanBoard/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './KanbanBoard';

package/src/components/index.ts

@@ -2,5 +2,4 @@
 // Copyright 2024 DXOS.org
 //
 
-export * from './KanbanContainer';
-export * from './KanbanViewEditor';
+export * from './KanbanBoard';

package/src/{components → containers/KanbanContainer}/KanbanContainer.stories.tsx

@@ -5,43 +5,41 @@
 import { RegistryContext } from '@effect-atom/atom-react';
 import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import { expect, waitFor, within } from 'storybook/test';
 
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface } from '@dxos/app-framework/ui';
 import { Obj, type QueryAST, Type } from '@dxos/echo';
+import { View } 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 { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { Filter, type Space, useQuery, useSchema, useSpaces } from '@dxos/react-client/echo';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { ViewEditor } from '@dxos/react-ui-form';
-import {
-  Kanban as KanbanComponent,
-  translations as kanbanTranslations,
-  useKanbanModel,
-  useProjectionModel,
-} from '@dxos/react-ui-kanban';
-import { Kanban } from '@dxos/react-ui-kanban/types';
 import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
-import { View, getTypenameFromQuery } from '@dxos/schema';
+import { ViewModel, getTypenameFromQuery } from '@dxos/schema';
+// TODO(wittjosiah): Replace with echo/testing.
 import { Organization, Person } from '@dxos/types';
 
-import { translations } from '../translations';
+import { useProjectionModel } from '../../hooks';
+import { KanbanPlugin } from '../../KanbanPlugin';
+import { translations } from '../../translations';
+import { Kanban } from '../../types';
 
 faker.seed(0);
 
-const createOrg = () => ({
+const createOrg = (status?: Organization.Organization['status']) => ({
   name: faker.commerce.productName(),
   description: faker.lorem.paragraph(),
   image: faker.image.url(),
   website: faker.internet.url(),
-  status: faker.helpers.arrayElement(Organization.StatusOptions).id as Organization.Organization['status'],
+  status: (status ?? faker.helpers.arrayElement(Organization.StatusOptions).id) as Organization.Organization['status'],
 });
 
 //
@@ -49,12 +47,13 @@ const createOrg = () => ({
 //
 
 type ClientSetupOptions = {
-  types?: Type.Entity.Any[];
+  types?: Type.AnyEntity[];
   onSpaceCreated?: (space: Space) => Promise<void>;
 };
 
 /**
  * Creates the standard plugin manager decorator with client configuration.
+ * Includes KanbanPlugin so the Surface resolves to KanbanContainer.
  */
 const withKanbanPlugins = ({ types = [], onSpaceCreated }: ClientSetupOptions): Decorator =>
   withPluginManager({
@@ -73,61 +72,37 @@ const withKanbanPlugins = ({ types = [], onSpaceCreated }: ClientSetupOptions):
       PreviewPlugin(),
       SpacePlugin({}),
       StorybookPlugin({}),
+      KanbanPlugin(),
     ],
   });
 
-//
-// Story components.
-//
-
+/**
+ * Renders the first Kanban in the space via Surface (resolves to KanbanContainer),
+ * with a sidebar containing ViewEditor and JsonFilter.
+ */
 const DefaultComponent = () => {
   const registry = useContext(RegistryContext);
   const spaces = useSpaces();
   const space = spaces[spaces.length - 1];
-  const [object] = useQuery(space?.db, Filter.type(Kanban.Kanban));
-  const typename = object?.view.target?.query ? getTypenameFromQuery(object.view.target.query.ast) : undefined;
+  const [kanban] = useQuery(space?.db, Filter.type(Kanban.Kanban));
+  const typename = kanban?.view.target?.query ? getTypenameFromQuery(kanban.view.target.query.ast) : undefined;
   const schema = useSchema(space?.db, typename);
+  const projection = useProjectionModel(schema, kanban, registry);
 
-  const objects = useQuery(space?.db, schema ? Filter.type(schema) : Filter.nothing());
-  const filteredObjects = useGlobalFilteredObjects(objects);
-
-  const projection = useProjectionModel(schema, object, registry);
-  const model = useKanbanModel({
-    object,
-    projection,
-    items: filteredObjects,
-  });
-
-  const handleAddCard = useCallback(
-    (columnValue: string | undefined) => {
-      const path = model?.columnFieldPath;
-      if (space && schema && Type.isObjectSchema(schema) && path) {
-        const card = Obj.make(schema, {
-          ...createOrg(),
-          [path]: columnValue,
-        });
-
-        space.db.add(card);
-        return card.id;
-      }
-    },
-    [space, schema, model],
-  );
-
-  const handleRemoveCard = useCallback((card: { id: string }) => Obj.isObject(card) && space?.db.remove(card), [space]);
+  const data = useMemo(() => (kanban ? { subject: kanban } : {}), [kanban]);
 
   const handleUpdateQuery = useCallback(
     (newQuery: QueryAST.Query) => {
       invariant(schema);
-      invariant(Type.isMutable(schema));
-      invariant(object.view.target);
-
-      schema.updateTypename(getTypenameFromQuery(newQuery));
-      Obj.change(object.view.target, (v) => {
-        v.query.ast = newQuery as Mutable<typeof newQuery>;
+      invariant(kanban?.view.target);
+      if (Type.isMutable(schema)) {
+        schema.updateTypename(getTypenameFromQuery(newQuery));
+      }
+      Obj.change(kanban.view.target, (view) => {
+        view.query.ast = newQuery as Mutable<QueryAST.Query>;
       });
     },
-    [object, schema],
+    [kanban, schema],
   );
 
   const handleDeleteField = useCallback(
@@ -139,23 +114,22 @@ const DefaultComponent = () => {
     [schema, projection],
   );
 
-  if (!schema || !object.view.target) {
+  if (!schema || !kanban?.view.target) {
     return null;
   }
 
   return (
-    <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 overflow-hidden border-l border-separator'>
+    <div className='grow grid grid-cols-[1fr_350px] overflow-hidden h-full w-full'>
+      <Surface.Surface role='article' data={data} limit={1} />
+      <div className='flex flex-col h-full overflow-hidden border-l border-separator'>
         <ViewEditor
-          classNames='p-2'
           registry={space?.db.schemaRegistry}
           schema={schema}
-          view={object.view.target}
+          view={kanban.view.target}
           onQueryChanged={handleUpdateQuery}
-          onDelete={Type.isMutable(schema) ? handleDeleteField : undefined}
+          onDelete={schema && Type.isMutable(schema) ? handleDeleteField : undefined}
         />
-        <JsonFilter data={{ view: object.view.target, schema }} classNames='text-xs' />
+        <JsonFilter data={{ view: kanban.view.target, schema }} classNames='text-xs' />
       </div>
     </div>
   );
@@ -166,13 +140,13 @@ const DefaultComponent = () => {
 //
 
 const meta = {
-  title: 'plugins/plugin-kanban/Kanban',
+  title: 'plugins/plugin-kanban/containers/Kanban',
   component: DefaultComponent,
   render: () => <DefaultComponent />,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
-    translations: [...translations, ...kanbanTranslations],
+    translations,
   },
 } satisfies Meta<typeof DefaultComponent>;
 
@@ -189,7 +163,7 @@ export const Default: Story = {
     withKanbanPlugins({
       types: [Organization.Organization, Person.Person],
       onSpaceCreated: async (space) => {
-        const { view } = await View.makeFromDatabase({
+        const { view } = await ViewModel.makeFromDatabase({
           db: space.db,
           typename: Organization.Organization.typename,
           pivotFieldName: 'status',
@@ -197,8 +171,7 @@ export const Default: Story = {
         const kanban = Kanban.make({ view });
         space.db.add(kanban);
 
-        // TODO(burdon): Replace with sdk/schema/testing.
-        Array.from({ length: 80 }).map(() => {
+        Array.from({ length: 10 }).map(() => {
           return space.db.add(Obj.make(Organization.Organization, createOrg()));
         });
       },
@@ -218,16 +191,15 @@ export const Default: Story = {
     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;
+    // Find the column containers (Board uses data-testid="board-column").
+    const activeColumn = activeTag.closest('[data-testid="board-column"]') as HTMLElement;
+    const prospectColumn = prospectTag.closest('[data-testid="board-column"]') 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.
+    // Wait for cards to render in the columns (Board items use data-testid="board-item").
     const getColumnCards = (column: HTMLElement) =>
-      Array.from(column.querySelectorAll('[data-dx-item-id]')) as HTMLElement[];
+      Array.from(column.querySelectorAll('[data-testid="board-item"]')) as HTMLElement[];
 
     await waitFor(() => expect(getColumnCards(activeColumn).length).toBeGreaterThan(0));
 
@@ -237,16 +209,16 @@ export const Default: Story = {
     await expect(activeCards.length).toBeGreaterThan(0);
     await expect(prospectCards.length).toBeGreaterThan(0);
 
-    // Verify cards have drag handles (first button in toolbar).
+    // Verify cards have drag handles (Card.Toolbar includes drag handle).
     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();
+    // Verify add-card action exists in columns (optional footer).
+    const activeAddItem = activeColumn.querySelector('[data-testid="board-column-add-item"]');
+    const prospectAddItem = prospectColumn.querySelector('[data-testid="board-column-add-item"]');
+    await expect(activeAddItem).toBeTruthy();
+    await expect(prospectAddItem).toBeTruthy();
 
     // TODO(wittjosiah): Get drag & drop tests working.
     //   See packages/apps/composer-app/src/playwright/stack.spec.ts for reference.
@@ -268,7 +240,7 @@ export const MutableSchema: Story = {
         // Register schema in the database to make it mutable (EchoSchema).
         const [schema] = await space.db.schemaRegistry.register([Organization.Organization]);
 
-        const { view } = await View.makeFromDatabase({
+        const { view } = await ViewModel.makeFromDatabase({
           db: space.db,
           typename: schema.typename,
           pivotFieldName: 'status',
@@ -277,9 +249,14 @@ export const MutableSchema: Story = {
         space.db.add(kanban);
 
         // Create test data using the registered schema.
-        Array.from({ length: 80 }).map(() => {
-          return space.db.add(Obj.make(schema, createOrg()));
-        });
+        const requiredOrgs = [
+          ...Array.from({ length: 2 }, () => createOrg('prospect')),
+          ...Array.from({ length: 5 }, () => createOrg('qualified')),
+          ...Array.from({ length: 1 }, () => createOrg('active')),
+          ...Array.from({ length: 1 }, () => createOrg('commit')),
+          ...Array.from({ length: 1 }, () => createOrg('reject')),
+        ];
+        requiredOrgs.forEach((org) => space.db.add(Obj.make(schema, org)));
       },
     }),
   ],