@dxos/plugin-kanban 0.8.4-main.bc674ce → 0.8.4-main.bcb3aa67d6

package/src/hooks/useKanbanColumnEventHandler.ts

@@ -0,0 +1,106 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import type { BoardModel, MosaicEventHandler, MosaicTileData } from '@dxos/react-ui-mosaic';
+import type { ProjectionModel } from '@dxos/schema';
+import { arrayMove } from '@dxos/util';
+
+import { type BaseKanbanItem, type ColumnStructure, type KanbanChangeCallback, UNCATEGORIZED_VALUE } from '#types';
+
+/**
+ * Builds the column drag-and-drop handler for the kanban board (reorder columns).
+ *
+ * @template T - Item type (extends BaseKanbanItem).
+ * @param id - Handler id.
+ * @param model - Board model for getColumns / getColumnId.
+ * @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.
+ */
+export function useKanbanColumnEventHandler<T extends BaseKanbanItem>({
+  id,
+  model,
+  projection,
+  pivotFieldId,
+  change,
+}: {
+  id: string;
+  model: BoardModel<ColumnStructure, T>;
+  projection: ProjectionModel | undefined;
+  pivotFieldId: string | undefined;
+  change: KanbanChangeCallback<T>;
+}): MosaicEventHandler<ColumnStructure> {
+  return useMemo<MosaicEventHandler<ColumnStructure>>(
+    () => ({
+      id,
+      canDrop: ({ source }) => {
+        if (!projection) {
+          return false;
+        }
+        const data = source.data as ColumnStructure;
+        const columnValue = model.getColumnId(data);
+        return (
+          model.isColumn(source.data) &&
+          columnValue !== UNCATEGORIZED_VALUE &&
+          (source as MosaicTileData<ColumnStructure>).id !== UNCATEGORIZED_VALUE
+        );
+      },
+      onDrop: ({ source, target }) => {
+        if (!projection || pivotFieldId === undefined) {
+          return;
+        }
+        const sourceColumnData = source.data as ColumnStructure;
+        const sourceColumnId = model.getColumnId(sourceColumnData);
+        if (sourceColumnId === UNCATEGORIZED_VALUE) {
+          return;
+        }
+
+        // 1. Current column order from model; find source index.
+        const currentColumns = model.getColumns();
+        const sourceIndex = currentColumns.findIndex((c) => model.getColumnId(c) === sourceColumnId);
+        if (sourceIndex === -1) {
+          return;
+        }
+
+        // 2. Resolve drop target to an index in the column list.
+        let targetIndex: number;
+        if (target?.type === 'tile' || target?.type === 'placeholder') {
+          targetIndex = typeof target.location === 'number' ? Math.floor(target.location) : -1;
+        } else if (target?.type === 'container') {
+          targetIndex = currentColumns.length;
+        } else {
+          return;
+        }
+        if (targetIndex < 0) {
+          return;
+        }
+
+        // 3. New column order after move.
+        const currentColumnIds = currentColumns.map((c) => model.getColumnId(c));
+        const reorderedColumnIds = arrayMove([...currentColumnIds], sourceIndex, targetIndex);
+
+        // 4. Persist reordered options to projection (pivot field options = column order).
+        const fieldProjection = projection.getFieldProjection(pivotFieldId);
+        const currentOptions = [...(fieldProjection.props.options ?? [])];
+        const optionsInNewOrder = reorderedColumnIds
+          .map((columnId) => currentOptions.find((o) => o.id === columnId))
+          .filter((o): o is NonNullable<typeof o> => o != null);
+
+        projection.setFieldProjection({
+          ...fieldProjection,
+          props: { ...fieldProjection.props, options: optionsInNewOrder },
+        });
+
+        // Persist column order to kanban.arrangement so the board UI reflects the new order.
+        change.kanban((kanban) => {
+          kanban.arrangement.order = reorderedColumnIds.filter((columnId) => columnId !== UNCATEGORIZED_VALUE);
+        });
+      },
+    }),
+    [id, model, projection, pivotFieldId, change],
+  );
+}

package/src/hooks/useKanbanItemEventHandler.ts

