@dxos/react-ui-task 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dist/lib/index.mjs

@@ -1,58 +1,249 @@
-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, useEffect, useMemo, useRef, useState } from "react";
-import { useObject } from "@dxos/echo-react";
-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 { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as Icon from "@dxos/react-ui/Icon";
+import * as Layout from "@dxos/react-ui/Layout";
+import * as Typography from "@dxos/react-ui/Typography";
+import { Person, PullRequest, RemoteSession, Task } from "@dxos/types";
+import { getHashHue, getStyles, mx, toHue } from "@dxos/ui-theme";
 import { translationKey } from "#translations";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/TaskList/hierarchy.ts
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Filter, Obj, Ref, Tag } from "@dxos/echo";
+import { useObject, useQuery } from "@dxos/echo-react";
+import { Tree, createStaticTreeModel } from "@dxos/react-ui-list";
+import { ActionMenu, createMenuAction, executeMenuAction, fallbackIcon } from "@dxos/react-ui-menu";
+import * as Button from "@dxos/react-ui/Button";
+import * as Tag$1 from "@dxos/react-ui/Tag";
+import * as Theme from "@dxos/react-ui/Theme";
+import * as Util from "@dxos/react-ui/Util";
+import { MarkdownEditable, MarkdownView } from "@dxos/react-ui-markdown";
+import { log } from "@dxos/log";
+import * as Field from "@dxos/react-ui/Field";
+import * as Input from "@dxos/react-ui/Input";
+import * as SystemButton from "@dxos/react-ui/SystemButton";
+import { submitOnModEnter } from "@dxos/ui-editor";
+import * as Tooltip from "@dxos/react-ui/Tooltip";
+import { RegistryContext } from "@effect/atom-react/RegistryContext";
+import { DX_POPOVER_CONTENT_ATTR, DxAnchorActivate } from "@dxos/ui-types";
+import { differenceInCalendarDays, formatDistance } from "date-fns";
+//#region src/components/task-grid.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.
+* The geometry a task's sections share: a fixed glyph column, then the content.
+*
+* Shared as a class list rather than as one grid, because the sections do not nest — properties,
+* questions and history each own their own element and could not subgrid onto a common parent
+* without becoming one component. A fixed first column is what makes them line up anyway: 24px is
+* 24px in every section, where an `auto` or `min-content` column would size to each section's own
+* widest glyph and land them a pixel or two apart.
 */
-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
+var TASK_GRID = "grid grid-cols-[1.5rem_1fr] gap-x-1 items-start";
+/** Content in the second column: a row with no glyph of its own (a question's options, its context). */
+var TASK_GRID_CONTENT = "col-start-2";
+/**
+* The glyph cell: one line box tall, so what it centres is the centre of its row's FIRST line — a
+* cell as tall as the row would float the glyph down a wrapped paragraph.
+*/
+var TASK_GRID_ICON = "col-start-1 grid place-items-center h-[1lh]";
+//#endregion
+//#region src/util/status-icons.ts
+/**
+* Every status, most active first — the order the picker offers and the order groups render in.
+*
+* It must stay exhaustive: `buildStatusGroups` renders only the statuses named here, so a status
+* left off this list would take its tasks out of a grouped view entirely rather than merely sorting
+* them late.
+*/
+var STATUS_ORDER = Task.StatusOptions.map(({ id }) => id);
+/**
+* The glyph for a field with no value set, whatever the field.
+*
+* A dot rather than a dash or an empty cell: every trailing control renders on every row so setting
+* a value never depends on discovering a hover affordance, which means an unset one still has to
+* occupy its column and read as a control. One glyph across priority, estimate and anything added
+* later is what keeps a column of unset rows reading as one column.
+*/
+var UNSET_ICON = "ph--asterisk--regular";
+var priorityIcon = (priority) => priority != null ? PRIORITY_ICONS.get(priority) ?? "ph--asterisk--regular" : UNSET_ICON;
+/**
+* A status's glyph, from the same table that gives it a title and a hue, so the flat row, the tree,
+* the picker and the form's select cannot drift apart.
+*/
+var statusIcon = (status) => STATUS_ICONS.get(status) ?? "ph--asterisk--regular";
+/**
+* Hue lookup over a schema option table.
+*
+* Colour comes from the table rather than from a map of our own so a row, its picker and the form's
+* select all paint a value the same way; `getStyles` falls back to neutral for a colour outside the
+* palette (the tables use `gray`, which is not one).
+*/
+var textStyleFor = (options) => {
+	const colors = new Map(options.map(({ id, color }) => [id, color]));
+	return (id) => getStyles(colors.get(id) ?? "neutral").text;
+};
+var statusTextStyle = textStyleFor(Task.StatusOptions);
+var priorityTextStyle = textStyleFor(Task.PriorityOptions);
+var estimateTextStyle = textStyleFor(Task.EstimateOptions);
+/** A priority's glyph, from the same table that gives it a title and a hue. */
+var PRIORITY_ICONS = new Map(Task.PriorityOptions.map(({ id, icon }) => [id, icon]));
+var STATUS_ICONS = new Map(Task.StatusOptions.map(({ id, icon }) => [id, icon]));
+//#endregion
+//#region src/components/TaskHistory/TaskHistory.tsx
+var EVENT_ICONS = {
+	created: {
+		icon: "ph--plant--regular",
+		hue: "emerald"
+	},
+	updated: {
+		icon: "ph--pencil-simple--regular",
+		hue: "indigo"
+	},
+	question: {
+		icon: "ph--question--regular",
+		hue: "amber"
+	},
+	answer: {
+		icon: "ph--check-circle--regular",
+		hue: "emerald"
+	}
+};
+/** The line an entry reads as: a change's own note. */
+var entryText = (entry) => entry.event === "question" ? entry.text : entry.event === "answer" ? entry.answer : entry.description ?? entry.event;
+/** Falls back to the unset glyph: an entry written by an older schema still renders as a row. */
+var eventIcon = (event) => EVENT_ICONS[event] ?? {
+	icon: "ph--asterisk--regular",
+	hue: "neutral"
+};
+/**
+* The log as the reader sees it, newest first. A question is an item only once answered — an open
+* one is waiting on the reader and belongs with the task's open questions, not in its record — and
+* then question and answer are one item, dated when the exchange closed.
+*/
+var buildItems = (entries, limit) => {
+	const threads = new Map(Task.getQuestions(entries).map((thread) => [thread.question.id, thread]));
+	const items = [];
+	for (const [index, entry] of [...entries].reverse().entries()) {
+		if (Task.isQuestionEntry(entry)) continue;
+		const thread = Task.isAnswerEntry(entry) ? threads.get(entry.questionId) : void 0;
+		if (thread && thread.answer === entry) {
+			const { icon, hue } = eventIcon("question");
+			items.push({
+				key: entry.id,
+				icon,
+				hue: getStyles(hue).text,
+				text: thread.question.text,
+				answer: entry.answer,
+				date: entry.date
 			});
-			if (children.length > 0 && !collapsed?.has(task.id)) visit(children, level + 1, [...ancestors, task.id]);
+			continue;
+		}
+		const { icon, hue } = eventIcon(entry.event);
+		items.push({
+			key: entry.id ?? `${entry.date}-${index}`,
+			icon,
+			hue: getStyles(hue).text,
+			text: entryText(entry),
+			date: entry.date
 		});
-	};
-	visit(TaskSet.rootTasks(tasks), 1, []);
-	return rows;
+	}
+	return items.slice(0, limit);
 };
-/** Every task transitively under `task`, including `task` itself. Cycle-safe. */
+/**
+* A task's activity log, newest first.
+*
+* Each entry already carries the human-readable record of what happened, so a line is that sentence
+* plus when it happened — the pane adds no interpretation of its own. An answered question reads as
+* one line with its answer under it; an open one is not part of the record yet.
+*/
+var TaskHistory = ({ entries, limit = 5, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const items = useMemo(() => buildItems(entries, limit), [entries, limit]);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(Layout.Container, {
+		asChild: true,
+		gutter: "inherit",
+		gap: "sm",
+		role: "list",
+		"aria-label": t("task-history.label"),
+		"data-testid": "taskList.history",
+		classNames: mx("text-sm text-fg-muted", classNames),
+		children: /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx(Typography.Text, {
+			asChild: true,
+			tone: "subtle",
+			classNames: "dx-label py-0",
+			children: /* @__PURE__ */ jsx("h2", { children: t("task-history.label") })
+		}), items.map((item) => /* @__PURE__ */ jsxs("div", {
+			role: "listitem",
+			className: mx(TASK_GRID, "min-w-0"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: TASK_GRID_ICON,
+				children: /* @__PURE__ */ jsx(Icon.Icon, {
+					icon: item.icon,
+					classNames: item.hue,
+					size: "md"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2 min-w-0",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "grow min-w-0",
+					children: [item.text, item.answer && /* @__PURE__ */ jsx("span", {
+						className: "block text-fg",
+						"data-testid": "taskList.history.answer",
+						children: item.answer
+					})]
+				}), /* @__PURE__ */ jsx(Typography.Timestamp, {
+					date: item.date,
+					classNames: "shrink-0 text-right"
+				})]
+			})]
+		}, item.key))] })
+	});
+};
+TaskHistory.displayName = "TaskList.History";
+//#endregion
+//#region src/components/TaskList/hierarchy.ts
+/**
+* The tree the list renders, and where a gesture puts a task in it. Kept out of the components
+* because this is the part a regression would break: a drop cannot be driven synthetically
+* (pragmatic-drag-and-drop uses native HTML5 drag events), so the placement calculation is tested
+* directly instead.
+*
+* `TaskSet.tasks` lists the roots and each `Task.subtasks` its own children, so every list orders
+* one set of siblings only: a parent moves without touching its subtree's entries, and a peer
+* reordering one branch cannot corrupt another.
+*/
+/** One rendered row: the task, its depth, and where it sits among its siblings. */
 var subtreeIds = (tasks, task) => {
+	const childrenOf = Task.childIndex(tasks);
 	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);
