@dxos/react-ui-task 0.11.0 → 0.12.0-next-2800d0376abcc62d5544afdd744b16b2b960434e

package/dist/lib/index.mjs

@@ -1,60 +1,262 @@
+import { TaskSet } from "@dxos/types";
+import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContext } from "@radix-ui/react-context";
-import { Fragment, useCallback, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useObject } from "@dxos/echo-react";
-import { Icon, IconButton, Input, Tag, composable, composableProps } from "@dxos/react-ui";
-import { Listbox } from "@dxos/react-ui-list";
+import { Icon, IconButton, Input, Tag, composable, composableProps, useTranslation } from "@dxos/react-ui";
+import { Listbox, TreeDropIndicator, TreeItemToggle, paddingIndentation, useListDisclosure } from "@dxos/react-ui-list";
+import { MarkdownView } from "@dxos/react-ui-markdown";
 import { mx } from "@dxos/ui-theme";
+import { translationKey } from "#translations";
 import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TaskList/hierarchy.ts
+/**
+* Walks the set's tree in sibling order, omitting the descendants of any collapsed task.
+* Cycle-safe: a malformed `parentTask` loop is visited once and then skipped, so a corrupt set
+* renders short rather than hanging the list.
+*/
+var walkTaskTree = (tasks, collapsed) => {
+	const rows = [];
+	const seen = /* @__PURE__ */ new Set();
+	const visit = (siblings, level, ancestors) => {
+		siblings.forEach((task, index) => {
+			if (seen.has(task.id)) return;
+			seen.add(task.id);
+			const children = TaskSet.subTasks(tasks, task);
+			rows.push({
+				task,
+				level,
+				branch: children.length > 0,
+				position: index + 1,
+				setSize: siblings.length,
+				ancestors
+			});
+			if (children.length > 0 && !collapsed?.has(task.id)) visit(children, level + 1, [...ancestors, task.id]);
+		});
+	};
+	visit(TaskSet.rootTasks(tasks), 1, []);
+	return rows;
+};
+/** Every task transitively under `task`, including `task` itself. Cycle-safe. */
+var subtreeIds = (tasks, task) => {
+	const ids = /* @__PURE__ */ new Set();
+	const visit = (current) => {
+		if (ids.has(current.id)) return;
+		ids.add(current.id);
+		for (const child of TaskSet.subTasks(tasks, current)) visit(child);
+	};
+	visit(task);
+	return ids;
+};
+/**
+* Resolves a drop into a single `MoveTask` call, or `undefined` when the gesture is rejected.
+*
+* Rejected rather than silently ignored, so the caller can say no with the cursor:
+* - onto itself, or into its own subtree (the cycle `UpdateTask` rejects);
+* - onto a task from another set — a membership transfer, not a reorder.
+*/
+var resolveTaskPlacement = ({ tasks, source, target, intent }) => {
+	const present = new Set(tasks.map((task) => task.id));
+	if (!present.has(source.id) || !present.has(target.id)) return;
+	if (subtreeIds(tasks, source).has(target.id)) return;
+	if (intent === "make-child") return {
+		parentTask: target,
+		before: void 0
+	};
+	const parentId = TaskSet.parentTaskId(target);
+	const parent = parentId === void 0 ? null : tasks.find((task) => task.id === parentId) ?? null;
+	const siblings = parent === null ? TaskSet.rootTasks(tasks) : TaskSet.subTasks(tasks, parent);
+	const index = siblings.findIndex((task) => task.id === target.id);
+	if (intent === "reorder-above") return {
+		parentTask: parent,
+		before: target
+	};
+	return {
+		parentTask: parent,
+		before: siblings.slice(index + 1).find((task) => task.id !== source.id)
+	};
+};
+/** A task's siblings (in sibling order) and its index among them. */
+var siblingsOf = (tasks, task) => {
+	const parentId = TaskSet.parentTaskId(task);
+	const parent = parentId === void 0 ? null : tasks.find((candidate) => candidate.id === parentId) ?? null;
+	const siblings = parent === null ? TaskSet.rootTasks(tasks) : TaskSet.subTasks(tasks, parent);
+	return {
+		parent,
+		siblings,
+		index: siblings.findIndex((candidate) => candidate.id === task.id)
+	};
+};
+/**
+* Indent: the task becomes the last child of its previous sibling — the outliner's `Tab`. Undefined
+* when it is the first among its siblings and so has nothing to indent under.
+*/
+var resolveIndent = (tasks, task) => {
+	const { siblings, index } = siblingsOf(tasks, task);
+	const previous = index > 0 ? siblings[index - 1] : void 0;
+	return previous ? {
+		parentTask: previous,
+		before: void 0
+	} : void 0;
+};
+/**
+* Outdent: the task becomes the next sibling of its parent — the outliner's `Shift-Tab`. Undefined
+* for a task already at the root.
+*/
+var resolveOutdent = (tasks, task) => {
+	const { parent } = siblingsOf(tasks, task);
+	if (!parent) return;
+	const { parent: grandparent, siblings, index } = siblingsOf(tasks, parent);
+	return {
+		parentTask: grandparent,
+		before: siblings[index + 1]
+	};
+};
+/**
+* Move within the current parent — `Alt-ArrowUp` / `Alt-ArrowDown`. Undefined at either end, so the
+* key is a no-op rather than silently jumping the task out of its branch.
+*/
+var resolveNudge = (tasks, task, direction) => {
+	const { parent, siblings, index } = siblingsOf(tasks, task);
+	if (direction === "up") return index > 0 ? {
+		parentTask: parent,
+		before: siblings[index - 1]
+	} : void 0;
+	return index < siblings.length - 1 ? {
+		parentTask: parent,
+		before: siblings[index + 2]
+	} : void 0;
+};
+//#endregion
+//#region src/components/TaskList/dnd.ts
+/**
+* Drag payload for a task row. Tagged so a drop target can tell a task from any other draggable
+* sharing the page (the navtree, a mosaic tile) rather than reading a bare `id` off it.
+*/
+var TASK_DRAG_TYPE = "dxos/task";
+var isTaskDragData = (data) => data.type === "dxos/task" && typeof data.taskId === "string";
+/**
+* The hitbox's item mode, which decides where its bands sit: the last row of a group gets a
+* shallower `reorder-below` band (there is nothing beneath it to reorder against), and an expanded
+* branch gets none at all — below it is its own first child.
+*/
+var itemMode = ({ branch, open, last }) => branch && open ? "expanded" : last ? "last-in-group" : "standard";
+/** The drop intent an instruction expresses, or undefined when it carries none (blocked). */
+var dropIntent = (instruction) => {
+	switch (instruction?.type) {
+		case "reorder-above":
+		case "reorder-below":
+		case "make-child": return instruction.type;
+		default: return;
+	}
+};
+//#endregion
 //#region src/components/TaskList/TaskList.tsx
 var TASK_LIST_NAME = "TaskList.Root";
 /** Linear-style status groups, most active first. */
 var STATUS_ORDER = [
-	"in-progress",
+	"started",
 	"todo",
 	"done",
 	"failed",
 	"cancelled"
 ];
