@burdenoff/microfe-auth 2026.830.1 → 2026.904.1

package/dist/auth/components/workspace/WorkspaceSelector.js

@@ -1,18 +1,15 @@
-import { useEffect as e, useId as t, useMemo as n, useState as r } from "react";
-import { useI18n as i } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useTr as e } from "../../../shared/hooks/useTr.js";
+import { useEffect as t, useId as n, useMemo as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/auth/components/workspace/WorkspaceSelector.tsx
 var s = [];
 function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f, isLoading: p = !1, error: m = null }) {
-	let { t: h } = i(), g = (e, t) => {
-		let n = h(e);
-		return n === e ? t : n;
-	}, _ = t(), v = t(), y = t(), [b, x] = r(null), [S, C] = r(null), [w, T] = r(null), E = n(() => {
+	let h = e(), g = n(), _ = n(), v = n(), [y, b] = i(null), [x, S] = i(null), [C, w] = i(null), T = r(() => {
 		let e = /* @__PURE__ */ new Map();
 		return u.forEach((t) => {
 			let n = t.organizationId || "default";
 			e.has(n) || e.set(n, {
-				name: n === "default" ? "Default" : `Organization ${n.slice(0, 8)}`,
+				name: n === "default" ? h("auth.workspaceSelector.defaultOrg", "Default") : `${h("auth.workspaceSelector.organizationPrefix", "Organization")} ${n.slice(0, 8)}`,
 				count: 0
 			}), e.get(n).count++;
 		}), Array.from(e.entries()).map(([e, { name: t, count: n }]) => ({
@@ -20,28 +17,28 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 			name: t,
 			workspaceCount: n
 		}));
-	}, [u]), D = n(() => b ? u.filter((e) => (e.organizationId || "default") === b) : u, [u, b]), O = n(() => S ? d.filter((e) => e.workspaceId === S) : [], [d, S]), k = n(() => u.find((e) => e.id === S), [u, S]), A = n(() => d.find((e) => e.id === w), [d, w]);
-	e(() => {
-		E.length === 1 && !b && x(E[0].id);
-	}, [E, b]), e(() => {
-		D.length === 1 && !S && C(D[0].id);
-	}, [D, S]);
-	let j = (e) => {
-		x(e), C(null), T(null);
+	}, [u, h]), E = r(() => y ? u.filter((e) => (e.organizationId || "default") === y) : u, [u, y]), D = r(() => x ? d.filter((e) => e.workspaceId === x) : [], [d, x]), O = r(() => u.find((e) => e.id === x), [u, x]), k = r(() => d.find((e) => e.id === C), [d, C]);
+	t(() => {
+		T.length === 1 && !y && b(T[0].id);
+	}, [T, y]), t(() => {
+		E.length === 1 && !x && S(E[0].id);
+	}, [E, x]);
+	let A = (e) => {
+		b(e), S(null), w(null);
+	}, j = (e) => {
+		S(e), w(null);
 	}, M = (e) => {
-		C(e), T(null);
-	}, N = (e) => {
-		T(e);
+		w(e);
+	}, N = () => {
+		O && f(O, k);
 	}, P = () => {
-		k && f(k, A);
-	}, F = () => {
-		x(null), C(null), T(null), l();
-	}, I = S !== null;
+		b(null), S(null), w(null), l();
+	}, F = x !== null;
 	return c ? /* @__PURE__ */ o("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center",
 		children: [/* @__PURE__ */ a("div", {
 			className: "absolute inset-0 bg-black/50",
-			onClick: F,
+			onClick: P,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ o("div", {
 			className: "relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6",
@@ -50,26 +47,26 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 					className: "space-y-2",
 					children: [/* @__PURE__ */ a("h2", {
 						className: "text-2xl font-semibold text-text-primary",
-						children: g("auth.workspaceSelector.title", "Select Your Workspace")
+						children: h("auth.workspaceSelector.title", "Select Your Workspace")
 					}), /* @__PURE__ */ a("p", {
 						className: "text-sm text-text-secondary",
-						children: g("auth.workspaceSelector.subtitle", "Choose the workspace you want to work in. You can switch workspaces later from the header.")
+						children: h("auth.workspaceSelector.subtitle", "Choose the workspace you want to work in. You can switch workspaces later from the header.")
 					})]
 				}),
 				m && /* @__PURE__ */ o("div", {
 					className: "rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text",
 					children: [/* @__PURE__ */ a("p", {
 						className: "font-medium",
-						children: g("auth.workspaceSelector.error", "Error")
+						children: h("auth.workspaceSelector.error", "Error")
 					}), /* @__PURE__ */ a("p", { children: m })]
 				}),
 				/* @__PURE__ */ o("div", {
 					className: "space-y-4",
 					children: [
-						E.length > 1 && /* @__PURE__ */ o("div", {
+						T.length > 1 && /* @__PURE__ */ o("div", {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ a("label", {
-								htmlFor: _,
+								htmlFor: g,
 								className: "block text-sm font-medium text-text-secondary",
 								children: /* @__PURE__ */ o("span", {
 									className: "flex items-center gap-2",
@@ -85,33 +82,30 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 											strokeWidth: 2,
 											d: "M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
 										})
-									}), "Organization"]
+									}), h("auth.workspaceSelector.organization", "Organization")]
 								})
 							}), /* @__PURE__ */ o("select", {
-								id: _,
-								value: b || "",
-								onChange: (e) => j(e.target.value),
+								id: g,
+								value: y || "",
+								onChange: (e) => A(e.target.value),
 								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20",
 								children: [/* @__PURE__ */ a("option", {
 									value: "",
-									children: g("auth.workspaceSelector.selectOrg", "Select organization...")
-								}), E.map((e) => /* @__PURE__ */ o("option", {
+									children: h("auth.workspaceSelector.selectOrg", "Select organization...")
+								}), T.map((e) => /* @__PURE__ */ a("option", {
 									value: e.id,
-									children: [
-										e.name,
-										" (",
-										e.workspaceCount,
-										" workspace",
-										e.workspaceCount === 1 ? "" : "s",
-										")"
-									]
+									children: h("auth.workspaceSelector.orgOption", "{{name}} ({{count}} workspace{{plural}})", {
+										name: e.name,
+										count: e.workspaceCount,
+										plural: e.workspaceCount === 1 ? "" : "s"
+									})
 								}, e.id))]
 							})]
 						}),
 						/* @__PURE__ */ o("div", {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ a("label", {
-								htmlFor: v,
+								htmlFor: _,
 								className: "block text-sm font-medium text-text-secondary",
 								children: /* @__PURE__ */ o("span", {
 									className: "flex items-center gap-2",
@@ -127,18 +121,18 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 											strokeWidth: 2,
 											d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
 										})
-									}), "Workspace"]
+									}), h("auth.workspaceSelector.workspace", "Workspace")]
 								})
 							}), /* @__PURE__ */ o("select", {
-								id: v,
-								value: S || "",
-								onChange: (e) => M(e.target.value),
-								disabled: !b && E.length > 1,
+								id: _,
+								value: x || "",
+								onChange: (e) => j(e.target.value),
+								disabled: !y && T.length > 1,
 								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed",
 								children: [/* @__PURE__ */ a("option", {
 									value: "",
-									children: g("auth.workspaceSelector.selectWorkspace", "Select workspace...")
-								}), D.map((e) => /* @__PURE__ */ o("option", {
+									children: h("auth.workspaceSelector.selectWorkspace", "Select workspace...")
+								}), E.map((e) => /* @__PURE__ */ o("option", {
 									value: e.id,
 									children: [
 										e.name,
@@ -149,10 +143,10 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 								}, e.id))]
 							})]
 						}),