@@ -0,0 +1,133 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import type { BoardModel, MosaicEventHandler, MosaicTileData } from '@dxos/react-ui-mosaic';
+
+import {
+  type ArrangedCards,
+  type BaseKanbanItem,
+  type ColumnStructure,
+  type KanbanChangeCallback,
+  UNCATEGORIZED_VALUE,
+} from '#types';
+
+function findColumn<T extends BaseKanbanItem>(
+  id: string,
+  arrangement: ArrangedCards<T>,
+): { columnValue: string; cards: T[] } | undefined {
+  return arrangement.find(({ columnValue, cards }) => columnValue === id || cards.some((card) => card.id === id));
+}
+
+/**
+ * Builds the item drag-and-drop handler for a single column (reorder and move between columns).
+ *
+ * @template T - Item type (extends BaseKanbanItem).
+ * @param column - Column structure for this tile.
+ * @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.
+ */
+export function useKanbanItemEventHandler<T extends BaseKanbanItem>({
+  column,
+  columnFieldPath,
+  model,
+  change,
+}: {
+  column: ColumnStructure;
+  columnFieldPath: string | undefined;
+  model: BoardModel<ColumnStructure, T>;
+  change: KanbanChangeCallback<T>;
+}): MosaicEventHandler<T> {
+  return useMemo<MosaicEventHandler<T>>(
+    () => ({
+      id: column.columnValue,
+      canDrop: ({ source }) => model.isItem(source.data),
+      onTake: ({ source }, cb) => {
+        void cb(source.data as T);
+      },
+      onDrop: ({ source, target }) => {
+        // 1. Snapshot current arrangement from model (read-only).
+        const columns = model.getColumns();
+        const currentArrangement: ArrangedCards<T> = columns.map((col) => ({
+          columnValue: col.columnValue,
+          cards: model.getItems(col) ?? [],
+        }));
+        const sourceColumnInSnapshot = findColumn(source.id, currentArrangement);
+        if (!sourceColumnInSnapshot) {
+          return;
+        }
+
+        // 2. Working copy to mutate, then persist.
+        const workingArrangement = currentArrangement.map((col) => ({
+          columnValue: col.columnValue,
+          cards: [...col.cards],
+        }));
+        const sourceColumnInWorking = workingArrangement.find(
+          (c) => c.columnValue === sourceColumnInSnapshot.columnValue || c.cards.some((card) => card.id === source.id),
+        );
+        const targetColumnInWorking = workingArrangement.find((c) => c.columnValue === column.columnValue);
+        if (!sourceColumnInWorking || !targetColumnInWorking) {
+          return;
+        }
+
+        // 3. Remove card from source column in working copy.
+        const sourceIndex = sourceColumnInWorking.cards.findIndex((card) => card.id === source.id);
+        if (sourceIndex === -1) {
+          return;
+        }
+        const [movedCard] = sourceColumnInWorking.cards.splice(sourceIndex, 1);
+
+        // 4. Update card's pivot field to target column value.
+        if (columnFieldPath !== undefined) {
+          const newValue =
+            targetColumnInWorking.columnValue === UNCATEGORIZED_VALUE ? undefined : targetColumnInWorking.columnValue;
+          change.setItemField(movedCard, columnFieldPath, newValue);
+        }
+
+        // 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,
+              )
+            : -1;
+        const closestEdge: 'top' | 'bottom' =
+          target?.type === 'placeholder' && typeof target.location === 'number'
+            ? target.location <= targetColumnInWorking.cards.length / 2
+              ? 'top'
+              : 'bottom'
+            : 'bottom';
+
+        let insertIndex: number;
+        if (target?.type === 'placeholder' && typeof target.location === 'number') {
+          insertIndex = Math.max(0, Math.min(targetColumnInWorking.cards.length, Math.floor(target.location)));
+        } else if (target?.type === 'container' || existingTargetIndex === -1) {
+          insertIndex = targetColumnInWorking.cards.length;
+        } else if (sourceColumnInWorking.columnValue === targetColumnInWorking.columnValue) {
+          insertIndex = closestEdge === 'bottom' ? existingTargetIndex + 1 : existingTargetIndex;
+          if (sourceIndex < existingTargetIndex) {
+            insertIndex -= 1;
+          }
+        } else {
+          insertIndex = closestEdge === 'bottom' ? existingTargetIndex + 1 : existingTargetIndex;
+        }
+        targetColumnInWorking.cards.splice(insertIndex, 0, movedCard);
+
+        // 6. Persist arrangement to kanban.
+        change.kanban((kanban) => {
+          kanban.arrangement = {
+            order: workingArrangement.map(({ columnValue }) => columnValue),
+            columns: Object.fromEntries(
+              workingArrangement.map(({ columnValue, cards }) => [columnValue, { ids: cards.map((c) => c.id) }]),
+            ),
+          };
+        });
+      },
+    }),
+    [column, columnFieldPath, model, change],
+  );
+}

