@dxos/plugin-kanban 0.7.4 → 0.7.5-main.9d26e3a

package/dist/types/src/components/KanbanMain.d.ts

@@ -1,7 +0,0 @@
-import { type FC } from 'react';
-import { type KanbanType } from '../types';
-declare const KanbanMain: FC<{
-    kanban: KanbanType;
-}>;
-export default KanbanMain;
-//# sourceMappingURL=KanbanMain.d.ts.map

package/dist/types/src/components/KanbanMain.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"KanbanMain.d.ts","sourceRoot":"","sources":["../../../../src/components/KanbanMain.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAQvC,OAAO,EAAE,KAAK,UAAU,EAAsD,MAAM,UAAU,CAAC;AAE/F,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,CAoB1C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/types/src/components/util.d.ts

@@ -1,7 +0,0 @@
-import { type KanbanColumnType, type Location } from '../types';
-export declare const useSubscription: (data: any) => void;
-/**
- * Find the column or item within the model.
- */
-export declare const findLocation: (columns: KanbanColumnType[], id: string) => Location | undefined;
-//# sourceMappingURL=util.d.ts.map

package/dist/types/src/components/util.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../../src/components/util.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGhE,eAAO,MAAM,eAAe,SAAU,GAAG,SAOxC,CAAC;AAEF;;GAEG;AAEH,eAAO,MAAM,YAAY,YAAa,gBAAgB,EAAE,MAAM,MAAM,KAAG,QAAQ,GAAG,SAYjF,CAAC"}

package/dist/types/src/stories/testing.d.ts

@@ -1,19 +0,0 @@
-export declare const createKanban: () => import("@dxos/live-object").ReactiveObject<{
-    name?: string | undefined;
-    columns: import("packages/core/echo/echo-schema/dist/types/src").Ref<{
-        name?: string | undefined;
-        index?: string | undefined;
-        items: import("packages/core/echo/echo-schema/dist/types/src").Ref<{
-            object?: import("packages/core/echo/echo-schema/dist/types/src").Ref<import("packages/core/echo/echo-schema/dist/types/src").Expando>;
-            name?: string | undefined;
-            index?: string | undefined;
-        } & {
-            id: string;
-        }>[];
-    } & {
-        id: string;
-    }>[];
-} & {
-    id: string;
-}>;
-//# sourceMappingURL=testing.d.ts.map

package/dist/types/src/stories/testing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../../src/stories/testing.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAkBxB,CAAC"}

package/dist/types/src/types/index.d.ts

@@ -1,3 +0,0 @@
-export * from './kanban';
-export * from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}

package/dist/types/src/types/kanban.d.ts

@@ -1,76 +0,0 @@
-import { Expando, ref, S } from '@dxos/echo-schema';
-declare const KanbanItemType_base: import("@dxos/echo-schema").AbstractTypedObject<{
-    object?: import("@dxos/echo-schema").Ref<Expando>;
-    name?: string | undefined;
-    index?: string | undefined;
-} & {
-    id: string;
-}, S.Struct.Encoded<{
-    object: S.optional<ref<Expando>>;
-    name: S.optional<typeof S.String>;
-    index: S.optional<typeof S.String>;
-}>>;
-export declare class KanbanItemType extends KanbanItemType_base {
-}
-declare const KanbanColumnType_base: import("@dxos/echo-schema").AbstractTypedObject<{
-    name?: string | undefined;
-    index?: string | undefined;
-    items: import("@dxos/echo-schema").Ref<{
-        object?: import("@dxos/echo-schema").Ref<Expando>;
-        name?: string | undefined;
-        index?: string | undefined;
-    } & {
-        id: string;
-    }>[];
-} & {
-    id: string;
-}, S.Struct.Encoded<{
-    name: S.optional<typeof S.String>;
-    index: S.optional<typeof S.String>;
-    items: S.mutable<S.Array$<ref<{
-        object?: import("@dxos/echo-schema").Ref<Expando>;
-        name?: string | undefined;
-        index?: string | undefined;
-    } & {
-        id: string;
-    }>>>;
-}>>;
-export declare class KanbanColumnType extends KanbanColumnType_base {
-}
-declare const KanbanType_base: import("@dxos/echo-schema").AbstractTypedObject<{
-    name?: string | undefined;
-    columns: import("@dxos/echo-schema").Ref<{
-        name?: string | undefined;
-        index?: string | undefined;
-        items: import("@dxos/echo-schema").Ref<{
-            object?: import("@dxos/echo-schema").Ref<Expando>;
-            name?: string | undefined;
-            index?: string | undefined;
-        } & {
-            id: string;
-        }>[];
-    } & {
-        id: string;
-    }>[];
-} & {
-    id: string;
-}, S.Struct.Encoded<{
-    name: S.optional<typeof S.String>;
-    columns: S.mutable<S.Array$<ref<{
-        name?: string | undefined;
-        index?: string | undefined;
-        items: import("@dxos/echo-schema").Ref<{
-            object?: import("@dxos/echo-schema").Ref<Expando>;
-            name?: string | undefined;
-            index?: string | undefined;
-        } & {
-            id: string;
-        }>[];
-    } & {
-        id: string;
-    }>>>;
-}>>;
-export declare class KanbanType extends KanbanType_base {
-}
-export {};
-//# sourceMappingURL=kanban.d.ts.map

