@burdenoff/microfe-planmagnet 2026.927.2 → 2026.927.4

package/dist/planmagnet/controls/MilestoneControls.js

@@ -0,0 +1,200 @@
+import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
+import { throwOnError as t } from "../utils/mutationResult.js";
+import { ConfirmButton as n, ErrorLine as r } from "./ConfirmButton.js";
+import { enumLabel as i } from "./WorkItemControls.js";
+import { useState as a } from "react";
+import { Pencil as o, Trash2 as s } from "lucide-react";
+import { gql as c } from "@apollo/client";
+import { useMutation as l } from "@apollo/client/react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Button as f, Input as p, ResponsiveDialog as m, ResponsiveDialogContent as h, ResponsiveDialogDescription as g, ResponsiveDialogFooter as _, ResponsiveDialogHeader as v, ResponsiveDialogTitle as y, ResponsiveDialogTrigger as b } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/controls/MilestoneControls.tsx
+var x = [
+	"PENDING",
+	"IN_PROGRESS",
+	"COMPLETED",
+	"MISSED",
+	"CANCELLED"
+], S = [
+	"GetMilestonesForDetail",
+	"GetMilestones",
+	"GetDashboardData",
+	"GetAnalyticsData"
+], C = c`
+  mutation MilestoneControlsUpdate($id: ID!, $input: PlanmagnetUpdateMilestoneInput!) {
+    planmagnetUpdateMilestone(id: $id, input: $input) {
+      id
+      name
+      description
+      status
+      dueDate
+      completedAt
+    }
+  }
+`, w = c`
+  mutation MilestoneControlsDelete($id: ID!) {
+    planmagnetDeleteMilestone(id: $id)
+  }
+`;
+function T({ milestone: o }) {
+	let c = e(), [f, p] = l(C, {
+		refetchQueries: S,
+		awaitRefetchQueries: !0
+	}), [m, h] = l(w, { refetchQueries: S.filter((e) => e !== "GetMilestonesForDetail") }), [g, _] = a(null), v = p.loading || h.loading, y = x.includes(o.status) ? x : [o.status, ...x], b = async (e) => {
+		_(null);
+		try {
+			await t(f({ variables: {
+				id: o.id,
+				input: { status: e }
+			} }));
+		} catch (e) {
+			_(e instanceof Error ? e.message : "The status could not be changed.");
+		}
+	}, T = async () => {
+		_(null);
+		try {
+			await t(m({ variables: { id: o.id } })), c("/projects/milestones-page");
+		} catch (e) {
+			_(e instanceof Error ? e.message : "The milestone could not be deleted.");
+		}
+	};
+	return /* @__PURE__ */ d("div", {
+		className: "flex flex-col items-end gap-2",
+		children: [/* @__PURE__ */ d("div", {
+			className: "flex flex-wrap items-center justify-end gap-2",
+			children: [
+				/* @__PURE__ */ u("select", {
+					"aria-label": "Status",
+					"data-testid": "milestone-status",
+					className: "rounded-md border border-input bg-background px-2 py-1 text-sm disabled:opacity-60",
+					value: o.status,
+					disabled: v,
+					onChange: (e) => {
+						e.target.value !== o.status && b(e.target.value);
+					},
+					children: y.map((e) => /* @__PURE__ */ u("option", {
+						value: e,
+						children: i(e)
+					}, e))
+				}),
+				/* @__PURE__ */ u(D, { milestone: o }),
+				/* @__PURE__ */ u(n, {
+					label: "Delete",
+					variant: "outline",
+					icon: /* @__PURE__ */ u(s, { className: "mr-1 h-4 w-4" }),
+					title: `Delete ${o.name}?`,
+					description: "The milestone is deleted. This cannot be undone here.",
+					confirmLabel: "Delete milestone",
+					destructive: !0,
+					disabled: v,
+					onConfirm: () => void T()
+				})
+			]
+		}), g && /* @__PURE__ */ u(r, { message: g })]
+	});
+}
+var E = (e) => e ? e.slice(0, 10) : "";
+function D({ milestone: e }) {
+	let n = {
+		name: e.name,
+		description: e.description ?? "",
+		dueDate: E(e.dueDate)
+	}, [i, s] = a(!1), [c, x] = a(n), [w, T] = a(null), [D, O] = l(C, {
+		refetchQueries: S,
+		awaitRefetchQueries: !0
+	}), k = async () => {
+		T(null);
+		let r = {};
+		if (c.name.trim() !== n.name && (r.name = c.name.trim()), c.description.trim() !== n.description.trim() && (r.description = c.description.trim() || null), c.dueDate !== n.dueDate && (r.dueDate = c.dueDate || null), Object.keys(r).length === 0) {
+			s(!1);
+			return;
+		}
+		try {
+			await t(D({ variables: {
+				id: e.id,
+				input: r
+			} })), s(!1);
+		} catch (e) {
+			T(e instanceof Error ? e.message : "The milestone could not be saved.");
+		}
+	};
+	return /* @__PURE__ */ d(m, {
+		open: i,
+		onOpenChange: (e) => {
+			s(e), e ? x(n) : T(null);
+		},
+		children: [/* @__PURE__ */ u(b, {
+			asChild: !0,
+			children: /* @__PURE__ */ d(f, {
+				size: "sm",
+				variant: "outline",
+				"data-testid": "milestone-edit",
+				children: [/* @__PURE__ */ u(o, { className: "mr-1 h-4 w-4" }), "Edit"]
+			})
+		}), /* @__PURE__ */ d(h, {
+			className: "max-w-lg",
+			children: [
+				/* @__PURE__ */ d(v, { children: [/* @__PURE__ */ u(y, { children: "Edit milestone" }), /* @__PURE__ */ u(g, { children: "Change the name, description or due date." })] }),
+				/* @__PURE__ */ d("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+							htmlFor: "milestone-edit-name",
+							className: "text-sm font-medium",
+							children: "Name"
+						}), /* @__PURE__ */ u(p, {
+							id: "milestone-edit-name",
+							className: "mt-1",
+							value: c.name,
+							onChange: (e) => x({
+								...c,
+								name: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+							htmlFor: "milestone-edit-due",
+							className: "text-sm font-medium",
+							children: "Due date"
+						}), /* @__PURE__ */ u(p, {
+							id: "milestone-edit-due",
+							type: "date",
+							className: "mt-1",
+							value: c.dueDate,
+							onChange: (e) => x({
+								...c,
+								dueDate: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+							htmlFor: "milestone-edit-description",
+							className: "text-sm font-medium",
+							children: "Description"
+						}), /* @__PURE__ */ u("textarea", {
+							id: "milestone-edit-description",
+							className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[72px]",
+							value: c.description,
+							onChange: (e) => x({
+								...c,
+								description: e.target.value
+							})
+						})] }),
+						w && /* @__PURE__ */ u(r, { message: w })
+					]
+				}),
+				/* @__PURE__ */ d(_, { children: [/* @__PURE__ */ u(f, {
+					variant: "outline",
+					onClick: () => s(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ u(f, {
+					onClick: () => void k(),
+					disabled: c.name.trim() === "" || O.loading,
+					children: O.loading ? "Saving…" : "Save"
+				})] })
+			]
+		})]
+	});
+}
+//#endregion
+export { T as MilestoneHeaderActions };
+
+//# sourceMappingURL=MilestoneControls.js.map