package/src/hooks/useProjectionModel.ts

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Registry } from '@effect-atom/atom-react';
+import { useState } from 'react';
+
+import { JsonSchema, Type } from '@dxos/echo';
+import { log } from '@dxos/log';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { ProjectionModel, createEchoChangeCallback } from '@dxos/schema';
+
+import { type Kanban } from '#types';
+
+/**
+ * Loads the kanban view and builds a ProjectionModel for field projections and pivot.
+ *
+ * @template S - Entity schema type.
+ * @param schema - Echo schema for the viewed type (or undefined).
+ * @param kanban - Kanban object whose view to load (or undefined).
+ * @param registry - Atom registry for reactive state.
+ * @returns ProjectionModel when loaded, or undefined while loading or when schema/kanban are missing.
+ */
+export const useProjectionModel = <S extends Type.AnyEntity>(
+  schema: S | undefined,
+  kanban: Kanban.Kanban | undefined,
+  registry: Registry.Registry,
+) => {
+  const [projection, setProjection] = useState<ProjectionModel | undefined>();
+
+  useAsyncEffect(
+    async (controller) => {
+      if (!schema || !kanban) {
+        return;
+      }
+      try {
+        const view = await kanban.view.load();
+        if (controller.signal.aborted) {
+          return;
+        }
+
+        const jsonSchema = Type.isMutable(schema) ? schema.jsonSchema : JsonSchema.toJsonSchema(schema);
+        const change = createEchoChangeCallback(view, Type.isMutable(schema) ? schema : undefined);
+
+        const projection = new ProjectionModel({ registry, view, baseSchema: jsonSchema, change });
+        projection.normalizeView();
+        if (!controller.signal.aborted) {
+          setProjection(projection);
+        }
+      } catch (err) {
+        log.catch(err, { schema, kanban });
+      }
+    },
+    [schema, kanban, registry],
+  );
+
+  return projection;
+};

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type Plugin } from '@dxos/app-framework';
 import { trim } from '@dxos/util';
 
 export const meta: Plugin.Meta = {
-  id: 'dxos.org/plugin/kanban',
+  id: 'org.dxos.plugin.kanban',
   name: 'Kanban',
   description: trim`
     Visual project management using customizable kanban boards to track workflow progress.

package/src/operations/definitions.ts

@@ -0,0 +1,63 @@
+// Copyright 2025 DXOS.org
+
+import * as Schema from 'effect/Schema';
+
+import { Capability } from '@dxos/app-framework';
+import { View } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+
+import { meta } from '#meta';
+
+const KANBAN_OPERATION = `${meta.id}.operation`;
+
+export const DeleteCardFieldOutput = Schema.Struct({
+  field: View.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 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],
+  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' },
+  input: Schema.Struct({
+    card: Schema.Any,
+  }),
+  output: DeleteCardOutput,
+});
+
+export const RestoreCardField = Operation.make({
+  meta: { key: `${KANBAN_OPERATION}.restore-card-field`, name: 'Restore Card Field' },
+  services: [Capability.Service],
+  input: Schema.Struct({
+    view: View.View.annotations({ description: 'The view to restore the field to.' }),
+    field: View.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,
+});
+
+export const RestoreCard = Operation.make({
+  meta: { key: `${KANBAN_OPERATION}.restore-card`, name: 'Restore Card' },
+  input: Schema.Struct({
+    card: Schema.Any.annotations({ description: 'The card to restore.' }),
+  }),
+  output: Schema.Void,
+});

package/src/operations/delete-card-field.ts

@@ -0,0 +1,47 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { JsonSchema, Obj } from '@dxos/echo';
+import { type EchoSchema } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+import { ProjectionModel, createEchoChangeCallback, getTypenameFromQuery } from '@dxos/schema';
+
+import { DeleteCardField } from './definitions';
+
+const handler: Operation.WithHandler<typeof DeleteCardField> = DeleteCardField.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ view, fieldId }) {
+      const registry = yield* Capability.get(Capabilities.AtomRegistry);
+      const db = Obj.getDatabase(view);
+      invariant(db, 'Database not found');
+      const schema = yield* Effect.promise(() =>
+        db.schemaRegistry
+          .query({
+            typename: getTypenameFromQuery(view.query.ast)!,
+            location: ['database', 'runtime'],
+          })
+          .first(),
+      );
+
+      const projection = new ProjectionModel({
+        registry,
+        view,
+        baseSchema: JsonSchema.toJsonSchema(schema),
+        change: createEchoChangeCallback(view, schema as EchoSchema),
+      });
+
+      const result = projection.deleteFieldProjection(fieldId);
+
+      return {
+        field: result.deleted.field,
+        props: result.deleted.props,
+        index: result.index,
+      };
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/delete-card.ts

@@ -0,0 +1,23 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+
+import { DeleteCard } from './definitions';
+
+const handler: Operation.WithHandler<typeof DeleteCard> = DeleteCard.pipe(
+  Operation.withHandler(({ card }) =>
+    Effect.sync(() => {
+      const db = Obj.getDatabase(card);
+      invariant(db);
+      db.remove(card);
+
+      return { card };
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/index.ts

@@ -0,0 +1,12 @@
+// Copyright 2025 DXOS.org
+
+import { OperationHandlerSet } from '@dxos/operation';
+
+export * as KanbanOperation from './definitions';
+
+export const KanbanOperationHandlerSet = OperationHandlerSet.lazy(
+  () => import('./delete-card'),
+  () => import('./delete-card-field'),
+  () => import('./restore-card'),
+  () => import('./restore-card-field'),
+);

package/src/operations/restore-card-field.ts

@@ -0,0 +1,41 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { JsonSchema, Obj } from '@dxos/echo';
+import { type EchoSchema } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+import { ProjectionModel, createEchoChangeCallback, getTypenameFromQuery } from '@dxos/schema';
+
+import { RestoreCardField } from './definitions';
+
+const handler: Operation.WithHandler<typeof RestoreCardField> = RestoreCardField.pipe(
+  Operation.withHandler(
+    Effect.fnUntraced(function* ({ view, field, props, index }) {
+      const registry = yield* Capability.get(Capabilities.AtomRegistry);
+      const db = Obj.getDatabase(view);
+      invariant(db, 'Database not found');
+      const schema = yield* Effect.promise(() =>
+        db.schemaRegistry
+          .query({
+            typename: getTypenameFromQuery(view.query.ast)!,
+            location: ['database', 'runtime'],
+          })
+          .first(),
+      );
+
+      const projection = new ProjectionModel({
+        registry,
+        view,
+        baseSchema: JsonSchema.toJsonSchema(schema),
+        change: createEchoChangeCallback(view, schema as EchoSchema),
+      });
+
+      projection.setFieldProjection({ field, props }, index);
+    }),
+  ),
+);
+
+export default handler;

package/src/operations/restore-card.ts

@@ -0,0 +1,21 @@
+// Copyright 2025 DXOS.org
+
+import * as Effect from 'effect/Effect';
+
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+import { Operation } from '@dxos/operation';
+
+import { RestoreCard } from './definitions';
+
+const handler: Operation.WithHandler<typeof RestoreCard> = RestoreCard.pipe(
+  Operation.withHandler(({ card }) =>
+    Effect.sync(() => {
+      const db = Obj.getDatabase(card);
+      invariant(db);
+      db.add(card);
+    }),
+  ),
+);
+
+export default handler;

package/src/playwright/board-manager.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { BoardManager as MosaicBoardManager } from '@dxos/react-ui-mosaic/playwright';
+
+export class BoardManager extends MosaicBoardManager {
+  async waitUntilReady(): Promise<void> {
+    await this.columns().first().waitFor({ state: 'visible' });
+    await this.columns().nth(2).waitFor({ state: 'visible' });
+    await this.column(1).items().first().waitFor({ state: 'visible' });
+  }
+}

package/src/playwright/playwright.config.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { defineConfig } from '@playwright/test';
+
+import { e2ePreset } from '@dxos/test-utils/playwright';
+
+export default defineConfig({
+  ...e2ePreset(import.meta.dirname),
+  // TODO(wittjosiah): Stories are slow to start up.
+  timeout: 60_000,
+  // TODO(wittjosiah): Avoid hard-coding ports.
+  webServer: {
+    command: 'pnpm storybook dev --ci --quiet --port=9011 --config-dir=.storybook',
+    port: 9011,
+    reuseExistingServer: false,
+  },
+});

package/src/playwright/smoke.spec.ts

@@ -0,0 +1,107 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Page, expect, test } from '@playwright/test';
+
+import { setupPage, storybookUrl } from '@dxos/test-utils/playwright';
+
+import { BoardManager } from './board-manager';
+
+const PORT = 9011;
+const STORY_URL = storybookUrl('plugins-plugin-kanban-containers-kanban--mutable-schema', PORT);
+
+test.describe('Kanban MutableSchema', () => {
+  let page: Page;
+  let board: BoardManager;
+
+  test.beforeEach(async ({ browser }) => {
+    // Larger viewport to avoid triggering scroll-assist behaviour on simple drag operations.
+    ({ page } = await setupPage(browser, { url: STORY_URL, viewportSize: { width: 1920, height: 1080 } }));
+    board = new BoardManager(page.locator('body'));
+    await board.waitUntilReady();
+  });
+
+  test.afterEach(async () => {
+    await page.close();
+  });
+
+  test('rearrange columns', async () => {
+    const col1Label = await board.column(1).title().textContent();
+    const col2Label = await board.column(2).title().textContent();
+    expect(col1Label).not.toBeNull();
+    expect(col2Label).not.toBeNull();
+
+    await board.column(1).dragTo(board.column(2).header());
+
+    await expect(board.column(1).title()).toHaveText(col2Label!);
+    await expect(board.column(2).title()).toHaveText(col1Label!);
+  });
+
+  test('rearrange within column', async () => {
+    // Column 0 is uncategorized (empty). Use column 1 (first status column).
+    const column = board.column(1);
+    const countBefore = await column.items().count();
+
+    const firstLabel = await column.item(0).title().textContent();
+    const secondLabel = await column.item(1).title().textContent();
+    expect(firstLabel).not.toBeNull();
+    expect(secondLabel).not.toBeNull();
+
+    // Drag first item below the second item.
+    await column.item(0).dragTo(column.item(1).locator, { x: 0, y: 200 });
+
+    // Item count should stay the same.
+    await expect(column.items()).toHaveCount(countBefore);
+
+    // The first item should now be what was previously the second item.
+    await expect(column.item(0).title()).toHaveText(secondLabel!);
+
+    // The original first item should now be at index 1.
+    await expect(column.item(1).title()).toHaveText(firstLabel!);
+  });
+
+  test('drag to beginning of another column', async () => {
+    // Column 0 is uncategorized (empty). Use columns 1 and 2 (both have items).
+    const col1 = board.column(1);
+    const col2 = board.column(2);
+
+    const col1CountBefore = await col1.items().count();
+    const col2CountBefore = await col2.items().count();
+    const draggedLabel = await col1.item(0).title().textContent();
+    expect(draggedLabel).not.toBeNull();
+
+    // Drop above first item. Kanban cards are taller; use larger negative y so we land in top half.
+    await col1.item(0).dragTo(col2.item(0).locator, { x: 0, y: -30 });
+
+    await expect(col1.items()).toHaveCount(col1CountBefore - 1);
+    await expect(col2.items()).toHaveCount(col2CountBefore + 1);
+    await expect(col2.item(0).title()).toHaveText(draggedLabel!);
+  });
+
+  test('drag into empty column', async () => {
+    // Uncategorized is column 0 (empty); first populated column is at index 1.
+    const emptyColumn = board.column(0);
+    const sourceColumn = board.column(1);
+
+    const sourceCountBefore = await sourceColumn.items().count();
+    const draggedLabel = await sourceColumn.item(0).title().textContent();
+    expect(draggedLabel).not.toBeNull();
+
+    await sourceColumn.item(0).dragTo(emptyColumn.header(), { x: 0, y: 40 });
+
+    await expect(sourceColumn.items()).toHaveCount(sourceCountBefore - 1);
+    await expect(emptyColumn.items()).toHaveCount(1);
+    await expect(emptyColumn.item(0).title()).toHaveText(draggedLabel!);
+  });
+
+  test('create new item', async () => {
+    // Use first populated column.
+    const column = board.column(1);
+    const countBefore = await column.items().count();
+
+    await column.addItem();
+
+    await expect(column.items()).toHaveCount(countBefore + 1);
+  });
+});