@burdenoff/microfe-planmagnet 2026.927.5 → 2026.928.1

package/dist/planmagnet/board/ProjectBoard.js

@@ -1,14 +1,15 @@
 import { usePlanMagnet as e, usePlanMagnetNavigate as t } from "../providers/PlanMagnetProvider.js";
 import { PersonName as n } from "../people/People.js";
 import { throwOnError as r } from "../utils/mutationResult.js";
-import { useState as i } from "react";
-import { ChevronLeft as a, ChevronRight as o, LayoutGrid as s, Pencil as c, Plus as l } from "lucide-react";
-import { gql as u } from "@apollo/client";
-import { useMutation as d, useQuery as f } from "@apollo/client/react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { AlertDialog as h, AlertDialogAction as g, AlertDialogCancel as _, AlertDialogContent as v, AlertDialogDescription as y, AlertDialogFooter as b, AlertDialogHeader as x, AlertDialogTitle as S, AlertDialogTrigger as C, Button as w, Card as T, CardContent as E, Input as D, ResponsiveDialog as O, ResponsiveDialogContent as k, ResponsiveDialogDescription as A, ResponsiveDialogFooter as j, ResponsiveDialogHeader as M, ResponsiveDialogTitle as N, ResponsiveDialogTrigger as ee } from "@burdenoff/fe-libs/ui";
+import { allowedTargets as i, useProjectWorkflow as a, workflowLabel as o } from "../hooks/useProjectWorkflow.js";
+import { createContext as s, useContext as c, useState as l } from "react";
+import { ChevronLeft as u, ChevronRight as d, LayoutGrid as f, Pencil as p, Plus as m } from "lucide-react";
+import { gql as h } from "@apollo/client";
+import { useApolloClient as g, useMutation as _, useQuery as v } from "@apollo/client/react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { AlertDialog as x, AlertDialogAction as S, AlertDialogCancel as ee, AlertDialogContent as C, AlertDialogDescription as w, AlertDialogFooter as te, AlertDialogHeader as T, AlertDialogTitle as E, AlertDialogTrigger as D, Button as O, Card as k, CardContent as ne, Input as A, ResponsiveDialog as re, ResponsiveDialogContent as ie, ResponsiveDialogDescription as j, ResponsiveDialogFooter as M, ResponsiveDialogHeader as N, ResponsiveDialogTitle as P, ResponsiveDialogTrigger as F } from "@burdenoff/fe-libs/ui";
 //#region src/planmagnet/board/ProjectBoard.tsx
