@burdenoff/microfe-planmagnet 2026.927.3 → 2026.927.4

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"}

package/dist/planmagnet/controls/Pickers.js

@@ -0,0 +1,171 @@
+import { usePlanMagnet as e } from "../providers/PlanMagnetProvider.js";
+import { useDeferredValue as t, useState as n } from "react";
+import { gql as r } from "@apollo/client";
+import { useQuery as i } from "@apollo/client/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Input as s } from "@burdenoff/fe-libs/ui";
+//#region src/planmagnet/controls/Pickers.tsx
+var c = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:opacity-60", l = r`
+  query PickerProjects($workspaceId: ID!) {
+    planmagnetProjects(workspaceId: $workspaceId, pagination: { first: 100 }) {
+      items {
+        id
+        name
+      }
+      totalCount
+    }
+  }
+`;
+function u({ id: t, value: n, onChange: r, noneLabel: s }) {
+	let { workspaceId: u } = e(), { data: d, loading: f, error: p } = i(l, {
+		variables: { workspaceId: u ?? "" },
+		skip: !u
+	}), m = d?.planmagnetProjects.items ?? [];
+	return /* @__PURE__ */ o("select", {
+		id: t,
+		className: c,
+		value: n,
+		onChange: (e) => r(e.target.value),
+		children: [
+			s !== void 0 && /* @__PURE__ */ a("option", {
+				value: "",
+				children: s
+			}),
+			m.length === 0 && s === void 0 && /* @__PURE__ */ a("option", {
+				value: "",
+				children: f && !d ? "Loading projects…" : p ? "Projects could not be loaded" : "No projects yet"
+			}),
+			m.map((e) => /* @__PURE__ */ a("option", {
+				value: e.id,
+				children: e.name
+			}, e.id))
+		]
+	});
+}
+var d = r`
+  query PickerWorkItems($workspaceId: ID!, $filter: PlanmagnetWorkItemFilter) {
+    planmagnetWorkItems(workspaceId: $workspaceId, filter: $filter, pagination: { first: 20 }) {
+      items {
+        id
+        key
+        title
+      }
+      totalCount
+    }
+  }
+`;
+function f({ id: r, projectId: l, value: u, onChange: f, exclude: p = [] }) {
+	let { workspaceId: m } = e(), [h, g] = n(""), _ = t(h.trim()), { data: v, loading: y } = i(d, {
+		variables: {
+			workspaceId: m ?? "",
+			filter: {
+				..._ && { search: _ },
+				...l && { projectId: l }
+			}
+		},
+		skip: !m
+	}), b = v?.planmagnetWorkItems.items ?? [], x = b.filter((e) => !p.includes(e.id)), S = v?.planmagnetWorkItems.totalCount ?? 0;
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ a(s, {
+				"aria-label": "Search work items",
+				placeholder: "Search by key or title",
+				value: h,
+				onChange: (e) => g(e.target.value)
+			}),
+			/* @__PURE__ */ o("select", {
+				id: r,
+				className: c,
+				value: u,
+				onChange: (e) => f(e.target.value),
+				children: [
+					/* @__PURE__ */ a("option", {
+						value: "",
+						children: y && !v ? "Searching…" : x.length ? "Choose a work item" : "No match"
+					}),
+					u && !x.some((e) => e.id === u) && /* @__PURE__ */ a("option", {
+						value: u,
+						children: "Currently linked work item"
+					}),
+					x.map((e) => /* @__PURE__ */ o("option", {
+						value: e.id,
+						children: [
+							e.key,
+							" — ",
+							e.title
+						]
+					}, e.id))
+				]
+			}),
+			S > b.length && /* @__PURE__ */ o("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Showing ",
+					b.length,
+					" of ",
+					S,
+					" — type to narrow the list."
+				]
+			})
+		]
+	});
+}
+var p = r`
+  query PickerDocs($workspaceId: String, $filter: PlanmagnetDocFilter) {
+    planmagnetDocs(workspaceId: $workspaceId, filter: $filter, pagination: { first: 20 }) {
+      items {
+        id
+        title
+      }
+      totalCount
+    }
+  }
+`;
+function m({ id: r, value: l, onChange: u, exclude: d = [] }) {
+	let { workspaceId: f } = e(), [m, h] = n(""), g = t(m.trim()), { data: _, loading: v } = i(p, {
+		variables: {
+			workspaceId: f ?? "",
+			filter: g ? { search: g } : void 0
+		},
+		skip: !f
+	}), y = _?.planmagnetDocs.items ?? [], b = y.filter((e) => !d.includes(e.id)), x = _?.planmagnetDocs.totalCount ?? 0;
+	return /* @__PURE__ */ o("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ a(s, {
+				"aria-label": "Search docs",
+				placeholder: "Search docs by title",
+				value: m,
+				onChange: (e) => h(e.target.value)
+			}),
+			/* @__PURE__ */ o("select", {
+				id: r,
+				className: c,
+				value: l,
+				onChange: (e) => u(e.target.value),
+				children: [/* @__PURE__ */ a("option", {
+					value: "",
+					children: v && !_ ? "Searching…" : b.length ? "Choose a doc" : "No match"
+				}), b.map((e) => /* @__PURE__ */ a("option", {
+					value: e.id,
+					children: e.title
+				}, e.id))]
+			}),
+			x > y.length && /* @__PURE__ */ o("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Showing ",
+					y.length,
+					" of ",
+					x,
+					" — type to narrow the list."
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { m as DocSearchSelect, u as ProjectSelect, f as WorkItemSearchSelect };
+
+//# sourceMappingURL=Pickers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pickers.js","names":[],"sources":["../../../src/planmagnet/controls/Pickers.tsx"],"sourcesContent":["import { useDeferredValue, useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useQuery } from '@apollo/client/react';\nimport { Input } from '@burdenoff/fe-libs/ui';\nimport { usePlanMagnet } from '../providers/PlanMagnetProvider';\n\n/**\n * Record pickers shared by forms and dialogs: a project select, and search-then-pick selects for work items and\n * docs. Values are record ids. Search runs on the server (never \"the first page, filtered in the browser\"), so a\n * record past the first page can still be found.\n */\n\nconst selectClass =\n  'w-full rounded-md border border-input bg-background px-3 py-2 text-sm disabled:opacity-60';\n\nconst PICKER_PROJECTS = gql`\n  query PickerProjects($workspaceId: ID!) {\n    planmagnetProjects(workspaceId: $workspaceId, pagination: { first: 100 }) {\n      items {\n        id\n        name\n      }\n      totalCount\n    }\n  }\n`;\n\n/** A project select. '' means \"no project\" when `noneLabel` is given. */\nexport function ProjectSelect({\n  id,\n  value,\n  onChange,\n  noneLabel,\n}: {\n  id?: string;\n  value: string;\n  onChange: (projectId: string) => void;\n  noneLabel?: string;\n}) {\n  const { workspaceId } = usePlanMagnet();\n  const { data, loading, error } = useQuery<{\n    planmagnetProjects: { items: { id: string; name: string }[]; totalCount: number };\n  }>(PICKER_PROJECTS, { variables: { workspaceId: workspaceId ?? '' }, skip: !workspaceId });\n  const projects = data?.planmagnetProjects.items ?? [];\n  return (\n    <select\n      id={id}\n      className={selectClass}\n      value={value}\n      onChange={(e) => onChange(e.target.value)}\n    >\n      {noneLabel !== undefined && <option value=\"\">{noneLabel}</option>}\n      {projects.length === 0 && noneLabel === undefined && (\n        <option value=\"\">\n          {loading && !data\n            ? 'Loading projects…'\n            : error\n              ? 'Projects could not be loaded'\n              : 'No projects yet'}\n        </option>\n      )}\n      {projects.map((p) => (\n        <option key={p.id} value={p.id}>\n          {p.name}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nconst PICKER_WORK_ITEMS = gql`\n  query PickerWorkItems($workspaceId: ID!, $filter: PlanmagnetWorkItemFilter) {\n    planmagnetWorkItems(workspaceId: $workspaceId, filter: $filter, pagination: { first: 20 }) {\n      items {\n        id\n        key\n        title\n      }\n      totalCount\n    }\n  }\n`;\n\n/**\n * Search, then pick one work item. The server matches the key, title and description. `exclude` hides items that are\n * already linked (the result says how many more exist, so an empty list never claims \"nothing left\" falsely).\n */\nexport function WorkItemSearchSelect({\n  id,\n  projectId,\n  value,\n  onChange,\n  exclude = [],\n}: {\n  id: string;\n  projectId?: string;\n  value: string;\n  onChange: (workItemId: string) => void;\n  exclude?: string[];\n}) {\n  const { workspaceId } = usePlanMagnet();\n  const [search, setSearch] = useState('');\n  const deferred = useDeferredValue(search.trim());\n  const { data, loading } = useQuery<{\n    planmagnetWorkItems: {\n      items: { id: string; key: string; title: string }[];\n      totalCount: number;\n    };\n  }>(PICKER_WORK_ITEMS, {\n    variables: {\n      workspaceId: workspaceId ?? '',\n      filter: { ...(deferred && { search: deferred }), ...(projectId && { projectId }) },\n    },\n    skip: !workspaceId,\n  });\n  const found = data?.planmagnetWorkItems.items ?? [];\n  const items = found.filter((w) => !exclude.includes(w.id));\n  const total = data?.planmagnetWorkItems.totalCount ?? 0;\n  return (\n    <div className=\"space-y-1\">\n      <Input\n        aria-label=\"Search work items\"\n        placeholder=\"Search by key or title\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n      />\n      <select\n        id={id}\n        className={selectClass}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      >\n        <option value=\"\">\n          {loading && !data ? 'Searching…' : items.length ? 'Choose a work item' : 'No match'}\n        </option>\n        {/* The current value stays selectable (and visible) when it is not in this page of results. */}\n        {value && !items.some((w) => w.id === value) && (\n          <option value={value}>Currently linked work item</option>\n        )}\n        {items.map((w) => (\n          <option key={w.id} value={w.id}>\n            {w.key} — {w.title}\n          </option>\n        ))}\n      </select>\n      {total > found.length && (\n        <p className=\"text-xs text-muted-foreground\">\n          Showing {found.length} of {total} — type to narrow the list.\n        </p>\n      )}\n    </div>\n  );\n}\n\nconst PICKER_DOCS = gql`\n  query PickerDocs($workspaceId: String, $filter: PlanmagnetDocFilter) {\n    planmagnetDocs(workspaceId: $workspaceId, filter: $filter, pagination: { first: 20 }) {\n      items {\n        id\n        title\n      }\n      totalCount\n    }\n  }\n`;\n\n/** Search, then pick one doc. */\nexport function DocSearchSelect({\n  id,\n  value,\n  onChange,\n  exclude = [],\n}: {\n  id: string;\n  value: string;\n  onChange: (docId: string) => void;\n  exclude?: string[];\n}) {\n  const { workspaceId } = usePlanMagnet();\n  const [search, setSearch] = useState('');\n  const deferred = useDeferredValue(search.trim());\n  const { data, loading } = useQuery<{\n    planmagnetDocs: { items: { id: string; title: string }[]; totalCount: number };\n  }>(PICKER_DOCS, {\n    variables: {\n      workspaceId: workspaceId ?? '',\n      filter: deferred ? { search: deferred } : undefined,\n    },\n    skip: !workspaceId,\n  });\n  const found = data?.planmagnetDocs.items ?? [];\n  const docs = found.filter((d) => !exclude.includes(d.id));\n  const total = data?.planmagnetDocs.totalCount ?? 0;\n  return (\n    <div className=\"space-y-1\">\n      <Input\n        aria-label=\"Search docs\"\n        placeholder=\"Search docs by title\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n      />\n      <select\n        id={id}\n        className={selectClass}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n      >\n        <option value=\"\">\n          {loading && !data ? 'Searching…' : docs.length ? 'Choose a doc' : 'No match'}\n        </option>\n        {docs.map((d) => (\n          <option key={d.id} value={d.id}>\n            {d.title}\n          </option>\n        ))}\n      </select>\n      {total > found.length && (\n        <p className=\"text-xs text-muted-foreground\">\n          Showing {found.length} of {total} — type to narrow the list.\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/planmagnet/controls/ProjectControls.js

@@ -1,8 +1,8 @@
 import { usePlanMagnetNavigate as e } from "../providers/PlanMagnetProvider.js";
 import { throwOnError as t } from "../utils/mutationResult.js";
-import { detailPath as n } from "../utils/rowNavigation.js";
-import { ConfirmButton as r, ErrorLine as i } from "./ConfirmButton.js";
-import { enumLabel as a } from "./WorkItemControls.js";
+import { ConfirmButton as n, ErrorLine as r } from "./ConfirmButton.js";
+import { enumLabel as i } from "./WorkItemControls.js";
+import { detailPath as a } from "../utils/rowNavigation.js";
 import { useState as o } from "react";
 import { Pencil as s, Trash2 as c } from "lucide-react";
 import { gql as l } from "@apollo/client";
@@ -73,17 +73,17 @@ function v({ projectId: l, name: v, status: y }) {
 					},
 					children: O.map((e) => /* @__PURE__ */ d("option", {
 						value: e,
-						children: a(e)
+						children: i(e)
 					}, e))
 				}),
 				/* @__PURE__ */ f(p, {
 					size: "sm",
 					variant: "outline",
 					"data-testid": "project-edit",
-					onClick: () => b(n("/projects/edit-project-page", l)),
+					onClick: () => b(a("/projects/edit-project-page", l)),
 					children: [/* @__PURE__ */ d(s, { className: "mr-1 h-4 w-4" }), "Edit"]
 				}),
-				/* @__PURE__ */ d(r, {
+				/* @__PURE__ */ d(n, {
 					label: "Delete",
 					variant: "outline",
 					icon: /* @__PURE__ */ d(c, { className: "mr-1 h-4 w-4" }),
@@ -95,7 +95,7 @@ function v({ projectId: l, name: v, status: y }) {
 					onConfirm: () => void A()
 				})
 			]
-		}), T && /* @__PURE__ */ d(i, { message: T })]
+		}), T && /* @__PURE__ */ d(r, { message: T })]
 	});
 }
 //#endregion

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

@@ -0,0 +1,14 @@
+/**
+ * Release controls (BOFF-7952). A release started in Planning and could never be released: status showed only as
+ * badges, the Edit Release page was linked from nowhere, and nothing deleted a release. The Quality Gates card even
+ * said the release "cannot be released until the gates pass" — with nothing to click once they had. The service
+ * refuses RELEASED while a gate is open; that reason is shown here.
+ */
+/** Every ReleaseStatus value (the Edit page's list omitted STAGING — BOFF-7985). */
+export declare const RELEASE_STATUSES: readonly ["DRAFT", "PLANNING", "IN_PROGRESS", "READY", "STAGING", "RELEASED", "ROLLED_BACK", "CANCELLED"];
+export declare function ReleaseHeaderActions({ releaseId, version, status, }: {
+    releaseId: string;
+    version: string;
+    status: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReleaseControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReleaseControls.d.ts","sourceRoot":"","sources":["../../../src/planmagnet/controls/ReleaseControls.tsx"],"names":[],"mappings":"AAWA;;;;;GAKG;AAEH,oFAAoF;AACpF,eAAO,MAAM,gBAAgB,2GASnB,CAAC;AA0BX,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,OAAO,EACP,MAAM,GACP,EAAE;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,2CA4EA"}