+		for (const child of childrenOf(current)) visit(child);
 	};
 	visit(task);
 	return ids;
 };
 /**
+* Places a task after `target`'s ancestor `levels` steps up — the tree hitbox's `reparent`, which
+* is how a drop past the last child escapes the subtree it would otherwise join. `levels` of 1 is
+* "after my parent", 2 "after my grandparent", and so on; running out of ancestors rejects rather
+* than silently landing at the root.
+*/
+var resolveReparent = (tasks, source, target, levels) => {
+	if (levels < 1) return;
+	let ancestor = target;
+	for (let step = 0; step < levels; step++) {
+		const parentId = ancestor && Task.parentTaskId(ancestor);
+		ancestor = parentId === void 0 ? void 0 : tasks.find((task) => task.id === parentId);
+		if (!ancestor) return;
+	}
+	return subtreeIds(tasks, source).has(ancestor.id) ? void 0 : resolveTaskPlacement({
+		tasks,
+		source,
+		target: ancestor,
+		intent: "reorder-below"
+	});
+};
+/**
 * 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:
@@ -65,11 +256,11 @@ var resolveTaskPlacement = ({ tasks, source, target, intent }) => {
 	if (subtreeIds(tasks, source).has(target.id)) return;
 	if (intent === "make-child") return {
 		parentTask: target,
-		before: void 0
+		before: Task.subTasks(tasks, target).find((child) => child.id !== source.id)
 	};
-	const parentId = TaskSet.parentTaskId(target);
+	const parentId = Task.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 siblings = parent === null ? Task.rootTasks(tasks) : Task.subTasks(tasks, parent);
 	const index = siblings.findIndex((task) => task.id === target.id);
 	if (intent === "reorder-above") return {
 		parentTask: parent,
@@ -82,9 +273,9 @@ var resolveTaskPlacement = ({ tasks, source, target, intent }) => {
 };
 /** A task's siblings (in sibling order) and its index among them. */
 var siblingsOf = (tasks, task) => {
-	const parentId = TaskSet.parentTaskId(task);
+	const parentId = Task.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);
+	const siblings = parent === null ? Task.rootTasks(tasks) : Task.subTasks(tasks, parent);
 	return {
 		parent,
 		siblings,
@@ -132,417 +323,841 @@ var resolveNudge = (tasks, task, direction) => {
 	} : 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;
-	}
+//#region src/util/assignee.ts
+/** The glyph for a person assignee. */
+var PERSON_ICON = "ph--user--regular";
+/** A DID is long and mostly shared prefix, so the start is the part that tells two apart. */
+var shortDid = (did) => `${did.slice(0, 12)}…`;
+/** An id's tail rather than its head: object ids share a timestamp prefix and harness ids a `session_` one. */
+var shortId = (id) => `…${id.slice(-8)}`;
+/**
+* How an assignee reads wherever a task names it. An assistant's actor stands for a session rather
+* than a person, so its name falls through the session's own fields before the actor's, and it
+* always has one — an agent that reads as "Agent" says an assistant holds the task but never which.
+*/
+var getAssigneeDisplay = ({ assignee, contact, subject, agentLabel }) => {
+	const session = Obj.instanceOf(RemoteSession.RemoteSession, subject) ? subject : void 0;
+	const agent = assignee.role === "assistant";
+	const sessionId = (session && RemoteSession.getSessionId(session)) ?? (session || subject === void 0 ? Task.refEntityId(assignee.subject) : void 0);
+	return {
+		label: contact?.fullName ?? session?.title ?? (session && RemoteSession.harnessName(session)) ?? assignee.name ?? assignee.email ?? (assignee.identityDid ? shortDid(assignee.identityDid) : void 0) ?? (sessionId ? shortId(sessionId) : void 0) ?? (agent ? agentLabel : void 0),
+		icon: (session && RemoteSession.harnessIcon(session)) ?? (agent ? "ph--robot--regular" : "ph--user--regular"),
+		agent,
+		session
+	};
 };
 //#endregion
-//#region src/components/TaskList/TaskList.tsx
-var TASK_LIST_NAME = "TaskList.Root";
-/** Linear-style status groups, most active first. */
-var STATUS_ORDER = [
-	"started",
-	"todo",
-	"done",
-	"failed",
-	"cancelled"
-];
-/** Fallback status labels. */
-var DEFAULT_STATUS_LABELS = {
-	started: "Started",
-	todo: "To Do",
-	done: "Done",
-	failed: "Failed",
-	cancelled: "Cancelled"
-};
-var [TaskListProvider, useTaskListContext] = createContext(TASK_LIST_NAME);
-/** 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,
+//#region src/hooks/useAssigneeDisplay.ts
+/**
+* The label and glyph for a task's assignee, resolving its contact and subject refs — shared by the
+* list's pill and the properties row so the two cannot name the same assignee differently.
+*/
+var useAssigneeDisplay = (assignee) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const [contact] = useObject(assignee?.contact);
+	const [subject] = useObject(assignee?.subject);
+	if (!assignee) return {
+		icon: PERSON_ICON,
+		agent: false
+	};
+	return getAssigneeDisplay({
+		assignee,
+		contact,
+		subject,
+		agentLabel: t("assignee-agent.label")
+	});
+};
+//#endregion
+//#region src/components/TaskList/TaskDescription.tsx
+/** 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 }) };
+/**
+* A task's description as it appears in a row. Shared by the flat list and the tree so the two
+* paths cannot drift on type scale or clamping; only the placement differs, which is the caller's
+* to supply — the flat row puts it in its own subgrid cell, the tree stacks it under the title
+* inside the heading.
+*/
+var TaskDescription = ({ content, components, classNames }) => /* @__PURE__ */ jsx(MarkdownView, {
+	"data-testid": "taskList.item.description",
+	content,
+	classNames: mx("text-sm text-fg-muted line-clamp-3", classNames),
+	uniformLineHeight: true,
+	components: {
+		...DESCRIPTION_COMPONENTS,
+		...components
+	}
+});
+var [TaskListProvider, useTaskListContext] = Hooks.createContext("TaskList.Root");
+//#endregion
+//#region src/components/TaskList/TaskRowCells.tsx
+/** The status glyph, which is also the control that completes the task. */
+var TaskStatusControl = ({ task, onTaskUpdate, active, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const status = task.status ?? "todo";
+	const { icon, classNames: iconClassNames } = active ?? Task.isAgentWorking(task) ? {
+		icon: "ph--spinner--regular",
+		classNames: "text-info-text animate-spin"
+	} : {
+		icon: statusIcon(status),
+		classNames: statusTextStyle(status)
+	};
+	const actions = useCallback(() => Task.StatusOptions.map(({ id }) => createMenuAction(`status-${id}`, () => onTaskUpdate?.(task, { status: id }), {
+		label: t(`status-${id}.label`),
+		icon: statusIcon(id),
+		iconClassNames: statusTextStyle(id),
+		checked: status === id
+	})), [
 		onTaskUpdate,
-		onTaskDelete,
-		onTaskSelect,
-		onTaskMove,
-		selected,
-		children: /* @__PURE__ */ jsx(Listbox.Root, {
-			...selectable ? {
-				value: selected,
-				onValueChange: handleValueChange
-			} : {},
-			children
+		task,
+		status,
+		t
+	]);
+	if (!onTaskUpdate) return /* @__PURE__ */ jsxs(Layout.Block, {
+		"aria-hidden": false,
+		"data-testid": "taskList.item.status",
+		classNames,
+		children: [/* @__PURE__ */ jsx(Icon.Icon, {
+			icon,
+			classNames: iconClassNames
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: t(`status-${status}.label`)
+		})]
+	});
+	const trigger = /* @__PURE__ */ jsx(Button.Root, {
+		"data-testid": "taskList.item.status",
+		iconClassNames,
+		variant: "ghost",
+		icon,
+		iconOnly: true,
+		label: t("task-status.label"),
+		onClick: (event) => event.stopPropagation()
+	});
+	return /* @__PURE__ */ jsx(Layout.Block, {
+		classNames,
+		children: /* @__PURE__ */ jsx(ActionMenu, {
+			deferUntilOpen: true,
+			actions,
+			children: trigger
 		})
 	});
 };
-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 min-h-0", className),
-		ref: forwardedRef,
-		children
+TaskStatusControl.displayName = "TaskList.StatusControl";
+/**
+* The task's reference: a button in the task's mnemonic hue that copies it. With an ordinal it shows the number, and
+* the clipboard only on hover; without one, the clipboard. At least as wide as the clipboard button, so a one-digit
+* number does not make a narrower target.
+*
+* Copies the task's full `echo://<space>/<id>` URI rather than the mnemonic it names: a mnemonic is only unique enough
+* to read, while the URI resolves the task from anywhere it is pasted — a prompt, an MCP call, another space.
+*/
+var TaskMnemonic = ({ task, ordinal, classNames }) => {
+	const mnemonic = Obj.getMnemonic(task);
+	const [copied, setCopied] = useState(false);
+	const timeoutRef = useRef(void 0);
+	useEffect(() => () => clearTimeout(timeoutRef.current), []);
+	const handleClick = (event) => {
+		event.stopPropagation();
+		navigator.clipboard.writeText(Obj.getURI(task, { prefer: "absolute" }).toString()).then(() => {
+			setCopied(true);
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = setTimeout(() => setCopied(false), 1e3);
+		}).catch(() => setCopied(false));
+	};
+	const icon = /* @__PURE__ */ jsx(Icon.Icon, { icon: copied ? "ph--check--regular" : "ph--clipboard--regular" });
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		asChild: true,
+		content: mnemonic,
+		children: /* @__PURE__ */ jsx(Button.Root, {
+			size: "sm",
+			compact: true,
+			hue: getHashHue(mnemonic),
+			"aria-label": mnemonic,
+			"data-testid": "taskList.item.mnemonic",
+			classNames: mx("group justify-center min-w-(--dx-control-size) font-mono tabular-nums", classNames),
+			onClick: handleClick,
+			children: ordinal === void 0 || copied ? icon : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"data-testid": "taskList.item.ordinal",
+				className: "group-hover:hidden",
+				children: ordinal
+			}), /* @__PURE__ */ jsx("span", {
+				className: "hidden group-hover:contents",
+				children: icon
+			})] })
+		})
 	});
