@dxos/plugin-kanban 0.10.0 → 0.11.1

package/dist/lib/components.mjs

@@ -0,0 +1,227 @@
+import { Obj } from "@dxos/echo";
+import { meta } from "#meta";
+import { UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from "#types";
+import { createContext } from "@radix-ui/react-context";
+import { RegistryContext } from "@effect-atom/atom-react";
+import { forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import { Card, IconButton, composable, composableProps, useTranslation } from "@dxos/react-ui";
+import { Board, Focus, Mosaic, useBoard } from "@dxos/react-ui-mosaic";
+import { useKanbanBoardModel, useKanbanColumnEventHandler, useKanbanItemEventHandler } from "#hooks";
+import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface, useCardPivot, useObjectMenuItems } from "@dxos/app-toolkit/ui";
+import { Menu, createMenuAction } from "@dxos/react-ui-menu";
+import { jsx, jsxs } from "react/jsx-runtime";
+var [KanbanBoardContext, useKanbanBoard] = createContext("KanbanBoard.Context", {
+	kanbanId: "never",
+	projection: void 0,
+	columnFieldPath: void 0,
+	change: {
+		kanban: () => {},
+		setItemField: () => {}
+	},
+	pivotFieldId: void 0,
+	getPivotAttributes: (id) => id === UNCATEGORIZED_VALUE ? UNCATEGORIZED_ATTRIBUTES : {
+		title: id,
+		color: "neutral"
+	},
+	itemTile: (() => null)
+});
+//#endregion
+//#region src/components/KanbanBoard/KanbanCard.tsx
+var KANBAN_CARD_TILE_NAME = "KanbanBoard.Card";
+/**
+* Mosaic Tile for Kanban card.
+* Uses Surface for content; requires plugin manager context.
+*/
+var KanbanCard = forwardRef(({ data, location, debug, draggable }, forwardedRef) => {
+	const { t } = useTranslation(meta.profile.key);
+	const { model } = useBoard(KANBAN_CARD_TILE_NAME);
+	const { projection, columnFieldPath, onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_NAME);
+	const [dragHandle, setDragHandle] = useState(null);
+	const dragHandleRef = useCallback((el) => setDragHandle(el), []);
+	const [cardRef, pivotId] = useCardPivot();
+	const objectMenuItems = useObjectMenuItems(data, pivotId);
+	const menuItems = useMemo(() => [...objectMenuItems, ...onCardRemove ? [createMenuAction("remove", () => onCardRemove(data), {
+		label: t("remove-card.label"),
+		icon: "ph--trash--regular"
+	})] : []], [
+		objectMenuItems,
+		onCardRemove,
+		data,
+		t
+	]);
+	return /* @__PURE__ */ jsx(Menu.Root, { children: /* @__PURE__ */ jsx(Mosaic.Tile, {
+		asChild: true,
+		id: model.getItemId(data),
+		data,
+		location,
+		debug,
+		draggable,
+		dragHandle,
+		children: /* @__PURE__ */ jsx(Focus.Item, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Card.Root, {
+				ref: forwardedRef,
+				"data-testid": "board-item",
+				children: [/* @__PURE__ */ jsxs(Card.Header, {
+					ref: cardRef,
+					children: [
+						/* @__PURE__ */ jsx(Card.DragHandle, {
+							ref: dragHandleRef,
+							testId: "mosaicBoard.cardDragHandle"
+						}),
+						/* @__PURE__ */ jsx(Card.Title, {
+							"data-testid": "mosaicBoard.cardTitle",
+							children: Obj.getLabel(data)
+						}),
+						/* @__PURE__ */ jsxs(Card.Block, {
+							end: true,
+							children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+								asChild: true,
+								disabled: !menuItems?.length,
+								children: /* @__PURE__ */ jsx(IconButton, {
+									iconOnly: true,
+									variant: "ghost",
+									icon: "ph--dots-three-vertical--regular",
+									label: t("action-menu.label")
+								})
+							}), /* @__PURE__ */ jsx(Menu.Content, { items: menuItems })]
+						})
+					]
+				}), /* @__PURE__ */ jsx(Card.Body, { children: projection && /* @__PURE__ */ jsx(Surface.Surface, {
+					type: AppSurface.CardContent,
+					limit: 1,
+					data: {
+						subject: data,
+						projection,
+						ignorePaths: columnFieldPath ? [columnFieldPath] : void 0
+					}
+				}) })]
+			})
+		})
+	}) });
+});
+KanbanCard.displayName = KANBAN_CARD_TILE_NAME;
+//#endregion
+//#region src/components/KanbanBoard/KanbanColumn.tsx
+var KANBAN_COLUMN_NAME = "KanbanBoard.Column";
+/**
+* Mosaic Tile for Kanban column.
+*/
+var KanbanColumn = forwardRef(({ data: column, location, debug, draggable }, forwardedRef) => {
+	const { model } = useBoard(KANBAN_COLUMN_NAME);
+	const { columnFieldPath, change, onCardAdd, getPivotAttributes, itemTile } = useKanbanBoard(KANBAN_COLUMN_NAME);
+	const { title } = getPivotAttributes(column.columnValue);
+	const uncategorized = column.columnValue === UNCATEGORIZED_VALUE;
+	const [dragHandle, setDragHandle] = useState(null);
+	const eventHandler = useKanbanItemEventHandler({
+		column,
+		columnFieldPath,
+		model,
+		change
+	});
+	return /* @__PURE__ */ jsxs(Board.Column.Root, {
+		data: column,
+		location,
+		classNames: "grid grid-rows-[var(--dx-rail-action)_1fr_var(--dx-rail-action)]",
+		debug,
+		draggable,
+		dragHandle,
+		ref: forwardedRef,
+		children: [
+			uncategorized ? /* @__PURE__ */ jsx("div", {
+				className: "border-b border-separator p-2",
+				"data-testid": "board-column-header",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: title
+				})
+			}) : /* @__PURE__ */ jsx(Board.Column.Header, {
+				label: title,
+				dragHandleRef: setDragHandle
+			}),
+			/* @__PURE__ */ jsx(Board.Column.Body, {
+				data: column,
+				eventHandler,
+				Tile: itemTile
+			}),
+			/* @__PURE__ */ jsx(Board.Column.Footer, { onAdd: onCardAdd ? () => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? void 0 : column.columnValue) : void 0 })
+		]
+	});
+});
+KanbanColumn.displayName = KANBAN_COLUMN_NAME;
+//#endregion
+//#region src/components/KanbanBoard/KanbanBoard.tsx
+var KANBAN_BOARD_ROOT = "KanbanBoard.Root";
+var KanbanBoardRoot = ({ children, kanban, projection, items, change, itemTile = KanbanCard, onCardAdd, onCardRemove }) => {
+	const registry = useContext(RegistryContext);
+	const { t } = useTranslation(meta.profile.key);
+	const model = useKanbanBoardModel(kanban, projection, items, registry);
+	const columns = model?.getColumns?.() ?? [];
+	const pivotFieldId = (kanban?.spec.kind === "view" ? kanban.spec.view.target : void 0)?.projection?.pivotFieldId;
+	const columnFieldPath = useMemo(() => {
+		if (kanban?.spec.kind === "items") return kanban.spec.pivotField;
+		if (pivotFieldId === void 0 || !projection) return;
+		return projection.tryGetFieldProjection(pivotFieldId)?.props.property;
+	}, [
+		kanban?.spec,
+		projection,
+		pivotFieldId
+	]);
+	const getPivotAttributes = useCallback((columnValue) => {
+		if (columnValue === UNCATEGORIZED_VALUE) return UNCATEGORIZED_ATTRIBUTES;
+		return (projection?.tryGetFieldProjection(pivotFieldId ?? "")?.props.options ?? []).find((option) => option.id === columnValue) ?? {
+			title: columnValue,
+			color: "neutral"
+		};
+	}, [projection, pivotFieldId]);
+	if (columns.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-1 items-center justify-center p-8 text-center text-description",
+		children: t("select-pivot.placeholder")
+	});
+	return /* @__PURE__ */ jsx(KanbanBoardContext, {
+		kanbanId: Obj.getURI(kanban),
+		projection,
+		columnFieldPath,
+		pivotFieldId,
+		getPivotAttributes,
+		itemTile,
+		change,
+		onCardAdd,
+		onCardRemove,
+		children: /* @__PURE__ */ jsx(Board.Root, {
+			model,
+			children
+		})
+	});
+};
+KanbanBoardRoot.displayName = KANBAN_BOARD_ROOT;
+var KANBAN_BOARD_CONTENT = "KanbanBoard.Content";
+var KanbanBoardContent = composable((props, forwardedRef) => {
+	const { model } = useBoard(KANBAN_BOARD_CONTENT);
+	const { kanbanId, projection, pivotFieldId, change } = useKanbanBoard(KANBAN_BOARD_CONTENT);
+	const columnEventHandler = useKanbanColumnEventHandler({
+		id: `${kanbanId}-columns`,
+		model,
+		projection: projection ?? void 0,
+		pivotFieldId: pivotFieldId ?? void 0,
+		change
+	});
+	return /* @__PURE__ */ jsx(Board.Content, {
+		...composableProps(props),
+		ref: forwardedRef,
+		eventHandler: columnEventHandler,
+		Tile: KanbanColumn
+	});
+});
+KanbanBoardContent.displayName = KANBAN_BOARD_CONTENT;
+var KanbanBoard = {
+	Root: KanbanBoardRoot,
+	Content: KanbanBoardContent,
+	Column: KanbanColumn,
+	Card: KanbanCard
+};
+//#endregion
+export { KanbanBoard, KanbanBoardContent, KanbanBoardRoot, useKanbanBoard };
+
+//# sourceMappingURL=components.mjs.map

