@psnext/design-system 1.0.0 → 1.2.0

package/dist/Header.js

@@ -0,0 +1,798 @@
+import { t as cn } from "./cn.js";
+import { Button } from "./primitives/Button/index.js";
+import { Avatar, AvatarFallback } from "./primitives/Avatar/index.js";
+import { Credits } from "./primitives/Credits/index.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./primitives/DropdownMenu/index.js";
+import { Input } from "./primitives/Input/index.js";
+import { t as Logo } from "./Logo.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./primitives/Popover/index.js";
+import { Skeleton } from "./primitives/Skeleton/index.js";
+import { useTheme } from "./primitives/ThemeProvider/index.js";
+import * as React from "react";
+import { Check, ChevronDown, ChevronRight, FolderOpen, LogOut, MessageSquareShare, Moon, Search, Sun, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
+//#region src/patterns/Header/project-tree.ts
+/** True when a node with the given id exists anywhere in the tree. */
+function nodeExistsInTree(tree, id) {
+	return tree.some((node) => node.id === id || nodeExistsInTree(node.children, id));
+}
+/** Name of the node with the given id, or undefined. */
+function findProjectName(tree, id) {
+	for (const node of tree) {
+		if (node.id === id) return node.name;
+		const found = findProjectName(node.children, id);
+		if (found) return found;
+	}
+}
+/** Filter the tree to nodes matching `term`, preserving ancestors of matches. */
+function filterTree(nodes, term) {
+	if (!term) return nodes;
+	const lower = term.toLowerCase();
+	return nodes.flatMap((node) => {
+		if (node.name.toLowerCase().includes(lower)) return [node];
+		const children = filterTree(node.children, term);
+		return children.length > 0 ? [{
+			...node,
+			children
+		}] : [];
+	});
+}
+//#endregion
+//#region src/patterns/Header/ProjectPicker.tsx
+const PILL$1 = "flex h-9 items-center gap-1.5 rounded-full border bg-card px-4 text-sm";
+function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, onSelect, projectLabel, projectPlaceholder, searchPlaceholder, emptyStateText, isLoading = false }) {
+	const [open, setOpen] = React.useState(false);
+	const [searchTerm, setSearchTerm] = React.useState("");
+	const [collapsedIds, setCollapsedIds] = React.useState(/* @__PURE__ */ new Set());
+	const toggleCollapse = (id) => setCollapsedIds((prev) => {
+		const next = new Set(prev);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		return next;
+	});
+	const handleSelect = (id) => {
+		onSelect(id);
+		setOpen(false);
+	};
+	const selectedName = selectedProjectId ? findProjectName(projectsTree, selectedProjectId) ?? selectedProjectName : void 0;
+	const filteredTree = filterTree(projectsTree, searchTerm);
+	if (isLoading) return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "header-project-picker",
+		className: cn(PILL$1, "min-w-44"),
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "shrink-0 text-muted-foreground",
+				children: [projectLabel, ":"]
+			}),
+			/* @__PURE__ */ jsx(Skeleton, { className: "h-3 flex-1" }),
+			/* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground opacity-40" })
+		]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => {
+			setOpen(next);
+			if (!next) setSearchTerm("");
+		},
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			"data-slot": "header-project-picker",
+			className: cn(PILL$1, "text-left transition-colors hover:border-ring/60"),
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "shrink-0 text-muted-foreground",
+					children: [projectLabel, ":"]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cn("max-w-36 truncate", selectedName ? "font-medium" : "text-muted-foreground"),
+					children: selectedName ?? projectPlaceholder
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, { className: "ml-1 size-4 shrink-0 text-muted-foreground" })
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			align: "start",
+			className: "w-64 p-0",
+			role: "tree",
+			"aria-label": projectLabel,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "border-b p-2",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(Search, { className: "absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						className: "pl-8",
+						placeholder: searchPlaceholder,
+						value: searchTerm,
+						onChange: (e) => setSearchTerm(e.target.value)
+					})]
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-64 overflow-y-auto py-1",
+				children: filteredTree.length === 0 ? /* @__PURE__ */ jsx("p", {
+					className: "px-4 py-2 text-sm text-muted-foreground",
+					children: emptyStateText
+				}) : filteredTree.map((node) => /* @__PURE__ */ jsx(TreeNode, {
+					node,
+					depth: 0,
+					selectedId: selectedProjectId,
+					onSelect: handleSelect,
+					collapsedIds,
+					onToggleCollapse: toggleCollapse
+				}, node.id))
+			})]
+		})]
+	});
+}
+function TreeNode({ node, depth, selectedId, onSelect, collapsedIds, onToggleCollapse }) {
+	const isSelected = !node.isContextOnly && selectedId === node.id;
+	const isCollapsed = collapsedIds.has(node.id);
+	const hasChildren = node.children.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "treeitem",
+		"aria-selected": node.isContextOnly ? void 0 : isSelected,
+		"aria-expanded": hasChildren ? !isCollapsed : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			style: { paddingLeft: `${.75 + depth}rem` },
+			className: cn("flex items-center gap-1 py-2 pr-3 text-sm transition-colors", node.isContextOnly ? "cursor-default text-muted-foreground" : "cursor-pointer hover:bg-accent", isSelected && "bg-accent font-medium"),
+			children: [
+				hasChildren ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": isCollapsed ? `Expand ${node.name}` : `Collapse ${node.name}`,
+					onClick: () => onToggleCollapse(node.id),
+					className: "shrink-0 text-muted-foreground hover:text-foreground",
+					children: isCollapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })
+				}) : /* @__PURE__ */ jsx("span", { className: "inline-block w-3.5 shrink-0" }),
+				node.isContextOnly ? /* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-left",
+					children: node.name
+				}) : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => onSelect(node.id),
+					className: "flex-1 text-left",
+					children: node.name
+				}),
+				isSelected && /* @__PURE__ */ jsx(Check, { className: "ml-auto size-3.5 shrink-0 text-primary" })
+			]
+		}), !isCollapsed && hasChildren && /* @__PURE__ */ jsx("div", {
+			role: "group",
+			children: node.children.map((child) => /* @__PURE__ */ jsx(TreeNode, {
+				node: child,
+				depth: depth + 1,
+				selectedId,
+				onSelect,
+				collapsedIds,
+				onToggleCollapse
+			}, child.id))
+		})]
+	});
+}
+//#endregion
+//#region src/patterns/Header/labels.ts
+/** Default UI strings. Spread-override via the Header `labels` prop if needed. */
+const DEFAULT_LABELS = {
+	orgLabel: "Org",
+	projectLabel: "Project",
+	projectPlaceholder: "Select project...",
+	searchPlaceholder: "Search project",
+	emptyStateText: "No projects found",
+	profileMenuLabel: "Profile menu",
+	logoutLabel: "Logout",
+	overlayTitle: "Select a Project",
+	overlayDescription: "Choose a project to get started. You can change it anytime from the header."
+};
+//#endregion
+//#region src/patterns/Header/api.ts
+const PATHS = {
+	token: "/api/v1/studio-auth/sessions/token",
+	me: "/api/v1/onboarding/users/me",
+	logout: "/api/v1/studio-auth/sessions/logout",
+	projects: (clientId) => `/api/v1/onboarding/organization/${clientId}/projects`,
+	credits: "/save/api/v1/users"
+};
+/** Join a base URL and path without doubling slashes. */
+function join(baseUrl, path) {
+	return `${baseUrl.replace(/\/$/, "")}${path}`;
+}
+function buildEndpoints(apiBaseUrl, overrides) {
+	return {
+		token: overrides?.token ?? join(apiBaseUrl, PATHS.token),
+		me: overrides?.me ?? join(apiBaseUrl, PATHS.me),
+		logout: overrides?.logout ?? join(apiBaseUrl, PATHS.logout),
+		projects: overrides?.projects ?? ((clientId) => join(apiBaseUrl, PATHS.projects(clientId))),
+		credits: overrides?.credits ?? join(apiBaseUrl, PATHS.credits)
+	};
+}
+async function fetchToken(endpoints, fetcher) {
+	const res = await fetcher(endpoints.token, { credentials: "include" });
+	if (!res.ok) throw new Error(`token request failed: ${res.status}`);
+	const { accessToken } = await res.json();
+	return accessToken;
+}
+async function fetchMe(endpoints, accessToken, fetcher) {
+	const res = await fetcher(endpoints.me, {
+		credentials: "include",
+		headers: { Authorization: `Bearer ${accessToken}` }
+	});
+	if (!res.ok) throw new Error(`me request failed: ${res.status}`);
+	const data = (await res.json()).response?.data;
+	if (!data) throw new Error("me response missing data");
+	return data;
+}
+async function fetchProjects(endpoints, clientId, accessToken, fetcher) {
+	const res = await fetcher(endpoints.projects(clientId), {
+		credentials: "include",
+		headers: { Authorization: `Bearer ${accessToken}` }
+	});
+	if (!res.ok) throw new Error(`projects request failed: ${res.status}`);
+	const data = await res.json();
+	return {
+		projectsTree: data.response?.data?.projectsTree ?? [],
+		organizationName: data.response?.data?.organization?.name
+	};
+}
+async function fetchCredits(endpoints, accessToken, fetcher) {
+	const res = await fetcher(endpoints.credits, {
+		credentials: "include",
+		headers: { Authorization: `Bearer ${accessToken}` }
+	});
+	if (!res.ok) throw new Error(`credits request failed: ${res.status}`);
+	return (await res.json()).remainingCredits;
+}
+async function callLogout(endpoints, fetcher) {
+	try {
+		await fetcher(endpoints.logout, {
+			method: "POST",
+			credentials: "include"
+		});
+	} finally {
+		if (typeof window !== "undefined") window.location.href = "/";
+	}
+}
+//#endregion
+//#region src/patterns/Header/storage.ts
+const PROJECT_KEY = "ds-header-project";
+function getStoredProject() {
+	try {
+		const raw = sessionStorage.getItem(PROJECT_KEY);
+		return raw ? JSON.parse(raw) : null;
+	} catch {
+		return null;
+	}
+}
+function setStoredProject(project) {
+	try {
+		sessionStorage.setItem(PROJECT_KEY, JSON.stringify(project));
+	} catch {}
+}
+function clearStoredProject() {
+	try {
+		sessionStorage.removeItem(PROJECT_KEY);
+	} catch {}
+}
+//#endregion
+//#region src/patterns/Header/header-store.ts
+function initialState() {
+	const stored = typeof window !== "undefined" ? getStoredProject() : null;
+	return {
+		selectedProjectId: stored?.id ?? "",
+		selectedProjectName: stored?.name ?? "",
+		organizationName: void 0,
+		credits: void 0,
+		clientId: stored?.clientId
+	};
+}
+let state = initialState();
+const SERVER_SNAPSHOT = Object.freeze({
+	selectedProjectId: "",
+	selectedProjectName: "",
+	organizationName: void 0,
+	credits: void 0,
+	clientId: void 0
+});
+const listeners = /* @__PURE__ */ new Set();
+function emit() {
+	for (const listener of listeners) listener();
+}
+const headerStore = {
+	subscribe(listener) {
+		listeners.add(listener);
+		return () => listeners.delete(listener);
+	},
+	getSnapshot() {
+		return state;
+	},
+	getServerSnapshot() {
+		return SERVER_SNAPSHOT;
+	},
+	/** Set the selected project. `name` is best-effort; the Header backfills it from the tree. */
+	setProject(id, name = "", clientId) {
+		if (id) setStoredProject({
+			id,
+			name,
+			clientId: clientId ?? state.clientId
+		});
+		else clearStoredProject();
+		state = {
+			...state,
+			selectedProjectId: id,
+			selectedProjectName: name,
+			clientId: clientId ?? state.clientId
+		};
+		emit();
+	},
+	clearProject() {
+		clearStoredProject();
+		state = {
+			...state,
+			selectedProjectId: "",
+			selectedProjectName: ""
+		};
+		emit();
+	},
+	setOrganization(name, clientId) {
+		state = {
+			...state,
+			organizationName: name,
+			clientId: clientId ?? state.clientId
+		};
+		emit();
+	},
+	setCredits(credits) {
+		if (state.credits === credits) return;
+		state = {
+			...state,
+			credits
+		};
+		emit();
+	},
+	/** When the active client changes, drop a selection/org from the previous one. */
+	reconcileClient(clientId) {
+		if (state.clientId === clientId) return;
+		if (state.clientId && state.clientId !== clientId) {
+			clearStoredProject();
+			state = {
+				selectedProjectId: "",
+				selectedProjectName: "",
+				organizationName: void 0,
+				credits: state.credits,
+				clientId
+			};
+		} else state = {
+			...state,
+			clientId
+		};
+		emit();
+	}
+};
+/** Internal: subscribe a component to the selection store. */
+function useHeaderStore() {
+	return React.useSyncExternalStore(headerStore.subscribe, headerStore.getSnapshot, headerStore.getServerSnapshot);
+}
+/**
+* Read the current project/org and change the project from anywhere in the app —
+* no need to be inside the <Header>. Reflects user selections made in the header
+* and updates the header when changed here.
+*/
+function useHeaderProject() {
+	const snapshot = useHeaderStore();
+	return {
+		selectedProjectId: snapshot.selectedProjectId,
+		selectedProjectName: snapshot.selectedProjectName || void 0,
+		organizationName: snapshot.organizationName,
+		setProject: React.useCallback((id) => headerStore.setProject(id), []),
+		clearProject: React.useCallback(() => headerStore.clearProject(), [])
+	};
+}
+/** Read the logged-in user's remaining credits (read-only; the Header owns it). */
+function useHeaderCredits() {
+	return useHeaderStore().credits;
+}
+//#endregion
+//#region src/patterns/Header/session.ts
+/** Read the raw session JWT from the `{environmentId}-sessionId` cookie. */
+function getSessionToken(environmentId) {
+	if (typeof document === "undefined") return null;
+	const name = `${environmentId}-sessionId`;
+	for (const part of document.cookie.split(";")) {
+		const [key, ...rest] = part.trim().split("=");
+		if (key === name) return decodeURIComponent(rest.join("="));
+	}
+	return null;
+}
+/** Decode a JWT payload without verifying the signature (display/expiry only). */
+function decodeJwt(token) {
+	try {
+		const payload = token.split(".")[1];
+		if (!payload) return null;
+		const base64 = payload.replace(/-/g, "+").replace(/_/g, "/");
+		const json = atob(base64);
+		return JSON.parse(json);
+	} catch {
+		return null;
+	}
+}
+/** True when a valid, unexpired session cookie exists for the environment. */
+function isSessionValid(environmentId) {
+	const token = getSessionToken(environmentId);
+	if (!token) return false;
+	const payload = decodeJwt(token);
+	if (!payload) return false;
+	if (typeof payload.exp !== "number") return true;
+	return payload.exp * 1e3 > Date.now();
+}
+//#endregion
+//#region src/patterns/Header/use-global-header.ts
+/** Window event other modules can dispatch to show/hide the project dropdown. */
+const TOGGLE_PROJECT_DROPDOWN_EVENT = "toggle-project-dropdown";
+const DEFAULT_STALE_TIME = 5 * 6e4;
+const DEFAULT_GC_TIME = 10 * 6e4;
+function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInjectAccessToken: injectedToken, showProjectDropdown = false, showProfile = false, showOrg = false, showCredits = false, endpoints: endpointOverrides, fetcher: fetcherProp, staleTime = DEFAULT_STALE_TIME, gcTime = DEFAULT_GC_TIME, onProjectChange }) {
+	const fetcher = React.useMemo(() => fetcherProp ?? ((input, init) => fetch(input, init)), [fetcherProp]);
+	const endpoints = React.useMemo(() => buildEndpoints(apiBaseUrl, endpointOverrides), [apiBaseUrl, endpointOverrides]);
+	const isAuthenticated = isSessionValid(environmentId);
+	const tokenQuery = useQuery({
+		queryKey: [
+			"ds-header",
+			"token",
+			endpoints.token
+		],
+		queryFn: () => fetchToken(endpoints, fetcher),
+		enabled: isAuthenticated && !injectedToken,
+		staleTime,
+		gcTime
+	});
+	const token = injectedToken ?? tokenQuery.data;
+	const wantsUser = showProfile || showProjectDropdown || showOrg;
+	const meQuery = useQuery({
+		queryKey: [
+			"ds-header",
+			"me",
+			endpoints.me,
+			token
+		],
+		queryFn: () => fetchMe(endpoints, token, fetcher),
+		enabled: isAuthenticated && !!token && wantsUser,
+		staleTime,
+		gcTime
+	});
+	const effectiveClientId = clientId ?? meQuery.data?.clientId;
+	const projectsQuery = useQuery({
+		queryKey: [
+			"ds-header",
+			"projects",
+			effectiveClientId,
+			token
+		],
+		queryFn: () => fetchProjects(endpoints, effectiveClientId, token, fetcher),
+		enabled: isAuthenticated && !!token && !!effectiveClientId && (showProjectDropdown || showOrg),
+		staleTime,
+		gcTime
+	});
+	const creditsQuery = useQuery({
+		queryKey: [
+			"ds-header",
+			"credits",
+			endpoints.credits,
+			token
+		],
+		queryFn: () => fetchCredits(endpoints, token, fetcher),
+		enabled: isAuthenticated && !!token && showCredits,
+		staleTime: 0,
+		gcTime
+	});
+	const projectsTree = projectsQuery.data?.projectsTree ?? [];
+	const userEmail = showProfile ? meQuery.data?.email : void 0;
+	const creditsHref = React.useMemo(() => {
+		try {
+			return new URL("/user/activity", apiBaseUrl).toString();
+		} catch {
+			return "/user/activity";
+		}
+	}, [apiBaseUrl]);
+	const selection = useHeaderStore();
+	React.useEffect(() => {
+		if (effectiveClientId) headerStore.reconcileClient(effectiveClientId);
+	}, [effectiveClientId]);
+	React.useEffect(() => {
+		if (!projectsQuery.data) return;
+		const tree = projectsQuery.data.projectsTree;
+		const id = headerStore.getSnapshot().selectedProjectId;
+		if (id && !nodeExistsInTree(tree, id)) headerStore.clearProject();
+		else if (id) {
+			const name = findProjectName(tree, id);
+			if (name && name !== headerStore.getSnapshot().selectedProjectName) headerStore.setProject(id, name, effectiveClientId);
+		}
+		headerStore.setOrganization(projectsQuery.data.organizationName, effectiveClientId);
+	}, [projectsQuery.data, effectiveClientId]);
+	React.useEffect(() => {
+		if (creditsQuery.data !== void 0) headerStore.setCredits(creditsQuery.data);
+	}, [creditsQuery.data]);
+	const selectProject = (id) => {
+		const name = findProjectName(projectsTree, id) ?? "";
+		headerStore.setProject(id, name, effectiveClientId);
+		onProjectChange?.(id);
+	};
+	const logout = () => {
+		headerStore.clearProject();
+		callLogout(endpoints, fetcher);
+	};
+	const [projectDropdownVisible, setProjectDropdownVisible] = React.useState(showProjectDropdown);
+	React.useEffect(() => setProjectDropdownVisible(showProjectDropdown), [showProjectDropdown]);
+	React.useEffect(() => {
+		const handler = (e) => {
+			setProjectDropdownVisible(e.detail.show);
+		};
+		window.addEventListener(TOGGLE_PROJECT_DROPDOWN_EVENT, handler);
+		return () => window.removeEventListener(TOGGLE_PROJECT_DROPDOWN_EVENT, handler);
+	}, []);
+	const isProjectsLoading = projectsQuery.isFetching && !projectsQuery.data;
+	return {
+		isAuthenticated,
+		userEmail,
+		organizationName: selection.organizationName,
+		projectsTree,
+		selectedProjectId: selection.selectedProjectId,
+		selectedProjectName: selection.selectedProjectName || void 0,
+		isProjectsLoading,
+		isOrgLoading: showOrg && isProjectsLoading,
+		credits: selection.credits,
+		creditsHref,
+		projectDropdownVisible,
+		showOverlay: isAuthenticated && projectDropdownVisible && !selection.selectedProjectId,
+		selectProject,
+		logout
+	};
+}
+//#endregion
+//#region src/patterns/Header/Header.tsx
+const LOGO_HREF = {
+	psai: "https://sapientaiproducts.com/",
+	slingshot: "https://sapientaiproducts.com/slingshot",
+	sustain: "https://www.publicissapient.com/",
+	bodhi: "https://sapientaiproducts.com/bodhi"
+};
+const PILL = "flex h-9 items-center gap-1.5 rounded-full border bg-card px-4 text-sm";
+/** The header bar shell — a sticky glass strip. */
+function HeaderBar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "header",
+		className: cn("sticky top-4 z-10 mt-4 flex h-16 items-center gap-1 rounded-2xl border border-border/50 px-6 shadow-sm", "bg-[var(--glass-light)] backdrop-blur-[var(--glass-blur)]", className),
+		...props
+	});
+}
+/** Product logo linking to its home, with a Suspense-safe fallback. */
+function HeaderLogo({ brand }) {
+	return /* @__PURE__ */ jsx("a", {
+		href: LOGO_HREF[brand],
+		"aria-label": "Go to product home",
+		"data-slot": "header-logo",
+		children: /* @__PURE__ */ jsx(Logo, {
+			brand,
+			className: "h-8 w-auto"
+		})
+	});
+}
+/** Read-only organisation pill. */
+function OrgPill({ name, loading }) {
+	if (loading && !name) return /* @__PURE__ */ jsxs("div", {
+		className: cn(PILL, "ml-3"),
+		"data-slot": "header-org",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 text-muted-foreground",
+			children: [DEFAULT_LABELS.orgLabel, ":"]
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24" })]
+	});
+	if (!name) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(PILL, "ml-3 select-none"),
+		title: name,
+		"data-slot": "header-org",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "shrink-0 text-muted-foreground",
+			children: [DEFAULT_LABELS.orgLabel, ":"]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "max-w-36 truncate font-medium",
+			children: name
+		})]
+	});
+}
+/** Light/dark toggle — defers to ThemeProvider. */
+function ThemeToggle() {
+	const { theme, toggleTheme } = useTheme();
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		onClick: toggleTheme,
+		"aria-label": "Toggle theme",
+		children: theme === "light" ? /* @__PURE__ */ jsx(Moon, { className: "size-4" }) : /* @__PURE__ */ jsx(Sun, { className: "size-4" })
+	});
+}
+/** Profile menu — avatar trigger with email + logout. */
+function ProfileMenu({ email, onLogout }) {
+	const initial = email?.trim().charAt(0).toUpperCase() || "?";
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			"aria-label": DEFAULT_LABELS.profileMenuLabel,
+			children: /* @__PURE__ */ jsx(Avatar, {
+				className: "size-7",
+				children: /* @__PURE__ */ jsx(AvatarFallback, { children: initial })
+			})
+		})
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		align: "end",
+		sideOffset: 8,
+		className: "min-w-44",
+		children: [email && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+			className: "truncate font-normal text-muted-foreground",
+			children: email
+		}), /* @__PURE__ */ jsx(DropdownMenuSeparator, {})] }), /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			onSelect: onLogout,
+			variant: "destructive",
+			children: [/* @__PURE__ */ jsx(LogOut, {}), DEFAULT_LABELS.logoutLabel]
+		})]
+	})] });
+}
+let sharedClient;
+function getQueryClient() {
+	sharedClient ??= new QueryClient({ defaultOptions: { queries: {
+		retry: 1,
+		refetchOnWindowFocus: false
+	} } });
+	return sharedClient;
+}
+/** Drop-in global header. Must be rendered inside a <ThemeProvider>. */
+function Header(props) {
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: getQueryClient(),
+		children: /* @__PURE__ */ jsx(HeaderInner, { ...props })
+	});
+}
+function HeaderInner({ logoType, showOrg = false, showProjectDropdown = false, showProfile = false, showThemeSwitcher = false, showCredits = false, pageTitle, feedbackUrl, logoAddon, className, onCloseProjectOverlay, ...rest }) {
+	const { product } = useTheme();
+	const brand = logoType ?? product;
+	const state = useGlobalHeader({
+		showOrg,
+		showProjectDropdown,
+		showProfile,
+		showCredits,
+		...rest
+	});
+	const showProjectUi = showProjectDropdown && state.isAuthenticated;
+	const showOrgUi = showOrg && state.isAuthenticated;
+	const showProfileUi = showProfile && state.isAuthenticated;
+	const showCreditsUi = showCredits && state.isAuthenticated && state.credits !== void 0;
+	const showActions = showThemeSwitcher || showProfileUi || showCreditsUi || !!feedbackUrl;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(HeaderBar, {
+		className,
+		children: [
+			/* @__PURE__ */ jsx(HeaderLogo, { brand }),
+			pageTitle && /* @__PURE__ */ jsx("span", {
+				"data-slot": "header-title",
+				className: "ml-5 font-semibold text-foreground text-sm",
+				children: pageTitle
+			}),
+			logoAddon,
+			showOrgUi && /* @__PURE__ */ jsx(OrgPill, {
+				name: state.organizationName,
+				loading: state.isOrgLoading
+			}),
+			showProjectUi && state.projectDropdownVisible && /* @__PURE__ */ jsx("div", {
+				className: "ml-2",
+				children: /* @__PURE__ */ jsx(ProjectPicker, {
+					projectsTree: state.projectsTree,
+					selectedProjectId: state.selectedProjectId,
+					selectedProjectName: state.selectedProjectName,
+					onSelect: state.selectProject,
+					projectLabel: DEFAULT_LABELS.projectLabel,
+					projectPlaceholder: DEFAULT_LABELS.projectPlaceholder,
+					searchPlaceholder: DEFAULT_LABELS.searchPlaceholder,
+					emptyStateText: DEFAULT_LABELS.emptyStateText,
+					isLoading: state.isProjectsLoading
+				})
+			}),
+			showActions && /* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-2",
+				children: [
+					feedbackUrl && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						asChild: true,
+						children: /* @__PURE__ */ jsx("a", {
+							href: feedbackUrl,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							"aria-label": "Share feedback",
+							children: /* @__PURE__ */ jsx(MessageSquareShare, { className: "size-4" })
+						})
+					}),
+					showThemeSwitcher && /* @__PURE__ */ jsx(ThemeToggle, {}),
+					showCreditsUi && state.credits !== void 0 && /* @__PURE__ */ jsx("a", {
+						href: state.creditsHref,
+						"aria-label": "View credit activity",
+						className: "rounded-full outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+						children: /* @__PURE__ */ jsx(Credits, { value: state.credits })
+					}),
+					showProfileUi && /* @__PURE__ */ jsx(ProfileMenu, {
+						email: state.userEmail,
+						onLogout: state.logout
+					})
+				]
+			})
+		]
+	}), showProjectUi && state.showOverlay && /* @__PURE__ */ jsx(ProjectOverlay, {
+		organizationName: state.organizationName,
+		projectsTree: state.projectsTree,
+		selectedProjectId: state.selectedProjectId,
+		onSelect: state.selectProject,
+		isLoading: state.isProjectsLoading,
+		onClose: onCloseProjectOverlay
+	})] });
+}
+function ProjectOverlay({ organizationName, projectsTree, selectedProjectId, onSelect, isLoading, onClose }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": DEFAULT_LABELS.overlayTitle,
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative mx-4 flex w-full max-w-md flex-col items-center gap-6 rounded-2xl border bg-card p-8 text-card-foreground shadow-2xl",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon",
+					onClick: onClose ?? (() => window.history.back()),
+					className: "absolute top-4 right-4",
+					"aria-label": "Close",
+					children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center gap-3 text-center",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "rounded-full bg-primary/10 p-4",
+							children: /* @__PURE__ */ jsx(FolderOpen, { className: "size-8 text-primary" })
+						}),
+						/* @__PURE__ */ jsx("h2", {
+							className: "font-semibold text-foreground text-xl",
+							children: DEFAULT_LABELS.overlayTitle
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-muted-foreground text-sm",
+							children: DEFAULT_LABELS.overlayDescription
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex w-full justify-center gap-2",
+					children: [organizationName && /* @__PURE__ */ jsxs("div", {
+						className: cn(PILL, "select-none"),
+						title: organizationName,
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-muted-foreground",
+							children: [DEFAULT_LABELS.orgLabel, ":"]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "max-w-52 truncate font-medium",
+							children: organizationName
+						})]
+					}), /* @__PURE__ */ jsx(ProjectPicker, {
+						projectsTree,
+						selectedProjectId,
+						onSelect,
+						projectLabel: DEFAULT_LABELS.projectLabel,
+						projectPlaceholder: DEFAULT_LABELS.projectPlaceholder,
+						searchPlaceholder: DEFAULT_LABELS.searchPlaceholder,
+						emptyStateText: DEFAULT_LABELS.emptyStateText,
+						isLoading
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { ProfileMenu as a, useGlobalHeader as c, useHeaderCredits as d, useHeaderProject as f, ProjectPicker as h, OrgPill as i, getSessionToken as l, DEFAULT_LABELS as m, HeaderBar as n, ThemeToggle as o, buildEndpoints as p, HeaderLogo as r, TOGGLE_PROJECT_DROPDOWN_EVENT as s, Header as t, isSessionValid as u };
+
+//# sourceMappingURL=Header.js.map