+/** Fallback status labels. */
 var DEFAULT_STATUS_LABELS = {
-	"in-progress": "In progress",
-	"todo": "Todo",
-	"done": "Done",
-	"failed": "Failed",
-	"cancelled": "Cancelled"
+	started: "Started",
+	todo: "To Do",
+	done: "Done",
+	failed: "Failed",
+	cancelled: "Cancelled"
 };
-/**
-* One row geometry shared by `Item` and `Create` so their affordances land in the same columns:
-* a fixed icon gutter (the status toggle above the add `+`), the flexible label, then trailing
-* chips/actions pinned to the far edge. `w-full` is load-bearing — the listbox item is a flex
-* container, so without it the grid shrinks to its content and the trailing actions float
-* mid-row. `px-3` matches the listbox item's own inset, which `Create` does not inherit.
-*/
-var ROW_GRID = "grid grid-cols-[1.5rem_1fr_auto] items-center gap-2 w-full min-w-0 px-3 h-8";
 var [TaskListProvider, useTaskListContext] = createContext(TASK_LIST_NAME);
-var TaskListRoot = ({ children, tasks, groupByStatus = true, statusLabel = (status) => DEFAULT_STATUS_LABELS[status], onTaskCreate, onTaskUpdate, onTaskDelete, onTaskSelect }) => /* @__PURE__ */ jsx(TaskListProvider, {
-	tasks,
-	groupByStatus,
-	statusLabel,
-	onTaskCreate,
-	onTaskUpdate,
-	onTaskDelete,
-	onTaskSelect,
-	children: /* @__PURE__ */ jsx(Listbox.Root, { children })
-});
+/** Shared empty set, so a list with nothing in flight does not allocate one per render. */
+var EMPTY_IDS = /* @__PURE__ */ new Set();
+var TaskListRoot = ({ children, tasks, groupByStatus = true, showGroupLabels = true, showOrdinals = false, showDescriptions = false, statusLabel = (status) => DEFAULT_STATUS_LABELS[status], onTaskCreate, onTaskUpdate, onTaskDelete, onTaskSelect, onTaskMove, selected: selectedProp, hierarchical = false, collapsed, onCollapsedChange }) => {
+	const [selectedState, setSelectedState] = useState(selectedProp);
+	const selected = selectedProp ?? selectedState;
+	const selectable = !!onTaskSelect || selectedProp !== void 0;
+	const handleValueChange = useCallback((id) => {
+		setSelectedState(id);
+		const task = tasks.find((task) => task.id === id);
+		if (task) onTaskSelect?.(task);
+	}, [tasks, onTaskSelect]);
+	const disclosure = useListDisclosure({
+		mode: "multi",
+		...collapsed !== void 0 || onCollapsedChange ? { value: collapsed } : {},
+		defaultValue: /* @__PURE__ */ new Set(),
+		onValueChange: onCollapsedChange
+	});
+	const isCollapsed = useCallback((id) => disclosure.bind(id).expanded, [disclosure]);
+	const onCollapseToggle = useCallback((id) => disclosure.bind(id).toggle(), [disclosure]);
+	const [draggingTask, setDraggingTask] = useState();
+	const dragging = useMemo(() => draggingTask ? subtreeIds(tasks, draggingTask) : EMPTY_IDS, [tasks, draggingTask]);
+	return /* @__PURE__ */ jsx(TaskListProvider, {
+		tasks,
+		groupByStatus: groupByStatus && !hierarchical,
+		showGroupLabels,
+		showOrdinals,
+		showDescriptions,
+		hierarchical,
+		showGutter: showOrdinals || !!onTaskMove,
+		statusLabel,
+		isCollapsed,
+		onCollapseToggle,
+		dragging,
+		onDraggingChange: setDraggingTask,
+		onTaskCreate,
+		onTaskUpdate,
+		onTaskDelete,
+		onTaskSelect,
+		onTaskMove,
+		selected,
+		children: /* @__PURE__ */ jsx(Listbox.Root, {
+			...selectable ? {
+				value: selected,
+				onValueChange: handleValueChange
+			} : {},
+			children
+		})
+	});
+};
 TaskListRoot.displayName = "TaskList.Root";
 var TaskListViewport = composable(({ children, ...props }, forwardedRef) => {
 	const { className, ...rest } = composableProps(props);
 	return /* @__PURE__ */ jsx(Listbox.Viewport, {
 		...rest,
-		classNames: mx("min-w-0", className),
+		classNames: mx("min-w-0 min-h-0", className),
 		ref: forwardedRef,
 		children
 	});
 });
 TaskListViewport.displayName = "TaskList.Viewport";