package/dist/types/src/types/kanban.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"kanban.d.ts","sourceRoot":"","sources":["../../../../src/types/kanban.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;;;;;AAEjE,qBAAa,cAAe,SAAQ,mBAIlC;CAAG;;;;;;;;;;;;;;;;;;;;;;;;AAEL,qBAAa,gBAAiB,SAAQ,qBAIpC;CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEL,qBAAa,UAAW,SAAQ,eAG9B;CAAG"}

package/dist/types/src/types/types.d.ts

@@ -1,18 +0,0 @@
-import type { GraphBuilderProvides, IntentResolverProvides, MetadataRecordsProvides, SurfaceProvides, TranslationsProvides } from '@dxos/app-framework';
-import { type SchemaProvides } from '@dxos/plugin-space';
-import { type KanbanColumnType, type KanbanItemType, type KanbanType } from './kanban';
-export declare enum KanbanAction {
-    CREATE = "dxos.org/plugin/kanban/action/create"
-}
-export type KanbanPluginProvides = SurfaceProvides & IntentResolverProvides & GraphBuilderProvides & MetadataRecordsProvides & TranslationsProvides & SchemaProvides;
-export interface KanbanModel {
-    root: KanbanType;
-    createColumn(): KanbanColumnType;
-    createItem(column: KanbanColumnType): KanbanItemType;
-}
-export type Location = {
-    column: KanbanColumnType;
-    item?: KanbanItemType;
-    idx?: number;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/types/src/types/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,eAAe,EACf,oBAAoB,EACrB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAcvF,oBAAY,YAAY;IACtB,MAAM,yCAA4B;CACnC;AAED,MAAM,MAAM,oBAAoB,GAAG,eAAe,GAChD,sBAAsB,GACtB,oBAAoB,GACpB,uBAAuB,GACvB,oBAAoB,GACpB,cAAc,CAAC;AAUjB,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,IAAI,gBAAgB,CAAC;IACjC,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,cAAc,CAAC;CACtD;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,EAAE,gBAAgB,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC"}

package/src/components/KanbanBoard.tsx

@@ -1,195 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import {
-  DndContext,
-  type DragEndEvent,
-  type DragMoveEvent,
-  type DragOverEvent,
-  DragOverlay,
-  type DragStartEvent,
-  type Modifier,
-  MouseSensor,
-  useSensor,
-} from '@dnd-kit/core';
-import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
-import React, { type FC, useEffect, useState } from 'react';
-
-import { createSubscription } from '@dxos/react-client/echo';
-import { arrayMove, nonNullable } from '@dxos/util';
-
-import { KanbanCardComponent } from './KanbanCard';
-import { type ItemsMapper, KanbanColumnComponent, KanbanColumnComponentPlaceholder } from './KanbanColumn';
-import { findLocation, useSubscription } from './util';
-import type { KanbanColumnType, KanbanItemType, Location, KanbanModel } from '../types';
-
-// TODO(burdon): Touch sensors.
-// TODO(burdon): Prevent browser nav back when swiping left/right.
-// TODO(burdon): Consistently use FC?
-export const KanbanBoard: FC<{ model: KanbanModel }> = ({ model }) => {
-  const kanban = model.root;
-  // TODO(wittjosiah): Remove?
-  useSubscription(kanban.columns);
-
-  // TODO(burdon): Remove since now uses ECHO.
-  const [_, setIter] = useState([]);
-
-  useEffect(() => {
-    const handle = createSubscription(() => setIter([]));
-    handle.update([kanban.columns]);
-    return () => handle.unsubscribe();
-  }, []);
-
-  const mouseSensor = useSensor(MouseSensor, {
-    activationConstraint: {
-      distance: 8,
-    },
-  });
-
-  // Dragging column.
-  // TODO(burdon): Dragging column causes flickering when dragging left to first column.
-  const [draggingColumn, setDraggingColumn] = useState<KanbanColumnType | undefined>();
-
-  // Dragging item.
-  const [draggingItem, setDraggingItem] = useState<{ source: Location; target?: Location }>();
-  // While dragging, temporarily remap which items should be visible inside each column.
-  const itemMapper: ItemsMapper = (column: string, items: KanbanItemType[]) => {
-    const { source, target } = draggingItem ?? {};
-    if (source && target) {
-      if (source?.column.id !== target?.column.id && (column === source?.column.id || column === target?.column.id)) {
-        const modified = [...items];
-        if (column === source.column.id) {
-          // Temporarily remove from old column.
-          modified.splice(source.idx!, 1);
-        } else if (column === target.column.id) {
-          // Temporarily insert into new column.
-          // TODO(burdon): Use ref to track item being temporarily moved.
-          modified.splice(target.idx ?? modified.length, 0, source.item!);
-        }
-
-        return modified;
-      }
-    }
-
-    return items;
-  };
-
-  const handleDragStart = ({ active }: DragStartEvent) => {
-    kanban.columns.filter(nonNullable).forEach((column) => {
-      if (column.id === active.id) {
-        setDraggingColumn(column);
-      } else {
-        const idx = column.items.filter(nonNullable).findIndex((item) => item.id === active.id);
-        if (idx !== -1) {
-          setDraggingItem({ source: { column, item: column.items![idx], idx } });
-        }
-      }
-    });
-  };
-
-  const handleDragMove = (event: DragMoveEvent) => {};
-
-  const handleDragOver = ({ active, over }: DragOverEvent) => {
-    if (draggingItem) {
-      const { source } = draggingItem;
-      const target = findLocation(kanban.columns.filter(nonNullable), over?.id as string);
-      if (active.id !== over?.id) {
-        setDraggingItem({ source, target });
-      }
-    }
-  };
-
-  // TODO(burdon): Call model to update.
-  const handleDragEnd = (event: DragEndEvent) => {
-    if (draggingColumn) {
-      const { active, over } = event;
-      const oldIndex = kanban.columns.filter(nonNullable).findIndex((column) => column.id === active.id);
-      const newIndex = kanban.columns.filter(nonNullable).findIndex((column) => column.id === over?.id);
-      arrayMove(kanban.columns, oldIndex, newIndex);
-    } else if (draggingItem) {
-      const { source, target } = draggingItem;
-      if (source.column.id === target!.column.id) {
-        if (target!.idx !== undefined) {
-          arrayMove(source.column.items!, source.idx!, target!.idx);
-        }
-      } else {
-        source.column.items!.splice(source.idx!, 1);
-        // TODO(burdon): Incorrect position when moving to new column.
-        target!.column.items!.splice(target!.idx ?? target!.column.items!.length, 0, source.item!);
-      }
-    }
-
-    setDraggingColumn(undefined);
-    setDraggingItem(undefined);
-  };
-
-  const handleDragCancel = () => {
-    setDraggingColumn(undefined);
-    setDraggingItem(undefined);
-  };
-
-  const handleCreateColumn = () => {
-    const column = model.createColumn();
-    kanban.columns.splice(kanban.columns.length, 0, column);
-  };
-
-  // TODO(burdon): Move to model.
-  const handleDeleteColumn = (id: string) => {
-    const index = kanban.columns.filter(nonNullable).findIndex((column) => column.id === id);
-    if (index >= 0) {
-      kanban.columns.splice(index, 1);
-    }
-  };
-
-  const customModifier: Modifier = ({ transform }) => {
-    if (draggingColumn) {
-      return {
-        ...transform,
-        y: 0,
-      };
-    } else {
-      return transform;
-    }
-  };
-
-  return (
-    <div className='flex overflow-x-scroll'>
-      <div className='flex m-4 space-x-4 snap-x'>
-        <DndContext
-          sensors={[mouseSensor]}
-          modifiers={[customModifier]}
-          onDragStart={handleDragStart}
-          onDragMove={handleDragMove}
-          onDragOver={handleDragOver}
-          onDragEnd={handleDragEnd}
-          onDragCancel={handleDragCancel}
-        >
-          <SortableContext
-            strategy={horizontalListSortingStrategy}
-            items={kanban.columns.filter(nonNullable).map(({ id }) => id!)}
-          >
-            {kanban.columns.filter(nonNullable).map((column) => (
-              <KanbanColumnComponent
-                key={column.id}
-                column={column}
-                itemMapper={itemMapper}
-                onCreate={(column: KanbanColumnType) => model.createItem(column)}
-                onDelete={() => handleDeleteColumn(column.id!)}
-              />
-            ))}
-          </SortableContext>
-
-          {/* Overlay required to drag across columns. */}
-          {draggingItem && (
-            <DragOverlay style={{ margin: 0 }}>
-              <KanbanCardComponent item={draggingItem.source.item!} onDelete={() => {}} />
-            </DragOverlay>
-          )}
-
-          {handleCreateColumn && <KanbanColumnComponentPlaceholder onAdd={handleCreateColumn} />}
-        </DndContext>
-      </div>
-    </div>
-  );
-};

package/src/components/KanbanCard.tsx

@@ -1,82 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { DotsSixVertical, X } from '@phosphor-icons/react';
-import React, { type FC } from 'react';
-
-import { createDocAccessor } from '@dxos/react-client/echo';
-import { Button, useThemeContext, useTranslation } from '@dxos/react-ui';
-import {
-  createBasicExtensions,
-  createDataExtensions,
-  createThemeExtensions,
-  useTextEditor,
-} from '@dxos/react-ui-editor';
-import { getSize, mx, attentionSurface, focusRing } from '@dxos/react-ui-theme';
-
-import { KANBAN_PLUGIN } from '../meta';
-import { type KanbanColumnType, type KanbanItemType } from '../types';
-
-const DeleteItem = ({ onClick }: { onClick: () => void }) => {
-  const { t } = useTranslation(KANBAN_PLUGIN);
-  return (
-    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>
-      <span className='sr-only'>{t('delete item label')}</span>
-      <X className={getSize(4)} />
-    </Button>
-  );
-};
-
-export const KanbanCardComponent: FC<{
-  column?: KanbanColumnType;
-  item: KanbanItemType;
-  debug?: boolean;
-  onDelete?: () => void;
-}> = ({ column, item, debug = false, onDelete }) => {
-  const { themeMode } = useThemeContext();
-  const { t } = useTranslation(KANBAN_PLUGIN);
-  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable({
-    id: item.id,
-    data: { type: 'item', column },
-  });
-  const tx = transform ? Object.assign(transform, { scaleY: 1 }) : null;
-
-  const { parentRef, focusAttributes } = useTextEditor(
-    () => ({
-      initialValue: item.name,
-      extensions: [
-        createDataExtensions({ id: item.id, text: createDocAccessor(item, ['name']) }),
-        createBasicExtensions({ placeholder: t('item title placeholder') }),
-        createThemeExtensions({ themeMode }),
-      ],
-    }),
-    [item, themeMode],
-  );
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(tx), transition }}
-      className={mx('flex grow', isDragging && 'border border-neutral-400 dark:border-neutral-800')}
-    >
-      <div className={mx('flex items-start grow p-1', attentionSurface, isDragging && 'opacity-10')}>
-        {/* TODO(burdon): Standardize height (and below); e.g., via toolbar. */}
-        <button className='flex h-[40px] items-center' {...attributes} {...listeners}>
-          <DotsSixVertical className={getSize(5)} />
-        </button>
-        <div className='flex flex-col grow pt-1'>
-          <div {...focusAttributes} className={mx(focusRing, 'rounded-sm p-1')} ref={parentRef} />
-          {debug && <div className='text-xs text-red-800'>{item.id.slice(0, 9)}</div>}
-        </div>
-        {onDelete && (
-          <div className='flex h-[40px] items-center'>
-            <DeleteItem onClick={onDelete} />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/KanbanColumn.tsx

@@ -1,143 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useDroppable } from '@dnd-kit/core';
-import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { DotsSixVertical, X, Plus } from '@phosphor-icons/react';
-import React, { type FC } from 'react';
-
-import { Button, Input, useTranslation } from '@dxos/react-ui';
-import { modalSurface, getSize, groupSurface, mx } from '@dxos/react-ui-theme';
-import { nonNullable } from '@dxos/util';
-
-import { KanbanCardComponent } from './KanbanCard';
-import { useSubscription } from './util';
-import { KANBAN_PLUGIN } from '../meta';
-import { type KanbanColumnType, type KanbanItemType } from '../types';
-
-export type ItemsMapper = (column: string, items: KanbanItemType[]) => KanbanItemType[];
-
-const DeleteColumn = ({ onClick }: { onClick: () => void }) => {
-  const { t } = useTranslation(KANBAN_PLUGIN);
-  return (
-    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>
-      <span className='sr-only'>{t('delete column label')}</span>
-      <X className={getSize(4)} />
-    </Button>
-  );
-};
-
-const AddItem = ({ onClick }: { onClick: () => void }) => {
-  const { t } = useTranslation(KANBAN_PLUGIN);
-  return (
-    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>
-      <span className='sr-only'>{t('add item label')}</span>
-      <Plus className={getSize(4)} />
-    </Button>
-  );
-};
-
-// TODO(burdon): Factor out container.
-export const KanbanColumnComponentPlaceholder: FC<{ onAdd: () => void }> = ({ onAdd }) => {
-  const { t } = useTranslation(KANBAN_PLUGIN);
-  return (
-    <div className={mx('flex flex-col justify-center shadow rounded w-[300px] h-[300px]', groupSurface)}>
-      <Button variant='ghost' onClick={onAdd} classNames='plb-0 pli-0.5 -mlb-1'>
-        <span className='sr-only'>{t('add column label')}</span>
-        <Plus className={getSize(6)} />
-      </Button>
-    </div>
-  );
-};
-
-export const KanbanColumnComponent: FC<{
-  column: KanbanColumnType;
-  itemMapper?: ItemsMapper;
-  debug?: boolean; // TODO(burdon): Context.
-  onCreate?: (column: KanbanColumnType) => KanbanItemType;
-  onDelete?: () => void;
-}> = ({ column, itemMapper, debug = false, onCreate, onDelete }) => {
-  const { t } = useTranslation(KANBAN_PLUGIN);
-
-  // TODO(wittjosiah): Remove?
-  useSubscription([column.items]);
-  const items = itemMapper?.(column.id!, column.items.filter(nonNullable)) ?? column.items!;
-
-  const { setNodeRef: setDroppableNodeRef } = useDroppable({ id: column.id! });
-  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable({
-    id: column.id!,
-    data: { type: 'column' },
-  });
-  const tx = transform ? Object.assign(transform, { scaleY: 1 }) : null;
-
-  const handleAddItem = onCreate
-    ? () => {
-        const item = onCreate(column);
-        column.items!.splice(column.items!.length, 0, item);
-      }
-    : undefined;
-
-  const handleDeleteItem = (id: string) => {
-    const index = column.items.filter(nonNullable).findIndex((column) => column.id === id);
-    if (index >= 0) {
-      column.items!.splice(index, 1);
-    }
-  };
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={{ transform: CSS.Transform.toString(tx), transition }}
-      className={mx('flex flex-col snap-center overflow-y-hidden', isDragging && 'relative z-10')}
-    >
-      {/* TODO(burdon): Width approx mobile phone width. */}
-      <div
-        className={mx(
-          'flex flex-col py-2 overflow-hidden shadow rounded w-[300px] min-h-[300px]',
-          isDragging ? modalSurface : groupSurface,
-        )}
-      >
-        <div className='flex items-center mb-2 px-2'>
-          <button {...attributes} {...listeners}>
-            <DotsSixVertical className={getSize(5)} />
-          </button>
-
-          <Input.Root>
-            <Input.Label srOnly>{t('column title label')}</Input.Label>
-            <Input.TextInput
-              variant='subdued'
-              classNames='px-2'
-              placeholder={t('column title placeholder')}
-              defaultValue={column.name}
-              onChange={({ target: { value } }) => (column.name = value)}
-            />
-          </Input.Root>
-
-          {/* TODO(burdon): Menu. */}
-          {onDelete && <DeleteColumn onClick={onDelete} />}
-        </div>
-
-        {/* TODO(burdon): Scrolling (radix; see kai/mosaic). */}
-        <SortableContext strategy={verticalListSortingStrategy} items={items.filter(nonNullable).map(({ id }) => id)}>
-          <div ref={setDroppableNodeRef} className='flex flex-col grow overflow-y-scroll space-y-2 pr-4'>
-            {items.filter(nonNullable).map((item) => (
-              <div key={item.id} id={item.id} className='flex pl-2'>
-                <KanbanCardComponent column={column} item={item} onDelete={() => handleDeleteItem(item.id)} />
-              </div>
-            ))}
-          </div>
-        </SortableContext>
-
-        {handleAddItem && (
-          <div className='flex justify-center mt-2'>
-            <AddItem onClick={handleAddItem} />
-          </div>
-        )}
-
-        {debug && <div className='px-2 text-xs text-red-800'>{column.id!.slice(0, 9)}</div>}
-      </div>
-    </div>
-  );
-};