package/dist/planmagnet/controls/MilestoneControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MilestoneControls.js","names":[],"sources":["../../../src/planmagnet/controls/MilestoneControls.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation } from '@apollo/client/react';\nimport {\n  Button,\n  Input,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport { Pencil, Trash2 } from 'lucide-react';\nimport { usePlanMagnetNavigate } from '../providers/PlanMagnetProvider';\nimport { throwOnError } from '../utils/mutationResult';\nimport { ConfirmButton, ErrorLine } from './ConfirmButton';\nimport { enumLabel } from './WorkItemControls';\n\n/**\n * Milestone controls (BOFF-7953/7963). A milestone was created Pending and could never move: no status control,\n * no edit, no delete — so the In progress / Completed / Missed / Cancelled tabs could only be empty, and the\n * \"Completed\" date stayed \"—\". Completing now also records the date (service, 2026-09-27).\n */\n\nexport const MILESTONE_STATUSES = [\n  'PENDING',\n  'IN_PROGRESS',\n  'COMPLETED',\n  'MISSED',\n  'CANCELLED',\n] as const;\n\nconst MILESTONE_QUERIES = [\n  'GetMilestonesForDetail',\n  'GetMilestones',\n  'GetDashboardData',\n  'GetAnalyticsData',\n];\n\nconst UPDATE = gql`\n  mutation MilestoneControlsUpdate($id: ID!, $input: PlanmagnetUpdateMilestoneInput!) {\n    planmagnetUpdateMilestone(id: $id, input: $input) {\n      id\n      name\n      description\n      status\n      dueDate\n      completedAt\n    }\n  }\n`;\nconst DELETE = gql`\n  mutation MilestoneControlsDelete($id: ID!) {\n    planmagnetDeleteMilestone(id: $id)\n  }\n`;\n\nexport interface MilestoneValues {\n  id: string;\n  name: string;\n  description: string | null;\n  status: string;\n  dueDate: string | null;\n}\n\nexport function MilestoneHeaderActions({ milestone }: { milestone: MilestoneValues }) {\n  const navigate = usePlanMagnetNavigate();\n  const [update, updateState] = useMutation(UPDATE, {\n    refetchQueries: MILESTONE_QUERIES,\n    awaitRefetchQueries: true,\n  });\n  const [remove, removeState] = useMutation(DELETE, {\n    refetchQueries: MILESTONE_QUERIES.filter((q) => q !== 'GetMilestonesForDetail'),\n  });\n  const [error, setError] = useState<string | null>(null);\n  const busy = updateState.loading || removeState.loading;\n  const statuses = (MILESTONE_STATUSES as readonly string[]).includes(milestone.status)\n    ? MILESTONE_STATUSES\n    : [milestone.status, ...MILESTONE_STATUSES];\n\n  const onStatus = async (status: string) => {\n    setError(null);\n    try {\n      await throwOnError(update({ variables: { id: milestone.id, input: { status } } }));\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'The status could not be changed.');\n    }\n  };\n  const onDelete = async () => {\n    setError(null);\n    try {\n      await throwOnError(remove({ variables: { id: milestone.id } }));\n      navigate('/projects/milestones-page');\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'The milestone could not be deleted.');\n    }\n  };\n\n  return (\n    <div className=\"flex flex-col items-end gap-2\">\n      <div className=\"flex flex-wrap items-center justify-end gap-2\">\n        <select\n          aria-label=\"Status\"\n          data-testid=\"milestone-status\"\n          className=\"rounded-md border border-input bg-background px-2 py-1 text-sm disabled:opacity-60\"\n          value={milestone.status}\n          disabled={busy}\n          onChange={(e) => {\n            if (e.target.value !== milestone.status) void onStatus(e.target.value);\n          }}\n        >\n          {statuses.map((s) => (\n            <option key={s} value={s}>\n              {enumLabel(s)}\n            </option>\n          ))}\n        </select>\n        <MilestoneEditDialog milestone={milestone} />\n        <ConfirmButton\n          label=\"Delete\"\n          variant=\"outline\"\n          icon={<Trash2 className=\"mr-1 h-4 w-4\" />}\n          title={`Delete ${milestone.name}?`}\n          description=\"The milestone is deleted. This cannot be undone here.\"\n          confirmLabel=\"Delete milestone\"\n          destructive\n          disabled={busy}\n          onConfirm={() => void onDelete()}\n        />\n      </div>\n      {error && <ErrorLine message={error} />}\n    </div>\n  );\n}\n\nconst day = (iso: string | null) => (iso ? iso.slice(0, 10) : '');\n\n/** Name, description and due date. Only changed fields are sent; an emptied field is cleared. */\nfunction MilestoneEditDialog({ milestone }: { milestone: MilestoneValues }) {\n  const initial = {\n    name: milestone.name,\n    description: milestone.description ?? '',\n    dueDate: day(milestone.dueDate),\n  };\n  const [open, setOpen] = useState(false);\n  const [form, setForm] = useState(initial);\n  const [error, setError] = useState<string | null>(null);\n  const [update, state] = useMutation(UPDATE, {\n    refetchQueries: MILESTONE_QUERIES,\n    awaitRefetchQueries: true,\n  });\n\n  const save = async () => {\n    setError(null);\n    const input: Record<string, unknown> = {};\n    if (form.name.trim() !== initial.name) input.name = form.name.trim();\n    if (form.description.trim() !== initial.description.trim())\n      input.description = form.description.trim() || null;\n    if (form.dueDate !== initial.dueDate) input.dueDate = form.dueDate || null;\n    if (Object.keys(input).length === 0) {\n      setOpen(false);\n      return;\n    }\n    try {\n      await throwOnError(update({ variables: { id: milestone.id, input } }));\n      setOpen(false);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'The milestone could not be saved.');\n    }\n  };\n\n  return (\n    <ResponsiveDialog\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (next) setForm(initial);\n        else setError(null);\n      }}\n    >\n      <ResponsiveDialogTrigger asChild>\n        <Button size=\"sm\" variant=\"outline\" data-testid=\"milestone-edit\">\n          <Pencil className=\"mr-1 h-4 w-4\" />\n          Edit\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"max-w-lg\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Edit milestone</ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            Change the name, description or due date.\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n        <div className=\"space-y-3\">\n          <div>\n            <label htmlFor=\"milestone-edit-name\" className=\"text-sm font-medium\">\n              Name\n            </label>\n            <Input\n              id=\"milestone-edit-name\"\n              className=\"mt-1\"\n              value={form.name}\n              onChange={(e) => setForm({ ...form, name: e.target.value })}\n            />\n          </div>\n          <div>\n            <label htmlFor=\"milestone-edit-due\" className=\"text-sm font-medium\">\n              Due date\n            </label>\n            <Input\n              id=\"milestone-edit-due\"\n              type=\"date\"\n              className=\"mt-1\"\n              value={form.dueDate}\n              onChange={(e) => setForm({ ...form, dueDate: e.target.value })}\n            />\n          </div>\n          <div>\n            <label htmlFor=\"milestone-edit-description\" className=\"text-sm font-medium\">\n              Description\n            </label>\n            <textarea\n              id=\"milestone-edit-description\"\n              className=\"mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[72px]\"\n              value={form.description}\n              onChange={(e) => setForm({ ...form, description: e.target.value })}\n            />\n          </div>\n          {error && <ErrorLine message={error} />}\n        </div>\n        <ResponsiveDialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>\n            Cancel\n          </Button>\n          <Button onClick={() => void save()} disabled={form.name.trim() === '' || state.loading}>\n            {state.loading ? 'Saving…' : 'Save'}\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,IAAqB;CAChC;CACA;CACA;CACA;CACA;CACD,EAEK,IAAoB;CACxB;CACA;CACA;CACA;CACD,EAEK,IAAS,CAAG;;;;;;;;;;;GAYZ,IAAS,CAAG;;;;;AAclB,SAAgB,EAAuB,EAAE,gBAA6C;CACpF,IAAM,IAAW,GAAuB,EAClC,CAAC,GAAQ,KAAe,EAAY,GAAQ;EAChD,gBAAgB;EAChB,qBAAqB;EACtB,CAAC,EACI,CAAC,GAAQ,KAAe,EAAY,GAAQ,EAChD,gBAAgB,EAAkB,QAAQ,MAAM,MAAM,yBAAyB,EAChF,CAAC,EACI,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,IAAO,EAAY,WAAW,EAAY,SAC1C,IAAY,EAAyC,SAAS,EAAU,OAAO,GACjF,IACA,CAAC,EAAU,QAAQ,GAAG,EAAmB,EAEvC,IAAW,OAAO,MAAmB;AACzC,IAAS,KAAK;AACd,MAAI;AACF,SAAM,EAAa,EAAO,EAAE,WAAW;IAAE,IAAI,EAAU;IAAI,OAAO,EAAE,WAAQ;IAAE,EAAE,CAAC,CAAC;WAC3E,GAAG;AACV,KAAS,aAAa,QAAQ,EAAE,UAAU,mCAAmC;;IAG3E,IAAW,YAAY;AAC3B,IAAS,KAAK;AACd,MAAI;AAEF,GADA,MAAM,EAAa,EAAO,EAAE,WAAW,EAAE,IAAI,EAAU,IAAI,EAAE,CAAC,CAAC,EAC/D,EAAS,4BAA4B;WAC9B,GAAG;AACV,KAAS,aAAa,QAAQ,EAAE,UAAU,sCAAsC;;;AAIpF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,UAAD;KACE,cAAW;KACX,eAAY;KACZ,WAAU;KACV,OAAO,EAAU;KACjB,UAAU;KACV,WAAW,MAAM;AACf,MAAI,EAAE,OAAO,UAAU,EAAU,UAAa,EAAS,EAAE,OAAO,MAAM;;eAGvE,EAAS,KAAK,MACb,kBAAC,UAAD;MAAgB,OAAO;gBACpB,EAAU,EAAE;MACN,EAFI,EAEJ,CACT;KACK,CAAA;IACT,kBAAC,GAAD,EAAgC,cAAa,CAAA;IAC7C,kBAAC,GAAD;KACE,OAAM;KACN,SAAQ;KACR,MAAM,kBAAC,GAAD,EAAQ,WAAU,gBAAiB,CAAA;KACzC,OAAO,UAAU,EAAU,KAAK;KAChC,aAAY;KACZ,cAAa;KACb,aAAA;KACA,UAAU;KACV,iBAAiB,KAAK,GAAU;KAChC,CAAA;IACE;MACL,KAAS,kBAAC,GAAD,EAAW,SAAS,GAAS,CAAA,CACnC;;;AAIV,IAAM,KAAO,MAAwB,IAAM,EAAI,MAAM,GAAG,GAAG,GAAG;AAG9D,SAAS,EAAoB,EAAE,gBAA6C;CAC1E,IAAM,IAAU;EACd,MAAM,EAAU;EAChB,aAAa,EAAU,eAAe;EACtC,SAAS,EAAI,EAAU,QAAQ;EAChC,EACK,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,CAAC,GAAM,KAAW,EAAS,EAAQ,EACnC,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,CAAC,GAAQ,KAAS,EAAY,GAAQ;EAC1C,gBAAgB;EAChB,qBAAqB;EACtB,CAAC,EAEI,IAAO,YAAY;AACvB,IAAS,KAAK;EACd,IAAM,IAAiC,EAAE;AAKzC,MAJI,EAAK,KAAK,MAAM,KAAK,EAAQ,SAAM,EAAM,OAAO,EAAK,KAAK,MAAM,GAChE,EAAK,YAAY,MAAM,KAAK,EAAQ,YAAY,MAAM,KACxD,EAAM,cAAc,EAAK,YAAY,MAAM,IAAI,OAC7C,EAAK,YAAY,EAAQ,YAAS,EAAM,UAAU,EAAK,WAAW,OAClE,OAAO,KAAK,EAAM,CAAC,WAAW,GAAG;AACnC,KAAQ,GAAM;AACd;;AAEF,MAAI;AAEF,GADA,MAAM,EAAa,EAAO,EAAE,WAAW;IAAE,IAAI,EAAU;IAAI;IAAO,EAAE,CAAC,CAAC,EACtE,EAAQ,GAAM;WACP,GAAG;AACV,KAAS,aAAa,QAAQ,EAAE,UAAU,oCAAoC;;;AAIlF,QACE,kBAAC,GAAD;EACQ;EACN,eAAe,MAAS;AAEtB,GADA,EAAQ,EAAK,EACT,IAAM,EAAQ,EAAQ,GACrB,EAAS,KAAK;;YALvB,CAQE,kBAAC,GAAD;GAAyB,SAAA;aACvB,kBAAC,GAAD;IAAQ,MAAK;IAAK,SAAQ;IAAU,eAAY;cAAhD,CACE,kBAAC,GAAD,EAAQ,WAAU,gBAAiB,CAAA,EAAA,OAE5B;;GACe,CAAA,EAC1B,kBAAC,GAAD;GAAyB,WAAU;aAAnC;IACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAuB,kBAAsC,CAAA,EAC7D,kBAAC,GAAD,EAAA,UAA6B,6CAEC,CAAA,CACP,EAAA,CAAA;IACzB,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,SAAQ;OAAsB,WAAU;iBAAsB;OAE7D,CAAA,EACR,kBAAC,GAAD;OACE,IAAG;OACH,WAAU;OACV,OAAO,EAAK;OACZ,WAAW,MAAM,EAAQ;QAAE,GAAG;QAAM,MAAM,EAAE,OAAO;QAAO,CAAC;OAC3D,CAAA,CACE,EAAA,CAAA;MACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,SAAQ;OAAqB,WAAU;iBAAsB;OAE5D,CAAA,EACR,kBAAC,GAAD;OACE,IAAG;OACH,MAAK;OACL,WAAU;OACV,OAAO,EAAK;OACZ,WAAW,MAAM,EAAQ;QAAE,GAAG;QAAM,SAAS,EAAE,OAAO;QAAO,CAAC;OAC9D,CAAA,CACE,EAAA,CAAA;MACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;OAAO,SAAQ;OAA6B,WAAU;iBAAsB;OAEpE,CAAA,EACR,kBAAC,YAAD;OACE,IAAG;OACH,WAAU;OACV,OAAO,EAAK;OACZ,WAAW,MAAM,EAAQ;QAAE,GAAG;QAAM,aAAa,EAAE,OAAO;QAAO,CAAC;OAClE,CAAA,CACE,EAAA,CAAA;MACL,KAAS,kBAAC,GAAD,EAAW,SAAS,GAAS,CAAA;MACnC;;IACN,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAQ,SAAQ;KAAU,eAAe,EAAQ,GAAM;eAAE;KAEhD,CAAA,EACT,kBAAC,GAAD;KAAQ,eAAe,KAAK,GAAM;KAAE,UAAU,EAAK,KAAK,MAAM,KAAK,MAAM,EAAM;eAC5E,EAAM,UAAU,YAAY;KACtB,CAAA,CACc,EAAA,CAAA;IACD;KACT"}