-});
-TaskListViewport.displayName = "TaskList.Viewport";
+};
+TaskMnemonic.displayName = "TaskList.Mnemonic";
 /**
-* 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, 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,
-			tasks
-		}] : [];
-		return STATUS_ORDER.map((status) => ({
-			status,
-			tasks: tasks.filter((task) => (task.status ?? "todo") === status)
-		})).filter((group) => group.tasks.length > 0);
-	}, [tasks, groupByStatus]);
-	return /* @__PURE__ */ jsx(Listbox.Content, {
-		...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",
-		ref: forwardedRef,
-		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"))
+* The gutter's checkbox: which rows an action will act on, never a status write — completing a task
+* is what the status control does. It takes the ordinal's cell rather than a column of its own, so a
+* list that offers it keeps one row geometry and the trailing controls do not shift.
+*/
+var TaskCheckbox = ({ task, checked, onCheckedChange, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	return /* @__PURE__ */ jsx(Layout.Block, {
+		"aria-hidden": false,
+		classNames,
+		children: /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Input.Checkbox, {
+			checked,
+			"data-testid": "taskList.item.checkbox",
+			"aria-label": t("task-check.label"),
+			onCheckedChange: () => onCheckedChange(task),
+			onClick: (event) => event.stopPropagation()
+		}) })
 	});
-});
-TaskListContent.displayName = "TaskList.Content";
-var TaskListGroupLabel = composable(({ children, ...props }, forwardedRef) => {
-	const { className, ...rest } = composableProps(props);
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		className: mx("col-span-full min-h-(--dx-control) flex items-center text-sm text-description", className),
-		ref: forwardedRef,
-		children: /* @__PURE__ */ jsx("span", { children })
+};
+TaskCheckbox.displayName = "TaskList.Checkbox";
+/**
+* Estimate as its own label rather than a glyph: the sizes are a vocabulary a reader already knows
+* (`XS`…`XL`), and two ordinal ramps side by side would be read as one. Rendered on every row so
+* setting an estimate never depends on discovering a hover affordance, and falling back to
+* {@link UNSET_ICON} when unset — the same dot the priority column shows, so a row with neither set
+* reads as two empty controls rather than a dash beside a dot.
+*/
+var TaskEstimateControl = ({ task, classNames }) => {
+	const { onTaskUpdate } = useTaskListContext("TaskList.EstimateControl");
+	return /* @__PURE__ */ jsx(TaskEstimatePicker, {
+		estimate: task.estimate,
+		onChange: onTaskUpdate && ((estimate) => onTaskUpdate(task, { estimate: estimate ?? null })),
+		testId: "taskList.item.estimate",
+		classNames
 	});
-});
-TaskListGroupLabel.displayName = "TaskList.GroupLabel";
-/** 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
+};
+/** The estimate label and its menu over a bare value, for a row's task or a draft that has none yet. */
+var TaskEstimatePicker = ({ estimate, onChange, testId, classNames }) => {
+	const label = estimate?.toUpperCase() ?? /* @__PURE__ */ jsx(Icon.Icon, {
+		icon: "ph--asterisk--regular",
+		classNames: "text-neutral-500"
 	});
-	latest.current = {
+	if (!onChange) return /* @__PURE__ */ jsx(Layout.Block, {
+		classNames: mx(estimateTextStyle(estimate), classNames),
+		children: label
+	});
+	return /* @__PURE__ */ jsx(Layout.Block, {
+		classNames,
+		children: /* @__PURE__ */ jsx(ActionMenu, {
+			deferUntilOpen: true,
+			actions: () => [Task.NullOption, ...Task.EstimateOptions].map(({ id, title }) => createMenuAction(`estimate-${id}`, () => onChange(id === "none" ? void 0 : id), {
+				label: title,
+				checked: (estimate ?? "none") === id
+			})),
+			children: /* @__PURE__ */ jsx(Button.Root, {
+				variant: "ghost",
+				"data-testid": testId,
+				classNames: mx("w-8 px-0 text-xs tabular-nums", estimateTextStyle(estimate)),
+				onClick: (event) => event.stopPropagation(),
+				children: label
+			})
+		})
+	});
+};
+TaskEstimateControl.displayName = "TaskList.EstimateControl";
+/**
+* Priority as a signal-strength glyph rather than a word: the four levels are ordinal, so a ramp
+* reads at a glance where four differently-worded tags do not. `urgent` breaks the ramp deliberately
+* — it is a different kind of statement from "how much", and a filled mark carries that.
+*
+* The glyph is also the control: it opens a menu to set the level. It renders on every row —
+* including one with no priority, which shows a dot — so setting a priority never depends on
+* discovering a hover affordance.
+*/
+var TaskPriorityIcon = ({ task, classNames }) => {
+	const { onTaskUpdate } = useTaskListContext("TaskList.PriorityIcon");
+	return /* @__PURE__ */ jsx(TaskPriorityPicker, {
+		priority: task.priority ?? void 0,
+		onChange: onTaskUpdate && ((priority) => onTaskUpdate(task, { priority: priority ?? null })),
+		testId: "taskList.item.priority",
+		classNames
+	});
+};
+/** The priority glyph and its menu over a bare value, for a row's task or a draft that has none yet. */
+var TaskPriorityPicker = ({ priority, onChange, testId, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const icon = priorityIcon(priority);
+	const styles = priorityTextStyle(priority);
+	if (!onChange) return /* @__PURE__ */ jsx(Layout.Block, {
+		classNames,
+		children: /* @__PURE__ */ jsx(Icon.Icon, {
+			icon,
+			classNames: mx(styles)
+		})
+	});
+	return /* @__PURE__ */ jsx(Layout.Block, {
+		classNames,
+		children: /* @__PURE__ */ jsx(ActionMenu, {
+			deferUntilOpen: true,
+			actions: () => [Task.NullOption, ...Task.PriorityOptions].map(({ id, icon: optionIcon }) => createMenuAction(`priority-${id}`, () => onChange(id === "none" ? void 0 : id), {
+				label: t(`priority-${id}.label`),
+				icon: optionIcon ?? "ph--asterisk--regular",
+				iconClassNames: priorityTextStyle(id),
+				checked: (priority ?? "none") === id
+			})),
+			children: /* @__PURE__ */ jsx(Button.Root, {
+				variant: "ghost",
+				icon,
+				iconOnly: true,
+				label: t("task-priority.label"),
+				"data-testid": testId,
+				iconClassNames: styles,
+				onClick: (event) => event.stopPropagation()
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/TaskList/tracks.ts
+/**
+* A cell's place on the list's column template, by track name, on the title line. Shared by the tree's rows and the
+* edit pane, which lay out on the same template, so a field sits exactly where the value it edits is read; a cell
+* that is absent leaves its track empty. Literal so Tailwind finds the classes.
+*/
+var TRACK = {
+	gutter: "row-start-1 col-[gutter]",
+	status: "row-start-1 col-[status]",
+	title: "row-start-1 col-[title]",
+	artifacts: "row-start-1 col-[artifacts]",
+	assignee: "row-start-1 col-[assignee]",
+	estimate: "row-start-1 col-[estimate]",
+	priority: "row-start-1 col-[priority]",
+	actions: "row-start-1 col-[actions]"
+};
+//#endregion
+//#region src/components/TaskList/TaskListEditor.tsx
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-task/src/components/TaskList/TaskListEditor.tsx";
+/**
+* The detail half of the list: it edits whichever task is selected, and creates one when none is.
+*
+* Editing lives here rather than in the row because a row is 32px of shared subgrid — a field
+* opening inside it moves everything around it. A pane below the list has room to be a field.
+*
+* The fields, and nothing else. A task's questions and its history belong to the surface that has
+* room to answer and to read — the detail article — and under a list they grew the strip by a line
+* per entry, pushing the list itself off the screen.
+*/
+var TaskListEditor = Util.composable(({ placeholder, showDescription = false, descriptionPlaceholder, descriptionExtensions, createOnly = false, acceptFiles = false, ...props }, forwardedRef) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const { className, ...rest } = Util.composableProps(props);
+	const descriptionRef = useRef(null);
+	const { tasks, selected, columns, showEstimates, flush, onTaskCreate, onTaskUpdate, onTaskSelect } = useTaskListContext("TaskList.Editor");
+	const task = useMemo(() => createOnly ? void 0 : tasks.find(({ id }) => id === selected), [
+		createOnly,
 		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);
+		selected
+	]);
+	const [snapshot] = useObject(task);
+	const current = snapshot ?? task;
+	const draftDescription = useRef("");
+	const [draft, setDraft] = useState("");
+	const [draftPriority, setDraftPriority] = useState();
+	const [draftEstimate, setDraftEstimate] = useState();
+	const [files, setFiles] = useState([]);
+	const [dragOver, setDragOver] = useState(false);
+	const dragDepth = useRef(0);
+	const [createEpoch, setCreateEpoch] = useState(0);
+	const creating = useRef(false);
+	const [editingId, setEditingId] = useState(void 0);
+	if (editingId !== current?.id) {
+		setEditingId(current?.id);
+		setDraft(current?.title ?? "");
+		draftDescription.current = "";
+	}
+	const commitTitle = useCallback(() => {
+		const title = draft.trim();
+		if (task && current) {
+			if (title.length > 0 && title !== current.title) onTaskUpdate?.(task, { title });
+		} else if (title.length > 0 && !creating.current) {
+			descriptionRef.current?.commit();
+			const sentDescription = draftDescription.current;
+			const description = sentDescription.trim();
+			const sentTitle = draft;
+			const sent = files;
+			const settle = (result) => {
+				creating.current = false;
+				if (result?.error) {
+					log.warn("task create failed", { error: result.error }, {
+						"~LogMeta": "~LogMeta",
+						F: __dxlog_file,
+						L: 164,
+						S: void 0
+					});
 					return;
 				}
-				setCustomNativeDragPreview({
-					nativeSetDragImage,
-					getOffset: () => offset,
-					render: ({ container }) => renderSubtreePreview(container, element, rows)
+				const kept = new Set(result?.rejectedFiles ?? []);
+				setFiles((files) => files.filter((file) => !sent.includes(file) || kept.has(file)));
+				setDraft((draft) => draft === sentTitle ? "" : draft);
+				setDraftPriority(void 0);
+				setDraftEstimate(void 0);
+				if (draftDescription.current === sentDescription) {
+					draftDescription.current = "";
+					setCreateEpoch((epoch) => epoch + 1);
+				}
+			};
+			let result;
+			creating.current = true;
+			try {
+				result = onTaskCreate?.({
+					title,
+					...description.length > 0 && { description },
+					...draftPriority && { priority: draftPriority },
+					...draftEstimate && { estimate: draftEstimate }
+				}, sent.length > 0 ? sent : void 0);
+			} catch (error) {
+				creating.current = false;
+				log.catch(error, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file,
+					L: 192,
+					S: void 0
 				});
-			},
-			onDragStart: () => {
-				draggingId.current = task.id;
-				liftFrame.current = requestAnimationFrame(() => latest.current.onDraggingChange(task));
-			},
-			onDrop: () => {
-				draggingId.current = void 0;
-				cancelLift();
-				latest.current.onDraggingChange(void 0);
+				return;
 			}
-		}), 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
+			Promise.resolve(result).then(settle, (error) => {
+				creating.current = false;
+				log.catch(error, void 0, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file,
+					L: 197,
+					S: void 0
 				});
-				if (placement) latest.current.onTaskMove?.(moved, placement);
-			}
-		}));
+			});
+		}
+	}, [
+		draft,
+		draftPriority,
+		draftEstimate,
+		files,
+		task,
+		current,
+		onTaskCreate,
+		onTaskUpdate
+	]);
+	const handleTitleBlur = useCallback(() => {
+		if (task && current) commitTitle();
+	}, [
+		task,
+		current,
+		commitTitle
+	]);
+	const handleTitleKeyDown = useCallback((event) => {
+		if (event.key === "Enter") commitTitle();
+	}, [commitTitle]);
+	const handleSave = useCallback(() => {
+		commitTitle();
+		if (task && current) descriptionRef.current?.commit();
+		onTaskSelect?.(void 0);
+	}, [
+		commitTitle,
+		task,
+		current,
+		onTaskSelect
+	]);
+	const handleSubmit = useCallback(() => {
+		if (!(task && current) && draft.trim().length === 0) return;
+		handleSave();
+	}, [
+		task,
+		current,
+		draft,
+		handleSave
+	]);
+	const submitRef = Hooks.useDynamicRef(handleSubmit);
+	const extensions = useMemo(() => [...descriptionExtensions ?? [], submitOnModEnter({ onSubmit: () => submitRef.current() })], [descriptionExtensions]);
+	const handleCancel = useCallback(() => {
+		if (task && current) descriptionRef.current?.revert();
+		else {
+			draftDescription.current = "";
+			setCreateEpoch((epoch) => epoch + 1);
+		}
+		setDraft("");
+		setFiles([]);
+		onTaskSelect?.(void 0);
 	}, [
-		enabled,
-		task.id,
-		cancelExpand,
-		cancelLift
+		task,
+		current,
+		onTaskSelect
 	]);
-	useEffect(() => () => {
-		cancelExpand();
-		cancelLift();
-	}, [cancelExpand, cancelLift]);
+	const takesFiles = acceptFiles && !!onTaskCreate && !(task && current);
+	const handleFiles = useCallback((added) => setFiles((files) => [...files, ...added]), []);
+	const handleDragEnter = useCallback((event) => {
+		if (isFileDrag(event)) {
+			dragDepth.current++;
+			setDragOver(true);
+		}
+	}, []);
+	const handleDragLeave = useCallback((event) => {
+		if (isFileDrag(event) && --dragDepth.current <= 0) {
+			dragDepth.current = 0;
+			setDragOver(false);
+		}
+	}, []);
+	const handleDragOver = useCallback((event) => {
+		if (isFileDrag(event)) {
+			event.preventDefault();
+			event.stopPropagation();
+			event.dataTransfer.dropEffect = "copy";
+		}
+	}, []);
+	const handleDrop = useCallback((event) => {
+		dragDepth.current = 0;
+		setDragOver(false);
+		const dropped = Array.from(event.dataTransfer.files);
+		if (dropped.length > 0) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleFiles(dropped);
+		}
+	}, [handleFiles]);
+	const handlePaste = useCallback((event) => {
+		const pasted = Array.from(event.clipboardData.files);
+		if (pasted.length > 0 && !event.clipboardData.types.includes("text/plain")) {
+			event.preventDefault();
+			event.stopPropagation();
+			handleFiles(pasted);
+		}
+	}, [handleFiles]);
+	if (!onTaskCreate && !(current && onTaskUpdate)) return null;
+	const hasDescription = !!(showDescription && (current ? onTaskUpdate : onTaskCreate));
+	const canSave = draft.trim().length > 0;
+	const canCancel = !!current || canSave;
+	const editing = !!(task && current);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: mx("grid w-full min-w-0 shrink-0", (hasDescription || takesFiles && files.length > 0) && "gap-y-2", dragOver && "ring-2 ring-inset ring-accent-bg", !flush && "px-(--dx-gap-size)", className),
+		style: {
+			"gridTemplateColumns": columns,
+			"--dx-col": "auto"
+		},
+		"data-testid": "taskList.edit",
+		...takesFiles && {
+			onDragEnterCapture: handleDragEnter,
+			onDragLeaveCapture: handleDragLeave,
+			onDragOverCapture: handleDragOver,
+			onDropCapture: handleDrop,
+			onPasteCapture: handlePaste
+		},
+		ref: forwardedRef,
+		children: [
+			editing ? /* @__PURE__ */ jsx(TaskStatusControl, {
+				task,
+				classNames: mx(TRACK.status, "self-start"),
+				onTaskUpdate
+			}) : /* @__PURE__ */ jsx("span", {
+				className: mx(TRACK.status, "flex items-center justify-center h-(--dx-control) self-start"),
+				children: /* @__PURE__ */ jsx(Icon.Icon, {
+					icon: "ph--plus--regular",
+					tone: "subtle"
+				})
+			}),
+			/* @__PURE__ */ jsx(Field.Root, {
+				classNames: "row-start-1 col-start-[title] col-end-[assignee] min-w-0",
+				children: /* @__PURE__ */ jsx(Input.Root, {
+					classNames: "grow text-ellipsis",
+					"data-testid": "taskList.edit.title",
+					placeholder: current ? t("task-title.placeholder") : placeholder ?? t("add-task.placeholder"),
+					value: draft,
+					onChange: (event) => setDraft(event.target.value),
+					onKeyDown: handleTitleKeyDown,
+					onBlur: handleTitleBlur,
+					end: canSave && /* @__PURE__ */ jsx(SystemButton.Save, {
+						variant: "primary",
+						"data-testid": "taskList.edit.save",
+						tabIndex: -1,
+						onClick: handleSave,
+						onMouseDown: (event) => event.preventDefault()
+					})
+				})
+			}),
+			hasDescription && /* @__PURE__ */ jsx(Input.Frame, {
+				rows: 2,
+				"data-testid": "taskList.edit.description",
+				classNames: "row-start-2 col-[title/assignee] min-w-0",
+				children: /* @__PURE__ */ jsx(MarkdownEditable, {
+					ref: descriptionRef,
+					classNames: "[&_.cm-scroller]:!leading-normal [&_.cm-scroller]:max-h-[8lh] [&_.cm-scroller]:overflow-y-auto",
+					editing: true,
+					multiline: true,
+					placeholder: descriptionPlaceholder ?? t("task-description.placeholder"),
+					extensions,
+					autoFocus: false,
+					...current && { value: current.description ?? "" },
+					onValueChange: (description) => {
+						if (task && current) onTaskUpdate?.(task, { description });
+						else draftDescription.current = description;
+					}
+				}, current?.id ?? `create-${createEpoch}`)
+			}),
+			showEstimates && (editing ? /* @__PURE__ */ jsx(TaskEstimateControl, {
+				task,
+				classNames: TRACK.estimate
+			}) : /* @__PURE__ */ jsx(TaskEstimatePicker, {
+				estimate: draftEstimate,
+				onChange: setDraftEstimate,
+				testId: "taskList.edit.estimate",
+				classNames: TRACK.estimate
+			})),
+			editing ? /* @__PURE__ */ jsx(TaskPriorityIcon, {
+				task,
+				classNames: TRACK.priority
+			}) : /* @__PURE__ */ jsx(TaskPriorityPicker, {
+				priority: draftPriority,
+				onChange: setDraftPriority,
+				testId: "taskList.edit.priority",
+				classNames: TRACK.priority
+			}),
+			canCancel && /* @__PURE__ */ jsx(SystemButton.Cancel, {
+				variant: "ghost",
+				classNames: TRACK.actions,
+				"data-testid": "taskList.edit.cancel",
+				onClick: handleCancel,
+				onMouseDown: (event) => event.preventDefault()
+			}),
+			takesFiles && files.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: mx("col-start-[title] -col-end-1 flex flex-wrap items-center gap-1 min-w-0", hasDescription ? "row-start-3" : "row-start-2"),
+				children: files.map((file, index) => /* @__PURE__ */ jsxs(Tag$1.Tag, {
+					hue: "neutral",
+					classNames: "inline-flex items-center gap-1",
+					"data-testid": "taskList.edit.file",
+					children: [
+						/* @__PURE__ */ jsx(Icon.Icon, {
+							icon: "ph--paperclip--regular",
+							size: "xs"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							"data-testid": "taskList.edit.file.name",
+							children: file.name
+						}),
+						/* @__PURE__ */ jsx(Button.Root, {
+							variant: "ghost",
+							size: "sm",
+							iconOnly: true,
+							icon: "ph--x--regular",
+							iconSize: "xs",
+							label: t("remove-file.label", { name: file.name }),
+							classNames: "p-0 min-h-0 h-auto",
+							onClick: () => setFiles((files) => files.filter((_, position) => position !== index))
+						})
+					]
+				}, `${file.name}-${index}`))
+			})
+		]
+	});
+});
+/** Whether a drag carries files from outside the page, rather than an element dragged within it. */
+var isFileDrag = (event) => Array.from(event.dataTransfer.types).includes("Files");
+TaskListEditor.displayName = "TaskList.Editor";
+//#endregion
+//#region src/components/TaskList/tree-model.ts
+/** Prefix so a host group's node id cannot collide with a task's, nor with a status group's. */
+var TASK_GROUP_ID_PREFIX = "group:";
+/** The tree node id of a host group, which is also its key in the list's collapsed set. */
+var taskGroupNodeId = (group) => `${TASK_GROUP_ID_PREFIX}${group.id}`;
+/**
+* One collapsible header per non-empty group, its tasks beneath. Nested within a group when
+* `hierarchical`: a sub-task whose parent landed in another group is a root of its own group, since
+* the forest is built from the group's tasks alone.
+*/
+var buildTaskGroups = (groups, hierarchical = true) => ({
+	id: TASK_TREE_ROOT_ID,
+	children: groups.filter((group) => group.tasks.length > 0).map(({ tasks, ...header }) => ({
+		id: taskGroupNodeId(header),
+		group: {
+			...header,
+			count: tasks.length
+		},
+		children: (hierarchical ? buildTaskForest(tasks) : buildFlatList(tasks)).children
+	}))
+});
+/** Synthetic root; the tree renders its children. */
+var TASK_TREE_ROOT_ID = "tasks";
+/**
+* Builds the task forest. Cycle-safe: a malformed parent loop is visited once and then
+* skipped, so a corrupt set renders short rather than hanging.
+*/
+var buildTaskForest = (tasks) => {
+	const childrenOf = Task.childIndex(tasks);
+	const seen = /* @__PURE__ */ new Set();
+	const visit = (task) => {
+		seen.add(task.id);
+		const children = childrenOf(task).filter((child) => !seen.has(child.id));
+		return {
+			id: task.id,
+			task,
+			children: children.map(visit)
+		};
+	};
 	return {
-		instruction,
-		rowRef,
-		dragHandleRef,
-		dragHandle: enabled
+		id: TASK_TREE_ROOT_ID,
+		children: Task.rootTasks(tasks).filter((task) => !seen.has(task.id)).map(visit)
 	};
 };
 /**
-* 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.
+* Path to each task, keyed by id and including the synthetic root — what `Tree` addresses rows by.
+* Unambiguous because a task has exactly one parent, so it appears at exactly one path.
 */
