@powerportalspro/react-fluent 6.1.0 → 7.0.0

package/dist/index.js

@@ -1,9 +1,9 @@
-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 { 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, MessageBarTitle, MessageBarActions, OverlayDrawer, DrawerHeader, DrawerHeaderTitle, DrawerBody, useOverflowMenu, useIsOverflowItemVisible, Title3, Table, TableHeader, TableRow, TableHeaderCell, TableBody, TableCell, createTableColumn, DataGrid, DataGridHeader, DataGridRow, DataGridHeaderCell, DataGridBody, DataGridCell, DialogTrigger } from '@fluentui/react-components';
+import { MaskMode, useMaskedTextField, useT, usePowerPortalsPro, useRecordContext, useColumnMetadata, useLocale, useRecordContextOptional, 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, 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, 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 { 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, Person20Regular, Warning20Regular, EyeTracking20Regular, 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, canReadColumn, getRecordReferenceId, RelationshipFilterMode, ImpersonateResult, SwitchIdentityResult, PortalUserType, TableSecurityPermission, canWriteColumn } from '@powerportalspro/core';
 import { DatePicker } from '@fluentui/react-datepicker-compat';
 import { TimePicker } from '@fluentui/react-timepicker-compat';
 import { unzipSync } from 'fflate';
@@ -289,8 +289,12 @@ function isRecordWriteDenied(record) {
   const perms = record.permissions ?? 0;
   return (perms & TableSecurityPermission.Write) === 0;
 }
-function resolveEditState(metadata, record, explicitReadOnly, explicitDisabled) {
-  if (isRecordWriteDenied(record)) {
+function isColumnWriteDenied(record, columnName) {
+  if (!record || !columnName) return false;
+  return !canWriteColumn(record, columnName);
+}
+function resolveEditState(metadata, record, explicitReadOnly, explicitDisabled, columnName) {
+  if (isRecordWriteDenied(record) || isColumnWriteDenied(record, columnName)) {
     return { readOnly: true, disabled: true };
   }
   return {
@@ -718,7 +722,8 @@ function TextEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -812,7 +817,8 @@ function MemoEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -926,7 +932,8 @@ function BoolEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const isInactive = resolvedDisabled || resolvedReadOnly;
@@ -1102,7 +1109,8 @@ function NumberEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -1546,7 +1554,8 @@ function MoneyEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -1960,7 +1969,8 @@ function DateTimeEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const resolvedEditorType = editorType ?? resolveEditorTypeFromMetadata(metadata);
@@ -5351,7 +5361,8 @@ function FileEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const isInteractable = !resolvedReadOnly && !resolvedDisabled;
@@ -5668,7 +5679,8 @@ function ImageEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const isInteractable = !resolvedReadOnly && !resolvedDisabled;
@@ -6148,7 +6160,8 @@ function ChoiceEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const choiceMeta = getChoiceMetadata(metadata);
@@ -6368,7 +6381,8 @@ function MultiSelectChoiceEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const choiceMeta = getChoiceMetadata(metadata);
@@ -6490,30 +6504,30 @@ function foldString(s, caseSensitive) {
 function tokenizeSearch(search, delimiters) {
   if (!delimiters) return [search];
   const delim = new Set(Array.from(delimiters));
-  const tokens43 = [];
+  const tokens44 = [];
   let current = "";
   for (const ch of search) {
     if (delim.has(ch)) {
       if (current.length > 0) {
-        tokens43.push(current);
+        tokens44.push(current);
         current = "";
       }
     } else {
       current += ch;
     }
   }
-  if (current.length > 0) tokens43.push(current);
-  return tokens43;
+  if (current.length > 0) tokens44.push(current);
+  return tokens44;
 }
 function splitHighlightSegments(text, search, options) {
   if (!text || !search) return [];
   const caseSensitive = options?.caseSensitive ?? false;
   const delimiters = options?.delimiters ?? "";
-  const tokens43 = tokenizeSearch(search, delimiters);
-  if (tokens43.length === 0) return [{ text, isMatch: false }];
+  const tokens44 = tokenizeSearch(search, delimiters);
+  if (tokens44.length === 0) return [{ text, isMatch: false }];
   const folded = foldString(text, caseSensitive);
   const ranges = [];
-  for (const token of tokens43) {
+  for (const token of tokens44) {
     const tokenFolded = foldString(token, caseSensitive).folded;
     if (tokenFolded.length === 0) continue;
     let cursor2 = 0;
@@ -7284,7 +7298,11 @@ function getRendererTypeForCode(typeCode) {
 }
 function ColumnEdit(props) {
   const metadata = useColumnMetadata(props.columnName);
+  const record = useRecordContextOptional()?.record;
   const typeCode = metadata?.$type;
+  if (record && !canReadColumn(record, props.columnName)) {
+    return /* @__PURE__ */ jsx(ColumnDisplayValue, { ...props });
+  }
   switch (typeCode) {
     case 0:
       return /* @__PURE__ */ jsx(BoolEdit, { ...props });
@@ -8397,6 +8415,12 @@ var ViewSort = {
   /** Localized display name, descending. */
   NameDescending: "nameDescending"
 };
+function resolveViewLabel(view, t) {
+  const key = `tables.${view.tableName}.views.${view.id}.label`;
+  const localized = t(key);
+  if (localized !== key) return localized;
+  return view.displayName?.trim() ? view.displayName : null;
+}
 function customToViewMetadata(custom) {
   return {
     id: custom.id,
@@ -9073,7 +9097,7 @@ function MainGridImpl({
             const rowRecord = cellCtx.row.original;
             const rowId = rowRecord.id;
             const isPendingCreateRow = !!rowId && rowId.startsWith("__pending-create-");
-            if (editable && !isPendingCreateRow && hasEditorForType) {
+            if (editable && !isPendingCreateRow && hasEditorForType && canWriteColumn(rowRecord, columnName)) {
               return (
                 // Sizing wrapper — overrides Fluent v9's default
                 // <Input> / <Combobox> / <Dropdown> min-width
@@ -9763,8 +9787,8 @@ function MainGridImpl({
   };
   const selectedView = views?.find((v) => v.id === resolvedViewId);
   const selectedViewLabelKey = selectedView ? `tables.${selectedView.tableName}.views.${selectedView.id}.label` : "";
-  const selectedViewLabel = selectedView ? t(selectedViewLabelKey) : "";
-  const singleViewTitle = selectedView && selectedViewLabel !== selectedViewLabelKey ? selectedViewLabel : selectedView?.displayName ?? void 0;
+  const selectedViewLabel = selectedView ? resolveViewLabel(selectedView, t) ?? selectedViewLabelKey : "";
+  const singleViewTitle = selectedView ? resolveViewLabel(selectedView, t) ?? void 0 : void 0;
   return /* @__PURE__ */ jsx(GridContextProvider, { value: gridContextValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -9797,7 +9821,7 @@ function MainGridImpl({
                 if (data2.optionValue) handleViewChange(data2.optionValue);
               },
               children: views?.map((view) => {
-                const label = t(`tables.${view.tableName}.views.${view.id}.label`);
+                const label = resolveViewLabel(view, t) ?? `tables.${view.tableName}.views.${view.id}.label`;
                 return /* @__PURE__ */ jsx(Option, { value: view.id, text: label, children: label }, view.id);
               })
             }
@@ -10893,7 +10917,8 @@ function LookupEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setLookupValue = useGuardedSetValue(
     rawSetLookupValue,
@@ -12673,6 +12698,7 @@ function PowerPortalsProThemeProvider({
   defaultMode = ThemeMode.System,
   defaultAccentColor = "default",
   defaultTextDirection = TextDirection.Ltr,
+  lockAccentColor = false,
   customAccents,
   storageKey = DEFAULT_MODE_STORAGE_KEY,
   style,
@@ -12696,9 +12722,11 @@ function PowerPortalsProThemeProvider({
     () => readStoredMode(storageKey) ?? defaultMode
   );
   const [accentColor, setAccentColorState] = useState(() => {
+    const configured = defaultAccentColor in accentMap ? defaultAccentColor : "default";
+    if (lockAccentColor) return configured;
     const stored = readStoredString(accentStorageKey);
     if (stored && stored in accentMap) return stored;
-    return defaultAccentColor in accentMap ? defaultAccentColor : "default";
+    return configured;
   });
   const [textDirection, setTextDirectionState] = useState(
     () => readStoredDirection(directionStorageKey) ?? defaultTextDirection
@@ -12728,6 +12756,12 @@ function PowerPortalsProThemeProvider({
     document.body.classList.toggle("ppp-theme-dark", isDark);
     document.body.classList.toggle("ppp-theme-light", !isDark);
   }, [isDark]);
+  useEffect(() => {
+    if (!lockAccentColor) return;
+    const configured = defaultAccentColor in accentMap ? defaultAccentColor : "default";
+    setAccentColorState(configured);
+    writeStored(accentStorageKey, configured);
+  }, [lockAccentColor, defaultAccentColor, accentMap, accentStorageKey]);
   const setMode = useCallback(
     (next) => {
       setModeState(next);
@@ -12737,11 +12771,12 @@ function PowerPortalsProThemeProvider({
   );
   const setAccentColor = useCallback(
     (next) => {
+      if (lockAccentColor) return;
       if (!(next in accentMap)) return;
       setAccentColorState(next);
       writeStored(accentStorageKey, next);
     },
-    [accentMap, accentStorageKey]
+    [lockAccentColor, accentMap, accentStorageKey]
   );
   const setTextDirection = useCallback(
     (next) => {
@@ -12766,6 +12801,7 @@ function PowerPortalsProThemeProvider({
       setAccentColor,
       availableAccents,
       accentColors,
+      accentColorLocked: lockAccentColor,
       textDirection,
       setTextDirection
     }),
@@ -12777,6 +12813,7 @@ function PowerPortalsProThemeProvider({
       setAccentColor,
       availableAccents,
       accentColors,
+      lockAccentColor,
       textDirection,
       setTextDirection
     ]
@@ -12857,7 +12894,7 @@ function ThemeColorSelector({
   width,
   accentLabels
 }) {
-  const { accentColor, setAccentColor, availableAccents, accentColors } = useTheme();
+  const { accentColor, setAccentColor, availableAccents, accentColors, accentColorLocked } = useTheme();
   const t = useT();
   const labelId = useId();
   const styles = useStyles6();
@@ -12871,6 +12908,7 @@ function ThemeColorSelector({
     },
     [t, accentLabels]
   );
+  if (accentColorLocked) return null;
   const handleOptionSelect = (_event, data) => {
     const next = data.optionValue;
     if (next && availableAccents.includes(next)) {
@@ -13038,7 +13076,304 @@ function LanguageDropdown({
     }
   );
 }
+var MINIMUM_QUERY_LENGTH = 3;
+var MAXIMUM_RESULTS = 50;
+var SEARCH_DEBOUNCE_MS4 = 300;
+var GUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 var useStyles7 = makeStyles({
+  surface: {
+    maxWidth: "480px",
+    display: "flex",
+    flexDirection: "column"
+  },
+  titleRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    columnGap: tokens.spacingHorizontalS
+  },
+  titleText: {
+    flexGrow: 1,
+    minWidth: 0
+  },
+  body: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: tokens.spacingVerticalM,
+    paddingTop: tokens.spacingVerticalM
+  },
+  results: {
+    display: "flex",
+    flexDirection: "column",
+    // Fixed height, not min/max: a list that resizes on every keystroke makes the confirm button
+    // jump around under the pointer while the administrator is still reading.
+    height: "280px",
+    overflowY: "auto",
+    // Full shorthand — griffel types `borderColor` and friends as `never`, so the longhand
+    // properties aren't usable here.
+    border: `1px solid ${tokens.colorNeutralStroke1}`,
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground1
+  },
+  result: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: tokens.spacingHorizontalS,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    cursor: "pointer",
+    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
+    textAlign: "left",
+    background: "none",
+    // A native <button> does NOT inherit colour or font from its container — the user-agent
+    // stylesheet gives it `color: buttontext` and its own font stack. Without these three the
+    // rows rendered as near-black text on the dark surface in dark mode, which is how this was
+    // first spotted. Set explicitly rather than relying on inheritance.
+    color: tokens.colorNeutralForeground1,
+    fontFamily: "inherit",
+    fontSize: tokens.fontSizeBase300,
+    // The UA also gives buttons a border; `background: none` alone leaves it drawing a box
+    // around every row. Only three sides — borderBottom above is the row separator.
+    borderTop: "none",
+    borderRight: "none",
+    borderLeft: "none",
+    ":hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover
+    },
+    ":focus-visible": {
+      outline: `2px solid ${tokens.colorStrokeFocus2}`,
+      outlineOffset: "-2px"
+    }
+  },
+  resultSelected: {
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    ":hover": {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      // Repeated because the base row's :hover also sets colour, and whichever griffel emits
+      // last would otherwise win — leaving selected-and-hovered text unreadable on the brand fill.
+      color: tokens.colorNeutralForegroundOnBrand
+    }
+  },
+  resultText: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0
+  },
+  name: {
+    fontSize: tokens.fontSizeBase300,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  email: {
+    fontSize: tokens.fontSizeBase200,
+    opacity: 0.8,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  status: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: tokens.spacingHorizontalS,
+    padding: tokens.spacingVerticalXL,
+    color: tokens.colorNeutralForeground3,
+    fontSize: tokens.fontSizeBase200
+  },
+  warning: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    columnGap: tokens.spacingHorizontalS,
+    padding: `${tokens.spacingVerticalS} ${tokens.spacingHorizontalM}`,
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground2,
+    borderLeft: `3px solid ${tokens.colorPaletteRedBackground3}`,
+    fontSize: tokens.fontSizeBase200
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    columnGap: tokens.spacingHorizontalS,
+    paddingTop: tokens.spacingVerticalM
+  }
+});
+function ImpersonationPickerDialog({
+  open,
+  onClose,
+  returnUrl = "/",
+  className
+}) {
+  const auth = useAuth();
+  const styles = useStyles7();
+  const t = useT();
+  const { searchImpersonationTargets, impersonate } = auth;
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [selected, setSelected] = useState(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const [hasMore, setHasMore] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const requestIdRef = useRef(0);
+  useEffect(() => {
+    if (open) return;
+    setQuery("");
+    setResults([]);
+    setSelected(null);
+    setIsSearching(false);
+    setHasSearched(false);
+    setHasMore(false);
+    setIsStarting(false);
+  }, [open]);
+  const trimmed = query.trim();
+  const isTooShort = trimmed.length > 0 && trimmed.length < MINIMUM_QUERY_LENGTH;
+  useEffect(() => {
+    if (!open) return;
+    const requestId = ++requestIdRef.current;
+    if (trimmed.length < MINIMUM_QUERY_LENGTH && !GUID_PATTERN.test(trimmed)) {
+      setResults([]);
+      setHasSearched(false);
+      setHasMore(false);
+      setIsSearching(false);
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(async () => {
+      setIsSearching(true);
+      try {
+        const response = await searchImpersonationTargets(trimmed);
+        if (cancelled || requestId !== requestIdRef.current) return;
+        setResults(response.results ?? []);
+        setHasMore(response.hasMore ?? false);
+        setHasSearched(true);
+      } catch {
+        if (cancelled || requestId !== requestIdRef.current) return;
+        setResults([]);
+        setHasMore(false);
+        setHasSearched(true);
+      } finally {
+        if (!cancelled && requestId === requestIdRef.current) {
+          setIsSearching(false);
+        }
+      }
+    }, SEARCH_DEBOUNCE_MS4);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [open, searchImpersonationTargets, trimmed]);
+  const handleQueryChange = useCallback((value) => {
+    setQuery(value);
+    setSelected(null);
+  }, []);
+  const handleConfirm = useCallback(async () => {
+    if (!selected?.contactId) return;
+    setIsStarting(true);
+    try {
+      const response = await impersonate(selected.contactId);
+      if (response.result === ImpersonateResult.Started) {
+        window.location.assign(returnUrl);
+        return;
+      }
+      setIsStarting(false);
+      onClose();
+    } catch {
+      setIsStarting(false);
+    }
+  }, [impersonate, onClose, returnUrl, selected]);
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => {
+    if (!data.open) onClose();
+  }, children: /* @__PURE__ */ jsxs(
+    DialogSurface,
+    {
+      className: mergeClasses("ppp-impersonation-picker-dialog", styles.surface, className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.titleRow, children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: styles.titleText, children: t("app.components.impersonation-picker.title") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "subtle",
+              icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
+              "aria-label": t("app.components.impersonation-picker.cancel"),
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
+          /* @__PURE__ */ jsx(
+            SearchBox,
+            {
+              value: query,
+              onChange: (_, data) => handleQueryChange(data.value),
+              placeholder: t("app.components.impersonation-picker.search-placeholder"),
+              appearance: "outline",
+              style: { width: "100%" }
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: styles.results, role: "listbox", children: isSearching ? /* @__PURE__ */ jsxs("div", { className: styles.status, children: [
+            /* @__PURE__ */ jsx(Spinner, { size: "tiny" }),
+            /* @__PURE__ */ jsx("span", { children: t("app.components.impersonation-picker.searching") })
+          ] }) : isTooShort ? (
+            // Distinct from "no matches": the search hasn't run. Conflating the two reads as
+            // "this person doesn't exist" when the user has simply typed too few characters.
+            /* @__PURE__ */ jsx("div", { className: styles.status, children: t("app.components.impersonation-picker.hint", [String(MINIMUM_QUERY_LENGTH)]) })
+          ) : hasSearched && results.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.status, children: t("app.components.impersonation-picker.no-matches") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            results.map((candidate) => {
+              const isSelected = selected?.contactId === candidate.contactId;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  className: mergeClasses(
+                    styles.result,
+                    isSelected && styles.resultSelected
+                  ),
+                  onClick: () => setSelected(candidate),
+                  children: [
+                    /* @__PURE__ */ jsx(Person20Regular, {}),
+                    /* @__PURE__ */ jsxs("span", { className: styles.resultText, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles.name, children: candidate.fullName ?? candidate.email ?? candidate.contactId }),
+                      candidate.email && /* @__PURE__ */ jsx("span", { className: styles.email, children: candidate.email })
+                    ] })
+                  ]
+                },
+                candidate.contactId
+              );
+            }),
+            hasMore && /* @__PURE__ */ jsx("div", { className: styles.status, children: t("app.components.impersonation-picker.too-many", [String(MAXIMUM_RESULTS)]) })
+          ] }) }),
+          selected && /* @__PURE__ */ jsxs("div", { className: styles.warning, children: [
+            /* @__PURE__ */ jsx(Warning20Regular, {}),
+            /* @__PURE__ */ jsx("span", { children: t("app.components.impersonation-picker.warning") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "primary",
+              icon: /* @__PURE__ */ jsx(EyeTracking20Regular, {}),
+              disabled: !selected || isStarting,
+              onClick: handleConfirm,
+              children: t("app.components.impersonation-picker.confirm")
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { appearance: "secondary", onClick: onClose, disabled: isStarting, children: t("app.components.impersonation-picker.cancel") })
+        ] })
+      ]
+    }
+  ) });
+}
+var IMPERSONATION_ROLE = "SystemAdmin";
+var useStyles8 = makeStyles({
   trigger: {
     backgroundColor: "transparent",
     border: "none",
@@ -13098,8 +13433,9 @@ function ProfileMainMenu({
   signInUrl = "/login"
 }) {
   const auth = useAuth();
-  const styles = useStyles7();
+  const styles = useStyles8();
   const t = useT();
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
   const handleLogout = useCallback(async () => {
     try {
       await auth.logout();
@@ -13116,7 +13452,14 @@ function ProfileMainMenu({
     }
   }, [auth]);
   if (auth.status === AuthStatus.Loading) {
-    return /* @__PURE__ */ jsx(Avatar, { className: "ppp-profile-main-menu", size: 28, "aria-label": t("app.messages.record-loading") });
+    return /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        className: "ppp-profile-main-menu",
+        size: 28,
+        "aria-label": t("app.messages.record-loading")
+      }
+    );
   }
   if (auth.status === AuthStatus.Anonymous) {
     if (anonymousContent !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: anonymousContent });
@@ -13137,61 +13480,126 @@ function ProfileMainMenu({
   const resolvedAccountLabel = accountLabel ?? t("app.components.profile-main-menu.account");
   const signedInAsLabel = t("app.components.profile-main-menu.signed-in-as");
   const logoutLabel = t("app.buttons.logout.label");
+  const canImpersonate = (auth.user.roles?.includes(IMPERSONATION_ROLE) ?? false) && auth.user.portalUserType === PortalUserType.SystemUser;
   const altIdentityTableName = auth.user.altIdentityTableName;
-  const switchIdentityLabel = altIdentityTableName ? t(
-    "app.components.profile-main-menu.switch-to",
-    [
-      altIdentityTableName === "systemuser" ? t("app.components.profile-main-menu.alt-kind-systemuser") : t("app.components.profile-main-menu.alt-kind-contact")
-    ]
-  ) : null;
-  return /* @__PURE__ */ jsxs(Menu, { children: [
-    /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-      "button",
+  const switchIdentityLabel = altIdentityTableName ? t("app.components.profile-main-menu.switch-to", [
+    altIdentityTableName === "systemuser" ? t("app.components.profile-main-menu.alt-kind-systemuser") : t("app.components.profile-main-menu.alt-kind-contact")
+  ]) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Menu, { children: [
+      /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: mergeClasses("ppp-profile-main-menu", styles.trigger),
+          "aria-label": email || logoutLabel,
+          children: /* @__PURE__ */ jsx(Avatar, { size: 28, initials, name: email })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs("div", { className: styles.popoverBody, children: [
+        headerSlot,
+        /* @__PURE__ */ jsxs("div", { className: styles.identity, children: [
+          /* @__PURE__ */ jsx(Avatar, { size: 40, initials, name: email }),
+          /* @__PURE__ */ jsxs("div", { className: styles.identityText, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.identityLabel, children: signedInAsLabel }),
+            /* @__PURE__ */ jsx("span", { className: styles.identityValue, title: email, children: email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsxs(MenuList, { className: styles.actions, children: [
+          accountUrl && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(PersonEdit20Regular, {}),
+              onClick: () => {
+                window.location.href = accountUrl;
+              },
+              children: resolvedAccountLabel
+            }
+          ),
+          switchIdentityLabel && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(ArrowSwap20Regular, {}),
+              onClick: handleSwitchIdentity,
+              children: switchIdentityLabel
+            }
+          ),
+          canImpersonate && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(EyeTracking20Regular, {}),
+              onClick: () => setIsPickerOpen(true),
+              children: t("app.components.profile-main-menu.impersonate")
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(SignOut20Regular, {}), onClick: handleLogout, children: logoutLabel })
+        ] }),
+        footerSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          footerSlot
+        ] })
+      ] }) })
+    ] }),
+    canImpersonate && /* @__PURE__ */ jsx(
+      ImpersonationPickerDialog,
       {
-        type: "button",
-        className: mergeClasses("ppp-profile-main-menu", styles.trigger),
-        "aria-label": email || logoutLabel,
-        children: /* @__PURE__ */ jsx(Avatar, { size: 28, initials, name: email })
+        open: isPickerOpen,
+        onClose: () => setIsPickerOpen(false)
       }
-    ) }),
-    /* @__PURE__ */ jsx(MenuPopover, { children: /* @__PURE__ */ jsxs("div", { className: styles.popoverBody, children: [
-      headerSlot,
-      /* @__PURE__ */ jsxs("div", { className: styles.identity, children: [
-        /* @__PURE__ */ jsx(Avatar, { size: 40, initials, name: email }),
-        /* @__PURE__ */ jsxs("div", { className: styles.identityText, children: [
-          /* @__PURE__ */ jsx("span", { className: styles.identityLabel, children: signedInAsLabel }),
-          /* @__PURE__ */ jsx("span", { className: styles.identityValue, title: email, children: email })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsxs(MenuList, { className: styles.actions, children: [
-        accountUrl && /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            icon: /* @__PURE__ */ jsx(PersonEdit20Regular, {}),
-            onClick: () => {
-              window.location.href = accountUrl;
-            },
-            children: resolvedAccountLabel
-          }
-        ),
-        switchIdentityLabel && /* @__PURE__ */ jsx(
-          MenuItem,
-          {
-            icon: /* @__PURE__ */ jsx(ArrowSwap20Regular, {}),
-            onClick: handleSwitchIdentity,
-            children: switchIdentityLabel
-          }
-        ),
-        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(SignOut20Regular, {}), onClick: handleLogout, children: logoutLabel })
-      ] }),
-      footerSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Divider, {}),
-        footerSlot
-      ] })
-    ] }) })
+    )
   ] });
 }
+function ImpersonationBanner({
+  returnUrl = "/",
+  className
+}) {
+  const auth = useAuth();
+  const t = useT();
+  const [isStopping, setIsStopping] = useState(false);
+  const { stopImpersonation } = auth;
+  const handleStop = useCallback(async () => {
+    setIsStopping(true);
+    try {
+      await stopImpersonation();
+      window.location.assign(returnUrl);
+    } catch {
+      setIsStopping(false);
+    }
+  }, [returnUrl, stopImpersonation]);
+  if (auth.status !== AuthStatus.Authenticated || !auth.user.isImpersonating) {
+    return null;
+  }
+  const viewingAs = auth.user.email ?? auth.user.userName ?? "";
+  const impersonator = auth.user.impersonatorName;
+  return (
+    // The class is placement only — PageLayout targets it to assign the grid row. It carries no
+    // appearance of its own; Fluent owns all of that.
+    /* @__PURE__ */ jsxs(
+      MessageBar,
+      {
+        className: mergeClasses("ppp-impersonation-banner", className),
+        intent: "error",
+        children: [
+          /* @__PURE__ */ jsxs(MessageBarBody, { children: [
+            /* @__PURE__ */ jsx(MessageBarTitle, { children: t("app.components.impersonation-banner.viewing-as", [viewingAs]) }),
+            impersonator ? ` ${t("app.components.impersonation-banner.you-are", [impersonator])}` : null
+          ] }),
+          /* @__PURE__ */ jsx(MessageBarActions, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: /* @__PURE__ */ jsx(ArrowExit20Regular, {}),
+              iconPosition: "after",
+              disabled: isStopping,
+              onClick: handleStop,
+              children: t("app.components.impersonation-banner.stop")
+            }
+          ) })
+        ]
+      }
+    )
+  );
+}
 var usePanelStyles = makeStyles({
   // Vertical stack of setting sections with consistent gap. Matches the
   // panel body the SiteSettingsButton's drawer renders, but extracted
@@ -13240,7 +13648,7 @@ function SiteSettingsPanel({
     }
   );
 }
-var useStyles8 = makeStyles({
+var useStyles9 = makeStyles({
   // Wraps the standalone panel inside the drawer body to add the small
   // top inset that the popover's title visually expects. The panel
   // itself stays inset-free so it doesn't carry extra padding when
@@ -13260,7 +13668,7 @@ function SiteSettingsButton({
   accentLabels
 }) {
   const t = useT();
-  const styles = useStyles8();
+  const styles = useStyles9();
   const [open, setOpen] = useState(false);
   const close = useCallback(() => setOpen(false), []);
   const label = t("app.site-settings-label");
@@ -13738,7 +14146,7 @@ function bestRouteMatch(routes, pathname) {
   }
   return best;
 }
-var useStyles9 = makeStyles({
+var useStyles10 = makeStyles({
   // Shared scrim look. Both global (full-screen) and scoped variants reuse
   // these so the visual feel is identical — only the positioning differs.
   // Theme-aware translucent backdrop drawn via a `::before` pseudo-element
@@ -13800,7 +14208,7 @@ function FluentOverlayProvider({ children }) {
   ] });
 }
 function GlobalOverlayLayer() {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const overlay = useOverlayForTarget(void 0);
   if (!overlay) return null;
   return /* @__PURE__ */ jsx(ScrimContent, { overlay, className: mergeClasses(styles.scrim, styles.global) });
@@ -13811,7 +14219,7 @@ function FluentOverlayTarget({
   className,
   style
 }) {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const overlay = useOverlayForTarget(targetId);
   return /* @__PURE__ */ jsxs("div", { className: mergeClasses("ppp-overlay-target", styles.scopedHost, className), style, children: [
     children,
@@ -13819,14 +14227,14 @@ function FluentOverlayTarget({
   ] });
 }
 function ScrimContent({ overlay, className }) {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const showProgress = overlay.showProgress !== false;
   return /* @__PURE__ */ jsxs("div", { className, role: "status", "aria-live": "polite", children: [
     showProgress && /* @__PURE__ */ jsx(Spinner, { size: "large" }),
     overlay.description && /* @__PURE__ */ jsx("span", { className: styles.description, children: overlay.description })
   ] });
 }
-var useStyles10 = makeStyles({
+var useStyles11 = makeStyles({
   // Centered placeholder used while prefixes are being fetched. Same
   // shape as the spinner blocks in `<NewRecordGridButton>` /
   // `<OpenRecordGridButton>` dialogs (~160px min height + vertical
@@ -13846,7 +14254,7 @@ function LocalizationBoundary({
   fallback,
   children
 }) {
-  const styles = useStyles10();
+  const styles = useStyles11();
   const resolvedPrefixes = prefixes ?? EMPTY_PREFIXES;
   const { locale } = useLocale();
   useLocalization(resolvedPrefixes);
@@ -13868,7 +14276,7 @@ function LocalizationBoundary({
   return /* @__PURE__ */ jsx("div", { className: mergeClasses("ppp-localization-boundary", styles.fallback), role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx(Spinner, { size: "medium" }) });
 }
 var EMPTY_PREFIXES = Object.freeze([]);
-var useStyles11 = makeStyles({
+var useStyles12 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -13926,7 +14334,7 @@ function isSameLanguage(a, b) {
   return primaryA.length > 0 && primaryA === primary(b);
 }
 function LocalizationTranslator({ className }) {
-  const styles = useStyles11();
+  const styles = useStyles12();
   const t = useT();
   const { ppp } = usePowerPortalsPro();
   const [availability, setAvailability] = useState(null);
@@ -14414,7 +14822,7 @@ function SectionColumnRenderer({
     }
   );
 }
-var useStyles12 = makeStyles({
+var useStyles13 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -14537,7 +14945,7 @@ function cultureLabel(culture) {
   }
 }
 function LocalizationAdmin({ className }) {
-  const styles = useStyles12();
+  const styles = useStyles13();
   const t = useT();
   const { ppp } = usePowerPortalsPro();
   const [overview, setOverview] = useState(null);
@@ -15007,7 +15415,7 @@ function MergedSourcesDialog({
     ] })
   ] }) }) });
 }
-var useStyles13 = makeStyles({
+var useStyles14 = makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -15030,7 +15438,7 @@ var useStyles13 = makeStyles({
 });
 var toMs = (value) => Number(value);
 function CacheAdmin({ className }) {
-  const styles = useStyles13();
+  const styles = useStyles14();
   const t = useT();
   const { ppp } = usePowerPortalsPro();
   const [cacheNames, setCacheNames] = useState([]);
@@ -15165,7 +15573,7 @@ function CacheAdmin({ className }) {
     ] }) : null
   ] });
 }
-var useStyles14 = makeStyles({
+var useStyles15 = makeStyles({
   list: {
     margin: 0,
     paddingLeft: tokens.spacingHorizontalXL,
@@ -15180,7 +15588,7 @@ function ValidationSummary({
   className,
   style
 }) {
-  const styles = useStyles14();
+  const styles = useStyles15();
   const t = useT();
   const validation = useValidationContext();
   const resolvedTitle = title === void 0 ? t("app.errors.form-validation-errors") : title;
@@ -16057,7 +16465,7 @@ function isWizardRecordPageElement(node) {
   const type = node.type;
   return !!type && type[PAGE_MARKER] === true;
 }
-var useStyles15 = makeStyles({
+var useStyles16 = makeStyles({
   shell: {
     display: "flex",
     flexDirection: "column",
@@ -16199,7 +16607,7 @@ function WizardRecordFormInner({
   stepperVisibility,
   isCreate
 }) {
-  const styles = useStyles15();
+  const styles = useStyles16();
   return /* @__PURE__ */ jsx("div", { className: mergeClasses("ppp-wizard-record-form", styles.shell), children: /* @__PURE__ */ jsx(
     Wizard,
     {
@@ -16233,7 +16641,7 @@ function WizardFooter({
   onCancel,
   cancelLabel
 }) {
-  const styles = useStyles15();
+  const styles = useStyles16();
   const t = useT();
   const recordContext = useRecordContext();
   const wizard = useWizard();
@@ -17715,13 +18123,17 @@ var usePageLayoutStyles = makeStyles({
     position: "relative",
     display: "grid",
     gridTemplateColumns: "auto minmax(0, 1fr)",
-    gridTemplateRows: "auto 1fr auto",
+    // Four rows, not three: the first carries the impersonation banner. It's an `auto` track and
+    // the banner renders nothing for an ordinary session, so the row collapses to zero height and
+    // the layout is unchanged whenever nobody is impersonating.
+    gridTemplateRows: "auto auto 1fr auto",
     // Lets the PageLayout shrink when it's nested inside another
     // PageLayout's `<main>` (the outer main is a grid item; without
     // `min-width: 0` on this inner root the outer's `minmax(0, 1fr)`
     // track wouldn't be honored once content tries to grow wider).
     minWidth: 0,
     gridTemplateAreas: `
+      'impersonation impersonation'
       'header header'
       'navigation main'
       'footer footer'
@@ -17831,6 +18243,11 @@ var usePageLayoutStyles = makeStyles({
   childHeader: {
     borderBottomWidth: "1px"
   },
+  impersonationBanner: {
+    // Placement only. The banner is a Fluent MessageBar and Fluent owns everything about how it
+    // looks; this grid assignment is the extent of PageLayout's involvement.
+    gridArea: "impersonation"
+  },
   navigation: {
     gridArea: "navigation",
     overflowY: "auto",
@@ -17957,6 +18374,7 @@ function PageLayout({
     ...resizable ? { "--ppp-nav-width": `${navWidth}px` } : {}
   };
   return /* @__PURE__ */ jsx(PageLayoutNestingContext.Provider, { value: { isNested: true }, children: /* @__PURE__ */ jsxs("div", { className: rootClass, style: rootStyle, children: [
+    !isNested && /* @__PURE__ */ jsx(ImpersonationBanner, { className: styles.impersonationBanner }),
     header !== void 0 && headerVisible && /* @__PURE__ */ jsx(Header, { className: headerClass, ...headerStyle && { style: headerStyle }, children: header }),
     navigation !== void 0 && navigationVisible && /* @__PURE__ */ jsx(
       "nav",
@@ -18185,7 +18603,7 @@ var RADIAL_CHART_TYPES = /* @__PURE__ */ new Set([
   ChartType.Radar,
   ChartType.Funnel
 ]);
-var useStyles16 = makeStyles({
+var useStyles17 = makeStyles({
   // The wrapper uses Fluent design tokens directly so the rounded bordered
   // look picks up theme changes. `colorNeutralBackground1` (white in light,
   // grey[16] in dark) matches the Blazor FluentUIChart's
@@ -18263,7 +18681,7 @@ function FluentUIChartImpl(props, ref) {
     showBorder = true,
     onElementClick
   } = props;
-  const styles = useStyles16();
+  const styles = useStyles17();
   const containerRef = useRef(null);
   const palette = useFluentChartPalette(containerRef);
   const themedDatasets = useMemo(() => {
@@ -18344,7 +18762,7 @@ function assembleTheme(palette, yAxisPrefix, yAxisSuffix, xAxisPrefix, xAxisSuff
   if (orientation !== void 0) theme.indexAxis = toIndexAxis(orientation);
   return Object.keys(theme).length > 0 ? theme : void 0;
 }
-var useStyles17 = makeStyles({
+var useStyles18 = makeStyles({
   // Outer container — flex column so the view selector, message bar, and
   // chart fill share the caller's height budget.
   root: {
@@ -18422,7 +18840,7 @@ var DataverseChart = forwardRef(
     } = props;
     const chartSource = dataSource instanceof DataverseChartDataSource ? dataSource : void 0;
     const viewDs = dataSource instanceof DataverseChartDataSource ? void 0 : dataSource;
-    const styles = useStyles17();
+    const styles = useStyles18();
     const t = useT();
     const { ppp, viewMetadataCache } = usePowerPortalsPro();
     const [data, setData] = useState({ labels: [], datasets: [] });
@@ -18656,6 +19074,6 @@ function applyViewIdToSource(source, viewId) {
 // src/index.ts
 var VERSION = "0.1.0";
 
-export { Body, BoolEdit, BoolEditorType, CacheAdmin, ChoiceEdit, ChoiceEditorType, ChoiceInvalidValueBehavior, ChoiceOrientation, ChoiceValueSort, ColumnDisplayValue, ColumnEdit, DataverseChart, DateTimeEdit, DateTimeEditorType, DeleteContextButton, DeleteRecordGridButton, DescriptionLocation, FileEdit, FileGrid, FileViewer, FluentDialogProvider, FluentOverlayProvider, FluentOverlayTarget, FluentUIChart, Footer, GridButton, GridButtonBehavior, GridButtonRole, GridButtons, GridColumn, GridColumns, GridTemplateColumn, Header, Highlighter, ImageEdit, ImageViewer, LabelPosition, LanguageDropdown, LinkExistingRecordGridButton, LocalizationAdmin, LocalizationBoundary, LocalizationTranslator, LogoutButton, LookupDialog, LookupEdit, LookupEditorType, LookupForm, MainGrid, ManyToManyLookupEdit, ManyToManyLookupEditorType, MaskedTextField, MemoEdit, MenuBar, MoneyEdit, MultiSelectChoiceEdit, NavGroup, NavItem, NavMenu, NavigateNewRecordGridButton, NavigateOpenRecordGridButton, NavigateRecordGridButton, NewRecordGridButton, NumberEdit, OFFICE_ACCENT_DEFINITIONS, OFFICE_ACCENT_HEX_TO_NAME, OFFICE_ACCENT_THEMES, OFFICE_COLOR_NAME_TO_ACCENT, OpenRecordGridButton, PageLayout, PagingMode, PowerPortalsProThemeProvider, ProfileMainMenu, RefreshContextButton, RefreshGridButton, RouterUnsavedChangesGuard, SaveContextButton, Section, SectionColumn, SectionColumnOrientation, SiteSettingsButton, SiteSettingsPanel, SubGrid, TextDirection, TextEdit, ThemeColorSelector, ThemeMode, ThemeSelector, ThemeTextDirection, UnlinkExistingRecordGridButton, VERSION, ValidationSummary, ViewSort, WizardRecordForm, WizardRecordPage, evaluateGridButtonBehavior, findFirstButtonOfRole, getCellRenderer, getChartPalette, getChoiceMetadata, getDisplayDescription, getDisplayLabel, getEditComponentForMetadata, getEditComponentForType, getGridButtonRoleFromElement, getLookupMetadata, getNumberLimits, getRendererTypeForMetadata, getStringMaxLength, isColumnSortable, isMetadataReadOnly, isMetadataRequired, isNewRecord, officeColorValueToAccentName, resolveColumnDisplayValue, setGridButtonRole, splitHighlightSegments, toTranslucent, useBoolColumn, useChoiceColumn, useDateColumn, useFileColumn, useFluentChartPalette, useGridContext, useLookupColumn, useMoneyColumn, useMultiSelectChoiceColumn, useNumberColumn, useStringColumn, useTheme };
+export { Body, BoolEdit, BoolEditorType, CacheAdmin, ChoiceEdit, ChoiceEditorType, ChoiceInvalidValueBehavior, ChoiceOrientation, ChoiceValueSort, ColumnDisplayValue, ColumnEdit, DataverseChart, DateTimeEdit, DateTimeEditorType, DeleteContextButton, DeleteRecordGridButton, DescriptionLocation, FileEdit, FileGrid, FileViewer, FluentDialogProvider, FluentOverlayProvider, FluentOverlayTarget, FluentUIChart, Footer, GridButton, GridButtonBehavior, GridButtonRole, GridButtons, GridColumn, GridColumns, GridTemplateColumn, Header, Highlighter, ImageEdit, ImageViewer, ImpersonationBanner, ImpersonationPickerDialog, LabelPosition, LanguageDropdown, LinkExistingRecordGridButton, LocalizationAdmin, LocalizationBoundary, LocalizationTranslator, LogoutButton, LookupDialog, LookupEdit, LookupEditorType, LookupForm, MainGrid, ManyToManyLookupEdit, ManyToManyLookupEditorType, MaskedTextField, MemoEdit, MenuBar, MoneyEdit, MultiSelectChoiceEdit, NavGroup, NavItem, NavMenu, NavigateNewRecordGridButton, NavigateOpenRecordGridButton, NavigateRecordGridButton, NewRecordGridButton, NumberEdit, OFFICE_ACCENT_DEFINITIONS, OFFICE_ACCENT_HEX_TO_NAME, OFFICE_ACCENT_THEMES, OFFICE_COLOR_NAME_TO_ACCENT, OpenRecordGridButton, PageLayout, PagingMode, PowerPortalsProThemeProvider, ProfileMainMenu, RefreshContextButton, RefreshGridButton, RouterUnsavedChangesGuard, SaveContextButton, Section, SectionColumn, SectionColumnOrientation, SiteSettingsButton, SiteSettingsPanel, SubGrid, TextDirection, TextEdit, ThemeColorSelector, ThemeMode, ThemeSelector, ThemeTextDirection, UnlinkExistingRecordGridButton, VERSION, ValidationSummary, ViewSort, WizardRecordForm, WizardRecordPage, evaluateGridButtonBehavior, findFirstButtonOfRole, getCellRenderer, getChartPalette, getChoiceMetadata, getDisplayDescription, getDisplayLabel, getEditComponentForMetadata, getEditComponentForType, getGridButtonRoleFromElement, getLookupMetadata, getNumberLimits, getRendererTypeForMetadata, getStringMaxLength, isColumnSortable, isMetadataReadOnly, isMetadataRequired, isNewRecord, officeColorValueToAccentName, resolveColumnDisplayValue, setGridButtonRole, splitHighlightSegments, toTranslucent, useBoolColumn, useChoiceColumn, useDateColumn, useFileColumn, useFluentChartPalette, useGridContext, useLookupColumn, useMoneyColumn, useMultiSelectChoiceColumn, useNumberColumn, useStringColumn, useTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map