package/dist/planmagnet/controls/ObjectiveControls.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Objective controls (BOFF-7956/7963). Objectives were created ACTIVE and could never be completed, cancelled or
+ * edited, so the Draft/Completed/Cancelled tabs could only be empty; and key results could not be linked to work
+ * items, so the linked-work-item rollup never appeared.
+ */
+export declare const OBJECTIVE_STATUSES: readonly ["DRAFT", "ACTIVE", "COMPLETED", "CANCELLED"];
+export interface ObjectiveValues {
+    id: string;
+    title: string;
+    description: string | null;
+    periodLabel: string;
+    startDate: string | null;
+    endDate: string | null;
+    status: string;
+}
+/** Status select and Edit for the objective header. */
+export declare function ObjectiveHeaderControls({ objective }: {
+    objective: ObjectiveValues;
+}): import("react/jsx-runtime").JSX.Element;
+/** The work items a key result is linked to, with unlink, and a picker to link another. */
+export declare function KeyResultWorkItems({ keyResultId, keyResultTitle, linked, }: {
+    keyResultId: string;
+    keyResultTitle: string;
+    linked: {
+        id: string;
+        key: string;
+        title: string;
+        status: string;
+    }[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ObjectiveControls.d.ts.map

package/dist/planmagnet/controls/ObjectiveControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectiveControls.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/controls/ObjectiveControls.tsx"],"names":[],"mappings":"AAqBA;;;;GAIG;AAEH,eAAO,MAAM,kBAAkB,wDAAyD,CAAC;AAgCzF,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,uDAAuD;AACvD,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,eAAe,CAAA;CAAE,2CAsCpF;AAgJD,2FAA2F;AAC3F,wBAAgB,kBAAkB,CAAC,EACjC,WAAW,EACX,cAAc,EACd,MAAM,GACP,EAAE;IACD,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CACtE,2CA6EA"}

package/dist/planmagnet/controls/ObjectiveControls.js

@@ -0,0 +1,296 @@
+import { throwOnError as e } from "../utils/mutationResult.js";
+import { WorkItemSearchSelect as t } from "./Pickers.js";
+import { ErrorLine as n } from "./ConfirmButton.js";
+import { endBeforeStart as r } from "../utils/formValidation.js";
+import { enumLabel as i } from "./WorkItemControls.js";
+import { useState as a } from "react";
+import { Link2 as o, Pencil as s, X as c } from "lucide-react";
+import { gql as l } from "@apollo/client";
+import { useMutation as u } from "@apollo/client/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Button as p, Input as m, ResponsiveDialog as h, ResponsiveDialogContent as g, ResponsiveDialogDescription as _, ResponsiveDialogFooter as v, ResponsiveDialogHeader as y, ResponsiveDialogTitle as b, ResponsiveDialogTrigger as x } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/controls/ObjectiveControls.tsx
+var S = [
+	"DRAFT",
+	"ACTIVE",
+	"COMPLETED",
+	"CANCELLED"
+], C = ["GetObjectiveDetail", "GetObjectives"], w = l`
+  mutation ObjectiveControlsUpdate($id: ID!, $input: PlanmagnetUpdateObjectiveInput!) {
+    planmagnetUpdateObjective(id: $id, input: $input) {
+      id
+      title
+      description
+      periodLabel
+      startDate
+      endDate
+      status
+    }
+  }
+`, T = l`
+  mutation ObjectiveControlsLinkWorkItem($keyResultId: ID!, $workItemId: ID!) {
+    planmagnetLinkKeyResultToWorkItem(keyResultId: $keyResultId, workItemId: $workItemId) {
+      id
+    }
+  }
+`, E = l`
+  mutation ObjectiveControlsUnlinkWorkItem($keyResultId: ID!, $workItemId: ID!) {
+    planmagnetUnlinkKeyResultFromWorkItem(keyResultId: $keyResultId, workItemId: $workItemId)
+  }
+`, D = {
+	refetchQueries: C,
+	awaitRefetchQueries: !0
+};
+function O({ objective: t }) {
+	let [r, o] = u(w, D), [s, c] = a(null), l = S.includes(t.status) ? S : [t.status, ...S], p = async (n) => {
+		c(null);
+		try {
+			await e(r({ variables: {
+				id: t.id,
+				input: { status: n }
+			} }));
+		} catch (e) {
+			c(e instanceof Error ? e.message : "The status could not be changed.");
+		}
+	};
+	return /* @__PURE__ */ f("div", {
+		className: "flex flex-col items-end gap-1",
+		children: [/* @__PURE__ */ f("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ d("select", {
+				"aria-label": "Objective status",
+				"data-testid": "objective-status",
+				className: "rounded-md border border-input bg-background px-2 py-1 text-sm disabled:opacity-60",
+				value: t.status,
+				disabled: o.loading,
+				onChange: (e) => {
+					e.target.value !== t.status && p(e.target.value);
+				},
+				children: l.map((e) => /* @__PURE__ */ d("option", {
+					value: e,
+					children: i(e)
+				}, e))
+			}), /* @__PURE__ */ d(A, { objective: t })]
+		}), s && /* @__PURE__ */ d(n, { message: s })]
+	});
+}
+var k = (e) => e ? e.slice(0, 10) : "";
+function A({ objective: t }) {
+	let i = {
+		title: t.title,
+		description: t.description ?? "",
+		periodLabel: t.periodLabel,
+		startDate: k(t.startDate),
+		endDate: k(t.endDate)
+	}, [o, c] = a(!1), [l, S] = a(i), [C, T] = a(null), [E, O] = u(w, D), A = r(l.startDate, l.endDate), j = l.title.trim() !== "" && l.periodLabel.trim() !== "" && !A && !O.loading, M = async () => {
+		T(null);
+		let n = {};
+		if (l.title.trim() !== i.title && (n.title = l.title.trim()), l.periodLabel.trim() !== i.periodLabel && (n.periodLabel = l.periodLabel.trim()), l.description.trim() !== i.description.trim() && (n.description = l.description.trim() || null), l.startDate !== i.startDate && (n.startDate = l.startDate || null), l.endDate !== i.endDate && (n.endDate = l.endDate || null), Object.keys(n).length === 0) {
+			c(!1);
+			return;
+		}
+		try {
+			await e(E({ variables: {
+				id: t.id,
+				input: n
+			} })), c(!1);
+		} catch (e) {
+			T(e instanceof Error ? e.message : "The objective could not be saved.");
+		}
+	}, N = "text-sm font-medium";
+	return /* @__PURE__ */ f(h, {
+		open: o,
+		onOpenChange: (e) => {
+			c(e), e ? S(i) : T(null);
+		},
+		children: [/* @__PURE__ */ d(x, {
+			asChild: !0,
+			children: /* @__PURE__ */ f(p, {
+				size: "sm",
+				variant: "outline",
+				"data-testid": "objective-edit",
+				children: [/* @__PURE__ */ d(s, { className: "mr-1 h-4 w-4" }), "Edit"]
+			})
+		}), /* @__PURE__ */ f(g, {
+			className: "max-w-lg",
+			children: [
+				/* @__PURE__ */ f(y, { children: [/* @__PURE__ */ d(b, { children: "Edit objective" }), /* @__PURE__ */ d(_, { children: "Change the title, period or description." })] }),
+				/* @__PURE__ */ f("div", {
+					className: "space-y-3",
+					children: [
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							htmlFor: "objective-edit-title",
+							className: N,
+							children: "Title"
+						}), /* @__PURE__ */ d(m, {
+							id: "objective-edit-title",
+							className: "mt-1",
+							value: l.title,
+							onChange: (e) => S({
+								...l,
+								title: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							htmlFor: "objective-edit-period",
+							className: N,
+							children: "Period"
+						}), /* @__PURE__ */ d(m, {
+							id: "objective-edit-period",
+							className: "mt-1",
+							placeholder: "e.g. Q4 2026",
+							value: l.periodLabel,
+							onChange: (e) => S({
+								...l,
+								periodLabel: e.target.value
+							})
+						})] }),
+						/* @__PURE__ */ f("div", {
+							className: "grid grid-cols-2 gap-3",
+							children: [/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+								htmlFor: "objective-edit-start",
+								className: N,
+								children: "Start date"
+							}), /* @__PURE__ */ d(m, {
+								id: "objective-edit-start",
+								type: "date",
+								className: "mt-1",
+								value: l.startDate,
+								max: l.endDate || void 0,
+								onChange: (e) => S({
+									...l,
+									startDate: e.target.value
+								})
+							})] }), /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+								htmlFor: "objective-edit-end",
+								className: N,
+								children: "End date"
+							}), /* @__PURE__ */ d(m, {
+								id: "objective-edit-end",
+								type: "date",
+								className: "mt-1",
+								value: l.endDate,
+								min: l.startDate || void 0,
+								onChange: (e) => S({
+									...l,
+									endDate: e.target.value
+								})
+							})] })]
+						}),
+						A && /* @__PURE__ */ d(n, { message: "The end date is before the start date." }),
+						/* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d("label", {
+							htmlFor: "objective-edit-description",
+							className: N,
+							children: "Description"
+						}), /* @__PURE__ */ d("textarea", {
+							id: "objective-edit-description",
+							className: "mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[72px]",
+							value: l.description,
+							onChange: (e) => S({
+								...l,
+								description: e.target.value
+							})
+						})] }),
+						C && /* @__PURE__ */ d(n, { message: C })
+					]
+				}),
+				/* @__PURE__ */ f(v, { children: [/* @__PURE__ */ d(p, {
+					variant: "outline",
+					onClick: () => c(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ d(p, {
+					onClick: () => void M(),
+					disabled: !j,
+					children: O.loading ? "Saving…" : "Save"
+				})] })
+			]
+		})]
+	});
+}
+function j({ keyResultId: r, keyResultTitle: s, linked: l }) {
+	let [m, h] = u(T, D), [g, _] = u(E, D), [v, y] = a(!1), [b, x] = a(""), [S, C] = a(null), w = h.loading || _.loading, O = async (t, n, i) => {
+		C(null);
+		try {
+			await e(t({ variables: {
+				keyResultId: r,
+				workItemId: n
+			} })), i?.();
+		} catch (e) {
+			C(e instanceof Error ? e.message : "The link could not be changed.");
+		}
+	};
+	return /* @__PURE__ */ f("div", {
+		className: "space-y-2",
+		"data-testid": "kr-work-items",
+		children: [
+			l.length > 0 && /* @__PURE__ */ d("ul", {
+				className: "space-y-1",
+				children: l.map((e) => /* @__PURE__ */ f("li", {
+					className: "flex items-center justify-between gap-2 text-xs",
+					children: [/* @__PURE__ */ f("span", {
+						className: "truncate",
+						children: [
+							/* @__PURE__ */ d("span", {
+								className: "font-medium",
+								children: e.key
+							}),
+							" ",
+							e.title,
+							" ",
+							/* @__PURE__ */ f("span", {
+								className: "text-muted-foreground",
+								children: [
+									"(",
+									i(e.status),
+									")"
+								]
+							})
+						]
+					}), /* @__PURE__ */ d(p, {
+						size: "sm",
+						variant: "ghost",
+						className: "h-6 px-2",
+						"aria-label": `Unlink ${e.key} from ${s}`,
+						disabled: w,
+						onClick: () => void O(g, e.id),
+						children: /* @__PURE__ */ d(c, { className: "h-3 w-3" })
+					})]
+				}, e.id))
+			}),
+			v ? /* @__PURE__ */ f("div", {
+				className: "space-y-2 rounded-md border border-input p-2",
+				children: [/* @__PURE__ */ d(t, {
+					id: `kr-link-${r}`,
+					value: b,
+					onChange: x,
+					exclude: l.map((e) => e.id)
+				}), /* @__PURE__ */ f("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ d(p, {
+						size: "sm",
+						disabled: !b || w,
+						onClick: () => void O(m, b, () => {
+							x(""), y(!1);
+						}),
+						children: "Link"
+					}), /* @__PURE__ */ d(p, {
+						size: "sm",
+						variant: "outline",
+						onClick: () => y(!1),
+						children: "Cancel"
+					})]
+				})]
+			}) : /* @__PURE__ */ f(p, {
+				size: "sm",
+				variant: "outline",
+				onClick: () => y(!0),
+				children: [/* @__PURE__ */ d(o, { className: "mr-1 h-4 w-4" }), "Link work item"]
+			}),
+			S && /* @__PURE__ */ d(n, { message: S })
+		]
+	});
+}
+//#endregion
+export { j as KeyResultWorkItems, O as ObjectiveHeaderControls };
+
+//# sourceMappingURL=ObjectiveControls.js.map