+/**
+* The rows and the create row are separate grids (the create row sits outside the scrolling
+* viewport), so their leading gutters — ordinal, then status — are declared once here: only
+* matching templates keep the `+` under the status control and the input under the titles.
+* Tailwind scans for whole class names, hence four literals rather than a composed prefix. The
+* status gutter is `1.5rem` because that is the width of the `density='sm'` icon button it holds;
+* a narrower track makes the button overflow it and align left instead of centring.
+*/
+var GRID_COLS = {
+	content: "grid-cols-[1.5rem_1fr_min-content_min-content_2rem]",
+	contentWithOrdinals: "grid-cols-[2rem_1.5rem_1fr_min-content_min-content_2rem]",
+	create: "grid-cols-[1.5rem_1fr]",
+	createWithOrdinals: "grid-cols-[2rem_1.5rem_1fr]"
+};
 var TaskListContent = composable((props, forwardedRef) => {
-	const { tasks, groupByStatus, statusLabel } = useTaskListContext("TaskList.Content");
-	const { className, ...rest } = composableProps(props);
+	const { tasks, groupByStatus, showGroupLabels, showOrdinals, showDescriptions, hierarchical, showGutter, statusLabel, isCollapsed } = useTaskListContext("TaskList.Content");
+	const ordinals = useMemo(() => new Map(tasks.map((task, index) => [task.id, index + 1])), [tasks]);
+	const collapsed = useMemo(() => new Set(tasks.map((task) => task.id).filter(isCollapsed)), [tasks, isCollapsed]);
+	const rows = useMemo(() => hierarchical ? walkTaskTree(tasks, collapsed) : void 0, [
+		hierarchical,
+		tasks,
+		collapsed
+	]);
 	const groups = useMemo(() => {
 		if (!groupByStatus) return tasks.length > 0 ? [{
 			status: void 0,
@@ -66,11 +268,17 @@ var TaskListContent = composable((props, forwardedRef) => {
 		})).filter((group) => group.tasks.length > 0);
 	}, [tasks, groupByStatus]);
 	return /* @__PURE__ */ jsx(Listbox.Content, {
-		...rest,
+		...composableProps(props, { classNames: mx("group grid gap-x-1 w-full min-w-0", showDescriptions ? "auto-rows-min items-start" : "auto-rows-[2rem] items-center", showGutter ? GRID_COLS.contentWithOrdinals : GRID_COLS.content) }),
 		"aria-label": "Tasks",
-		classNames: className,
 		ref: forwardedRef,
-		children: groups.map(({ status, tasks }) => /* @__PURE__ */ jsxs(Fragment, { children: [status && /* @__PURE__ */ jsx(TaskListGroupLabel, { children: statusLabel(status) }), tasks.map((task) => /* @__PURE__ */ jsx(TaskListItem, { task }, task.id))] }, status ?? "all"))
+		children: rows ? rows.map((row) => /* @__PURE__ */ jsx(TaskListItem, {
+			task: row.task,
+			ordinal: showOrdinals ? ordinals.get(row.task.id) : void 0,
+			row
+		}, row.task.id)) : groups.map(({ status, tasks }) => /* @__PURE__ */ jsxs(Fragment, { children: [status && showGroupLabels && /* @__PURE__ */ jsx(TaskListGroupLabel, { children: statusLabel(status) }), tasks.map((task) => /* @__PURE__ */ jsx(TaskListItem, {
+			task,
+			ordinal: showOrdinals ? ordinals.get(task.id) : void 0
+		}, task.id))] }, status ?? "all"))
 	});
 });
 TaskListContent.displayName = "TaskList.Content";
@@ -78,77 +286,395 @@ var TaskListGroupLabel = composable(({ children, ...props }, forwardedRef) => {
 	const { className, ...rest } = composableProps(props);
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		className: mx("px-2 pt-3 pb-1 text-xs text-subdued uppercase", className),
+		className: mx("col-span-full min-h-(--dx-control) flex items-center text-sm text-description", className),
 		ref: forwardedRef,
-		children
+		children: /* @__PURE__ */ jsx("span", { children })
 	});
 });
 TaskListGroupLabel.displayName = "TaskList.GroupLabel";