-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];
+var buildTaskPaths = (root) => {
+	const paths = /* @__PURE__ */ new Map();
+	const visit = (node, path) => {
+		const next = [...path, node.id];
+		if (node.task) paths.set(node.id, next);
+		node.children.forEach((child) => visit(child, next));
+	};
+	visit(root, []);
+	return paths;
+};
+/** Every task as a root: the flat list, expressed as a tree of depth one. */
+var buildFlatList = (tasks) => ({
+	id: TASK_TREE_ROOT_ID,
+	children: tasks.map((task) => ({
+		id: task.id,
+		task,
+		children: []
+	}))
+});
+/** Prefix so a group's node id cannot collide with a task's. */
+var GROUP_ID_PREFIX = "status:";
+/** Builds the status-grouped forest: one group node per non-empty status, tasks flat within it. */
+var buildStatusGroups = (tasks, order) => ({
+	id: TASK_TREE_ROOT_ID,
+	children: order.map((status) => ({
+		id: `${GROUP_ID_PREFIX}${status}`,
+		status,
+		children: tasks.filter((task) => (task.status ?? "todo") === status).map((task) => ({
+			id: task.id,
+			task,
+			children: []
+		}))
+	})).filter((group) => group.children.length > 0)
+});
+/** The forest a list renders under `options` — shared by the model and the paths into it. */
+var buildTaskTree = (tasks, { groups, groupByStatus, hierarchical = true } = {}) => groups ? buildTaskGroups(groups, hierarchical) : groupByStatus ? buildStatusGroups(tasks, groupByStatus) : hierarchical ? buildTaskForest(tasks) : buildFlatList(tasks);
+/** A task's title, a group's label or translated status, or the synthetic root's id. */
+var groupLabel = (node, translationKey) => {
+	if (node.task) return node.task.title ?? node.id;
+	if (node.group) return node.group.label;
+	if (node.status) return translationKey ? [`status-${node.status}.label`, { ns: translationKey }] : node.status;
+	return node.id;
 };
 /**
-* 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.
+* A {@link StaticTreeModel} over the task forest.
+*
+* The model is rebuilt whenever the task array changes, so open state is seeded from `collapsed`
+* rather than held inside it — a collapse kept only in the model would be dropped by the next
+* rebuild, and tasks are live ECHO objects.
 */
-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));
-};
+var createTaskTreeModel = (tasks, { collapsed, groups, groupByStatus, translationKey, hierarchical = true } = {}) => createStaticTreeModel(buildTaskTree(tasks, {
+	groups,
+	groupByStatus,
+	hierarchical
+}), {
+	getChildren: (node) => node.children,
+	getProps: (node) => ({
+		label: groupLabel(node, translationKey),
+		...node.status ? { disposition: "group" } : node.group ? { testId: "taskList.group" } : { testId: "taskList.item" }
+	}),
+	isOpen: (node) => !collapsed?.has(node.id)
+});
 /**
-* 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.
+* Tasks in the order the tree shows them, a collapsed branch contributing only its own row.
+*
+* Derived from the forest the tree renders rather than from a second walk, so the ordinals a reader
+* counts down cannot drift from the rows they number.
 */
-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 flattenVisibleTasks = (root, collapsed) => {
+	const tasks = [];
+	const visit = (nodes) => {
+		for (const node of nodes) {
+			if (node.task) tasks.push(node.task);
+			if (!collapsed?.has(node.id)) visit(node.children);
+		}
+	};
+	visit(root.children);
+	return tasks;
 };
