@burdenoff/fe-libs 2026.527.3 → 2026.527.5

package/dist/chrome/ContextSwitcher.js

@@ -1,399 +1,150 @@
 import { Sheet as e, SheetContent as t, SheetHeader as n, SheetTitle as r } from "../ui/sheet.js";
-import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useIsMobile as i } from "./contextSwitcher/useIsMobile.js";
+import { TabButton as a } from "./contextSwitcher/TabButton.js";
+import { OrganizationList as o } from "./contextSwitcher/OrganizationList.js";
+import { WorkspaceList as s } from "./contextSwitcher/WorkspaceList.js";
+import { ProjectList as c } from "./contextSwitcher/ProjectList.js";
+import { TriggerButton as l } from "./contextSwitcher/TriggerButton.js";
+import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/chrome/ContextSwitcher.tsx
-function d(e = 640) {
-	let [t, n] = s(!1);
-	return a(() => {
-		let t = () => n(window.innerWidth < e);
-		return t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
-	}, [e]), t;
-}
-var f = ({ value: e, onChange: t, placeholder: n, inputRef: r }) => /* @__PURE__ */ l("div", {
-	className: "relative px-3 py-2 border-b border-[var(--color-border-subtle)]",
-	children: /* @__PURE__ */ u("div", {
-		className: "relative",
-		children: [
-			/* @__PURE__ */ l("svg", {
-				className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-[var(--color-text-tertiary)]",
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ l("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					strokeWidth: 2,
-					d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-				})
-			}),
-			/* @__PURE__ */ l("input", {
-				ref: r,
-				type: "text",
-				value: e,
-				onChange: (e) => t(e.target.value),
-				placeholder: n,
-				className: "w-full pl-9 pr-8 py-2 text-sm bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] rounded-md focus:outline-none focus:ring-2 focus:ring-[var(--color-action-primary-border)] focus:border-transparent text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] transition-all duration-200"
-			}),
-			e && /* @__PURE__ */ l("button", {
-				type: "button",
-				onClick: () => t(""),
-				className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md hover:bg-[var(--color-action-ghost-bgHover)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-all duration-150 ease-out",
-				"aria-label": "Clear search",
-				children: /* @__PURE__ */ l("svg", {
-					className: "size-4",
-					fill: "none",
-					stroke: "currentColor",
-					viewBox: "0 0 24 24",
-					children: /* @__PURE__ */ l("path", {
-						strokeLinecap: "round",
-						strokeLinejoin: "round",
-						strokeWidth: 2,
-						d: "M6 18L18 6M6 6l12 12"
-					})
-				})
-			})
-		]
-	})
-}), p = ({ message: e, isSearchResult: t }) => /* @__PURE__ */ l("div", {
-	className: "px-4 py-8 text-center animate-in fade-in-0 duration-200",
-	children: t ? /* @__PURE__ */ u(c, { children: [
-		/* @__PURE__ */ l("svg", {
-			className: "size-8 mx-auto mb-2 text-[var(--color-text-tertiary)]",
-			fill: "none",
-			stroke: "currentColor",
-			viewBox: "0 0 24 24",
-			children: /* @__PURE__ */ l("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: 2,
-				d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			})
-		}),
-		/* @__PURE__ */ l("p", {
-			className: "text-[var(--color-text-secondary)] text-sm",
-			children: "No results found"
-		}),
-		/* @__PURE__ */ l("p", {
-			className: "text-[var(--color-text-tertiary)] text-xs mt-1",
-			children: "Try a different search term"
-		})
-	] }) : /* @__PURE__ */ l("p", {
-		className: "text-[var(--color-text-secondary)] text-sm",
-		children: e
-	})
-}), m = ({ label: e, isActive: t, onClick: n }) => /* @__PURE__ */ l("button", {
-	onClick: n,
-	className: `flex-1 px-3 py-2.5 text-[13px] font-medium whitespace-nowrap text-center transition-all duration-200 ease-out ${t ? "text-[var(--color-text-link)] border-b-2 border-[var(--color-action-primary-bg)] bg-[var(--color-bg-accent)]" : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] border-b-2 border-transparent"}`,
-	children: e
-}), h = ({ organizations: h, workspaces: g, projects: _, currentOrganizationId: v, currentWorkspaceId: y, currentProjectId: b, onOrganizationChange: x, onWorkspaceChange: S, onProjectChange: C, compact: w = !1 }) => {
-	let [T, E] = s(!1), [D, O] = s(() => v ? "workspace" : "org"), [k, A] = s({
+var _ = ({ organizations: _, workspaces: v, projects: y, currentOrganizationId: b, currentWorkspaceId: x, currentProjectId: S, onOrganizationChange: C, onWorkspaceChange: w, onProjectChange: T, compact: E = !1 }) => {
+	let [D, O] = p(!1), [k, A] = p(() => b ? "workspace" : "org"), [j, M] = p({
 		org: "",
 		workspace: "",
 		project: ""
-	}), j = d(), M = o(null), N = o(null), P = o(v);
-	P.current = v;
-	let F = h.find((e) => e.id === v), I = g.find((e) => e.id === y), L = _.find((e) => e.id === b), R = g.filter((e) => e.organizationId === v), z = _.filter((e) => e.workspaceId === y), B = i((e, t) => {
+	}), N = i(), P = f(null), F = f(null), I = f(b);
+	I.current = b;
+	let L = _.find((e) => e.id === b), R = v.find((e) => e.id === x), z = y.find((e) => e.id === S), B = v.filter((e) => e.organizationId === b), V = y.filter((e) => e.workspaceId === x), H = u((e, t) => {
 		if (!t.trim()) return e;
 		let n = t.toLowerCase().trim();
 		return e.filter((e) => e.name.toLowerCase().includes(n));
-	}, []), V = B(h, k.org), H = B(R, k.workspace), U = B(z, k.project), W = i((e, t) => {
-		A((n) => ({
+	}, []), U = H(_, j.org), W = H(B, j.workspace), G = H(V, j.project), K = u((e, t) => {
+		M((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), G = i((e) => {
-		O(e), A({
+	}, []), q = u((e) => {
+		A(e), M({
 			org: "",
 			workspace: "",
 			project: ""
 		}), setTimeout(() => {
-			N.current?.focus();
+			F.current?.focus();
 		}, 50);
 	}, []);
-	a(() => {
-		if (j) return;
+	d(() => {
+		if (N) return;
 		let e = (e) => {
-			M.current && !M.current.contains(e.target) && E(!1);
+			P.current && !P.current.contains(e.target) && O(!1);
 		};
-		if (T) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [T, j]), a(() => {
-		if (T) {
-			O(P.current ? "workspace" : "org");
+		if (D) return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [D, N]), d(() => {
+		if (D) {
+			A(I.current ? "workspace" : "org");
 			let e = setTimeout(() => {
-				N.current?.focus();
+				F.current?.focus();
 			}, 100);
 			return () => clearTimeout(e);
 		}
-		A({
+		M({
 			org: "",
 			workspace: "",
 			project: ""
 		});
-	}, [T]);
-	let K = (e) => {
-		x && x(e);
-	}, q = (e) => {
-		S && S(e);
-	}, J = (e) => {
-		C && C(e), E(!1);
-	}, Y = () => /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
+	}, [D]);
+	let J = (e) => {
+		C && C(e);
+	}, Y = (e) => {
+		w && w(e);
+	}, X = (e) => {
+		T && T(e), O(!1);
+	}, Z = () => /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g("div", {
 		className: "flex items-stretch border-b border-[var(--color-border-subtle)] bg-[var(--color-bg-surface)]",
 		children: [
-			/* @__PURE__ */ l(m, {
+			/* @__PURE__ */ h(a, {
 				label: "Organization",
-				isActive: D === "org",
-				onClick: () => G("org")
+				isActive: k === "org",
+				onClick: () => q("org")
 			}),
-			/* @__PURE__ */ l(m, {
+			/* @__PURE__ */ h(a, {
 				label: "Workspace",
-				isActive: D === "workspace",
-				onClick: () => G("workspace")
+				isActive: k === "workspace",
+				onClick: () => q("workspace")
 			}),
-			/* @__PURE__ */ l(m, {
+			/* @__PURE__ */ h(a, {
 				label: "Project",
-				isActive: D === "project",
-				onClick: () => G("project")
+				isActive: k === "project",
+				onClick: () => q("project")
 			})
 		]
-	}), /* @__PURE__ */ u("div", {
+	}), /* @__PURE__ */ g("div", {
 		className: "flex-1 overflow-hidden",
 		children: [
-			D === "org" && /* @__PURE__ */ u("div", {
-				className: "h-full flex flex-col",
-				children: [/* @__PURE__ */ l(f, {
-					value: k.org,
-					onChange: (e) => W("org", e),
-					placeholder: "Search organizations...",
-					inputRef: N
-				}), /* @__PURE__ */ l("div", {
-					className: "flex-1 overflow-y-auto py-1",
-					children: V.length > 0 ? V.map((e, t) => /* @__PURE__ */ u("button", {
-						onClick: () => K(e),
-						className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-out animate-in fade-in-0 slide-in-from-left-2 ${e.id === v ? "bg-[var(--color-bg-accent)] text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] hover:translate-x-0.5"}`,
-						style: { animationDelay: `${t * 30}ms` },
-						children: [
-							/* @__PURE__ */ l("svg", {
-								className: "size-5 text-[var(--color-text-secondary)] flex-shrink-0",
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ l("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									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"
-								})
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "flex-1 text-left truncate",
-								children: e.name
-							}),
-							e.id === v && /* @__PURE__ */ l("svg", {
-								className: "size-5 text-[var(--color-action-primary-bg)] flex-shrink-0 animate-in zoom-in-50 duration-200",
-								fill: "currentColor",
-								viewBox: "0 0 20 20",
-								children: /* @__PURE__ */ l("path", {
-									fillRule: "evenodd",
-									d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-									clipRule: "evenodd"
-								})
-							})
-						]
-					}, e.id)) : /* @__PURE__ */ l(p, {
-						message: "No organizations available",
-						isSearchResult: k.org.length > 0
-					})
-				})]
+			k === "org" && /* @__PURE__ */ h(o, {
+				organizations: _,
+				searchedOrganizations: U,
+				currentOrganizationId: b,
+				searchQuery: j.org,
+				onSearchChange: (e) => K("org", e),
+				onSelect: J,
+				searchInputRef: F
 			}),
-			D === "workspace" && /* @__PURE__ */ u("div", {
-				className: "h-full flex flex-col",
-				children: [/* @__PURE__ */ l(f, {
-					value: k.workspace,
-					onChange: (e) => W("workspace", e),
-					placeholder: "Search workspaces...",
-					inputRef: N
-				}), /* @__PURE__ */ l("div", {
-					className: "flex-1 overflow-y-auto py-1",
-					children: R.length === 0 ? /* @__PURE__ */ l(p, { message: "No workspaces in this organization" }) : H.length > 0 ? H.map((e, t) => /* @__PURE__ */ u("button", {
-						onClick: () => q(e),
-						className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-out animate-in fade-in-0 slide-in-from-left-2 ${e.id === y ? "bg-[var(--color-bg-accent)] text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] hover:translate-x-0.5"}`,
-						style: { animationDelay: `${t * 30}ms` },
-						children: [
-							/* @__PURE__ */ l("svg", {
-								className: "size-5 text-[var(--color-text-secondary)] flex-shrink-0",
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ l("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									strokeWidth: 2,
-									d: "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
-								})
-							}),
-							/* @__PURE__ */ l("span", {
-								className: "flex-1 text-left truncate",
-								children: e.name
-							}),
-							e.id === y && /* @__PURE__ */ l("svg", {
-								className: "size-5 text-[var(--color-action-primary-bg)] flex-shrink-0 animate-in zoom-in-50 duration-200",
-								fill: "currentColor",
-								viewBox: "0 0 20 20",
-								children: /* @__PURE__ */ l("path", {
-									fillRule: "evenodd",
-									d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-									clipRule: "evenodd"
-								})
-							})
-						]
-					}, e.id)) : /* @__PURE__ */ l(p, {
-						message: "No workspaces found",
-						isSearchResult: k.workspace.length > 0
-					})
-				})]
+			k === "workspace" && /* @__PURE__ */ h(s, {
+				filteredWorkspaces: B,
+				searchedWorkspaces: W,
+				currentWorkspaceId: x,
+				searchQuery: j.workspace,
+				onSearchChange: (e) => K("workspace", e),
+				onSelect: Y,
+				searchInputRef: F
 			}),
-			D === "project" && /* @__PURE__ */ u("div", {
-				className: "h-full flex flex-col",
-				children: [/* @__PURE__ */ l(f, {
-					value: k.project,
-					onChange: (e) => W("project", e),
-					placeholder: "Search projects...",
-					inputRef: N
-				}), /* @__PURE__ */ l("div", {
-					className: "flex-1 overflow-y-auto py-1",
-					children: z.length === 0 ? /* @__PURE__ */ l(p, { message: "No projects in this workspace" }) : U.length > 0 ? U.map((e, t) => /* @__PURE__ */ u("button", {
-						onClick: () => J(e),
-						className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-out animate-in fade-in-0 slide-in-from-left-2 ${e.id === b ? "bg-[var(--color-bg-accent)] text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] hover:translate-x-0.5"}`,
-						style: { animationDelay: `${t * 30}ms` },
-						children: [
-							/* @__PURE__ */ l("svg", {
-								className: "size-5 text-[var(--color-text-secondary)] flex-shrink-0",
-								fill: "none",
-								stroke: "currentColor",
-								viewBox: "0 0 24 24",
-								children: /* @__PURE__ */ l("path", {
-									strokeLinecap: "round",
-									strokeLinejoin: "round",
-									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__ */ l("span", {
-								className: "flex-1 text-left truncate",
-								children: e.name
-							}),
-							e.id === b && /* @__PURE__ */ l("svg", {
-								className: "size-5 text-[var(--color-action-primary-bg)] flex-shrink-0 animate-in zoom-in-50 duration-200",
-								fill: "currentColor",
-								viewBox: "0 0 20 20",
-								children: /* @__PURE__ */ l("path", {
-									fillRule: "evenodd",
-									d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
-									clipRule: "evenodd"
-								})
-							})
-						]
-					}, e.id)) : /* @__PURE__ */ l(p, {
-						message: "No projects found",
-						isSearchResult: k.project.length > 0
-					})
-				})]
+			k === "project" && /* @__PURE__ */ h(c, {
+				filteredProjects: V,
+				searchedProjects: G,
+				currentProjectId: S,
+				searchQuery: j.project,
+				onSearchChange: (e) => K("project", e),
+				onSelect: X,
+				searchInputRef: F
 			})
 		]
-	})] }), X = /* @__PURE__ */ l("button", {
-		onClick: () => E(!T),
-		className: `flex items-center gap-2 px-3 py-2 rounded-md hover:bg-[var(--color-action-ghost-bgHover)] transition-all duration-200 ease-out ${T ? "bg-[var(--color-action-ghost-bgHover)]" : ""}`,
-		"aria-label": "Switch context",
-		"aria-expanded": T,
-		children: w ? /* @__PURE__ */ l("svg", {
-			className: "size-5 text-[var(--color-text-primary)]",
-			fill: "none",
-			stroke: "currentColor",
-			viewBox: "0 0 24 24",
-			children: /* @__PURE__ */ l("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				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"
-			})
-		}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
-			className: "flex items-center gap-1.5",
-			children: [/* @__PURE__ */ l("svg", {
-				className: "size-4 text-[var(--color-text-secondary)]",
-				fill: "none",
-				stroke: "currentColor",
-				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ l("path", {
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					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"
-				})
-			}), /* @__PURE__ */ u("div", {
-				className: "flex items-center gap-1 text-sm",
-				children: [
-					/* @__PURE__ */ l("span", {
-						className: "text-[var(--color-text-primary)] font-medium",
-						children: F?.name || "Select Org"
-					}),
-					/* @__PURE__ */ l("span", {
-						className: "text-[var(--color-text-tertiary)]",
-						children: "/"
-					}),
-					/* @__PURE__ */ l("span", {
-						className: "text-[var(--color-text-secondary)]",
-						children: I?.name || "Workspace"
-					}),
-					L && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("span", {
-						className: "text-[var(--color-text-tertiary)]",
-						children: "/"
-					}), /* @__PURE__ */ l("span", {
-						className: "text-[var(--color-text-secondary)]",
-						children: L.name
-					})] })
-				]
-			})]
-		}), /* @__PURE__ */ l("svg", {
-			className: `w-4 h-4 text-[var(--color-text-secondary)] transition-transform duration-200 ${T ? "rotate-180" : ""}`,
-			fill: "none",
-			stroke: "currentColor",
-			viewBox: "0 0 24 24",
-			children: /* @__PURE__ */ l("path", {
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				strokeWidth: 2,
-				d: "M19 9l-7 7-7-7"
-			})
-		})] })
+	})] }), Q = /* @__PURE__ */ h(l, {
+		isOpen: D,
+		compact: E,
+		currentOrg: L,
+		currentWorkspace: R,
+		currentProject: z,
+		onToggle: () => O(!D)
 	});
-	return j ? /* @__PURE__ */ u("div", {
+	return N ? /* @__PURE__ */ g("div", {
 		className: "relative",
-		children: [X, /* @__PURE__ */ l(e, {
-			open: T,
-			onOpenChange: E,
-			children: /* @__PURE__ */ u(t, {
+		children: [Q, /* @__PURE__ */ h(e, {
+			open: D,
+			onOpenChange: O,
+			children: /* @__PURE__ */ g(t, {
 				side: "bottom",
 				className: "h-[70vh] flex flex-col p-0",
-				children: [/* @__PURE__ */ l(n, {
+				children: [/* @__PURE__ */ h(n, {
 					className: "px-4 pt-4 pb-2 border-b border-[var(--color-border-subtle)]",
-					children: /* @__PURE__ */ l(r, {
+					children: /* @__PURE__ */ h(r, {
 						className: "text-[var(--color-text-primary)]",
 						children: "Switch Context"
 					})
-				}), /* @__PURE__ */ l("div", {
+				}), /* @__PURE__ */ h("div", {
 					className: "flex-1 flex flex-col overflow-hidden",
-					children: Y()
+					children: Z()
 				})]
 			})
 		})]
-	}) : /* @__PURE__ */ u("div", {
+	}) : /* @__PURE__ */ g("div", {
 		className: "relative",
-		ref: M,
-		children: [X, T && /* @__PURE__ */ l("div", {
+		ref: P,
+		children: [Q, D && /* @__PURE__ */ h("div", {
 			className: "absolute right-0 mt-2 w-[calc(100vw-2rem)] sm:w-[26rem] bg-[var(--color-bg-elevated)] border border-[var(--color-border-default)] rounded-lg shadow-lg z-50 flex flex-col max-h-[400px] animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
-			children: Y()
+			children: Z()
 		})]
 	});
 };
 //#endregion
-export { h as ContextSwitcher };
+export { _ as ContextSwitcher };