@dou-ui/gantt 0.0.0-stage → 0.1.0-alpha.0

package/dist/gantt.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,2774 @@
+import { ganttKey } from "./context.js";
+import { resolveGanttExtensions } from "./core/extension.js";
+import gantt_menu_default from "./components/gantt-menu.js";
+import cell_editor_default from "./components/cell-editor.js";
+import time_grid_default from "./components/time-grid.js";
+import { MINUTES_PER_DAY, dayIndex, dayStart, formatTime, parseTime } from "./core/time.js";
+import time_header_default from "./components/time-header.js";
+import { endKeepingWork, isWorkTime, nextWorkTime, resolveCalendar, shiftWorkMinutes, shiftWorkdays, workdaysBetween, workingMinutes } from "./core/calendar.js";
+import { arrowPath, roundedPath, routeLink } from "./core/geometry.js";
+import { createId, spanOf, writeSpan } from "./core/model.js";
+import { buildTree } from "./core/tree.js";
+import { baselineSpans } from "./core/baseline.js";
+import { DAY_WIDTH_RANGE, levelByName, snapStep } from "./core/scale.js";
+import { format, useGanttMessages } from "./locale.js";
+import { dateLabel, datesLabel, durationLabel, endLabel, markerRoom, spokenDuration } from "./labels.js";
+import { drawGantt, paddedRange, svgDocument } from "./export/draw.js";
+import { readTheme } from "./export/theme.js";
+import { GanttTransaction, emptyDocument } from "./core/transaction.js";
+import { GanttHistory } from "./core/history.js";
+import { linkRefusal, linkTypeOf } from "./core/links.js";
+import { readDocument } from "./core/document.js";
+import { applyGanttCSV, readGanttCSV } from "./core/csv.js";
+import { computeCriticalPath, computeSchedule, findBrokenLinks } from "./core/schedule.js";
+import { useTimeAxis } from "./time-axis.js";
+import { holdPointer, matchesHotkey, svgToPNG, useElementSize, useLocale } from "dou-ui";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, unref, useId, useModel, useTemplateRef, watch, withCtx, withModifiers } from "vue";
+import { ChevronDownIcon, ChevronRightIcon, EditIcon, IndentIcon, ListTreeIcon, OutdentIcon, PlusIcon, TrashIcon } from "@dou-ui/icons";
+// src/gantt.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = {
+	class: "dou-gantt__sr-only",
+	"aria-live": "polite"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "dou-gantt__notice",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = ["aria-rowcount"];
+var _hoisted_5 = {
+	class: "dou-gantt__table-head",
+	role: "row"
+};
+var _hoisted_6 = [
+	"data-row",
+	"aria-level",
+	"aria-rowindex",
+	"aria-expanded",
+	"aria-selected",
+	"onPointerenter",
+	"onPointerdown",
+	"onClick",
+	"onDblclick",
+	"onContextmenu"
+];
+var _hoisted_7 = ["onDblclick"];
+var _hoisted_8 = ["aria-label", "onClick"];
+var _hoisted_9 = {
+	key: 1,
+	class: "dou-gantt__toggle-space"
+};
+var _hoisted_10 = {
+	key: 2,
+	class: "dou-gantt__cell-text"
+};
+var _hoisted_11 = {
+	class: "dou-gantt__td is-title",
+	role: "gridcell"
+};
+var _hoisted_12 = ["title"];
+var _hoisted_13 = {
+	key: 0,
+	class: "dou-gantt__marker-text"
+};
+var _hoisted_14 = {
+	key: 0,
+	class: "dou-gantt__row-titles"
+};
+var _hoisted_15 = ["width", "height"];
+var _hoisted_16 = ["onClick", "onContextmenu"];
+var _hoisted_17 = ["d"];
+var _hoisted_18 = ["d"];
+var _hoisted_19 = ["d"];
+var _hoisted_20 = ["d"];
+var _hoisted_21 = ["onPointerenter"];
+var _hoisted_22 = [
+	"data-task",
+	"aria-label",
+	"onPointerdown",
+	"onClick",
+	"onDblclick",
+	"onContextmenu"
+];
+var _hoisted_23 = {
+	key: 1,
+	class: "dou-gantt__bar-label"
+};
+var _hoisted_24 = ["onPointerdown"];
+var _hoisted_25 = ["onPointerdown"];
+var _hoisted_26 = ["onPointerdown"];
+var _hoisted_27 = ["onPointerdown"];
+var _hoisted_28 = ["onPointerdown"];
+var _hoisted_29 = [
+	"aria-label",
+	"aria-valuenow",
+	"aria-valuemax"
+];
+var HEADER = 56;
+/** Room around the visible part that is rendered too, in px. */
+var OVERSCAN_X = 320;
+var OVERSCAN_ROWS = 6;
+/** Below this width the table steps aside and the timeline takes the whole width. */
+var NARROW = 520;
+var BASELINE_SHIFT = 4;
+/** The planned spans, by task. */
+var MILESTONE = 7;
+var TABLE_MIN = 160;
+var FLEX_COLUMN = 64;
+var TITLE_MIN = 120;
+/** Movement in px before a press becomes a drag. */
+var LONG_PRESS = 300;
+/** How close to the edge a drag starts scrolling, in px. */
+var EDGE = 32;
+/**
+* Where a menu opened, on the timeline: under the pointer when it is over
+* the timeline, otherwise at the task's start.
+*/
+var EXPORT_MAX = 16e3;
+/** Room on a printed page, in px at 96 per inch: A4 less 10mm margins. */
+var gantt_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "DouGantt",
+	__name: "gantt",
+	props: /*@__PURE__*/ mergeModels({
+		calendar: {},
+		columns: {},
+		table: {
+			type: Boolean,
+			default: true
+		},
+		tableWidth: { default: 360 },
+		rowHeight: { default: 36 },
+		barLabel: { default: "auto" },
+		range: {},
+		today: {
+			type: Boolean,
+			default: true
+		},
+		weekStart: {},
+		scheduling: { default: "manual" },
+		addRow: {
+			type: Boolean,
+			default: true
+		},
+		menu: {
+			type: Boolean,
+			default: true
+		},
+		contextMenu: {},
+		critical: { type: Boolean },
+		readonly: { type: Boolean },
+		canLink: {},
+		canMove: {},
+		markers: {},
+		baseline: {},
+		extensions: {},
+		ariaLabel: {},
+		messages: {}
+	}, {
+		"modelValue": { default: emptyDocument },
+		"modelModifiers": {},
+		"selection": { default: () => [] },
+		"selectionModifiers": {},
+		"scale": {},
+		"scaleModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"transaction",
+		"transactionCancel",
+		"link",
+		"taskClick",
+		"taskDblclick",
+		"taskContextmenu",
+		"linkClick",
+		"linkContextmenu"
+	], [
+		"update:modelValue",
+		"update:selection",
+		"update:scale"
+	]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const model = useModel(__props, "modelValue");
+		/** The `v-model`, with a wrongly shaped one read as well as it can be. */
+		const source = computed(() => readDocument(model.value));
+		const tasks = computed(() => source.value.tasks);
+		const links = computed(() => source.value.links);
+		const selection = useModel(__props, "selection");
+		const scale = useModel(__props, "scale");
+		const emit = __emit;
+		const messages = useGanttMessages(() => props.messages);
+		const resolved = computed(() => resolveGanttExtensions(props.extensions));
+		const { locale } = useLocale();
+		const weekStart = computed(() => props.weekStart ?? locale.value.region.weekStart);
+		/** Height of the two-row time header, in px; the table's header matches it. */
+		const root = useTemplateRef("root");
+		const chart = useTemplateRef("chart");
+		const tableBody = useTemplateRef("tableBody");
+		const { width: rootWidth } = useElementSize(root);
+		const { width: viewWidth, height: viewHeight } = useElementSize(chart);
+		const history = new GanttHistory();
+		/** An extension's history, used instead of the chart's own. */
+		let customHistory = null;
+		const canUndo = ref(false);
+		const canRedo = ref(false);
+		const syncHistory = () => {
+			canUndo.value = customHistory ? customHistory.canUndo() : history.canUndo;
+			canRedo.value = customHistory ? customHistory.canRedo() : history.canRedo;
+		};
+		const editable = computed(() => !props.readonly);
+		let latest = null;
+		const docOf = () => latest ?? toRaw(source.value);
+		/** The last transaction committed, for reading out what an extension's undo changed. */
+		let lastCommit = null;
+		/** Runs the extensions' `transaction` hooks; `false` when one cancelled the change. */
+		function check(tr) {
+			for (const hook of resolved.value.transactions) {
+				hook(tr, context);
+				if (tr.cancelled) {
+					emit("transactionCancel", tr);
+					refuse(tr.cancelReason ?? messages.value.changeCancelled);
+					return false;
+				}
+			}
+			return true;
+		}
+		function commit(tr) {
+			if (!check(tr)) return false;
+			lastCommit = tr;
+			if (!latest) nextTick(() => latest = null);
+			latest = tr.doc;
+			model.value = tr.doc;
+			if (tr.touches("tasks")) {
+				const ids = new Set(tr.doc.tasks.map((task) => task.id));
+				const kept = selection.value.filter((id) => ids.has(id));
+				if (kept.length !== selection.value.length) selection.value = kept;
+			}
+			if (selectedLink.value && !tr.doc.links.some((link) => link.id === selectedLink.value)) selectedLink.value = null;
+			emit("transaction", tr);
+			return true;
+		}
+		/** Tasks a transaction gave dates to. */
+		function datedIn(steps) {
+			const out = /* @__PURE__ */ new Set();
+			for (const step of steps) if (step.type === "addTask") out.add(step.task.id);
+			else if (step.type === "updateTask" && ("start" in step.patch || "end" in step.patch)) out.add(step.id);
+			return out;
+		}
+		/** How many tasks automatic scheduling pushed in each transaction. */
+		const pushedBy = /* @__PURE__ */ new WeakMap();
+		/** With automatic scheduling, pushes the tasks that wait on what changed, in the same transaction. */
+		function pushFollowers(tr) {
+			if (props.scheduling !== "auto" || tr.meta.schedule === false) return;
+			const result = computeSchedule(tr.doc, {
+				calendar: calendar.value,
+				fixed: datedIn(tr.steps)
+			});
+			for (const [id, patch] of result.moves) tr.updateTask(id, patch);
+			if (result.moves.size) pushedBy.set(tr, result.moves.size);
+		}
+		/** Applies changes as one transaction, one undo step. */
+		function transact(fn, meta) {
+			const tr = new GanttTransaction(docOf());
+			if (meta) tr.setMeta(meta);
+			fn(tr);
+			if (!tr.changed) return tr;
+			pushFollowers(tr);
+			const before = selection.value;
+			if (!commit(tr)) return tr;
+			if (!customHistory) history.record(tr, before, selection.value);
+			syncHistory();
+			return tr;
+		}
+		function travel(direction) {
+			if (customHistory) {
+				const before = lastCommit;
+				const done = customHistory[direction]();
+				syncHistory();
+				return done && lastCommit !== before ? lastCommit : null;
+			}
+			const result = history[direction](docOf());
+			if (!result) return null;
+			result.tr.setMeta({
+				origin: direction,
+				history: false,
+				schedule: false
+			});
+			commit(result.tr);
+			selection.value = result.selection;
+			syncHistory();
+			return result.tr;
+		}
+		const undo = () => !!travel("undo");
+		const redo = () => !!travel("redo");
+		/** Moves tasks so that every link is kept, as one undo step. */
+		function schedule(options = {}) {
+			const result = computeSchedule(docOf(), {
+				calendar: calendar.value,
+				pull: options.pull
+			});
+			if (result.moves.size) transact((tr) => {
+				for (const [id, patch] of result.moves) tr.updateTask(id, patch);
+			}, { schedule: false });
+			announce(format(messages.value.scheduled, { count: result.moves.size }));
+			return result;
+		}
+		const selectedLink = ref(null);
+		const drag = shallowRef(null);
+		const taskList = computed(() => toRaw(tasks.value));
+		const linkList = computed(() => toRaw(links.value));
+		const shown = computed(() => {
+			if (!drag.value?.started) return taskList.value;
+			const changes = dragPreview.value;
+			if (!changes) return taskList.value;
+			return taskList.value.map((task) => {
+				const patch = changes.get(task.id);
+				return patch ? {
+					...task,
+					...patch
+				} : task;
+			});
+		});
+		const tree = computed(() => buildTree(shown.value));
+		const rows = computed(() => tree.value.rows);
+		const calendar = computed(() => resolveCalendar(props.calendar));
+		const selected = computed(() => new Set(selection.value));
+		const shownDoc = computed(() => ({
+			version: 1,
+			tasks: shown.value,
+			links: linkList.value
+		}));
+		/** While dragging with automatic scheduling: the tasks the drop would push, and where to. */
+		/** The tasks a drag is about to change, with the ones it would push, as they would be written. */
+		const preview = computed(() => {
+			const changes = dragPreview.value;
+			const pushes = pushPreview.value?.moves;
+			if (!changes || !pushes?.size) return changes;
+			const out = new Map(changes);
+			for (const [id, patch] of pushes) out.set(id, patch);
+			return out;
+		});
+		const pushPreview = computed(() => {
+			const changes = dragPreview.value;
+			if (props.scheduling !== "auto" || !changes || drag.value?.mode === "progress") return null;
+			return computeSchedule(shownDoc.value, {
+				calendar: calendar.value,
+				fixed: changes.keys()
+			});
+		});
+		/** Links whose later task starts (or ends) before the link allows. */
+		const brokenLinks = computed(() => pushPreview.value?.violated ?? findBrokenLinks(shownDoc.value, { calendar: calendar.value }));
+		const critical = computed(() => props.critical ? computeCriticalPath(shownDoc.value, { calendar: calendar.value }) : null);
+		/** The time the tasks cover, or `null` when nothing is scheduled. */
+		const content = computed(() => {
+			let start = Infinity;
+			let end = -Infinity;
+			for (const row of tree.value.byId.values()) {
+				if (!row.span) continue;
+				start = Math.min(start, row.span.start);
+				end = Math.max(end, row.span.end);
+			}
+			return start > end ? null : {
+				start,
+				end
+			};
+		});
+		const axis = useTimeAxis({
+			chart,
+			tableBody,
+			viewWidth,
+			scale,
+			range: () => props.range,
+			today: () => props.today,
+			weekStart,
+			calendar,
+			messages,
+			content,
+			fitWidth: () => showTable.value ? viewWidth.value : rootWidth.value
+		});
+		const { dayWidth, level, ppm, now, extent, origin, totalWidth, xOf, contentX, scrollTop, scrollLeft, scrollbar, onChartScroll, onTableScroll, scrollToTime, scrollToDate, scrollToToday, fit, zoomTo, zoomIn, zoomOut, onWheel, timeWindow, topCells, bottomCells, shaded, todayX } = axis;
+		watch([viewHeight, viewWidth], axis.measureScrollbar, { flush: "post" });
+		watch([rootWidth, viewWidth], axis.fitWhenSized);
+		const warned = /* @__PURE__ */ new Set();
+		watch(tasks, (list) => {
+			if (process.env.NODE_ENV === "production") return;
+			for (const task of list) for (const key of ["start", "end"]) {
+				const text = task[key];
+				if (text == null || text === "" || parseTime(text) || warned.has(`${task.id}:${key}`)) continue;
+				warned.add(`${task.id}:${key}`);
+				console.warn(`[@dou-ui/gantt] task "${task.id}" has a ${key} that can't be read: "${text}". Use YYYY-MM-DD or YYYY-MM-DD HH:mm.`);
+			}
+		}, { immediate: true });
+		const bodyHeight = computed(() => Math.max(0, viewHeight.value - HEADER));
+		const rowWindow = computed(() => {
+			const h = props.rowHeight;
+			return {
+				from: Math.max(0, Math.floor(scrollTop.value / h) - OVERSCAN_ROWS),
+				to: Math.min(rows.value.length, Math.ceil((scrollTop.value + bodyHeight.value) / h) + OVERSCAN_ROWS)
+			};
+		});
+		const visibleRows = computed(() => rows.value.slice(rowWindow.value.from, rowWindow.value.to));
+		/**
+		* Without the table, rows whose bar is out of view (or that have none)
+		* show their title at the left edge of the timeline.
+		*/
+		const rowTitles = computed(() => {
+			if (showTable.value) return [];
+			const from = origin.value + scrollLeft.value / ppm.value;
+			const to = origin.value + (scrollLeft.value + viewWidth.value) / ppm.value;
+			return visibleRows.value.filter((row) => !row.span || row.span.end < from || row.span.start > to).map((row) => ({ row }));
+		});
+		/**
+		* Tasks with a link at their finishing end. Their side titles step further
+		* out, past where the line leaves or arrives, so the two don't run together.
+		*/
+		const linkedEnds = computed(() => {
+			const out = /* @__PURE__ */ new Set();
+			for (const link of linkList.value) {
+				const type = link.type ?? "fs";
+				if (type === "fs" || type === "ff") out.add(link.from);
+				if (type === "ff" || type === "sf") out.add(link.to);
+			}
+			return out;
+		});
+		/** Where a bar's side title starts, from the bar's left: clear of a line leaving its end. */
+		const sideOffset = (bar) => (bar.row.milestone ? 12 : bar.width + 8) + (linkedEnds.value.has(bar.row.task.id) ? 14 : 0);
+		/** Rows titled at the edge; their own side labels would only crowd it. */
+		const titled = computed(() => new Set(rowTitles.value.map((item) => item.row.task.id)));
+		let canvas;
+		/** Width of a bar title in px; estimated where text can't be measured. */
+		function textWidth(text) {
+			if (canvas === void 0 && root.value) try {
+				canvas = document.createElement("canvas").getContext("2d");
+				if (canvas) {
+					const style = getComputedStyle(root.value);
+					canvas.font = `${style.getPropertyValue("--dou-font-size-sm").trim() || "13px"} ${style.fontFamily}`;
+				}
+			} catch {
+				canvas = null;
+			}
+			return canvas ? canvas.measureText(text).width : text.length * 13;
+		}
+		function describe(row) {
+			const m = messages.value;
+			const { task, span } = row;
+			if (!span) return format(m.unscheduled, { title: task.title });
+			const start = dateLabel(span.start, span.dateOnly, m);
+			if (row.milestone) {
+				const text = format(m.milestone, {
+					title: task.title,
+					start
+				});
+				const change = planChange(row);
+				return change ? format(m.baseline.withChange, {
+					task: text,
+					change
+				}) : text;
+			}
+			const params = {
+				title: task.title,
+				dates: datesLabel(span, m),
+				duration: spokenDuration(span, calendar.value, m),
+				progress: Math.round(row.progress * 100)
+			};
+			let text = format(row.summary ? m.summary : m.task, params);
+			if (critical.value?.tasks.has(task.id)) text = format(m.criticalTask, { task: text });
+			const change = planChange(row);
+			return change ? format(m.baseline.withChange, {
+				task: text,
+				change
+			}) : text;
+		}
+		const bars = computed(() => {
+			const { start, end } = timeWindow.value;
+			const h = props.rowHeight;
+			const out = [];
+			for (const row of visibleRows.value) {
+				const span = row.span;
+				if (!span || span.end < start - 600 / ppm.value || span.start > end) continue;
+				const left = xOf(span.start);
+				const width = Math.max(row.milestone ? 0 : 2, (span.end - span.start) * ppm.value);
+				let label = props.barLabel === "auto" ? "inside" : props.barLabel;
+				if (row.milestone || row.summary) label = props.barLabel === "none" ? "none" : "outside";
+				else if (props.barLabel === "auto" && textWidth(row.task.title) + 20 > width) label = "outside";
+				out.push({
+					row,
+					left,
+					width,
+					top: row.index * h,
+					label,
+					aria: describe(row)
+				});
+			}
+			return out;
+		});
+		/** Dashed outlines where a drag would push the waiting tasks to. */
+		const ghosts = computed(() => {
+			const moves = pushPreview.value?.moves;
+			if (!moves?.size) return [];
+			const out = [];
+			for (const [id, patch] of moves) {
+				const row = tree.value.byId.get(id);
+				const span = row && row.index >= 0 && spanOf({
+					...row.task,
+					...patch
+				});
+				if (!span) continue;
+				out.push({
+					id,
+					left: xOf(span.start),
+					width: Math.max(2, (span.end - span.start) * ppm.value),
+					top: row.index * props.rowHeight,
+					milestone: row.milestone
+				});
+			}
+			return out;
+		});
+		/** How far bars move up to make room for the baseline under them, in px. */
+		const planned = computed(() => props.baseline ? baselineSpans(props.baseline, (id) => !!tree.value.byId.get(id)?.milestone) : null);
+		const barShift = computed(() => planned.value ? BASELINE_SHIFT : 0);
+		/** A thin line under each bar in view, where the baseline had it. */
+		const baselineBars = computed(() => {
+			const plans = planned.value;
+			if (!plans) return [];
+			const out = [];
+			for (const bar of bars.value) {
+				const span = plans.get(bar.row.task.id);
+				if (!span) continue;
+				out.push({
+					id: bar.row.task.id,
+					left: xOf(span.start),
+					width: Math.max(2, (span.end - span.start) * ppm.value),
+					top: bar.top,
+					milestone: bar.row.milestone
+				});
+			}
+			return out;
+		});
+		/** How a task's end compares with its plan, as words; empty when on plan. */
+		function planChange(row) {
+			const plan = planned.value?.get(row.task.id);
+			const span = row.span;
+			if (!plan || !span || plan.end === span.end) return "";
+			const m = messages.value;
+			const gap = Math.abs(span.end - plan.end);
+			const duration = plan.dateOnly && span.dateOnly ? format(m.days, { count: Math.round(gap / MINUTES_PER_DAY) }) : format(m.hours, { count: Math.round(gap / 60 * 10) / 10 });
+			return format(span.end > plan.end ? m.baseline.late : m.baseline.early, { duration });
+		}
+		/** Half the width of a milestone's diamond, where lines meet it. */
+		function boxOf(row) {
+			if (!row.span || row.index < 0) return null;
+			const y = row.index * props.rowHeight + props.rowHeight / 2 - barShift.value;
+			if (row.milestone) {
+				const x = xOf(row.span.start);
+				return {
+					left: x - MILESTONE,
+					right: x + MILESTONE,
+					y
+				};
+			}
+			const left = xOf(row.span.start);
+			return {
+				left,
+				right: left + Math.max(2, (row.span.end - row.span.start) * ppm.value),
+				y
+			};
+		}
+		const linkPaths = computed(() => {
+			if (dayWidth.value < 1) return [];
+			const { from, to } = rowWindow.value;
+			const xFrom = scrollLeft.value - OVERSCAN_X;
+			const xTo = scrollLeft.value + (viewWidth.value || 800) + OVERSCAN_X;
+			const out = [];
+			for (const link of linkList.value) {
+				const a = tree.value.byId.get(link.from);
+				const b = tree.value.byId.get(link.to);
+				if (!a || !b || a === b) continue;
+				if (Math.max(a.index, b.index) < from || Math.min(a.index, b.index) >= to) continue;
+				const boxA = boxOf(a);
+				const boxB = boxOf(b);
+				if (!boxA || !boxB) continue;
+				if (Math.max(boxA.right, boxB.right) + 24 < xFrom || Math.min(boxA.left, boxB.left) - 24 > xTo) continue;
+				const route = routeLink(boxA, boxB, link.type, props.rowHeight);
+				out.push({
+					link,
+					d: roundedPath(route.points),
+					arrow: arrowPath(route.tip, route.direction)
+				});
+			}
+			return out;
+		});
+		const narrow = computed(() => rootWidth.value > 0 && rootWidth.value < NARROW);
+		const showTable = computed(() => props.table && !narrow.value);
+		/** The narrowest the table gets, in px. */
+		const tableSize = ref(props.tableWidth);
+		/** The table leaves the timeline at least 40% of the width. */
+		/** The row below the table that adds a task. */
+		const showAddRow = computed(() => editable.value && props.addRow && showTable.value);
+		/** Rows of height on both sides: the tasks, and the adding row. */
+		const bodyRows = computed(() => rows.value.length + (showAddRow.value ? 1 : 0));
+		const tableMax = computed(() => Math.max(TABLE_MIN, Math.round((rootWidth.value || 1e3) * .6)));
+		const clampTable = (size) => Math.min(tableMax.value, Math.max(TABLE_MIN, size));
+		watch(tableMax, () => tableSize.value = clampTable(tableSize.value));
+		function onDividerDown(event) {
+			if (event.button !== 0) return;
+			const el = event.currentTarget;
+			el.setPointerCapture(event.pointerId);
+			const from = event.clientX;
+			const size = tableSize.value;
+			const move = (e) => tableSize.value = clampTable(size + e.clientX - from);
+			const up = () => {
+				el.removeEventListener("pointermove", move);
+				el.removeEventListener("pointerup", up);
+				el.removeEventListener("pointercancel", up);
+			};
+			el.addEventListener("pointermove", move);
+			el.addEventListener("pointerup", up);
+			el.addEventListener("pointercancel", up);
+		}
+		function onDividerKey(event) {
+			const by = event.shiftKey ? 80 : 16;
+			if (event.key === "ArrowLeft") tableSize.value = clampTable(tableSize.value - by);
+			else if (event.key === "ArrowRight") tableSize.value = clampTable(tableSize.value + by);
+			else return;
+			event.preventDefault();
+		}
+		const columns = computed(() => [...props.columns ?? [
+			{ key: "title" },
+			{
+				key: "start",
+				width: 96
+			},
+			{
+				key: "duration",
+				width: 72
+			}
+		], ...resolved.value.columns]);
+		/** Columns without a width in px are counted at this, or at their `minWidth`. */
+		const px = (value) => typeof value === "number" ? value : value?.endsWith("px") ? Number.parseFloat(value) : null;
+		/** The narrowest the columns go; past it the table scrolls sideways. */
+		const tableMinWidth = computed(() => {
+			let total = 0;
+			for (const column of columns.value) total += px(column.width) ?? px(column.minWidth) ?? (column.key === "title" ? TITLE_MIN : FLEX_COLUMN);
+			return total;
+		});
+		const tablePane = useTemplateRef("tablePane");
+		/** Height of the table's own sideways scrollbar, in px. */
+		const tableScrollbar = ref(0);
+		watch([
+			tableSize,
+			tableMinWidth,
+			viewHeight,
+			showTable
+		], () => {
+			const el = tablePane.value;
+			tableScrollbar.value = el ? el.offsetHeight - el.clientHeight : 0;
+		}, { flush: "post" });
+		function headerOf(column) {
+			if (column.title != null) return column.title;
+			return messages.value.columns[column.key] ?? column.key;
+		}
+		/** A value of a column of your own, as text. */
+		function valueText(column, value, task) {
+			if (column.format) return column.format(value, task);
+			return value == null ? "" : String(value);
+		}
+		function cellText(row, column) {
+			if (column.value) return valueText(column, column.value(row.task), row.task);
+			const m = messages.value;
+			const span = row.span;
+			switch (column.key) {
+				case "title": return row.task.title;
+				case "start": return span ? dateLabel(span.start - (row.milestone && span.dateOnly ? MINUTES_PER_DAY / 2 : 0), span.dateOnly, m) : "";
+				case "end": return span && !row.milestone ? endLabel(span, m) : "";
+				case "duration": return span && !row.milestone ? durationLabel(span, calendar.value, m) : "";
+				case "progress": return span && !row.milestone ? `${Math.round(row.progress * 100)}%` : "";
+				default: return valueText(column, row.task.data?.[column.key], row.task);
+			}
+		}
+		const cssLength = (value) => typeof value === "number" ? `${value}px` : value;
+		function columnStyle(column) {
+			const width = cssLength(column.width);
+			return {
+				flex: width ? `0 0 ${width}` : "1 1 0",
+				width,
+				minWidth: cssLength(column.minWidth)
+			};
+		}
+		function toggle(row) {
+			transact((tr) => tr.updateTask(row.task.id, { collapsed: !row.task.collapsed || void 0 }), { history: false });
+		}
+		/** The cell being edited; `id` is `null` for the row that adds a task. */
+		const editing = ref(null);
+		const BUILT_IN_EDITABLE = /* @__PURE__ */ new Set([
+			"title",
+			"start",
+			"end",
+			"duration",
+			"progress"
+		]);
+		/** Whether a cell can be edited: built-in columns unless turned off, others when turned on. */
+		function canEdit(row, column) {
+			if (!editable.value) return false;
+			if (column.editable === false) return false;
+			if (!BUILT_IN_EDITABLE.has(column.key) || column.value) return column.editable === true;
+			if (column.key === "title") return true;
+			if (row.summary || row.task.locked) return false;
+			if (row.milestone) return column.key === "start";
+			return column.key === "start" || !!row.span;
+		}
+		/** Starts editing a cell, the task's title by default. */
+		function editCell(id, key = "title") {
+			const row = tree.value.byId.get(id);
+			const column = columns.value.find((item) => item.key === key);
+			if (!row || !column || !canEdit(row, column)) return false;
+			if (row.index < 0) return false;
+			active.value = id;
+			scrollToTask(id);
+			editing.value = {
+				id,
+				key
+			};
+			return true;
+		}
+		function editorKind(row, column) {
+			const key = column.key;
+			if (key === "start" || key === "end") return row.span && !row.span.dateOnly ? "datetime" : "date";
+			if (key === "duration" || key === "progress") return "number";
+			return BUILT_IN_EDITABLE.has(key) ? "text" : column.input ?? "text";
+		}
+		/** What an editor starts with: the value as it would be typed. */
+		function editorValue(row, column) {
+			const { task, span } = row;
+			const key = column.key;
+			switch (key) {
+				case "title": return task.title;
+				case "start": return task.start ?? "";
+				case "end": return span ? formatTime(span.dateOnly ? span.end - 1 : span.end, span.dateOnly) : "";
+				case "duration": {
+					if (!span) return "";
+					const work = span.dateOnly ? workdaysBetween(calendar.value, span.start, span.end) : workingMinutes(calendar.value, span.start, span.end) / 60;
+					return String(Math.round(work * 10) / 10);
+				}
+				case "progress": return String(Math.round(row.progress * 100));
+				default: {
+					const value = task.data?.[key];
+					return value == null ? "" : String(value);
+				}
+			}
+		}
+		/**
+		* The change an edited value makes to its task: `null` when it makes
+		* none, `false` when the value can't be read.
+		*/
+		function editPatch(row, column, text) {
+			const { task, span } = row;
+			const key = column.key;
+			const value = text.trim();
+			switch (key) {
+				case "title": return value && value !== task.title ? { title: value } : null;
+				case "start": {
+					const at = parseTime(value);
+					if (!at) return false;
+					if (row.milestone) return { start: value };
+					if (!span) return writeSpan({
+						...task,
+						start: value
+					}, at.at, at.at + (at.dateOnly ? MINUTES_PER_DAY : 60));
+					return writeSpan(task, at.at, endKeepingWork(calendar.value, span, at.at));
+				}
+				case "end": {
+					const at = parseTime(value);
+					if (!span) return null;
+					const end = at ? at.at + (at.dateOnly ? MINUTES_PER_DAY : 0) : -Infinity;
+					return end > span.start ? writeSpan(task, span.start, end) : false;
+				}
+				case "duration": {
+					const count = Number(value);
+					if (!span) return null;
+					if (!value || !Number.isFinite(count) || count <= 0) return false;
+					const end = span.dateOnly ? shiftWorkdays(calendar.value, span.start, count) : shiftWorkMinutes(calendar.value, span.start, Math.round(count * 60));
+					return writeSpan(task, span.start, end);
+				}
+				case "progress": {
+					const count = Number(value);
+					if (!value || !Number.isFinite(count)) return false;
+					return { progress: Math.min(100, Math.max(0, count)) / 100 };
+				}
+				default: {
+					const next = column.parse ? column.parse(text, task) : value;
+					if (next === void 0) return false;
+					return next === task.data?.[key] ? null : { data: {
+						...task.data,
+						[key]: next
+					} };
+				}
+			}
+		}
+		/** Says a cell's value can't be read. */
+		function onEditInvalid(column) {
+			announce(format(messages.value.invalidValue, { column: headerOf(column) }));
+		}
+		function onEditDone(row, column, value) {
+			editing.value = null;
+			focusTask(row.task.id);
+			if (value == null) return;
+			const patch = editPatch(row, column, value);
+			if (!patch) return;
+			if ("start" in patch) {
+				const refusal = checkMove(/* @__PURE__ */ new Map([[row.task.id, patch]]));
+				if (refusal) return announce(refusal);
+			}
+			const done = transact((tr) => tr.updateTask(row.task.id, patch));
+			announceTask(row.task.id, done);
+		}
+		/** Tab in the title field indents, Shift+Tab outdents, and editing goes on. */
+		function onEditTab(row, back) {
+			const id = row.task.id;
+			if (back ? outdentTask(id) : indentTask(id)) nextTick(() => editCell(id));
+		}
+		/** Adds a task at the end, from the row below the table. */
+		function onAddDone(value) {
+			const title = value?.trim();
+			if (value == null) {
+				editing.value = null;
+				root.value?.focus({ preventScroll: true });
+				return;
+			}
+			if (!title) return;
+			const id = createId();
+			const last = lastDated();
+			const span = newTaskSpan(last && { after: last });
+			transact((tr) => tr.addTask({
+				id,
+				title,
+				...writeSpan({
+					id,
+					title
+				}, span.start, span.end)
+			}));
+			active.value = id;
+			nextTick(() => scrollToTask(id));
+			announce(format(messages.value.taskAdded, { title }));
+		}
+		/** The lowest row that has dates. */
+		function lastDated() {
+			const list = tree.value.rows;
+			for (let i = list.length - 1; i >= 0; i--) if (list[i].span) return list[i];
+		}
+		/**
+		* Dates for a new task, so it shows on the timeline: a working day from
+		* `at`, or right after the task above it (a working hour, if that one has
+		* times), or from today.
+		*/
+		function newTaskSpan(from) {
+			const cal = calendar.value;
+			const above = from && "after" in from ? from.after.span : null;
+			if (above && !above.dateOnly) {
+				const start = nextWorkTime(cal, above.end, false);
+				return {
+					start,
+					end: shiftWorkMinutes(cal, start, 60)
+				};
+			}
+			const day = from && "at" in from ? dayStart(from.at) : above?.end ?? dayStart(now.value);
+			const start = nextWorkTime(cal, day, true);
+			return {
+				start,
+				end: shiftWorkdays(cal, start, 1)
+			};
+		}
+		/** Adds a task after another one, or as its last subtask, and starts editing its title. */
+		function insertTask(near, options = {}) {
+			const { where = "after" } = options;
+			const id = createId();
+			const title = messages.value.newTask;
+			const row = near == null ? void 0 : tree.value.byId.get(near);
+			const inside = !!row && where === "inside";
+			const at = typeof options.start === "string" ? parseTime(options.start)?.at : options.start;
+			const children = row && inside ? tree.value.childrenOf.get(row.task.id) ?? [] : [];
+			const above = inside ? children.length ? tree.value.byId.get(children[children.length - 1].id) : void 0 : row ?? lastDated();
+			const span = newTaskSpan(at != null ? { at } : above ? { after: above } : row?.span ? { at: row.span.start } : void 0);
+			transact((tr) => {
+				tr.addTask({
+					id,
+					title,
+					...writeSpan({
+						id,
+						title
+					}, span.start, span.end)
+				});
+				if (!row) return;
+				const nearId = row.task.id;
+				if (inside) {
+					tr.moveTask(id, nearId);
+					if (row.task.collapsed) tr.updateTask(nearId, { collapsed: void 0 });
+				} else {
+					const parent = parentOf(nearId);
+					const siblings = tree.value.childrenOf.get(parent) ?? [];
+					tr.moveTask(id, parent, siblings.findIndex((task) => task.id === nearId) + 1);
+				}
+			});
+			selection.value = [id];
+			nextTick(() => editCell(id));
+			announce(format(messages.value.taskAdded, { title }));
+			return id;
+		}
+		/** A task's parent as laid out: a missing or looping parent counts as none. */
+		function parentOf(id) {
+			for (const [parent, children] of tree.value.childrenOf) if (children.some((task) => task.id === id)) return parent;
+		}
+		/** Makes a task the last subtask of the task above it among its siblings. */
+		function indentTask(id) {
+			if (!editable.value) return false;
+			const siblings = tree.value.childrenOf.get(parentOf(id)) ?? [];
+			const index = siblings.findIndex((task) => task.id === id);
+			const above = siblings[index - 1];
+			if (index < 1 || !above || above.type === "milestone") return false;
+			transact((tr) => {
+				tr.moveTask(id, above.id);
+				if (above.collapsed) tr.updateTask(above.id, { collapsed: void 0 });
+			});
+			announceMoved(id);
+			return true;
+		}
+		/** Moves a task out of its parent, to just after it. */
+		function outdentTask(id) {
+			if (!editable.value) return false;
+			const parent = parentOf(id);
+			if (parent == null) return false;
+			const grand = parentOf(parent);
+			const index = (tree.value.childrenOf.get(grand) ?? []).findIndex((task) => task.id === parent);
+			transact((tr) => tr.moveTask(id, grand, index + 1));
+			announceMoved(id);
+			return true;
+		}
+		/** Says where a task went in the outline, once the change has reached the rows. */
+		function announceMoved(id) {
+			nextTick(() => {
+				const byId = tree.value.byId;
+				const task = byId.get(id)?.task.title ?? "";
+				const up = parentOf(id);
+				const parent = up == null ? void 0 : byId.get(up)?.task.title;
+				const m = messages.value;
+				announce(parent ? format(m.movedUnder, {
+					task,
+					parent
+				}) : format(m.movedTop, { task }));
+			});
+		}
+		/** Removes tasks with their subtasks and links, as one undo step. */
+		function removeTasks(ids) {
+			if (!editable.value || !ids.length) return;
+			const titles = ids.map((id) => tree.value.byId.get(id)?.task.title).filter(Boolean);
+			transact((tr) => {
+				for (const id of ids) tr.removeTask(id);
+			});
+			if (active.value && !tasks.value.some((task) => task.id === active.value)) active.value = null;
+			announce(format(messages.value.tasksRemoved, { titles: titles.join(messages.value.listSeparator) }));
+		}
+		function onCellDblclick(row, column, event) {
+			if (!canEdit(row, column)) return;
+			event.stopPropagation();
+			editCell(row.task.id, column.key);
+		}
+		function startAdding() {
+			editing.value = {
+				id: null,
+				key: "title"
+			};
+		}
+		const rowDrag = shallowRef(null);
+		let rowTimer;
+		let rowFrame = 0;
+		/** The rows moved together: the pressed one and everything under it. */
+		const rowDragged = computed(() => {
+			const d = rowDrag.value;
+			if (!d?.started) return null;
+			const out = /* @__PURE__ */ new Set([d.id]);
+			const stack = [d.id];
+			while (stack.length) for (const child of tree.value.childrenOf.get(stack.pop()) ?? []) {
+				out.add(child.id);
+				stack.push(child.id);
+			}
+			return out;
+		});
+		/** Where a row being dragged would go: before or after a row, or inside it. */
+		const rowDrop = computed(() => {
+			const d = rowDrag.value;
+			const moved = rowDragged.value;
+			if (!d?.started || !moved) return null;
+			const list = rows.value;
+			if (!list.length) return null;
+			const h = props.rowHeight;
+			const index = Math.max(0, Math.min(list.length - 1, Math.floor(d.y / h)));
+			const row = list[index];
+			if (moved.has(row.task.id)) return null;
+			const within = d.y / h - index;
+			let where = within < .3 ? "before" : within > .7 || row.milestone ? "after" : "inside";
+			if (row.milestone && within < .5) where = "before";
+			return {
+				row,
+				where
+			};
+		});
+		/** The line showing where a dragged row goes, indented to the level it would take. */
+		const dropLine = computed(() => {
+			const drop = rowDrop.value;
+			if (!drop || drop.where === "inside") return null;
+			const { row, where } = drop;
+			const first = where === "after" && row.summary && !row.task.collapsed;
+			return {
+				transform: `translateY(${(row.index + (where === "after" ? 1 : 0)) * props.rowHeight}px)`,
+				left: `${(row.depth + (first ? 1 : 0)) * 16 + 30}px`
+			};
+		});
+		function onRowDown(event, row) {
+			if (event.button !== 0 || !editable.value || editing.value) return;
+			if (event.target.closest("button, input, .dou-gantt__editor")) return;
+			const body = tableBody.value;
+			const y = event.clientY - body.getBoundingClientRect().top + body.scrollTop;
+			const d = {
+				id: row.task.id,
+				pointerId: event.pointerId,
+				touch: event.pointerType === "touch",
+				clientX: event.clientX,
+				y0: y,
+				y,
+				clientY: event.clientY,
+				started: false
+			};
+			rowDrag.value = d;
+			hold?.release();
+			hold = holdPointer(event, root.value);
+			window.addEventListener("pointermove", onRowMove);
+			window.addEventListener("pointerup", onRowUp);
+			window.addEventListener("pointercancel", stopRowDrag);
+			window.addEventListener("keydown", onRowKey, true);
+			if (d.touch) rowTimer = setTimeout(() => {
+				if (rowDrag.value !== d) return;
+				beginRowDrag(d);
+				navigator.vibrate?.(8);
+			}, LONG_PRESS);
+		}
+		function beginRowDrag(d) {
+			d.started = true;
+			hold?.grab();
+			window.getSelection()?.removeAllRanges();
+			rowFrame = requestAnimationFrame(rowAutoScroll);
+			rowDrag.value = { ...d };
+		}
+		function onRowMove(event) {
+			const d = rowDrag.value;
+			if (!d || event.pointerId !== d.pointerId) return;
+			const body = tableBody.value;
+			const y = event.clientY - body.getBoundingClientRect().top + body.scrollTop;
+			if (!d.started) {
+				if (Math.abs(y - d.y0) <= THRESHOLD[d.touch ? "touch" : "mouse"]) return;
+				if (d.touch) return stopRowDrag();
+				beginRowDrag(d);
+			}
+			rowDrag.value = {
+				...rowDrag.value,
+				y,
+				clientY: event.clientY
+			};
+		}
+		function rowAutoScroll() {
+			const d = rowDrag.value;
+			const body = tableBody.value;
+			if (!d?.started || !body) return;
+			const rect = body.getBoundingClientRect();
+			let dy = -edgeSpeed(d.clientY - rect.top) || edgeSpeed(rect.bottom - d.clientY);
+			if (Math.sign(dy) !== Math.sign(d.y - d.y0)) dy = 0;
+			if (dy) {
+				body.scrollTop += dy;
+				onTableScroll();
+				rowDrag.value = {
+					...d,
+					y: d.clientY - rect.top + body.scrollTop
+				};
+			}
+			rowFrame = requestAnimationFrame(rowAutoScroll);
+		}
+		function onRowUp(event) {
+			const d = rowDrag.value;
+			if (!d || event.pointerId !== d.pointerId) return;
+			const drop = rowDrop.value;
+			if (d.touch && d.started && Math.abs(d.y - d.y0) < THRESHOLD.touch) {
+				stopRowDrag();
+				if (!menuAllowed(task(d.id), d.clientX, event.clientY)) return;
+				showMenu({
+					kind: "task",
+					task: task(d.id)
+				}, d.clientX, event.clientY);
+				return;
+			}
+			if (d.started) {
+				dragged = true;
+				setTimeout(() => dragged = false);
+				if (drop) dropRow(d.id, drop.row, drop.where);
+			}
+			stopRowDrag();
+		}
+		function dropRow(id, target, where) {
+			const targetId = target.task.id;
+			transact((tr) => {
+				if (where === "inside") {
+					tr.moveTask(id, targetId);
+					if (target.task.collapsed) tr.updateTask(targetId, { collapsed: void 0 });
+					return;
+				}
+				if (where === "after" && target.summary && !target.task.collapsed) return void tr.moveTask(id, targetId, 0);
+				const parent = parentOf(targetId);
+				const index = (tree.value.childrenOf.get(parent) ?? []).filter((task) => task.id !== id).findIndex((task) => task.id === targetId);
+				tr.moveTask(id, parent, where === "before" ? index : index + 1);
+			});
+			announceTask(id);
+		}
+		function onRowKey(event) {
+			if (event.key !== "Escape" || !rowDrag.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			stopRowDrag();
+		}
+		function stopRowDrag() {
+			clearTimeout(rowTimer);
+			rowTimer = void 0;
+			cancelAnimationFrame(rowFrame);
+			hold?.release();
+			hold = null;
+			window.removeEventListener("pointermove", onRowMove);
+			window.removeEventListener("pointerup", onRowUp);
+			window.removeEventListener("pointercancel", stopRowDrag);
+			window.removeEventListener("keydown", onRowKey, true);
+			rowDrag.value = null;
+		}
+		onBeforeUnmount(stopRowDrag);
+		const hovered = ref(null);
+		function select(task, event) {
+			const id = task.id;
+			if (event.shiftKey || event.metaKey || event.ctrlKey) selection.value = selected.value.has(id) ? selection.value.filter((item) => item !== id) : [...selection.value, id];
+			else if (selection.value.length !== 1 || selection.value[0] !== id) selection.value = [id];
+		}
+		function onTaskClick(row, event) {
+			if (dragged) return;
+			selectedLink.value = null;
+			active.value = row.task.id;
+			select(row.task, event);
+			emit("taskClick", row.task, event);
+		}
+		const highlightRows = computed(() => visibleRows.value.filter((row) => selected.value.has(row.task.id) || hovered.value === row.task.id));
+		const THRESHOLD = {
+			mouse: 3,
+			touch: 6
+		};
+		/** How long a finger rests on a bar before it picks it up, in ms. */
+		let dragged = false;
+		let pressTimer;
+		let frame = 0;
+		/** The step a drag snaps to for these spans: whole days when any is date-only. */
+		function stepFor(spans) {
+			const step = snapStep(dayWidth.value);
+			for (const span of spans) if (span.dateOnly) return Math.max(step, MINUTES_PER_DAY);
+			return step;
+		}
+		const snap = (at, step) => Math.round(at / step) * step;
+		const task = (id) => tasks.value.find((item) => item.id === id);
+		/** Auto-scroll speed in px per frame, `gap` px from the edge. */
+		const edgeSpeed = (gap) => gap < EDGE ? Math.ceil((EDGE - gap) / EDGE * 16) : 0;
+		/** The changes the current drag would make, by task id. */
+		const dragPreview = computed(() => {
+			const d = drag.value;
+			if (!d?.started) return null;
+			const out = /* @__PURE__ */ new Map();
+			const delta = (d.x - d.x0) / ppm.value;
+			switch (d.mode) {
+				case "move": {
+					const unit = stepFor(d.spans.values());
+					const first = d.spans.get(d.id) ?? d.spans.values().next().value;
+					const shift = snap(first.start + delta, unit) - first.start;
+					for (const [id, span] of d.spans) {
+						const start = span.start + shift;
+						out.set(id, writeSpan(task(id), start, endKeepingWork(calendar.value, span, start)));
+					}
+					break;
+				}
+				case "start":
+				case "end": {
+					const span = d.spans.get(d.id);
+					const unit = stepFor([span]);
+					if (d.mode === "start") {
+						const start = Math.min(snap(span.start + delta, unit), span.end - unit);
+						out.set(d.id, writeSpan(task(d.id), start, span.end));
+					} else {
+						const end = Math.max(snap(span.end + delta, unit), span.start + unit);
+						out.set(d.id, writeSpan(task(d.id), span.start, end));
+					}
+					break;
+				}
+				case "progress": {
+					const { left, width } = d.box;
+					const value = Math.round(Math.min(1, Math.max(0, (d.x - left) / width)) * 20) / 20;
+					out.set(d.id, { progress: value });
+					break;
+				}
+				case "draw": {
+					const unit = Math.max(snapStep(dayWidth.value), MINUTES_PER_DAY);
+					const a = origin.value + Math.min(d.x0, d.x) / ppm.value;
+					const b = origin.value + Math.max(d.x0, d.x) / ppm.value;
+					const start = Math.floor(a / unit) * unit;
+					const end = Math.max(start + unit, Math.ceil(b / unit) * unit);
+					out.set(d.id, writeSpan(task(d.id), start, end));
+					break;
+				}
+				case "link": return null;
+			}
+			return out;
+		});
+		/** The leaf tasks a drag on `row` moves: the row itself, its subtasks, or the whole selection. */
+		function movers(row) {
+			const out = /* @__PURE__ */ new Map();
+			const add = (id) => {
+				const item = tree.value.byId.get(id);
+				if (!item || item.task.locked) return;
+				if (item.summary) for (const child of tree.value.childrenOf.get(id) ?? []) add(child.id);
+				else if (item.span) out.set(id, { ...item.span });
+			};
+			const ids = selected.value.has(row.task.id) ? selection.value : [row.task.id];
+			for (const id of ids) add(id);
+			return out;
+		}
+		function startDrag(event, row, mode, from) {
+			if (event.button !== 0 || !editable.value) return;
+			const touch = event.pointerType === "touch";
+			hold?.release();
+			hold = holdPointer(event, root.value);
+			const x = contentX(event.clientX);
+			const d = {
+				mode,
+				id: row.task.id,
+				pointerId: event.pointerId,
+				touch,
+				x0: x,
+				x,
+				clientX: event.clientX,
+				clientY: event.clientY,
+				started: false,
+				spans: /* @__PURE__ */ new Map(),
+				from
+			};
+			if (mode === "move") {
+				d.spans = movers(row);
+				if (!d.spans.size) return;
+			} else if (mode === "start" || mode === "end") {
+				if (!row.span || row.task.locked) return;
+				d.spans.set(row.task.id, { ...row.span });
+			} else if (mode === "progress") {
+				if (!row.span || row.task.locked) return;
+				d.box = {
+					left: xOf(row.span.start),
+					width: Math.max(1, (row.span.end - row.span.start) * ppm.value)
+				};
+			}
+			drag.value = d;
+			window.addEventListener("pointermove", onDragMove);
+			window.addEventListener("pointerup", onDragEnd);
+			window.addEventListener("pointercancel", onDragCancel);
+			window.addEventListener("keydown", onDragKey, true);
+			if (touch && mode === "move") pressTimer = setTimeout(() => {
+				if (drag.value !== d) return;
+				begin(d);
+				navigator.vibrate?.(8);
+			}, LONG_PRESS);
+		}
+		function begin(d) {
+			d.started = true;
+			hold?.grab();
+			frame = requestAnimationFrame(autoScroll);
+			drag.value = { ...d };
+		}
+		let hold = null;
+		const onTouchMove = (event) => void axis.pinchMove(event);
+		const onTouchEnd = (event) => axis.pinchEnd(event);
+		function onTouchStart(event) {
+			if (!axis.pinchStart(event)) return;
+			stopDrag();
+			stopRowDrag();
+		}
+		onMounted(() => {
+			const el = root.value;
+			el.addEventListener("touchstart", onTouchStart, { passive: true });
+			el.addEventListener("touchmove", onTouchMove, { passive: false });
+			el.addEventListener("touchend", onTouchEnd);
+			el.addEventListener("touchcancel", onTouchEnd);
+		});
+		onBeforeUnmount(() => {
+			const el = root.value;
+			el?.removeEventListener("touchstart", onTouchStart);
+			el?.removeEventListener("touchmove", onTouchMove);
+			el?.removeEventListener("touchend", onTouchEnd);
+			el?.removeEventListener("touchcancel", onTouchEnd);
+		});
+		function onDragMove(event) {
+			const d = drag.value;
+			if (!d || event.pointerId !== d.pointerId) return;
+			d.clientX = event.clientX;
+			d.clientY = event.clientY;
+			const x = contentX(event.clientX);
+			if (!d.started) {
+				if (!(Math.abs(x - d.x0) > THRESHOLD[d.touch ? "touch" : "mouse"])) return;
+				if (d.touch && d.mode === "move") return stopDrag();
+				begin(d);
+			}
+			update(drag.value, x);
+		}
+		function update(d, x) {
+			const next = {
+				...d,
+				x
+			};
+			if (d.mode === "link") next.target = linkTarget(d);
+			drag.value = next;
+		}
+		let canLinkWarned = false;
+		function warnCanLink() {
+			if (process.env.NODE_ENV === "production" || canLinkWarned) return;
+			canLinkWarned = true;
+			console.warn("[@dou-ui/gantt] canLink returned undefined, so the link is refused. Return true to allow it.");
+		}
+		/** The bar end under the pointer, and whether a link to it would be refused. */
+		function linkTarget(d) {
+			const el = document.elementsFromPoint(d.clientX, d.clientY).find((item) => item instanceof HTMLElement && !!item.dataset.task);
+			const id = el?.dataset.task;
+			if (!el || !id) return void 0;
+			const rect = el.getBoundingClientRect();
+			const end = d.clientX < rect.left + rect.width / 2 ? "start" : "end";
+			return {
+				id,
+				end,
+				...checkLink(d.id, id, linkTypeOf(d.from, end))
+			};
+		}
+		/** Whether a link may be made, and if not, why: the built-in rules, then `can-link` and the extensions'. */
+		function checkLink(from, to, type) {
+			let refusal = linkRefusal(new Map(tasks.value.map((t) => [t.id, t])), links.value, from, to);
+			let reason;
+			if (refusal && refusal !== "self" && refusal !== "custom") reason = messages.value.linkRefusals[refusal];
+			if (refusal) return {
+				refusal,
+				reason
+			};
+			const link = {
+				from,
+				to,
+				type
+			};
+			for (const rule of [...props.canLink ? [props.canLink] : [], ...resolved.value.linkRules]) {
+				const answer = rule(link, docOf());
+				if (answer === true) continue;
+				if (answer === void 0) warnCanLink();
+				return {
+					refusal: "custom",
+					reason: typeof answer === "string" && answer ? answer : void 0
+				};
+			}
+			return {
+				refusal: null,
+				reason
+			};
+		}
+		/**
+		* Why new dates can't be written, from `can-move` and the extensions'; a
+		* refusal without words gets a plain one. `null` when they can.
+		*/
+		function checkMove(changes) {
+			const rules = [...props.canMove ? [props.canMove] : [], ...resolved.value.moveRules];
+			if (!rules.length) return null;
+			const doc = docOf();
+			for (const [id, patch] of changes) {
+				if (patch.start === void 0) continue;
+				const move = {
+					task: task(id),
+					start: patch.start,
+					end: patch.end
+				};
+				for (const rule of rules) {
+					const answer = rule(move, doc);
+					if (answer === true) continue;
+					return typeof answer === "string" && answer ? answer : messages.value.moveRefused;
+				}
+			}
+			return null;
+		}
+		/** Why the current drag's dates would be refused, its own or those of the tasks it pushes. */
+		const dragRefusal = computed(() => {
+			const changes = dragPreview.value;
+			if (!changes || drag.value?.mode === "progress") return null;
+			const pushes = pushPreview.value?.moves;
+			return checkMove(pushes?.size ? new Map([...changes, ...pushes]) : changes);
+		});
+		function autoScroll() {
+			const d = drag.value;
+			const el = chart.value;
+			if (!d?.started || !el) return;
+			const rect = el.getBoundingClientRect();
+			let dx = -edgeSpeed(d.clientX - rect.left) || edgeSpeed(rect.right - d.clientX);
+			if (Math.sign(dx) !== Math.sign(d.x - d.x0)) dx = 0;
+			const dy = -edgeSpeed(d.clientY - rect.top - HEADER) || edgeSpeed(rect.bottom - d.clientY);
+			if (dx || dy && d.mode === "link") {
+				el.scrollLeft += dx;
+				if (d.mode === "link") el.scrollTop += dy;
+				update(d, contentX(d.clientX));
+			}
+			frame = requestAnimationFrame(autoScroll);
+		}
+		function onDragEnd(event) {
+			const d = drag.value;
+			if (!d || event.pointerId !== d.pointerId) return;
+			if (d.touch && d.started && d.mode === "move" && Math.abs(d.x - d.x0) < THRESHOLD.touch) {
+				stopDrag();
+				if (!menuAllowed(task(d.id), event.clientX, event.clientY)) return;
+				showMenu({
+					kind: "task",
+					task: task(d.id)
+				}, event.clientX, event.clientY);
+				return;
+			}
+			if (d.started) {
+				dragged = true;
+				setTimeout(() => dragged = false);
+				if (d.mode === "link") finishLink(d);
+				else if (dragRefusal.value) announce(dragRefusal.value);
+				else {
+					const changes = dragPreview.value;
+					if (changes) {
+						const done = transact((tr) => {
+							for (const [id, patch] of changes) tr.updateTask(id, patch);
+						});
+						announceTask(d.id, done);
+					}
+				}
+			}
+			stopDrag();
+		}
+		function finishLink(d) {
+			const target = d.target;
+			if (!target || target.refusal) return;
+			const link = {
+				id: createId(),
+				from: d.id,
+				to: target.id
+			};
+			const type = linkTypeOf(d.from, target.end);
+			if (type !== "fs") link.type = type;
+			const done = transact((tr) => tr.addLink(link));
+			emit("link", link);
+			announceLinked(link, done);
+		}
+		function announceLinked(link, tr) {
+			const m = messages.value;
+			announce(withPushed(format(m.linked, {
+				from: task(link.from).title,
+				to: task(link.to).title
+			}), tr));
+		}
+		/** Adds how many tasks automatic scheduling pushed, if any. */
+		function withPushed(text, tr) {
+			const count = pushedBy.get(tr);
+			return count ? format(messages.value.pushed, {
+				task: text,
+				count
+			}) : text;
+		}
+		const onDragCancel = () => stopDrag();
+		function onDragKey(event) {
+			if (event.key !== "Escape" || !drag.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			if (drag.value.started) {
+				dragged = true;
+				setTimeout(() => dragged = false);
+			}
+			stopDrag();
+		}
+		function stopDrag() {
+			clearTimeout(pressTimer);
+			cancelAnimationFrame(frame);
+			hold?.release();
+			hold = null;
+			window.removeEventListener("pointermove", onDragMove);
+			window.removeEventListener("pointerup", onDragEnd);
+			window.removeEventListener("pointercancel", onDragCancel);
+			window.removeEventListener("keydown", onDragKey, true);
+			drag.value = null;
+		}
+		onBeforeUnmount(stopDrag);
+		function onBarDown(event, row) {
+			const handle = event.target.closest("[data-handle]")?.dataset.handle;
+			if (handle?.startsWith("link-")) {
+				event.stopPropagation();
+				return startDrag(event, row, "link", handle.slice(5));
+			}
+			if (handle) event.stopPropagation();
+			startDrag(event, row, handle ?? "move");
+		}
+		/** A press on an empty row of a task without dates draws its dates. */
+		function onBodyDown(event) {
+			if (event.target !== event.currentTarget && !event.target.matches(".dou-gantt__off, .dou-gantt__gridline, .dou-gantt__row-highlight")) return;
+			const y = event.clientY - chart.value.getBoundingClientRect().top - HEADER + chart.value.scrollTop;
+			const row = rows.value[Math.floor(y / props.rowHeight)];
+			if (!row || row.span || row.summary || row.task.locked) return;
+			if (event.pointerType === "touch") return;
+			startDrag(event, row, "draw");
+		}
+		/** The bar a link being drawn would end at, and whether it is refused. */
+		const linkHighlight = computed(() => {
+			const target = drag.value?.target;
+			if (target) return {
+				id: target.id,
+				refused: !!target.refusal
+			};
+			const link = keyLink.value;
+			return link?.to ? {
+				id: link.to,
+				refused: !!link.refusal
+			} : null;
+		});
+		/** The line drawn while linking: from the end it started at to the pointer or target. */
+		const draftLink = computed(() => {
+			const link = keyLink.value;
+			if (link?.to) {
+				const a = tree.value.byId.get(link.from);
+				const b = tree.value.byId.get(link.to);
+				const boxA = a && boxOf(a);
+				const boxB = b && boxOf(b);
+				if (!boxA || !boxB) return null;
+				return {
+					d: roundedPath(routeLink(boxA, boxB, "fs", props.rowHeight).points),
+					refused: !!link.refusal
+				};
+			}
+			const d = drag.value;
+			if (d?.mode !== "link" || !d.started) return null;
+			const row = tree.value.byId.get(d.id);
+			const box = row && boxOf(row);
+			if (!box) return null;
+			const x = d.from === "start" ? box.left : box.right;
+			const rect = chart.value.getBoundingClientRect();
+			const y = d.clientY - rect.top - HEADER + chart.value.scrollTop;
+			return {
+				d: `M${x} ${box.y} L${d.x} ${y}`,
+				refused: !!d.target?.refusal
+			};
+		});
+		/** Keeps a tip inside the view: one that starts left of it, or runs past its right edge. */
+		function tipLeft(x, text) {
+			const right = scrollLeft.value + viewWidth.value - textWidth(text) - 24;
+			return Math.max(Math.min(x, right), scrollLeft.value + 8);
+		}
+		/** What a drag shows beside the pointer: new dates, the progress, or why it can't. */
+		const dragTip = computed(() => {
+			const d = drag.value;
+			if (!d?.started) return null;
+			if (d.mode === "link") {
+				const target = d.target?.reason ? tree.value.byId.get(d.target.id) : void 0;
+				if (!target?.span || target.index < 0) return null;
+				return {
+					text: d.target.reason,
+					refused: true,
+					left: tipLeft(xOf(target.span.start), d.target.reason),
+					top: target.index * props.rowHeight
+				};
+			}
+			const row = tree.value.byId.get(d.id);
+			if (!row?.span || row.index < 0) return null;
+			const m = messages.value;
+			const text = dragRefusal.value ? dragRefusal.value : d.mode === "progress" ? format(m.progressTip, { value: Math.round(row.progress * 100) }) : row.milestone ? dateLabel(row.span.start - (row.span.dateOnly ? MINUTES_PER_DAY / 2 : 0), row.span.dateOnly, m) : format(m.rangeTip, {
+				start: dateLabel(row.span.start, row.span.dateOnly, m),
+				end: endLabel(row.span, m),
+				duration: durationLabel(row.span, calendar.value, m)
+			});
+			return {
+				text,
+				refused: !!dragRefusal.value,
+				left: tipLeft(xOf(row.span.start), text),
+				top: row.index * props.rowHeight
+			};
+		});
+		const menu = useTemplateRef("menu");
+		const menuItems = shallowRef([]);
+		const menuOpen = ref(false);
+		/** The built-in items for a target. */
+		function builtInItems(target) {
+			const m = messages.value.menu;
+			if (target.kind === "link") return [{
+				key: "remove-link",
+				label: m.removeLink,
+				icon: TrashIcon,
+				tone: "danger",
+				run: () => {
+					transact((tr) => tr.removeLink(target.link.id));
+					announce(messages.value.linkRemoved);
+				}
+			}];
+			if (target.kind === "canvas") return [{
+				key: "add",
+				label: m.addTask,
+				icon: PlusIcon,
+				run: () => insertTask(null, { start: target.time })
+			}];
+			const id = target.task.id;
+			const row = tree.value.byId.get(id);
+			const siblings = tree.value.childrenOf.get(parentOf(id)) ?? [];
+			const index = siblings.findIndex((item) => item.id === id);
+			const ids = selected.value.has(id) ? selection.value : [id];
+			return [
+				{
+					key: "rename",
+					label: m.rename,
+					icon: EditIcon,
+					shortcut: "f2",
+					run: () => editCell(id)
+				},
+				{
+					key: "add-after",
+					label: m.addAfter,
+					icon: PlusIcon,
+					run: () => insertTask(id)
+				},
+				{
+					key: "add-inside",
+					label: m.addInside,
+					icon: ListTreeIcon,
+					disabled: !!row?.milestone,
+					run: () => insertTask(id, { where: "inside" })
+				},
+				{
+					key: "indent",
+					label: m.indent,
+					icon: IndentIcon,
+					shortcut: "mod+]",
+					divided: true,
+					disabled: index < 1 || siblings[index - 1]?.type === "milestone",
+					run: () => indentTask(id)
+				},
+				{
+					key: "outdent",
+					label: m.outdent,
+					icon: OutdentIcon,
+					shortcut: "mod+[",
+					disabled: parentOf(id) == null,
+					run: () => outdentTask(id)
+				},
+				{
+					key: "remove",
+					label: ids.length > 1 ? format(m.removeTasks, { count: ids.length }) : m.removeTask,
+					icon: TrashIcon,
+					shortcut: "delete",
+					tone: "danger",
+					divided: true,
+					run: () => removeTasks(ids)
+				}
+			];
+		}
+		/** Your items, the extensions', then the built-in ones, a separator between each group. */
+		function itemsFor(target) {
+			const items = [];
+			const groups = [props.contextMenu?.(target) ?? [], ...resolved.value.menus.map((fn) => fn(context, target))];
+			if (props.menu && editable.value) groups.push(builtInItems(target));
+			for (const list of groups) list.forEach((item, i) => items.push(i === 0 && items.length ? {
+				...item,
+				divided: true
+			} : item));
+			return items;
+		}
+		function menuPoint(on, x, y) {
+			const rect = chart.value.getBoundingClientRect();
+			const point = {
+				x: x - rect.left + chart.value.scrollLeft,
+				y: y - rect.top - HEADER + chart.value.scrollTop
+			};
+			if (on.kind === "task" && (x < rect.left || x > rect.right)) {
+				const row = tree.value.byId.get(on.task.id);
+				if (row?.span) point.x = xOf(row.span.start);
+				if (row && row.index >= 0) point.y = (row.index + .5) * props.rowHeight;
+			}
+			return {
+				point,
+				time: Math.round(origin.value + point.x / ppm.value)
+			};
+		}
+		/** Opens the menu for a target at a point on screen; `false` when it has nothing to show. */
+		function showMenu(on, x, y) {
+			const target = {
+				...on,
+				...menuPoint(on, x, y)
+			};
+			const items = itemsFor(target);
+			if (!items.length) return false;
+			if (target.kind === "task") {
+				active.value = target.task.id;
+				if (!selected.value.has(target.task.id)) selection.value = [target.task.id];
+			} else if (target.kind === "link") selectedLink.value = target.link.id;
+			menuItems.value = items;
+			menu.value?.open(x, y);
+			return true;
+		}
+		/** When a finger last went down: its long press opens the menu itself, not the browser's. */
+		let touchedAt = 0;
+		const onRootPointerdown = (event) => {
+			if (event.pointerType === "touch") touchedAt = Date.now();
+		};
+		/**
+		* A menu opened by a resting finger or by the menu key has no browser event:
+		* it gets a stand-in, so `taskContextmenu` comes first in every case and
+		* `preventDefault()` keeps the menu closed.
+		*/
+		function menuAllowed(item, x, y) {
+			const event = new MouseEvent("contextmenu", {
+				cancelable: true,
+				clientX: x,
+				clientY: y
+			});
+			emit("taskContextmenu", item, event);
+			return !event.defaultPrevented;
+		}
+		function onTaskContextmenu(row, event) {
+			if (Date.now() - touchedAt < 1e3) return event.preventDefault();
+			emit("taskContextmenu", row.task, event);
+			if (event.defaultPrevented) return;
+			if (showMenu({
+				kind: "task",
+				task: row.task
+			}, event.clientX, event.clientY)) event.preventDefault();
+		}
+		function onLinkContextmenu(link, event) {
+			emit("linkContextmenu", link, event);
+			if (event.defaultPrevented) return;
+			if (showMenu({
+				kind: "link",
+				link
+			}, event.clientX, event.clientY)) event.preventDefault();
+		}
+		function onBodyContextmenu(event) {
+			if (event.defaultPrevented || event.target !== event.currentTarget) {
+				if (!event.target.matches(".dou-gantt__off, .dou-gantt__gridline")) return;
+			}
+			if (Date.now() - touchedAt < 1e3) return event.preventDefault();
+			if (showMenu({ kind: "canvas" }, event.clientX, event.clientY)) event.preventDefault();
+		}
+		/** The empty timeline below the last row opens the same menu as the rows' blank space. */
+		function onCanvasContextmenu(event) {
+			if (event.target !== event.currentTarget || event.defaultPrevented) return;
+			if (Date.now() - touchedAt < 1e3) return event.preventDefault();
+			if (showMenu({ kind: "canvas" }, event.clientX, event.clientY)) event.preventDefault();
+		}
+		/** The menu key, or Shift+F10, opens the menu of the task the keyboard is on, at its bar. */
+		function openKeyMenu() {
+			const id = active.value;
+			const row = id ? tree.value.byId.get(id) : void 0;
+			if (!row) return false;
+			const rect = (root.value?.querySelector(`.dou-gantt__bar[data-task="${CSS.escape(row.task.id)}"]`) ?? root.value?.querySelector(`.dou-gantt__tr[data-row="${CSS.escape(row.task.id)}"]`))?.getBoundingClientRect();
+			if (!rect) return false;
+			if (!menuAllowed(row.task, rect.left + 8, rect.bottom + 4)) return true;
+			return showMenu({
+				kind: "task",
+				task: row.task
+			}, rect.left + 8, rect.bottom + 4);
+		}
+		/** The task the keyboard is on. */
+		const active = ref(null);
+		/** Puts the keyboard on a task: scrolls it into view and focuses its bar, or its table row. */
+		function focusTask(id) {
+			if (!tree.value.byId.get(id)) return;
+			active.value = id;
+			scrollToTask(id);
+			nextTick(() => {
+				(root.value?.querySelector(`.dou-gantt__bar[data-task="${CSS.escape(id)}"]`) ?? root.value?.querySelector(`.dou-gantt__tr[data-row="${CSS.escape(id)}"]`) ?? root.value)?.focus({ preventScroll: true });
+			});
+		}
+		/** Reads a task out as it is once the change has reached the rows. */
+		function announceTask(id, tr) {
+			nextTick(() => {
+				const row = tree.value.byId.get(id);
+				if (!row) return;
+				let text = tr ? withPushed(describe(row), tr) : describe(row);
+				const count = links.value.filter((link) => (link.from === id || link.to === id) && brokenLinks.value.has(link.id)).length;
+				if (count) text = format(messages.value.broken, {
+					task: text,
+					count
+				});
+				announce(text);
+			});
+		}
+		/** Moves the task the keyboard is on (or the selection) by a step, or its end. */
+		function keyMove(direction, which) {
+			const row = active.value ? tree.value.byId.get(active.value) : void 0;
+			if (!row || !editable.value) return;
+			let changes = /* @__PURE__ */ new Map();
+			if (which === "move") {
+				const spans = movers(row);
+				if (!spans.size) return;
+				const unit = stepFor(spans.values()) * direction;
+				const first = spans.get(row.task.id) ?? spans.values().next().value;
+				let shift = unit;
+				for (let i = 0; i < 366 && !isWorkTime(calendar.value, first.start + shift, first.dateOnly); i++) shift += unit;
+				for (const [id, span] of spans) {
+					const start = span.start + shift;
+					changes.set(id, writeSpan(task(id), start, endKeepingWork(calendar.value, span, start)));
+				}
+			} else {
+				const span = row.span;
+				if (!span || row.summary || row.milestone || row.task.locked) return;
+				const unit = stepFor([span]);
+				let end = span.end + unit * direction;
+				while (span.dateOnly && end > span.start + unit && !calendar.value.isWorkday(dayIndex(end - 1))) end += unit * direction;
+				end = Math.max(end, span.start + unit);
+				if (end === span.end) return;
+				changes = /* @__PURE__ */ new Map([[row.task.id, writeSpan(row.task, span.start, end)]]);
+			}
+			const refusal = checkMove(changes);
+			if (refusal) return announce(refusal);
+			const done = transact((tr) => {
+				for (const [id, patch] of changes) tr.updateTask(id, patch);
+			}, { group: `keys:${which}:${row.task.id}` });
+			scrollToTask(row.task.id);
+			announceTask(row.task.id, done);
+		}
+		/** Linking by keys: from the task the keyboard was on, to the one picked with Up and Down. */
+		const keyLink = ref(null);
+		function pickLinkTarget(step) {
+			const link = keyLink.value;
+			const list = rows.value;
+			let index = list.findIndex((row) => row.task.id === (link.to ?? link.from));
+			for (let i = 0; i < list.length; i++) {
+				index = (index + step + list.length) % list.length;
+				const row = list[index];
+				if (row.task.id !== link.from && row.span) break;
+			}
+			const to = list[index].task.id;
+			if (to === link.from) return;
+			keyLink.value = {
+				from: link.from,
+				to,
+				...checkLink(link.from, to, "fs")
+			};
+			scrollToTask(to);
+			const title = task(to).title;
+			announce(keyLink.value.reason ? `${title}，${keyLink.value.reason}` : title);
+		}
+		function onKeyLink(event) {
+			const link = keyLink.value;
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") pickLinkTarget(event.key === "ArrowDown" ? 1 : -1);
+			else if (event.key === "Enter") {
+				if (!link.to) return;
+				if (link.refusal) announce(link.reason ?? messages.value.linkRefusals.cycle);
+				else {
+					const made = {
+						id: createId(),
+						from: link.from,
+						to: link.to
+					};
+					const done = transact((tr) => tr.addLink(made));
+					emit("link", made);
+					announceLinked(made, done);
+					keyLink.value = null;
+				}
+			} else if (event.key === "Escape") {
+				keyLink.value = null;
+				announce(messages.value.cancelled);
+			} else if (event.key !== "Tab") return;
+			event.preventDefault();
+		}
+		const keymaps = computed(() => resolved.value.keymaps.map((keymap) => keymap(context)));
+		function onKeydown(event) {
+			if (event.target.closest("input, textarea, select, [contenteditable]")) return;
+			if (keyLink.value) return onKeyLink(event);
+			for (const keymap of keymaps.value) for (const [hotkey, handler] of Object.entries(keymap)) if (matchesHotkey(event, hotkey) && handler(event) !== false) {
+				event.preventDefault();
+				return;
+			}
+			if (onEditKey(event) || onNavigationKey(event)) event.preventDefault();
+		}
+		/** Undoes or redoes, and says what changed back. */
+		function announceTravel(direction) {
+			const tr = travel(direction);
+			if (!tr) return;
+			const m = messages.value;
+			const step = tr.steps[direction === "undo" ? tr.steps.length - 1 : 0];
+			nextTick(() => {
+				let change = "";
+				if (step.type === "addLink" || step.type === "removeLink") {
+					const link = step.type === "addLink" ? step.link : tr.before.links.find((l) => l.id === step.id);
+					const from = link && tree.value.byId.get(link.from)?.task.title;
+					const to = link && tree.value.byId.get(link.to)?.task.title;
+					change = step.type === "addLink" && from && to ? format(m.linked, {
+						from,
+						to
+					}) : m.linkRemoved;
+				} else if (step.type === "updateLink") change = m.linkChanged;
+				else {
+					const id = step.type === "addTask" ? step.task.id : step.id;
+					const row = tree.value.byId.get(id);
+					change = row ? describe(row) : format(m.taskRemoved, { title: tr.before.tasks.find((t) => t.id === id)?.title ?? "" });
+				}
+				announce(format(m[direction === "undo" ? "undone" : "redone"], { change }));
+			});
+		}
+		function onEditKey(event) {
+			if (!editable.value) return false;
+			if (matchesHotkey(event, "mod+z")) announceTravel("undo");
+			else if (matchesHotkey(event, "mod+shift+z") || matchesHotkey(event, "mod+y")) announceTravel("redo");
+			else if ((event.key === "Delete" || event.key === "Backspace") && selectedLink.value) {
+				const id = selectedLink.value;
+				transact((tr) => tr.removeLink(id));
+				announce(messages.value.linkRemoved);
+			} else if (event.key === "Delete" && selection.value.length) removeTasks(selection.value);
+			else if (event.key === "F2" && active.value) editCell(active.value);
+			else if (matchesHotkey(event, "mod+]") && active.value) indentTask(active.value);
+			else if (matchesHotkey(event, "mod+[") && active.value) outdentTask(active.value);
+			else if (event.key === "ContextMenu" || matchesHotkey(event, "shift+f10")) openKeyMenu();
+			else if (matchesHotkey(event, "alt+arrowleft")) keyMove(-1, "move");
+			else if (matchesHotkey(event, "alt+arrowright")) keyMove(1, "move");
+			else if (matchesHotkey(event, "alt+shift+arrowleft")) keyMove(-1, "end");
+			else if (matchesHotkey(event, "alt+shift+arrowright")) keyMove(1, "end");
+			else if (matchesHotkey(event, "l") && active.value) {
+				keyLink.value = {
+					from: active.value,
+					to: null,
+					refusal: null
+				};
+				announce(format(messages.value.linkMode, { title: task(active.value).title }));
+			} else return false;
+			return true;
+		}
+		function onNavigationKey(event) {
+			if (event.altKey || event.metaKey || event.ctrlKey) return false;
+			const list = rows.value;
+			if (!list.length) return false;
+			const row = active.value ? tree.value.byId.get(active.value) : void 0;
+			const index = row && row.index >= 0 ? row.index : -1;
+			const go = (i) => focusTask(list[Math.max(0, Math.min(list.length - 1, i))].task.id);
+			switch (event.key) {
+				case "ArrowDown":
+					go(index < 0 ? 0 : index + 1);
+					break;
+				case "ArrowUp":
+					go(index < 0 ? 0 : index - 1);
+					break;
+				case "Home":
+					go(0);
+					break;
+				case "End":
+					go(list.length - 1);
+					break;
+				case "ArrowRight":
+					if (!row) return false;
+					if (row.summary && row.task.collapsed) toggle(row);
+					else if (row.summary) go(index + 1);
+					break;
+				case "ArrowLeft":
+					if (!row) return false;
+					if (row.summary && !row.task.collapsed) toggle(row);
+					else if (row.task.parent != null && tree.value.byId.has(row.task.parent)) focusTask(row.task.parent);
+					break;
+				case " ":
+				case "Enter":
+					if (!row) return false;
+					selectedLink.value = null;
+					if (event.key === "Enter") selection.value = [row.task.id];
+					else selection.value = selected.value.has(row.task.id) ? selection.value.filter((id) => id !== row.task.id) : [...selection.value, row.task.id];
+					break;
+				default: return false;
+			}
+			return true;
+		}
+		const live = ref("");
+		/** Set while a cancelled change is being told of, so what follows doesn't say it was made. */
+		let refusing = false;
+		function announce(text) {
+			if (refusing) return;
+			live.value = "";
+			nextTick(() => live.value = text);
+		}
+		/** Why the last change didn't go ahead, shown for a moment over the editor. */
+		const notice = ref("");
+		let noticeTimer;
+		onBeforeUnmount(() => clearTimeout(noticeTimer));
+		/** Says why a change didn't go ahead, once while the same one repeats, as in a drag. */
+		let lastRefusal = {
+			text: "",
+			at: 0
+		};
+		function refuse(text) {
+			const at = Date.now();
+			if (refusing || text === lastRefusal.text && at - lastRefusal.at < 1e3) return;
+			lastRefusal = {
+				text,
+				at
+			};
+			announce(text);
+			notice.value = text;
+			clearTimeout(noticeTimer);
+			noticeTimer = setTimeout(() => notice.value = "", 3200);
+			refusing = true;
+			nextTick(() => refusing = false);
+		}
+		const keysHint = `${useId()}-keys`;
+		const markers = computed(() => {
+			const inRange = [...props.markers ?? [], ...resolved.value.markers.flatMap((fromExtension) => fromExtension(context))].flatMap((marker, index) => {
+				const at = parseTime(marker.date)?.at;
+				if (at == null || at < extent.value.start || at > extent.value.end) return [];
+				return [{
+					key: `${index}:${marker.date}`,
+					x: xOf(at),
+					marker
+				}];
+			});
+			const room = markerRoom(inRange.map((item) => item.marker.label ? item.x : -Infinity));
+			return inRange.map((item, i) => ({
+				...item,
+				room: room[i]
+			}));
+		});
+		/** The widest drawing made, in px; wider ones are zoomed out to fit. */
+		const PAGE = {
+			landscape: [1047, 718],
+			portrait: [718, 1047]
+		};
+		/** The columns of the table as drawn, at their widths on screen. */
+		function exportColumns() {
+			const heads = root.value?.querySelectorAll(".dou-gantt__th");
+			return columns.value.map((column, i) => ({
+				title: headerOf(column),
+				width: heads?.[i]?.offsetWidth || px(column.width) || (column.key === "title" ? 200 : 96),
+				align: column.align ?? "start",
+				isTitle: column.key === "title",
+				text: (row) => cellText(row, column)
+			}));
+		}
+		let measurer;
+		function exportTextWidth(theme) {
+			if (measurer === void 0) try {
+				measurer = document.createElement("canvas").getContext("2d");
+			} catch {
+				measurer = null;
+			}
+			return (text, bold = false) => {
+				if (!measurer) return text.length * theme.fontSize;
+				measurer.font = `${bold ? theme.fontWeight : 400} ${theme.fontSize}px ${theme.fontFamily}`;
+				return measurer.measureText(text).width;
+			};
+		}
+		function drawChart(options) {
+			const theme = readTheme(root.value);
+			let width = options.dayWidth ?? dayWidth.value;
+			let shownRows = rows.value;
+			let start;
+			let end;
+			if (options.range === "view") {
+				start = origin.value + scrollLeft.value / ppm.value;
+				end = start + (viewWidth.value || 800) / ppm.value;
+				const top = scrollTop.value;
+				const bottom = top + bodyHeight.value;
+				shownRows = rows.value.filter((row) => (row.index + 1) * props.rowHeight > top && row.index * props.rowHeight < bottom);
+			} else {
+				const known = content.value ?? {
+					start: now.value,
+					end: now.value + 1440
+				};
+				if ((known.end - known.start) * (width / 1440) > EXPORT_MAX) width = EXPORT_MAX / (known.end - known.start) * MINUTES_PER_DAY;
+				({start, end} = paddedRange(known.start, known.end, width, weekStart.value));
+				const pxPerMinute = width / MINUTES_PER_DAY;
+				const measure = exportTextWidth(theme);
+				let right = known.end;
+				for (const row of rows.value) {
+					if (!row.span || props.barLabel === "none") continue;
+					const barWidth = (row.span.end - row.span.start) * pxPerMinute;
+					if (row.milestone || row.summary || props.barLabel === "outside" || props.barLabel === "auto" && measure(row.task.title) + 20 > barWidth) right = Math.max(right, row.span.end + (measure(row.task.title) + 24 + 14) / pxPerMinute);
+				}
+				if (right > end) end = paddedRange(known.start, right, width, weekStart.value).end;
+			}
+			return drawGantt({
+				rows: shownRows,
+				links: linkList.value,
+				columns: options.table ? exportColumns() : [],
+				rowHeight: props.rowHeight,
+				dayWidth: width,
+				start,
+				end,
+				calendar: calendar.value,
+				messages: messages.value,
+				weekStart: weekStart.value,
+				now: props.today ? now.value : null,
+				markers: markers.value.map((item) => ({
+					at: parseTime(item.marker.date).at,
+					label: item.marker.label,
+					tone: item.marker.tone
+				})),
+				critical: critical.value,
+				broken: brokenLinks.value,
+				baseline: planned.value,
+				barLabel: props.barLabel,
+				background: options.background !== false,
+				linkedEnds: linkedEnds.value,
+				textWidth: exportTextWidth(theme)
+			}, theme);
+		}
+		const exportOptions = (options = {}) => ({
+			range: options.range ?? "all",
+			table: options.table ?? showTable.value,
+			dayWidth: options.scale ? levelByName(options.scale).base : void 0,
+			background: options.background
+		});
+		function exportSVG(options) {
+			return svgDocument(drawChart(exportOptions(options)));
+		}
+		async function exportPNG(options = {}) {
+			const drawing = drawChart(exportOptions(options));
+			return svgToPNG(svgDocument(drawing), {
+				width: drawing.width,
+				height: 56 + drawing.bodyHeight,
+				pixelRatio: options.pixelRatio,
+				scope: "@dou-ui/gantt",
+				hint: "export range 'view', a coarser scale, or use exportSVG() / toCSV()"
+			});
+		}
+		/** What a spreadsheet program would start a formula with; kept in step with `@dou-ui/sheet`. */
+		const FORMULA_START = /^[=+\-@\t\r]/;
+		/**
+		* A field of CSV: quoted when it has to be, and unless `escape` is off,
+		* text that a spreadsheet program would run as a formula (`=…`, `-复盘`)
+		* behind a `'`. Numbers stay as they are.
+		*/
+		function csvCell(text, escape = true) {
+			const safe = escape && FORMULA_START.test(text) && !Number.isFinite(Number(text.trim())) ? `'${text}` : text;
+			return /[",\n\r]/.test(safe) ? `"${safe.replace(/"/g, "\"\"")}"` : safe;
+		}
+		/** A cell as a spreadsheet reads it: dates as `YYYY-MM-DD`, numbers without units. */
+		function csvValue(row, column, mixed) {
+			if (column.value) {
+				const value = column.value(row.task);
+				if (value == null) return "";
+				return typeof value === "object" ? JSON.stringify(value) : String(value);
+			}
+			const span = row.span;
+			if (column.key === "start") return span ? formatTime(span.start - (row.milestone && span.dateOnly ? MINUTES_PER_DAY / 2 : 0), span.dateOnly) : "";
+			if (row.milestone && [
+				"end",
+				"duration",
+				"progress"
+			].includes(column.key)) return "";
+			if (column.key === "duration" && mixed && span) return durationLabel(span, calendar.value, messages.value);
+			return editorValue(row, column);
+		}
+		function toCSV(options = {}) {
+			const list = columns.value;
+			const m = messages.value;
+			const timed = /* @__PURE__ */ new Set();
+			for (const row of tree.value.byId.values()) if (row.span && !row.milestone) timed.add(!row.span.dateOnly);
+			const mixed = timed.size > 1;
+			const header = (column) => {
+				const title = headerOf(column);
+				if (options.text || column.value || column.key !== "duration" || timed.size !== 1) return title;
+				return format(timed.has(true) ? m.hoursColumn : m.daysColumn, { title });
+			};
+			const cell = (row, column) => options.text ? cellText(row, column) : csvValue(row, column, mixed);
+			const ids = options.ids ? [m.idColumn, m.parentColumn] : [];
+			const escape = options.escapeFormulas !== false;
+			const field = (text) => csvCell(text, escape);
+			const lines = [[...ids, ...list.map(header)].map(field).join(",")];
+			for (const row of tree.value.byId.values()) {
+				const own = options.ids ? [row.task.id, row.task.parent ?? ""] : [];
+				lines.push([...own, ...list.map((column) => cell(row, column))].map(field).join(","));
+			}
+			return (options.bom === false ? "" : "") + lines.join("\r\n");
+		}
+		function readCSV(text, outer) {
+			return readGanttCSV(text, {
+				columns: columns.value,
+				messages: messages.value,
+				calendar: calendar.value,
+				outer
+			});
+		}
+		function importCSV(text, options = {}) {
+			if (!editable.value) return null;
+			const mode = options.mode ?? "replace";
+			const result = readCSV(text, mode === "append" ? (id) => tree.value.byId.has(id) : void 0);
+			transact((tr) => applyGanttCSV(tr, result, mode, calendar.value));
+			return result;
+		}
+		const escapeHTML = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+		function print(options = {}) {
+			const orientation = options.orientation ?? "landscape";
+			const [pageWidth, pageHeight] = PAGE[orientation];
+			const table = options.table ?? true;
+			const columnsWidth = table ? exportColumns().reduce((sum, column) => sum + column.width, 0) : 0;
+			const known = content.value ?? {
+				start: now.value,
+				end: now.value + 1440
+			};
+			let fitted = (pageWidth - columnsWidth - 48) / (known.end - known.start) * MINUTES_PER_DAY;
+			fitted = Math.min(DAY_WIDTH_RANGE[1], Math.max(DAY_WIDTH_RANGE[0], fitted));
+			const drawing = drawChart({
+				range: "all",
+				table,
+				dayWidth: fitted
+			});
+			const perPage = Math.max(1, Math.floor((pageHeight * Math.max(1, drawing.width / pageWidth) - 56) / props.rowHeight));
+			const pages = [];
+			for (let top = 0; top < Math.max(1, drawing.bodyHeight); top += perPage * props.rowHeight) pages.push(`<div class="page">${svgDocument(drawing, {
+				top,
+				height: Math.min(perPage * props.rowHeight, drawing.bodyHeight - top)
+			})}</div>`);
+			const iframe = document.createElement("iframe");
+			iframe.setAttribute("aria-hidden", "true");
+			iframe.style.cssText = "position:fixed;width:0;height:0;border:0;visibility:hidden";
+			document.body.append(iframe);
+			const doc = iframe.contentDocument;
+			doc.open();
+			doc.write(`<!doctype html><html><head><meta charset="utf-8"><title>${escapeHTML(document.title)}</title><style>@page{size:A4 ${orientation};margin:10mm}html,body{margin:0}.page{break-after:page;print-color-adjust:exact;-webkit-print-color-adjust:exact}.page:last-child{break-after:auto}svg{display:block;width:100%;height:auto}</style></head><body>${pages.join("")}</body></html>`);
+			doc.close();
+			const win = iframe.contentWindow;
+			const done = () => iframe.remove();
+			win.addEventListener("afterprint", done);
+			setTimeout(done, 6e4);
+			win.focus();
+			win.print();
+		}
+		function onLinkClick(link, event) {
+			selectedLink.value = link.id;
+			root.value?.focus({ preventScroll: true });
+			emit("linkClick", link, event);
+		}
+		function scrollToTask(id) {
+			const row = tree.value.byId.get(id);
+			if (!row) return;
+			const el = chart.value;
+			if (el && row.index >= 0) {
+				const top = row.index * props.rowHeight;
+				if (top < el.scrollTop) el.scrollTop = top;
+				else if (top + props.rowHeight > el.scrollTop + bodyHeight.value) el.scrollTop = top + props.rowHeight - bodyHeight.value;
+			}
+			if (row.span) {
+				const left = xOf(row.span.start);
+				const right = xOf(row.span.end);
+				if (left < scrollLeft.value || right > scrollLeft.value + viewWidth.value) scrollToTime(row.span.start);
+			}
+		}
+		__expose({
+			transact,
+			undo,
+			redo,
+			schedule,
+			editCell,
+			insertTask,
+			indentTask,
+			outdentTask,
+			get canUndo() {
+				return canUndo.value;
+			},
+			get canRedo() {
+				return canRedo.value;
+			},
+			fit,
+			scrollToDate,
+			scrollToTask,
+			scrollToToday,
+			focusTask,
+			zoomIn,
+			zoomOut,
+			exportSVG,
+			exportPNG,
+			toCSV,
+			readCSV: (text) => readCSV(text),
+			importCSV,
+			print
+		});
+		const context = {
+			doc: source,
+			tasks,
+			links,
+			selection,
+			active,
+			readonly: computed(() => !editable.value),
+			messages,
+			scale: computed(() => level.value.name),
+			dayWidth,
+			rowHeight: computed(() => props.rowHeight),
+			rows,
+			preview,
+			critical,
+			brokenLinks,
+			schedule,
+			editCell,
+			insertTask,
+			indentTask,
+			outdentTask,
+			transact,
+			undo,
+			redo,
+			canUndo,
+			canRedo,
+			fit,
+			zoomIn,
+			zoomOut,
+			scrollToDate,
+			scrollToTask,
+			scrollToToday,
+			focusTask,
+			xOf: (time) => {
+				const at = typeof time === "number" ? time : parseTime(time)?.at;
+				return at == null ? null : xOf(at);
+			},
+			rowTop: (id) => {
+				const row = tree.value.byId.get(id);
+				return row && row.index >= 0 ? row.index * props.rowHeight : null;
+			},
+			announce
+		};
+		provide(ganttKey, context);
+		let cleanups = [];
+		let mounted = false;
+		function teardownExtensions() {
+			for (const cleanup of cleanups.splice(0)) cleanup();
+			customHistory = null;
+		}
+		let setUp = false;
+		let setupTimes = [];
+		let setupWarned = false;
+		/** An extension made in the template is new on every render, and set up again each time. */
+		function warnRepeatedSetup() {
+			if (process.env.NODE_ENV === "production" || setupWarned) return;
+			const at = Date.now();
+			setupTimes = [...setupTimes.filter((time) => at - time < 1e3), at];
+			if (setupTimes.length < 4) return;
+			setupWarned = true;
+			console.warn("[@dou-ui/gantt] the extensions keep being set up again, which also clears undo each time. Create them once in <script setup> instead of in the template.");
+		}
+		function setupExtensions() {
+			if (setUp) warnRepeatedSetup();
+			setUp = true;
+			teardownExtensions();
+			customHistory = resolved.value.history?.(context) ?? null;
+			for (const setup of resolved.value.setups) {
+				const cleanup = setup(context);
+				if (typeof cleanup === "function") cleanups.push(cleanup);
+			}
+			syncHistory();
+		}
+		onMounted(() => {
+			mounted = true;
+			setupExtensions();
+		});
+		watch(() => [resolved.value.history, ...resolved.value.setups], (hooks, before) => {
+			if (mounted && (hooks.length !== before.length || hooks.some((hook, i) => hook !== before[i]))) setupExtensions();
+		});
+		onBeforeUnmount(teardownExtensions);
+		const rowStyle = (row) => ({ transform: `translateY(${row.index * props.rowHeight}px)` });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["dou-gantt", {
+					"is-narrow": narrow.value,
+					"is-editable": editable.value,
+					"is-dragging": drag.value?.started || rowDrag.value?.started,
+					"is-dragging-row": rowDrag.value?.started,
+					[`is-dragging-${drag.value?.mode}`]: drag.value?.started,
+					"is-linking": !!keyLink.value,
+					"has-baseline": !!planned.value
+				}]),
+				style: normalizeStyle({ "--dou-gantt-row-height": `${__props.rowHeight}px` }),
+				role: "group",
+				tabindex: "0",
+				"aria-label": __props.ariaLabel ?? unref(messages).chart,
+				"aria-describedby": keysHint,
+				onKeydown,
+				onPointerdownCapture: onRootPointerdown
+			}, [
+				createElementVNode("span", {
+					id: keysHint,
+					class: "dou-gantt__sr-only"
+				}, toDisplayString(unref(messages).keys), 1),
+				createElementVNode("div", _hoisted_2, toDisplayString(live.value), 1),
+				notice.value ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(notice.value), 1)) : createCommentVNode("", true),
+				showTable.value ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					ref_key: "tablePane",
+					ref: tablePane,
+					class: "dou-gantt__table-pane",
+					style: normalizeStyle({ width: `${tableSize.value}px` })
+				}, [createElementVNode("div", {
+					class: "dou-gantt__table",
+					role: "treegrid",
+					"aria-rowcount": rows.value.length,
+					style: normalizeStyle({ minWidth: `${tableMinWidth.value}px` })
+				}, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+					return openBlock(), createElementBlock("div", {
+						key: column.key,
+						class: normalizeClass(["dou-gantt__th", [column.align && `is-${column.align}`, { "is-title": column.key === "title" }]]),
+						style: normalizeStyle(columnStyle(column)),
+						role: "columnheader"
+					}, toDisplayString(headerOf(column)), 7);
+				}), 128))]), createElementVNode("div", {
+					ref_key: "tableBody",
+					ref: tableBody,
+					class: "dou-gantt__table-body",
+					onScroll: _cache[1] || (_cache[1] = (...args) => unref(onTableScroll) && unref(onTableScroll)(...args))
+				}, [createElementVNode("div", {
+					class: "dou-gantt__table-rows",
+					style: normalizeStyle({ height: `${bodyRows.value * __props.rowHeight + Math.max(0, unref(scrollbar) - tableScrollbar.value)}px` })
+				}, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(visibleRows.value, (row) => {
+						return openBlock(), createElementBlock("div", {
+							key: row.task.id,
+							class: normalizeClass(["dou-gantt__tr", {
+								"is-selected": selected.value.has(row.task.id),
+								"is-hovered": hovered.value === row.task.id,
+								"is-summary": row.summary,
+								"is-active": active.value === row.task.id,
+								"is-moving": rowDragged.value?.has(row.task.id),
+								"is-drop-inside": rowDrop.value?.row === row && rowDrop.value.where === "inside"
+							}]),
+							style: normalizeStyle(rowStyle(row)),
+							"data-row": row.task.id,
+							tabindex: "-1",
+							role: "row",
+							"aria-level": row.depth + 1,
+							"aria-rowindex": row.index + 1,
+							"aria-expanded": row.summary ? !row.task.collapsed : void 0,
+							"aria-selected": selected.value.has(row.task.id),
+							onPointerenter: ($event) => hovered.value = row.task.id,
+							onPointerleave: _cache[0] || (_cache[0] = ($event) => hovered.value = null),
+							onPointerdown: ($event) => onRowDown($event, row),
+							onClick: ($event) => onTaskClick(row, $event),
+							onDblclick: ($event) => emit("taskDblclick", row.task, $event),
+							onContextmenu: ($event) => onTaskContextmenu(row, $event)
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (column) => {
+							return openBlock(), createElementBlock("div", {
+								key: column.key,
+								class: normalizeClass(["dou-gantt__td", [column.align && `is-${column.align}`, { "is-title": column.key === "title" }]]),
+								style: normalizeStyle(columnStyle(column)),
+								role: "gridcell",
+								onDblclick: ($event) => onCellDblclick(row, column, $event)
+							}, [column.key === "title" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", {
+								class: "dou-gantt__indent",
+								style: normalizeStyle({ width: `${row.depth * 16}px` })
+							}, null, 4), row.summary ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								class: "dou-gantt__toggle",
+								tabindex: "-1",
+								"aria-label": row.task.collapsed ? unref(messages).expand : unref(messages).collapse,
+								onClick: withModifiers(($event) => toggle(row), ["stop"])
+							}, [(openBlock(), createBlock(resolveDynamicComponent(row.task.collapsed ? unref(ChevronRightIcon) : unref(ChevronDownIcon))))], 8, _hoisted_8)) : (openBlock(), createElementBlock("span", _hoisted_9))], 64)) : createCommentVNode("", true), editing.value?.id === row.task.id && editing.value.key === column.key ? (openBlock(), createBlock(cell_editor_default, {
+								key: 1,
+								kind: editorKind(row, column),
+								value: editorValue(row, column),
+								label: unref(format)(unref(messages).editCell, { column: headerOf(column) }),
+								check: (text) => editPatch(row, column, text) !== false,
+								onDone: ($event) => onEditDone(row, column, $event),
+								onInvalid: ($event) => onEditInvalid(column),
+								onTab: ($event) => onEditTab(row, $event)
+							}, null, 8, [
+								"kind",
+								"value",
+								"label",
+								"check",
+								"onDone",
+								"onInvalid",
+								"onTab"
+							])) : (openBlock(), createElementBlock("span", _hoisted_10, [renderSlot(_ctx.$slots, "cell", {
+								task: row.task,
+								row,
+								column,
+								text: cellText(row, column)
+							}, () => [createTextVNode(toDisplayString(cellText(row, column)), 1)])]))], 46, _hoisted_7);
+						}), 128))], 46, _hoisted_6);
+					}), 128)),
+					showAddRow.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: "dou-gantt__add-row",
+						style: normalizeStyle({ transform: `translateY(${rows.value.length * __props.rowHeight}px)` }),
+						role: "row"
+					}, [createElementVNode("div", _hoisted_11, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "dou-gantt__toggle-space" }, null, -1)), editing.value && editing.value.id === null ? (openBlock(), createBlock(cell_editor_default, {
+						key: 0,
+						kind: "text",
+						value: "",
+						repeat: "",
+						label: unref(messages).addRow,
+						placeholder: unref(messages).addRow,
+						onDone: onAddDone
+					}, null, 8, ["label", "placeholder"])) : (openBlock(), createElementBlock("button", {
+						key: 1,
+						type: "button",
+						class: "dou-gantt__add",
+						onClick: startAdding
+					}, [createVNode(unref(PlusIcon)), createTextVNode(" " + toDisplayString(unref(messages).addRow), 1)]))])], 4)) : createCommentVNode("", true),
+					dropLine.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: "dou-gantt__drop-line",
+						style: normalizeStyle(dropLine.value)
+					}, null, 4)) : createCommentVNode("", true)
+				], 4)], 544)], 12, _hoisted_4)], 4)) : createCommentVNode("", true),
+				createElementVNode("div", {
+					ref_key: "chart",
+					ref: chart,
+					class: normalizeClass(["dou-gantt__chart", { "is-fixed": __props.range }]),
+					tabindex: "-1",
+					onScrollPassive: _cache[3] || (_cache[3] = (...args) => unref(onChartScroll) && unref(onChartScroll)(...args)),
+					onWheel: _cache[4] || (_cache[4] = (...args) => unref(onWheel) && unref(onWheel)(...args))
+				}, [createElementVNode("div", {
+					class: "dou-gantt__canvas",
+					style: normalizeStyle({ width: `${unref(totalWidth)}px` }),
+					onContextmenu: onCanvasContextmenu
+				}, [createVNode(time_header_default, {
+					"top-cells": unref(topCells),
+					"bottom-cells": unref(bottomCells),
+					"bottom-unit": unref(level).bottom,
+					calendar: calendar.value,
+					now: unref(now),
+					"today-x": unref(todayX)
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(markers.value, (item) => {
+						return openBlock(), createElementBlock("span", {
+							key: item.key,
+							class: normalizeClass(["dou-gantt__marker-label", [item.marker.tone && `is-${item.marker.tone}`, {
+								"is-cut": item.room !== Infinity,
+								"is-crowded": !item.room
+							}]]),
+							title: item.room !== Infinity ? item.marker.label : void 0,
+							style: normalizeStyle({
+								left: `${item.x}px`,
+								maxWidth: item.room && item.room !== Infinity ? `${item.room}px` : void 0
+							})
+						}, [item.marker.label ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(item.marker.label), 1)) : createCommentVNode("", true)], 14, _hoisted_12);
+					}), 128))]),
+					_: 1
+				}, 8, [
+					"top-cells",
+					"bottom-cells",
+					"bottom-unit",
+					"calendar",
+					"now",
+					"today-x"
+				]), createElementVNode("div", {
+					class: "dou-gantt__body",
+					style: normalizeStyle({ height: `${bodyRows.value * __props.rowHeight}px` }),
+					onPointerdown: onBodyDown,
+					onContextmenu: onBodyContextmenu
+				}, [
+					!showTable.value ? (openBlock(), createElementBlock("div", _hoisted_14, [(openBlock(true), createElementBlock(Fragment, null, renderList(rowTitles.value, (item) => {
+						return openBlock(), createElementBlock("span", {
+							key: item.row.task.id,
+							class: normalizeClass(["dou-gantt__row-title", { "is-summary": item.row.summary }]),
+							style: normalizeStyle(rowStyle(item.row))
+						}, toDisplayString(item.row.task.title), 7);
+					}), 128))])) : createCommentVNode("", true),
+					createVNode(time_grid_default, {
+						cells: unref(bottomCells),
+						shaded: unref(shaded)
+					}, null, 8, ["cells", "shaded"]),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(highlightRows.value, (row) => {
+						return openBlock(), createElementBlock("div", {
+							key: row.task.id,
+							class: normalizeClass(["dou-gantt__row-highlight", { "is-selected": selected.value.has(row.task.id) }]),
+							style: normalizeStyle(rowStyle(row))
+						}, null, 6);
+					}), 128)),
+					unref(todayX) != null ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: "dou-gantt__today",
+						style: normalizeStyle({ left: `${unref(todayX)}px` })
+					}, null, 4)) : createCommentVNode("", true),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(markers.value, (item) => {
+						return openBlock(), createElementBlock("div", {
+							key: item.key,
+							class: normalizeClass(["dou-gantt__marker", item.marker.tone && `is-${item.marker.tone}`]),
+							style: normalizeStyle({ left: `${item.x}px` })
+						}, null, 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(resolved.value.below, (layer, i) => {
+						return openBlock(), createBlock(resolveDynamicComponent(layer), { key: `below-${i}` });
+					}), 128)),
+					(openBlock(), createElementBlock("svg", {
+						class: "dou-gantt__links",
+						width: unref(totalWidth),
+						height: rows.value.length * __props.rowHeight
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(linkPaths.value, (item) => {
+						return openBlock(), createElementBlock("g", {
+							key: item.link.id,
+							class: normalizeClass(["dou-gantt__link", {
+								"is-related": selected.value.has(item.link.from) || selected.value.has(item.link.to),
+								"is-selected": selectedLink.value === item.link.id,
+								"is-broken": brokenLinks.value.has(item.link.id),
+								"is-critical": critical.value?.links.has(item.link.id)
+							}]),
+							onClick: ($event) => onLinkClick(item.link, $event),
+							onContextmenu: ($event) => onLinkContextmenu(item.link, $event)
+						}, [
+							createElementVNode("path", {
+								class: "dou-gantt__link-hit",
+								d: item.d
+							}, null, 8, _hoisted_17),
+							createElementVNode("path", {
+								class: "dou-gantt__link-line",
+								d: item.d
+							}, null, 8, _hoisted_18),
+							createElementVNode("path", {
+								class: "dou-gantt__link-arrow",
+								d: item.arrow
+							}, null, 8, _hoisted_19)
+						], 42, _hoisted_16);
+					}), 128)), draftLink.value ? (openBlock(), createElementBlock("path", {
+						key: 0,
+						class: normalizeClass(["dou-gantt__link-draft", { "is-refused": draftLink.value.refused }]),
+						d: draftLink.value.d
+					}, null, 10, _hoisted_20)) : createCommentVNode("", true)], 8, _hoisted_15)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(baselineBars.value, (plan) => {
+						return openBlock(), createElementBlock("div", {
+							key: `plan:${plan.id}`,
+							class: normalizeClass(["dou-gantt__baseline", { "is-milestone": plan.milestone }]),
+							style: normalizeStyle({
+								transform: `translate(${plan.left}px, ${plan.top}px)${plan.milestone ? " rotate(45deg)" : ""}`,
+								width: plan.milestone ? void 0 : `${plan.width}px`
+							})
+						}, null, 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(bars.value, (bar) => {
+						return openBlock(), createElementBlock("div", {
+							key: bar.row.task.id,
+							class: normalizeClass(["dou-gantt__bar-row", {
+								"is-selected": selected.value.has(bar.row.task.id),
+								"is-active": drag.value?.started && drag.value.id === bar.row.task.id
+							}]),
+							style: normalizeStyle({ transform: `translateY(${bar.top}px)` }),
+							onPointerenter: ($event) => hovered.value = bar.row.task.id,
+							onPointerleave: _cache[2] || (_cache[2] = ($event) => hovered.value = null)
+						}, [
+							createElementVNode("div", {
+								class: normalizeClass(["dou-gantt__bar", [bar.row.task.tone && `is-${bar.row.task.tone}`, {
+									"is-summary": bar.row.summary,
+									"is-milestone": bar.row.milestone,
+									"is-selected": selected.value.has(bar.row.task.id),
+									"is-locked": bar.row.task.locked,
+									"is-link-target": linkHighlight.value?.id === bar.row.task.id && !linkHighlight.value.refused,
+									"is-link-refused": linkHighlight.value?.id === bar.row.task.id && linkHighlight.value.refused,
+									"is-move-refused": !!dragRefusal.value && drag.value?.started && drag.value.spans.has(bar.row.task.id),
+									"is-active": active.value === bar.row.task.id,
+									"is-critical": critical.value?.tasks.has(bar.row.task.id)
+								}]]),
+								"data-task": bar.row.task.id,
+								style: normalizeStyle({
+									left: `${bar.left}px`,
+									width: bar.row.milestone ? void 0 : `${bar.width}px`
+								}),
+								role: "img",
+								tabindex: "-1",
+								"aria-label": bar.aria,
+								onPointerdown: ($event) => onBarDown($event, bar.row),
+								onClick: ($event) => onTaskClick(bar.row, $event),
+								onDblclick: ($event) => emit("taskDblclick", bar.row.task, $event),
+								onContextmenu: ($event) => onTaskContextmenu(bar.row, $event)
+							}, [!bar.row.milestone && !bar.row.summary && bar.row.progress > 0 ? (openBlock(), createElementBlock("span", {
+								key: 0,
+								class: "dou-gantt__progress",
+								style: normalizeStyle({ width: `${bar.row.progress * 100}%` })
+							}, null, 4)) : createCommentVNode("", true), bar.label === "inside" ? (openBlock(), createElementBlock("span", _hoisted_23, [renderSlot(_ctx.$slots, "bar", {
+								task: bar.row.task,
+								row: bar.row
+							}, () => [createTextVNode(toDisplayString(bar.row.task.title), 1)])])) : createCommentVNode("", true)], 46, _hoisted_22),
+							editable.value && !bar.row.task.locked ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [!bar.row.milestone && !bar.row.summary ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+								createElementVNode("span", {
+									class: "dou-gantt__handle is-start",
+									"data-handle": "start",
+									style: normalizeStyle({ left: `${bar.left}px` }),
+									onPointerdown: ($event) => onBarDown($event, bar.row)
+								}, null, 44, _hoisted_24),
+								createElementVNode("span", {
+									class: "dou-gantt__handle is-end",
+									"data-handle": "end",
+									style: normalizeStyle({ left: `${bar.left + bar.width}px` }),
+									onPointerdown: ($event) => onBarDown($event, bar.row)
+								}, null, 44, _hoisted_25),
+								createElementVNode("span", {
+									class: "dou-gantt__progress-handle",
+									"data-handle": "progress",
+									style: normalizeStyle({ left: `${bar.left + bar.width * bar.row.progress}px` }),
+									onPointerdown: ($event) => onBarDown($event, bar.row)
+								}, null, 44, _hoisted_26)
+							], 64)) : createCommentVNode("", true)], 64)) : createCommentVNode("", true),
+							editable.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("span", {
+								class: "dou-gantt__dot is-start",
+								"data-handle": "link-start",
+								style: normalizeStyle({ left: `${bar.left - (bar.row.milestone ? 7 : 0)}px` }),
+								onPointerdown: ($event) => onBarDown($event, bar.row)
+							}, null, 44, _hoisted_27), createElementVNode("span", {
+								class: "dou-gantt__dot is-end",
+								"data-handle": "link-end",
+								style: normalizeStyle({ left: `${bar.left + (bar.row.milestone ? 7 : bar.width)}px` }),
+								onPointerdown: ($event) => onBarDown($event, bar.row)
+							}, null, 44, _hoisted_28)], 64)) : createCommentVNode("", true),
+							bar.label === "outside" && !titled.value.has(bar.row.task.id) ? (openBlock(), createElementBlock("span", {
+								key: 2,
+								class: normalizeClass(["dou-gantt__bar-side", { "is-summary": bar.row.summary }]),
+								style: normalizeStyle({ left: `${bar.left + sideOffset(bar)}px` })
+							}, [renderSlot(_ctx.$slots, "bar", {
+								task: bar.row.task,
+								row: bar.row
+							}, () => [createTextVNode(toDisplayString(bar.row.task.title), 1)])], 6)) : createCommentVNode("", true)
+						], 46, _hoisted_21);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(ghosts.value, (ghost) => {
+						return openBlock(), createElementBlock("div", {
+							key: ghost.id,
+							class: normalizeClass(["dou-gantt__ghost", { "is-milestone": ghost.milestone }]),
+							style: normalizeStyle({
+								transform: `translate(${ghost.left}px, ${ghost.top}px)${ghost.milestone ? " rotate(45deg)" : ""}`,
+								width: ghost.milestone ? void 0 : `${ghost.width}px`
+							})
+						}, null, 6);
+					}), 128)),
+					(openBlock(true), createElementBlock(Fragment, null, renderList(resolved.value.above, (layer, i) => {
+						return openBlock(), createBlock(resolveDynamicComponent(layer), { key: `above-${i}` });
+					}), 128)),
+					dragTip.value ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(["dou-gantt__tip", { "is-refused": dragTip.value.refused }]),
+						style: normalizeStyle({ transform: `translate(${dragTip.value.left}px, ${dragTip.value.top}px)` })
+					}, toDisplayString(dragTip.value.text), 7)) : createCommentVNode("", true)
+				], 36)], 36)], 34),
+				showTable.value ? (openBlock(), createElementBlock("div", {
+					key: 2,
+					class: "dou-gantt__divider",
+					role: "separator",
+					"aria-label": unref(messages).resizeTable,
+					tabindex: "0",
+					"aria-orientation": "vertical",
+					"aria-valuenow": Math.round(tableSize.value),
+					"aria-valuemin": TABLE_MIN,
+					"aria-valuemax": tableMax.value,
+					onPointerdown: onDividerDown,
+					onKeydown: onDividerKey
+				}, null, 40, _hoisted_29)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(resolved.value.overlays, (overlay, i) => {
+					return openBlock(), createBlock(resolveDynamicComponent(overlay), { key: `overlay-${i}` });
+				}), 128)),
+				createVNode(gantt_menu_default, {
+					ref_key: "menu",
+					ref: menu,
+					open: menuOpen.value,
+					"onUpdate:open": _cache[5] || (_cache[5] = ($event) => menuOpen.value = $event),
+					items: menuItems.value
+				}, null, 8, ["open", "items"]),
+				renderSlot(_ctx.$slots, "default")
+			], 46, _hoisted_1);
+		};
+	}
+});
+export { gantt_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=gantt.vue_vue_type_script_setup_true_lang.js.map