-						O.length > 0 && /* @__PURE__ */ o("div", {
+						D.length > 0 && /* @__PURE__ */ o("div", {
 							className: "space-y-2",
 							children: [/* @__PURE__ */ a("label", {
-								htmlFor: y,
+								htmlFor: v,
 								className: "block text-sm font-medium text-text-secondary",
 								children: /* @__PURE__ */ o("span", {
 									className: "flex items-center gap-2",
@@ -168,27 +162,27 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 											strokeWidth: 2,
 											d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 										})
-									}), "Project (Optional)"]
+									}), h("auth.workspaceSelector.projectOptional", "Project (Optional)")]
 								})
 							}), /* @__PURE__ */ o("select", {
-								id: y,
-								value: w || "",
-								onChange: (e) => N(e.target.value),
+								id: v,
+								value: C || "",
+								onChange: (e) => M(e.target.value),
 								className: "w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20",
 								children: [/* @__PURE__ */ a("option", {
 									value: "",
-									children: g("auth.workspaceSelector.noProject", "No project selected")
-								}), O.map((e) => /* @__PURE__ */ a("option", {
+									children: h("auth.workspaceSelector.noProject", "No project selected")
+								}), D.map((e) => /* @__PURE__ */ a("option", {
 									value: e.id,
 									children: e.name
 								}, e.id))]
 							})]
 						}),
