@psnext/design-system 2.1.0 → 2.3.0

package/DESIGN.md

@@ -536,9 +536,9 @@ Stories in `src/<layer>/<Component>/<Component>.stories.tsx` are the canonical e
 - **Notes**: Responsive 3-region grid (start/center/end), stacks centered on mobile, spreads on md+. Compositional — assemble from the region parts + Text/Link/Logo.
 
 ### Header
-- **Exports**: `Header` (wired), `HeaderBar`, `HeaderLogo`, `OrgPill`, `ProfileMenu`, `ThemeToggle`, `ProjectPicker`; hooks/data layer `useGlobalHeader`, `useHeaderCredits`, `useHeaderProject`, `getSessionToken`, `isSessionValid`, `buildEndpoints`, `DEFAULT_LABELS`; consts/types `TOGGLE_PROJECT_DROPDOWN_EVENT`, `GlobalHeaderState`, `ToggleProjectDropdownDetail`, `HeaderSelection`, `UseHeaderProjectResult`, `Labels`, `Fetcher`, `HeaderEndpoints`, `HeaderProps`, `ProjectNode`
-- **Custom props** (HeaderProps): `apiBaseUrl` — studio-auth API host (required); `environmentId` — reads `{environmentId}-sessionId` cookie (required); `logoType` — ThemeProduct, defaults to active product; `logoHref` — logo link destination (defaults to the product's public site); `showOrg`/`showProjectDropdown`/`showProfile`/`showThemeSwitcher`/`showCredits` — visibility toggles (all default `false`); `pageTitle`; `feedbackUrl`; `clientId` — active org id; `_dangerouslyInjectAccessToken` — escape hatch, avoid; `onProjectChange`; `onCloseProjectOverlay`; `logoAddon` — node between logo and picker; `endpoints` — per-path overrides; `fetcher` — custom fetch (default global); `staleTime` (default 5 min); `gcTime` (default 10 min).
-- **Notes**: Must render inside a `<ThemeProvider>`; owns an internal singleton QueryClient (no app setup). Logged-out users see no user content; `ProjectNode` shape = `{ id, name, children: ProjectNode[], isContextOnly? }`.
+- **Exports**: `Header` (wired), `HeaderBar`, `HeaderLogo`, `OrgPill`, `ProfileMenu`, `ThemeToggle`, `ProjectPicker`; hooks/data layer `useGlobalHeader`, `useHeaderCredits`, `useHeaderProject`, `getSessionToken`, `getSessionClaims`, `isSessionValid`, `buildEndpoints`, `DEFAULT_LABELS`; consts/types `TOGGLE_PROJECT_DROPDOWN_EVENT`, `GlobalHeaderState`, `ToggleProjectDropdownDetail`, `HeaderSelection`, `UseHeaderProjectResult`, `Labels`, `Fetcher`, `HeaderEndpoints`, `HeaderProps`, `ProjectNode`, `SessionClaims`
+- **Custom props** (HeaderProps): `apiBaseUrl` — studio-auth API host (required); `environmentId` — reads `{environmentId}-sessionId` cookie (required); `logoType` — ThemeProduct, defaults to active product; `logoHref` — logo link destination (defaults to the product's public site); `showOrg`/`showProjectDropdown`/`showProfile`/`showThemeSwitcher`/`showCredits` — visibility toggles (all default `false`); `pageTitle`; `feedbackUrl`; `clientId` — active org id; `_dangerouslyInjectAccessToken` — escape hatch, avoid; `onProjectChange` — fires on user pick or automatic default; `logoAddon` — node between logo and picker; `actionsStart`/`actionsEnd` — nodes at the start/end of the right-hand actions cluster; `endpoints` — per-path overrides; `fetcher` — custom fetch (default global); `staleTime` (default 5 min); `gcTime` (default 10 min).
+- **Notes**: Must render inside a `<ThemeProvider>`; owns an internal singleton QueryClient (no app setup). Auth state and user identity (email, client id) are decoded from the `{environmentId}-sessionId` JWT cookie — no `/me` call. Logged-out users see no user content; `ProjectNode` shape = `{ id, name, children: ProjectNode[], isContextOnly? }`. Project selection is per-tab (sessionStorage); explicit picks are remembered cross-tab in localStorage `lastSelectedProject`, and a tab with no valid selection auto-defaults to that (else the first selectable project) — there is no selection overlay.
 
 ### MediaObject
 - **Exports**: `MediaObject`, `MediaObjectImage`, `MediaObjectIcon`, `MediaObjectContent`, `MediaObjectTitle`, `MediaObjectText`, `MediaObjectActions`, `MediaObjectGroup`, `mediaObjectGroupVariants`, types `MediaObjectProps`, `MediaObjectImageProps`, `MediaObjectTitleProps`, `MediaObjectGroupProps`

package/dist/Header.cjs

@@ -28,6 +28,14 @@ function findProjectName(tree, id) {
 		if (found) return found;
 	}
 }
+/** First selectable node in the tree (depth-first, skipping context-only ancestors). */
+function firstSelectableProject(tree) {
+	for (const node of tree) {
+		if (!node.isContextOnly) return node;
+		const found = firstSelectableProject(node.children);
+		if (found) return found;
+	}
+}
 /** Filter the tree to nodes matching `term`, preserving ancestors of matches. */
 function filterTree(nodes, term) {
 	if (!term) return nodes;
@@ -179,17 +187,14 @@ const DEFAULT_LABELS = {
 	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."
+	logoutLabel: "Logout"
 };
 //#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`,
+	projects: (clientId) => `/api/v1/client-projects/getAllProjects?limit=50&page=1&sort=name&sortOrder=ASC&clientId=${encodeURIComponent(clientId)}&metaData=true`,
 	credits: "/save/api/v1/users"
 };
 /** Join a base URL and path without doubling slashes. */
@@ -199,7 +204,6 @@ function join(baseUrl, 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)
@@ -211,16 +215,6 @@ async function fetchToken(endpoints, fetcher) {
 	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",
@@ -254,6 +248,7 @@ async function callLogout(endpoints, fetcher) {
 //#endregion
 //#region src/patterns/Header/storage.ts
 const PROJECT_KEY = "ds-header-project";
+const LAST_PROJECT_KEY = "lastSelectedProject";
 function getStoredProject() {
 	try {
 		const raw = sessionStorage.getItem(PROJECT_KEY);
@@ -272,6 +267,20 @@ function clearStoredProject() {
 		sessionStorage.removeItem(PROJECT_KEY);
 	} catch {}
 }
+/** The project the user last explicitly selected, in any tab (localStorage). */
+function getLastSelectedProject() {
+	try {
+		const raw = localStorage.getItem(LAST_PROJECT_KEY);
+		return raw ? JSON.parse(raw) : null;
+	} catch {
+		return null;
+	}
+}
+function setLastSelectedProject(project) {
+	try {
+		localStorage.setItem(LAST_PROJECT_KEY, JSON.stringify(project));
+	} catch {}
+}
 //#endregion
 //#region src/patterns/Header/header-store.ts
 function initialState() {
@@ -307,14 +316,22 @@ const headerStore = {
 	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();
+	/**
+	* Set the selected project. `name` is best-effort; the Header backfills it from
+	* the tree. Explicit selections are also remembered in localStorage as the
+	* cross-tab default; pass `remember: false` for internal backfill/auto-select
+	* writes so they don't overwrite the user's last explicit choice.
+	*/
+	setProject(id, name = "", clientId, { remember = true } = {}) {
+		if (id) {
+			const project = {
+				id,
+				name,
+				clientId: clientId ?? state.clientId
+			};
+			setStoredProject(project);
+			if (remember) setLastSelectedProject(project);
+		} else clearStoredProject();
 		state = {
 			...state,
 			selectedProjectId: id,
@@ -414,6 +431,24 @@ function decodeJwt(token) {
 		return null;
 	}
 }
+/**
+* Decode the user claims from the session cookie's JWT — no network call.
+* Returns null when the cookie is absent or undecodable.
+*/
+function getSessionClaims(environmentId) {
+	const token = getSessionToken(environmentId);
+	if (!token) return null;
+	const payload = decodeJwt(token);
+	if (!payload) return null;
+	const str = (v) => typeof v === "string" ? v : void 0;
+	return {
+		email: str(payload.email),
+		name: str(payload.name),
+		userId: str(payload.user_id),
+		clientId: str(payload.client_id),
+		exp: typeof payload.exp === "number" ? payload.exp : void 0
+	};
+}
 /** True when a valid, unexpired session cookie exists for the environment. */
 function isSessionValid(environmentId) {
 	const token = getSessionToken(environmentId);
@@ -433,6 +468,7 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 	const fetcher = react$1.useMemo(() => fetcherProp ?? ((input, init) => fetch(input, init)), [fetcherProp]);
 	const endpoints = react$1.useMemo(() => buildEndpoints(apiBaseUrl, endpointOverrides), [apiBaseUrl, endpointOverrides]);
 	const isAuthenticated = isSessionValid(environmentId);
+	const claims = getSessionClaims(environmentId);
 	const tokenQuery = (0, _tanstack_react_query.useQuery)({
 		queryKey: [
 			"ds-header",
@@ -445,20 +481,7 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		gcTime
 	});
 	const token = injectedToken ?? tokenQuery.data;
-	const wantsUser = showProfile || showProjectDropdown || showOrg;
-	const meQuery = (0, _tanstack_react_query.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 effectiveClientId = clientId ?? claims?.clientId;
 	const projectsQuery = (0, _tanstack_react_query.useQuery)({
 		queryKey: [
 			"ds-header",
@@ -484,7 +507,7 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		gcTime
 	});
 	const projectsTree = projectsQuery.data?.projectsTree ?? [];
-	const userEmail = showProfile ? meQuery.data?.email : void 0;
+	const userEmail = showProfile ? claims?.email : void 0;
 	const creditsHref = react$1.useMemo(() => {
 		try {
 			return new URL("/user/activity", apiBaseUrl).toString();
@@ -493,6 +516,10 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		}
 	}, [apiBaseUrl]);
 	const selection = useHeaderStore();
+	const onProjectChangeRef = react$1.useRef(onProjectChange);
+	react$1.useEffect(() => {
+		onProjectChangeRef.current = onProjectChange;
+	});
 	react$1.useEffect(() => {
 		if (effectiveClientId) headerStore.reconcileClient(effectiveClientId);
 	}, [effectiveClientId]);
@@ -500,10 +527,19 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		if (!projectsQuery.data) return;
 		const tree = projectsQuery.data.projectsTree;
 		const id = headerStore.getSnapshot().selectedProjectId;
-		if (id && !nodeExistsInTree(tree, id)) headerStore.clearProject();
-		else if (id) {
+		if (id && nodeExistsInTree(tree, id)) {
 			const name = findProjectName(tree, id);
-			if (name && name !== headerStore.getSnapshot().selectedProjectName) headerStore.setProject(id, name, effectiveClientId);
+			if (name && name !== headerStore.getSnapshot().selectedProjectName) headerStore.setProject(id, name, effectiveClientId, { remember: false });
+		} else {
+			const last = getLastSelectedProject();
+			const fallback = last && nodeExistsInTree(tree, last.id) ? {
+				id: last.id,
+				name: findProjectName(tree, last.id) ?? last.name
+			} : firstSelectableProject(tree);
+			if (fallback) {
+				headerStore.setProject(fallback.id, fallback.name, effectiveClientId, { remember: false });
+				onProjectChangeRef.current?.(fallback.id);
+			} else if (id) headerStore.clearProject();
 		}
 		headerStore.setOrganization(projectsQuery.data.organizationName, effectiveClientId);
 	}, [projectsQuery.data, effectiveClientId]);
@@ -541,7 +577,6 @@ function useGlobalHeader({ apiBaseUrl, environmentId, clientId, _dangerouslyInje
 		credits: selection.credits,
 		creditsHref,
 		projectDropdownVisible,
-		showOverlay: isAuthenticated && projectDropdownVisible && !selection.selectedProjectId,
 		selectProject,
 		logout
 	};
@@ -653,7 +688,7 @@ function Header(props) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderInner, { ...props })
 	});
 }
-function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown = false, showProfile = false, showThemeSwitcher = false, showCredits = false, pageTitle, feedbackUrl, logoAddon, className, onCloseProjectOverlay, ...rest }) {
+function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown = false, showProfile = false, showThemeSwitcher = false, showCredits = false, pageTitle, feedbackUrl, logoAddon, actionsStart, actionsEnd, className, ...rest }) {
 	const { product } = require_primitives_ThemeProvider_index.useTheme();
 	const brand = logoType ?? product;
 	const state = useGlobalHeader({
@@ -667,8 +702,8 @@ function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown
 	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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderBar, {
+	const showActions = showThemeSwitcher || showProfileUi || showCreditsUi || !!feedbackUrl || !!actionsStart || !!actionsEnd;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HeaderBar, {
 		className,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderLogo, {
@@ -702,6 +737,7 @@ function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown
 			showActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ml-auto flex items-center gap-2",
 				children: [
+					actionsStart,
 					feedbackUrl && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
 						variant: "ghost",
 						size: "icon",
@@ -724,78 +760,11 @@ function HeaderInner({ logoType, logoHref, showOrg = false, showProjectDropdown
 					showProfileUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileMenu, {
 						email: state.userEmail,
 						onLogout: state.logout
-					})
+					}),
+					actionsEnd
 				]
 			})
 		]
-	}), showProjectUi && state.showOverlay && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-label": DEFAULT_LABELS.overlayTitle,
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-primary-bg/80 backdrop-blur-sm",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative mx-1 flex w-full max-w-md flex-col items-center gap-6 rounded-16 border bg-glass-none-bg p-2 text-primary-txt shadow-xl",
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
-					variant: "ghost",
-					size: "icon",
-					onClick: onClose ?? (() => window.history.back()),
-					className: "absolute top-4 right-4",
-					"aria-label": "Close",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-5" })
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex flex-col items-center gap-3 text-center",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "rounded-full bg-primary/10 p-4",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FolderOpen, { className: "size-8 text-primary" })
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "font-semibold text-primary-txt text-xl",
-							children: DEFAULT_LABELS.overlayTitle
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "text-muted-txt text-sm",
-							children: DEFAULT_LABELS.overlayDescription
-						})
-					]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex w-full justify-center gap-2",
-					children: [organizationName && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: require_cn.cn(PILL, "select-none"),
-						title: organizationName,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "shrink-0 text-muted-txt",
-							children: [DEFAULT_LABELS.orgLabel, ":"]
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "max-w-52 truncate font-medium",
-							children: organizationName
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProjectPicker, {
-						projectsTree,
-						selectedProjectId,
-						onSelect,
-						projectLabel: DEFAULT_LABELS.projectLabel,
-						projectPlaceholder: DEFAULT_LABELS.projectPlaceholder,
-						searchPlaceholder: DEFAULT_LABELS.searchPlaceholder,
-						emptyStateText: DEFAULT_LABELS.emptyStateText,
-						isLoading
-					})]
-				})
-			]
-		})
 	});
 }
 //#endregion
@@ -859,6 +828,12 @@ Object.defineProperty(exports, "buildEndpoints", {
 		return buildEndpoints;
 	}
 });
+Object.defineProperty(exports, "getSessionClaims", {
+	enumerable: true,
+	get: function() {
+		return getSessionClaims;
+	}
+});
 Object.defineProperty(exports, "getSessionToken", {
 	enumerable: true,
 	get: function() {