package/src/components/KanbanMain.tsx

@@ -1,37 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React, { type FC } from 'react';
-
-import { create } from '@dxos/live-object';
-import { getSpace } from '@dxos/react-client/echo';
-import { Main } from '@dxos/react-ui';
-import { topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from '@dxos/react-ui-theme';
-
-import { KanbanBoard } from './KanbanBoard';
-import { type KanbanType, KanbanColumnType, KanbanItemType, type KanbanModel } from '../types';
-
-const KanbanMain: FC<{ kanban: KanbanType }> = ({ kanban }) => {
-  // const { t } = useTranslation(KANBAN_PLUGIN);
-  const space = getSpace(kanban);
-  if (!space) {
-    return null;
-  }
-
-  // TODO(burdon): Should plugin create and pass in model?
-  const model: KanbanModel = {
-    root: kanban, // TODO(burdon): How to keep pure?
-    createColumn: () => space.db.add(create(KanbanColumnType, { items: [] })),
-    // TODO(burdon): Add metadata from column in the case of projections.
-    createItem: (column) => space.db.add(create(KanbanItemType, { name: '' })),
-  };
-
-  return (
-    <Main.Content classNames={[fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>
-      <KanbanBoard model={model} />
-    </Main.Content>
-  );
-};
-
-export default KanbanMain;

package/src/components/util.ts

@@ -1,38 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { useEffect, useState } from 'react';
-
-import { createSubscription } from '@dxos/react-client/echo';
-import { nonNullable } from '@dxos/util';
-
-import { type KanbanColumnType, type Location } from '../types';
-
-// TODO(burdon): Factor out.
-export const useSubscription = (data: any) => {
-  const [_, setIter] = useState([]);
-  useEffect(() => {
-    const handle = createSubscription(() => setIter([]));
-    handle.update(data);
-    return () => handle.unsubscribe();
-  }, []);
-};
-
-/**
- * Find the column or item within the model.
- */
-// TODO(burdon): Move to model.
-export const findLocation = (columns: KanbanColumnType[], id: string): Location | undefined => {
-  for (const column of columns) {
-    // TODO(burdon): Need transient ID for UX.
-    if (column.id === id) {
-      return { column };
-    } else {
-      const idx = column.items.filter(nonNullable).findIndex((item) => item.id === id);
-      if (idx !== -1) {
-        return { column, item: column.items![idx], idx };
-      }
-    }
-  }
-};