@burdenoff/microfe-workspaces 2026.830.1 → 2026.915.1

package/dist/components/InviteMemberDialog.js

@@ -1,227 +1,238 @@
-import { useWorkspacesStore as e } from "../store/workspacesStore.js";
-import { useCreateInvitation as t } from "../hooks/useMemberMutations.js";
-import { useWorkspaceRoles as n } from "../hooks/useWorkspaceRoles.js";
-import { useProjects as r } from "../hooks/useProjects.js";
-import { useState as i } from "react";
-import { AlertCircle as a } from "lucide-react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Badge as c, Button as l, Checkbox as u, ResponsiveDialog as d, ResponsiveDialogContent as f, ResponsiveDialogDescription as p, ResponsiveDialogHeader as m, ResponsiveDialogTitle as h, Tooltip as g, TooltipContent as _, TooltipProvider as v, TooltipTrigger as y } from "@burdenoff/fe-libs/ui";
-import { FormControl as b, FormDescription as x, FormField as S, FormItem as C, FormLabel as w, FormMessage as T, FormProvider as E, Input as D, useForm as O, z as k } from "@burdenoff/fe-libs/form";
+import { useTr as e } from "../hooks/useTr.js";
+import { useWorkspacesStore as t } from "../store/workspacesStore.js";
+import { useCreateInvitation as n } from "../hooks/useMemberMutations.js";
+import { useWorkspaceRoles as r } from "../hooks/useWorkspaceRoles.js";
+import { useProjects as i } from "../hooks/useProjects.js";
+import { useMemo as a, useState as o } from "react";
+import { AlertCircle as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Badge as u, Button as d, Checkbox as f, ResponsiveDialog as p, ResponsiveDialogContent as m, ResponsiveDialogDescription as h, ResponsiveDialogHeader as g, ResponsiveDialogTitle as _, Tooltip as v, TooltipContent as y, TooltipProvider as b, TooltipTrigger as x } from "@burdenoff/fe-libs/ui";
+import { FormControl as S, FormDescription as C, FormField as w, FormItem as T, FormLabel as E, FormMessage as D, FormProvider as O, Input as k, useForm as A, z as j } from "@burdenoff/fe-libs/form";
 //#region src/components/InviteMemberDialog.tsx
