@powerportalspro/react-fluent 5.1.0 → 6.1.0

package/dist/index.d.cts

@@ -4635,7 +4635,11 @@ interface MainGridProps {
      * Set to `'virtualize'` for infinite-scroll — the pager footer is
      * hidden, rows accumulate across page boundaries, and the next page
      * fetches automatically when the user scrolls past the rendered
-     * bottom.
+     * bottom. Pages are requested sequentially with the previous page's
+     * Dataverse paging cookie (cursor paging), and loading stops when the
+     * server reports no more records — not when the accumulated rows reach
+     * the total count, which can never happen if per-row permission
+     * handlers drop rows after Dataverse has counted them.
      */
     pagingMode?: PagingMode;
     /**

package/dist/index.d.ts

@@ -4635,7 +4635,11 @@ interface MainGridProps {
      * Set to `'virtualize'` for infinite-scroll — the pager footer is
      * hidden, rows accumulate across page boundaries, and the next page
      * fetches automatically when the user scrolls past the rendered
-     * bottom.
+     * bottom. Pages are requested sequentially with the previous page's
+     * Dataverse paging cookie (cursor paging), and loading stops when the
+     * server reports no more records — not when the accumulated rows reach
+     * the total count, which can never happen if per-row permission
+     * handlers drop rows after Dataverse has counted them.
      */
     pagingMode?: PagingMode;
     /**

package/dist/index.js

@@ -1,8 +1,8 @@
-import { makeStyles, mergeClasses, Input, tokens, Toolbar, ToolbarButton, ToolbarDivider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItemRadio, Button, createLightTheme, createDarkTheme, makeStaticStyles, MessageBar, MessageBarBody, Dropdown, Option, Spinner, Field, Textarea, Switch, Checkbox, Label, TabList, Tab, Tooltip, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, RadioGroup, Radio, useId as useId$1, Text, Overflow, OverflowItem, SearchBox, CounterBadge, Popover, PopoverTrigger, PopoverSurface, MenuItem, Combobox, TagPicker, TagPickerControl, TagPickerGroup, Tag, TagPickerInput, TagPickerList, TagPickerOption, webDarkTheme, webLightTheme, teamsDarkTheme, teamsLightTheme, FluentProvider, Avatar, Divider, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, useOverflowMenu, useIsOverflowItemVisible, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, MessageBarTitle, DialogTrigger } from '@fluentui/react-components';
-import { MaskMode, useMaskedTextField, useT, usePowerPortalsPro, useRecordContext, useColumnMetadata, useLocale, MainContext, useTableMetadata, useWarnAboutUnsavedChanges, useMainContext, useViewsForTable, useViewMetadata, QueryStatus, useGridData, RecordContext, DialogServiceProvider, useUrlCultureStrategy, useDefaultLocale, useSupportedLocales, setAspNetCultureCookie, buildLocalePath, useAuth, AuthStatus, useOverlayServiceState, OverlayServiceProvider, useOverlayForTarget, useLocalization, useLocalizationLoaded, useValidationContext, useDialogService, useRunWithOverlay, useRecordContextOptional, useOrganizationSettings, useUnsavedChangesGuard, useColumnValidationErrors } from '@powerportalspro/react';
+import { makeStyles, mergeClasses, Input, tokens, Toolbar, ToolbarButton, ToolbarDivider, Menu, MenuTrigger, MenuPopover, MenuList, MenuItemRadio, Button, createLightTheme, createDarkTheme, makeStaticStyles, MessageBar, MessageBarBody, Dropdown, Option, Spinner, Field, Textarea, Switch, Checkbox, Label, TabList, Tab, Tooltip, Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions, RadioGroup, Radio, useId as useId$1, Text, Overflow, OverflowItem, SearchBox, CounterBadge, Popover, PopoverTrigger, PopoverSurface, MenuItem, Combobox, TagPicker, TagPickerControl, TagPickerGroup, Tag, TagPickerInput, TagPickerList, TagPickerOption, webDarkTheme, webLightTheme, teamsDarkTheme, teamsLightTheme, FluentProvider, Avatar, Divider, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, useOverflowMenu, useIsOverflowItemVisible, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, createTableColumn, DataGrid, DataGridHeader, DataGridRow, DataGridHeaderCell, DataGridBody, DataGridCell, MessageBarTitle, DialogTrigger } from '@fluentui/react-components';
+import { MaskMode, useMaskedTextField, useT, usePowerPortalsPro, useRecordContext, useColumnMetadata, useLocale, MainContext, useTableMetadata, useWarnAboutUnsavedChanges, useMainContext, useViewsForTable, useViewMetadata, QueryStatus, useGridData, RecordContext, DialogServiceProvider, useUrlCultureStrategy, useDefaultLocale, useSupportedLocales, setAspNetCultureCookie, buildLocalePath, useAuth, AuthStatus, useOverlayServiceState, OverlayServiceProvider, useOverlayForTarget, useLocalization, useLocalizationLoaded, useValidationContext, useDialogService, useRunWithOverlay, useRecordContextOptional, useOrganizationSettings, useUnsavedChangesGuard, useColumnValidationErrors, isKeyModeEnabled } from '@powerportalspro/react';
 import { forwardRef, useRef, useImperativeHandle, useState, useEffect, useCallback, createContext, useMemo, useId, useLayoutEffect, useContext, useTransition, Children, isValidElement } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { ArrowRotateCounterclockwise20Regular, ArrowRotateClockwise20Regular, FlipHorizontal20Regular, FlipVertical20Regular, ZoomIn20Regular, ZoomOut20Regular, ArrowReset20Regular, ChevronDown16Regular, Grid20Regular, Crop20Regular, FullScreenMinimize20Regular, FullScreenMaximize20Regular, ArrowDownload20Regular, Prohibited20Regular, Checkmark20Filled, ArrowDownload24Regular, ArrowClockwise24Regular, ChevronUp12Regular, ChevronDown12Regular, DocumentArrowLeft24Regular, ChevronDown20Regular, ChevronRight20Regular, Folder20Regular, Document20Regular, ErrorCircle20Regular, Eye20Regular, Dismiss20Regular, Edit20Regular, Add16Regular, Edit16Regular, LinkAdd16Regular, LinkDismiss16Regular, Delete16Regular, Settings20Regular, Search20Regular, ArrowClockwise20Regular, ArrowSortDown16Regular, ArrowSortUp16Regular, Dismiss24Regular, LinkAdd20Regular, QuestionCircle24Regular, Info24Regular, DismissCircle24Regular, Warning24Regular, CheckmarkCircle24Regular, ArrowExit20Regular, PersonEdit20Regular, ArrowSwap20Regular, SignOut20Regular, MoreVerticalRegular, ArrowSyncRegular, ArrowDownloadRegular, Save24Regular, Delete24Regular, Add20Regular, Delete20Regular, LinkDismiss20Regular, ArrowUpload32Regular, ArrowUpload24Regular, ArrowSync24Regular, DrawerArrowDownload24Regular, Money20Regular, ErrorCircle12Filled, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular } from '@fluentui/react-icons';
+import { ArrowRotateCounterclockwise20Regular, ArrowRotateClockwise20Regular, FlipHorizontal20Regular, FlipVertical20Regular, ZoomIn20Regular, ZoomOut20Regular, ArrowReset20Regular, ChevronDown16Regular, Grid20Regular, Crop20Regular, FullScreenMinimize20Regular, FullScreenMaximize20Regular, ArrowDownload20Regular, Prohibited20Regular, Checkmark20Filled, ArrowDownload24Regular, ArrowClockwise24Regular, ChevronUp12Regular, ChevronDown12Regular, DocumentArrowLeft24Regular, ChevronDown20Regular, ChevronRight20Regular, Folder20Regular, Document20Regular, ErrorCircle20Regular, Eye20Regular, Dismiss20Regular, Edit20Regular, Add16Regular, Edit16Regular, LinkAdd16Regular, LinkDismiss16Regular, Delete16Regular, Settings20Regular, Search20Regular, ArrowClockwise20Regular, ArrowSortDown16Regular, ArrowSortUp16Regular, Dismiss24Regular, LinkAdd20Regular, QuestionCircle24Regular, Info24Regular, DismissCircle24Regular, Warning24Regular, CheckmarkCircle24Regular, ArrowExit20Regular, PersonEdit20Regular, ArrowSwap20Regular, SignOut20Regular, MoreVerticalRegular, ArrowSyncRegular, EyeRegular, ArrowDownloadRegular, SearchRegular, DismissRegular, Save24Regular, Delete24Regular, Add20Regular, Delete20Regular, LinkDismiss20Regular, ArrowUpload32Regular, ArrowUpload24Regular, ArrowSync24Regular, DrawerArrowDownload24Regular, Money20Regular, ErrorCircle12Filled, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular } from '@fluentui/react-icons';
 import { RequiredLevel, DateTimeBehavior, getRecordReferenceId, RelationshipFilterMode, SwitchIdentityResult, TableSecurityPermission } from '@powerportalspro/core';
 import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { TimePicker } from '@fluentui/react-timepicker-compat';
@@ -8304,6 +8304,36 @@ function MainGridVirtualizeFooter({
   ] });
 }
 
+// src/grids/virtualize-paging.ts
+function hasMoreRowsToLoad(state) {
+  if (state.moreRecords === false) return false;
+  if (state.moreRecords === true) return true;
+  if (state.lastPageEmpty) return false;
+  if (state.totalCount === void 0) return true;
+  return state.accumulatedCount < state.totalCount;
+}
+var VirtualizePagingCookies = class {
+  key;
+  byPage = /* @__PURE__ */ new Map();
+  /** Store the cookie the response for `page` came back with (no-op for a null / empty cookie). */
+  record(key, page, cookie) {
+    if (this.key !== key) {
+      this.key = key;
+      this.byPage = /* @__PURE__ */ new Map();
+    }
+    if (cookie) this.byPage.set(page, cookie);
+  }
+  /**
+   * The cookie to send when requesting `page` under `key`: the one page
+   * `page - 1` returned, or `undefined` when it isn't known (page 1, a
+   * non-sequential jump, or a key the store has no cookies for).
+   */
+  cookieFor(key, page) {
+    if (this.key !== key || page <= 1) return void 0;
+    return this.byPage.get(page - 1);
+  }
+};
+
 // src/grids/persisted-grid-state.ts
 function readPersistedGridStateFromUrl(queryParameterName) {
   if (!queryParameterName) return null;
@@ -8835,8 +8865,22 @@ function MainGridImpl({
       `[MainGrid] Declared <GridColumn> children override the column projection of the supplied fetchXml (columns: ${columnsKey.split(",").join(", ")}). Drop the children \u2014 or remove the conflicting <attribute> elements from the fetchXml \u2014 to silence this message.`
     );
   }, [columnsKey, useInlineFetchXml]);
