@burdenoff/microfe-planmagnet 2026.927.4 → 2026.927.6

package/dist/planmagnet/board/ProjectBoard.js

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