-var A = k.object({
-	email: k.string().email("Invalid email address"),
-	roleIds: k.array(k.string()),
-	projectIds: k.array(k.string())
-});
-function j({ workspaceId: k }) {
-	let { isInviteMemberDialogOpen: j, closeInviteMemberDialog: M } = e(), { mutate: N, isPending: P } = t(k), { data: F = [], isLoading: I } = n(k), { data: L, isLoading: R } = r({ archived: !1 }, { limit: 100 }, k), [z, B] = i(null), V = L?.items ?? [], H = O({
-		schema: A,
+function M(e) {
+	return j.object({
+		email: j.string().email(e("inviteMemberDialog.validation.emailInvalid", "Invalid email address")),
+		roleIds: j.array(j.string()),
+		projectIds: j.array(j.string())
+	});
+}
+function N({ workspaceId: j }) {
+	let N = e(), { isInviteMemberDialogOpen: P, closeInviteMemberDialog: F } = t(), { mutate: I, isPending: L } = n(j), { data: R = [], isLoading: z } = r(j), { data: B, isLoading: V } = i({ archived: !1 }, { limit: 100 }, j), [H, U] = o(null), W = B?.items ?? [], G = A({
+		schema: a(() => M(N), [N]),
 		defaultValues: {
 			email: "",
 			roleIds: [],
 			projectIds: []
 		}
-	}), U = (e) => {
-		if (B(null), !k) {
-			B("No workspace selected. Please select a workspace first.");
+	}), K = (e) => {
+		if (U(null), !j) {
+			U(N("inviteMemberDialog.noWorkspaceError", "No workspace selected. Please select a workspace first."));
 			return;
 		}
-		N({
+		I({
 			email: e.email,
 			roleIds: e.roleIds,
-			workspaceId: k,
+			workspaceId: j,
 			...e.projectIds.length > 0 ? { context: {
 				type: "workspace.invitation",
 				metadata: { projectIds: e.projectIds }
 			} } : {}
 		}, {
 			onSuccess: () => {
-				M(), H.reset(), B(null);
+				F(), G.reset(), U(null);
 			},
 			onError: (e) => {
-				let t = e instanceof Error ? e.message : "Failed to send invitation";
-				console.error("Failed to create invitation:", e), B(t);
+				let t = e instanceof Error ? e.message : N("inviteMemberDialog.sendError", "Failed to send invitation");
+				console.error("Failed to create invitation:", e), U(t);
 			}
 		});
-	}, W = (e) => {
-		e || (M(), H.reset(), B(null));
+	}, q = (e) => {
+		e || (F(), G.reset(), U(null));
 	};
-	return /* @__PURE__ */ o(d, {
-		open: j,
-		onOpenChange: W,
-		children: /* @__PURE__ */ s(f, {
+	return /* @__PURE__ */ c(p, {
+		open: P,
+		onOpenChange: q,
+		children: /* @__PURE__ */ l(m, {
 			className: "z-[120] flex h-[min(88vh,900px)] flex-col overflow-hidden sm:max-w-[960px] lg:max-w-[1120px]",
-			children: [/* @__PURE__ */ s(m, { children: [/* @__PURE__ */ o(h, { children: "Invite Member" }), /* @__PURE__ */ o(p, { children: "Invite a new member to this workspace by email. They'll receive an invitation link to join." })] }), /* @__PURE__ */ o(E, {
-				...H,
-				children: /* @__PURE__ */ s("form", {
-					onSubmit: H.handleSubmit(U),
+			children: [/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ c(_, { children: N("inviteMemberDialog.title", "Invite Member") }), /* @__PURE__ */ c(h, { children: N("inviteMemberDialog.description", "Invite a new member to this workspace by email. They'll receive an invitation link to join.") })] }), /* @__PURE__ */ c(O, {
+				...G,
+				children: /* @__PURE__ */ l("form", {
+					onSubmit: G.handleSubmit(K),
 					className: "flex min-h-0 flex-1 flex-col",
-					children: [/* @__PURE__ */ o("div", {
+					children: [/* @__PURE__ */ c("div", {
 						className: "min-h-0 flex-1 overflow-y-auto pr-2",
-						children: /* @__PURE__ */ s("div", {
+						children: /* @__PURE__ */ l("div", {
 							className: "space-y-5 pb-4 pr-2",
 							children: [
-								z && /* @__PURE__ */ s("div", {
+								H && /* @__PURE__ */ l("div", {
 									className: "flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text",
-									children: [/* @__PURE__ */ o(a, { className: "size-4 flex-shrink-0" }), /* @__PURE__ */ o("span", { children: z })]
+									children: [/* @__PURE__ */ c(s, { className: "size-4 flex-shrink-0" }), /* @__PURE__ */ c("span", { children: H })]
 								}),
-								/* @__PURE__ */ o(S, {
-									control: H.control,
+								/* @__PURE__ */ c(w, {
+									control: G.control,
 									name: "email",
-									render: ({ field: e }) => /* @__PURE__ */ s(C, { children: [
-										/* @__PURE__ */ o(w, { children: "Email Address *" }),
-										/* @__PURE__ */ o(b, { children: /* @__PURE__ */ o(D, {
+									render: ({ field: e }) => /* @__PURE__ */ l(T, { children: [
+										/* @__PURE__ */ c(E, { children: N("inviteMemberDialog.emailLabel", "Email Address *") }),
+										/* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(k, {
 											type: "email",
-											placeholder: "member@example.com",
+											placeholder: N("inviteMemberDialog.emailPlaceholder", "member@example.com"),
 											...e,
-											disabled: P,
+											disabled: L,
 											onChange: (t) => {
-												e.onChange(t), B(null);
+												e.onChange(t), U(null);
 											}
 										}) }),
-										/* @__PURE__ */ o(x, { children: "Enter the email address of the person you want to invite" }),
-										/* @__PURE__ */ o(T, {})
+										/* @__PURE__ */ c(C, { children: N("inviteMemberDialog.emailHint", "Enter the email address of the person you want to invite") }),
+										/* @__PURE__ */ c(D, {})
 									] })
 								}),
-								/* @__PURE__ */ o(S, {
-									control: H.control,
+								/* @__PURE__ */ c(w, {
+									control: G.control,
 									name: "roleIds",
-									render: ({ field: e }) => /* @__PURE__ */ s(C, { children: [
-										/* @__PURE__ */ s("div", {
+									render: ({ field: e }) => /* @__PURE__ */ l(T, { children: [
+										/* @__PURE__ */ l("div", {
 											className: "flex flex-wrap items-center justify-between gap-2",
-											children: [/* @__PURE__ */ s("div", {
+											children: [/* @__PURE__ */ l("div", {
 												className: "space-y-1",
-												children: [/* @__PURE__ */ o(w, { children: "Roles (Optional)" }), /* @__PURE__ */ o("p", {
+												children: [/* @__PURE__ */ c(E, { children: N("inviteMemberDialog.rolesLabel", "Roles (Optional)") }), /* @__PURE__ */ c("p", {
 													className: "text-sm text-text-secondary",
-													children: "Choose roles. Hover any role to preview its full description."
+													children: N("inviteMemberDialog.rolesHint", "Choose roles. Hover any role to preview its full description.")
 												})]
-											}), e.value.length > 0 ? /* @__PURE__ */ s(c, {
+											}), e.value.length > 0 ? /* @__PURE__ */ l(u, {
 												variant: "secondary",
-												children: [e.value.length, " selected"]
+												children: [
+													e.value.length,
+													" ",
+													N("inviteMemberDialog.selectedCount", "selected")
+												]
 											}) : null]
 										}),
-										/* @__PURE__ */ o(b, { children: /* @__PURE__ */ o(v, { children: /* @__PURE__ */ o("div", {
+										/* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(b, { children: /* @__PURE__ */ c("div", {
 											className: "grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3",
-											children: I ? /* @__PURE__ */ o("p", {
+											children: z ? /* @__PURE__ */ c("p", {
 												className: "text-sm text-text-secondary",
-												children: "Loading roles…"
-											}) : F.length === 0 ? /* @__PURE__ */ o("p", {
+												children: N("inviteMemberDialog.loadingRoles", "Loading roles…")
+											}) : R.length === 0 ? /* @__PURE__ */ c("p", {
 												className: "text-sm text-text-secondary",
-												children: "No assignable roles were returned for this workspace."
-											}) : F.map((t) => {
+												children: N("inviteMemberDialog.noRoles", "No assignable roles were returned for this workspace.")
+											}) : R.map((t) => {
 												let n = e.value.includes(t.id);
-												return /* @__PURE__ */ s(g, { children: [/* @__PURE__ */ o(y, {
+												return /* @__PURE__ */ l(v, { children: [/* @__PURE__ */ c(x, {
 													asChild: !0,
-													children: /* @__PURE__ */ s("label", {
+													children: /* @__PURE__ */ l("label", {
 														className: `flex cursor-pointer items-center justify-between gap-3 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)] focus-within:ring-offset-2 ${n ? "border-primary bg-action-primary-bg/10 text-text-primary shadow-sm" : "border-border-subtle bg-bg-surface text-text-primary hover:bg-accent"}`,
-														children: [/* @__PURE__ */ o("span", {
+														children: [/* @__PURE__ */ c("span", {
 															className: "min-w-0 flex-1 truncate",
 															children: t.name
-														}), /* @__PURE__ */ o(u, {
+														}), /* @__PURE__ */ c(f, {
 															checked: n,
-															disabled: P,
+															disabled: L,
 															onCheckedChange: (n) => {
 																let r = n ? [...e.value, t.id] : e.value.filter((e) => e !== t.id);
 																e.onChange(r);
 															},
-															"aria-label": `Select ${t.name}`
+															"aria-label": N("inviteMemberDialog.selectRoleAriaLabel", "Select {{roleName}}", { roleName: t.name })
 														})]
 													})
-												}), /* @__PURE__ */ s(_, {
+												}), /* @__PURE__ */ l(y, {
 													className: "max-w-xs text-sm leading-6",
 													children: [
-														/* @__PURE__ */ o("p", {
+														/* @__PURE__ */ c("p", {
 															className: "font-medium",
 															children: t.name
 														}),
-														/* @__PURE__ */ o("p", {
+														/* @__PURE__ */ c("p", {
 															className: "mt-1 text-text-secondary",
-															children: t.description || "No description available for this role."
+															children: t.description || N("inviteMemberDialog.noRoleDescription", "No description available for this role.")
 														}),
-														t.isSystem ? /* @__PURE__ */ o("p", {
+														t.isSystem ? /* @__PURE__ */ c("p", {
 															className: "mt-2 text-xs",
-															children: "System role"
+															children: N("inviteMemberDialog.systemRole", "System role")
 														}) : null
 													]
 												})] }, t.id);
 											})
 										}) }) }),
-										/* @__PURE__ */ o(T, {})
+										/* @__PURE__ */ c(D, {})
 									] })
 								}),
-								/* @__PURE__ */ o(S, {
-									control: H.control,
+								/* @__PURE__ */ c(w, {
+									control: G.control,
 									name: "projectIds",
-									render: ({ field: e }) => /* @__PURE__ */ s(C, { children: [
-										/* @__PURE__ */ s("div", {
+									render: ({ field: e }) => /* @__PURE__ */ l(T, { children: [
+										/* @__PURE__ */ l("div", {
 											className: "flex flex-wrap items-center justify-between gap-2",
-											children: [/* @__PURE__ */ s("div", {
+											children: [/* @__PURE__ */ l("div", {
 												className: "space-y-1",
-												children: [/* @__PURE__ */ o(w, { children: "Projects to add on acceptance (Optional)" }), /* @__PURE__ */ o("p", {
+												children: [/* @__PURE__ */ c(E, { children: N("inviteMemberDialog.projectsLabel", "Projects to add on acceptance (Optional)") }), /* @__PURE__ */ c("p", {
 													className: "text-sm text-text-secondary",
-													children: "The invited user will be added to these projects automatically after they accept the workspace invitation."
+													children: N("inviteMemberDialog.projectsHint", "The invited user will be added to these projects automatically after they accept the workspace invitation.")
 												})]
-											}), e.value.length > 0 ? /* @__PURE__ */ s(c, {
+											}), e.value.length > 0 ? /* @__PURE__ */ l(u, {
 												variant: "secondary",
-												children: [e.value.length, " selected"]
+												children: [
+													e.value.length,
+													" ",
+													N("inviteMemberDialog.selectedCount", "selected")
+												]
 											}) : null]
 										}),
-										/* @__PURE__ */ o(b, { children: /* @__PURE__ */ o("div", {
+										/* @__PURE__ */ c(S, { children: /* @__PURE__ */ c("div", {
 											className: "grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3",
-											children: R ? /* @__PURE__ */ o("p", {
+											children: V ? /* @__PURE__ */ c("p", {
 												className: "text-sm text-text-secondary",
-												children: "Loading projects…"
-											}) : V.length === 0 ? /* @__PURE__ */ o("p", {
+												children: N("inviteMemberDialog.loadingProjects", "Loading projects…")
+											}) : W.length === 0 ? /* @__PURE__ */ c("p", {
 												className: "text-sm text-text-secondary",
-												children: "No active projects are available in this workspace yet."
-											}) : V.map((t) => {
+												children: N("inviteMemberDialog.noProjects", "No active projects are available in this workspace yet.")
+											}) : W.map((t) => {
 												let n = e.value.includes(t.id);
-												return /* @__PURE__ */ s("label", {
+												return /* @__PURE__ */ l("label", {
 													className: `flex cursor-pointer items-start justify-between gap-3 rounded-lg border px-3 py-3 transition-colors focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)] focus-within:ring-offset-2 ${n ? "border-primary bg-action-primary-bg/10 text-text-primary shadow-sm" : "border-border-subtle bg-bg-surface text-text-primary hover:bg-accent"}`,
-													children: [/* @__PURE__ */ s("div", {
+													children: [/* @__PURE__ */ l("div", {
 														className: "min-w-0 flex-1 space-y-1",
-														children: [/* @__PURE__ */ o("p", {
+														children: [/* @__PURE__ */ c("p", {
 															className: "truncate text-sm font-semibold leading-tight",
 															children: t.name
-														}), /* @__PURE__ */ s("div", {
+														}), /* @__PURE__ */ l("div", {
 															className: "flex items-center gap-2 text-xs text-text-secondary",
-															children: [/* @__PURE__ */ o("span", {
+															children: [/* @__PURE__ */ c("span", {
 																className: "truncate font-mono",
 																children: t.key
-															}), /* @__PURE__ */ o(c, {
+															}), /* @__PURE__ */ c(u, {
 																variant: "outline",
 																children: t.status
 															})]
 														})]
-													}), /* @__PURE__ */ o(u, {
+													}), /* @__PURE__ */ c(f, {
 														checked: n,
-														disabled: P,
+														disabled: L,
 														onCheckedChange: (n) => {
 															let r = n ? [...e.value, t.id] : e.value.filter((e) => e !== t.id);
 															e.onChange(r);
 														},
-														"aria-label": `Select ${t.name}`
+														"aria-label": N("inviteMemberDialog.selectProjectAriaLabel", "Select {{projectName}}", { projectName: t.name })
 													})]
 												}, t.id);
 											})
 										}) }),
-										/* @__PURE__ */ o(T, {})
+										/* @__PURE__ */ c(D, {})
 									] })
 								})
 							]
 						})
-					}), /* @__PURE__ */ s("div", {
+					}), /* @__PURE__ */ l("div", {
 						className: "flex justify-end gap-3 border-t pt-4",
-						children: [/* @__PURE__ */ o(l, {
+						children: [/* @__PURE__ */ c(d, {
 							type: "button",
 							variant: "outline",
-							onClick: () => W(!1),
-							disabled: P,
-							children: "Cancel"
-						}), /* @__PURE__ */ o(l, {
+							onClick: () => q(!1),
+							disabled: L,
+							children: N("common.cancel", "Cancel")
+						}), /* @__PURE__ */ c(d, {
 							type: "submit",
-							disabled: P,
-							children: P ? "Sending..." : "Send Invitation"
+							disabled: L,
+							children: L ? N("inviteMemberDialog.sending", "Sending...") : N("inviteMemberDialog.submit", "Send Invitation")
 						})]
 					})]
 				})
@@ -230,6 +241,6 @@ function j({ workspaceId: k }) {
 	});
 }
 //#endregion
-export { j as InviteMemberDialog };
+export { N as InviteMemberDialog };
 
 //# sourceMappingURL=InviteMemberDialog.js.map

package/dist/components/InviteMemberDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteMemberDialog.js","names":[],"sources":["../../src/components/InviteMemberDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AlertCircle } from 'lucide-react';\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  Button,\n  Badge,\n  Checkbox,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormDescription,\n  Input,\n  useForm,\n  FormProvider,\n  z,\n} from '@burdenoff/fe-libs/form';\nimport { useWorkspacesStore } from '../store/workspacesStore';\nimport { useCreateInvitation } from '../hooks/useMemberMutations';\nimport { useProjects } from '../hooks/useProjects';\nimport { useWorkspaceRoles } from '../hooks/useWorkspaceRoles';\n\nconst inviteMemberSchema = z.object({\n  email: z.string().email('Invalid email address'),\n  // Using a lambda default instead of `.default([])` to keep input type required\n  // (zod v4 widens defaulted inputs to `T | undefined`, which breaks useForm typing).\n  roleIds: z.array(z.string()),\n  projectIds: z.array(z.string()),\n});\n\ntype InviteMemberFormData = z.infer<typeof inviteMemberSchema>;\n\ninterface InviteMemberDialogProps {\n  /** Workspace ID to invite the member to (from URL params) */\n  workspaceId?: string;\n}\n\nexport function InviteMemberDialog({ workspaceId }: InviteMemberDialogProps) {\n  const { isInviteMemberDialogOpen, closeInviteMemberDialog } = useWorkspacesStore();\n  const { mutate: createInvitation, isPending } = useCreateInvitation(workspaceId);\n  const { data: availableRoles = [], isLoading: isLoadingRoles } = useWorkspaceRoles(workspaceId);\n  const { data: projectList, isLoading: isLoadingProjects } = useProjects(\n    { archived: false },\n    { limit: 100 },\n    workspaceId\n  );\n  const [error, setError] = useState<string | null>(null);\n  const availableProjects = projectList?.items ?? [];\n\n  const form = useForm<InviteMemberFormData>({\n    schema: inviteMemberSchema,\n    defaultValues: {\n      email: '',\n      roleIds: [],\n      projectIds: [],\n    },\n  });\n\n  const onSubmit = (data: InviteMemberFormData) => {\n    setError(null);\n\n    if (!workspaceId) {\n      setError('No workspace selected. Please select a workspace first.');\n      return;\n    }\n\n    createInvitation(\n      {\n        email: data.email,\n        roleIds: data.roleIds,\n        workspaceId,\n        ...(data.projectIds.length > 0\n          ? {\n              context: {\n                type: 'workspace.invitation',\n                metadata: { projectIds: data.projectIds },\n              },\n            }\n          : {}),\n      },\n      {\n        onSuccess: () => {\n          closeInviteMemberDialog();\n          form.reset();\n          setError(null);\n        },\n        onError: (err) => {\n          const errorMessage = err instanceof Error ? err.message : 'Failed to send invitation';\n          console.error('Failed to create invitation:', err);\n          setError(errorMessage);\n        },\n      }\n    );\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    if (!open) {\n      closeInviteMemberDialog();\n      form.reset();\n      setError(null);\n    }\n  };\n\n  return (\n    <ResponsiveDialog open={isInviteMemberDialogOpen} onOpenChange={handleOpenChange}>\n      <ResponsiveDialogContent className=\"z-[120] flex h-[min(88vh,900px)] flex-col overflow-hidden sm:max-w-[960px] lg:max-w-[1120px]\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>Invite Member</ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            Invite a new member to this workspace by email. They'll receive an invitation link to\n            join.\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n\n        <FormProvider {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex min-h-0 flex-1 flex-col\">\n            <div className=\"min-h-0 flex-1 overflow-y-auto pr-2\">\n              <div className=\"space-y-5 pb-4 pr-2\">\n                {error && (\n                  <div className=\"flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text\">\n                    <AlertCircle className=\"size-4 flex-shrink-0\" />\n                    <span>{error}</span>\n                  </div>\n                )}\n\n                <FormField\n                  control={form.control}\n                  name=\"email\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>Email Address *</FormLabel>\n                      <FormControl>\n                        <Input\n                          type=\"email\"\n                          placeholder=\"member@example.com\"\n                          {...field}\n                          disabled={isPending}\n                          onChange={(e) => {\n                            field.onChange(e);\n                            setError(null);\n                          }}\n                        />\n                      </FormControl>\n                      <FormDescription>\n                        Enter the email address of the person you want to invite\n                      </FormDescription>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n\n                <FormField\n                  control={form.control}\n                  name=\"roleIds\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                        <div className=\"space-y-1\">\n                          <FormLabel>Roles (Optional)</FormLabel>\n                          <p className=\"text-sm text-text-secondary\">\n                            Choose roles. Hover any role to preview its full description.\n                          </p>\n                        </div>\n                        {field.value.length > 0 ? (\n                          <Badge variant=\"secondary\">{field.value.length} selected</Badge>\n                        ) : null}\n                      </div>\n                      <FormControl>\n                        <TooltipProvider>\n                          <div className=\"grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3\">\n                            {isLoadingRoles ? (\n                              <p className=\"text-sm text-text-secondary\">Loading roles…</p>\n                            ) : availableRoles.length === 0 ? (\n                              <p className=\"text-sm text-text-secondary\">\n                                No assignable roles were returned for this workspace.\n                              </p>\n                            ) : (\n                              availableRoles.map((role) => {\n                                const isSelected = field.value.includes(role.id);\n                                return (\n                                  <Tooltip key={role.id}>\n                                    <TooltipTrigger asChild>\n                                      <label\n                                        className={`flex cursor-pointer items-center justify-between gap-3 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)] focus-within:ring-offset-2 ${\n                                          isSelected\n                                            ? 'border-primary bg-action-primary-bg/10 text-text-primary shadow-sm'\n                                            : 'border-border-subtle bg-bg-surface text-text-primary hover:bg-accent'\n                                        }`}\n                                      >\n                                        <span className=\"min-w-0 flex-1 truncate\">{role.name}</span>\n                                        <Checkbox\n                                          checked={isSelected}\n                                          disabled={isPending}\n                                          onCheckedChange={(checked) => {\n                                            const nextValue = checked\n                                              ? [...field.value, role.id]\n                                              : field.value.filter((id) => id !== role.id);\n                                            field.onChange(nextValue);\n                                          }}\n                                          aria-label={`Select ${role.name}`}\n                                        />\n                                      </label>\n                                    </TooltipTrigger>\n                                    <TooltipContent className=\"max-w-xs text-sm leading-6\">\n                                      <p className=\"font-medium\">{role.name}</p>\n                                      <p className=\"mt-1 text-text-secondary\">\n                                        {role.description ||\n                                          'No description available for this role.'}\n                                      </p>\n                                      {role.isSystem ? (\n                                        <p className=\"mt-2 text-xs\">System role</p>\n                                      ) : null}\n                                    </TooltipContent>\n                                  </Tooltip>\n                                );\n                              })\n                            )}\n                          </div>\n                        </TooltipProvider>\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n\n                <FormField\n                  control={form.control}\n                  name=\"projectIds\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                        <div className=\"space-y-1\">\n                          <FormLabel>Projects to add on acceptance (Optional)</FormLabel>\n                          <p className=\"text-sm text-text-secondary\">\n                            The invited user will be added to these projects automatically after\n                            they accept the workspace invitation.\n                          </p>\n                        </div>\n                        {field.value.length > 0 ? (\n                          <Badge variant=\"secondary\">{field.value.length} selected</Badge>\n                        ) : null}\n                      </div>\n                      <FormControl>\n                        <div className=\"grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3\">\n                          {isLoadingProjects ? (\n                            <p className=\"text-sm text-text-secondary\">Loading projects…</p>\n                          ) : availableProjects.length === 0 ? (\n                            <p className=\"text-sm text-text-secondary\">\n                              No active projects are available in this workspace yet.\n                            </p>\n                          ) : (\n                            availableProjects.map((project) => {\n                              const isSelected = field.value.includes(project.id);\n\n                              return (\n                                <label\n                                  key={project.id}\n                                  className={`flex cursor-pointer items-start justify-between gap-3 rounded-lg border px-3 py-3 transition-colors focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)] focus-within:ring-offset-2 ${\n                                    isSelected\n                                      ? 'border-primary bg-action-primary-bg/10 text-text-primary shadow-sm'\n                                      : 'border-border-subtle bg-bg-surface text-text-primary hover:bg-accent'\n                                  }`}\n                                >\n                                  <div className=\"min-w-0 flex-1 space-y-1\">\n                                    <p className=\"truncate text-sm font-semibold leading-tight\">\n                                      {project.name}\n                                    </p>\n                                    <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n                                      <span className=\"truncate font-mono\">{project.key}</span>\n                                      <Badge variant=\"outline\">{project.status}</Badge>\n                                    </div>\n                                  </div>\n                                  <Checkbox\n                                    checked={isSelected}\n                                    disabled={isPending}\n                                    onCheckedChange={(checked) => {\n                                      const nextValue = checked\n                                        ? [...field.value, project.id]\n                                        : field.value.filter((id) => id !== project.id);\n                                      field.onChange(nextValue);\n                                    }}\n                                    aria-label={`Select ${project.name}`}\n                                  />\n                                </label>\n                              );\n                            })\n                          )}\n                        </div>\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n            </div>\n\n            <div className=\"flex justify-end gap-3 border-t pt-4\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={() => handleOpenChange(false)}\n                disabled={isPending}\n              >\n                Cancel\n              </Button>\n              <Button type=\"submit\" disabled={isPending}>\n                {isPending ? 'Sending...' : 'Send Invitation'}\n              </Button>\n            </div>\n          </form>\n        </FormProvider>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"InviteMemberDialog.js","names":[],"sources":["../../src/components/InviteMemberDialog.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { AlertCircle } from 'lucide-react';\nimport { useTr } from '../hooks/useTr';\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  Button,\n  Badge,\n  Checkbox,\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormDescription,\n  Input,\n  useForm,\n  FormProvider,\n  z,\n} from '@burdenoff/fe-libs/form';\nimport { useWorkspacesStore } from '../store/workspacesStore';\nimport { useCreateInvitation } from '../hooks/useMemberMutations';\nimport { useProjects } from '../hooks/useProjects';\nimport { useWorkspaceRoles } from '../hooks/useWorkspaceRoles';\n\nfunction inviteMemberSchema(tr: ReturnType<typeof useTr>) {\n  return z.object({\n    email: z\n      .string()\n      .email(tr('inviteMemberDialog.validation.emailInvalid', 'Invalid email address')),\n    // Using a lambda default instead of `.default([])` to keep input type required\n    // (zod v4 widens defaulted inputs to `T | undefined`, which breaks useForm typing).\n    roleIds: z.array(z.string()),\n    projectIds: z.array(z.string()),\n  });\n}\n\ntype InviteMemberFormData = z.infer<ReturnType<typeof inviteMemberSchema>>;\n\ninterface InviteMemberDialogProps {\n  /** Workspace ID to invite the member to (from URL params) */\n  workspaceId?: string;\n}\n\nexport function InviteMemberDialog({ workspaceId }: InviteMemberDialogProps) {\n  const tr = useTr();\n  const { isInviteMemberDialogOpen, closeInviteMemberDialog } = useWorkspacesStore();\n  const { mutate: createInvitation, isPending } = useCreateInvitation(workspaceId);\n  const { data: availableRoles = [], isLoading: isLoadingRoles } = useWorkspaceRoles(workspaceId);\n  const { data: projectList, isLoading: isLoadingProjects } = useProjects(\n    { archived: false },\n    { limit: 100 },\n    workspaceId\n  );\n  const [error, setError] = useState<string | null>(null);\n  const availableProjects = projectList?.items ?? [];\n\n  const schema = useMemo(() => inviteMemberSchema(tr), [tr]);\n\n  const form = useForm<InviteMemberFormData>({\n    schema,\n    defaultValues: {\n      email: '',\n      roleIds: [],\n      projectIds: [],\n    },\n  });\n\n  const onSubmit = (data: InviteMemberFormData) => {\n    setError(null);\n\n    if (!workspaceId) {\n      setError(\n        tr(\n          'inviteMemberDialog.noWorkspaceError',\n          'No workspace selected. Please select a workspace first.'\n        )\n      );\n      return;\n    }\n\n    createInvitation(\n      {\n        email: data.email,\n        roleIds: data.roleIds,\n        workspaceId,\n        ...(data.projectIds.length > 0\n          ? {\n              context: {\n                type: 'workspace.invitation',\n                metadata: { projectIds: data.projectIds },\n              },\n            }\n          : {}),\n      },\n      {\n        onSuccess: () => {\n          closeInviteMemberDialog();\n          form.reset();\n          setError(null);\n        },\n        onError: (err) => {\n          const errorMessage =\n            err instanceof Error\n              ? err.message\n              : tr('inviteMemberDialog.sendError', 'Failed to send invitation');\n          console.error('Failed to create invitation:', err);\n          setError(errorMessage);\n        },\n      }\n    );\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    if (!open) {\n      closeInviteMemberDialog();\n      form.reset();\n      setError(null);\n    }\n  };\n\n  return (\n    <ResponsiveDialog open={isInviteMemberDialogOpen} onOpenChange={handleOpenChange}>\n      <ResponsiveDialogContent className=\"z-[120] flex h-[min(88vh,900px)] flex-col overflow-hidden sm:max-w-[960px] lg:max-w-[1120px]\">\n        <ResponsiveDialogHeader>\n          <ResponsiveDialogTitle>\n            {tr('inviteMemberDialog.title', 'Invite Member')}\n          </ResponsiveDialogTitle>\n          <ResponsiveDialogDescription>\n            {tr(\n              'inviteMemberDialog.description',\n              \"Invite a new member to this workspace by email. They'll receive an invitation link to join.\"\n            )}\n          </ResponsiveDialogDescription>\n        </ResponsiveDialogHeader>\n\n        <FormProvider {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex min-h-0 flex-1 flex-col\">\n            <div className=\"min-h-0 flex-1 overflow-y-auto pr-2\">\n              <div className=\"space-y-5 pb-4 pr-2\">\n                {error && (\n                  <div className=\"flex items-center gap-2 rounded-md border border-status-error-border/20 bg-status-error-bg/10 p-3 text-sm text-status-error-text\">\n                    <AlertCircle className=\"size-4 flex-shrink-0\" />\n                    <span>{error}</span>\n                  </div>\n                )}\n\n                <FormField\n                  control={form.control}\n                  name=\"email\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <FormLabel>\n                        {tr('inviteMemberDialog.emailLabel', 'Email Address *')}\n                      </FormLabel>\n                      <FormControl>\n                        <Input\n                          type=\"email\"\n                          placeholder={tr(\n                            'inviteMemberDialog.emailPlaceholder',\n                            'member@example.com'\n                          )}\n                          {...field}\n                          disabled={isPending}\n                          onChange={(e) => {\n                            field.onChange(e);\n                            setError(null);\n                          }}\n                        />\n                      </FormControl>\n                      <FormDescription>\n                        {tr(\n                          'inviteMemberDialog.emailHint',\n                          'Enter the email address of the person you want to invite'\n                        )}\n                      </FormDescription>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n\n                <FormField\n                  control={form.control}\n                  name=\"roleIds\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                        <div className=\"space-y-1\">\n                          <FormLabel>\n                            {tr('inviteMemberDialog.rolesLabel', 'Roles (Optional)')}\n                          </FormLabel>\n                          <p className=\"text-sm text-text-secondary\">\n                            {tr(\n                              'inviteMemberDialog.rolesHint',\n                              'Choose roles. Hover any role to preview its full description.'\n                            )}\n                          </p>\n                        </div>\n                        {field.value.length > 0 ? (\n                          <Badge variant=\"secondary\">\n                            {field.value.length}{' '}\n                            {tr('inviteMemberDialog.selectedCount', 'selected')}\n                          </Badge>\n                        ) : null}\n                      </div>\n                      <FormControl>\n                        <TooltipProvider>\n                          <div className=\"grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3\">\n                            {isLoadingRoles ? (\n                              <p className=\"text-sm text-text-secondary\">\n                                {tr('inviteMemberDialog.loadingRoles', 'Loading roles…')}\n                              </p>\n                            ) : availableRoles.length === 0 ? (\n                              <p className=\"text-sm text-text-secondary\">\n                                {tr(\n                                  'inviteMemberDialog.noRoles',\n                                  'No assignable roles were returned for this workspace.'\n                                )}\n                              </p>\n                            ) : (\n                              availableRoles.map((role) => {\n                                const isSelected = field.value.includes(role.id);\n                                return (\n                                  <Tooltip key={role.id}>\n                                    <TooltipTrigger asChild>\n                                      <label\n                                        className={`flex cursor-pointer items-center justify-between gap-3 rounded-lg border px-3 py-3 text-left text-sm font-medium transition-colors focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)] focus-within:ring-offset-2 ${\n                                          isSelected\n                                            ? 'border-primary bg-action-primary-bg/10 text-text-primary shadow-sm'\n                                            : 'border-border-subtle bg-bg-surface text-text-primary hover:bg-accent'\n                                        }`}\n                                      >\n                                        <span className=\"min-w-0 flex-1 truncate\">{role.name}</span>\n                                        <Checkbox\n                                          checked={isSelected}\n                                          disabled={isPending}\n                                          onCheckedChange={(checked) => {\n                                            const nextValue = checked\n                                              ? [...field.value, role.id]\n                                              : field.value.filter((id) => id !== role.id);\n                                            field.onChange(nextValue);\n                                          }}\n                                          aria-label={tr(\n                                            'inviteMemberDialog.selectRoleAriaLabel',\n                                            'Select {{roleName}}',\n                                            { roleName: role.name }\n                                          )}\n                                        />\n                                      </label>\n                                    </TooltipTrigger>\n                                    <TooltipContent className=\"max-w-xs text-sm leading-6\">\n                                      <p className=\"font-medium\">{role.name}</p>\n                                      <p className=\"mt-1 text-text-secondary\">\n                                        {role.description ||\n                                          tr(\n                                            'inviteMemberDialog.noRoleDescription',\n                                            'No description available for this role.'\n                                          )}\n                                      </p>\n                                      {role.isSystem ? (\n                                        <p className=\"mt-2 text-xs\">\n                                          {tr('inviteMemberDialog.systemRole', 'System role')}\n                                        </p>\n                                      ) : null}\n                                    </TooltipContent>\n                                  </Tooltip>\n                                );\n                              })\n                            )}\n                          </div>\n                        </TooltipProvider>\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n\n                <FormField\n                  control={form.control}\n                  name=\"projectIds\"\n                  render={({ field }) => (\n                    <FormItem>\n                      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                        <div className=\"space-y-1\">\n                          <FormLabel>\n                            {tr(\n                              'inviteMemberDialog.projectsLabel',\n                              'Projects to add on acceptance (Optional)'\n                            )}\n                          </FormLabel>\n                          <p className=\"text-sm text-text-secondary\">\n                            {tr(\n                              'inviteMemberDialog.projectsHint',\n                              'The invited user will be added to these projects automatically after they accept the workspace invitation.'\n                            )}\n                          </p>\n                        </div>\n                        {field.value.length > 0 ? (\n                          <Badge variant=\"secondary\">\n                            {field.value.length}{' '}\n                            {tr('inviteMemberDialog.selectedCount', 'selected')}\n                          </Badge>\n                        ) : null}\n                      </div>\n                      <FormControl>\n                        <div className=\"grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3\">\n                          {isLoadingProjects ? (\n                            <p className=\"text-sm text-text-secondary\">\n                              {tr('inviteMemberDialog.loadingProjects', 'Loading projects…')}\n                            </p>\n                          ) : availableProjects.length === 0 ? (\n                            <p className=\"text-sm text-text-secondary\">\n                              {tr(\n                                'inviteMemberDialog.noProjects',\n                                'No active projects are available in this workspace yet.'\n                              )}\n                            </p>\n                          ) : (\n                            availableProjects.map((project) => {\n                              const isSelected = field.value.includes(project.id);\n\n                              return (\n                                <label\n                                  key={project.id}\n                                  className={`flex cursor-pointer items-start justify-between gap-3 rounded-lg border px-3 py-3 transition-colors focus-within:ring-2 focus-within:ring-[var(--color-focus-ring)] focus-within:ring-offset-2 ${\n                                    isSelected\n                                      ? 'border-primary bg-action-primary-bg/10 text-text-primary shadow-sm'\n                                      : 'border-border-subtle bg-bg-surface text-text-primary hover:bg-accent'\n                                  }`}\n                                >\n                                  <div className=\"min-w-0 flex-1 space-y-1\">\n                                    <p className=\"truncate text-sm font-semibold leading-tight\">\n                                      {project.name}\n                                    </p>\n                                    <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n                                      <span className=\"truncate font-mono\">{project.key}</span>\n                                      <Badge variant=\"outline\">{project.status}</Badge>\n                                    </div>\n                                  </div>\n                                  <Checkbox\n                                    checked={isSelected}\n                                    disabled={isPending}\n                                    onCheckedChange={(checked) => {\n                                      const nextValue = checked\n                                        ? [...field.value, project.id]\n                                        : field.value.filter((id) => id !== project.id);\n                                      field.onChange(nextValue);\n                                    }}\n                                    aria-label={tr(\n                                      'inviteMemberDialog.selectProjectAriaLabel',\n                                      'Select {{projectName}}',\n                                      { projectName: project.name }\n                                    )}\n                                  />\n                                </label>\n                              );\n                            })\n                          )}\n                        </div>\n                      </FormControl>\n                      <FormMessage />\n                    </FormItem>\n                  )}\n                />\n              </div>\n            </div>\n\n            <div className=\"flex justify-end gap-3 border-t pt-4\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={() => handleOpenChange(false)}\n                disabled={isPending}\n              >\n                {tr('common.cancel', 'Cancel')}\n              </Button>\n              <Button type=\"submit\" disabled={isPending}>\n                {isPending\n                  ? tr('inviteMemberDialog.sending', 'Sending...')\n                  : tr('inviteMemberDialog.submit', 'Send Invitation')}\n              </Button>\n            </div>\n          </form>\n        </FormProvider>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n"],"mappings":"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"}