-						k && /* @__PURE__ */ o("div", {
+						O && /* @__PURE__ */ o("div", {
 							className: "rounded-lg bg-bg-sunken p-4 space-y-2",
 							children: [/* @__PURE__ */ a("p", {
 								className: "text-sm font-medium text-text-primary",
-								children: g("auth.workspaceSelector.selected", "Selected:")
+								children: h("auth.workspaceSelector.selected", "Selected:")
 							}), /* @__PURE__ */ o("div", {
 								className: "text-sm text-text-secondary space-y-1",
 								children: [/* @__PURE__ */ o("div", {
@@ -204,8 +198,8 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 											strokeWidth: 2,
 											d: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
 										})
-									}), /* @__PURE__ */ a("span", { children: k.name })]
-								}), A && /* @__PURE__ */ o("div", {
+									}), /* @__PURE__ */ a("span", { children: O.name })]
+								}), k && /* @__PURE__ */ o("div", {
 									className: "flex items-center gap-2",
 									children: [/* @__PURE__ */ a("svg", {
 										className: "size-3",
@@ -218,7 +212,7 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 											strokeWidth: 2,
 											d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 										})
-									}), /* @__PURE__ */ a("span", { children: A.name })]
+									}), /* @__PURE__ */ a("span", { children: k.name })]
 								})]
 							})]
 						})
@@ -228,16 +222,16 @@ function c({ isOpen: c, onClose: l, workspaces: u, projects: d = s, onSelect: f,
 					className: "flex items-center justify-end gap-3 pt-4 border-t border-border-subtle",
 					children: [/* @__PURE__ */ a("button", {
 						type: "button",
-						onClick: F,
+						onClick: P,
 						disabled: p,
 						className: "px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-						children: "Cancel"
+						children: h("auth.workspaceSelector.cancel", "Cancel")
 					}), /* @__PURE__ */ a("button", {
 						type: "button",
-						onClick: P,
-						disabled: !I || p,
+						onClick: N,
+						disabled: !F || p,
 						className: "px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-						children: p ? g("auth.workspaceSelector.loading", "Loading...") : g("auth.workspaceSelector.continue", "Continue")
+						children: p ? h("auth.workspaceSelector.loading", "Loading...") : h("auth.workspaceSelector.continue", "Continue")
 					})]
 				})
 			]

