@powerportalspro/react-fluent 5.0.0 → 6.0.0

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, MoreHorizontal20Regular, ChevronDoubleLeft20Regular, ChevronLeft20Regular, ChevronDoubleRight20Regular, Info12Regular, Checkmark16Regular, Dismiss16Regular, DocumentText20Regular, FolderZip20Regular, MusicNote220Regular, Video20Regular, Image20Regular, SlideText20Regular, DocumentTable20Regular, DocumentPdf20Regular } 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';
@@ -2468,6 +2468,7 @@ var ImageViewer = forwardRef(function ImageViewer2({
   const selectionRef = useRef(selection);
   selectionRef.current = selection;
   const prevTransformRef = useRef({ angle, zoom, pan, flipH, flipV });
+  const resizingRef = useRef(false);
   const dragRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const zoomRef = useRef(zoom);
@@ -2497,6 +2498,7 @@ var ImageViewer = forwardRef(function ImageViewer2({
     const cur = { angle, zoom, pan, flipH, flipV };
     const transformChanged = prev.angle !== cur.angle || prev.zoom !== cur.zoom || prev.pan.x !== cur.pan.x || prev.pan.y !== cur.pan.y || prev.flipH !== cur.flipH || prev.flipV !== cur.flipV;
     if (transformChanged) {
+      resizingRef.current = false;
       const sel = selectionRef.current;
       const imgEl = imgRef.current;
       if (sel && imgEl) {
@@ -2527,6 +2529,51 @@ var ImageViewer = forwardRef(function ImageViewer2({
     }
     prevTransformRef.current = cur;
   }, [angle, zoom, pan, flipH, flipV]);
+  useEffect(() => {
+    if (!toolbar) return;
+    const container = imageContainerRef.current;
+    if (!container) return;
+    let prevMetrics = imgRef.current ? readImageLayoutMetrics(imgRef.current) : null;
+    const observer = new ResizeObserver(() => {
+      const imgEl = imgRef.current;
+      if (!imgEl) return;
+      const newMetrics = readImageLayoutMetrics(imgEl);
+      if (!newMetrics) return;
+      const sel = selectionRef.current;
+      const layoutChanged = !prevMetrics || prevMetrics.layoutW !== newMetrics.layoutW || prevMetrics.layoutH !== newMetrics.layoutH || prevMetrics.offsetLeft !== newMetrics.offsetLeft || prevMetrics.offsetTop !== newMetrics.offsetTop;
+      if (sel && prevMetrics && layoutChanged) {
+        const natural = containerRectToImageNatural(
+          sel,
+          imgEl,
+          angleRef.current,
+          zoomRef.current,
+          panRef.current,
+          flipHRef.current,
+          flipVRef.current,
+          prevMetrics
+        );
+        if (natural) {
+          const reprojected = imageNaturalRectToContainer(
+            natural,
+            imgEl,
+            angleRef.current,
+            zoomRef.current,
+            panRef.current,
+            flipHRef.current,
+            flipVRef.current,
+            newMetrics
+          );
+          if (reprojected) {
+            resizingRef.current = true;
+            setSelection(reprojected);
+          }
+        }
+      }
+      prevMetrics = newMetrics;
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [toolbar]);
   const onDirtyChangedRef = useRef(onDirtyChanged);
   onDirtyChangedRef.current = onDirtyChanged;
   useEffect(() => {
@@ -3280,7 +3327,7 @@ var ImageViewer = forwardRef(function ImageViewer2({
                     // pointermove (which is what changes the selection during
                     // a drag) calls setSelection — that triggers a re-render
                     // which reads the current dragRef value.
-                    transition: dragRef.current ? "none" : "left 120ms ease-out, top 120ms ease-out, width 120ms ease-out, height 120ms ease-out"
+                    transition: dragRef.current || resizingRef.current ? "none" : "left 120ms ease-out, top 120ms ease-out, width 120ms ease-out, height 120ms ease-out"
                   },
                   children: [
                     showThirds && /* @__PURE__ */ jsxs("div", { className: styles.thirdsGuide, "aria-hidden": "true", children: [
@@ -3441,6 +3488,21 @@ function useImageSrc(source) {
     return source.value ? `data:${resolveMimeType(source)};base64,${source.value}` : null;
   return bytesUrlRef.current;
 }
+function readImageLayoutMetrics(imageEl) {
+  const layoutW = imageEl.offsetWidth;
+  const layoutH = imageEl.offsetHeight;
+  const naturalW = imageEl.naturalWidth;
+  const naturalH = imageEl.naturalHeight;
+  if (layoutW === 0 || layoutH === 0 || naturalW === 0 || naturalH === 0) return null;
+  return {
+    layoutW,
+    layoutH,
+    offsetLeft: imageEl.offsetLeft,
+    offsetTop: imageEl.offsetTop,
+    naturalW,
+    naturalH
+  };
+}
 function getDisplayedImageBounds(imageEl, angle, zoom, pan, flipH, flipV) {
   const layoutW = imageEl.offsetWidth;
   const layoutH = imageEl.offsetHeight;
@@ -3483,15 +3545,13 @@ function getDisplayedImageBounds(imageEl, angle, zoom, pan, flipH, flipV) {
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
-function containerRectToImageNatural(rect, imageEl, angle, zoom, pan, flipH, flipV) {
-  const layoutW = imageEl.offsetWidth;
-  const layoutH = imageEl.offsetHeight;
-  const naturalW = imageEl.naturalWidth;
-  const naturalH = imageEl.naturalHeight;
-  if (layoutW === 0 || layoutH === 0 || naturalW === 0 || naturalH === 0) return null;
+function containerRectToImageNatural(rect, imageEl, angle, zoom, pan, flipH, flipV, metricsOverride) {
+  const m = metricsOverride ?? readImageLayoutMetrics(imageEl);
+  if (!m) return null;
+  const { layoutW, layoutH, naturalW, naturalH } = m;
   const containScale = Math.min(layoutW / naturalW, layoutH / naturalH);
-  const imgCenterX = imageEl.offsetLeft + layoutW / 2;
-  const imgCenterY = imageEl.offsetTop + layoutH / 2;
+  const imgCenterX = m.offsetLeft + layoutW / 2;
+  const imgCenterY = m.offsetTop + layoutH / 2;
   const sx = zoom * (flipH ? -1 : 1);
   const sy = zoom * (flipV ? -1 : 1);
   if (sx === 0 || sy === 0) return null;
@@ -3524,15 +3584,13 @@ function containerRectToImageNatural(rect, imageEl, angle, zoom, pan, flipH, fli
   }
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
-function imageNaturalRectToContainer(rect, imageEl, angle, zoom, pan, flipH, flipV) {
-  const layoutW = imageEl.offsetWidth;
-  const layoutH = imageEl.offsetHeight;
-  const naturalW = imageEl.naturalWidth;
-  const naturalH = imageEl.naturalHeight;
-  if (layoutW === 0 || layoutH === 0 || naturalW === 0 || naturalH === 0) return null;
+function imageNaturalRectToContainer(rect, imageEl, angle, zoom, pan, flipH, flipV, metricsOverride) {
+  const m = metricsOverride ?? readImageLayoutMetrics(imageEl);
+  if (!m) return null;
+  const { layoutW, layoutH, naturalW, naturalH } = m;
   const containScale = Math.min(layoutW / naturalW, layoutH / naturalH);
-  const imgCenterX = imageEl.offsetLeft + layoutW / 2;
-  const imgCenterY = imageEl.offsetTop + layoutH / 2;
+  const imgCenterX = m.offsetLeft + layoutW / 2;
+  const imgCenterY = m.offsetTop + layoutH / 2;
   const sx = zoom * (flipH ? -1 : 1);
   const sy = zoom * (flipV ? -1 : 1);
   const rad = angle * Math.PI / 180;
@@ -4410,6 +4468,69 @@ function ZipViewer({
     }
   );
 }
+function ZipEntryIcon({ fileName, className }) {
+  switch (getFileExtension(fileName)) {
+    case "pdf":
+      return /* @__PURE__ */ jsx(DocumentPdf20Regular, { className });
+    case "xls":
+    case "xlsx":
+    case "csv":
+    case "ods":
+      return /* @__PURE__ */ jsx(DocumentTable20Regular, { className });
+    case "ppt":
+    case "pptx":
+    case "odp":
+      return /* @__PURE__ */ jsx(SlideText20Regular, { className });
+    case "png":
+    case "jpg":
+    case "jpeg":
+    case "gif":
+    case "bmp":
+    case "webp":
+    case "svg":
+    case "ico":
+    case "tif":
+    case "tiff":
+      return /* @__PURE__ */ jsx(Image20Regular, { className });
+    case "mp4":
+    case "mov":
+    case "avi":
+    case "mkv":
+    case "webm":
+    case "m4v":
+      return /* @__PURE__ */ jsx(Video20Regular, { className });
+    case "mp3":
+    case "wav":
+    case "ogg":
+    case "flac":
+    case "m4a":
+    case "aac":
+      return /* @__PURE__ */ jsx(MusicNote220Regular, { className });
+    case "zip":
+    case "7z":
+    case "rar":
+    case "tar":
+    case "gz":
+      return /* @__PURE__ */ jsx(FolderZip20Regular, { className });
+    case "txt":
+    case "md":
+    case "markdown":
+    case "log":
+    case "json":
+    case "xml":
+    case "yaml":
+    case "yml":
+    case "html":
+    case "htm":
+    case "js":
+    case "ts":
+    case "cs":
+    case "css":
+      return /* @__PURE__ */ jsx(DocumentText20Regular, { className });
+    default:
+      return /* @__PURE__ */ jsx(Document20Regular, { className });
+  }
+}
 function ZipTreeNode({ node, depth, expanded, selected, onToggle, onSelect }) {
   const styles = useFileViewerStyles();
   const isExpanded = expanded.has(node.fullPath);
@@ -4468,7 +4589,7 @@ function ZipTreeNode({ node, depth, expanded, selected, onToggle, onSelect }) {
       style: indent,
       children: [
         /* @__PURE__ */ jsx("span", { className: styles.zipChevronSpacer }),
-        /* @__PURE__ */ jsx(Document20Regular, { className: styles.zipIcon }),
+        /* @__PURE__ */ jsx(ZipEntryIcon, { fileName: node.name, className: styles.zipIcon }),
         /* @__PURE__ */ jsx("span", { className: styles.zipName, children: node.name })
       ]
     }
@@ -5113,11 +5234,13 @@ var useFileViewerStyles = makeStyles({
       outlineOffset: "-1px"
     }
   },
+  // Selection style ported from the Blazor zip viewer: a subtle accent tint over
+  // the row (text stays its normal color), intensifying slightly on hover so the
+  // neutral row-hover doesn't wash out the selection.
   zipRowSelected: {
-    backgroundColor: tokens.colorBrandBackground2,
-    color: tokens.colorBrandForeground2,
+    backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 12%, transparent)`,
     ":hover": {
-      backgroundColor: tokens.colorBrandBackground2Hover
+      backgroundColor: `color-mix(in srgb, ${tokens.colorBrandBackground} 18%, transparent)`
     }
   },
   zipChevron: {
@@ -8892,7 +9015,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;
@@ -11656,15 +11785,11 @@ function ManyToManyLookupEdit({
     return relatedPrimaryName;
   }, [resolvedColumns, relatedPrimaryName]);
   const lastSeededRecordIdRef = useRef(void 0);
-  const lastSeededViewIdRef = useRef(void 0);
   useEffect(() => {
     if (initialLoad.status !== QueryStatus.Success || !initialLoad.data) return;
     if (!primaryNameColumn || !parentRecord) return;
-    if (lastSeededRecordIdRef.current === parentRefId && lastSeededViewIdRef.current === selectedViewId) {
-      return;
-    }
+    if (lastSeededRecordIdRef.current === parentRefId) return;
     lastSeededRecordIdRef.current = parentRefId;
-    lastSeededViewIdRef.current = selectedViewId;
     const seeded = initialLoad.data.tableRecords.map((r) => ({
       id: r.id,
       displayName: resolveDisplayName(r, primaryNameColumn) ?? "",
@@ -11673,7 +11798,7 @@ function ManyToManyLookupEdit({
     setInitialSelection(seeded);
     setPendingAdds([]);
     setPendingRemoveIds([]);
-  }, [initialLoad.status, initialLoad.data, parentRecord, primaryNameColumn, selectedViewId]);
+  }, [initialLoad.status, initialLoad.data, parentRecord, primaryNameColumn, parentRefId]);
   const [query, setQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
   const [searchResults, setSearchResults] = useState([]);
@@ -11785,7 +11910,6 @@ function ManyToManyLookupEdit({
         setPendingAdds([]);
         setPendingRemoveIds([]);
         lastSeededRecordIdRef.current = void 0;
-        lastSeededViewIdRef.current = void 0;
       },
       // Cancel/Discard: just drop the pending adds/removes; the
       // seed-guard refs stay so the initial selection (already loaded
@@ -13440,27 +13564,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
@@ -13490,42 +13644,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;
     }
   }
@@ -14268,8 +14426,28 @@ 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" },
+  filterInput: { minWidth: "260px" },
+  pager: { display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS },
+  grow: { flex: 1 },
   sectionBody: {
     display: "flex",
     flexDirection: "column",
@@ -14288,6 +14466,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();
@@ -14297,6 +14484,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();
@@ -14454,17 +14642,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") }),
@@ -14495,7 +14710,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: [
@@ -14545,6 +14775,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, { 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",