@burdenoff/fluidgrids-fe-sdk 2026.1112.2 → 2026.1112.4

package/dist/{HistoryPage-BdijEOHp.js → HistoryPage-DktteURI.js}

@@ -7,7 +7,8 @@ import { x as getFluidGridsConfig } from "./client-C9XSzSXr.js";
 import { n as useFluidGridsPageControls } from "./pageControlsBridge-0pX9s-3k.js";
 import { n as historyControls } from "./pageControlSpecs-DZJ9K37m.js";
 import { t as FluidGridsDocsLink } from "./FluidGridsDocsLink-JxkBpOeb.js";
-import { useCallback, useMemo, useState } from "react";
+import { n as useNavigationV2 } from "./useNavigationV2-C2WeqN7d.js";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 import { Icon } from "@iconify/react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -16,6 +17,41 @@ import { Badge, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectV
 import { Button as Button$1 } from "@burdenoff/fe-libs/button";
 import { buildActorFallback, useActorProfiles } from "@burdenoff/fe-libs/shared";
 
+// src/modules/history/components/TechnicalDetails.tsx
+/**
+* TechnicalDetails: a small "Show technical details" disclosure for the raw
+* text a person does not need first (an error message, an id).
+*
+* LOCAL PLACEHOLDER for the shared "Show technical details" piece that
+* BOFF-11841 builds in fe-libs. The props are deliberately the ones that piece
+* is expected to take (`label`, `hideLabel`, `children`), so it can be swapped
+* for it without touching the call sites.
+*/
+function TechnicalDetails({ label, hideLabel, children, className }) {
+	const [open, setOpen] = useState(false);
+	const panelId = useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-testid": "fluidgrids-technical-details",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-controls": panelId,
+			onClick: () => setOpen((value) => !value),
+			className: "inline-flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary underline-offset-2 hover:underline",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: open ? "mdi:chevron-down" : "mdi:chevron-right",
+				width: 14
+			}), open ? hideLabel : label]
+		}), /* @__PURE__ */ jsx("div", {
+			id: panelId,
+			hidden: !open,
+			className: "mt-1 text-xs break-words",
+			children
+		})]
+	});
+}
+
 // src/modules/history/pages/HistoryPage.tsx
 /**
 * HistoryPage — cross-workflow version history.
@@ -29,9 +65,26 @@ var HistoryPage_exports = /* @__PURE__ */ __exportAll({ HistoryPage: () => Histo
 const PAGE_SIZE = 20;
 /** Upper bound on version rows fetched for the screen (newest first). */
 const FETCH_LIMIT = 500;
-function useStatusStyles() {
+function useStatusStyles(v2) {
 	const tr = useTr();
-	return useMemo(() => ({
+	return useMemo(() => v2 ? {
+		ACTIVE: {
+			label: tr("fluidgrids.history.historyPage.statusOn", "On"),
+			variant: "default"
+		},
+		DRAFT: {
+			label: tr("fluidgrids.history.historyPage.statusOffDraft", "Off (draft)"),
+			variant: "secondary"
+		},
+		ARCHIVED: {
+			label: tr("fluidgrids.history.historyPage.statusArchived", "Archived"),
+			variant: "outline"
+		},
+		DEPRECATED: {
+			label: tr("fluidgrids.history.historyPage.statusRetired", "Retired"),
+			variant: "destructive"
+		}
+	} : {
 		ACTIVE: {
 			label: tr("fluidgrids.history.historyPage.statusActive", "Active"),
 			variant: "default"
@@ -48,7 +101,12 @@ function useStatusStyles() {
 			label: tr("fluidgrids.history.historyPage.statusDeprecated", "Deprecated"),
 			variant: "destructive"
 		}
-	}), [tr]);
+	}, [tr, v2]);
+}
+/** The page's language (the app's, when it sets one), else the browser's. */
+function pageLocale() {
+	if (typeof document === "undefined") return void 0;
+	return document.documentElement.lang || void 0;
 }
 function HistoryTableSkeleton() {
 	return /* @__PURE__ */ jsx("div", {
@@ -80,8 +138,41 @@ function EmptyState() {
 		]
 	});
 }
-function ErrorState({ message, onRetry }) {
+function ErrorState({ message, onRetry, v2 }) {
 	const tr = useTr();
+	if (v2) return /* @__PURE__ */ jsxs("div", {
+		role: "alert",
+		className: "p-4 bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)] rounded-lg",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 text-[var(--color-status-error-text)]",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "mdi:alert-circle",
+					width: 20
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-medium",
+					children: tr("fluidgrids.history.historyPage.errorHeadingPlain", "We couldn't load your versions")
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-sm text-[var(--color-status-error-text)]",
+				children: tr("fluidgrids.history.historyPage.errorPlain", "Something went wrong while loading. Try again in a moment.")
+			}),
+			/* @__PURE__ */ jsx(TechnicalDetails, {
+				className: "mt-2 text-[var(--color-status-error-text)]",
+				label: tr("fluidgrids.history.historyPage.showTechnicalDetails", "Show technical details"),
+				hideLabel: tr("fluidgrids.history.historyPage.hideTechnicalDetails", "Hide technical details"),
+				children: message
+			}),
+			/* @__PURE__ */ jsx(Button$1, {
+				variant: "outline",
+				size: "sm",
+				onClick: onRetry,
+				className: "mt-3 border-[var(--color-status-error-border)] text-[var(--color-status-error-text)] hover:bg-[var(--color-status-error-bg-subtle)]",
+				children: tr("fluidgrids.history.historyPage.errorRetry", "Retry")
+			})
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "p-4 bg-[var(--color-status-error-bg-subtle)] border border-[var(--color-status-error-border)] rounded-lg",
 		children: [
@@ -124,12 +215,59 @@ function StatCard({ label, value, valueClassName }) {
 function HistoryPage() {
 	const tr = useTr();
 	const navigate = useNavigate();
-	const STATUS_STYLES = useStatusStyles();
+	const v2 = useNavigationV2();
+	const STATUS_STYLES = useStatusStyles(v2);
 	const [search, setSearch] = useState("");
 	const [workflowFilter, setWorkflowFilter] = useState("all");
 	const [page, setPage] = useState(0);
-	const { workflows: versionRows, total, hasMore, loading, error, refetch } = useWorkflowDefinitions({ limit: FETCH_LIMIT });
-	const allRows = useMemo(() => [...versionRows].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()), [versionRows]);
+	const [windowOffset, setWindowOffset] = useState(0);
+	const [windows, setWindows] = useState({});
+	const { workflows: versionRows, total, hasMore, loading, error, refetch } = useWorkflowDefinitions(v2 && windowOffset > 0 ? {
+		limit: FETCH_LIMIT,
+		offset: windowOffset
+	} : { limit: FETCH_LIMIT });
+	useEffect(() => {
+		if (!v2 || loading || error) return;
+		setWindows((prev) => ({
+			...prev,
+			[windowOffset]: versionRows
+		}));
+	}, [
+		v2,
+		loading,
+		error,
+		versionRows,
+		windowOffset
+	]);
+	const loadedRows = useMemo(() => {
+		if (!v2) return versionRows;
+		const seen = /* @__PURE__ */ new Set();
+		const merged = [];
+		for (const offset of Object.keys(windows).map(Number).sort((a, b) => a - b)) for (const row of windows[offset]) {
+			if (seen.has(row.id)) continue;
+			seen.add(row.id);
+			merged.push(row);
+		}
+		return merged;
+	}, [
+		v2,
+		versionRows,
+		windows
+	]);
+	const handleRefresh = useCallback(() => {
+		if (v2 && windowOffset > 0) {
+			setWindows({});
+			setWindowOffset(0);
+			return;
+		}
+		if (v2) setWindows({});
+		refetch();
+	}, [
+		v2,
+		windowOffset,
+		refetch
+	]);
+	const allRows = useMemo(() => [...loadedRows].sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()), [loadedRows]);
 	const distinctWorkflows = useMemo(() => {
 		const byKey = /* @__PURE__ */ new Map();
 		for (const row of allRows) if (!byKey.has(row.workflowKey)) byKey.set(row.workflowKey, {
@@ -168,7 +306,7 @@ function HistoryPage() {
 		setPage(0);
 	}, []);
 	const assistantControls = useMemo(() => historyControls({
-		page: tr("fluidgrids.history.historyPage.title", "Version History"),
+		page: tr("fluidgrids.history.historyPage.title", v2 ? "Version history" : "Version History"),
 		search: handleSearchChange,
 		workflow: {
 			label: tr("fluidgrids.executions.executionTable.colWorkflow", "Workflow"),
@@ -183,6 +321,7 @@ function HistoryPage() {
 		}
 	}), [
 		tr,
+		v2,
 		distinctWorkflows,
 		workflowFilter,
 		handleSearchChange,
@@ -240,7 +379,7 @@ function HistoryPage() {
 	};
 	const formatDate = (dateStr) => {
 		try {
-			return new Intl.DateTimeFormat("en-US", {
+			return new Intl.DateTimeFormat(pageLocale(), {
 				month: "short",
 				day: "numeric",
 				year: "numeric",
@@ -252,6 +391,7 @@ function HistoryPage() {
 		}
 	};
 	const countByStatus = (status) => allRows.filter((r) => r.status === status).length;
+	const showOlder = () => setWindowOffset(windowOffset + FETCH_LIMIT);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "p-4 sm:p-6 bg-background-primary min-h-screen",
 		children: [
@@ -261,7 +401,7 @@ function HistoryPage() {
 				children: [/* @__PURE__ */ jsxs("div", { children: [
 					/* @__PURE__ */ jsx("h1", {
 						className: "text-2xl sm:text-3xl font-bold text-text-primary",
-						children: tr("fluidgrids.history.historyPage.title", "Version History")
+						children: tr("fluidgrids.history.historyPage.title", v2 ? "Version history" : "Version History")
 					}),
 					/* @__PURE__ */ jsx("p", {
 						className: "text-text-secondary mt-1",
@@ -275,13 +415,13 @@ function HistoryPage() {
 					className: "flex flex-wrap items-center gap-3",
 					children: [/* @__PURE__ */ jsxs(Button$1, {
 						variant: "outline",
-						onClick: () => refetch(),
+						onClick: handleRefresh,
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: "mdi:refresh",
 							className: "mr-2",
 							width: 16
 						}), tr("fluidgrids.history.historyPage.refreshButton", "Refresh")]
-					}), /* @__PURE__ */ jsxs(Button$1, {
+					}), !v2 && /* @__PURE__ */ jsxs(Button$1, {
 						variant: "outline",
 						onClick: () => navigate("../list"),
 						children: [/* @__PURE__ */ jsx(Icon, {
@@ -302,7 +442,8 @@ function HistoryPage() {
 						width: 18,
 						className: "absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary"
 					}), /* @__PURE__ */ jsx(Input, {
-						placeholder: tr("fluidgrids.history.historyPage.searchPlaceholder", "Search by name, version, key, or author..."),
+						placeholder: tr("fluidgrids.history.historyPage.searchPlaceholder", v2 ? "Search by workflow or person" : "Search by name, version, key, or author..."),
+						"aria-label": tr("fluidgrids.history.historyPage.searchLabel", "Search versions"),
 						value: search,
 						onChange: (e) => handleSearchChange(e.target.value),
 						className: "pl-10 bg-background-secondary border-border-secondary"
@@ -324,29 +465,33 @@ function HistoryPage() {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "grid grid-cols-2 sm:grid-cols-5 gap-3 mb-6",
+				className: `grid grid-cols-2 ${v2 ? "sm:grid-cols-3 lg:grid-cols-6" : "sm:grid-cols-5"} gap-3 mb-6`,
 				children: [
 					/* @__PURE__ */ jsx(StatCard, {
 						label: tr("fluidgrids.history.historyPage.statTotalVersions", "Total Versions"),
-						value: total || allRows.length
+						value: v2 ? allRows.length : total || allRows.length
 					}),
 					/* @__PURE__ */ jsx(StatCard, {
 						label: tr("fluidgrids.history.historyPage.statWorkflows", "Workflows"),
 						value: distinctWorkflows.length
 					}),
 					/* @__PURE__ */ jsx(StatCard, {
-						label: tr("fluidgrids.history.historyPage.statActive", "Active"),
+						label: v2 ? tr("fluidgrids.history.historyPage.statOn", "On") : tr("fluidgrids.history.historyPage.statActive", "Active"),
 						value: countByStatus("ACTIVE"),
 						valueClassName: "text-[var(--color-status-success-text)]"
 					}),
 					/* @__PURE__ */ jsx(StatCard, {
-						label: tr("fluidgrids.history.historyPage.statDraft", "Draft"),
+						label: v2 ? tr("fluidgrids.history.historyPage.statOffDraft", "Off (draft)") : tr("fluidgrids.history.historyPage.statDraft", "Draft"),
 						value: countByStatus("DRAFT"),
 						valueClassName: "text-[var(--color-status-warning-text)]"
 					}),
 					/* @__PURE__ */ jsx(StatCard, {
 						label: tr("fluidgrids.history.historyPage.statArchived", "Archived"),
 						value: countByStatus("ARCHIVED")
+					}),
+					v2 && /* @__PURE__ */ jsx(StatCard, {
+						label: tr("fluidgrids.history.historyPage.statRetired", "Retired"),
+						value: countByStatus("DEPRECATED")
 					})
 				]
 			}),
@@ -361,10 +506,11 @@ function HistoryPage() {
 				className: "mb-6",
 				children: /* @__PURE__ */ jsx(ErrorState, {
 					message: error.message,
-					onRetry: refetch
+					onRetry: handleRefresh,
+					v2
 				})
 			}),
-			loading ? /* @__PURE__ */ jsx(HistoryTableSkeleton, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx("div", {
+			loading && !(v2 && allRows.length > 0) ? /* @__PURE__ */ jsx(HistoryTableSkeleton, {}) : filteredRows.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {}) : /* @__PURE__ */ jsx("div", {
 				className: "overflow-x-auto rounded-lg border border-border-secondary",
 				children: /* @__PURE__ */ jsxs("table", {
 					className: "w-full text-sm",
@@ -385,11 +531,11 @@ function HistoryPage() {
 							}),
 							/* @__PURE__ */ jsx("th", {
 								className: "text-left px-4 py-3 font-medium text-text-secondary",
-								children: tr("fluidgrids.history.historyPage.columnChangedBy", "Changed By")
+								children: v2 ? tr("fluidgrids.history.historyPage.columnCreatedBy", "Created by") : tr("fluidgrids.history.historyPage.columnChangedBy", "Changed By")
 							}),
 							/* @__PURE__ */ jsx("th", {
 								className: "text-left px-4 py-3 font-medium text-text-secondary",
-								children: tr("fluidgrids.history.historyPage.columnChangedAt", "Changed At")
+								children: v2 ? tr("fluidgrids.history.historyPage.columnLastChanged", "Last changed") : tr("fluidgrids.history.historyPage.columnChangedAt", "Changed At")
 							}),
 							/* @__PURE__ */ jsx("th", {
 								className: "text-right px-4 py-3 font-medium text-text-secondary",
@@ -399,8 +545,20 @@ function HistoryPage() {
 					}) }), /* @__PURE__ */ jsx("tbody", { children: paginatedRows.map((row) => {
 						const statusStyle = STATUS_STYLES[row.status] ?? STATUS_STYLES.DRAFT;
 						return /* @__PURE__ */ jsxs("tr", {
-							className: "border-b border-border-secondary last:border-0 hover:bg-background-secondary/50 cursor-pointer transition-colors",
+							className: "border-b border-border-secondary last:border-0 hover:bg-background-secondary/50 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+							tabIndex: 0,
+							"aria-label": tr("fluidgrids.history.historyPage.openVersionLabel", "Open {{name}} {{version}} in the builder", {
+								name: row.name,
+								version: row.version
+							}),
 							onClick: () => handleNavigateToVersion(row.workflowKey, row.version),
+							onKeyDown: (e) => {
+								if (e.target !== e.currentTarget) return;
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									handleNavigateToVersion(row.workflowKey, row.version);
+								}
+							},
 							children: [
 								/* @__PURE__ */ jsx("td", {
 									className: "px-4 py-3",
@@ -479,6 +637,8 @@ function HistoryPage() {
 									}), /* @__PURE__ */ jsx(TooltipContent, { children: tr("fluidgrids.history.historyPage.compareTooltip", "Compare with the previous version") })] }), /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 										asChild: true,
 										children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": tr("fluidgrids.history.historyPage.openInBuilderTooltip", "Open in builder"),
 											onClick: (e) => {
 												e.stopPropagation();
 												handleNavigateToVersion(row.workflowKey, row.version);
@@ -508,19 +668,25 @@ function HistoryPage() {
 				onRestore: (version) => handleRestoreFromDiff(diffTarget.workflowKey, version),
 				onOpenVersion: (version) => handleNavigateToVersion(diffTarget.workflowKey, version)
 			}),
+			v2 && hasMore && !error && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 flex justify-center",
+				children: /* @__PURE__ */ jsx(Button$1, {
+					variant: "outline",
+					onClick: showOlder,
+					disabled: loading,
+					"data-testid": "fluidgrids-history-show-older",
+					children: tr("fluidgrids.history.historyPage.showOlderVersions", "Show older versions")
+				})
+			}),
 			filteredRows.length > PAGE_SIZE && /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between mt-4 px-1",
-				children: [/* @__PURE__ */ jsxs("p", {
+				children: [/* @__PURE__ */ jsx("p", {
 					className: "text-sm text-text-secondary",
-					children: [
-						"Showing ",
-						page * PAGE_SIZE + 1,
-						"–",
-						Math.min((page + 1) * PAGE_SIZE, filteredRows.length),
-						" of",
-						" ",
-						filteredRows.length
-					]
+					children: tr("fluidgrids.history.historyPage.rangeSummary", "Showing {{from}}–{{to}} of {{total}}", {
+						from: page * PAGE_SIZE + 1,
+						to: Math.min((page + 1) * PAGE_SIZE, filteredRows.length),
+						total: filteredRows.length
+					})
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex gap-2",
 					children: [/* @__PURE__ */ jsxs(Button$1, {

package/dist/NavigationV2Provider-DCDt35eG.js

@@ -0,0 +1,17 @@
+"use client";
+import { t as NavigationV2Context } from "./useNavigationV2-C2WeqN7d.js";
+import { jsx } from "react/jsx-runtime";
+
+// src/navigation-v2/NavigationV2Provider.tsx
+/**
+* Turns the FluidGrids Navigation v2 page variants on (or, nested, off) for
+* the SDK pages rendered inside. See `useNavigationV2`.
+*/
+function NavigationV2Provider({ enabled, children }) {
+	return /* @__PURE__ */ jsx(NavigationV2Context.Provider, {
+		value: enabled,
+		children
+	});
+}
+
+export { NavigationV2Provider as t };

package/dist/history.js

@@ -1,4 +1,4 @@
 "use client";
-import { t as HistoryPage } from "./HistoryPage-BdijEOHp.js";
+import { t as HistoryPage } from "./HistoryPage-DktteURI.js";
 
 export { HistoryPage };