package/dist/auth/components/workspace/WorkspaceSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceSelector.js","names":[],"sources":["../../../../src/auth/components/workspace/WorkspaceSelector.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useId } from \"react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell\";\nimport type { Workspace } from \"../../types\";\n\n/**\n * Organization interface (grouped from workspaces)\n */\nexport interface Organization {\n  id: string;\n  name: string;\n  workspaceCount: number;\n}\n\n/**\n * Project interface (optional, for future use)\n */\nexport interface Project {\n  id: string;\n  name: string;\n  workspaceId: string;\n}\n\nexport interface WorkspaceSelectorProps {\n  /**\n   * Control modal visibility\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback when modal is closed without selection\n   */\n  onClose: () => void;\n\n  /**\n   * List of workspaces to choose from\n   */\n  workspaces: Workspace[];\n\n  /**\n   * Optional list of projects (filtered by workspace)\n   */\n  projects?: Project[];\n\n  /**\n   * Callback when workspace is selected and confirmed\n   */\n  onSelect: (workspace: Workspace, project?: Project) => void;\n\n  /**\n   * Loading state while issuing workspace token\n   */\n  isLoading?: boolean;\n\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n}\n\n/**\n * WorkspaceSelector Component\n *\n * Multi-level workspace selection modal for use across all Burdenoff products.\n *\n * Features:\n * - Three-tier selection: Organization → Workspace → Project (optional)\n * - Auto-select if only one option at each level\n * - Loading and error states\n * - Clean, accessible UI\n *\n * Usage:\n * ```tsx\n * import { WorkspaceSelector } from '@burdenoff/microfe-auth';\n *\n * <WorkspaceSelector\n *   isOpen={showSelector}\n *   onClose={() => setShowSelector(false)}\n *   workspaces={workspaces}\n *   onSelect={async (workspace) => {\n *     await issueWorkspaceToken(workspace.id);\n *     navigate('/');\n *   }}\n * />\n * ```\n */\nconst EMPTY_PROJECTS: readonly Project[] = [];\n\nexport function WorkspaceSelector({\n  isOpen,\n  onClose,\n  workspaces,\n  projects = EMPTY_PROJECTS as Project[],\n  onSelect,\n  isLoading = false,\n  error = null,\n}: WorkspaceSelectorProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const translated = t(key);\n    return translated === key ? fallback : translated;\n  };\n  // Generated ids for label-control pairing\n  const orgSelectId = useId();\n  const workspaceSelectId = useId();\n  const projectSelectId = useId();\n  // Selection state\n  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);\n  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(\n    null,\n  );\n  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(\n    null,\n  );\n\n  // Group workspaces by organization\n  const organizations = useMemo<Organization[]>(() => {\n    const orgMap = new Map<string, { name: string; count: number }>();\n\n    workspaces.forEach((workspace) => {\n      const orgId = workspace.organizationId || \"default\";\n      if (!orgMap.has(orgId)) {\n        // Use org ID for name since workspace doesn't have organizationName\n        orgMap.set(orgId, {\n          name:\n            orgId === \"default\"\n              ? \"Default\"\n              : `Organization ${orgId.slice(0, 8)}`,\n          count: 0,\n        });\n      }\n      orgMap.get(orgId)!.count++;\n    });\n\n    return Array.from(orgMap.entries()).map(([id, { name, count }]) => ({\n      id,\n      name,\n      workspaceCount: count,\n    }));\n  }, [workspaces]);\n\n  // Filter workspaces by selected organization\n  const filteredWorkspaces = useMemo(() => {\n    if (!selectedOrgId) return workspaces;\n    return workspaces.filter(\n      (w) => (w.organizationId || \"default\") === selectedOrgId,\n    );\n  }, [workspaces, selectedOrgId]);\n\n  // Filter projects by selected workspace\n  const filteredProjects = useMemo(() => {\n    if (!selectedWorkspaceId) return [];\n    return projects.filter((p) => p.workspaceId === selectedWorkspaceId);\n  }, [projects, selectedWorkspaceId]);\n\n  // Get selected workspace object\n  const selectedWorkspace = useMemo(() => {\n    return workspaces.find((w) => w.id === selectedWorkspaceId);\n  }, [workspaces, selectedWorkspaceId]);\n\n  // Get selected project object\n  const selectedProject = useMemo(() => {\n    return projects.find((p) => p.id === selectedProjectId);\n  }, [projects, selectedProjectId]);\n\n  // Auto-select if only one organization\n  useEffect(() => {\n    if (organizations.length === 1 && !selectedOrgId) {\n      setSelectedOrgId(organizations[0].id);\n    }\n  }, [organizations, selectedOrgId]);\n\n  // Auto-select if only one workspace\n  useEffect(() => {\n    if (filteredWorkspaces.length === 1 && !selectedWorkspaceId) {\n      setSelectedWorkspaceId(filteredWorkspaces[0].id);\n    }\n  }, [filteredWorkspaces, selectedWorkspaceId]);\n\n  // Handle organization selection\n  const handleOrgChange = (orgId: string) => {\n    setSelectedOrgId(orgId);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n  };\n\n  // Handle workspace selection\n  const handleWorkspaceChange = (workspaceId: string) => {\n    setSelectedWorkspaceId(workspaceId);\n    setSelectedProjectId(null);\n  };\n\n  // Handle project selection\n  const handleProjectChange = (projectId: string) => {\n    setSelectedProjectId(projectId);\n  };\n\n  // Handle continue button\n  const handleContinue = () => {\n    if (!selectedWorkspace) return;\n    onSelect(selectedWorkspace, selectedProject);\n  };\n\n  // Handle cancel\n  const handleCancel = () => {\n    setSelectedOrgId(null);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n    onClose();\n  };\n\n  // Check if continue button should be enabled\n  const canContinue = selectedWorkspaceId !== null;\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        onClick={handleCancel}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div className=\"relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6\">\n        {/* Header */}\n        <div className=\"space-y-2\">\n          <h2 className=\"text-2xl font-semibold text-text-primary\">\n            {tr(\"auth.workspaceSelector.title\", \"Select Your Workspace\")}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              \"auth.workspaceSelector.subtitle\",\n              \"Choose the workspace you want to work in. You can switch workspaces later from the header.\",\n            )}\n          </p>\n        </div>\n\n        {/* Error display */}\n        {error && (\n          <div className=\"rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n            <p className=\"font-medium\">\n              {tr(\"auth.workspaceSelector.error\", \"Error\")}\n            </p>\n            <p>{error}</p>\n          </div>\n        )}\n\n        {/* Form */}\n        <div className=\"space-y-4\">\n          {/* Organization selection */}\n          {organizations.length > 1 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={orgSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                    />\n                  </svg>\n                  Organization\n                </span>\n              </label>\n              <select\n                id={orgSelectId}\n                value={selectedOrgId || \"\"}\n                onChange={(e) => handleOrgChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.selectOrg\",\n                    \"Select organization...\",\n                  )}\n                </option>\n                {organizations.map((org) => (\n                  <option key={org.id} value={org.id}>\n                    {org.name} ({org.workspaceCount} workspace\n                    {org.workspaceCount !== 1 ? \"s\" : \"\"})\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Workspace selection */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor={workspaceSelectId}\n              className=\"block text-sm font-medium text-text-secondary\"\n            >\n              <span className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                  />\n                </svg>\n                Workspace\n              </span>\n            </label>\n            <select\n              id={workspaceSelectId}\n              value={selectedWorkspaceId || \"\"}\n              onChange={(e) => handleWorkspaceChange(e.target.value)}\n              disabled={!selectedOrgId && organizations.length > 1}\n              className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <option value=\"\">\n                {tr(\n                  \"auth.workspaceSelector.selectWorkspace\",\n                  \"Select workspace...\",\n                )}\n              </option>\n              {filteredWorkspaces.map((workspace) => (\n                <option key={workspace.id} value={workspace.id}>\n                  {workspace.name} ({workspace.slug})\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Project selection (optional) */}\n          {filteredProjects.length > 0 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={projectSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                    />\n                  </svg>\n                  Project (Optional)\n                </span>\n              </label>\n              <select\n                id={projectSelectId}\n                value={selectedProjectId || \"\"}\n                onChange={(e) => handleProjectChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.noProject\",\n                    \"No project selected\",\n                  )}\n                </option>\n                {filteredProjects.map((project) => (\n                  <option key={project.id} value={project.id}>\n                    {project.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Selection summary */}\n          {selectedWorkspace && (\n            <div className=\"rounded-lg bg-bg-sunken p-4 space-y-2\">\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tr(\"auth.workspaceSelector.selected\", \"Selected:\")}\n              </p>\n              <div className=\"text-sm text-text-secondary space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-3\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                    />\n                  </svg>\n                  <span>{selectedWorkspace.name}</span>\n                </div>\n                {selectedProject && (\n                  <div className=\"flex items-center gap-2\">\n                    <svg\n                      className=\"size-3\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                      />\n                    </svg>\n                    <span>{selectedProject.name}</span>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-3 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleContinue}\n            disabled={!canContinue || isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isLoading\n              ? tr(\"auth.workspaceSelector.loading\", \"Loading...\")\n              : tr(\"auth.workspaceSelector.continue\", \"Continue\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"WorkspaceSelector.js","names":[],"sources":["../../../../src/auth/components/workspace/WorkspaceSelector.tsx"],"sourcesContent":["import { useState, useMemo, useEffect, useId } from \"react\";\nimport { useTr } from \"../../../shared/hooks/useTr\";\nimport type { Workspace } from \"../../types\";\n\n/**\n * Organization interface (grouped from workspaces)\n */\nexport interface Organization {\n  id: string;\n  name: string;\n  workspaceCount: number;\n}\n\n/**\n * Project interface (optional, for future use)\n */\nexport interface Project {\n  id: string;\n  name: string;\n  workspaceId: string;\n}\n\nexport interface WorkspaceSelectorProps {\n  /**\n   * Control modal visibility\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback when modal is closed without selection\n   */\n  onClose: () => void;\n\n  /**\n   * List of workspaces to choose from\n   */\n  workspaces: Workspace[];\n\n  /**\n   * Optional list of projects (filtered by workspace)\n   */\n  projects?: Project[];\n\n  /**\n   * Callback when workspace is selected and confirmed\n   */\n  onSelect: (workspace: Workspace, project?: Project) => void;\n\n  /**\n   * Loading state while issuing workspace token\n   */\n  isLoading?: boolean;\n\n  /**\n   * Error message to display\n   */\n  error?: string | null;\n}\n\n/**\n * WorkspaceSelector Component\n *\n * Multi-level workspace selection modal for use across all Burdenoff products.\n *\n * Features:\n * - Three-tier selection: Organization → Workspace → Project (optional)\n * - Auto-select if only one option at each level\n * - Loading and error states\n * - Clean, accessible UI\n *\n * Usage:\n * ```tsx\n * import { WorkspaceSelector } from '@burdenoff/microfe-auth';\n *\n * <WorkspaceSelector\n *   isOpen={showSelector}\n *   onClose={() => setShowSelector(false)}\n *   workspaces={workspaces}\n *   onSelect={async (workspace) => {\n *     await issueWorkspaceToken(workspace.id);\n *     navigate('/');\n *   }}\n * />\n * ```\n */\nconst EMPTY_PROJECTS: readonly Project[] = [];\n\nexport function WorkspaceSelector({\n  isOpen,\n  onClose,\n  workspaces,\n  projects = EMPTY_PROJECTS as Project[],\n  onSelect,\n  isLoading = false,\n  error = null,\n}: WorkspaceSelectorProps) {\n  const tr = useTr();\n\n  // Generated ids for label-control pairing\n  const orgSelectId = useId();\n  const workspaceSelectId = useId();\n  const projectSelectId = useId();\n  // Selection state\n  const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);\n  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState<string | null>(\n    null,\n  );\n  const [selectedProjectId, setSelectedProjectId] = useState<string | null>(\n    null,\n  );\n\n  // Group workspaces by organization\n  const organizations = useMemo<Organization[]>(() => {\n    const orgMap = new Map<string, { name: string; count: number }>();\n\n    workspaces.forEach((workspace) => {\n      const orgId = workspace.organizationId || \"default\";\n      if (!orgMap.has(orgId)) {\n        // Use org ID for name since workspace doesn't have organizationName\n        orgMap.set(orgId, {\n          name:\n            orgId === \"default\"\n              ? tr(\"auth.workspaceSelector.defaultOrg\", \"Default\")\n              : `${tr(\"auth.workspaceSelector.organizationPrefix\", \"Organization\")} ${orgId.slice(0, 8)}`,\n          count: 0,\n        });\n      }\n      orgMap.get(orgId)!.count++;\n    });\n\n    return Array.from(orgMap.entries()).map(([id, { name, count }]) => ({\n      id,\n      name,\n      workspaceCount: count,\n    }));\n  }, [workspaces, tr]);\n\n  // Filter workspaces by selected organization\n  const filteredWorkspaces = useMemo(() => {\n    if (!selectedOrgId) return workspaces;\n    return workspaces.filter(\n      (w) => (w.organizationId || \"default\") === selectedOrgId,\n    );\n  }, [workspaces, selectedOrgId]);\n\n  // Filter projects by selected workspace\n  const filteredProjects = useMemo(() => {\n    if (!selectedWorkspaceId) return [];\n    return projects.filter((p) => p.workspaceId === selectedWorkspaceId);\n  }, [projects, selectedWorkspaceId]);\n\n  // Get selected workspace object\n  const selectedWorkspace = useMemo(() => {\n    return workspaces.find((w) => w.id === selectedWorkspaceId);\n  }, [workspaces, selectedWorkspaceId]);\n\n  // Get selected project object\n  const selectedProject = useMemo(() => {\n    return projects.find((p) => p.id === selectedProjectId);\n  }, [projects, selectedProjectId]);\n\n  // Auto-select if only one organization\n  useEffect(() => {\n    if (organizations.length === 1 && !selectedOrgId) {\n      setSelectedOrgId(organizations[0].id);\n    }\n  }, [organizations, selectedOrgId]);\n\n  // Auto-select if only one workspace\n  useEffect(() => {\n    if (filteredWorkspaces.length === 1 && !selectedWorkspaceId) {\n      setSelectedWorkspaceId(filteredWorkspaces[0].id);\n    }\n  }, [filteredWorkspaces, selectedWorkspaceId]);\n\n  // Handle organization selection\n  const handleOrgChange = (orgId: string) => {\n    setSelectedOrgId(orgId);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n  };\n\n  // Handle workspace selection\n  const handleWorkspaceChange = (workspaceId: string) => {\n    setSelectedWorkspaceId(workspaceId);\n    setSelectedProjectId(null);\n  };\n\n  // Handle project selection\n  const handleProjectChange = (projectId: string) => {\n    setSelectedProjectId(projectId);\n  };\n\n  // Handle continue button\n  const handleContinue = () => {\n    if (!selectedWorkspace) return;\n    onSelect(selectedWorkspace, selectedProject);\n  };\n\n  // Handle cancel\n  const handleCancel = () => {\n    setSelectedOrgId(null);\n    setSelectedWorkspaceId(null);\n    setSelectedProjectId(null);\n    onClose();\n  };\n\n  // Check if continue button should be enabled\n  const canContinue = selectedWorkspaceId !== null;\n\n  if (!isOpen) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div\n        className=\"absolute inset-0 bg-black/50\"\n        onClick={handleCancel}\n        aria-hidden=\"true\"\n      />\n\n      {/* Modal */}\n      <div className=\"relative bg-bg-surface rounded-2xl shadow-xl max-w-2xl w-full mx-4 p-6 space-y-6\">\n        {/* Header */}\n        <div className=\"space-y-2\">\n          <h2 className=\"text-2xl font-semibold text-text-primary\">\n            {tr(\"auth.workspaceSelector.title\", \"Select Your Workspace\")}\n          </h2>\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              \"auth.workspaceSelector.subtitle\",\n              \"Choose the workspace you want to work in. You can switch workspaces later from the header.\",\n            )}\n          </p>\n        </div>\n\n        {/* Error display */}\n        {error && (\n          <div className=\"rounded-lg bg-status-error-bg-subtle p-4 text-sm text-status-error-text\">\n            <p className=\"font-medium\">\n              {tr(\"auth.workspaceSelector.error\", \"Error\")}\n            </p>\n            <p>{error}</p>\n          </div>\n        )}\n\n        {/* Form */}\n        <div className=\"space-y-4\">\n          {/* Organization selection */}\n          {organizations.length > 1 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={orgSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4\"\n                    />\n                  </svg>\n                  {tr(\"auth.workspaceSelector.organization\", \"Organization\")}\n                </span>\n              </label>\n              <select\n                id={orgSelectId}\n                value={selectedOrgId || \"\"}\n                onChange={(e) => handleOrgChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.selectOrg\",\n                    \"Select organization...\",\n                  )}\n                </option>\n                {organizations.map((org) => (\n                  <option key={org.id} value={org.id}>\n                    {tr(\n                      \"auth.workspaceSelector.orgOption\",\n                      \"{{name}} ({{count}} workspace{{plural}})\",\n                      {\n                        name: org.name,\n                        count: org.workspaceCount,\n                        plural: org.workspaceCount !== 1 ? \"s\" : \"\",\n                      },\n                    )}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Workspace selection */}\n          <div className=\"space-y-2\">\n            <label\n              htmlFor={workspaceSelectId}\n              className=\"block text-sm font-medium text-text-secondary\"\n            >\n              <span className=\"flex items-center gap-2\">\n                <svg\n                  className=\"size-4\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  viewBox=\"0 0 24 24\"\n                  aria-hidden=\"true\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                  />\n                </svg>\n                {tr(\"auth.workspaceSelector.workspace\", \"Workspace\")}\n              </span>\n            </label>\n            <select\n              id={workspaceSelectId}\n              value={selectedWorkspaceId || \"\"}\n              onChange={(e) => handleWorkspaceChange(e.target.value)}\n              disabled={!selectedOrgId && organizations.length > 1}\n              className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:opacity-50 disabled:cursor-not-allowed\"\n            >\n              <option value=\"\">\n                {tr(\n                  \"auth.workspaceSelector.selectWorkspace\",\n                  \"Select workspace...\",\n                )}\n              </option>\n              {filteredWorkspaces.map((workspace) => (\n                <option key={workspace.id} value={workspace.id}>\n                  {workspace.name} ({workspace.slug})\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Project selection (optional) */}\n          {filteredProjects.length > 0 && (\n            <div className=\"space-y-2\">\n              <label\n                htmlFor={projectSelectId}\n                className=\"block text-sm font-medium text-text-secondary\"\n              >\n                <span className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-4\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                    />\n                  </svg>\n                  {tr(\n                    \"auth.workspaceSelector.projectOptional\",\n                    \"Project (Optional)\",\n                  )}\n                </span>\n              </label>\n              <select\n                id={projectSelectId}\n                value={selectedProjectId || \"\"}\n                onChange={(e) => handleProjectChange(e.target.value)}\n                className=\"w-full rounded-lg border border-border-default bg-bg-surface px-4 py-2.5 text-sm text-text-primary focus:border-primary focus:ring-2 focus:ring-primary/20\"\n              >\n                <option value=\"\">\n                  {tr(\n                    \"auth.workspaceSelector.noProject\",\n                    \"No project selected\",\n                  )}\n                </option>\n                {filteredProjects.map((project) => (\n                  <option key={project.id} value={project.id}>\n                    {project.name}\n                  </option>\n                ))}\n              </select>\n            </div>\n          )}\n\n          {/* Selection summary */}\n          {selectedWorkspace && (\n            <div className=\"rounded-lg bg-bg-sunken p-4 space-y-2\">\n              <p className=\"text-sm font-medium text-text-primary\">\n                {tr(\"auth.workspaceSelector.selected\", \"Selected:\")}\n              </p>\n              <div className=\"text-sm text-text-secondary space-y-1\">\n                <div className=\"flex items-center gap-2\">\n                  <svg\n                    className=\"size-3\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    viewBox=\"0 0 24 24\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z\"\n                    />\n                  </svg>\n                  <span>{selectedWorkspace.name}</span>\n                </div>\n                {selectedProject && (\n                  <div className=\"flex items-center gap-2\">\n                    <svg\n                      className=\"size-3\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      viewBox=\"0 0 24 24\"\n                    >\n                      <path\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth={2}\n                        d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\n                      />\n                    </svg>\n                    <span>{selectedProject.name}</span>\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Footer */}\n        <div className=\"flex items-center justify-end gap-3 pt-4 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            disabled={isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-text-secondary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {tr(\"auth.workspaceSelector.cancel\", \"Cancel\")}\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleContinue}\n            disabled={!canContinue || isLoading}\n            className=\"px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isLoading\n              ? tr(\"auth.workspaceSelector.loading\", \"Loading...\")\n              : tr(\"auth.workspaceSelector.continue\", \"Continue\")}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}