package/dist/lib/components.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.mjs","names":[],"sources":["../../src/components/KanbanBoard/context.ts","../../src/components/KanbanBoard/KanbanCard.tsx","../../src/components/KanbanBoard/KanbanColumn.tsx","../../src/components/KanbanBoard/KanbanBoard.tsx"],"sourcesContent":["//\n// Copyright 2025 DXOS.org\n//\n\nimport { createContext } from '@radix-ui/react-context';\nimport { type ComponentType } from 'react';\n\nimport { type Obj } from '@dxos/echo';\nimport { type MosaicTileProps } from '@dxos/react-ui-mosaic';\nimport { type ProjectionModel } from '@dxos/schema';\n\nimport { type ColumnStructure, type KanbanChangeCallback, UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from '#types';\n\nconst KANBAN_BOARD_NAME = 'KanbanBoard.Context';\n\n/**\n * Card tile props. Defined here (rather than in `KanbanCard.tsx`) so the\n * context type can reference it without forming a cycle through that\n * module's runtime exports — webkit treats the resulting TDZ as a hard\n * error while other engines are lenient.\n */\nexport type KanbanCardProps = Pick<MosaicTileProps<Obj.Unknown>, 'location' | 'data' | 'debug' | 'draggable'>;\n\n/**\n * Column tile props. See note on {@link KanbanCardProps}.\n */\nexport type KanbanColumnProps = Pick<MosaicTileProps<ColumnStructure>, 'location' | 'data' | 'debug' | 'draggable'>;\n\n/**\n * Context value for the Kanban board.\n * Items are Echo objects (Obj.Unknown).\n */\nexport type KanbanBoardContextValue = {\n  kanbanId: string;\n  projection: ProjectionModel | undefined;\n  columnFieldPath: string | undefined;\n  change: KanbanChangeCallback<Obj.Unknown>;\n  pivotFieldId: string | undefined;\n  getPivotAttributes: (columnValue: string) => { title: string; color: string };\n  itemTile?: ComponentType<KanbanCardProps>; // TODO(burdon): Prop.\n  onCardAdd?: (columnValue: string | undefined) => string | undefined;\n  onCardRemove?: (card: Obj.Unknown) => void;\n};\n\nexport const [KanbanBoardContext, useKanbanBoard] = createContext<KanbanBoardContextValue>(KANBAN_BOARD_NAME, {\n  kanbanId: 'never',\n  projection: undefined,\n  columnFieldPath: undefined,\n  change: { kanban: () => {}, setItemField: () => {} },\n  pivotFieldId: undefined,\n  getPivotAttributes: (id: string) =>\n    id === UNCATEGORIZED_VALUE ? UNCATEGORIZED_ATTRIBUTES : { title: id, color: 'neutral' },\n  itemTile: (() => null) as ComponentType<KanbanCardProps>,\n});\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { forwardRef, useCallback, useMemo, useState } from 'react';\n\nimport { Surface } from '@dxos/app-framework/ui';\nimport { AppSurface, useCardPivot, useObjectMenuItems } from '@dxos/app-toolkit/ui';\nimport { Obj } from '@dxos/echo';\nimport { Card, IconButton, useTranslation } from '@dxos/react-ui';\nimport { Menu, createMenuAction } from '@dxos/react-ui-menu';\nimport { Focus, Mosaic, useBoard } from '@dxos/react-ui-mosaic';\n\nimport { meta } from '#meta';\n\nimport { type KanbanCardProps, useKanbanBoard } from './context';\n\nexport { type KanbanCardProps };\n\nconst KANBAN_CARD_TILE_NAME = 'KanbanBoard.Card';\n\n/**\n * Mosaic Tile for Kanban card.\n * Uses Surface for content; requires plugin manager context.\n */\nexport const KanbanCard = forwardRef<HTMLDivElement, KanbanCardProps>(\n  ({ data, location, debug, draggable }, forwardedRef) => {\n    const { t } = useTranslation(meta.profile.key);\n    const { model } = useBoard(KANBAN_CARD_TILE_NAME);\n    const { projection, columnFieldPath, onCardRemove } = useKanbanBoard(KANBAN_CARD_TILE_NAME);\n    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);\n    const dragHandleRef = useCallback((el: HTMLButtonElement | null) => setDragHandle(el), []);\n\n    // Card.Root already takes the forwarded ref; walk from the header to resolve the origin plank.\n    const [cardRef, pivotId] = useCardPivot();\n    const objectMenuItems = useObjectMenuItems(data, pivotId);\n\n    const menuItems = useMemo(\n      () => [\n        ...objectMenuItems,\n        ...(onCardRemove\n          ? [\n              createMenuAction('remove', () => onCardRemove(data), {\n                label: t('remove-card.label'),\n                icon: 'ph--trash--regular',\n              }),\n            ]\n          : []),\n      ],\n      [objectMenuItems, onCardRemove, data, t],\n    );\n\n    return (\n      <Menu.Root>\n        <Mosaic.Tile\n          asChild\n          id={model.getItemId(data)}\n          data={data}\n          location={location}\n          debug={debug}\n          draggable={draggable}\n          dragHandle={dragHandle}\n        >\n          <Focus.Item asChild>\n            <Card.Root ref={forwardedRef} data-testid='board-item'>\n              <Card.Header ref={cardRef}>\n                <Card.DragHandle ref={dragHandleRef} testId='mosaicBoard.cardDragHandle' />\n                <Card.Title data-testid='mosaicBoard.cardTitle'>{Obj.getLabel(data)}</Card.Title>\n                {/* TODO(wittjosiah): Reconcile with Card.Menu. */}\n                <Card.Block end>\n                  <Menu.Trigger asChild disabled={!menuItems?.length}>\n                    <IconButton\n                      iconOnly\n                      variant='ghost'\n                      icon='ph--dots-three-vertical--regular'\n                      label={t('action-menu.label')}\n                    />\n                  </Menu.Trigger>\n                  <Menu.Content items={menuItems} />\n                </Card.Block>\n              </Card.Header>\n              <Card.Body>\n                {projection && (\n                  <Surface.Surface\n                    type={AppSurface.CardContent}\n                    limit={1}\n                    data={{\n                      subject: data,\n                      projection,\n                      // Hide the pivot field: its value is already conveyed by\n                      // which column the card sits in.\n                      ignorePaths: columnFieldPath ? [columnFieldPath] : undefined,\n                    }}\n                  />\n                )}\n              </Card.Body>\n            </Card.Root>\n          </Focus.Item>\n        </Mosaic.Tile>\n      </Menu.Root>\n    );\n  },\n);\n\nKanbanCard.displayName = KANBAN_CARD_TILE_NAME;\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport React, { FC, forwardRef, useState } from 'react';\n\nimport type { Obj } from '@dxos/echo';\nimport { Board, type MosaicTileProps, useBoard } from '@dxos/react-ui-mosaic';\n\nimport { useKanbanItemEventHandler } from '#hooks';\nimport { type ColumnStructure, UNCATEGORIZED_VALUE } from '#types';\n\nimport { type KanbanColumnProps, useKanbanBoard } from './context';\n\nexport { type KanbanColumnProps };\n\nconst KANBAN_COLUMN_NAME = 'KanbanBoard.Column';\n\n/**\n * Mosaic Tile for Kanban column.\n */\nexport const KanbanColumn = forwardRef<HTMLDivElement, KanbanColumnProps>(\n  ({ data: column, location, debug, draggable }, forwardedRef) => {\n    const { model } = useBoard<ColumnStructure, Obj.Unknown>(KANBAN_COLUMN_NAME);\n    const { columnFieldPath, change, onCardAdd, getPivotAttributes, itemTile } = useKanbanBoard(KANBAN_COLUMN_NAME);\n\n    const { title } = getPivotAttributes(column.columnValue);\n    const uncategorized = column.columnValue === UNCATEGORIZED_VALUE;\n    const [dragHandle, setDragHandle] = useState<HTMLButtonElement | null>(null);\n\n    const eventHandler = useKanbanItemEventHandler({\n      column,\n      columnFieldPath,\n      model,\n      change,\n    });\n\n    return (\n      <Board.Column.Root\n        data={column}\n        location={location}\n        classNames='grid grid-rows-[var(--dx-rail-action)_1fr_var(--dx-rail-action)]'\n        debug={debug}\n        draggable={draggable}\n        dragHandle={dragHandle}\n        ref={forwardedRef}\n      >\n        {uncategorized ? (\n          <div className='border-b border-separator p-2' data-testid='board-column-header'>\n            <span className='font-medium'>{title}</span>\n          </div>\n        ) : (\n          <Board.Column.Header label={title} dragHandleRef={setDragHandle} />\n        )}\n        <Board.Column.Body\n          data={column}\n          eventHandler={eventHandler}\n          Tile={itemTile as FC<MosaicTileProps<Obj.Unknown>>}\n        />\n        <Board.Column.Footer\n          onAdd={\n            onCardAdd\n              ? () => onCardAdd(column.columnValue === UNCATEGORIZED_VALUE ? undefined : column.columnValue)\n              : undefined\n          }\n        />\n      </Board.Column.Root>\n    );\n  },\n);\n\nKanbanColumn.displayName = KANBAN_COLUMN_NAME;\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Atom, RegistryContext } from '@effect-atom/atom-react';\nimport React, { type ComponentPropsWithoutRef, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { useTranslation } from '@dxos/react-ui';\nimport { composable, composableProps } from '@dxos/react-ui';\nimport { Board, useBoard } from '@dxos/react-ui-mosaic';\nimport type { ProjectionModel } from '@dxos/schema';\n\nimport { useKanbanBoardModel, useKanbanColumnEventHandler } from '#hooks';\nimport { meta } from '#meta';\nimport { type Kanban, UNCATEGORIZED_ATTRIBUTES, UNCATEGORIZED_VALUE } from '#types';\n\nimport {\n  KanbanBoardContext,\n  type KanbanBoardContextValue,\n  type KanbanCardProps,\n  type KanbanColumnProps,\n  useKanbanBoard,\n} from './context';\nimport { KanbanCard } from './KanbanCard';\nimport { KanbanColumn } from './KanbanColumn';\n\n// TODO(burdon): Rename Kanban.\n\n//\n// Root\n//\n\nconst KANBAN_BOARD_ROOT = 'KanbanBoard.Root';\n\ntype KanbanBoardRootProps = PropsWithChildren<\n  {\n    kanban: Kanban.Kanban;\n    /** Required when providing context; Root derives columnFieldPath, pivotFieldId, getPivotAttributes from kanban + projection. */\n    projection: ProjectionModel;\n    /** Atom of items (e.g. from AtomQuery for DB, or Atom.make([]) for in-memory). */\n    items: Atom.Atom<Obj.Unknown[]>;\n    onCardAdd?: (columnValue: string | undefined) => string | undefined;\n    onCardRemove?: (card: Obj.Unknown) => void;\n  } & Pick<KanbanBoardContextValue, 'change' | 'itemTile'> &\n    ComponentPropsWithoutRef<'div'>\n>;\n\nexport const KanbanBoardRoot = ({\n  children,\n  kanban,\n  projection,\n  items,\n  change,\n  itemTile = KanbanCard,\n  onCardAdd,\n  onCardRemove,\n}: KanbanBoardRootProps) => {\n  const registry = useContext(RegistryContext);\n  const { t } = useTranslation(meta.profile.key);\n  const model = useKanbanBoardModel(kanban, projection, items, registry);\n  const columns = model?.getColumns?.() ?? [];\n  const view = kanban?.spec.kind === 'view' ? kanban.spec.view.target : undefined;\n  const pivotFieldId = view?.projection?.pivotFieldId;\n  const columnFieldPath = useMemo(() => {\n    // Items-variant kanbans use the property name itself as the pivot field\n    // (no view/projection translation layer).\n    if (kanban?.spec.kind === 'items') {\n      return kanban.spec.pivotField;\n    }\n    if (pivotFieldId === undefined || !projection) {\n      return undefined;\n    }\n\n    return projection.tryGetFieldProjection(pivotFieldId)?.props.property;\n  }, [kanban?.spec, projection, pivotFieldId]);\n\n  const getPivotAttributes = useCallback<KanbanBoardContextValue['getPivotAttributes']>(\n    (columnValue) => {\n      if (columnValue === UNCATEGORIZED_VALUE) {\n        return UNCATEGORIZED_ATTRIBUTES;\n      }\n\n      const options = projection?.tryGetFieldProjection(pivotFieldId ?? '')?.props.options ?? [];\n      const option = options.find((option) => option.id === columnValue);\n      return option ?? ({ title: columnValue, color: 'neutral' } as const);\n    },\n    [projection, pivotFieldId],\n  );\n\n  if (columns.length === 0) {\n    return (\n      <div className='flex flex-1 items-center justify-center p-8 text-center text-description'>\n        {t('select-pivot.placeholder')}\n      </div>\n    );\n  }\n\n  return (\n    <KanbanBoardContext\n      kanbanId={Obj.getURI(kanban)}\n      projection={projection}\n      columnFieldPath={columnFieldPath}\n      pivotFieldId={pivotFieldId}\n      getPivotAttributes={getPivotAttributes}\n      itemTile={itemTile}\n      change={change}\n      onCardAdd={onCardAdd}\n      onCardRemove={onCardRemove}\n    >\n      <Board.Root model={model}>{children}</Board.Root>\n    </KanbanBoardContext>\n  );\n};\n\nKanbanBoardRoot.displayName = KANBAN_BOARD_ROOT;\n\n//\n// KanbanBoardContent\n//\n\nconst KANBAN_BOARD_CONTENT = 'KanbanBoard.Content';\n\ntype KanbanBoardContentProps = {};\n\nexport const KanbanBoardContent = composable<HTMLDivElement, KanbanBoardContentProps>((props, forwardedRef) => {\n  const { model } = useBoard(KANBAN_BOARD_CONTENT);\n  const { kanbanId, projection, pivotFieldId, change } = useKanbanBoard(KANBAN_BOARD_CONTENT);\n\n  const columnEventHandler = useKanbanColumnEventHandler({\n    id: `${kanbanId}-columns`,\n    model,\n    projection: projection ?? undefined,\n    pivotFieldId: pivotFieldId ?? undefined,\n    change,\n  });\n\n  return (\n    <Board.Content\n      {...composableProps(props)}\n      ref={forwardedRef}\n      eventHandler={columnEventHandler}\n      Tile={KanbanColumn}\n    />\n  );\n});\n\nKanbanBoardContent.displayName = KANBAN_BOARD_CONTENT;\n\n//\n// KanbanBoard\n//\n\nexport const KanbanBoard = {\n  Root: KanbanBoardRoot,\n  Content: KanbanBoardContent,\n  Column: KanbanColumn,\n  Card: KanbanCard,\n};\n\nexport type { KanbanBoardRootProps as KanbanBoardProps, KanbanCardProps, KanbanColumnProps };\n"],"mappings":"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"}