-var TaskListItem = composable(({ task, ...props }, forwardedRef) => {
-	const { onTaskUpdate, onTaskDelete, onTaskSelect } = useTaskListContext("TaskList.Item");
+/** How long the cursor must rest on a collapsed branch before it opens, so crossing one does not. */
+var EXPAND_DWELL = 600;
+/**
+* Distance from the title cell's own inline start to the title text: the disclosure toggle (`w-6`)
+* plus the cell's `gap-1`. The description sits in a different grid row and has to clear the same
+* distance to line up under the title.
+*/
+var TOGGLE_INSET = "1.75rem";
+var useTaskDrag = ({ task, row, tasks, onTaskMove, isCollapsed, onCollapseToggle, onDraggingChange }) => {
+	const rowRef = useRef(null);
+	const dragHandleRef = useRef(null);
+	const [instruction, setInstruction] = useState(null);
+	const expandTimeout = useRef(null);
+	const liftFrame = useRef(null);
+	const latest = useRef({
+		tasks,
+		onTaskMove,
+		isCollapsed,
+		onCollapseToggle,
+		onDraggingChange,
+		row
+	});
+	latest.current = {
+		tasks,
+		onTaskMove,
+		isCollapsed,
+		onCollapseToggle,
+		onDraggingChange,
+		row
+	};
+	const cancelLift = useCallback(() => {
+		if (liftFrame.current !== null) {
+			cancelAnimationFrame(liftFrame.current);
+			liftFrame.current = null;
+		}
+	}, []);
+	const cancelExpand = useCallback(() => {
+		if (expandTimeout.current) {
+			clearTimeout(expandTimeout.current);
+			expandTimeout.current = null;
+		}
+	}, []);
+	const enabled = !!onTaskMove && !!row;
+	useEffect(() => {
+		const element = rowRef.current;
+		const handle = dragHandleRef.current;
+		if (!enabled || !element || !handle) return;
+		const data = {
+			type: TASK_DRAG_TYPE,
+			taskId: task.id
+		};
+		/** The placement a drag over this row currently means, or undefined when the drop is refused. */
+		const placementFor = (instruction) => {
+			const intent = dropIntent(instruction);
+			const source = latest.current.tasks.find(({ id }) => id === draggingId.current);
+			if (!intent || !source) return;
+			return resolveTaskPlacement({
+				tasks: latest.current.tasks,
+				source,
+				target: task,
+				intent
+			});
+		};
+		return combine(draggable({
+			element: handle,
+			getInitialData: () => data,
+			onGenerateDragPreview: ({ location, nativeSetDragImage }) => {
+				const rows = subtreeRows(element, latest.current.tasks, task);
+				const { left, top } = element.getBoundingClientRect();
+				const { clientX, clientY } = location.initial.input;
+				const offset = {
+					x: clientX - left,
+					y: clientY - top
+				};
+				if (rows.length < 2) {
+					nativeSetDragImage?.(element, offset.x, offset.y);
+					return;
+				}
+				setCustomNativeDragPreview({
+					nativeSetDragImage,
+					getOffset: () => offset,
+					render: ({ container }) => renderSubtreePreview(container, element, rows)
+				});
+			},
+			onDragStart: () => {
+				draggingId.current = task.id;
+				liftFrame.current = requestAnimationFrame(() => latest.current.onDraggingChange(task));
+			},
+			onDrop: () => {
+				draggingId.current = void 0;
+				cancelLift();
+				latest.current.onDraggingChange(void 0);
+			}
+		}), dropTargetForElements({
+			element,
+			getData: ({ input, element }) => attachInstruction(data, {
+				input,
+				element,
+				indentPerLevel: 8,
+				currentLevel: (latest.current.row?.level ?? 1) - 1,
+				mode: itemMode({
+					branch: latest.current.row?.branch ?? false,
+					open: !latest.current.isCollapsed(task.id),
+					last: (latest.current.row?.position ?? 1) === (latest.current.row?.setSize ?? 1)
+				}),
+				block: []
+			}),
+			canDrop: ({ source }) => isTaskDragData(source.data) && source.data.taskId !== task.id,
+			getIsSticky: () => true,
+			onDrag: ({ self }) => {
+				const desired = extractInstruction(self.data);
+				const next = desired !== null && desired.type !== "instruction-blocked" && !placementFor(desired) ? {
+					type: "instruction-blocked",
+					desired
+				} : desired;
+				setInstruction(next);
+				const { row, isCollapsed, onCollapseToggle } = latest.current;
+				if (next?.type === "make-child" && row?.branch && isCollapsed(task.id) && !expandTimeout.current) expandTimeout.current = setTimeout(() => {
+					expandTimeout.current = null;
+					onCollapseToggle(task.id);
+				}, EXPAND_DWELL);
+				else if (next?.type !== "make-child") cancelExpand();
+			},
+			onDragLeave: () => {
+				cancelExpand();
+				setInstruction(null);
+			},
+			onDrop: ({ self, source }) => {
+				cancelExpand();
+				setInstruction(null);
+				if (!isTaskDragData(source.data)) return;
+				const moved = latest.current.tasks.find(({ id }) => id === source.data.taskId);
+				const intent = dropIntent(extractInstruction(self.data));
+				if (!moved || !intent) return;
+				const placement = resolveTaskPlacement({
+					tasks: latest.current.tasks,
+					source: moved,
+					target: task,
+					intent
+				});
+				if (placement) latest.current.onTaskMove?.(moved, placement);
+			}
+		}));
+	}, [
+		enabled,
+		task.id,
+		cancelExpand,
+		cancelLift
+	]);
+	useEffect(() => () => {
+		cancelExpand();
+		cancelLift();
+	}, [cancelExpand, cancelLift]);
+	return {
+		instruction,
+		rowRef,
+		dragHandleRef,
+		dragHandle: enabled
+	};
+};
+/**
+* The rendered rows of `task`'s subtree, in document order: the row itself plus every visible
+* descendant. A collapsed branch contributes only its own row, which is what the reader sees.
+*/
+var subtreeRows = (element, tasks, task) => {
+	const list = element.parentElement;
+	const ids = subtreeIds(tasks, task);
+	return list ? Array.from(list.querySelectorAll("[data-task-id]")).filter((row) => ids.has(row.dataset.taskId ?? "")) : [element];
+};
+/**
+* Clones the subtree into the drag preview. The container is made a grid carrying the list's own
+* track sizes: the rows are `grid-cols-subgrid`, so without them a detached copy collapses to its
+* content width and the columns no longer line up.
+*/
+var renderSubtreePreview = (container, element, rows) => {
+	const list = element.parentElement;
+	const listStyle = list && getComputedStyle(list);
+	container.style.display = "grid";
+	container.style.width = `${element.getBoundingClientRect().width}px`;
+	if (listStyle) {
+		container.style.gridTemplateColumns = listStyle.gridTemplateColumns;
+		container.style.columnGap = listStyle.columnGap;
+		container.style.gridAutoRows = listStyle.gridAutoRows;
+		container.style.alignItems = listStyle.alignItems;
+	}
+	container.classList.add("bg-base-surface");
+	for (const row of rows) container.appendChild(row.cloneNode(true));
+};
+/**
+* Id of the task currently being dragged. Module-level because the drag source and the row under
+* the cursor are different components, and the hitbox reports only the target's own data mid-drag;
+* a rejected drop has to be refused while the cursor is over it, not after the drop.
+*/
+var draggingId = { current: void 0 };
+/** A description is a line in a row, not a document: no paragraph block, no heading scale. */
+var DESCRIPTION_COMPONENTS = { p: ({ children }) => /* @__PURE__ */ jsx("span", { children }) };
+var STATUS_ICONS = {
+	todo: {
+		icon: "ph--square--regular",
+		classNames: "text-subdued"
+	},
+	started: {
+		icon: "ph--hourglass--regular",
+		classNames: "text-info-text"
+	},
+	done: {
+		icon: "ph--check--regular",
+		classNames: "text-success-text"
+	},
+	failed: {
+		icon: "ph--x--regular",
+		classNames: "text-error-text"
+	},
+	cancelled: {
+		icon: "ph--x--regular",
+		classNames: "text-error-text"
+	}
+};
+var TaskListItem = composable(({ task, ordinal, row, ...props }, forwardedRef) => {
+	const { t } = useTranslation(translationKey);
+	const { tasks, showDescriptions, showGutter, onTaskUpdate, onTaskDelete, onTaskSelect, onTaskMove, isCollapsed, onCollapseToggle, dragging, onDraggingChange } = useTaskListContext("TaskList.Item");
 	const { className, ...rest } = composableProps(props);
+	const { instruction, rowRef, dragHandleRef, dragHandle } = useTaskDrag({
+		task,
+		row,
+		tasks,
+		onTaskMove,
+		onCollapseToggle,
+		isCollapsed,
+		onDraggingChange
+	});
+	const open = row ? !isCollapsed(task.id) : void 0;
 	const [snapshot] = useObject(task);
 	const current = snapshot ?? task;
 	const done = current.status === "done";
+	const error = current.status === "failed";
+	const description = showDescriptions ? current.description?.trim() || void 0 : void 0;
+	const blocked = (current.status ?? "todo") === "todo" && !TaskSet.isTaskReady(tasks, task);
+	const { icon, classNames: iconClassNames } = current.status === "started" && current.assignee?.role === "assistant" ? {
+		icon: "ph--spinner--regular",
+		classNames: "text-info-text animate-spin"
+	} : STATUS_ICONS[current.status ?? "todo"];
 	const handleToggle = useCallback(() => onTaskUpdate?.(task, { status: done ? "todo" : "done" }), [
 		onTaskUpdate,
 		task,
 		done
 	]);
-	return /* @__PURE__ */ jsx(Listbox.Item, {
+	const handleKeyDown = useCallback((event) => {
+		if (!onTaskMove || !row || !event.altKey) return;
+		const placement = (() => {
+			switch (event.key) {
+				case "ArrowRight": return resolveIndent(tasks, task);
+				case "ArrowLeft": return resolveOutdent(tasks, task);
+				case "ArrowUp": return resolveNudge(tasks, task, "up");
+				case "ArrowDown": return resolveNudge(tasks, task, "down");
+				default: return;
+			}
+		})();
+		if (placement) {
+			event.preventDefault();
+			event.stopPropagation();
+			onTaskMove(task, placement);
+		}
+	}, [
+		onTaskMove,
+		row,
+		tasks,
+		task
+	]);
+	return /* @__PURE__ */ jsxs(Listbox.Item, {
 		...rest,
 		id: task.id,
-		classNames: mx("px-0 py-0 group", className),
-		ref: forwardedRef,
-		children: /* @__PURE__ */ jsxs("div", {
-			role: "none",
-			"data-testid": "taskList.item",
-			className: ROW_GRID,
-			children: [
-				onTaskUpdate ? /* @__PURE__ */ jsx(IconButton, {
-					variant: "ghost",
-					density: "sm",
-					icon: done ? "ph--check--regular" : "ph--circle--regular",
-					iconOnly: true,
-					label: done ? "Mark todo" : "Mark done",
-					classNames: mx("justify-self-center text-subdued", done && "text-success-text"),
-					onClick: handleToggle
-				}) : /* @__PURE__ */ jsx(Icon, {
-					icon: done ? "ph--check--regular" : "ph--circle--regular",
-					classNames: mx("justify-self-center", done && "text-success-text"),
+		"data-testid": "taskList.item",
+		"data-task-id": task.id,
+		classNames: mx("group/row col-span-full grid grid-cols-subgrid px-0 items-start relative", dragging.has(task.id) && "hidden", className),
+		"aria-level": row?.level,
+		"aria-posinset": row && row.position,
+		"aria-setsize": row && row.setSize,
+		"aria-expanded": row?.branch ? open : void 0,
+		style: row ? {
+			"--task-indent": paddingIndentation(row.level, 8).paddingInlineStart,
+			"--task-title-inset": `calc(var(--task-indent) + ${TOGGLE_INSET})`
+		} : void 0,
+		onKeyDown: handleKeyDown,
+		ref: useComposedRefs(rowRef, forwardedRef),
+		children: [
+			showGutter && /* @__PURE__ */ jsxs("div", {
+				className: "relative flex h-8 items-center justify-center",
+				children: [ordinal !== void 0 && /* @__PURE__ */ jsx(Tag, {
+					hue: done ? "green" : error ? "rose" : "neutral",
+					classNames: mx("tabular-nums", dragHandle && "group-hover/row:invisible group-has-[:focus-visible]/row:invisible"),
+					children: ordinal
+				}), dragHandle && /* @__PURE__ */ jsx("span", {
+					"data-testid": "taskList.dragHandle",
+					"aria-hidden": true,
+					className: mx("absolute inset-0 grid place-items-center text-subdued cursor-grab active:cursor-grabbing", ordinal !== void 0 && "invisible group-hover/row:visible group-has-[:focus-visible]/row:visible"),
+					ref: dragHandleRef,
+					children: /* @__PURE__ */ jsx(Icon, {
+						icon: "ph--dots-six-vertical--regular",
+						size: 4
+					})
+				})]
+			}),
+			onTaskUpdate ? /* @__PURE__ */ jsx(IconButton, {
+				classNames: mx("justify-self-center my-1", iconClassNames),
+				variant: "ghost",
+				density: "sm",
+				icon,
+				iconOnly: true,
+				label: done ? t("mark-todo.label") : t("mark-done.label"),
+				onClick: handleToggle
+			}) : /* @__PURE__ */ jsxs("span", {
+				className: "grid h-8 place-items-center justify-self-center",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon,
+					classNames: iconClassNames,
 					size: 4
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: onTaskSelect ? "truncate cursor-pointer" : "truncate",
-					onClick: onTaskSelect ? () => onTaskSelect(task) : void 0,
+				}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: t(`status-${current.status ?? "todo"}.label`)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: mx("flex h-8 items-center gap-1 min-w-0", row && "ps-(--task-indent)", onTaskSelect && "cursor-pointer"),
+				children: [row && /* @__PURE__ */ jsx(TreeItemToggle, {
+					isBranch: row.branch,
+					open,
+					onClick: (event) => {
+						event.stopPropagation();
+						onCollapseToggle(task.id);
+					}
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
 					children: current.title
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1",
-					children: [
-						current.priority && current.priority !== "none" && /* @__PURE__ */ jsx(Tag, {
-							hue: "neutral",
-							children: current.priority
-						}),
-						current.assignee && /* @__PURE__ */ jsx(TaskListAssignee, { assignee: current.assignee }),
-						onTaskDelete && /* @__PURE__ */ jsx(IconButton, {
-							variant: "ghost",
-							density: "sm",
-							icon: "ph--x--regular",
-							iconOnly: true,
-							label: "Delete task",
-							classNames: "invisible group-hover:visible",
-							onClick: () => onTaskDelete(task)
-						})
-					]
-				})
-			]
-		})
+				})]
+			}),
+			current.assignee ? /* @__PURE__ */ jsx("span", {
+				className: "flex h-8 items-center",
+				children: /* @__PURE__ */ jsx(TaskListAssignee, { assignee: current.assignee })
+			}) : /* @__PURE__ */ jsx("div", {}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex h-8 items-center gap-1",
+				children: [blocked && /* @__PURE__ */ jsx(Tag, {
+					hue: "indigo",
+					children: t("task-blocked.label")
+				}), current.priority && current.priority !== "none" && /* @__PURE__ */ jsx(Tag, {
+					hue: "neutral",
+					children: current.priority
+				})]
+			}),
+			onTaskDelete && /* @__PURE__ */ jsx(CompactIconButton, {
+				variant: "ghost",
+				icon: "ph--x--regular",
+				label: t("delete-task.label"),
+				classNames: "invisible group-hover/row:visible group-has-[:focus-visible]/row:visible",
+				onClick: () => onTaskDelete(task)
+			}),
+			instruction && /* @__PURE__ */ jsx(TreeDropIndicator, {
+				instruction,
+				gap: 0
+			}),
+			description && /* @__PURE__ */ jsx(MarkdownView, {
+				content: description,
+				classNames: mx(showGutter ? "col-start-3" : "col-start-2", row && "ps-(--task-title-inset)", "col-span-3 pb-1 text-sm text-description line-clamp-3"),
+				components: DESCRIPTION_COMPONENTS
+			})
+		]
 	});
 });
 TaskListItem.displayName = "TaskList.Item";
+var CompactIconButton = (props) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: "grid size-8 shrink-0 place-items-center",
+		children: /* @__PURE__ */ jsx(IconButton, {
+			variant: "ghost",
+			iconOnly: true,
+			density: "sm",
+			...props
+		})
+	});
+};
 var TaskListCreate = composable(({ placeholder = "Add task", ...props }, forwardedRef) => {
-	const { onTaskCreate } = useTaskListContext("TaskList.Create");
+	const { onTaskCreate, showGutter } = useTaskListContext("TaskList.Create");
 	const { className, ...rest } = composableProps(props);
 	const [title, setTitle] = useState("");
 	const handleKeyDown = useCallback((event) => {
@@ -162,19 +688,24 @@ var TaskListCreate = composable(({ placeholder = "Add task", ...props }, forward
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		"data-testid": "taskList.create",
-		className: mx(ROW_GRID, className),
+		className: mx("grid gap-x-1 items-center w-full min-w-0 h-8 shrink-0", showGutter ? GRID_COLS.createWithOrdinals : GRID_COLS.create, className),
 		ref: forwardedRef,
-		children: [/* @__PURE__ */ jsx(Icon, {
-			icon: "ph--plus--regular",
-			size: 4,
-			classNames: "justify-self-center text-subdued"
-		}), /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
-			variant: "subdued",
-			placeholder,
-			value: title,
-			onChange: (event) => setTitle(event.target.value),
-			onKeyDown: handleKeyDown
-		}) })]
+		children: [
+			showGutter && /* @__PURE__ */ jsx("span", {}),
+			/* @__PURE__ */ jsx(Icon, {
+				icon: "ph--plus--regular",
+				size: 4,
+				classNames: "justify-self-center text-subdued"
+			}),
+			/* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.TextInput, {
+				variant: "subdued",
+				classNames: "px-0",
+				placeholder,
+				value: title,
+				onChange: (event) => setTitle(event.target.value),
+				onKeyDown: handleKeyDown
+			}) })
+		]
 	});
 });
 TaskListCreate.displayName = "TaskList.Create";
@@ -204,6 +735,6 @@ var TaskList = {
 	Assignee: TaskListAssignee
 };
 //#endregion
-export { STATUS_ORDER, TaskList };
+export { STATUS_ORDER, TaskList, resolveIndent, resolveNudge, resolveOutdent, resolveTaskPlacement, subtreeIds, walkTaskTree };
 
 //# sourceMappingURL=index.mjs.map