@dxos/plugin-kanban 0.6.13 → 0.6.14-main.1366248

package/dist/lib/node-esm/KanbanMain-6HTVRMTN.mjs

@@ -0,0 +1,445 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  KanbanColumnType,
+  KanbanItemType
+} from "./chunk-NRH3LKPT.mjs";
+import {
+  KANBAN_PLUGIN
+} from "./chunk-OTZHYV3S.mjs";
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanMain.tsx
+import React4 from "react";
+import { create } from "@dxos/echo-schema";
+import { getSpace } from "@dxos/react-client/echo";
+import { Main } from "@dxos/react-ui";
+import { topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanBoard.tsx
+import { DndContext, DragOverlay, MouseSensor, useSensor } from "@dnd-kit/core";
+import { horizontalListSortingStrategy, SortableContext as SortableContext2 } from "@dnd-kit/sortable";
+import React3, { useEffect as useEffect2, useState as useState2 } from "react";
+import { createSubscription as createSubscription2 } from "@dxos/react-client/echo";
+import { arrayMove, nonNullable as nonNullable3 } from "@dxos/util";
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanCard.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { DotsSixVertical, X } from "@phosphor-icons/react";
+import React 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";
+var DeleteItem = ({ onClick }) => {
+  const { t } = useTranslation(KANBAN_PLUGIN);
+  return /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    onClick,
+    classNames: "plb-0 pli-0.5 -mlb-1"
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "sr-only"
+  }, t("delete item label")), /* @__PURE__ */ React.createElement(X, {
+    className: getSize(4)
+  }));
+};
+var KanbanCardComponent = ({ 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 /* @__PURE__ */ React.createElement("div", {
+    ref: setNodeRef,
+    style: {
+      transform: CSS.Transform.toString(tx),
+      transition
+    },
+    className: mx("flex grow", isDragging && "border border-neutral-400 dark:border-neutral-800")
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex items-start grow p-1", attentionSurface, isDragging && "opacity-10")
+  }, /* @__PURE__ */ React.createElement("button", {
+    className: "flex h-[40px] items-center",
+    ...attributes,
+    ...listeners
+  }, /* @__PURE__ */ React.createElement(DotsSixVertical, {
+    className: getSize(5)
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col grow pt-1"
+  }, /* @__PURE__ */ React.createElement("div", {
+    ...focusAttributes,
+    className: mx(focusRing, "rounded-sm p-1"),
+    ref: parentRef
+  }), debug && /* @__PURE__ */ React.createElement("div", {
+    className: "text-xs text-red-800"
+  }, item.id.slice(0, 9))), onDelete && /* @__PURE__ */ React.createElement("div", {
+    className: "flex h-[40px] items-center"
+  }, /* @__PURE__ */ React.createElement(DeleteItem, {
+    onClick: onDelete
+  }))));
+};
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanColumn.tsx
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, useSortable as useSortable2, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS as CSS2 } from "@dnd-kit/utilities";
+import { DotsSixVertical as DotsSixVertical2, X as X2, Plus } from "@phosphor-icons/react";
+import React2 from "react";
+import { Button as Button2, Input, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { modalSurface, getSize as getSize2, groupSurface, mx as mx2 } from "@dxos/react-ui-theme";
+import { nonNullable as nonNullable2 } from "@dxos/util";
+
+// packages/plugins/experimental/plugin-kanban/src/components/util.ts
+import { useEffect, useState } from "react";
+import { createSubscription } from "@dxos/react-client/echo";
+import { nonNullable } from "@dxos/util";
+var useSubscription = (data) => {
+  const [_, setIter] = useState([]);
+  useEffect(() => {
+    const handle = createSubscription(() => setIter([]));
+    handle.update(data);
+    return () => handle.unsubscribe();
+  }, []);
+};
+var findLocation = (columns, id) => {
+  for (const column of columns) {
+    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
+        };
+      }
+    }
+  }
+};
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanColumn.tsx
+var DeleteColumn = ({ onClick }) => {
+  const { t } = useTranslation2(KANBAN_PLUGIN);
+  return /* @__PURE__ */ React2.createElement(Button2, {
+    variant: "ghost",
+    onClick,
+    classNames: "plb-0 pli-0.5 -mlb-1"
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("delete column label")), /* @__PURE__ */ React2.createElement(X2, {
+    className: getSize2(4)
+  }));
+};
+var AddItem = ({ onClick }) => {
+  const { t } = useTranslation2(KANBAN_PLUGIN);
+  return /* @__PURE__ */ React2.createElement(Button2, {
+    variant: "ghost",
+    onClick,
+    classNames: "plb-0 pli-0.5 -mlb-1"
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("add item label")), /* @__PURE__ */ React2.createElement(Plus, {
+    className: getSize2(4)
+  }));
+};
+var KanbanColumnComponentPlaceholder = ({ onAdd }) => {
+  const { t } = useTranslation2(KANBAN_PLUGIN);
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx2("flex flex-col justify-center shadow rounded w-[300px] h-[300px]", groupSurface)
+  }, /* @__PURE__ */ React2.createElement(Button2, {
+    variant: "ghost",
+    onClick: onAdd,
+    classNames: "plb-0 pli-0.5 -mlb-1"
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("add column label")), /* @__PURE__ */ React2.createElement(Plus, {
+    className: getSize2(6)
+  })));
+};
+var KanbanColumnComponent = ({ column, itemMapper, debug = false, onCreate, onDelete }) => {
+  const { t } = useTranslation2(KANBAN_PLUGIN);
+  useSubscription([
+    column.items
+  ]);
+  const items = itemMapper?.(column.id, column.items.filter(nonNullable2)) ?? column.items;
+  const { setNodeRef: setDroppableNodeRef } = useDroppable({
+    id: column.id
+  });
+  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable2({
+    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);
+  } : void 0;
+  const handleDeleteItem = (id) => {
+    const index = column.items.filter(nonNullable2).findIndex((column2) => column2.id === id);
+    if (index >= 0) {
+      column.items.splice(index, 1);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: setNodeRef,
+    style: {
+      transform: CSS2.Transform.toString(tx),
+      transition
+    },
+    className: mx2("flex flex-col snap-center overflow-y-hidden", isDragging && "relative z-10")
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: mx2("flex flex-col py-2 overflow-hidden shadow rounded w-[300px] min-h-[300px]", isDragging ? modalSurface : groupSurface)
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "flex items-center mb-2 px-2"
+  }, /* @__PURE__ */ React2.createElement("button", {
+    ...attributes,
+    ...listeners
+  }, /* @__PURE__ */ React2.createElement(DotsSixVertical2, {
+    className: getSize2(5)
+  })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+    srOnly: true
+  }, t("column title label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
+    variant: "subdued",
+    classNames: "px-2",
+    placeholder: t("column title placeholder"),
+    defaultValue: column.name,
+    onChange: ({ target: { value } }) => column.name = value
+  })), onDelete && /* @__PURE__ */ React2.createElement(DeleteColumn, {
+    onClick: onDelete
+  })), /* @__PURE__ */ React2.createElement(SortableContext, {
+    strategy: verticalListSortingStrategy,
+    items: items.filter(nonNullable2).map(({ id }) => id)
+  }, /* @__PURE__ */ React2.createElement("div", {
+    ref: setDroppableNodeRef,
+    className: "flex flex-col grow overflow-y-scroll space-y-2 pr-4"
+  }, items.filter(nonNullable2).map((item) => /* @__PURE__ */ React2.createElement("div", {
+    key: item.id,
+    id: item.id,
+    className: "flex pl-2"
+  }, /* @__PURE__ */ React2.createElement(KanbanCardComponent, {
+    column,
+    item,
+    onDelete: () => handleDeleteItem(item.id)
+  }))))), handleAddItem && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex justify-center mt-2"
+  }, /* @__PURE__ */ React2.createElement(AddItem, {
+    onClick: handleAddItem
+  })), debug && /* @__PURE__ */ React2.createElement("div", {
+    className: "px-2 text-xs text-red-800"
+  }, column.id.slice(0, 9))));
+};
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanBoard.tsx
+var KanbanBoard = ({ model }) => {
+  const kanban = model.root;
+  useSubscription(kanban.columns);
+  const [_, setIter] = useState2([]);
+  useEffect2(() => {
+    const handle = createSubscription2(() => setIter([]));
+    handle.update([
+      kanban.columns
+    ]);
+    return () => handle.unsubscribe();
+  }, []);
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 8
+    }
+  });
+  const [draggingColumn, setDraggingColumn] = useState2();
+  const [draggingItem, setDraggingItem] = useState2();
+  const itemMapper = (column, items) => {
+    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) {
+          modified.splice(source.idx, 1);
+        } else if (column === target.column.id) {
+          modified.splice(target.idx ?? modified.length, 0, source.item);
+        }
+        return modified;
+      }
+    }
+    return items;
+  };
+  const handleDragStart = ({ active }) => {
+    kanban.columns.filter(nonNullable3).forEach((column) => {
+      if (column.id === active.id) {
+        setDraggingColumn(column);
+      } else {
+        const idx = column.items.filter(nonNullable3).findIndex((item) => item.id === active.id);
+        if (idx !== -1) {
+          setDraggingItem({
+            source: {
+              column,
+              item: column.items[idx],
+              idx
+            }
+          });
+        }
+      }
+    });
+  };
+  const handleDragMove = (event) => {
+  };
+  const handleDragOver = ({ active, over }) => {
+    if (draggingItem) {
+      const { source } = draggingItem;
+      const target = findLocation(kanban.columns.filter(nonNullable3), over?.id);
+      if (active.id !== over?.id) {
+        setDraggingItem({
+          source,
+          target
+        });
+      }
+    }
+  };
+  const handleDragEnd = (event) => {
+    if (draggingColumn) {
+      const { active, over } = event;
+      const oldIndex = kanban.columns.filter(nonNullable3).findIndex((column) => column.id === active.id);
+      const newIndex = kanban.columns.filter(nonNullable3).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 !== void 0) {
+          arrayMove(source.column.items, source.idx, target.idx);
+        }
+      } else {
+        source.column.items.splice(source.idx, 1);
+        target.column.items.splice(target.idx ?? target.column.items.length, 0, source.item);
+      }
+    }
+    setDraggingColumn(void 0);
+    setDraggingItem(void 0);
+  };
+  const handleDragCancel = () => {
+    setDraggingColumn(void 0);
+    setDraggingItem(void 0);
+  };
+  const handleCreateColumn = () => {
+    const column = model.createColumn();
+    kanban.columns.splice(kanban.columns.length, 0, column);
+  };
+  const handleDeleteColumn = (id) => {
+    const index = kanban.columns.filter(nonNullable3).findIndex((column) => column.id === id);
+    if (index >= 0) {
+      kanban.columns.splice(index, 1);
+    }
+  };
+  const customModifier = ({ transform }) => {
+    if (draggingColumn) {
+      return {
+        ...transform,
+        y: 0
+      };
+    } else {
+      return transform;
+    }
+  };
+  return /* @__PURE__ */ React3.createElement("div", {
+    className: "flex overflow-x-scroll"
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex m-4 space-x-4 snap-x"
+  }, /* @__PURE__ */ React3.createElement(DndContext, {
+    sensors: [
+      mouseSensor
+    ],
+    modifiers: [
+      customModifier
+    ],
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel
+  }, /* @__PURE__ */ React3.createElement(SortableContext2, {
+    strategy: horizontalListSortingStrategy,
+    items: kanban.columns.filter(nonNullable3).map(({ id }) => id)
+  }, kanban.columns.filter(nonNullable3).map((column) => /* @__PURE__ */ React3.createElement(KanbanColumnComponent, {
+    key: column.id,
+    column,
+    itemMapper,
+    onCreate: (column2) => model.createItem(column2),
+    onDelete: () => handleDeleteColumn(column.id)
+  }))), draggingItem && /* @__PURE__ */ React3.createElement(DragOverlay, {
+    style: {
+      margin: 0
+    }
+  }, /* @__PURE__ */ React3.createElement(KanbanCardComponent, {
+    item: draggingItem.source.item,
+    onDelete: () => {
+    }
+  })), handleCreateColumn && /* @__PURE__ */ React3.createElement(KanbanColumnComponentPlaceholder, {
+    onAdd: handleCreateColumn
+  }))));
+};
+
+// packages/plugins/experimental/plugin-kanban/src/components/KanbanMain.tsx
+var KanbanMain = ({ kanban }) => {
+  const space = getSpace(kanban);
+  if (!space) {
+    return null;
+  }
+  const model = {
+    root: kanban,
+    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 /* @__PURE__ */ React4.createElement(Main.Content, {
+    classNames: [
+      fixedInsetFlexLayout,
+      topbarBlockPaddingStart,
+      bottombarBlockPaddingEnd
+    ]
+  }, /* @__PURE__ */ React4.createElement(KanbanBoard, {
+    model
+  }));
+};
+var KanbanMain_default = KanbanMain;
+export {
+  KanbanMain_default as default
+};
+//# sourceMappingURL=KanbanMain-6HTVRMTN.mjs.map

package/dist/lib/node-esm/KanbanMain-6HTVRMTN.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/KanbanMain.tsx", "../../../src/components/KanbanBoard.tsx", "../../../src/components/KanbanCard.tsx", "../../../src/components/KanbanColumn.tsx", "../../../src/components/util.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type FC } from 'react';\n\nimport { create } from '@dxos/echo-schema';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Main } from '@dxos/react-ui';\nimport { topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from '@dxos/react-ui-theme';\n\nimport { KanbanBoard } from './KanbanBoard';\nimport { type KanbanType, KanbanColumnType, KanbanItemType, type KanbanModel } from '../types';\n\nconst KanbanMain: FC<{ kanban: KanbanType }> = ({ kanban }) => {\n  // const { t } = useTranslation(KANBAN_PLUGIN);\n  const space = getSpace(kanban);\n  if (!space) {\n    return null;\n  }\n\n  // TODO(burdon): Should plugin create and pass in model?\n  const model: KanbanModel = {\n    root: kanban, // TODO(burdon): How to keep pure?\n    createColumn: () => space.db.add(create(KanbanColumnType, { items: [] })),\n    // TODO(burdon): Add metadata from column in the case of projections.\n    createItem: (column) => space.db.add(create(KanbanItemType, { name: '' })),\n  };\n\n  return (\n    <Main.Content classNames={[fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>\n      <KanbanBoard model={model} />\n    </Main.Content>\n  );\n};\n\nexport default KanbanMain;\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport {\n  DndContext,\n  type DragEndEvent,\n  type DragMoveEvent,\n  type DragOverEvent,\n  DragOverlay,\n  type DragStartEvent,\n  type Modifier,\n  MouseSensor,\n  useSensor,\n} from '@dnd-kit/core';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport React, { type FC, useEffect, useState } from 'react';\n\nimport { createSubscription } from '@dxos/react-client/echo';\nimport { arrayMove, nonNullable } from '@dxos/util';\n\nimport { KanbanCardComponent } from './KanbanCard';\nimport { type ItemsMapper, KanbanColumnComponent, KanbanColumnComponentPlaceholder } from './KanbanColumn';\nimport { findLocation, useSubscription } from './util';\nimport type { KanbanColumnType, KanbanItemType, Location, KanbanModel } from '../types';\n\n// TODO(burdon): Touch sensors.\n// TODO(burdon): Prevent browser nav back when swiping left/right.\n// TODO(burdon): Consistently use FC?\nexport const KanbanBoard: FC<{ model: KanbanModel }> = ({ model }) => {\n  const kanban = model.root;\n  // TODO(wittjosiah): Remove?\n  useSubscription(kanban.columns);\n\n  // TODO(burdon): Remove since now uses ECHO.\n  const [_, setIter] = useState([]);\n\n  useEffect(() => {\n    const handle = createSubscription(() => setIter([]));\n    handle.update([kanban.columns]);\n    return () => handle.unsubscribe();\n  }, []);\n\n  const mouseSensor = useSensor(MouseSensor, {\n    activationConstraint: {\n      distance: 8,\n    },\n  });\n\n  // Dragging column.\n  // TODO(burdon): Dragging column causes flickering when dragging left to first column.\n  const [draggingColumn, setDraggingColumn] = useState<KanbanColumnType | undefined>();\n\n  // Dragging item.\n  const [draggingItem, setDraggingItem] = useState<{ source: Location; target?: Location }>();\n  // While dragging, temporarily remap which items should be visible inside each column.\n  const itemMapper: ItemsMapper = (column: string, items: KanbanItemType[]) => {\n    const { source, target } = draggingItem ?? {};\n    if (source && target) {\n      if (source?.column.id !== target?.column.id && (column === source?.column.id || column === target?.column.id)) {\n        const modified = [...items];\n        if (column === source.column.id) {\n          // Temporarily remove from old column.\n          modified.splice(source.idx!, 1);\n        } else if (column === target.column.id) {\n          // Temporarily insert into new column.\n          // TODO(burdon): Use ref to track item being temporarily moved.\n          modified.splice(target.idx ?? modified.length, 0, source.item!);\n        }\n\n        return modified;\n      }\n    }\n\n    return items;\n  };\n\n  const handleDragStart = ({ active }: DragStartEvent) => {\n    kanban.columns.filter(nonNullable).forEach((column) => {\n      if (column.id === active.id) {\n        setDraggingColumn(column);\n      } else {\n        const idx = column.items.filter(nonNullable).findIndex((item) => item.id === active.id);\n        if (idx !== -1) {\n          setDraggingItem({ source: { column, item: column.items![idx], idx } });\n        }\n      }\n    });\n  };\n\n  const handleDragMove = (event: DragMoveEvent) => {};\n\n  const handleDragOver = ({ active, over }: DragOverEvent) => {\n    if (draggingItem) {\n      const { source } = draggingItem;\n      const target = findLocation(kanban.columns.filter(nonNullable), over?.id as string);\n      if (active.id !== over?.id) {\n        setDraggingItem({ source, target });\n      }\n    }\n  };\n\n  // TODO(burdon): Call model to update.\n  const handleDragEnd = (event: DragEndEvent) => {\n    if (draggingColumn) {\n      const { active, over } = event;\n      const oldIndex = kanban.columns.filter(nonNullable).findIndex((column) => column.id === active.id);\n      const newIndex = kanban.columns.filter(nonNullable).findIndex((column) => column.id === over?.id);\n      arrayMove(kanban.columns, oldIndex, newIndex);\n    } else if (draggingItem) {\n      const { source, target } = draggingItem;\n      if (source.column.id === target!.column.id) {\n        if (target!.idx !== undefined) {\n          arrayMove(source.column.items!, source.idx!, target!.idx);\n        }\n      } else {\n        source.column.items!.splice(source.idx!, 1);\n        // TODO(burdon): Incorrect position when moving to new column.\n        target!.column.items!.splice(target!.idx ?? target!.column.items!.length, 0, source.item!);\n      }\n    }\n\n    setDraggingColumn(undefined);\n    setDraggingItem(undefined);\n  };\n\n  const handleDragCancel = () => {\n    setDraggingColumn(undefined);\n    setDraggingItem(undefined);\n  };\n\n  const handleCreateColumn = () => {\n    const column = model.createColumn();\n    kanban.columns.splice(kanban.columns.length, 0, column);\n  };\n\n  // TODO(burdon): Move to model.\n  const handleDeleteColumn = (id: string) => {\n    const index = kanban.columns.filter(nonNullable).findIndex((column) => column.id === id);\n    if (index >= 0) {\n      kanban.columns.splice(index, 1);\n    }\n  };\n\n  const customModifier: Modifier = ({ transform }) => {\n    if (draggingColumn) {\n      return {\n        ...transform,\n        y: 0,\n      };\n    } else {\n      return transform;\n    }\n  };\n\n  return (\n    <div className='flex overflow-x-scroll'>\n      <div className='flex m-4 space-x-4 snap-x'>\n        <DndContext\n          sensors={[mouseSensor]}\n          modifiers={[customModifier]}\n          onDragStart={handleDragStart}\n          onDragMove={handleDragMove}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          onDragCancel={handleDragCancel}\n        >\n          <SortableContext\n            strategy={horizontalListSortingStrategy}\n            items={kanban.columns.filter(nonNullable).map(({ id }) => id!)}\n          >\n            {kanban.columns.filter(nonNullable).map((column) => (\n              <KanbanColumnComponent\n                key={column.id}\n                column={column}\n                itemMapper={itemMapper}\n                onCreate={(column: KanbanColumnType) => model.createItem(column)}\n                onDelete={() => handleDeleteColumn(column.id!)}\n              />\n            ))}\n          </SortableContext>\n\n          {/* Overlay required to drag across columns. */}\n          {draggingItem && (\n            <DragOverlay style={{ margin: 0 }}>\n              <KanbanCardComponent item={draggingItem.source.item!} onDelete={() => {}} />\n            </DragOverlay>\n          )}\n\n          {handleCreateColumn && <KanbanColumnComponentPlaceholder onAdd={handleCreateColumn} />}\n        </DndContext>\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { DotsSixVertical, X } from '@phosphor-icons/react';\nimport React, { type FC } from 'react';\n\nimport { createDocAccessor } from '@dxos/react-client/echo';\nimport { Button, useThemeContext, useTranslation } from '@dxos/react-ui';\nimport {\n  createBasicExtensions,\n  createDataExtensions,\n  createThemeExtensions,\n  useTextEditor,\n} from '@dxos/react-ui-editor';\nimport { getSize, mx, attentionSurface, focusRing } from '@dxos/react-ui-theme';\n\nimport { KANBAN_PLUGIN } from '../meta';\nimport { type KanbanColumnType, type KanbanItemType } from '../types';\n\nconst DeleteItem = ({ onClick }: { onClick: () => void }) => {\n  const { t } = useTranslation(KANBAN_PLUGIN);\n  return (\n    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>\n      <span className='sr-only'>{t('delete item label')}</span>\n      <X className={getSize(4)} />\n    </Button>\n  );\n};\n\nexport const KanbanCardComponent: FC<{\n  column?: KanbanColumnType;\n  item: KanbanItemType;\n  debug?: boolean;\n  onDelete?: () => void;\n}> = ({ column, item, debug = false, onDelete }) => {\n  const { themeMode } = useThemeContext();\n  const { t } = useTranslation(KANBAN_PLUGIN);\n  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable({\n    id: item.id,\n    data: { type: 'item', column },\n  });\n  const tx = transform ? Object.assign(transform, { scaleY: 1 }) : null;\n\n  const { parentRef, focusAttributes } = useTextEditor(\n    () => ({\n      initialValue: item.name,\n      extensions: [\n        createDataExtensions({ id: item.id, text: createDocAccessor(item, ['name']) }),\n        createBasicExtensions({ placeholder: t('item title placeholder') }),\n        createThemeExtensions({ themeMode }),\n      ],\n    }),\n    [item, themeMode],\n  );\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{ transform: CSS.Transform.toString(tx), transition }}\n      className={mx('flex grow', isDragging && 'border border-neutral-400 dark:border-neutral-800')}\n    >\n      <div className={mx('flex items-start grow p-1', attentionSurface, isDragging && 'opacity-10')}>\n        {/* TODO(burdon): Standardize height (and below); e.g., via toolbar. */}\n        <button className='flex h-[40px] items-center' {...attributes} {...listeners}>\n          <DotsSixVertical className={getSize(5)} />\n        </button>\n        <div className='flex flex-col grow pt-1'>\n          <div {...focusAttributes} className={mx(focusRing, 'rounded-sm p-1')} ref={parentRef} />\n          {debug && <div className='text-xs text-red-800'>{item.id.slice(0, 9)}</div>}\n        </div>\n        {onDelete && (\n          <div className='flex h-[40px] items-center'>\n            <DeleteItem onClick={onDelete} />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useDroppable } from '@dnd-kit/core';\nimport { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { DotsSixVertical, X, Plus } from '@phosphor-icons/react';\nimport React, { type FC } from 'react';\n\nimport { Button, Input, useTranslation } from '@dxos/react-ui';\nimport { modalSurface, getSize, groupSurface, mx } from '@dxos/react-ui-theme';\nimport { nonNullable } from '@dxos/util';\n\nimport { KanbanCardComponent } from './KanbanCard';\nimport { useSubscription } from './util';\nimport { KANBAN_PLUGIN } from '../meta';\nimport { type KanbanColumnType, type KanbanItemType } from '../types';\n\nexport type ItemsMapper = (column: string, items: KanbanItemType[]) => KanbanItemType[];\n\nconst DeleteColumn = ({ onClick }: { onClick: () => void }) => {\n  const { t } = useTranslation(KANBAN_PLUGIN);\n  return (\n    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>\n      <span className='sr-only'>{t('delete column label')}</span>\n      <X className={getSize(4)} />\n    </Button>\n  );\n};\n\nconst AddItem = ({ onClick }: { onClick: () => void }) => {\n  const { t } = useTranslation(KANBAN_PLUGIN);\n  return (\n    <Button variant='ghost' onClick={onClick} classNames='plb-0 pli-0.5 -mlb-1'>\n      <span className='sr-only'>{t('add item label')}</span>\n      <Plus className={getSize(4)} />\n    </Button>\n  );\n};\n\n// TODO(burdon): Factor out container.\nexport const KanbanColumnComponentPlaceholder: FC<{ onAdd: () => void }> = ({ onAdd }) => {\n  const { t } = useTranslation(KANBAN_PLUGIN);\n  return (\n    <div className={mx('flex flex-col justify-center shadow rounded w-[300px] h-[300px]', groupSurface)}>\n      <Button variant='ghost' onClick={onAdd} classNames='plb-0 pli-0.5 -mlb-1'>\n        <span className='sr-only'>{t('add column label')}</span>\n        <Plus className={getSize(6)} />\n      </Button>\n    </div>\n  );\n};\n\nexport const KanbanColumnComponent: FC<{\n  column: KanbanColumnType;\n  itemMapper?: ItemsMapper;\n  debug?: boolean; // TODO(burdon): Context.\n  onCreate?: (column: KanbanColumnType) => KanbanItemType;\n  onDelete?: () => void;\n}> = ({ column, itemMapper, debug = false, onCreate, onDelete }) => {\n  const { t } = useTranslation(KANBAN_PLUGIN);\n\n  // TODO(wittjosiah): Remove?\n  useSubscription([column.items]);\n  const items = itemMapper?.(column.id!, column.items.filter(nonNullable)) ?? column.items!;\n\n  const { setNodeRef: setDroppableNodeRef } = useDroppable({ id: column.id! });\n  const { isDragging, attributes, listeners, transform, transition, setNodeRef } = useSortable({\n    id: column.id!,\n    data: { type: 'column' },\n  });\n  const tx = transform ? Object.assign(transform, { scaleY: 1 }) : null;\n\n  const handleAddItem = onCreate\n    ? () => {\n        const item = onCreate(column);\n        column.items!.splice(column.items!.length, 0, item);\n      }\n    : undefined;\n\n  const handleDeleteItem = (id: string) => {\n    const index = column.items.filter(nonNullable).findIndex((column) => column.id === id);\n    if (index >= 0) {\n      column.items!.splice(index, 1);\n    }\n  };\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={{ transform: CSS.Transform.toString(tx), transition }}\n      className={mx('flex flex-col snap-center overflow-y-hidden', isDragging && 'relative z-10')}\n    >\n      {/* TODO(burdon): Width approx mobile phone width. */}\n      <div\n        className={mx(\n          'flex flex-col py-2 overflow-hidden shadow rounded w-[300px] min-h-[300px]',\n          isDragging ? modalSurface : groupSurface,\n        )}\n      >\n        <div className='flex items-center mb-2 px-2'>\n          <button {...attributes} {...listeners}>\n            <DotsSixVertical className={getSize(5)} />\n          </button>\n\n          <Input.Root>\n            <Input.Label srOnly>{t('column title label')}</Input.Label>\n            <Input.TextInput\n              variant='subdued'\n              classNames='px-2'\n              placeholder={t('column title placeholder')}\n              defaultValue={column.name}\n              onChange={({ target: { value } }) => (column.name = value)}\n            />\n          </Input.Root>\n\n          {/* TODO(burdon): Menu. */}\n          {onDelete && <DeleteColumn onClick={onDelete} />}\n        </div>\n\n        {/* TODO(burdon): Scrolling (radix; see kai/mosaic). */}\n        <SortableContext strategy={verticalListSortingStrategy} items={items.filter(nonNullable).map(({ id }) => id)}>\n          <div ref={setDroppableNodeRef} className='flex flex-col grow overflow-y-scroll space-y-2 pr-4'>\n            {items.filter(nonNullable).map((item) => (\n              <div key={item.id} id={item.id} className='flex pl-2'>\n                <KanbanCardComponent column={column} item={item} onDelete={() => handleDeleteItem(item.id)} />\n              </div>\n            ))}\n          </div>\n        </SortableContext>\n\n        {handleAddItem && (\n          <div className='flex justify-center mt-2'>\n            <AddItem onClick={handleAddItem} />\n          </div>\n        )}\n\n        {debug && <div className='px-2 text-xs text-red-800'>{column.id!.slice(0, 9)}</div>}\n      </div>\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { createSubscription } from '@dxos/react-client/echo';\nimport { nonNullable } from '@dxos/util';\n\nimport { type KanbanColumnType, type Location } from '../types';\n\n// TODO(burdon): Factor out.\nexport const useSubscription = (data: any) => {\n  const [_, setIter] = useState([]);\n  useEffect(() => {\n    const handle = createSubscription(() => setIter([]));\n    handle.update(data);\n    return () => handle.unsubscribe();\n  }, []);\n};\n\n/**\n * Find the column or item within the model.\n */\n// TODO(burdon): Move to model.\nexport const findLocation = (columns: KanbanColumnType[], id: string): Location | undefined => {\n  for (const column of columns) {\n    // TODO(burdon): Need transient ID for UX.\n    if (column.id === id) {\n      return { column };\n    } else {\n      const idx = column.items.filter(nonNullable).findIndex((item) => item.id === id);\n      if (idx !== -1) {\n        return { column, item: column.items![idx], idx };\n      }\n    }\n  }\n};\n"],
+  "mappings": "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",
+  "names": ["React", "create", "getSpace", "Main", "topbarBlockPaddingStart", "fixedInsetFlexLayout", "bottombarBlockPaddingEnd", "DndContext", "DragOverlay", "MouseSensor", "useSensor", "horizontalListSortingStrategy", "SortableContext", "React", "useEffect", "useState", "createSubscription", "arrayMove", "nonNullable", "useSortable", "CSS", "DotsSixVertical", "X", "React", "createDocAccessor", "Button", "useThemeContext", "useTranslation", "createBasicExtensions", "createDataExtensions", "createThemeExtensions", "useTextEditor", "getSize", "mx", "attentionSurface", "focusRing", "DeleteItem", "onClick", "t", "useTranslation", "KANBAN_PLUGIN", "Button", "variant", "classNames", "span", "className", "X", "getSize", "KanbanCardComponent", "column", "item", "debug", "onDelete", "themeMode", "useThemeContext", "isDragging", "attributes", "listeners", "transform", "transition", "setNodeRef", "useSortable", "id", "data", "type", "tx", "Object", "assign", "scaleY", "parentRef", "focusAttributes", "useTextEditor", "initialValue", "name", "extensions", "createDataExtensions", "text", "createDocAccessor", "createBasicExtensions", "placeholder", "createThemeExtensions", "div", "ref", "style", "CSS", "Transform", "toString", "mx", "attentionSurface", "button", "DotsSixVertical", "focusRing", "slice", "useDroppable", "SortableContext", "useSortable", "verticalListSortingStrategy", "CSS", "DotsSixVertical", "X", "Plus", "React", "Button", "Input", "useTranslation", "modalSurface", "getSize", "groupSurface", "mx", "nonNullable", "useEffect", "useState", "createSubscription", "nonNullable", "useSubscription", "data", "_", "setIter", "useState", "useEffect", "handle", "createSubscription", "update", "unsubscribe", "findLocation", "columns", "id", "column", "idx", "items", "filter", "nonNullable", "findIndex", "item", "DeleteColumn", "onClick", "t", "useTranslation", "KANBAN_PLUGIN", "React", "Button", "variant", "classNames", "span", "className", "X", "getSize", "AddItem", "Plus", "KanbanColumnComponentPlaceholder", "onAdd", "div", "mx", "groupSurface", "KanbanColumnComponent", "column", "itemMapper", "debug", "onCreate", "onDelete", "useSubscription", "items", "id", "filter", "nonNullable", "setNodeRef", "setDroppableNodeRef", "useDroppable", "isDragging", "attributes", "listeners", "transform", "transition", "useSortable", "data", "type", "tx", "Object", "assign", "scaleY", "handleAddItem", "item", "splice", "length", "undefined", "handleDeleteItem", "index", "findIndex", "ref", "style", "CSS", "Transform", "toString", "modalSurface", "button", "DotsSixVertical", "Input", "Root", "Label", "srOnly", "TextInput", "placeholder", "defaultValue", "name", "onChange", "target", "value", "SortableContext", "strategy", "verticalListSortingStrategy", "map", "key", "KanbanCardComponent", "slice", "KanbanBoard", "model", "kanban", "root", "useSubscription", "columns", "_", "setIter", "useState", "useEffect", "handle", "createSubscription", "update", "unsubscribe", "mouseSensor", "useSensor", "MouseSensor", "activationConstraint", "distance", "draggingColumn", "setDraggingColumn", "draggingItem", "setDraggingItem", "itemMapper", "column", "items", "source", "target", "id", "modified", "splice", "idx", "length", "item", "handleDragStart", "active", "filter", "nonNullable", "forEach", "findIndex", "handleDragMove", "event", "handleDragOver", "over", "findLocation", "handleDragEnd", "oldIndex", "newIndex", "arrayMove", "undefined", "handleDragCancel", "handleCreateColumn", "createColumn", "handleDeleteColumn", "index", "customModifier", "transform", "y", "React", "div", "className", "DndContext", "sensors", "modifiers", "onDragStart", "onDragMove", "onDragOver", "onDragEnd", "onDragCancel", "SortableContext", "strategy", "horizontalListSortingStrategy", "map", "KanbanColumnComponent", "key", "onCreate", "createItem", "onDelete", "DragOverlay", "style", "margin", "KanbanCardComponent", "KanbanColumnComponentPlaceholder", "onAdd", "KanbanMain", "kanban", "space", "getSpace", "model", "root", "createColumn", "db", "add", "create", "KanbanColumnType", "items", "createItem", "column", "KanbanItemType", "name", "React", "Main", "Content", "classNames", "fixedInsetFlexLayout", "topbarBlockPaddingStart", "bottombarBlockPaddingEnd", "KanbanBoard"]
+}

package/dist/lib/node-esm/chunk-NRH3LKPT.mjs

@@ -0,0 +1,48 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  KANBAN_PLUGIN
+} from "./chunk-OTZHYV3S.mjs";
+
+// packages/plugins/experimental/plugin-kanban/src/types/kanban.ts
+import { Expando, ref, S, TypedObject } from "@dxos/echo-schema";
+var KanbanItemType = class extends TypedObject({
+  typename: "dxos.org/type/KanbanItem",
+  version: "0.1.0"
+})({
+  object: S.optional(ref(Expando)),
+  name: S.optional(S.String),
+  index: S.optional(S.String)
+}) {
+};
+var KanbanColumnType = class extends TypedObject({
+  typename: "dxos.org/type/KanbanColumn",
+  version: "0.1.0"
+})({
+  name: S.optional(S.String),
+  index: S.optional(S.String),
+  items: S.mutable(S.Array(ref(KanbanItemType)))
+}) {
+};
+var KanbanType = class extends TypedObject({
+  typename: "dxos.org/type/Kanban",
+  version: "0.1.0"
+})({
+  name: S.optional(S.String),
+  columns: S.mutable(S.Array(ref(KanbanColumnType)))
+}) {
+};
+
+// packages/plugins/experimental/plugin-kanban/src/types/types.ts
+var KANBAN_ACTION = `${KANBAN_PLUGIN}/action`;
+var KanbanAction;
+(function(KanbanAction2) {
+  KanbanAction2[KanbanAction2["CREATE"] = `${KANBAN_ACTION}/create`] = "CREATE";
+})(KanbanAction || (KanbanAction = {}));
+
+export {
+  KanbanItemType,
+  KanbanColumnType,
+  KanbanType,
+  KanbanAction
+};
+//# sourceMappingURL=chunk-NRH3LKPT.mjs.map