-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,
+//#endregion
+//#region src/components/TaskList/TaskTreeNode.tsx
+var TaskTreeNode = ({ groupByStatus, groups, hierarchical, tasks, collapsed, toggle, ordinals, selected, checked, columns, renderItem: Item, translationKey, showDescription = false, descriptionComponents, onCollapseToggle, onTaskCheck, onTaskSelect, onTaskUpdate, onTaskMove }) => {
+	const { flush } = useTaskListContext("TaskList.TreeNode");
+	const { t } = Hooks.useTranslation(translationKey);
+	const registry = useContext(RegistryContext);
+	const collapsedRef = useRef(collapsed);
+	collapsedRef.current = collapsed;
+	const model = useMemo(() => createTaskTreeModel(tasks, {
+		collapsed: collapsedRef.current,
+		groups,
+		groupByStatus,
+		translationKey,
+		hierarchical
+	}), [
 		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
+		groups,
+		groupByStatus,
+		translationKey,
+		hierarchical
+	]);
+	const paths = useMemo(() => buildTaskPaths(buildTaskTree(tasks, {
+		groups,
+		groupByStatus,
+		hierarchical
+	})), [
+		tasks,
+		groups,
+		groupByStatus,
+		hierarchical
+	]);
+	const previousSelected = useRef(void 0);
+	useEffect(() => {
+		const setCurrent = (id, current) => {
+			const path = id && paths.get(id);
+			if (!path) return;
+			const atom = model.stateAtom(path);
+			registry.set(atom, {
+				...registry.get(atom),
+				current
+			});
+		};
+		if (previousSelected.current !== selected) {
+			setCurrent(previousSelected.current, false);
+			previousSelected.current = selected;
+		}
+		setCurrent(selected, true);
+	}, [
+		selected,
+		model,
+		paths,
+		registry
+	]);
+	const handleOpenChange = useCallback(({ item, path, open }) => {
+		const atom = model.stateAtom(path);
+		registry.set(atom, {
+			...registry.get(atom),
+			open
+		});
+		if (open === collapsedRef.current.has(item.id)) onCollapseToggle(item.id);
+	}, [
+		model,
+		registry,
+		onCollapseToggle
 	]);
+	const canSelect = useCallback(({ item }) => !!onTaskSelect && !!item.task, [onTaskSelect]);
+	const handleSelect = useCallback(({ item, meta }) => item.task && onTaskSelect?.(item.task, { meta }), [onTaskSelect]);
 	const handleKeyDown = useCallback((event) => {
-		if (!onTaskMove || !row || !event.altKey) return;
+		if (event.key === "Escape" && selected) {
+			event.preventDefault();
+			onTaskSelect?.(void 0);
+			return;
+		}
+		const tab = event.key === "Tab";
+		if (!onTaskMove || !(event.shiftKey || tab)) return;
+		const target = event.target instanceof HTMLElement ? event.target : void 0;
+		const row = target?.closest("[data-object-id]");
+		if (!row || tab && row !== target) return;
+		const id = row.getAttribute("data-object-id");
+		const task = id ? tasks.find((task) => task.id === id) : void 0;
+		if (!task) return;
 		const placement = (() => {
 			switch (event.key) {
+				case "Tab": return event.shiftKey ? resolveOutdent(tasks, task) : resolveIndent(tasks, task);
 				case "ArrowRight": return resolveIndent(tasks, task);
 				case "ArrowLeft": return resolveOutdent(tasks, task);
 				case "ArrowUp": return resolveNudge(tasks, task, "up");
@@ -556,185 +1171,1022 @@ var TaskListItem = composable(({ task, ordinal, row, ...props }, forwardedRef) =
 			onTaskMove(task, placement);
 		}
 	}, [
-		onTaskMove,
-		row,
 		tasks,
-		task
+		selected,
+		onTaskMove,
+		onTaskSelect
 	]);
-	return /* @__PURE__ */ jsxs(Listbox.Item, {
-		...rest,
-		id: task.id,
-		"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,
+	const handleDrop = useCallback(({ instruction, source, item, atEnd }) => {
+		const sourceTask = tasks.find((task) => task.id === source.id);
+		if (!onTaskMove || !sourceTask) return;
+		if (atEnd) {
+			onTaskMove(sourceTask, {
+				parentTask: null,
+				before: void 0
+			});
+			return;
+		}
+		const targetTask = item.task;
+		if (!targetTask || instruction.type === "instruction-blocked") return;
+		const placement = instruction.type === "reparent" ? resolveReparent(tasks, sourceTask, targetTask, instruction.currentLevel - instruction.desiredLevel) : resolveTaskPlacement({
+			tasks,
+			source: sourceTask,
+			target: targetTask,
+			intent: instruction.type
+		});
+		if (placement) onTaskMove(sourceTask, placement);
+	}, [tasks, onTaskMove]);
+	const renderRow = useCallback((node) => {
+		const header = node.item?.group;
+		if (node.group || !node.item) return /* @__PURE__ */ jsx(Tree.Item, { node });
+		if (header) return /* @__PURE__ */ jsxs(Tree.Item, {
+			node,
+			children: [/* @__PURE__ */ jsx(Tree.ItemIndicator, {}), /* @__PURE__ */ jsx(TaskGroupHeading, {
+				group: header,
+				translationKey
+			})]
+		});
+		const task = node.item.task;
+		return /* @__PURE__ */ jsx(Tree.Item, {
+			node,
+			children: /* @__PURE__ */ jsx(Item, {
+				node: node.item,
+				indicator: toggle ? /* @__PURE__ */ jsx(Tree.ItemIndicator, {}) : void 0,
+				ordinal: task && ordinals.get(task.id),
+				checked: !!task && !!checked?.has(task.id),
+				translationKey,
+				showDescription,
+				descriptionComponents,
+				onTaskCheck,
+				onTaskUpdate
+			})
+		});
+	}, [
+		toggle,
+		ordinals,
+		checked,
+		translationKey,
+		showDescription,
+		descriptionComponents,
+		onTaskCheck,
+		onTaskUpdate,
+		Item
+	]);
+	return /* @__PURE__ */ jsxs(Tree.Root, {
+		id: TASK_TREE_ROOT_ID,
+		model,
+		columns,
+		multiline: true,
+		virtual: "measured",
+		draggable: !!onTaskMove,
+		leavesAcceptChildren: true,
+		dropAtEnd: true,
+		indentGuides: true,
+		canSelect,
+		onOpenChange: handleOpenChange,
+		onSelect: handleSelect,
 		onKeyDown: handleKeyDown,
-		ref: useComposedRefs(rowRef, forwardedRef),
+		onDrop: handleDrop,
+		children: [/* @__PURE__ */ jsx(Tree.Label, {
+			srOnly: true,
+			children: t("task-list.label")
+		}), /* @__PURE__ */ jsx(Tree.Content, {
+			rowInset: !flush,
+			children: renderRow
+		})]
+	});
+};
+/**
+* A group's header: its icon, label and how many tasks it holds, spanning the row from after the
+* disclosure up to the trailing controls. The count is of the group's tasks, sub-tasks included, so
+* it matches what expanding shows.
+*/
+var TaskGroupHeading = ({ group, translationKey }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "col-[2/assignee] flex min-w-0 items-center gap-2",
+		"data-testid": "taskList.group.header",
 		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
-					})
-				})]
+			group.icon && /* @__PURE__ */ jsx(Icon.Icon, {
+				icon: group.icon,
+				size: "md",
+				classNames: group.iconClassNames
 			}),
-			onTaskUpdate ? /* @__PURE__ */ jsx(IconButton, {
-				classNames: mx("justify-self-center my-1", iconClassNames),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate font-medium",
+				children: Theme.toLocalizedString(group.label, t)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-sm text-fg-muted",
+				"data-testid": "taskList.group.count",
+				children: group.count
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/TaskList/anchor-hover.ts
+/** Delay before hover opens the preview — long enough that crossing the anchor en route elsewhere does not fire it. */
+var HOVER_OPEN_DELAY = 100;
+/** Grace period after the pointer leaves the anchor/card before the preview closes, so it can travel between them. */
+var HOVER_CLOSE_DELAY = 300;
+/**
+* Hover intent for an element that previews an object in a popover card: opens after a short hover,
+* closes once the pointer has left both the anchor and the card, and stops closing on leave once the
+* reader interacts with the card.
+*/
+var AnchorHover = class {
+	#anchor;
+	#open;
+	#close;
+	#openTimer;
+	#closeTimer;
+	/** True while a card opened by hover (not click) is showing; only then does leaving dismiss it. */
+	#hoverOpen = false;
+	constructor({ anchor, open, close }) {
+		this.#anchor = anchor;
+		this.#open = open;
+		this.#close = close;
+	}
+	enter(pointerType) {
+		if (pointerType === "touch") return;
+		this.#cancelClose();
+		if (this.#hoverOpen || this.#openTimer !== void 0) return;
+		this.#openTimer = setTimeout(() => {
+			this.#openTimer = void 0;
+			this.#openFromHover();
+		}, HOVER_OPEN_DELAY);
+	}
+	leave() {
+		this.#cancelOpen();
+		if (this.#hoverOpen) this.#scheduleClose();
+	}
+	blur() {
+		if (this.#hoverOpen) this.#scheduleClose();
+	}
+	/** Cancels pending timers and stops tracking the pointer; a card already showing stays open. */
+	reset() {
+		this.#cancelOpen();
+		this.#cancelClose();
+		this.#hoverOpen = false;
+		document.removeEventListener("pointerover", this.#handleDocumentPointerOver);
+		document.removeEventListener("pointerdown", this.#handleDocumentPointerDown, { capture: true });
+	}
+	#openFromHover() {
+		this.#hoverOpen = true;
+		document.addEventListener("pointerover", this.#handleDocumentPointerOver);
+		document.addEventListener("pointerdown", this.#handleDocumentPointerDown, { capture: true });
+		this.#open();
+	}
+	#cancelOpen() {
+		if (this.#openTimer !== void 0) {
+			clearTimeout(this.#openTimer);
+			this.#openTimer = void 0;
+		}
+	}
+	#cancelClose() {
+		if (this.#closeTimer !== void 0) {
+			clearTimeout(this.#closeTimer);
+			this.#closeTimer = void 0;
+		}
+	}
+	#scheduleClose() {
+		if (this.#closeTimer === void 0) this.#closeTimer = setTimeout(() => {
+			this.#closeTimer = void 0;
+			this.reset();
+			this.#close();
+		}, HOVER_CLOSE_DELAY);
+	}
+	#handleDocumentPointerOver = (event) => {
+		const target = event.target;
+		if (target instanceof Element && (this.#anchor.contains(target) || !!target.closest(`[${DX_POPOVER_CONTENT_ATTR}]`))) this.#cancelClose();
+		else this.#scheduleClose();
+	};
+	#handleDocumentPointerDown = (event) => {
+		const target = event.target;
+		if (target instanceof Element && target.closest(`[${DX_POPOVER_CONTENT_ATTR}]`)) this.reset();
+	};
+};
+//#endregion
+//#region src/components/TaskList/usePreviewAnchor.ts
+/**
+* Wires a chip to the object it names: hovering shows the object's card, leaving closes it, and a
+* click (or Enter/Space) opens the object itself. Spread the result onto the chip.
+*/
+var usePreviewAnchor = ({ eid, label, title }) => {
+	const elementRef = useRef(null);
+	const hoverRef = useRef(void 0);
+	const dispatch = useCallback((props) => {
+		const trigger = elementRef.current;
+		if (trigger && eid) trigger.dispatchEvent(new DxAnchorActivate({
+			trigger,
+			eid,
+			label,
+			kind: "card",
+			title,
+			...props
+		}));
+	}, [
+		eid,
+		label,
+		title
+	]);
+	const dispatchRef = useRef(dispatch);
+	useEffect(() => {
+		dispatchRef.current = dispatch;
+	}, [dispatch]);
+	const ref = useCallback((element) => {
+		hoverRef.current?.reset();
+		elementRef.current = element;
+		hoverRef.current = element ? new AnchorHover({
+			anchor: element,
+			open: () => dispatchRef.current(),
+			close: () => dispatchRef.current({ state: false })
+		}) : void 0;
+	}, []);
+	const openObject = useCallback(() => {
+		hoverRef.current?.reset();
+		dispatch({ navigate: true });
+	}, [dispatch]);
+	return useMemo(() => ({
+		ref,
+		onPointerEnter: (event) => {
+			if (eid) hoverRef.current?.enter(event.pointerType);
+		},
+		onPointerLeave: () => hoverRef.current?.leave(),
+		onBlur: () => hoverRef.current?.blur(),
+		onClick: (event) => {
+			event.stopPropagation();
+			openObject();
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				event.stopPropagation();
+				openObject();
+			}
+		}
+	}), [
+		ref,
+		eid,
+		openObject
+	]);
+};
+//#endregion
+//#region src/components/TaskList/TaskList.tsx
+/** Shared empty set, so a list with nothing in flight does not allocate one per render. */
+var EMPTY_IDS = /* @__PURE__ */ new Set();
+/** Shared empty map, for a tree rendered without the ordinal gutter. */
+var EMPTY_ORDINALS = /* @__PURE__ */ new Map();
+var TaskListRoot = ({ children, tasks, groupByStatus = true, groups, showGroupLabels = true, showOrdinals = false, showDescription = false, descriptionComponents, showEstimates = false, showAssignees = true, showMnemonics = true, flush = false, hierarchical = false, collapsed, selected: selectedProp, selectable: selectableProp, checked = EMPTY_IDS, getTaskActions, onTaskCreate, onTaskUpdate, onTaskSelect, onTaskCheck, onTaskMove, onCollapsedChange }) => {
+	const [selectedState, setSelectedState] = useState(selectedProp);
+	const selected = selectedProp ?? selectedState;
+	const selectable = selectableProp ?? (!!onTaskSelect || selectedProp !== void 0);
+	const handleSelect = useCallback((task, modifiers) => {
+		setSelectedState(task?.id);
+		onTaskSelect?.(task, modifiers);
+	}, [onTaskSelect]);
+	const collapsedControlled = collapsed !== void 0 || !!onCollapsedChange;
+	const [collapsedState, setCollapsedState] = useState(EMPTY_IDS);
+	const collapsedIds = collapsedControlled ? collapsed ?? EMPTY_IDS : collapsedState;
+	const collapsedIdsRef = useRef(collapsedIds);
+	collapsedIdsRef.current = collapsedIds;
+	const isCollapsed = useCallback((id) => collapsedIds.has(id), [collapsedIds]);
+	const onCollapseToggle = useCallback((id) => {
+		const next = new Set(collapsedIdsRef.current);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		collapsedIdsRef.current = next;
+		if (!collapsedControlled) setCollapsedState(next);
+		onCollapsedChange?.(next);
+	}, [collapsedControlled, onCollapsedChange]);
+	const showGutter = showOrdinals || showMnemonics || !!onTaskCheck;
+	const hasActions = !!getTaskActions || !!onTaskCreate || !!onTaskUpdate;
+	const columns = useMemo(() => buildGridTemplate({
+		toggle: hierarchical || !!groups,
+		gutter: (onTaskCheck ? 1 : 0) + (showOrdinals || showMnemonics ? 1 : 0),
+		showEstimates,
+		showAssignees,
+		hasActions
+	}), [
+		hierarchical,
+		groups,
+		showOrdinals,
+		onTaskCheck,
+		showMnemonics,
+		showEstimates,
+		showAssignees,
+		hasActions
+	]);
+	return /* @__PURE__ */ jsx(TaskListProvider, {
+		tasks,
+		columns,
+		groupByStatus,
+		groups,
+		showGroupLabels,
+		showOrdinals,
+		showDescription,
+		descriptionComponents,
+		showEstimates,
+		hierarchical,
+		showGutter,
+		showAssignees,
+		showMnemonics,
+		flush,
+		isCollapsed,
+		selected,
+		checked,
+		getTaskActions,
+		onCollapseToggle,
+		onTaskCreate,
+		onTaskUpdate,
+		onTaskSelect: selectable ? handleSelect : void 0,
+		onTaskCheck,
+		onTaskMove,
+		children
+	});
+};
+TaskListRoot.displayName = "TaskList.Root";
+var TaskListViewport = Util.composable(({ children, rows: rowsProp, ...props }, forwardedRef) => {
+	const { className, style, ...rest } = Util.composableProps(props);
+	const rows = rowsProp === void 0 ? void 0 : Math.max(Math.floor(rowsProp), 0);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: mx("flex flex-col min-h-0 dx-shrink", className),
+		style: rows === void 0 ? style : {
+			...style,
+			maxHeight: `calc(${rows} * var(--dx-block-size))`
+		},
+		ref: forwardedRef,
+		children
+	});
+});
+TaskListViewport.displayName = "TaskList.Viewport";
+/** Ordinals stop at 99: the gutter is sized for two digits. */
+var MAX_ORDINAL = 99;
+/**
+* One column template per list, built from its options and shared by the tree's rows and the edit pane (the create row
+* sits outside the scrolling tree, in a grid of its own), so the pane's icon sits under the rows' status controls and
+* its field starts where their titles do.
+*
+* Every cell is placed by its track's name ({@link TRACK}), so a track exists only when its option is on and an absent
+* cell leaves its track empty. The first track is the tree's disclosure — at no width in a flat list — and goes unnamed:
+* the row wraps its columns in `[content-start] …`, and two bracketed names with no track between them invalidate the
+* template. The disclosure is the one cell not placed by name; it flows into that first track.
+*/
+var buildGridTemplate = ({ toggle, gutter, showEstimates, showAssignees, hasActions }) => {
+	return [
+		[void 0, toggle ? "var(--dx-half-block-size)" : "0px"],
+		gutter > 0 && ["gutter", `calc(${gutter} * var(--dx-block-size))`],
+		["status", "var(--dx-block-size)"],
+		["title", "minmax(0, 1fr)"],
+		["artifacts", "auto"],
+		["assignee", showAssignees ? "var(--dx-block-size)" : "0px"],
+		showEstimates && ["estimate", "var(--dx-block-size)"],
+		["priority", "var(--dx-block-size)"],
+		hasActions && ["actions", "var(--dx-block-size)"]
+	].filter((track) => track !== false).map(([name, size]) => name ? `[${name}] ${size}` : size).join(" ");
+};
+var TaskListContent = (_props) => {
+	const { tasks, groupByStatus, groups, hierarchical, selected, checked, showGroupLabels, showOrdinals, showDescription, descriptionComponents, showGutter, columns, isCollapsed, onCollapseToggle, onTaskCheck, onTaskSelect, onTaskUpdate, onTaskMove } = useTaskListContext("TaskList.Content");
+	const collapsed = useMemo(() => new Set([...tasks.map((task) => task.id), ...(groups ?? []).map((group) => taskGroupNodeId(group))].filter(isCollapsed)), [
+		tasks,
+		groups,
+		isCollapsed
+	]);
+	const grouping = !groups && !hierarchical && groupByStatus && showGroupLabels ? STATUS_ORDER : void 0;
+	const ordinals = useMemo(() => {
+		const ordered = groups ? flattenVisibleTasks(buildTaskGroups(groups, hierarchical), collapsed) : grouping ? grouping.flatMap((status) => tasks.filter((task) => (task.status ?? "todo") === status)) : hierarchical ? flattenVisibleTasks(buildTaskForest(tasks), collapsed) : tasks;
+		return new Map(ordered.flatMap((task, index) => index < MAX_ORDINAL ? [[task.id, index + 1]] : []));
+	}, [
+		tasks,
+		collapsed,
+		groups,
+		grouping,
+		hierarchical
+	]);
+	return /* @__PURE__ */ jsx(TaskTreeNode, {
+		descriptionComponents,
+		hierarchical,
+		groupByStatus: grouping,
+		groups,
+		tasks,
+		collapsed,
+		toggle: hierarchical || !!groups,
+		columns,
+		ordinals: showOrdinals ? ordinals : EMPTY_ORDINALS,
+		selected,
+		checked,
+		showDescription,
+		renderItem: TaskListItem,
+		translationKey,
+		onCollapseToggle,
+		onTaskCheck,
+		onTaskSelect,
+		onTaskUpdate,
+		onTaskMove
+	});
+};
+TaskListContent.displayName = "TaskList.Content";
+var TaskListGroupLabel = Util.composable(({ children, ...props }, forwardedRef) => {
+	const { className, ...rest } = Util.composableProps(props);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className: mx("col-span-full min-h-(--dx-control) flex items-center text-sm text-fg-muted", className),
+		ref: forwardedRef,
+		children: /* @__PURE__ */ jsx("span", { children })
+	});
+});
+TaskListGroupLabel.displayName = "TaskList.GroupLabel";
+/**
+* A task's row in the tree, read-only apart from its own controls: each cell placed by its track's name, as the edit
+* pane's are, so the pane's fields sit where these values are read.
+*/
+var TaskListItem = ({ node, indicator, ordinal, checked, translationKey: itemTranslationKey, showDescription, descriptionComponents, onTaskCheck, onTaskUpdate }) => {
+	const { t } = Hooks.useTranslation(itemTranslationKey);
+	const { showGutter, showMnemonics, showAssignees, showEstimates } = useTaskListContext("TaskList.Item");
+	const task = node.task;
+	const [snapshot] = useObject(task);
+	const current = snapshot ?? task;
+	if (!task || !current) return null;
+	const description = showDescription ? current.description?.trim() || void 0 : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		indicator,
+		showGutter && /* @__PURE__ */ jsxs(Layout.Flex, {
+			center: true,
+			gap: "xs",
+			classNames: TRACK.gutter,
+			children: [onTaskCheck && /* @__PURE__ */ jsx(TaskCheckbox, {
+				task,
+				checked,
+				onCheckedChange: onTaskCheck
+			}), (showMnemonics || ordinal !== void 0) && /* @__PURE__ */ jsx(TaskMnemonic, {
+				task,
+				ordinal: onTaskCheck ? void 0 : ordinal
+			})]
+		}),
+		/* @__PURE__ */ jsx(TaskStatusControl, {
+			task,
+			onTaskUpdate,
+			classNames: TRACK.status
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"data-testid": "taskList.item.title",
+			"data-placeholder": t("task-title.placeholder"),
+			className: mx(TRACK.title, "min-w-0 truncate px-(--dx-gap-size) self-center", "empty:before:text-placeholder empty:before:content-[attr(data-placeholder)]"),
+			children: current.title
+		}),
+		/* @__PURE__ */ jsx(Layout.Flex, {
+			align: "center",
+			gap: "xs",
+			classNames: mx(TRACK.artifacts, "ps-1"),
+			"data-testid": "taskList.item.artifacts",
+			children: /* @__PURE__ */ jsx(TaskListItemArtifacts, {
+				task,
+				filter: (artifact) => PullRequest.instanceOf(artifact)
+			})
+		}),
+		showAssignees && current.assignee && /* @__PURE__ */ jsx(Layout.Grid, {
+			center: true,
+			classNames: TRACK.assignee,
+			children: /* @__PURE__ */ jsx(TaskListAssignee, {
+				assignee: current.assignee,
+				iconOnly: true
+			})
+		}),
+		showEstimates && /* @__PURE__ */ jsx(TaskEstimateControl, {
+			task,
+			classNames: TRACK.estimate
+		}),
+		/* @__PURE__ */ jsx(TaskPriorityIcon, {
+			task,
+			classNames: TRACK.priority
+		}),
+		/* @__PURE__ */ jsx(TaskListItemActions, {
+			task,
+			classNames: TRACK.actions
+		}),
+		/* @__PURE__ */ jsx(Layout.Flex, {
+			align: "center",
+			classNames: "col-[title] row-start-2 empty:hidden",
+			"data-testid": "taskList.item.chips",
+			children: /* @__PURE__ */ jsx(TaskListItemTags, {
+				task,
+				tags: Obj.getMeta(task).tags
+			})
+		}),
+		description && /* @__PURE__ */ jsx(TaskDescription, {
+			content: description,
+			components: descriptionComponents,
+			classNames: "col-[title/assignee] row-start-3 min-w-0 px-(--dx-gap-size) mb-1"
+		})
+	] });
+};
+var isMenuAction = (item) => "data" in item && typeof item.data === "function";
+/**
+* A row's contributed actions. One is a plain button — a `…` menu hiding a single item costs a click
+* to discover nothing — and several collapse into the overflow menu, matching the nav tree's rows.
+*/
+var TaskListItemActions = ({ task, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const { getTaskActions } = useTaskListContext("TaskList.ItemActions");
+	const actions = useMemo(() => getTaskActions?.(task) ?? [], [getTaskActions, task]);
+	if (actions.length === 0) return null;
+	const [only] = actions;
+	if (actions.length === 1 && isMenuAction(only)) return /* @__PURE__ */ jsx(Tree.ItemActions, { children: /* @__PURE__ */ jsx(Layout.Block, {
+		classNames,
+		children: /* @__PURE__ */ jsx(Button.Root, {
+			variant: "ghost",
+			iconOnly: true,
+			icon: only.properties?.icon ?? fallbackIcon,
+			label: Theme.toLocalizedString(only.properties?.label, t),
+			"data-testid": only.properties?.testId,
+			onClick: (event) => {
+				event.stopPropagation();
+				executeMenuAction(only);
+			}
+		})
+	}) });
+	return /* @__PURE__ */ jsx(Tree.ItemActions, { children: /* @__PURE__ */ jsx(Layout.Block, {
+		classNames,
+		children: /* @__PURE__ */ jsx(ActionMenu, {
+			deferUntilOpen: true,
+			actions,
+			children: /* @__PURE__ */ jsx(Button.Root, {
 				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: "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
-				})]
+				icon: "ph--dots-three-vertical--regular",
+				label: t("task-actions.label"),
+				"data-testid": "taskList.item.actions",
+				onClick: (event) => event.stopPropagation()
+			})
+		})
+	}) });
+};
+TaskListItemActions.displayName = "TaskList.ItemActions";
+/**
+* What a task produced, one tag each. Queried rather than read off `ref.target`: on a cold load the
+* targets are not in memory yet, and a sync read would leave the row permanently empty.
+*/
+var TaskListItemArtifacts = ({ task, filter }) => {
+	const db = Obj.getDatabase(task);
+	const ids = useMemo(() => (task.artifacts ?? []).flatMap((ref) => {
+		const id = Task.refEntityId(ref);
+		return id ? [id] : [];
+	}), [task.artifacts]);
+	const queried = useQuery(ids.length > 0 ? db : void 0, Filter.id(...ids));
+	const resolved = db ? queried : (task.artifacts ?? []).flatMap((ref) => ref.target ? [ref.target] : []);
+	const artifacts = filter ? resolved.filter(filter) : resolved;
+	return /* @__PURE__ */ jsx(Fragment, { children: artifacts.map((artifact) => /* @__PURE__ */ jsx(ArtifactTag, { artifact }, artifact.id)) });
+};
+TaskListItemArtifacts.displayName = "TaskList.ItemArtifacts";
+/**
+* Everything a task carries as a chip: its tags, what it produced, and who has it.
+*/
+var TaskTags = ({ task }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TaskListItemTags, {
+		task,
+		tags: Obj.getMeta(task).tags
+	}), /* @__PURE__ */ jsx(TaskListItemArtifacts, {
+		task,
+		filter: (artifact) => PullRequest.instanceOf(artifact)
+	})] });
+};
+TaskTags.displayName = "TaskList.Tags";
+/**
+* The task's tags, as chips in the same cell as its artifacts and assignee. Queried by id for the
+* reason artifacts are: a tag's target is not in memory on a cold load.
+*/
+var TaskListItemTags = ({ task, tags }) => {
+	const db = Obj.getDatabase(task);
+	const ids = useMemo(() => tags.flatMap((ref) => {
+		const id = Task.refEntityId(ref);
+		return id ? [id] : [];
+	}), [tags]);
+	const queried = useQuery(ids.length > 0 ? db : void 0, Filter.id(...ids));
+	const resolved = db ? queried : tags.flatMap((ref) => ref.target ? [ref.target] : []);
+	const labelled = useMemo(() => resolved.filter((object) => Obj.instanceOf(Tag.Tag, object)).sort(Tag.sortTags), [resolved]);
+	return /* @__PURE__ */ jsx(Fragment, { children: labelled.map((tag) => /* @__PURE__ */ jsx(Tag$1.Tag, {
+		hue: toHue(tag.hue),
+		"data-testid": "taskList.item.tag",
+		children: tag.label
+	}, tag.id)) });
+};
+TaskListItemTags.displayName = "TaskList.ItemTags";
+/**
+* One artifact, as a tag: hovering shows the object's card and clicking opens the object. The tag
+* takes no tab stop of its own, since inside a listbox option it would split the row into several
+* arrow-key stops.
+*
+* A {@link PullRequest.PullRequest} renders as its `#number` pill — the form a PR link takes in
+* markdown — so a row reads the same as the text that references it.
+*/
+var ArtifactTag = ({ artifact }) => {
+	const label = Obj.getLabel(artifact) ?? Obj.getTypename(artifact) ?? "";
+	const anchor = usePreviewAnchor({
+		eid: Obj.getURI(artifact).toString(),
+		label
+	});
+	if (PullRequest.instanceOf(artifact)) return /* @__PURE__ */ jsx(Button.Root, {
+		...anchor,
+		hue: "neutral",
+		size: "sm",
+		classNames: "bg-input-surface text-fg font-normal ring-inset ring ring-neutral-border hover:bg-hover-surface hover:ring-info-border",
+		icon: "ph--git-pull-request--regular",
+		iconClassNames: pullRequestStateStyle[artifact.state],
+		label: `#${artifact.number}`,
+		tabIndex: -1
+	});
+	return /* @__PURE__ */ jsx(Tag$1.Tag, {
+		...anchor,
+		hue: "amber",
+		classNames: "cursor-pointer",
+		children: label
+	});
+};
+ArtifactTag.displayName = "TaskList.ArtifactTag";
+/** GitHub's own state colours, so the icon reads as open, merged or closed at a glance. */
+var pullRequestStateStyle = {
+	open: "text-green-500",
+	merged: "text-violet-500",
+	closed: "text-red-500",
+	draft: "text-fg-muted"
+};
+var TaskListAssignee = Util.composable(({ assignee, iconOnly }, _forwardedRef) => {
+	const { label, icon, agent, session: harness } = useAssigneeDisplay(assignee);
+	const [session] = useObject(assignee.subject);
+	const anchor = usePreviewAnchor({
+		eid: session && Obj.getURI(session).toString(),
+		label: label ?? "",
+		title: harness?.title ?? label
+	});
+	if (!label && !agent) return null;
+	const hue = agent ? "purple" : "indigo";
+	if (iconOnly && label) return /* @__PURE__ */ jsx(Button.Root, {
+		iconOnly: true,
+		icon,
+		hue,
+		label,
+		showTooltip: !session,
+		"data-testid": "taskList.item.assignee",
+		...session && anchor
+	});
+	return /* @__PURE__ */ jsxs(Tag$1.Tag, {
+		hue,
+		"data-testid": "taskList.item.assignee",
+		...session && {
+			...anchor,
+			role: "button",
+			tabIndex: 0
+		},
+		classNames: session && "cursor-pointer",
+		children: [agent && /* @__PURE__ */ jsx(Icon.Icon, {
+			icon,
+			classNames: "inline-block size-4 me-1"
+		}), label]
+	});
+});
+TaskListAssignee.displayName = "TaskList.Assignee";
+var TaskList = {
+	Root: TaskListRoot,
+	Viewport: TaskListViewport,
+	Content: TaskListContent,
+	GroupLabel: TaskListGroupLabel,
+	Assignee: TaskListAssignee,
+	Editor: TaskListEditor
+};
+//#endregion
+//#region src/components/TaskProperties/TaskProperties.tsx
+/** The glyph for an estimate, which the list renders as letters and has none of its own. */
+var ESTIMATE_ICON = "ph--ruler--regular";
+/**
+* A task's own fields as a labelled list: one row each for status, priority and estimate, the glyph
+* naming the field and the value beside it.
+*
+* A list rather than the row of icon buttons the task list uses. A row has one line and many tasks,
+* so a glyph alone is the only thing that fits and the reader learns the ramp; a detail pane has one
+* task and the room to say what the glyph means — and an unset field can then invite the value
+* ("Set estimate") instead of showing a dot that reads as a value of its own.
+*/
+var TaskProperties = ({ task, members = [], onTaskUpdate, classNames }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const status = task.status ?? "todo";
+	const priority = task.priority ?? void 0;
+	const estimate = task.estimate ?? void 0;
+	const assignee = task.assignee ?? void 0;
+	const db = Obj.getDatabase(task);
+	const people = useQuery(onTaskUpdate ? db : void 0, Filter.type(Person.Person));
+	const { label: assigneeLabel, icon: assigneeIcon } = useAssigneeDisplay(assignee);
+	const { createdAt } = Obj.getMeta(task);
+	return /* @__PURE__ */ jsx(Layout.Container, {
+		asChild: true,
+		gutter: "inherit",
+		gap: "sm",
+		classNames,
+		"data-testid": "taskList.properties",
+		children: /* @__PURE__ */ jsxs("section", { children: [
+			/* @__PURE__ */ jsx(Typography.Text, {
+				asChild: true,
+				tone: "subtle",
+				classNames: "dx-label py-0",
+				children: /* @__PURE__ */ jsx("h2", { children: t("task-properties.label") })
 			}),
-			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
+				className: mx(TASK_GRID, "items-center min-h-(--dx-control-sm) min-w-0"),
+				"data-testid": "taskList.property.reference",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: TASK_GRID_ICON,
+					children: /* @__PURE__ */ jsx(TaskMnemonic, { task })
+				}), /* @__PURE__ */ jsx(Typography.Text, {
+					tone: "muted",
+					classNames: "text-sm",
+					children: Obj.getMnemonic(task)
 				})]
 			}),
-			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)
+			createdAt !== void 0 && /* @__PURE__ */ jsx(TaskProperty, {
+				icon: "ph--calendar-plus--regular",
+				label: /* @__PURE__ */ jsx(Typography.Timestamp, { date: createdAt }),
+				unset: true,
+				testId: "taskList.property.created"
+			}),
+			/* @__PURE__ */ jsx(TaskProperty, {
+				icon: statusIcon(status),
+				iconClassNames: statusTextStyle(status),
+				label: t(`status-${status}.label`),
+				testId: "taskList.property.status",
+				actions: onTaskUpdate && (() => Task.StatusOptions.map(({ id }) => createMenuAction(`status-${id}`, () => onTaskUpdate(task, { status: id }), {
+					label: t(`status-${id}.label`),
+					icon: statusIcon(id),
+					iconClassNames: statusTextStyle(id),
+					checked: status === id
+				})))
+			}),
+			/* @__PURE__ */ jsx(TaskProperty, {
+				icon: assignee ? assigneeIcon : UNSET_ICON,
+				label: assigneeLabel ?? t("set-assignee.label"),
+				unset: !assignee,
+				testId: "taskList.property.assignee",
+				actions: onTaskUpdate && (() => [
+					createMenuAction("assignee-none", () => onTaskUpdate(task, { assignee: null }), {
+						label: t("assignee-none.label"),
+						icon: "ph--asterisk--regular",
+						checked: !assignee
+					}),
+					...assignee && !assignee.contact && !members.some((member) => member.did === assignee.identityDid) && assigneeLabel ? [createMenuAction("assignee-current", () => {}, {
+						label: assigneeLabel,
+						icon: assigneeIcon,
+						checked: true,
+						testId: "taskList.assignee.current"
+					})] : [],
+					...members.map((member) => createMenuAction(`assignee-member-${member.did}`, () => onTaskUpdate(task, { assignee: {
+						identityDid: member.did,
+						name: member.name
+					} }), {
+						label: member.name ?? shortDid(member.did),
+						icon: "ph--user--regular",
+						checked: assignee?.identityDid === member.did,
+						testId: "taskList.assignee.member"
+					})),
+					...people.map((person) => createMenuAction(`assignee-${person.id}`, () => onTaskUpdate(task, { assignee: { contact: Ref.make(person) } }), {
+						label: Obj.getLabel(person) ?? person.id,
+						icon: "ph--user--regular",
+						checked: Task.refEntityId(assignee?.contact) === person.id
+					}))
+				])
 			}),