package/dist/planmagnet/controls/ObjectiveControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectiveControls.js","names":[],"sources":["../../../src/planmagnet/controls/ObjectiveControls.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation } from '@apollo/client/react';\nimport {\n  Button,\n  Input,\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogFooter,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport { Link2, Pencil, X } from 'lucide-react';\nimport { throwOnError } from '../utils/mutationResult';\nimport { endBeforeStart } from '../utils/formValidation';\nimport { ErrorLine } from './ConfirmButton';\nimport { WorkItemSearchSelect } from './Pickers';\nimport { enumLabel } from './WorkItemControls';\n\n/**\n * Objective controls (BOFF-7956/7963). Objectives were created ACTIVE and could never be completed, cancelled or\n * edited, so the Draft/Completed/Cancelled tabs could only be empty; and key results could not be linked to work\n * items, so the linked-work-item rollup never appeared.\n */\n\nexport const OBJECTIVE_STATUSES = ['DRAFT', 'ACTIVE', 'COMPLETED', 'CANCELLED'] as const;\n\nconst OBJECTIVE_QUERIES = ['GetObjectiveDetail', 'GetObjectives'];\n\nconst UPDATE = gql`\n  mutation ObjectiveControlsUpdate($id: ID!, $input: PlanmagnetUpdateObjectiveInput!) {\n    planmagnetUpdateObjective(id: $id, input: $input) {\n      id\n      title\n      description\n      periodLabel\n      startDate\n      endDate\n      status\n    }\n  }\n`;\nconst LINK = gql`\n  mutation ObjectiveControlsLinkWorkItem($keyResultId: ID!, $workItemId: ID!) {\n    planmagnetLinkKeyResultToWorkItem(keyResultId: $keyResultId, workItemId: $workItemId) {\n      id\n    }\n  }\n`;\nconst UNLINK = gql`\n  mutation ObjectiveControlsUnlinkWorkItem($keyResultId: ID!, $workItemId: ID!) {\n    planmagnetUnlinkKeyResultFromWorkItem(keyResultId: $keyResultId, workItemId: $workItemId)\n  }\n`;\n\nconst refetch = { refetchQueries: OBJECTIVE_QUERIES, awaitRefetchQueries: true };\n\nexport interface ObjectiveValues {\n  id: string;\n  title: string;\n  description: string | null;\n  periodLabel: string;\n  startDate: string | null;\n  endDate: string | null;\n  status: string;\n}\n\n/** Status select and Edit for the objective header. */\nexport function ObjectiveHeaderControls({ objective }: { objective: ObjectiveValues }) {\n  const [update, state] = useMutation(UPDATE, refetch);\n  const [error, setError] = useState<string | null>(null);\n  const statuses = (OBJECTIVE_STATUSES as readonly string[]).includes(objective.status)\n    ? OBJECTIVE_STATUSES\n    : [objective.status, ...OBJECTIVE_STATUSES];\n  const onStatus = async (status: string) => {\n    setError(null);\n    try {\n      await throwOnError(update({ variables: { id: objective.id, input: { status } } }));\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'The status could not be changed.');\n    }\n  };\n  return (\n    <div className=\"flex flex-col items-end gap-1\">\n      <div className=\"flex items-center gap-2\">\n        <select\n          aria-label=\"Objective status\"\n          data-testid=\"objective-status\"\n          className=\"rounded-md border border-input bg-background px-2 py-1 text-sm disabled:opacity-60\"\n          value={objective.status}\n          disabled={state.loading}\n          onChange={(e) => {\n            if (e.target.value !== objective.status) void onStatus(e.target.value);\n          }}\n        >\n          {statuses.map((s) => (\n            <option key={s} value={s}>\n              {enumLabel(s)}\n            </option>\n          ))}\n        </select>\n        <ObjectiveEditDialog objective={objective} />\n      </div>\n      {error && <ErrorLine message={error} />}\n    </div>\n  );\n}\n\nconst day = (iso: string | null) => (iso ? iso.slice(0, 10) : '');\n\nfunction ObjectiveEditDialog({ objective }: { objective: ObjectiveValues }) {\n  const initial = {\n    title: objective.title,\n    description: objective.description ?? '',\n    periodLabel: objective.periodLabel,\n    startDate: day(objective.startDate),\n    endDate: day(objective.endDate),\n  };\n  const [open, setOpen] = useState(false);\n  const [form, setForm] = useState(initial);\n  const [error, setError] = useState<string | null>(null);\n  const [update, state] = useMutation(UPDATE, refetch);\n  const invalidDates = endBeforeStart(form.startDate, form.endDate);\n  const canSave =\n    form.title.trim() !== '' && form.periodLabel.trim() !== '' && !invalidDates && !state.loading;\n\n  const save = async () => {\n    setError(null);\n    const input: Record<string, unknown> = {};\n    if (form.title.trim() !== initial.title) input.title = form.title.trim();\n    if (form.periodLabel.trim() !== initial.periodLabel)\n      input.periodLabel = form.periodLabel.trim();\n    if (form.description.trim() !== initial.description.trim())\n      input.description = form.description.trim() || null;\n    if (form.startDate !== initial.startDate) input.startDate = form.startDate || null;\n    if (form.endDate !== initial.endDate) input.endDate = form.endDate || null;\n    if (Object.keys(input).length === 0) {\n      setOpen(false);\n      return;\n    }\n    try {\n      await throwOnError(update({ variables: { id: objective.id, input } }));\n      setOpen(false);\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'The objective could not be saved.');\n    }\n  };\n\n  const label = 'text-sm font-medium';\n  return (\n    <ResponsiveDialog\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (next) setForm(initial);\n        else setError(null);\n      }}\n    >\n      <ResponsiveDialogTrigger asChild>\n        <Button size=\"sm\" variant=\"outline\" data-testid=\"objective-edit\">\n          <Pencil className=\"mr-1 h-4 w-4\" />\n          Edit\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent className=\"max-w-lg\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Edit objective</ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            Change the title, period or description.\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n        <div className=\"space-y-3\">\n          <div>\n            <label htmlFor=\"objective-edit-title\" className={label}>\n              Title\n            </label>\n            <Input\n              id=\"objective-edit-title\"\n              className=\"mt-1\"\n              value={form.title}\n              onChange={(e) => setForm({ ...form, title: e.target.value })}\n            />\n          </div>\n          <div>\n            <label htmlFor=\"objective-edit-period\" className={label}>\n              Period\n            </label>\n            <Input\n              id=\"objective-edit-period\"\n              className=\"mt-1\"\n              placeholder=\"e.g. Q4 2026\"\n              value={form.periodLabel}\n              onChange={(e) => setForm({ ...form, periodLabel: e.target.value })}\n            />\n          </div>\n          <div className=\"grid grid-cols-2 gap-3\">\n            <div>\n              <label htmlFor=\"objective-edit-start\" className={label}>\n                Start date\n              </label>\n              <Input\n                id=\"objective-edit-start\"\n                type=\"date\"\n                className=\"mt-1\"\n                value={form.startDate}\n                max={form.endDate || undefined}\n                onChange={(e) => setForm({ ...form, startDate: e.target.value })}\n              />\n            </div>\n            <div>\n              <label htmlFor=\"objective-edit-end\" className={label}>\n                End date\n              </label>\n              <Input\n                id=\"objective-edit-end\"\n                type=\"date\"\n                className=\"mt-1\"\n                value={form.endDate}\n                min={form.startDate || undefined}\n                onChange={(e) => setForm({ ...form, endDate: e.target.value })}\n              />\n            </div>\n          </div>\n          {invalidDates && <ErrorLine message=\"The end date is before the start date.\" />}\n          <div>\n            <label htmlFor=\"objective-edit-description\" className={label}>\n              Description\n            </label>\n            <textarea\n              id=\"objective-edit-description\"\n              className=\"mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[72px]\"\n              value={form.description}\n              onChange={(e) => setForm({ ...form, description: e.target.value })}\n            />\n          </div>\n          {error && <ErrorLine message={error} />}\n        </div>\n        <ResponsiveDialogFooter>\n          <Button variant=\"outline\" onClick={() => setOpen(false)}>\n            Cancel\n          </Button>\n          <Button onClick={() => void save()} disabled={!canSave}>\n            {state.loading ? 'Saving…' : 'Save'}\n          </Button>\n        </ResponsiveDialogFooter>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n\n/** The work items a key result is linked to, with unlink, and a picker to link another. */\nexport function KeyResultWorkItems({\n  keyResultId,\n  keyResultTitle,\n  linked,\n}: {\n  keyResultId: string;\n  keyResultTitle: string;\n  linked: { id: string; key: string; title: string; status: string }[];\n}) {\n  const [link, linkState] = useMutation(LINK, refetch);\n  const [unlink, unlinkState] = useMutation(UNLINK, refetch);\n  const [adding, setAdding] = useState(false);\n  const [choice, setChoice] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const busy = linkState.loading || unlinkState.loading;\n\n  const run = async (mutate: typeof link, workItemId: string, after?: () => void) => {\n    setError(null);\n    try {\n      await throwOnError(mutate({ variables: { keyResultId, workItemId } }));\n      after?.();\n    } catch (e) {\n      setError(e instanceof Error ? e.message : 'The link could not be changed.');\n    }\n  };\n\n  return (\n    <div className=\"space-y-2\" data-testid=\"kr-work-items\">\n      {linked.length > 0 && (\n        <ul className=\"space-y-1\">\n          {linked.map((w) => (\n            <li key={w.id} className=\"flex items-center justify-between gap-2 text-xs\">\n              <span className=\"truncate\">\n                <span className=\"font-medium\">{w.key}</span> {w.title}{' '}\n                <span className=\"text-muted-foreground\">({enumLabel(w.status)})</span>\n              </span>\n              <Button\n                size=\"sm\"\n                variant=\"ghost\"\n                className=\"h-6 px-2\"\n                aria-label={`Unlink ${w.key} from ${keyResultTitle}`}\n                disabled={busy}\n                onClick={() => void run(unlink, w.id)}\n              >\n                <X className=\"h-3 w-3\" />\n              </Button>\n            </li>\n          ))}\n        </ul>\n      )}\n      {adding ? (\n        <div className=\"space-y-2 rounded-md border border-input p-2\">\n          <WorkItemSearchSelect\n            id={`kr-link-${keyResultId}`}\n            value={choice}\n            onChange={setChoice}\n            exclude={linked.map((w) => w.id)}\n          />\n          <div className=\"flex gap-2\">\n            <Button\n              size=\"sm\"\n              disabled={!choice || busy}\n              onClick={() =>\n                void run(link, choice, () => {\n                  setChoice('');\n                  setAdding(false);\n                })\n              }\n            >\n              Link\n            </Button>\n            <Button size=\"sm\" variant=\"outline\" onClick={() => setAdding(false)}>\n              Cancel\n            </Button>\n          </div>\n        </div>\n      ) : (\n        <Button size=\"sm\" variant=\"outline\" onClick={() => setAdding(true)}>\n          <Link2 className=\"mr-1 h-4 w-4\" />\n          Link work item\n        </Button>\n      )}\n      {error && <ErrorLine message={error} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/planmagnet/controls/Pickers.d.ts

@@ -0,0 +1,26 @@
+/** A project select. '' means "no project" when `noneLabel` is given. */
+export declare function ProjectSelect({ id, value, onChange, noneLabel, }: {
+    id?: string;
+    value: string;
+    onChange: (projectId: string) => void;
+    noneLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Search, then pick one work item. The server matches the key, title and description. `exclude` hides items that are
+ * already linked (the result says how many more exist, so an empty list never claims "nothing left" falsely).
+ */
+export declare function WorkItemSearchSelect({ id, projectId, value, onChange, exclude, }: {
+    id: string;
+    projectId?: string;
+    value: string;
+    onChange: (workItemId: string) => void;
+    exclude?: string[];
+}): import("react/jsx-runtime").JSX.Element;
+/** Search, then pick one doc. */
+export declare function DocSearchSelect({ id, value, onChange, exclude, }: {
+    id: string;
+    value: string;
+    onChange: (docId: string) => void;
+    exclude?: string[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pickers.d.ts.map

package/dist/planmagnet/controls/Pickers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pickers.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/controls/Pickers.tsx"],"names":[],"mappings":"AA2BA,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,EAC5B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CA8BA;AAeD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAY,GACb,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,2CAqDA;AAcD,iCAAiC;AACjC,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,OAAY,GACb,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB,2CA8CA"}