@psnext/design-system 1.1.0 → 1.2.0

package/dist/patterns/index.js

@@ -1,1089 +1,7 @@
-import { n as cn } from "../utils.js";
-import { A as DropdownMenu, E as Input, F as DropdownMenuLabel, G as Credits, M as DropdownMenuContent, O as Heading, P as DropdownMenuItem, T as Logo, W as DropdownMenuTrigger, b as PopoverContent, d as TableHead, f as TableHeader, i as Text, l as TableCell, m as Skeleton, o as Table, p as TableRow, q as Card, r as useTheme, rt as AvatarFallback, s as TableBody, st as Button, tt as Avatar, v as Popover, w as PopoverTrigger, z as DropdownMenuSeparator } from "../ThemeProvider.js";
-import { t as Stack } from "../Stack.js";
-import * as React from "react";
-import { ArrowDownIcon, ArrowUpIcon, Check, ChevronDown, ChevronRight, ChevronsUpDownIcon, FolderOpen, LogOut, MessageSquareShare, Moon, Search, Sun, X } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { flexRender, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
-//#region src/patterns/DataTable/DataTable.tsx
-function DataTable({ columns, data, striped = true, enablePagination = true, pageSize = 10 }) {
-	const [sorting, setSorting] = React.useState([]);
-	const [rowSelection, setRowSelection] = React.useState({});
-	const table = useReactTable({
-		data,
-		columns,
-		state: {
-			sorting,
-			rowSelection
-		},
-		onSortingChange: setSorting,
-		onRowSelectionChange: setRowSelection,
-		getCoreRowModel: getCoreRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getPaginationRowModel: enablePagination ? getPaginationRowModel() : void 0,
-		initialState: { pagination: { pageSize } }
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "data-table",
-		className: "space-y-4",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "overflow-hidden rounded-md border",
-			children: /* @__PURE__ */ jsxs(Table, {
-				striped,
-				children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
-					colSpan: header.colSpan,
-					children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
-				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
-					"data-state": row.getIsSelected() ? "selected" : void 0,
-					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
-				}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
-					colSpan: columns.length,
-					className: "h-24 text-center text-muted-foreground",
-					children: "No results."
-				}) }) })]
-			})
-		}), enablePagination ? /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-between gap-4",
-			children: [/* @__PURE__ */ jsxs("p", {
-				className: "text-sm text-muted-foreground",
-				"data-slot": "data-table-selection",
-				children: [
-					table.getFilteredSelectedRowModel().rows.length,
-					" of",
-					" ",
-					table.getFilteredRowModel().rows.length,
-					" row(s) selected."
-				]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsxs("span", {
-						className: "text-sm text-muted-foreground",
-						children: [
-							"Page ",
-							table.getState().pagination.pageIndex + 1,
-							" of ",
-							table.getPageCount() || 1
-						]
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => table.previousPage(),
-						disabled: !table.getCanPreviousPage(),
-						children: "Previous"
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => table.nextPage(),
-						disabled: !table.getCanNextPage(),
-						children: "Next"
-					})
-				]
-			})]
-		}) : null]
-	});
-}
-function DataTableColumnHeader({ column, title, className }) {
-	if (!column.getCanSort()) return /* @__PURE__ */ jsx("span", {
-		className,
-		children: title
-	});
-	const sorted = column.getIsSorted();
-	return /* @__PURE__ */ jsxs(Button, {
-		variant: "ghost",
-		size: "sm",
-		className: cn("-ml-2 h-8", className),
-		onClick: () => column.toggleSorting(sorted === "asc"),
-		children: [title, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, {}) : /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})]
-	});
-}
-//#endregion
-//#region src/patterns/Footer/Footer.tsx
-const footerBackgrounds = {
-	none: "",
-	muted: "bg-muted",
-	glass: "bg-[var(--glass-light)] backdrop-blur-[var(--glass-blur)]"
-};
-function Footer({ className, bordered = false, background = "none", ...props }) {
-	return /* @__PURE__ */ jsx("footer", {
-		"data-slot": "footer",
-		"data-background": background,
-		className: cn("grid w-full grid-cols-1 gap-3 px-4 py-3 text-center md:grid-cols-3 md:items-center md:px-6", "text-[length:var(--paragraph-mini-font-size)] leading-[var(--paragraph-mini-line-height)]", footerBackgrounds[background], bordered && "border-t border-border", className),
-		...props
-	});
-}
-function FooterStart({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "footer-start",
-		className: cn("flex items-center justify-center gap-2 md:justify-self-start md:text-left", className),
-		...props
-	});
-}
-function FooterCenter({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "footer-center",
-		className: cn("flex items-center justify-center gap-2 md:justify-self-center", className),
-		...props
-	});
-}
-function FooterEnd({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "footer-end",
-		className: cn("flex flex-wrap items-center justify-center gap-2 md:justify-end md:justify-self-end md:text-right", className),
-		...props
-	});
-}
-function FooterPoweredBy({ className, label = "Powered by", children, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "footer-powered-by",
-		className: cn("flex items-center gap-2", className),
-		...props,
-		children: [/* @__PURE__ */ jsx(Text, {
-			as: "span",
-			size: "small",
-			variant: "muted",
-			children: label
-		}), children]
-	});
-}
-function FooterSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "footer-separator",
-		"aria-hidden": "true",
-		className: cn("select-none text-border", className),
-		...props,
-		children: "|"
-	});
-}
-//#endregion
-//#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
-//#region src/patterns/MediaObject/MediaObject.tsx
-function MediaObject({ className, interactive, ...props }) {
-	return /* @__PURE__ */ jsx("article", {
-		"data-slot": "media-object",
-		className: cn("group/media flex flex-col overflow-hidden rounded-2xl border bg-card", interactive && "transition-all hover:-translate-y-0.5 hover:shadow-md", className),
-		...props
-	});
-}
-function MediaObjectImage({ className, alt, ...props }) {
-	return /* @__PURE__ */ jsx("img", {
-		"data-slot": "media-object-image",
-		alt,
-		className: cn("aspect-[16/9] w-full object-cover transition-transform group-hover/media:scale-[1.02]", className),
-		...props
-	});
-}
-function MediaObjectIcon({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "media-object-icon",
-		className: cn("flex size-10 shrink-0 items-center justify-center", className),
-		...props
-	});
-}
-function MediaObjectContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "media-object-content",
-		className: cn("flex flex-1 flex-col gap-3 p-5", className),
-		...props
-	});
-}
-function MediaObjectTitle({ size, ...props }) {
-	return /* @__PURE__ */ jsx(Heading, {
-		"data-slot": "media-object-title",
-		as: "h3",
-		size: size ?? "4",
-		...props
-	});
-}
-function MediaObjectText({ ...props }) {
-	return /* @__PURE__ */ jsx(Text, {
-		"data-slot": "media-object-text",
-		variant: "muted",
-		size: "small",
-		...props
-	});
-}
-function MediaObjectActions({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "media-object-actions",
-		className: cn("mt-auto flex items-center gap-2 pt-2", className),
-		...props
-	});
-}
-const mediaObjectGroupVariants = cva("grid", {
-	variants: {
-		columns: {
-			1: "grid-cols-1",
-			2: "grid-cols-1 sm:grid-cols-2",
-			3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-			4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-		},
-		gap: {
-			sm: "gap-4",
-			md: "gap-6",
-			lg: "gap-8"
-		}
-	},
-	defaultVariants: {
-		columns: 3,
-		gap: "lg"
-	}
-});
-function MediaObjectGroup({ className, columns, gap, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "media-object-group",
-		className: cn(mediaObjectGroupVariants({
-			columns,
-			gap
-		}), className),
-		...props
-	});
-}
-//#endregion
-//#region src/patterns/SectionCard/SectionCard.tsx
-function SectionCard({ title, action, className, children, ...props }) {
-	return /* @__PURE__ */ jsxs(Card, {
-		"data-slot": "section-card",
-		variant: "glass",
-		tint: "light",
-		className: cn("gap-5 rounded-2xl p-5 sm:p-6", className),
-		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			"data-slot": "section-card-header",
-			className: "flex items-center justify-between gap-3",
-			children: [/* @__PURE__ */ jsx(Heading, {
-				"data-slot": "section-card-title",
-				size: "3",
-				children: title
-			}), action ? /* @__PURE__ */ jsx("div", {
-				"data-slot": "section-card-action",
-				children: action
-			}) : null]
-		}), /* @__PURE__ */ jsx("div", {
-			"data-slot": "section-card-body",
-			children
-		})]
-	});
-}
-//#endregion
-//#region src/patterns/SectionHeading/SectionHeading.tsx
-function SectionHeading({ title, subtitle, eyebrow, align = "center", gradient = false, titleSize = "1", titleAs = "h2", className, ...props }) {
-	return /* @__PURE__ */ jsxs(Stack, {
-		"data-slot": "section-heading",
-		gap: "sm",
-		align: align === "center" ? "center" : "start",
-		className: cn(align === "center" && "text-center", className),
-		...props,
-		children: [
-			eyebrow ? /* @__PURE__ */ jsx(Text, {
-				"data-slot": "section-heading-eyebrow",
-				size: "caption",
-				variant: "muted",
-				children: eyebrow
-			}) : null,
-			/* @__PURE__ */ jsx(Heading, {
-				"data-slot": "section-heading-title",
-				as: titleAs,
-				size: titleSize,
-				gradient,
-				align,
-				children: title
-			}),
-			subtitle ? /* @__PURE__ */ jsx(Text, {
-				"data-slot": "section-heading-subtitle",
-				size: "large",
-				variant: "muted",
-				align,
-				children: subtitle
-			}) : null
-		]
-	});
-}
-//#endregion
+import { DataTable, DataTableColumnHeader } from "./DataTable/index.js";
+import { Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart } from "./Footer/index.js";
+import { a as ProfileMenu, c as useGlobalHeader, d as useHeaderCredits, f as useHeaderProject, h as ProjectPicker, i as OrgPill, l as getSessionToken, m as DEFAULT_LABELS, n as HeaderBar, o as ThemeToggle, p as buildEndpoints, r as HeaderLogo, s as TOGGLE_PROJECT_DROPDOWN_EVENT, t as Header, u as isSessionValid } from "../Header.js";
+import { MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, MediaObjectIcon, MediaObjectImage, MediaObjectText, MediaObjectTitle, mediaObjectGroupVariants } from "./MediaObject/index.js";
+import { SectionCard } from "./SectionCard/index.js";
+import { SectionHeading } from "./SectionHeading/index.js";
 export { DEFAULT_LABELS, DataTable, DataTableColumnHeader, Footer, FooterCenter, FooterEnd, FooterPoweredBy, FooterSeparator, FooterStart, Header, HeaderBar, HeaderLogo, MediaObject, MediaObjectActions, MediaObjectContent, MediaObjectGroup, MediaObjectIcon, MediaObjectImage, MediaObjectText, MediaObjectTitle, OrgPill, ProfileMenu, ProjectPicker, SectionCard, SectionHeading, TOGGLE_PROJECT_DROPDOWN_EVENT, ThemeToggle, buildEndpoints, getSessionToken, isSessionValid, mediaObjectGroupVariants, useGlobalHeader, useHeaderCredits, useHeaderProject };
-
-//# sourceMappingURL=index.js.map