package/dist/lib/node-esm/chunk-NRH3LKPT.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/kanban.ts", "../../../src/types/types.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { Expando, ref, S, TypedObject } from '@dxos/echo-schema';\n\nexport class KanbanItemType extends TypedObject({ typename: 'dxos.org/type/KanbanItem', version: '0.1.0' })({\n  object: S.optional(ref(Expando)),\n  name: S.optional(S.String),\n  index: S.optional(S.String),\n}) {}\n\nexport class KanbanColumnType extends TypedObject({ typename: 'dxos.org/type/KanbanColumn', version: '0.1.0' })({\n  name: S.optional(S.String),\n  index: S.optional(S.String),\n  items: S.mutable(S.Array(ref(KanbanItemType))),\n}) {}\n\nexport class KanbanType extends TypedObject({ typename: 'dxos.org/type/Kanban', version: '0.1.0' })({\n  name: S.optional(S.String),\n  columns: S.mutable(S.Array(ref(KanbanColumnType))),\n}) {}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type {\n  GraphBuilderProvides,\n  IntentResolverProvides,\n  MetadataRecordsProvides,\n  SurfaceProvides,\n  TranslationsProvides,\n} from '@dxos/app-framework';\nimport { type SchemaProvides } from '@dxos/plugin-client';\n\nimport { type KanbanColumnType, type KanbanItemType, type KanbanType } from './kanban';\nimport { KANBAN_PLUGIN } from '../meta';\n\n/**\n * Kanban data model.\n * A Kanban board is a collection of columns, each of which contains a collection of items.\n * The layout of columns and items is controlled by models.\n * The underlying data model may be represented by direct object relationships\n * (e.g., a column object containing an array of ordered items) or projections constructed\n * by the model (e.g., a query of items based on metadata within a column object).\n */\n\nconst KANBAN_ACTION = `${KANBAN_PLUGIN}/action`;\n\nexport enum KanbanAction {\n  CREATE = `${KANBAN_ACTION}/create`,\n}\n\nexport type KanbanPluginProvides = SurfaceProvides &\n  IntentResolverProvides &\n  GraphBuilderProvides &\n  MetadataRecordsProvides &\n  TranslationsProvides &\n  SchemaProvides;\n\n// TODO(burdon): Undo?\n// TODO(burdon): Typescript types (replace proto with annotations?)\n// TODO(burdon): Should pure components depend on ECHO? Relationship between ECHO object/array and Observable.\n// TODO(burdon): Can the plugin configure the object based on the data? E.g., how are the models constructed?\n// TODO(burdon): Create models. Simple first based on actual data.\n//  Model is always a projection since the dragging state is tentative.\n\n// TODO(burdon): Extend model for moving items (in and across columns).\nexport interface KanbanModel {\n  root: KanbanType;\n  createColumn(): KanbanColumnType;\n  createItem(column: KanbanColumnType): KanbanItemType;\n}\n\nexport type Location = {\n  column: KanbanColumnType;\n  item?: KanbanItemType;\n  idx?: number;\n};\n"],
+  "mappings": ";;;;;;AAIA,SAASA,SAASC,KAAKC,GAAGC,mBAAmB;AAEtC,IAAMC,iBAAN,cAA6BC,YAAY;EAAEC,UAAU;EAA4BC,SAAS;AAAQ,CAAA,EAAG;EAC1GC,QAAQC,EAAEC,SAASC,IAAIC,OAAAA,CAAAA;EACvBC,MAAMJ,EAAEC,SAASD,EAAEK,MAAM;EACzBC,OAAON,EAAEC,SAASD,EAAEK,MAAM;AAC5B,CAAA,EAAA;AAAI;AAEG,IAAME,mBAAN,cAA+BX,YAAY;EAAEC,UAAU;EAA8BC,SAAS;AAAQ,CAAA,EAAG;EAC9GM,MAAMJ,EAAEC,SAASD,EAAEK,MAAM;EACzBC,OAAON,EAAEC,SAASD,EAAEK,MAAM;EAC1BG,OAAOR,EAAES,QAAQT,EAAEU,MAAMR,IAAIP,cAAAA,CAAAA,CAAAA;AAC/B,CAAA,EAAA;AAAI;AAEG,IAAMgB,aAAN,cAAyBf,YAAY;EAAEC,UAAU;EAAwBC,SAAS;AAAQ,CAAA,EAAG;EAClGM,MAAMJ,EAAEC,SAASD,EAAEK,MAAM;EACzBO,SAASZ,EAAES,QAAQT,EAAEU,MAAMR,IAAIK,gBAAAA,CAAAA,CAAAA;AACjC,CAAA,EAAA;AAAI;;;ACIJ,IAAMM,gBAAgB,GAAGC,aAAAA;;UAEbC,eAAAA;0CACD,GAAGF,aAAAA,SAAsB,IAAA;GADxBE,iBAAAA,eAAAA,CAAAA,EAAAA;",
+  "names": ["Expando", "ref", "S", "TypedObject", "KanbanItemType", "TypedObject", "typename", "version", "object", "S", "optional", "ref", "Expando", "name", "String", "index", "KanbanColumnType", "items", "mutable", "Array", "KanbanType", "columns", "KANBAN_ACTION", "KANBAN_PLUGIN", "KanbanAction"]
+}

