@dxos/plugin-kanban 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/hooks/useKanbanBoardModel.ts

@@ -0,0 +1,157 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom, type Registry } from '@effect-atom/atom-react';
+import { useMemo } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { AtomObj } from '@dxos/echo-atom';
+import type { BoardModel } from '@dxos/react-ui-mosaic';
+import type { ProjectionModel } from '@dxos/schema';
+
+import { type BaseKanbanItem, type ColumnStructure, type Kanban } from '#types';
+
+import {
+  computeColumnStructure,
+  getOrderByColumnFromArrangement,
+  getOrderFromArrangement,
+  orderItemsInColumn,
+} from '../util';
+
+/**
+ * Builds a board model that maps kanban arrangement and projection onto columns and per-column items.
+ *
+ * @template T - Item type (must have id; defaults to BaseKanbanItem).
+ * @param kanban - Kanban object (arrangement, view).
+ * @param projection - ProjectionModel for pivot field and options.
+ * @param itemsAtom - Atom holding the full item list.
+ * @param registry - Registry for reading atom values.
+ * @returns BoardModel with columns atom, items family, and getColumns/getItems.
+ */
+export function useKanbanBoardModel<T extends BaseKanbanItem = BaseKanbanItem>(
+  kanban: Kanban.Kanban,
+  projection: ProjectionModel,
+  itemsAtom: Atom.Atom<T[]>,
+  registry: Registry.Registry,
+): BoardModel<ColumnStructure, T> {
+  // Source atoms: reactive reads from the kanban object; items come from the passed-in atom (e.g. AtomQuery or in-memory).
+  const arrangementAtom = useMemo(() => AtomObj.makeProperty(kanban, 'arrangement'), [kanban]);
+  const viewSnapshotAtom = useMemo(
+    () =>
+      kanban?.spec?.kind === 'view' && kanban.spec.view
+        ? AtomObj.make(kanban.spec.view)
+        : Atom.make<undefined>(() => undefined),
+    [kanban?.spec],
+  );
+
+  /**
+   * Only changes when the discriminator-relevant pivot input changes.
+   * View-variant: derived from `view.projection.pivotFieldId`.
+   * Items-variant: the kanban's `spec.pivotField` (the property name itself acts as the field id).
+   */
+  const pivotFieldIdAtom = useMemo(
+    () =>
+      Atom.make((get) => {
+        if (kanban?.spec.kind === 'items') {
+          return kanban.spec.pivotField;
+        }
+        return get(viewSnapshotAtom)?.projection?.pivotFieldId as string | undefined;
+      }),
+    [kanban?.spec, viewSnapshotAtom],
+  );
+
+  // Effective per-column ids: from kanban.arrangement.columns; empty when arrangement has no columns.
+  const effectiveByColumnAtom = useMemo(
+    () => Atom.make((get) => getOrderByColumnFromArrangement(get(arrangementAtom))),
+    [arrangementAtom],
+  );
+
+  // Column structure: depends on pivotFieldId (not full view), arrangement, and projection so columns only fire when pivot or arrangement changes.
+  const columnsAtom = useMemo(
+    () =>
+      Atom.make((get) => {
+        const pivotFieldId = get(pivotFieldIdAtom);
+        if (pivotFieldId === undefined) {
+          return [];
+        }
+
+        get(projection.fields);
+        const fieldProj = projection.tryGetFieldProjection(pivotFieldId);
+        if (!fieldProj) {
+          return [];
+        }
+
+        const selectOptions = fieldProj.props.options ?? [];
+        if (selectOptions.length === 0) {
+          return [];
+        }
+
+        const arrangement = get(arrangementAtom);
+        const order = getOrderFromArrangement(arrangement);
+        const byColumn = getOrderByColumnFromArrangement(arrangement);
+        return computeColumnStructure(order, byColumn, selectOptions);
+      }),
+    [pivotFieldIdAtom, arrangementAtom, projection],
+  );
+
+  // Per-column slice of arrangement so each column’s items atom only depends on that column’s ids.
+  const columnArrangementAtomFamily = useMemo(
+    () =>
+      Atom.family<string, Atom.Atom<ColumnStructure>>((columnValue: string) =>
+        Atom.make((get) => {
+          const byColumn = get(effectiveByColumnAtom);
+          return {
+            columnValue,
+            ids: [...(byColumn[columnValue]?.ids ?? [])],
+          };
+        }),
+      ),
+    [effectiveByColumnAtom],
+  );
+
+  // Items for a single column: filter all items by pivot field, sort by this column’s ids, then append new items.
+  const itemsAtomFamily = useMemo(
+    () =>
+      Atom.family<string, Atom.Atom<T[]>>((columnValue: string) =>
+        Atom.make((get) => {
+          const columnArr = get(columnArrangementAtomFamily(columnValue));
+          const allItems = get(itemsAtom);
+          const pivotFieldId = get(pivotFieldIdAtom);
+
+          if (pivotFieldId === undefined) {
+            return [];
+          }
+
+          // TODO(wittjosiah): Try to narrow this down further.
+          get(projection.fields);
+          const fieldProj = projection.tryGetFieldProjection(pivotFieldId);
+          if (!fieldProj) {
+            return [];
+          }
+
+          const selectOptions = fieldProj.props.options ?? [];
+          const pivotPath = fieldProj.props.property;
+          const validColumnValues = new Set(selectOptions.map((opt) => opt.id));
+          return orderItemsInColumn(allItems, columnArr.ids, columnValue, pivotPath, validColumnValues);
+        }),
+      ),
+    [columnArrangementAtomFamily, itemsAtom, pivotFieldIdAtom, projection],
+  );
+
+  return useMemo(
+    () => ({
+      getColumnId: (data) => data.columnValue,
+      getItemId: (data) => (data as T).id,
+      isColumn: (obj): obj is ColumnStructure =>
+        typeof obj === 'object' && obj !== null && 'columnValue' in obj && 'ids' in obj,
+      // TODO(wittjosiah): This should be restricted to objects of the type of the kanban view.
+      isItem: (obj): obj is T => Obj.isObject(obj),
+      columns: columnsAtom,
+      items: (column) => itemsAtomFamily(column.columnValue),
+      getColumns: () => registry.get(columnsAtom) ?? [],
+      getItems: (column) => registry.get(itemsAtomFamily(column.columnValue)) ?? [],
+    }),
+    [columnsAtom, itemsAtomFamily, registry],
+  );
+}

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 || kanban.spec.kind !== 'view') {
+        return;
+      }
+      try {
+        const view = await kanban.spec.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/index.ts

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './blueprints';
 export * from './meta';
-
-export * from './KanbanPlugin';
+export * from './operations';
+export * from './types';

package/src/meta.ts

@@ -2,16 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const KANBAN_PLUGIN = 'dxos.org/plugin/kanban';
-
-export const meta: PluginMeta = {
-  id: KANBAN_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'org.dxos.plugin.kanban',
   name: 'Kanban',
-  description:
-    'Kanban allows you to explore Table data in sorted columns defined by your custom schema. You can use Kanbans to track progress or trigger custom automations when cards are moved from one state to another.',
+  description: trim`
+    Visual project management using customizable kanban boards to track workflow progress.
+    Organize table data into columns, drag and drop items between stages, and trigger automations based on status changes.
+  `,
   icon: 'ph--kanban--regular',
+  iconHue: 'green',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-kanban',
   screenshots: ['https://dxos.network/plugin-details-kanban-dark.png'],
 };

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 { Operation } from '@dxos/compute';
+import { JsonSchema, Obj } from '@dxos/echo';
+import { type EchoSchema } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { ProjectionModel, createEchoChangeCallback, getTypenameFromQuery } from '@dxos/schema';
+
+import { KanbanOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof KanbanOperation.DeleteCardField> = KanbanOperation.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 { Operation } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+
+import { KanbanOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof KanbanOperation.DeleteCard> = KanbanOperation.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,10 @@
+// Copyright 2025 DXOS.org
+
+import { OperationHandlerSet } from '@dxos/compute';
+
+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 { Operation } from '@dxos/compute';
+import { JsonSchema, Obj } from '@dxos/echo';
+import { type EchoSchema } from '@dxos/echo/internal';
+import { invariant } from '@dxos/invariant';
+import { ProjectionModel, createEchoChangeCallback, getTypenameFromQuery } from '@dxos/schema';
+
+import { KanbanOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof KanbanOperation.RestoreCardField> = KanbanOperation.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 { Operation } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
+import { invariant } from '@dxos/invariant';
+
+import { KanbanOperation } from '../types';
+
+const handler: Operation.WithHandler<typeof KanbanOperation.RestoreCard> = KanbanOperation.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,
+  },
+});