-			instruction && /* @__PURE__ */ jsx(TreeDropIndicator, {
-				instruction,
-				gap: 0
+			/* @__PURE__ */ jsx(TaskProperty, {
+				icon: priorityIcon(priority),
+				iconClassNames: priorityTextStyle(priority),
+				label: priority ? t(`priority-${priority}.label`) : t("set-priority.label"),
+				unset: !priority,
+				testId: "taskList.property.priority",
+				actions: onTaskUpdate && (() => [Task.NullOption, ...Task.PriorityOptions].map(({ id, icon }) => createMenuAction(`priority-${id}`, () => onTaskUpdate(task, { priority: id === "none" ? null : id }), {
+					label: t(`priority-${id}.label`),
+					icon: icon ?? "ph--asterisk--regular",
+					iconClassNames: priorityTextStyle(id),
+					checked: (priority ?? "none") === id
+				})))
 			}),
-			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
+			/* @__PURE__ */ jsx(TaskProperty, {
+				icon: estimate ? ESTIMATE_ICON : UNSET_ICON,
+				iconClassNames: estimateTextStyle(estimate),
+				label: estimate ? estimate.toUpperCase() : t("set-estimate.label"),
+				unset: !estimate,
+				testId: "taskList.property.estimate",
+				actions: onTaskUpdate && (() => [Task.NullOption, ...Task.EstimateOptions].map(({ id, title }) => createMenuAction(`estimate-${id}`, () => onTaskUpdate(task, { estimate: id === "none" ? null : id }), {
+					label: title,
+					checked: (estimate ?? "none") === id
+				})))
 			})
-		]
+		] })
 	});