package/dist/lib/node-esm/chunk-OTZHYV3S.mjs

@@ -0,0 +1,20 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+
+// packages/plugins/experimental/plugin-kanban/src/meta.ts
+var KANBAN_PLUGIN = "dxos.org/plugin/kanban";
+var meta_default = {
+  id: KANBAN_PLUGIN,
+  name: "Kanban",
+  description: "Kanban board for managing tasks.",
+  icon: "ph--kanban--regular",
+  source: "https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-kanban",
+  tags: [
+    "experimental"
+  ]
+};
+
+export {
+  KANBAN_PLUGIN,
+  meta_default
+};
+//# sourceMappingURL=chunk-OTZHYV3S.mjs.map

package/dist/lib/node-esm/chunk-OTZHYV3S.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const KANBAN_PLUGIN = 'dxos.org/plugin/kanban';\n\nexport default {\n  id: KANBAN_PLUGIN,\n  name: 'Kanban',\n  description: 'Kanban board for managing tasks.',\n  icon: 'ph--kanban--regular',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-kanban',\n  tags: ['experimental'],\n} satisfies PluginMeta;\n"],
+  "mappings": ";;;AAMO,IAAMA,gBAAgB;AAE7B,IAAA,eAAe;EACbC,IAAID;EACJE,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,MAAM;IAAC;;AACT;",
+  "names": ["KANBAN_PLUGIN", "id", "name", "description", "icon", "source", "tags"]
+}