package/dist/lib/containers.mjs

@@ -0,0 +1,8 @@
+import { lazy } from "react";
+//#region src/containers/index.ts
+var KanbanArticle = lazy(() => import("./chunk-KanbanArticle.mjs"));
+var KanbanProperties = lazy(() => import("./chunk-KanbanProperties.mjs"));
+//#endregion
+export { KanbanArticle, KanbanProperties };
+
+//# sourceMappingURL=containers.mjs.map

package/dist/lib/containers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers.mjs","names":[],"sources":["../../src/containers/index.ts"],"sourcesContent":["//\n// Copyright 2024 DXOS.org\n//\n\nimport { type ComponentType, lazy } from 'react';\n\nexport const KanbanArticle: ComponentType<any> = lazy(() => import('./KanbanArticle'));\nexport const KanbanProperties: ComponentType<any> = lazy(() => import('./KanbanProperties'));\n"],"mappings":";;AAMA,IAAa,gBAAoC,WAAW,OAAO,4BAAkB;AACrF,IAAa,mBAAuC,WAAW,OAAO,+BAAqB"}

package/dist/lib/hooks.mjs

@@ -0,0 +1,394 @@
+import { arrayMove } from "@dxos/util";
+import { JsonSchema, Obj, Type } from "@dxos/echo";
+import { ProjectionModel, createEchoChangeCallback as createEchoChangeCallback$1 } from "@dxos/schema";
+import { UNCATEGORIZED_VALUE } from "#types";
+import { useMemo, useState } from "react";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { Atom } from "@effect-atom/atom";
+import { log } from "@dxos/log";
+//#region src/hooks/useEchoChangeCallback.ts
+/**
+* Creates a change callback for ECHO-backed kanban and items (plain function, no hooks).
+* Use this when the kanban and items are stored in the ECHO database.
+*/
+var createEchoChangeCallback = (kanban) => ({
+	kanban: (mutate) => Obj.update(kanban, (kanban) => mutate(kanban)),
+	setItemField: (item, field, value) => {
+		Obj.update(item, (item) => {
+			item[field] = value;
+		});
+	}
+});
+/**
+* Returns a memoized ECHO change callback for the given kanban.
+* Returns null when kanban is undefined.
+*/
+var useEchoChangeCallback = (kanban) => useMemo(() => kanban ? createEchoChangeCallback(kanban) : null, [kanban]);
+//#endregion
+//#region src/hooks/useItemsProjection.ts
+/**
+* Minimal `ProjectionModel` for `spec.kind === 'items'` (no View). Supplies `pivotField`
+* and column options from `arrangement.columns` keys—written by sync so columns exist
+* before refs hydrate. Stubs `getFieldProjections` / `getHiddenProperties` for shared
+* board/card UI; hides the pivot on the card body (column shows it); Expando cards render title only.
+*/
+var useItemsProjection = (kanban) => {
+	return useMemo(() => {
+		const pivotField = kanban.spec.pivotField;
+		const options = Object.keys(kanban.arrangement?.columns ?? {}).map((id) => ({
+			id,
+			title: id,
+			color: "neutral"
+		}));
+		const fieldProjection = {
+			field: {
+				id: pivotField,
+				path: pivotField
+			},
+			props: {
+				property: pivotField,
+				options
+			}
+		};
+		return {
+			fields: Atom.make(() => [fieldProjection.field]),
+			tryGetFieldProjection: (id) => id === pivotField ? fieldProjection : void 0,
+			getFieldProjections: () => [],
+			getHiddenProperties: () => [pivotField]
+		};
+	}, [kanban.arrangement?.columns, kanban.spec.pivotField]);
+};
+//#endregion
+//#region src/util/arrangement.ts
+/**
+* Column order from a raw arrangement object (e.g. when working with arrangement only).
+*
+* @param arrangement - Optional arrangement; reads order.
+* @returns Mutable copy of order array, or empty if arrangement/order missing or empty.
+*/
+var getOrderFromArrangement = (arrangement) => {
+	const order = arrangement?.order;
+	if (order != null && Array.isArray(order) && order.length > 0) return [...order];
+	return [];
+};
+/**
+* Per-column card id order and optional hidden flag from a raw arrangement object.
+*
+* Returns mutable copies so schema readonly does not leak to callers.
+*
+* @param arrangement - Optional arrangement; reads columns.
+* @returns Map of column value → { ids, hidden? }; empty object if not set.
+*/
+var getOrderByColumnFromArrangement = (arrangement) => {
+	const columns = arrangement?.columns;
+	if (columns != null && Object.keys(columns).length > 0) return Object.fromEntries(Object.entries(columns).map(([key, entry]) => {
+		const rawIds = entry.ids;
+		return [key, {
+			ids: Array.isArray(rawIds) ? [...rawIds] : [],
+			...entry.hidden !== void 0 && { hidden: entry.hidden }
+		}];
+	}));
+	return {};
+};
+/**
+* Builds the ordered list of columns (value + ids) for the board model.
+*
+* Column order: uncategorized first, then effectiveOrder, then any
+* selectOption ids not yet in order. Each entry gets the ids from
+* effectiveByColumn for that column (or empty). Columns whose entry has
+* `hidden: true` are dropped from the result — currently only the
+* "Uncategorized" column is toggleable from settings, but the filter is
+* generic so any column can be hidden via the same flag.
+*
+* @param effectiveOrder - Column order from arrangement (or previous merge).
+* @param effectiveByColumn - Per-column card id order + hidden flag from arrangement.
+* @param selectOptions - Defines valid column ids; any missing from order are appended.
+* @returns ColumnStructure array in display order.
+*/
+var computeColumnStructure = (effectiveOrder, effectiveByColumn, selectOptions) => {
+	const order = [...effectiveOrder];
+	if (!order.includes(UNCATEGORIZED_VALUE)) order.unshift(UNCATEGORIZED_VALUE);
+	for (const opt of selectOptions) if (opt.id !== UNCATEGORIZED_VALUE && !order.includes(opt.id)) order.push(opt.id);
+	return order.filter((columnValue) => effectiveByColumn[columnValue]?.hidden !== true).map((columnValue) => ({
+		columnValue,
+		ids: effectiveByColumn[columnValue]?.ids ?? []
+	}));
+};
+/**
+* Orders items for a single column: partition by saved order vs new, sort by orderMap, concatenate.
+* Uses explicit null/undefined check for itemColumn so empty string is handled consistently.
+*
+* @param items - All items to filter.
+* @param ids - Saved id order for this column.
+* @param columnValue - Column id (e.g. UNCATEGORIZED_VALUE or option id).
+* @param pivotPath - Item property key for column value (undefined = no pivot).
+* @param validColumnValues - Set of valid option ids.
+* @returns Items belonging to this column in display order.
+*/
+var orderItemsInColumn = (items, ids, columnValue, pivotPath, validColumnValues) => {
+	const orderMap = new Map(ids.map((id, index) => [id, index]));
+	const cardsWithExistingOrder = [];
+	const newCards = [];
+	for (const item of items) {
+		const itemColumn = pivotPath !== void 0 ? item[pivotPath] : void 0;
+		const isValidColumn = itemColumn != null && validColumnValues.has(itemColumn);
+		if (columnValue === UNCATEGORIZED_VALUE ? !isValidColumn : itemColumn === columnValue) (orderMap.has(item.id) ? cardsWithExistingOrder : newCards).push(item);
+	}
+	cardsWithExistingOrder.sort((a, b) => {
+		return (orderMap.get(a.id) ?? Infinity) - (orderMap.get(b.id) ?? Infinity);
+	});
+	return [...cardsWithExistingOrder, ...newCards];
+};
+//#endregion
+//#region src/hooks/useKanbanBoardModel.ts
+/**
+* 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.
+*/
+function useKanbanBoardModel(kanban, projection, itemsAtom, registry) {
+	const arrangementAtom = useMemo(() => Obj.atomProperty(kanban, "arrangement"), [kanban]);
+	const viewSnapshotAtom = useMemo(() => kanban?.spec?.kind === "view" && kanban.spec.view ? Obj.atom(kanban.spec.view) : Atom.make(() => void 0), [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;
+	}), [kanban?.spec, viewSnapshotAtom]);
+	const effectiveByColumnAtom = useMemo(() => Atom.make((get) => getOrderByColumnFromArrangement(get(arrangementAtom))), [arrangementAtom]);
+	const columnsAtom = useMemo(() => Atom.make((get) => {
+		const pivotFieldId = get(pivotFieldIdAtom);
+		if (pivotFieldId === void 0) 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);
+		return computeColumnStructure(getOrderFromArrangement(arrangement), getOrderByColumnFromArrangement(arrangement), selectOptions);
+	}), [
+		pivotFieldIdAtom,
+		arrangementAtom,
+		projection
+	]);
+	const columnArrangementAtomFamily = useMemo(() => Atom.family((columnValue) => Atom.make((get) => {
+		return {
+			columnValue,
+			ids: [...get(effectiveByColumnAtom)[columnValue]?.ids ?? []]
+		};
+	})), [effectiveByColumnAtom]);
+	const itemsAtomFamily = useMemo(() => Atom.family((columnValue) => Atom.make((get) => {
+		const columnArr = get(columnArrangementAtomFamily(columnValue));
+		const allItems = get(itemsAtom);
+		const pivotFieldId = get(pivotFieldIdAtom);
+		if (pivotFieldId === void 0) return [];
+		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.id,
+		isColumn: (obj) => typeof obj === "object" && obj !== null && "columnValue" in obj && "ids" in obj,
+		isItem: (obj) => Obj.isObject(obj),
+		columns: columnsAtom,
+		items: (column) => itemsAtomFamily(column.columnValue),
+		getColumns: () => registry.get(columnsAtom) ?? [],
+		getItems: (column) => registry.get(itemsAtomFamily(column.columnValue)) ?? []
+	}), [
+		columnsAtom,
+		itemsAtomFamily,
+		registry
+	]);
+}
+//#endregion
+//#region src/hooks/useKanbanColumnEventHandler.ts
+/**
+* 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 DndContainerHandler for column tiles.
+*/
+function useKanbanColumnEventHandler({ id, model, projection, pivotFieldId, change }) {
+	return useMemo(() => ({
+		id,
+		canDrop: ({ source }) => {
+			if (!projection) return false;
+			const data = source.data;
+			const columnValue = model.getColumnId(data);
+			return model.isColumn(source.data) && columnValue !== UNCATEGORIZED_VALUE && source.id !== UNCATEGORIZED_VALUE;
+		},
+		onDrop: ({ source, target }) => {
+			if (!projection || pivotFieldId === void 0) return;
+			const sourceColumnData = source.data;
+			const sourceColumnId = model.getColumnId(sourceColumnData);
+			if (sourceColumnId === UNCATEGORIZED_VALUE) return;
+			const currentColumns = model.getColumns();
+			const sourceIndex = currentColumns.findIndex((c) => model.getColumnId(c) === sourceColumnId);
+			if (sourceIndex === -1) return;
+			let targetIndex;
+			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;
+			const reorderedColumnIds = arrayMove([...currentColumns.map((c) => model.getColumnId(c))], sourceIndex, targetIndex);
+			const fieldProjection = projection.getFieldProjection(pivotFieldId);
+			const currentOptions = [...fieldProjection.props.options ?? []];
+			const optionsInNewOrder = reorderedColumnIds.map((columnId) => currentOptions.find((o) => o.id === columnId)).filter((o) => o != null);
+			projection.setFieldProjection({
+				...fieldProjection,
+				props: {
+					...fieldProjection.props,
+					options: optionsInNewOrder
+				}
+			});
+			change.kanban((kanban) => {
+				kanban.arrangement.order = reorderedColumnIds.filter((columnId) => columnId !== UNCATEGORIZED_VALUE);
+			});
+		}
+	}), [
+		id,
+		model,
+		projection,
+		pivotFieldId,
+		change
+	]);
+}
+//#endregion
+//#region src/hooks/useKanbanItemEventHandler.ts
+function findColumn(id, arrangement) {
+	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 DndContainerHandler for item tiles in this column.
+*/
+function useKanbanItemEventHandler({ column, columnFieldPath, model, change }) {
+	return useMemo(() => ({
+		id: column.columnValue,
+		canDrop: ({ source }) => model.isItem(source.data),
+		onTake: ({ source }, cb) => {
+			cb(source.data);
+		},
+		onDrop: ({ source, target }) => {
+			const currentArrangement = model.getColumns().map((col) => ({
+				columnValue: col.columnValue,
+				cards: model.getItems(col) ?? []
+			}));
+			const sourceColumnInSnapshot = findColumn(source.id, currentArrangement);
+			if (!sourceColumnInSnapshot) return;
+			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;
+			const sourceIndex = sourceColumnInWorking.cards.findIndex((card) => card.id === source.id);
+			if (sourceIndex === -1) return;
+			const [movedCard] = sourceColumnInWorking.cards.splice(sourceIndex, 1);
+			if (columnFieldPath !== void 0) {
+				const newValue = targetColumnInWorking.columnValue === UNCATEGORIZED_VALUE ? void 0 : targetColumnInWorking.columnValue;
+				change.setItemField(movedCard, columnFieldPath, newValue);
+			}
+			const existingTargetIndex = target?.type === "tile" ? targetColumnInWorking.cards.findIndex((card) => model.getItemId(card) === target.id) : -1;
+			const closestEdge = target?.type === "placeholder" && typeof target.location === "number" ? target.location <= targetColumnInWorking.cards.length / 2 ? "top" : "bottom" : "bottom";
+			let insertIndex;
+			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);
+			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
+	]);
+}
+//#endregion
+//#region src/hooks/useProjectionModel.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-kanban/src/hooks/useProjectionModel.ts";
+/**
+* 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.
+*/
+var useProjectionModel = (schema, kanban, registry) => {
+	const [projection, setProjection] = useState();
+	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 projection = new ProjectionModel({
+				registry,
+				view,
+				baseSchema: Type.getDatabase(schema) != null ? schema.jsonSchema : JsonSchema.toJsonSchema(schema),
+				change: createEchoChangeCallback$1(view, Type.getDatabase(schema) != null ? schema : void 0)
+			});
+			projection.normalizeView();
+			if (!controller.signal.aborted) setProjection(projection);
+		} catch (err) {
+			log.catch(err, {
+				schema,
+				kanban
+			}, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 51,
+				S: void 0
+			});
+		}
+	}, [
+		schema,
+		kanban,
+		registry
+	]);
+	return projection;
+};
+//#endregion
+export { createEchoChangeCallback, useEchoChangeCallback, useItemsProjection, useKanbanBoardModel, useKanbanColumnEventHandler, useKanbanItemEventHandler, useProjectionModel };
+
+//# sourceMappingURL=hooks.mjs.map