-});
-TaskListItem.displayName = "TaskList.Item";
-var CompactIconButton = (props) => {
-	return /* @__PURE__ */ jsx("span", {
-		className: "grid size-8 shrink-0 place-items-center",
-		children: /* @__PURE__ */ jsx(IconButton, {
+};
+TaskProperties.displayName = "TaskList.Properties";
+var TaskProperty = ({ icon, iconClassNames, label, unset, testId, actions }) => {
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: TASK_GRID_ICON,
+		children: /* @__PURE__ */ jsx(Icon.Icon, {
+			icon,
+			classNames: mx(unset ? "text-fg-muted" : iconClassNames)
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: mx("min-w-0 pe-1.5 text-sm truncate", unset && "text-fg-muted"),
+		children: label
+	})] });
+	if (!actions) return /* @__PURE__ */ jsx("div", {
+		className: mx(TASK_GRID, "items-center min-h-(--dx-control-sm) min-w-0"),
+		"data-testid": testId,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(ActionMenu, {
+		deferUntilOpen: true,
+		actions,
+		children: /* @__PURE__ */ jsx(Button.Root, {
 			variant: "ghost",
-			iconOnly: true,
-			density: "sm",
-			...props
+			size: "sm",
+			classNames: mx(TASK_GRID, "items-center w-fit min-w-0 justify-start px-0"),
+			"data-testid": testId,
+			children: content
 		})
 	});
 };
-var TaskListCreate = composable(({ placeholder = "Add task", ...props }, forwardedRef) => {
-	const { onTaskCreate, showGutter } = useTaskListContext("TaskList.Create");
-	const { className, ...rest } = composableProps(props);
-	const [title, setTitle] = useState("");
+//#endregion
+//#region src/components/TaskQuestion/TaskQuestion.tsx
+/**
+* Stops an event at the question: it sits inside a listbox row, whose click selects the task and
+* whose arrow keys move the selection, and typing an answer must do neither.
+*/
+var stop = (event) => event.stopPropagation();
+/**
+* A question from a task's history: why it was asked, and the means to answer it. Answered, it
+* collapses to the question and the answer, since the exchange is then a record rather than a
+* prompt.
+*
+* The free-form field is always present, never a fallback revealed by a "something else" option:
+* the options are the asker's guesses, and making the reader hunt for the escape hatch pressures
+* them into picking a wrong one.
+*/
+var TaskQuestion = ({ classNames, thread: { question, answer }, busy, message, compact, onAnswer }) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const [text, setText] = useState("");
+	const handleSubmit = useCallback((value) => {
+		if (!busy && value.trim().length > 0) onAnswer?.(value);
+	}, [busy, onAnswer]);
 	const handleKeyDown = useCallback((event) => {
-		const trimmed = title.trim();
-		if (event.key === "Enter" && trimmed.length > 0) {
-			onTaskCreate?.(trimmed);
-			setTitle("");
+		event.stopPropagation();
+		if (event.key === "Enter") {
+			event.preventDefault();
+			handleSubmit(text);
 		}
-	}, [title, onTaskCreate]);
-	if (!onTaskCreate) return null;
+	}, [handleSubmit, text]);
+	if (compact) return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": question.text,
+		className: mx("flex flex-col w-full gap-1 text-sm", classNames),
+		"data-testid": "task-question",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 min-w-0",
+			children: [/* @__PURE__ */ jsx(Icon.Icon, {
+				icon: "ph--question--regular",
+				valence: "warning"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "font-medium truncate",
+				title: question.text,
+				children: question.text
+			})]
+		}), answer && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 min-w-0",
+			"data-testid": "task-question.answer",
+			children: [/* @__PURE__ */ jsx(Icon.Icon, {
+				icon: "ph--check-circle--regular",
+				valence: "success"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				title: answer.answer,
+				children: answer.answer
+			})]
+		})]
+	});
 	return /* @__PURE__ */ jsxs("div", {
-		...rest,
-		"data-testid": "taskList.create",
-		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,
+		role: "group",
+		"aria-label": question.text,
+		className: mx(TASK_GRID, "gap-y-2 text-sm", classNames),
+		"data-testid": "task-question",
+		onClick: stop,
+		onPointerDown: stop,
+		onKeyDown: stop,
 		children: [
-			showGutter && /* @__PURE__ */ jsx("span", {}),
-			/* @__PURE__ */ jsx(Icon, {
-				icon: "ph--plus--regular",
-				size: 4,
-				classNames: "justify-self-center text-subdued"
+			/* @__PURE__ */ jsx("div", {
+				className: TASK_GRID_ICON,
+				children: /* @__PURE__ */ jsx(Icon.Icon, {
+					icon: "ph--question--regular",
+					valence: "warning"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium wrap-break-word min-w-0",
+				children: question.text
+			}),
+			question.context && !answer && /* @__PURE__ */ jsx("p", {
+				className: mx("col-start-2", "text-fg-muted wrap-break-word line-clamp-3 min-w-0"),
+				children: question.context
+			}),
+			answer ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				className: TASK_GRID_ICON,
+				children: /* @__PURE__ */ jsx(Icon.Icon, {
+					icon: "ph--check-circle--regular",
+					valence: "success"
+				})
+			}), /* @__PURE__ */ jsx("span", {
+				className: "wrap-break-word min-w-0",
+				"data-testid": "task-question.answer",
+				children: answer.answer
+			})] }) : onAnswer && /* @__PURE__ */ jsxs("div", {
+				className: mx("col-start-2", "flex flex-col gap-2 min-w-0"),
+				children: [question.options && question.options.length > 0 && /* @__PURE__ */ jsx("div", {
+					role: "list",
+					"aria-label": question.text,
+					className: "flex flex-col gap-1 min-w-0",
+					children: question.options.map((option, index) => /* @__PURE__ */ jsx("div", {
+						role: "listitem",
+						className: "min-w-0",
+						children: /* @__PURE__ */ jsxs(Button.Root, {
+							variant: "default",
+							disabled: busy,
+							classNames: "w-full min-w-0 h-auto py-1.5 justify-start text-start whitespace-normal",
+							"data-testid": "task-question.option",
+							onClick: () => handleSubmit(option.title),
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "shrink-0 tabular-nums text-fg-muted self-start",
+								children: [index + 1, "."]
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "grow min-w-0 flex flex-col gap-0.5 text-start",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "font-medium wrap-break-word",
+									children: option.title
+								}), option.description && /* @__PURE__ */ jsx("div", {
+									className: "text-xs text-fg-muted wrap-break-word leading-snug",
+									children: option.description
+								})]
+							})]
+						})
+					}, option.title))
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap gap-1",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex-[1_1_10rem] min-w-0",
+						children: /* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, {
+							srOnly: true,
+							children: t("question-answer.label")
+						}), /* @__PURE__ */ jsx(Input.Root, {
+							value: text,
+							disabled: busy,
+							placeholder: t("question-answer.placeholder"),
+							"data-testid": "task-question.input",
+							onChange: (event) => setText(event.target.value),
+							onKeyDown: handleKeyDown
+						})] })
+					}), /* @__PURE__ */ jsx(Button.Root, {
+						variant: "primary",
+						disabled: busy || text.trim() === "",
+						"data-testid": "task-question.submit",
+						onClick: () => handleSubmit(text),
+						children: t("question-submit.label")
+					})]
+				})]
 			}),