+  const accumulatorResetKey = useMemo(
+    () => [
+      resolvedViewId ?? "",
+      useInlineFetchXml ? inlineFetchXml ?? "" : "",
+      debouncedSearchText,
+      sort.map((s) => `${s.columnName}:${s.descending ? "d" : "a"}`).join("|"),
+      filtersKey,
+      pageSize,
+      tableName ?? ""
+    ].join("|"),
+    [resolvedViewId, useInlineFetchXml, inlineFetchXml, debouncedSearchText, sort, filtersKey, pageSize, tableName]
+  );
+  const [virtualizeCookies] = useState(() => new VirtualizePagingCookies());
   const searchRequest = useMemo(() => {
     const trimmed = debouncedSearchText.trim();
+    const pagingCookie = isVirtualize ? virtualizeCookies.cookieFor(accumulatorResetKey, page) : void 0;
     return {
       ...useInlineFetchXml && inlineFetchXml ? { fetchXml: inlineFetchXml } : resolvedViewId !== void 0 && { viewId: resolvedViewId },
       ...trimmed && { searchText: trimmed },
@@ -8856,7 +8900,8 @@ function MainGridImpl({
       },
       ...columnsOverride && { columns: [...columnsOverride] },
       pageNumber: page,
-      pageSize
+      pageSize,
+      ...pagingCookie && { pagingCookie }
     };
   }, [
     resolvedViewId,
@@ -8867,7 +8912,9 @@ function MainGridImpl({
     page,
     pageSize,
     filtersKey,
-    columnsKey
+    columnsKey,
+    isVirtualize,
+    accumulatorResetKey
   ]);
   const transformPending = !!transformViewAsync || isCustomActiveView;
   const recordsResult = useGridData(searchRequest, {
@@ -9015,7 +9062,13 @@ function MainGridImpl({
         (row) => row.properties?.[columnName],
         {
           id: columnName,
-          header: () => resolvedColumn.displayName,
+          // Headers normally show the server-resolved Dataverse display name, which bypasses the
+          // client `t()` — so the ?ppp-show-keys aid couldn't reach them. Consult key-mode here too:
+          // when it's on, show the column's localization key (the one a consumer would override),
+          // keyed by the column's OWN owning table (`resolvedColumn.tableName` — the related table
+          // for a linked-entity column, not the grid's primary table). For linked columns the name
+          // is a dotted alias path, so take the segment after the last dot as the real column name.
+          header: () => isKeyModeEnabled() ? `tables.${resolvedColumn.tableName}.columns.${columnName.split(".").pop() ?? columnName}.label` : resolvedColumn.displayName,
           cell: (cellCtx) => {
             const rowRecord = cellCtx.row.original;
             const rowId = rowRecord.id;
@@ -9158,18 +9211,6 @@ function MainGridImpl({
   ]);
   const pageRecords = dataSource ? dataSource.rows : recordsResult.data?.tableRecords ?? EMPTY_RECORDS;
   const [accumulatedRows, setAccumulatedRows] = useState(null);
-  const accumulatorResetKey = useMemo(
-    () => [
-      resolvedViewId ?? "",
-      useInlineFetchXml ? inlineFetchXml ?? "" : "",
-      debouncedSearchText,
-      sort.map((s) => `${s.columnName}:${s.descending ? "d" : "a"}`).join("|"),
-      filtersKey,
-      pageSize,
-      tableName ?? ""
-    ].join("|"),
-    [resolvedViewId, useInlineFetchXml, inlineFetchXml, debouncedSearchText, sort, filtersKey, pageSize, tableName]
-  );
   const resetVirtualizedView = useCallback(() => {
     setAccumulatedRows([]);
     setPage(1);
@@ -9195,6 +9236,12 @@ function MainGridImpl({
       return [...base, ...additions];
     });
   }, [isVirtualize, recordsResult.status, pageRecords]);
+  useEffect(() => {
+    if (!isVirtualize) return;
+    const landed = recordsResult.data;
+    if (!landed) return;
+    virtualizeCookies.record(accumulatorResetKey, page, landed.pagingInfo?.pagingCookie);
+  }, [isVirtualize, recordsResult.data]);
   const data = isVirtualize ? accumulatedRows ?? EMPTY_RECORDS : pageRecords;
   const [pendingRowUpdates, setPendingRowUpdates] = useState(() => /* @__PURE__ */ new Map());
   const [pendingRowCreates, setPendingRowCreates] = useState(() => []);
@@ -9675,7 +9722,15 @@ function MainGridImpl({
     if (raw == null) return void 0;
     return typeof raw === "number" ? raw : Number(raw);
   })();
-  const hasMoreRowsToLoad = isVirtualize && (totalCount === void 0 || (accumulatedRows?.length ?? 0) < totalCount);
+  const hasMoreRowsToLoad2 = isVirtualize && hasMoreRowsToLoad({
+    accumulatedCount: accumulatedRows?.length ?? 0,
+    totalCount,
+    moreRecords: dataSource ? dataSource.moreRecords : recordsResult.data?.pagingInfo?.moreRecords,
+    // "A page has landed and it carried no rows." In standalone mode
+    // `data` is only ever defined for a landed response (errors wipe it);
+    // the datasource has no data handle, so idle-after-success stands in.
+    lastPageEmpty: dataSource ? dataSource.status === QueryStatus.Success && !dataSource.isFetching && dataSource.rows.length === 0 : recordsResult.data !== void 0 && pageRecords.length === 0
+  });
   useEffect(() => {
     if (!isVirtualize) return;
     const sentinel = loadMoreSentinelRef.current;
@@ -9686,7 +9741,7 @@ function MainGridImpl({
         const entry = entries[0];
         if (!entry?.isIntersecting) return;
         if (recordsResult.isFetching) return;
-        if (!hasMoreRowsToLoad) return;
+        if (!hasMoreRowsToLoad2) return;
         setPage(page + 1);
       },
       {
@@ -9699,7 +9754,7 @@ function MainGridImpl({
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [isVirtualize, hasMoreRowsToLoad, recordsResult.isFetching, page, setPage]);
+  }, [isVirtualize, hasMoreRowsToLoad2, recordsResult.isFetching, page, setPage]);
   const handlePageChange = (nextPage) => {
     if (nextPage === page) return;
     setPage(nextPage);
@@ -10319,7 +10374,7 @@ function MainGridImpl({
               }
             ),
             displayedData.length === 0 && /* @__PURE__ */ jsx("div", { className: styles.emptyStateRow, children: t("app.components.grid.empty-content") }),
-            isVirtualize && hasMoreRowsToLoad && // No spinner here: the full-body `refetchScrim` overlay below is the
+            isVirtualize && hasMoreRowsToLoad2 && // No spinner here: the full-body `refetchScrim` overlay below is the
             // single load indicator. Rendering a `size="tiny"` spinner in the
             // sentinel as well meant a deps-change refetch (refresh / sort /
             // search / view switch) — which resets the accumulator to empty and
@@ -13558,27 +13613,57 @@ function NavMenu({ children, width, className, style }) {
   useNavSelectedStyles();
   const location = useLocation();
   const navigate = useNavigate();
-  const { allRoutes, defaultOpen } = useMemo(
+  const { allRoutes, groups, defaultOpenIndexes } = useMemo(
     () => collectNavTree(children),
     [children]
   );
-  const selectedValue = useMemo(
+  const selectedRoute = useMemo(
     () => bestRouteMatch(allRoutes, location.pathname),
     [allRoutes, location.pathname]
   );
+  const [openIndexes, setOpenIndexes] = useState(
+    () => /* @__PURE__ */ new Set([
+      ...defaultOpenIndexes,
+      // Seed the active route's group too, so it's open on first paint
+      // (the effect below only fires after mount).
+      ...selectedRoute && selectedRoute.groupIndex >= 0 ? [selectedRoute.groupIndex] : []
+    ])
+  );
+  const selectedGroupIndex = selectedRoute?.groupIndex ?? -1;
+  useEffect(() => {
+    if (selectedGroupIndex < 0) return;
+    setOpenIndexes(
+      (prev) => prev.has(selectedGroupIndex) ? prev : new Set(prev).add(selectedGroupIndex)
+    );
+  }, [selectedGroupIndex]);
+  const openCategories = useMemo(
+    () => groups.filter((_, index) => openIndexes.has(index)),
+    [groups, openIndexes]
+  );
   const handleSelect = (_, data) => {
     const value = data.value;
     if (typeof value === "string" && value.startsWith("/")) {
       navigate(value);
     }
   };
+  const handleCategoryToggle = (_, data) => {
+    const index = groups.indexOf(data.value);
+    if (index < 0) return;
+    setOpenIndexes((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
   const navStyle = width ? { ...style, minWidth: width, maxWidth: width } : style;
   return /* @__PURE__ */ jsx(
     Nav,
     {
-      selectedValue: selectedValue ?? "",
+      selectedValue: selectedRoute?.to ?? "",
       onNavItemSelect: handleSelect,
-      defaultOpenCategories: defaultOpen,
+      openCategories,
+      onNavCategoryItemToggle: handleCategoryToggle,
       className: mergeClasses("ppp-nav-menu", styles.nav, className),
       style: navStyle,
       children
@@ -13608,42 +13693,46 @@ function NavItem({ to, icon, children }) {
 }
 function collectNavTree(children) {
   const allRoutes = [];
-  const defaultOpen = [];
-  const visit = (nodes) => {
+  const groups = [];
+  const defaultOpenIndexes = [];
+  const visit = (nodes, groupIndex) => {
     Children.forEach(nodes, (child) => {
       if (!isValidElement(child)) return;
       if (child.type === NavGroup) {
         const props = child.props;
         const value = props.value ?? `group:${props.label}`;
-        if (props.defaultExpanded) defaultOpen.push(value);
-        visit(props.children);
+        const index = groups.length;
+        groups.push(value);
+        if (props.defaultExpanded) defaultOpenIndexes.push(index);
+        visit(props.children, index);
         return;
       }
       if (child.type === NavItem) {
         const props = child.props;
         allRoutes.push({
           to: props.to,
-          match: props.match ?? (props.to === "/" ? "exact" : "prefix")
+          match: props.match ?? (props.to === "/" ? "exact" : "prefix"),
+          groupIndex
         });
         return;
       }
       const wrapperChildren = child.props.children;
-      if (wrapperChildren !== void 0) visit(wrapperChildren);
+      if (wrapperChildren !== void 0) visit(wrapperChildren, groupIndex);
     });
   };
-  visit(children);
-  return { allRoutes, defaultOpen };
+  visit(children, -1);
+  return { allRoutes, groups, defaultOpenIndexes };
 }
 function bestRouteMatch(routes, pathname) {
   const normalize = (p) => p.length > 1 && p.endsWith("/") ? p.slice(0, -1) : p;
   const target = normalize(pathname);
   let best;
   let bestLen = -1;
-  for (const { to, match } of routes) {
-    const route = normalize(to);
-    const matches = route === target || match === "prefix" && (route === "/" || target.startsWith(route + "/"));
+  for (const candidate of routes) {
+    const route = normalize(candidate.to);
+    const matches = route === target || candidate.match === "prefix" && (route === "/" || target.startsWith(route + "/"));
     if (matches && route.length > bestLen) {
-      best = to;
+      best = candidate;
       bestLen = route.length;
     }
   }
@@ -14386,8 +14475,40 @@ var useStyles12 = makeStyles({
   mergedButtons: {
     display: "flex",
     flexWrap: "wrap",
-    gap: tokens.spacingHorizontalS
+    gap: tokens.spacingHorizontalL
+  },
+  // One culture group: language label + inspect button + download button, kept together.
+  mergedCulture: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalXS
+  },
+  mergedCultureLabel: { fontSize: tokens.fontSizeBase200 },
+  dialogSurface: { maxWidth: "1100px", width: "90vw" },
+  dialogToolbar: {
+    display: "flex",
+    alignItems: "center",
+    gap: tokens.spacingHorizontalM,
+    flexWrap: "wrap",
+    marginBottom: tokens.spacingVerticalS
+  },
+  // Scroll viewport for the merged grid so a tall result set scrolls inside the dialog.
+  dialogGrid: { maxHeight: "60vh", overflowY: "auto", overflowX: "auto" },
+  // Merged-snapshot cells. Keys and sources are long single tokens (dotted keys,
+  // backslash-only absolute paths) with no natural break opportunity, so without
+  // this the text paints straight over the neighbouring column. `overflow-wrap:
+  // anywhere` (not just `break-word`) is what makes the flex cell honour its
+  // column width — it counts the soft breaks toward min-content — so the token
+  // wraps inside the column instead of stretching it. Same recipe as
+  // `sourceCell` in the per-source loads table above.
+  mergedCell: {
+    whiteSpace: "normal",
+    overflowWrap: "anywhere",
+    wordBreak: "break-word"
   },
+  filterInput: { minWidth: "260px" },
+  pager: { display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS },
+  grow: { flex: 1 },
   sectionBody: {
     display: "flex",
     flexDirection: "column",
@@ -14406,6 +14527,15 @@ function downloadBytes(fileName, data, contentType = "application/json") {
   anchor.click();
   URL.revokeObjectURL(url);
 }
+var kindKeyOf = (kind) => KIND_KEY[Number(kind)] ?? "tablemetadata";
+function cultureLabel(culture) {
+  try {
+    const name = new Intl.DisplayNames(void 0, { type: "language" }).of(culture);
+    return name && name.toLowerCase() !== culture.toLowerCase() ? `${name} (${culture})` : culture;
+  } catch {
+    return culture;
+  }
+}
 function LocalizationAdmin({ className }) {
   const styles = useStyles12();
   const t = useT();
@@ -14415,6 +14545,7 @@ function LocalizationAdmin({ className }) {
   const [isReloading, setIsReloading] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [message, setMessage] = useState();
+  const [mergedDialogCulture, setMergedDialogCulture] = useState(null);
   const loadOverview = useCallback(async () => {
     try {
       const value = await ppp.getLocalizationOverviewAsync();
@@ -14572,17 +14703,44 @@ function LocalizationAdmin({ className }) {
       /* @__PURE__ */ jsx(LocalizationTranslator, {}),
       availableCultures.length > 0 && /* @__PURE__ */ jsx(Section, { headerText: t("app.localization-admin.download-merged-title"), borderVisible: true, children: /* @__PURE__ */ jsx(SectionColumn, { children: /* @__PURE__ */ jsxs("div", { className: styles.sectionBody, children: [
         /* @__PURE__ */ jsx(Text, { children: t("app.localization-admin.download-merged-description") }),
-        /* @__PURE__ */ jsx("div", { className: styles.mergedButtons, children: availableCultures.map((culture) => /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "outline",
-            disabled: isDownloading,
-            icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
-            onClick: () => onDownloadMerged(culture),
-            children: culture
-          },
-          culture
-        )) })
+        /* @__PURE__ */ jsx("div", { className: styles.mergedButtons, children: availableCultures.map((culture) => /* @__PURE__ */ jsxs("div", { className: styles.mergedCulture, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.mergedCultureLabel, children: cultureLabel(culture) }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: t("app.localization-admin.view-merged-tooltip", [
+                cultureLabel(culture)
+              ]),
+              relationship: "label",
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "outline",
+                  icon: /* @__PURE__ */ jsx(EyeRegular, {}),
+                  onClick: () => setMergedDialogCulture(culture)
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: t("app.localization-admin.download-merged-tooltip", [
+                cultureLabel(culture)
+              ]),
+              relationship: "label",
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  appearance: "subtle",
+                  disabled: isDownloading,
+                  icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
+                  onClick: () => onDownloadMerged(culture)
+                }
+              )
+            }
+          )
+        ] }, culture)) })
       ] }) }) }),
       /* @__PURE__ */ jsx(Section, { headerText: t("app.localization-admin.sources-title"), borderVisible: true, children: /* @__PURE__ */ jsx(SectionColumn, { children: /* @__PURE__ */ jsxs("div", { className: styles.sectionBody, children: [
         /* @__PURE__ */ jsx(Text, { children: t("app.localization-admin.sources-description") }),
@@ -14613,7 +14771,22 @@ function LocalizationAdmin({ className }) {
       ] }) }) })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: mergeClasses("ppp-localization-admin", styles.root, className), children: content });
+  return /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-localization-admin", styles.root, className), children: [
+    content,
+    mergedDialogCulture !== null && /* @__PURE__ */ jsx(
+      MergedSourcesDialog,
+      {
+        culture: mergedDialogCulture,
+        label: cultureLabel(mergedDialogCulture),
+        onClose: () => setMergedDialogCulture(null),
+        onDownload: () => onDownloadMerged(mergedDialogCulture),
+        isDownloading,
+        ppp,
+        t,
+        styles
+      }
+    )
+  ] });
 }
 function ConfigRow({ styles, label, value }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -14663,6 +14836,177 @@ function SourceRow({
     )) }) })
   ] });
 }
+var MERGED_PAGE_SIZE = 100;
+function MergedSourcesDialog({
+  culture,
+  label,
+  onClose,
+  onDownload,
+  isDownloading,
+  ppp,
+  t,
+  styles
+}) {
+  const [entries, setEntries] = useState(null);
+  const [loadError, setLoadError] = useState();
+  const [filter, setFilter] = useState("");
+  const [page, setPage] = useState(0);
+  const [sortState, setSortState] = useState({
+    sortColumn: "key",
+    sortDirection: "ascending"
+  });
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const value = await ppp.getMergedLocalizationEntriesAsync(culture);
+        if (!cancelled) {
+          setEntries(value);
+          setLoadError(void 0);
+        }
+      } catch (reason) {
+        if (!cancelled) {
+          setEntries(null);
+          setLoadError(reason instanceof Error ? reason.message : String(reason));
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [ppp, culture]);
+  const columns = useMemo(
+    () => [
+      createTableColumn({
+        columnId: "key",
+        compare: (a, b) => a.key.localeCompare(b.key),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-key"),
+        renderCell: (item) => item.key
+      }),
+      createTableColumn({
+        columnId: "kind",
+        compare: (a, b) => Number(a.sourceKind) - Number(b.sourceKind),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-kind"),
+        renderCell: (item) => t(`app.localization-admin.kind-${kindKeyOf(item.sourceKind)}`)
+      }),
+      createTableColumn({
+        columnId: "source",
+        compare: (a, b) => a.sourceDisplayName.localeCompare(b.sourceDisplayName),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-source"),
+        renderCell: (item) => item.sourceDisplayName
+      }),
+      createTableColumn({
+        columnId: "value",
+        compare: (a, b) => a.value.localeCompare(b.value),
+        renderHeaderCell: () => t("app.localization-admin.merged-column-value"),
+        renderCell: (item) => item.value
+      })
+    ],
+    [t]
+  );
+  const filtered = useMemo(() => {
+    if (!entries) return [];
+    const q = filter.trim().toLowerCase();
+    const base = q ? entries.filter(
+      (e) => e.key.toLowerCase().includes(q) || e.value.toLowerCase().includes(q) || e.sourceDisplayName.toLowerCase().includes(q)
+    ) : entries;
+    return [...base];
+  }, [entries, filter]);
+  const sorted = useMemo(() => {
+    const column = columns.find((c) => c.columnId === sortState.sortColumn);
+    if (!column?.compare) return filtered;
+    const sign = sortState.sortDirection === "ascending" ? 1 : -1;
+    return [...filtered].sort((a, b) => sign * column.compare(a, b));
+  }, [filtered, columns, sortState]);
+  useEffect(() => {
+    setPage(0);
+  }, [filter, sortState]);
+  const pageCount = Math.max(1, Math.ceil(sorted.length / MERGED_PAGE_SIZE));
+  const currentPage = Math.min(page, pageCount - 1);
+  const paged = sorted.slice(currentPage * MERGED_PAGE_SIZE, currentPage * MERGED_PAGE_SIZE + MERGED_PAGE_SIZE);
+  const columnSizingOptions = useMemo(
+    () => ({
+      key: { minWidth: 200, defaultWidth: 320 },
+      kind: { minWidth: 110, defaultWidth: 140 },
+      source: { minWidth: 200, defaultWidth: 300 },
+      value: { minWidth: 200, defaultWidth: 360 }
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (_event, data) => !data.open && onClose(), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.dialogSurface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(DialogTitle, { children: t("app.localization-admin.merged-dialog-title", [label]) }),
+    /* @__PURE__ */ jsx(DialogContent, { children: loadError !== void 0 ? /* @__PURE__ */ jsx(MessageBar, { intent: "error", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t("app.localization-admin.merged-load-failed", [loadError]) }) }) : entries === null ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.dialogToolbar, children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            className: styles.filterInput,
+            value: filter,
+            onChange: (_event, data) => setFilter(data.value),
+            contentBefore: /* @__PURE__ */ jsx(SearchRegular, {}),
+            placeholder: t("app.localization-admin.merged-filter-placeholder")
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styles.lastReloaded, children: t("app.localization-admin.merged-count", [sorted.length, entries.length]) }),
+        /* @__PURE__ */ jsx("span", { className: styles.grow }),
+        pageCount > 1 && /* @__PURE__ */ jsxs("span", { className: styles.pager, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              appearance: "subtle",
+              disabled: currentPage === 0,
+              onClick: () => setPage(currentPage - 1),
+              children: t("app.localization-admin.merged-prev")
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: styles.lastReloaded, children: t("app.localization-admin.merged-page", [currentPage + 1, pageCount]) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              appearance: "subtle",
+              disabled: currentPage >= pageCount - 1,
+              onClick: () => setPage(currentPage + 1),
+              children: t("app.localization-admin.merged-next")
+            }
+          )
+        ] })
+      ] }),
+      sorted.length === 0 ? /* @__PURE__ */ jsx(MessageBar, { intent: "info", children: /* @__PURE__ */ jsx(MessageBarBody, { children: t("app.localization-admin.merged-empty") }) }) : /* @__PURE__ */ jsx("div", { className: styles.dialogGrid, children: /* @__PURE__ */ jsxs(
+        DataGrid,
+        {
+          items: paged,
+          columns,
+          sortable: true,
+          resizableColumns: true,
+          sortState,
+          onSortChange: (_event, next) => setSortState(next),
+          columnSizingOptions,
+          getRowId: (item) => item.key,
+          size: "small",
+          children: [
+            /* @__PURE__ */ jsx(DataGridHeader, { children: /* @__PURE__ */ jsx(DataGridRow, { children: ({ renderHeaderCell }) => /* @__PURE__ */ jsx(DataGridHeaderCell, { children: renderHeaderCell() }) }) }),
+            /* @__PURE__ */ jsx(DataGridBody, { children: ({ item, rowId }) => /* @__PURE__ */ jsx(DataGridRow, { children: ({ renderCell }) => /* @__PURE__ */ jsx(DataGridCell, { className: styles.mergedCell, children: renderCell(item) }) }, rowId) })
+          ]
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "primary",
+          icon: /* @__PURE__ */ jsx(ArrowDownloadRegular, {}),
+          disabled: isDownloading,
+          onClick: onDownload,
+          children: t("app.localization-admin.merged-download-button")
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { appearance: "secondary", icon: /* @__PURE__ */ jsx(DismissRegular, {}), onClick: onClose, children: t("app.buttons.close.label") })
+    ] })
+  ] }) }) });
+}
 var useStyles13 = makeStyles({
   root: {
     display: "flex",