-var te = [
+var I = [
 	"BACKLOG",
 	"TODO",
 	"IN_PROGRESS",
@@ -16,7 +17,10 @@ var te = [
 	"TESTING",
 	"DONE",
 	"CANCELLED"
-], P = (e) => e.charAt(0) + e.slice(1).toLowerCase().replace(/_/g, " "), F = 100, I = u`
+], L = s(null), R = () => {
+	let e = c(L);
+	return (t) => o(e, t);
+}, z = (e) => e.charAt(0) + e.slice(1).toLowerCase().replace(/_/g, " "), B = 100, V = h`
   query ProjectBoards($workspaceId: ID!, $projectId: String) {
     planmagnetBoards(
       workspaceId: $workspaceId
@@ -30,7 +34,30 @@ var te = [
       }
     }
   }
-`, L = u`
+`, H = h`
+  query ProjectBoardColumnPage($boardId: ID!, $columnId: ID!, $after: String) {
+    planmagnetBoardColumnCards(
+      boardId: $boardId
+      columnId: $columnId
+      pagination: { first: 100, after: $after }
+    ) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      items {
+        id
+        key
+        title
+        status
+        priority
+        storyPoints
+        assigneeId
+        statusSince
+      }
+    }
+  }
+`, U = h`
   query ProjectBoard($id: ID!) {
     planmagnetBoard(id: $id) {
       id
@@ -44,6 +71,10 @@ var te = [
         sortOrder
         cards(pagination: { first: 100 }) {
           totalCount
+          pageInfo {
+            hasNextPage
+            endCursor
+          }
           items {
             id
             key
@@ -52,434 +83,677 @@ var te = [
             priority
             storyPoints
             assigneeId
+            statusSince
           }
         }
       }
     }
   }
-`, R = u`
+`, W = h`
   mutation ProjectBoardMoveCard($boardId: ID!, $input: PlanmagnetMoveCardInput!) {
     planmagnetMoveCard(boardId: $boardId, input: $input) {
       id
     }
   }
-`, z = u`
+`, G = h`
   mutation ProjectBoardCreate($input: PlanmagnetCreateBoardInput!) {
     planmagnetCreateBoard(input: $input) {
       id
     }
   }
-`, B = u`
+`, K = h`
   mutation ProjectBoardCreateColumn($input: PlanmagnetCreateBoardColumnInput!) {
     planmagnetCreateBoardColumn(input: $input) {
       id
     }
   }
-`, V = u`
+`, q = h`
   mutation ProjectBoardUpdateColumn($id: ID!, $input: PlanmagnetUpdateBoardColumnInput!) {
     planmagnetUpdateBoardColumn(id: $id, input: $input) {
       id
     }
   }
-`, H = u`
+`, ae = h`
   mutation ProjectBoardDeleteColumn($id: ID!) {
     planmagnetDeleteBoardColumn(id: $id)
   }
-`, U = u`
+`, oe = h`
   mutation ProjectBoardReorder($boardId: ID!, $input: PlanmagnetReorderColumnsInput!) {
     planmagnetReorderColumns(boardId: $boardId, input: $input) {
       id
     }
   }
-`, W = [
+`, J = [
 	"ProjectBoard",
 	"ProjectBoards",
 	"GetWorkItems",
 	"GetWorkItemCounts",
 	"GetDashboardData"
-], G = (e, t) => e instanceof Error ? e.message : t;
-function K({ message: e }) {
-	return /* @__PURE__ */ p("p", {
+], Y = [
+	"CRITICAL",
+	"HIGH",
+	"MEDIUM",
+	"LOW",
+	"NONE"
+], se = 864e5;
+function X(e, t) {
+	return e ? Math.max(0, Math.floor((t - new Date(e).getTime()) / se)) : null;
+}
+function ce(e) {
+	return e >= 14 ? "text-destructive font-medium" : e >= 7 ? "text-status-warning-text" : "text-muted-foreground";
+}
+function Z(e, t) {
+	return t === "assignee" ? e.assigneeId ?? "" : t === "priority" ? e.priority || "NONE" : "";
+}
+var Q = (e, t) => e instanceof Error ? e.message : t;
+function $({ message: e }) {
+	return /* @__PURE__ */ y("p", {
 		role: "alert",
 		className: "text-sm text-destructive",
 		children: e
 	});
 }
-function q({ projectId: t, projectName: n }) {
-	let { workspaceId: a } = e(), [o, c] = i(null), [u, h] = i(null), { data: g, loading: _ } = f(I, {
+function le({ projectId: t, projectName: n }) {
+	let { workspaceId: i } = e(), o = g(), [s, c] = l(null), [u, d] = l(null), [p] = l(() => Date.now()), [h, x] = l("none"), [S, ee] = l({
+		key: null,
+		byColumn: {}
+	}), [C, w] = l(null), te = a(t), { data: T, loading: E } = v(V, {
 		variables: {
-			workspaceId: a,
+			workspaceId: i,
 			projectId: t
 		},
-		skip: !a
-	}), v = g?.planmagnetBoards.items ?? [], y = (o && v.some((e) => e.id === o) ? o : null) ?? v.find((e) => e.isDefault)?.id ?? v[0]?.id ?? null, { data: b, loading: x } = f(L, {
-		variables: { id: y },
-		skip: !y
-	}), S = b?.planmagnetBoard ?? null, [C, D] = d(z, {
-		refetchQueries: W,
+		skip: !i
+	}), D = T?.planmagnetBoards.items ?? [], A = (s && D.some((e) => e.id === s) ? s : null) ?? D.find((e) => e.isDefault)?.id ?? D[0]?.id ?? null, { data: re, loading: ie } = v(U, {
+		variables: { id: A },
+		skip: !A
+	}), j = re?.planmagnetBoard ?? null, M = S.key === j ? S.byColumn : {}, N = (e) => {
+		let t = M[e.id];
+		return {
+			items: t ? [...e.cards.items, ...t.items] : e.cards.items,
+			pageInfo: t ? t.pageInfo : e.cards.pageInfo,
+			totalCount: e.cards.totalCount
+		};
+	}, P = async (e) => {
+		let t = N(e).pageInfo.endCursor;
+		if (!(!j || !t)) {
+			d(null), w(e.id);
+			try {
+				let n = await o.query({
+					query: H,
+					variables: {
+						boardId: j.id,
+						columnId: e.id,
+						after: t
+					},
+					fetchPolicy: "network-only"
+				}), r = n.data?.planmagnetBoardColumnCards;
+				if (!r) throw Error(n.error?.message ?? "The next cards could not be loaded.");
+				let i = M[e.id]?.items ?? [];
+				ee({
+					key: j,
+					byColumn: {
+						...M,
+						[e.id]: {
+							items: [...i, ...r.items],
+							pageInfo: r.pageInfo
+						}
+					}
+				});
+			} catch (e) {
+				d(Q(e, "The next cards could not be loaded."));
+			} finally {
+				w(null);
+			}
+		}
+	}, [F, I] = _(G, {
+		refetchQueries: J,
 		awaitRefetchQueries: !0
-	}), [O, k] = d(R, {
-		refetchQueries: W,
+	}), [R, z] = _(W, {
+		refetchQueries: J,
 		awaitRefetchQueries: !0
-	}), [A] = d(U, {
-		refetchQueries: W,
+	}), [B] = _(oe, {
+		refetchQueries: J,
 		awaitRefetchQueries: !0
-	}), j = async (e, t) => {
-		h(null);
+	}), K = async (e, t) => {
+		d(null);
 		try {
 			await r(e());
 		} catch (e) {
-			h(G(e, t));
+			d(Q(e, t));
 		}
-	}, M = (e, t) => j(() => O({ variables: {
-		boardId: y,
+	}, q = (e, t) => K(() => R({ variables: {
+		boardId: A,
 		input: {
 			workItemId: e,
 			targetColumnId: t
 		}
-	} }), "The card could not be moved."), N = (e, t) => {
-		if (!S) return;
-		let n = S.columns.map((e) => e.id), r = e + t;
-		if (!(r < 0 || r >= n.length)) return [n[e], n[r]] = [n[r], n[e]], j(() => A({ variables: {
-			boardId: y,
+	} }), "The card could not be moved."), ae = (e, t) => {
+		if (!j) return;
+		let n = j.columns.map((e) => e.id), r = e + t;
+		if (!(r < 0 || r >= n.length)) return [n[e], n[r]] = [n[r], n[e]], K(() => B({ variables: {
+			boardId: A,
 			input: { columnIds: n }
 		} }), "The columns could not be reordered.");
 	};
-	return _ && !g ? /* @__PURE__ */ p("p", {
+	return E && !T ? /* @__PURE__ */ y("p", {
 		className: "text-sm text-muted-foreground p-4",
 		children: "Loading board…"
-	}) : y ? /* @__PURE__ */ m("div", {
-		className: "space-y-3",
-		"data-testid": "project-board",
-		children: [
-			/* @__PURE__ */ m("div", {
-				className: "flex flex-wrap items-center gap-3",
-				children: [
-					v.length > 1 && /* @__PURE__ */ p("select", {
-						"aria-label": "Board",
-						className: "rounded-md border border-input bg-background px-2 py-1 text-sm",
-						value: y,
-						onChange: (e) => c(e.target.value),
-						children: v.map((e) => /* @__PURE__ */ p("option", {
-							value: e.id,
-							children: e.name
-						}, e.id))
-					}),
-					S && S.unplacedCount > 0 && /* @__PURE__ */ m("p", {
-						className: "text-xs text-muted-foreground",
-						"data-testid": "board-unplaced",
-						children: [
-							S.unplacedCount,
-							" work item",
-							S.unplacedCount === 1 ? " is" : "s are",
-							" not on this board: ",
-							S.unplacedCount === 1 ? "its status has" : "their status has",
-							" no column."
-						]
-					}),
-					S && /* @__PURE__ */ p("div", {
-						className: "ml-auto",
-						children: /* @__PURE__ */ p(Y, { boardId: S.id })
-					})
-				]
-			}),
-			u && /* @__PURE__ */ p(K, { message: u }),
-			x && !S ? /* @__PURE__ */ p("p", {
-				className: "text-sm text-muted-foreground p-4",
-				children: "Loading board…"
-			}) : /* @__PURE__ */ m("div", {
-				className: "flex gap-3 overflow-x-auto pb-2",
-				children: [S?.columns.map((e, t) => /* @__PURE__ */ p(J, {
-					boardId: S.id,
-					column: e,
-					columns: S.columns,
-					isFirst: t === 0,
-					isLast: t === S.columns.length - 1,
-					busy: k.loading,
-					onMove: M,
-					onShift: (e) => N(t, e)
-				}, e.id)), S && S.columns.length === 0 && /* @__PURE__ */ p("p", {
+	}) : A ? /* @__PURE__ */ y(L.Provider, {
+		value: te,
+		children: /* @__PURE__ */ b("div", {
+			className: "space-y-3",
+			"data-testid": "project-board",
+			children: [
+				/* @__PURE__ */ b("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [
+						D.length > 1 && /* @__PURE__ */ y("select", {
+							"aria-label": "Board",
+							className: "rounded-md border border-input bg-background px-2 py-1 text-sm",
+							value: A,
+							onChange: (e) => c(e.target.value),
+							children: D.map((e) => /* @__PURE__ */ y("option", {
+								value: e.id,
+								children: e.name
+							}, e.id))
+						}),
+						j && /* @__PURE__ */ b("label", {
+							className: "flex items-center gap-1 text-sm",
+							children: [/* @__PURE__ */ y("span", {
+								className: "text-muted-foreground",
+								children: "Swimlanes"
+							}), /* @__PURE__ */ b("select", {
+								"aria-label": "Swimlanes",
+								"data-testid": "board-lanes",
+								className: "rounded-md border border-input bg-background px-2 py-1 text-sm",
+								value: h,
+								onChange: (e) => x(e.target.value),
+								children: [
+									/* @__PURE__ */ y("option", {
+										value: "none",
+										children: "None"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "assignee",
+										children: "By assignee"
+									}),
+									/* @__PURE__ */ y("option", {
+										value: "priority",
+										children: "By priority"
+									})
+								]
+							})]
+						}),
+						j && j.unplacedCount > 0 && /* @__PURE__ */ b("p", {
+							className: "text-xs text-muted-foreground",
+							"data-testid": "board-unplaced",
+							children: [
+								j.unplacedCount,
+								" work item",
+								j.unplacedCount === 1 ? " is" : "s are",
+								" not on this board: ",
+								j.unplacedCount === 1 ? "its status has" : "their status has",
+								" no column."
+							]
+						}),
+						j && /* @__PURE__ */ y("div", {
+							className: "ml-auto",
+							children: /* @__PURE__ */ y(he, { boardId: j.id })
+						})
+					]
+				}),
+				u && /* @__PURE__ */ y($, { message: u }),
+				ie && !j ? /* @__PURE__ */ y("p", {
 					className: "text-sm text-muted-foreground p-4",
-					children: "This board has no columns. Add one to start placing work."
-				})]
-			})
-		]
-	}) : /* @__PURE__ */ p(T, { children: /* @__PURE__ */ m(E, {
+					children: "Loading board…"
+				}) : j && h !== "none" ? /* @__PURE__ */ y(pe, {
+					board: j,
+					laneBy: h,
+					cardsOf: N,
+					now: p,
+					busy: z.loading,
+					loadingMore: C,
+					onLoadMore: (e) => void P(e),
+					onMove: q
+				}) : /* @__PURE__ */ b("div", {
+					className: "flex gap-3 overflow-x-auto pb-2",
+					children: [j?.columns.map((e, t) => /* @__PURE__ */ y(me, {
+						boardId: j.id,
+						column: e,
+						columns: j.columns,
+						cards: N(e),
+						isFirst: t === 0,
+						isLast: t === j.columns.length - 1,
+						busy: z.loading,
+						now: p,
+						loadingMore: C === e.id,
+						onLoadMore: () => void P(e),
+						onMove: q,
+						onShift: (e) => ae(t, e)
+					}, e.id)), j && j.columns.length === 0 && /* @__PURE__ */ y("p", {
+						className: "text-sm text-muted-foreground p-4",
+						children: "This board has no columns. Add one to start placing work."
+					})]
+				})
+			]
+		})
+	}) : /* @__PURE__ */ y(k, { children: /* @__PURE__ */ b(ne, {
 		className: "p-8 text-center space-y-3",
 		"data-testid": "board-empty",
 		children: [
-			/* @__PURE__ */ p(s, { className: "h-8 w-8 mx-auto text-muted-foreground" }),
-			/* @__PURE__ */ m("p", {
+			/* @__PURE__ */ y(f, { className: "h-8 w-8 mx-auto text-muted-foreground" }),
+			/* @__PURE__ */ b("p", {
 				className: "text-sm text-muted-foreground",
 				children: [n, " has no board yet."]
 			}),
-			/* @__PURE__ */ m(w, {
+			/* @__PURE__ */ b(O, {
 				size: "sm",
-				disabled: D.loading,
-				onClick: () => j(() => C({ variables: { input: {
+				disabled: I.loading,
+				onClick: () => K(() => F({ variables: { input: {
 					projectId: t,
 					name: `${n} board`,
 					type: "KANBAN",
 					isDefault: !0,
 					withDefaultColumns: !0
 				} } }), "The board could not be created."),
-				children: [/* @__PURE__ */ p(l, { className: "mr-1 h-4 w-4" }), D.loading ? "Creating…" : "Create board"]
+				children: [/* @__PURE__ */ y(m, { className: "mr-1 h-4 w-4" }), I.loading ? "Creating…" : "Create board"]
 			}),
-			/* @__PURE__ */ p("p", {
+			/* @__PURE__ */ y("p", {
 				className: "text-xs text-muted-foreground",
 				children: "Starts with one column per status: Backlog, To Do, In Progress, In Review, Testing, Done."
 			}),
-			u && /* @__PURE__ */ p(K, { message: u })
+			u && /* @__PURE__ */ y($, { message: u })
 		]
 	}) });
 }
-function J({ boardId: e, column: r, columns: s, isFirst: c, isLast: l, busy: u, onMove: d, onShift: f }) {
-	let h = t(), [g, _] = i(!1), v = r.cards.totalCount, y = r.wipLimit != null && r.wipLimit > 0 && v >= r.wipLimit, b = v - r.cards.items.length;
-	return /* @__PURE__ */ m("section", {
-		"aria-label": `${r.name} column`,
-		"data-testid": `board-column-${r.name}`,
-		className: `min-w-[240px] w-[240px] shrink-0 rounded-md border bg-muted/30 ${g ? "ring-2 ring-primary" : ""}`,
+function ue({ card: e, column: r, columns: a, busy: s, now: l, onMove: u }) {
+	let d = t(), f = c(L), p = X(e.statusSince, l), m = i(f, e.status, I), h = a.filter((e) => e.id !== r.id && (!e.mappedStatus || m.includes(e.mappedStatus)));
+	return /* @__PURE__ */ b("li", {
+		draggable: !0,
+		onDragStart: (t) => {
+			t.dataTransfer.setData("text/plain", e.id), t.dataTransfer.effectAllowed = "move";
+		},
+		className: "rounded-md border bg-background p-2 space-y-1 cursor-grab",
+		"data-testid": "board-card",
+		children: [
+			/* @__PURE__ */ y("button", {
+				type: "button",
+				className: "text-left text-sm font-medium leading-tight hover:underline",
+				onClick: () => d(`/tasks/task-detail-page?taskId=${encodeURIComponent(e.id)}`),
+				children: e.title
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "flex items-center justify-between text-[11px] text-muted-foreground",
+				children: [
+					/* @__PURE__ */ y("span", { children: e.key }),
+					p !== null && /* @__PURE__ */ y("span", {
+						"data-testid": "card-age",
+						className: ce(p),
+						title: `In ${o(f, e.status)} since ${new Date(e.statusSince ?? "").toLocaleDateString()}`,
+						children: p === 0 ? "today" : `${p}d in status`
+					}),
+					/* @__PURE__ */ b("span", { children: [e.storyPoints ?? 0, " pts"] })
+				]
+			}),
+			/* @__PURE__ */ b("div", {
+				className: "flex items-center justify-between gap-1 text-[11px] text-muted-foreground",
+				children: [/* @__PURE__ */ y("span", {
+					className: "truncate",
+					children: e.assigneeId ? /* @__PURE__ */ y(n, { id: e.assigneeId }) : "Unassigned"
+				}), /* @__PURE__ */ b("select", {
+					"aria-label": `Move ${e.key} to column`,
+					className: "rounded border border-input bg-background px-1 py-0.5 text-[11px]",
+					value: "",
+					disabled: s,
+					onChange: (t) => t.target.value && u(e.id, t.target.value),
+					children: [/* @__PURE__ */ y("option", {
+						value: "",
+						children: "Move…"
+					}), h.map((e) => /* @__PURE__ */ y("option", {
+						value: e.id,
+						children: e.name
+					}, e.id))]
+				})]
+			})
+		]
+	});
+}
+function de({ column: e, onMove: t, className: n, children: r, label: i }) {
+	let [a, o] = l(!1);
+	return /* @__PURE__ */ y("section", {
+		"aria-label": i,
+		className: `${n} ${a ? "ring-2 ring-primary" : ""}`,
 		onDragOver: (e) => {
-			e.preventDefault(), _(!0);
+			e.preventDefault(), o(!0);
 		},
-		onDragLeave: () => _(!1),
-		onDrop: (e) => {
-			e.preventDefault(), _(!1);
-			let t = e.dataTransfer.getData("text/plain");
-			t && d(t, r.id);
+		onDragLeave: () => o(!1),
+		onDrop: (n) => {
+			n.preventDefault(), o(!1);
+			let r = n.dataTransfer.getData("text/plain");
+			r && t(r, e.id);
 		},
+		children: r
+	});
+}
+function fe({ cards: e, loading: t, onLoadMore: n }) {
+	let r = e.totalCount - e.items.length;
+	return r <= 0 || !e.pageInfo.hasNextPage ? null : /* @__PURE__ */ b("div", {
+		className: "px-2 pb-2 space-y-1",
+		children: [/* @__PURE__ */ b("p", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"Showing ",
+				e.items.length,
+				" of ",
+				e.totalCount
+			]
+		}), /* @__PURE__ */ y(O, {
+			size: "sm",
+			variant: "outline",
+			className: "w-full",
+			"data-testid": "board-column-more",
+			disabled: t,
+			onClick: n,
+			children: t ? "Loading…" : `Show ${Math.min(r, B)} more`
+		})]
+	});
+}
+function pe({ board: e, laneBy: t, cardsOf: r, now: i, busy: a, loadingMore: o, onLoadMore: s, onMove: c }) {
+	let l = e.columns.map((e) => ({
+		column: e,
+		cards: r(e)
+	})), u = [...new Set(l.flatMap(({ cards: e }) => e.items.map((e) => Z(e, t))))].sort((e, n) => t === "priority" ? Y.indexOf(e) - Y.indexOf(n) : e === "" ? 1 : n === "" ? -1 : e.localeCompare(n)), d = (e) => t === "priority" ? z(e) : e ? /* @__PURE__ */ y(n, { id: e }) : "Unassigned";
+	return /* @__PURE__ */ b("div", {
+		className: "overflow-x-auto pb-2 space-y-3",
+		"data-testid": "board-swimlanes",
 		children: [
-			/* @__PURE__ */ m("header", {
-				className: "p-2 border-b space-y-1",
-				children: [/* @__PURE__ */ m("div", {
-					className: "flex items-center justify-between gap-1",
-					children: [/* @__PURE__ */ p("h3", {
+			/* @__PURE__ */ b("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Dragging moves a card between columns. Its lane follows its",
+					" ",
+					t === "priority" ? "priority" : "assignee",
+					"."
+				]
+			}),
+			/* @__PURE__ */ y("div", {
+				className: "flex gap-3",
+				children: l.map(({ column: e, cards: t }) => /* @__PURE__ */ y("div", {
+					className: "min-w-[240px] w-[240px] shrink-0 px-2",
+					children: /* @__PURE__ */ b("h3", {
 						className: "text-sm font-medium truncate",
-						children: r.name
-					}), /* @__PURE__ */ p("span", {
-						"data-testid": `board-column-count-${r.name}`,
-						className: `text-xs rounded-full px-1.5 ${y ? "bg-status-warning-subtle text-status-warning" : "bg-muted"}`,
-						title: r.wipLimit ? `WIP limit ${r.wipLimit}` : void 0,
-						children: r.wipLimit ? `${v} / ${r.wipLimit}` : v
-					})]
-				}), /* @__PURE__ */ m("div", {
-					className: "flex items-center justify-between gap-1",
-					children: [/* @__PURE__ */ p("span", {
-						className: "text-[11px] text-muted-foreground",
-						children: r.mappedStatus ? `Sets status: ${P(r.mappedStatus)}` : "No status"
-					}), /* @__PURE__ */ m("span", {
-						className: "flex",
 						children: [
-							/* @__PURE__ */ p(w, {
-								size: "icon",
-								variant: "ghost",
-								className: "h-6 w-6",
-								"aria-label": `Move ${r.name} column left`,
-								disabled: c,
-								onClick: () => f(-1),
-								children: /* @__PURE__ */ p(a, { className: "h-3.5 w-3.5" })
-							}),
-							/* @__PURE__ */ p(w, {
-								size: "icon",
-								variant: "ghost",
-								className: "h-6 w-6",
-								"aria-label": `Move ${r.name} column right`,
-								disabled: l,
-								onClick: () => f(1),
-								children: /* @__PURE__ */ p(o, { className: "h-3.5 w-3.5" })
-							}),
-							/* @__PURE__ */ p(Y, {
-								boardId: e,
-								column: r
+							e.name,
+							" ",
+							/* @__PURE__ */ y("span", {
+								className: "text-xs text-muted-foreground",
+								children: e.wipLimit ? `${t.totalCount} / ${e.wipLimit}` : t.totalCount
 							})
 						]
-					})]
-				})]
+					})
+				}, e.id))
 			}),
-			/* @__PURE__ */ m("ul", {
-				className: "p-2 space-y-2 min-h-[80px]",
-				children: [r.cards.items.map((e) => /* @__PURE__ */ m("li", {
-					draggable: !0,
-					onDragStart: (t) => {
-						t.dataTransfer.setData("text/plain", e.id), t.dataTransfer.effectAllowed = "move";
-					},
-					className: "rounded-md border bg-background p-2 space-y-1 cursor-grab",
-					"data-testid": "board-card",
+			u.length === 0 && /* @__PURE__ */ y("p", {
+				className: "text-sm text-muted-foreground p-4",
+				children: "No cards on this board yet."
+			}),
+			u.map((n) => /* @__PURE__ */ b("div", {
+				"data-testid": "board-lane",
+				className: "space-y-1",
+				children: [/* @__PURE__ */ b("p", {
+					className: "text-xs font-medium",
 					children: [
-						/* @__PURE__ */ p("button", {
-							type: "button",
-							className: "text-left text-sm font-medium leading-tight hover:underline",
-							onClick: () => h(`/tasks/task-detail-page?taskId=${encodeURIComponent(e.id)}`),
-							children: e.title
-						}),
-						/* @__PURE__ */ m("div", {
-							className: "flex items-center justify-between text-[11px] text-muted-foreground",
-							children: [/* @__PURE__ */ p("span", { children: e.key }), /* @__PURE__ */ m("span", { children: [e.storyPoints ?? 0, " pts"] })]
-						}),
-						/* @__PURE__ */ m("div", {
-							className: "flex items-center justify-between gap-1 text-[11px] text-muted-foreground",
-							children: [/* @__PURE__ */ p("span", {
-								className: "truncate",
-								children: e.assigneeId ? /* @__PURE__ */ p(n, { id: e.assigneeId }) : "Unassigned"
-							}), /* @__PURE__ */ m("select", {
-								"aria-label": `Move ${e.key} to column`,
-								className: "rounded border border-input bg-background px-1 py-0.5 text-[11px]",
-								value: "",
-								disabled: u,
-								onChange: (t) => t.target.value && d(e.id, t.target.value),
-								children: [/* @__PURE__ */ p("option", {
-									value: "",
-									children: "Move…"
-								}), s.filter((e) => e.id !== r.id).map((e) => /* @__PURE__ */ p("option", {
-									value: e.id,
-									children: e.name
-								}, e.id))]
-							})]
+						d(n),
+						" ",
+						/* @__PURE__ */ b("span", {
+							className: "text-muted-foreground",
+							children: [
+								"(",
+								l.reduce((e, { cards: r }) => e + r.items.filter((e) => Z(e, t) === n).length, 0),
+								")"
+							]
 						})
 					]
-				}, e.id)), v === 0 && /* @__PURE__ */ p("li", {
-					className: "text-xs text-muted-foreground text-center py-4",
-					children: "Empty"
+				}), /* @__PURE__ */ y("div", {
+					className: "flex gap-3",
+					children: l.map(({ column: r, cards: o }) => /* @__PURE__ */ y(de, {
+						column: r,
+						onMove: c,
+						label: `${r.name} column`,
+						className: "min-w-[240px] w-[240px] shrink-0 rounded-md border bg-muted/30",
+						children: /* @__PURE__ */ y("ul", {
+							className: "p-2 space-y-2 min-h-[48px]",
+							children: o.items.filter((e) => Z(e, t) === n).map((t) => /* @__PURE__ */ y(ue, {
+								card: t,
+								column: r,
+								columns: e.columns,
+								busy: a,
+								now: i,
+								onMove: c
+							}, t.id))
+						})
+					}, r.id))
 				})]
-			}),
-			b > 0 && /* @__PURE__ */ m("p", {
-				className: "px-2 pb-2 text-xs text-muted-foreground",
-				children: [
-					"+",
-					b,
-					" more (showing the first ",
-					F,
-					")"
-				]
+			}, n || "none")),
+			/* @__PURE__ */ y("div", {
+				className: "flex gap-3",
+				children: l.map(({ column: e, cards: t }) => /* @__PURE__ */ y("div", {
+					className: "min-w-[240px] w-[240px] shrink-0",
+					children: /* @__PURE__ */ y(fe, {
+						cards: t,
+						loading: o === e.id,
+						onLoadMore: () => s(e)
+					})
+				}, e.id))
 			})
 		]
 	});
 }
-function Y({ boardId: e, column: t }) {
-	let n = t !== void 0, [a, o] = i(!1), [s, u] = i(t?.name ?? ""), [f, T] = i(t?.mappedStatus ?? ""), [E, F] = i(t?.wipLimit ? String(t.wipLimit) : ""), [I, L] = i(null), R = {
-		refetchQueries: W,
+function me({ boardId: e, column: t, columns: n, cards: r, isFirst: i, isLast: a, busy: o, now: s, loadingMore: c, onLoadMore: l, onMove: f, onShift: p }) {
+	let m = r.totalCount, h = t.wipLimit != null && t.wipLimit > 0 && m >= t.wipLimit, g = R();
+	return /* @__PURE__ */ y(de, {
+		column: t,
+		onMove: f,
+		label: `${t.name} column`,
+		className: "min-w-[240px] w-[240px] shrink-0 rounded-md border bg-muted/30",
+		children: /* @__PURE__ */ b("div", {
+			"data-testid": `board-column-${t.name}`,
+			children: [
+				/* @__PURE__ */ b("header", {
+					className: "p-2 border-b space-y-1",
+					children: [/* @__PURE__ */ b("div", {
+						className: "flex items-center justify-between gap-1",
+						children: [/* @__PURE__ */ y("h3", {
+							className: "text-sm font-medium truncate",
+							children: t.name
+						}), /* @__PURE__ */ y("span", {
+							"data-testid": `board-column-count-${t.name}`,
+							className: `text-xs rounded-full px-1.5 ${h ? "bg-status-warning-subtle text-status-warning" : "bg-muted"}`,
+							title: t.wipLimit ? `WIP limit ${t.wipLimit}` : void 0,
+							children: t.wipLimit ? `${m} / ${t.wipLimit}` : m
+						})]
+					}), /* @__PURE__ */ b("div", {
+						className: "flex items-center justify-between gap-1",
+						children: [/* @__PURE__ */ y("span", {
+							className: "text-[11px] text-muted-foreground",
+							children: t.mappedStatus ? `Sets status: ${g(t.mappedStatus)}` : "No status"
+						}), /* @__PURE__ */ b("span", {
+							className: "flex",
+							children: [
+								/* @__PURE__ */ y(O, {
+									size: "icon",
+									variant: "ghost",
+									className: "h-6 w-6",
+									"aria-label": `Move ${t.name} column left`,
+									disabled: i,
+									onClick: () => p(-1),
+									children: /* @__PURE__ */ y(u, { className: "h-3.5 w-3.5" })
+								}),
+								/* @__PURE__ */ y(O, {
+									size: "icon",
+									variant: "ghost",
+									className: "h-6 w-6",
+									"aria-label": `Move ${t.name} column right`,
+									disabled: a,
+									onClick: () => p(1),
+									children: /* @__PURE__ */ y(d, { className: "h-3.5 w-3.5" })
+								}),
+								/* @__PURE__ */ y(he, {
+									boardId: e,
+									column: t
+								})
+							]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ b("ul", {
+					className: "p-2 space-y-2 min-h-[80px]",
+					children: [r.items.map((e) => /* @__PURE__ */ y(ue, {
+						card: e,
+						column: t,
+						columns: n,
+						busy: o,
+						now: s,
+						onMove: f
+					}, e.id)), m === 0 && /* @__PURE__ */ y("li", {
+						className: "text-xs text-muted-foreground text-center py-4",
+						children: "Empty"
+					})]
+				}),
+				/* @__PURE__ */ y(fe, {
+					cards: r,
+					loading: c,
+					onLoadMore: l
+				})
+			]
+		})
+	});
+}
+function he({ boardId: e, column: t }) {
+	let n = t !== void 0, i = R(), [a, o] = l(!1), [s, c] = l(t?.name ?? ""), [u, d] = l(t?.mappedStatus ?? ""), [f, h] = l(t?.wipLimit ? String(t.wipLimit) : ""), [g, v] = l(null), k = {
+		refetchQueries: J,
 		awaitRefetchQueries: !0
-	}, [z, U] = d(B, R), [q, J] = d(V, R), [Y, ne] = d(H, R), X = U.loading || J.loading || ne.loading, Z = E.trim() === "" ? null : Number(E), Q = Z !== null && (!Number.isInteger(Z) || Z < 1), re = s.trim() !== "" && !Q && !X, ie = () => {
-		u(t?.name ?? ""), T(t?.mappedStatus ?? ""), F(t?.wipLimit ? String(t.wipLimit) : ""), L(null);
-	}, ae = async () => {
-		L(null);
+	}, [ne, L] = _(K, k), [z, B] = _(q, k), [V, H] = _(ae, k), U = L.loading || B.loading || H.loading, W = f.trim() === "" ? null : Number(f), G = W !== null && (!Number.isInteger(W) || W < 1), oe = s.trim() !== "" && !G && !U, Y = () => {
+		c(t?.name ?? ""), d(t?.mappedStatus ?? ""), h(t?.wipLimit ? String(t.wipLimit) : ""), v(null);
+	}, se = async () => {
+		v(null);
 		let i = {
 			name: s.trim(),
-			mappedStatus: f || null,
-			wipLimit: Z
+			mappedStatus: u || null,
+			wipLimit: W
 		};
 		try {
-			n ? await r(q({ variables: {
+			n ? await r(z({ variables: {
 				id: t.id,
 				input: i
-			} })) : await r(z({ variables: { input: {
+			} })) : await r(ne({ variables: { input: {
 				boardId: e,
 				type: "CUSTOM",
 				...i
 			} } })), o(!1);
 		} catch (e) {
-			L(G(e, "The column could not be saved."));
+			v(Q(e, "The column could not be saved."));
 		}
-	}, $ = n ? `column-${t.id}` : "new-column";
-	return /* @__PURE__ */ m(O, {
+	}, X = n ? `column-${t.id}` : "new-column";
+	return /* @__PURE__ */ b(re, {
 		open: a,
 		onOpenChange: (e) => {
-			o(e), e && ie();
+			o(e), e && Y();
 		},
-		children: [/* @__PURE__ */ p(ee, {
+		children: [/* @__PURE__ */ y(F, {
 			asChild: !0,
-			children: n ? /* @__PURE__ */ p(w, {
+			children: n ? /* @__PURE__ */ y(O, {
 				size: "icon",
 				variant: "ghost",
 				className: "h-6 w-6",
 				"aria-label": `Edit ${t.name} column`,
-				children: /* @__PURE__ */ p(c, { className: "h-3.5 w-3.5" })
-			}) : /* @__PURE__ */ m(w, {
+				children: /* @__PURE__ */ y(p, { className: "h-3.5 w-3.5" })
+			}) : /* @__PURE__ */ b(O, {
 				size: "sm",
 				variant: "outline",
-				children: [/* @__PURE__ */ p(l, { className: "mr-1 h-4 w-4" }), "Add column"]
+				children: [/* @__PURE__ */ y(m, { className: "mr-1 h-4 w-4" }), "Add column"]
 			})
-		}), /* @__PURE__ */ m(k, {
+		}), /* @__PURE__ */ b(ie, {
 			className: "max-w-md",
 			children: [
-				/* @__PURE__ */ m(M, { children: [/* @__PURE__ */ p(N, { children: n ? `Edit ${t.name}` : "Add column" }), /* @__PURE__ */ p(A, { children: "Moving a card into a column that sets a status changes the work item's status." })] }),
-				/* @__PURE__ */ m("div", {
+				/* @__PURE__ */ b(N, { children: [/* @__PURE__ */ y(P, { children: n ? `Edit ${t.name}` : "Add column" }), /* @__PURE__ */ y(j, { children: "Moving a card into a column that sets a status changes the work item's status." })] }),
+				/* @__PURE__ */ b("div", {
 					className: "space-y-3",
 					children: [
-						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-							htmlFor: `${$}-name`,
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+							htmlFor: `${X}-name`,
 							className: "text-sm font-medium",
 							children: "Name"
-						}), /* @__PURE__ */ p(D, {
-							id: `${$}-name`,
+						}), /* @__PURE__ */ y(A, {
+							id: `${X}-name`,
 							className: "mt-1",
 							value: s,
-							onChange: (e) => u(e.target.value)
+							onChange: (e) => c(e.target.value)
 						})] }),
-						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-							htmlFor: `${$}-status`,
+						/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
+							htmlFor: `${X}-status`,
 							className: "text-sm font-medium",
 							children: "Sets status"
-						}), /* @__PURE__ */ m("select", {
-							id: `${$}-status`,
+						}), /* @__PURE__ */ b("select", {
+							id: `${X}-status`,
 							className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-							value: f,
-							onChange: (e) => T(e.target.value),
-							children: [/* @__PURE__ */ p("option", {
+							value: u,
+							onChange: (e) => d(e.target.value),
+							children: [/* @__PURE__ */ y("option", {
 								value: "",
 								children: "No status (cards keep theirs)"
-							}), te.map((e) => /* @__PURE__ */ p("option", {
+							}), I.map((e) => /* @__PURE__ */ y("option", {
 								value: e,
-								children: P(e)
+								children: i(e)
 							}, e))]
 						})] }),
-						/* @__PURE__ */ m("div", { children: [
-							/* @__PURE__ */ p("label", {
-								htmlFor: `${$}-wip`,
+						/* @__PURE__ */ b("div", { children: [
+							/* @__PURE__ */ y("label", {
+								htmlFor: `${X}-wip`,
 								className: "text-sm font-medium",
 								children: "WIP limit (blank for none)"
 							}),
-							/* @__PURE__ */ p(D, {
-								id: `${$}-wip`,
+							/* @__PURE__ */ y(A, {
+								id: `${X}-wip`,
 								type: "number",
 								min: 1,
 								className: "mt-1",
-								value: E,
-								onChange: (e) => F(e.target.value)
+								value: f,
+								onChange: (e) => h(e.target.value)
 							}),
-							Q && /* @__PURE__ */ p(K, { message: "The WIP limit must be a whole number, 1 or more." })
+							G && /* @__PURE__ */ y($, { message: "The WIP limit must be a whole number, 1 or more." })
 						] })
 					]
 				}),
-				I && /* @__PURE__ */ p(K, { message: I }),
-				/* @__PURE__ */ m(j, {
+				g && /* @__PURE__ */ y($, { message: g }),
+				/* @__PURE__ */ b(M, {
 					className: "gap-2",
-					children: [n && /* @__PURE__ */ m(h, { children: [/* @__PURE__ */ p(C, {
+					children: [n && /* @__PURE__ */ b(x, { children: [/* @__PURE__ */ y(D, {
 						asChild: !0,
-						children: /* @__PURE__ */ p(w, {
+						children: /* @__PURE__ */ y(O, {
 							variant: "outline",
-							disabled: X,
+							disabled: U,
 							children: "Delete column"
 						})
-					}), /* @__PURE__ */ m(v, { children: [/* @__PURE__ */ m(x, { children: [/* @__PURE__ */ m(S, { children: [
+					}), /* @__PURE__ */ b(C, { children: [/* @__PURE__ */ b(T, { children: [/* @__PURE__ */ b(E, { children: [
 						"Delete ",
 						t.name,
 						"?"
-					] }), /* @__PURE__ */ p(y, { children: "Its cards are not deleted: each goes back to the column for its status, or off the board if no column sets that status." })] }), /* @__PURE__ */ m(b, { children: [/* @__PURE__ */ p(_, { children: "Keep it" }), /* @__PURE__ */ p(g, {
+					] }), /* @__PURE__ */ y(w, { children: "Its cards are not deleted: each goes back to the column for its status, or off the board if no column sets that status." })] }), /* @__PURE__ */ b(te, { children: [/* @__PURE__ */ y(ee, { children: "Keep it" }), /* @__PURE__ */ y(S, {
 						className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
 						onClick: async () => {
 							try {
-								await r(Y({ variables: { id: t.id } })), o(!1);
+								await r(V({ variables: { id: t.id } })), o(!1);
 							} catch (e) {
-								L(G(e, "The column could not be deleted."));
+								v(Q(e, "The column could not be deleted."));
 							}
 						},
 						children: "Delete column"
-					})] })] })] }), /* @__PURE__ */ p(w, {
-						onClick: ae,
-						disabled: !re,
-						"data-testid": `${$}-save`,
-						children: X ? "Saving…" : n ? "Save" : "Add column"
+					})] })] })] }), /* @__PURE__ */ y(O, {
+						onClick: se,
+						disabled: !oe,
+						"data-testid": `${X}-save`,
+						children: U ? "Saving…" : n ? "Save" : "Add column"
 					})]
 				})
 			]
@@ -487,6 +761,6 @@ function Y({ boardId: e, column: t }) {
 	});
 }
 //#endregion
-export { q as ProjectBoard };
+export { le as ProjectBoard };
 
 //# sourceMappingURL=ProjectBoard.js.map