-			/* @__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
-			}) })
+			message && /* @__PURE__ */ jsx("p", {
+				className: mx("col-start-2", "text-fg-muted min-w-0"),
+				"data-testid": "task-question.message",
+				children: message
+			})
 		]
 	});
-});
-TaskListCreate.displayName = "TaskList.Create";
-var TaskListAssignee = composable(({ assignee }, _forwardedRef) => {
-	const [contact] = useObject(assignee.contact);
-	const label = contact?.fullName ?? assignee.name ?? assignee.email ?? (assignee.identityDid ? shortDid(assignee.identityDid) : void 0);
-	const agent = assignee.role === "assistant";
-	if (!label && !agent) return null;
-	return /* @__PURE__ */ jsxs(Tag, {
-		hue: agent ? "purple" : "indigo",
-		children: [agent && /* @__PURE__ */ jsx(Icon, {
-			icon: "ph--sparkle--regular",
-			size: 3,
-			classNames: "inline-block me-1"
-		}), label ?? "agent"]
-	});
-});
-TaskListAssignee.displayName = "TaskList.Assignee";
-var shortDid = (did) => `${did.slice(0, 12)}…`;
-var TaskList = {
-	Root: TaskListRoot,
-	Viewport: TaskListViewport,
-	Content: TaskListContent,
-	GroupLabel: TaskListGroupLabel,
-	Item: TaskListItem,
-	Create: TaskListCreate,
-	Assignee: TaskListAssignee
+};
+TaskQuestion.displayName = "TaskQuestion";
+//#endregion
+//#region src/util/format-date.ts
+/** Beyond this, "x days ago" stops locating an event and the calendar date does it better. */
+var RELATIVE_DAYS = 3;
+/**
+* A timestamp as a reader scans it: recent activity as a distance ("2 hours ago"), older activity as
+* a local calendar date.
+*
+* The date is formatted in the reader's own locale and zone (`toLocaleDateString`), since it is read
+* as "when did this happen to me" rather than as a record to cite; an unparseable value is returned
+* as it came, because a log line is decoration and never the source of truth.
+*/
+var formatRelative = (date, { relativeDays = 3, now } = {}) => {
+	const parsed = typeof date === "string" ? new Date(date) : date;
+	if (Number.isNaN(parsed.getTime())) return typeof date === "string" ? date : "";
+	const reference = now ?? /* @__PURE__ */ new Date();
+	return Math.abs(differenceInCalendarDays(reference, parsed)) > relativeDays ? parsed.toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}) : formatDistance(parsed, reference, { addSuffix: true });
 };
 //#endregion
-export { STATUS_ORDER, TaskList, resolveIndent, resolveNudge, resolveOutdent, resolveTaskPlacement, subtreeIds, walkTaskTree };
+export { RELATIVE_DAYS, TASK_GRID, TASK_GRID_CONTENT, TASK_GRID_ICON, TaskHistory, TaskList, TaskProperties, TaskQuestion, TaskTags, buildTaskForest, flattenVisibleTasks, formatRelative, resolveIndent, resolveNudge, resolveOutdent, resolveReparent, resolveTaskPlacement, statusIcon, statusTextStyle, subtreeIds, taskGroupNodeId };
 
 //# sourceMappingURL=index.mjs.map