@powerportalspro/react-fluent 6.1.0 → 7.0.0

package/dist/index.cjs

@@ -304,8 +304,12 @@ function isRecordWriteDenied(record) {
   const perms = record.permissions ?? 0;
   return (perms & core.TableSecurityPermission.Write) === 0;
 }
-function resolveEditState(metadata, record, explicitReadOnly, explicitDisabled) {
-  if (isRecordWriteDenied(record)) {
+function isColumnWriteDenied(record, columnName) {
+  if (!record || !columnName) return false;
+  return !core.canWriteColumn(record, columnName);
+}
+function resolveEditState(metadata, record, explicitReadOnly, explicitDisabled, columnName) {
+  if (isRecordWriteDenied(record) || isColumnWriteDenied(record, columnName)) {
     return { readOnly: true, disabled: true };
   }
   return {
@@ -733,7 +737,8 @@ function TextEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -827,7 +832,8 @@ function MemoEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -941,7 +947,8 @@ function BoolEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const isInactive = resolvedDisabled || resolvedReadOnly;
@@ -1117,7 +1124,8 @@ function NumberEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -1561,7 +1569,8 @@ function MoneyEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const validationErrors = useColumnValidation(
@@ -1975,7 +1984,8 @@ function DateTimeEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const resolvedEditorType = editorType ?? resolveEditorTypeFromMetadata(metadata);
@@ -5366,7 +5376,8 @@ function FileEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const isInteractable = !resolvedReadOnly && !resolvedDisabled;
@@ -5683,7 +5694,8 @@ function ImageEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const isInteractable = !resolvedReadOnly && !resolvedDisabled;
@@ -6163,7 +6175,8 @@ function ChoiceEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const choiceMeta = getChoiceMetadata(metadata);
@@ -6383,7 +6396,8 @@ function MultiSelectChoiceEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setValue = useGuardedSetValue(rawSetValue, resolvedReadOnly, resolvedDisabled);
   const choiceMeta = getChoiceMetadata(metadata);
@@ -6505,30 +6519,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;
@@ -7299,7 +7313,11 @@ function getRendererTypeForCode(typeCode) {
 }
 function ColumnEdit(props) {
   const metadata = react$1.useColumnMetadata(props.columnName);
+  const record = react$1.useRecordContextOptional()?.record;
   const typeCode = metadata?.$type;
+  if (record && !core.canReadColumn(record, props.columnName)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ColumnDisplayValue, { ...props });
+  }
   switch (typeCode) {
     case 0:
       return /* @__PURE__ */ jsxRuntime.jsx(BoolEdit, { ...props });
@@ -8412,6 +8430,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,
@@ -9088,7 +9112,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 && core.canWriteColumn(rowRecord, columnName)) {
               return (
                 // Sizing wrapper — overrides Fluent v9's default
                 // <Input> / <Combobox> / <Dropdown> min-width
@@ -9778,8 +9802,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__ */ jsxRuntime.jsx(GridContextProvider, { value: gridContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -9812,7 +9836,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__ */ jsxRuntime.jsx(reactComponents.Option, { value: view.id, text: label, children: label }, view.id);
               })
             }
@@ -10908,7 +10932,8 @@ function LookupEdit({
     metadata,
     record,
     readOnly,
-    disabled
+    disabled,
+    columnName
   );
   const setLookupValue = useGuardedSetValue(
     rawSetLookupValue,
@@ -12688,6 +12713,7 @@ function PowerPortalsProThemeProvider({
   defaultMode = ThemeMode.System,
   defaultAccentColor = "default",
   defaultTextDirection = TextDirection.Ltr,
+  lockAccentColor = false,
   customAccents,
   storageKey = DEFAULT_MODE_STORAGE_KEY,
   style,
@@ -12711,9 +12737,11 @@ function PowerPortalsProThemeProvider({
     () => readStoredMode(storageKey) ?? defaultMode
   );
   const [accentColor, setAccentColorState] = react.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] = react.useState(
     () => readStoredDirection(directionStorageKey) ?? defaultTextDirection
@@ -12743,6 +12771,12 @@ function PowerPortalsProThemeProvider({
     document.body.classList.toggle("ppp-theme-dark", isDark);
     document.body.classList.toggle("ppp-theme-light", !isDark);
   }, [isDark]);
+  react.useEffect(() => {
+    if (!lockAccentColor) return;
+    const configured = defaultAccentColor in accentMap ? defaultAccentColor : "default";
+    setAccentColorState(configured);
+    writeStored(accentStorageKey, configured);
+  }, [lockAccentColor, defaultAccentColor, accentMap, accentStorageKey]);
   const setMode = react.useCallback(
     (next) => {
       setModeState(next);
@@ -12752,11 +12786,12 @@ function PowerPortalsProThemeProvider({
   );
   const setAccentColor = react.useCallback(
     (next) => {
+      if (lockAccentColor) return;
       if (!(next in accentMap)) return;
       setAccentColorState(next);
       writeStored(accentStorageKey, next);
     },
-    [accentMap, accentStorageKey]
+    [lockAccentColor, accentMap, accentStorageKey]
   );
   const setTextDirection = react.useCallback(
     (next) => {
@@ -12781,6 +12816,7 @@ function PowerPortalsProThemeProvider({
       setAccentColor,
       availableAccents,
       accentColors,
+      accentColorLocked: lockAccentColor,
       textDirection,
       setTextDirection
     }),
@@ -12792,6 +12828,7 @@ function PowerPortalsProThemeProvider({
       setAccentColor,
       availableAccents,
       accentColors,
+      lockAccentColor,
       textDirection,
       setTextDirection
     ]
@@ -12872,7 +12909,7 @@ function ThemeColorSelector({
   width,
   accentLabels
 }) {
-  const { accentColor, setAccentColor, availableAccents, accentColors } = useTheme();
+  const { accentColor, setAccentColor, availableAccents, accentColors, accentColorLocked } = useTheme();
   const t = react$1.useT();
   const labelId = react.useId();
   const styles = useStyles6();
@@ -12886,6 +12923,7 @@ function ThemeColorSelector({
     },
     [t, accentLabels]
   );
+  if (accentColorLocked) return null;
   const handleOptionSelect = (_event, data) => {
     const next = data.optionValue;
     if (next && availableAccents.includes(next)) {
@@ -13053,7 +13091,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 = reactComponents.makeStyles({
+  surface: {
+    maxWidth: "480px",
+    display: "flex",
+    flexDirection: "column"
+  },
+  titleRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    columnGap: reactComponents.tokens.spacingHorizontalS
+  },
+  titleText: {
+    flexGrow: 1,
+    minWidth: 0
+  },
+  body: {
+    display: "flex",
+    flexDirection: "column",
+    rowGap: reactComponents.tokens.spacingVerticalM,
+    paddingTop: reactComponents.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 ${reactComponents.tokens.colorNeutralStroke1}`,
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground1
+  },
+  result: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: reactComponents.tokens.spacingHorizontalS,
+    padding: `${reactComponents.tokens.spacingVerticalS} ${reactComponents.tokens.spacingHorizontalM}`,
+    cursor: "pointer",
+    borderBottom: `1px solid ${reactComponents.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: reactComponents.tokens.colorNeutralForeground1,
+    fontFamily: "inherit",
+    fontSize: reactComponents.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: reactComponents.tokens.colorNeutralBackground1Hover,
+      color: reactComponents.tokens.colorNeutralForeground1Hover
+    },
+    ":focus-visible": {
+      outline: `2px solid ${reactComponents.tokens.colorStrokeFocus2}`,
+      outlineOffset: "-2px"
+    }
+  },
+  resultSelected: {
+    backgroundColor: reactComponents.tokens.colorBrandBackground,
+    color: reactComponents.tokens.colorNeutralForegroundOnBrand,
+    ":hover": {
+      backgroundColor: reactComponents.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: reactComponents.tokens.colorNeutralForegroundOnBrand
+    }
+  },
+  resultText: {
+    display: "flex",
+    flexDirection: "column",
+    minWidth: 0
+  },
+  name: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  email: {
+    fontSize: reactComponents.tokens.fontSizeBase200,
+    opacity: 0.8,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  status: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: reactComponents.tokens.spacingHorizontalS,
+    padding: reactComponents.tokens.spacingVerticalXL,
+    color: reactComponents.tokens.colorNeutralForeground3,
+    fontSize: reactComponents.tokens.fontSizeBase200
+  },
+  warning: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    columnGap: reactComponents.tokens.spacingHorizontalS,
+    padding: `${reactComponents.tokens.spacingVerticalS} ${reactComponents.tokens.spacingHorizontalM}`,
+    borderRadius: reactComponents.tokens.borderRadiusMedium,
+    backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+    borderLeft: `3px solid ${reactComponents.tokens.colorPaletteRedBackground3}`,
+    fontSize: reactComponents.tokens.fontSizeBase200
+  },
+  footer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    columnGap: reactComponents.tokens.spacingHorizontalS,
+    paddingTop: reactComponents.tokens.spacingVerticalM
+  }
+});
+function ImpersonationPickerDialog({
+  open,
+  onClose,
+  returnUrl = "/",
+  className
+}) {
+  const auth = react$1.useAuth();
+  const styles = useStyles7();
+  const t = react$1.useT();
+  const { searchImpersonationTargets, impersonate } = auth;
+  const [query, setQuery] = react.useState("");
+  const [results, setResults] = react.useState([]);
+  const [selected, setSelected] = react.useState(null);
+  const [isSearching, setIsSearching] = react.useState(false);
+  const [hasSearched, setHasSearched] = react.useState(false);
+  const [hasMore, setHasMore] = react.useState(false);
+  const [isStarting, setIsStarting] = react.useState(false);
+  const requestIdRef = react.useRef(0);
+  react.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;
+  react.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 = react.useCallback((value) => {
+    setQuery(value);
+    setSelected(null);
+  }, []);
+  const handleConfirm = react.useCallback(async () => {
+    if (!selected?.contactId) return;
+    setIsStarting(true);
+    try {
+      const response = await impersonate(selected.contactId);
+      if (response.result === core.ImpersonateResult.Started) {
+        window.location.assign(returnUrl);
+        return;
+      }
+      setIsStarting(false);
+      onClose();
+    } catch {
+      setIsStarting(false);
+    }
+  }, [impersonate, onClose, returnUrl, selected]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => {
+    if (!data.open) onClose();
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.DialogSurface,
+    {
+      className: reactComponents.mergeClasses("ppp-impersonation-picker-dialog", styles.surface, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { className: styles.titleText, children: t("app.components.impersonation-picker.title") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "subtle",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Dismiss24Regular, {}),
+              "aria-label": t("app.components.impersonation-picker.cancel"),
+              onClick: onClose
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SearchBox,
+            {
+              value: query,
+              onChange: (_, data) => handleQueryChange(data.value),
+              placeholder: t("app.components.impersonation-picker.search-placeholder"),
+              appearance: "outline",
+              style: { width: "100%" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.results, role: "listbox", children: isSearching ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.status, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { size: "tiny" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: styles.status, children: t("app.components.impersonation-picker.hint", [String(MINIMUM_QUERY_LENGTH)]) })
+          ) : hasSearched && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.status, children: t("app.components.impersonation-picker.no-matches") }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            results.map((candidate) => {
+              const isSelected = selected?.contactId === candidate.contactId;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isSelected,
+                  className: reactComponents.mergeClasses(
+                    styles.result,
+                    isSelected && styles.resultSelected
+                  ),
+                  onClick: () => setSelected(candidate),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Person20Regular, {}),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles.resultText, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.name, children: candidate.fullName ?? candidate.email ?? candidate.contactId }),
+                      candidate.email && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.email, children: candidate.email })
+                    ] })
+                  ]
+                },
+                candidate.contactId
+              );
+            }),
+            hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.status, children: t("app.components.impersonation-picker.too-many", [String(MAXIMUM_RESULTS)]) })
+          ] }) }),
+          selected && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.warning, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Warning20Regular, {}),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("app.components.impersonation-picker.warning") })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footer, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              appearance: "primary",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.EyeTracking20Regular, {}),
+              disabled: !selected || isStarting,
+              onClick: handleConfirm,
+              children: t("app.components.impersonation-picker.confirm")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "secondary", onClick: onClose, disabled: isStarting, children: t("app.components.impersonation-picker.cancel") })
+        ] })
+      ]
+    }
+  ) });
+}
+var IMPERSONATION_ROLE = "SystemAdmin";
+var useStyles8 = reactComponents.makeStyles({
   trigger: {
     backgroundColor: "transparent",
     border: "none",
@@ -13113,8 +13448,9 @@ function ProfileMainMenu({
   signInUrl = "/login"
 }) {
   const auth = react$1.useAuth();
-  const styles = useStyles7();
+  const styles = useStyles8();
   const t = react$1.useT();
+  const [isPickerOpen, setIsPickerOpen] = react.useState(false);
   const handleLogout = react.useCallback(async () => {
     try {
       await auth.logout();
@@ -13131,7 +13467,14 @@ function ProfileMainMenu({
     }
   }, [auth]);
   if (auth.status === react$1.AuthStatus.Loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Avatar, { className: "ppp-profile-main-menu", size: 28, "aria-label": t("app.messages.record-loading") });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Avatar,
+      {
+        className: "ppp-profile-main-menu",
+        size: 28,
+        "aria-label": t("app.messages.record-loading")
+      }
+    );
   }
   if (auth.status === react$1.AuthStatus.Anonymous) {
     if (anonymousContent !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: anonymousContent });
@@ -13152,61 +13495,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 === core.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__ */ jsxRuntime.jsxs(reactComponents.Menu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Menu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: reactComponents.mergeClasses("ppp-profile-main-menu", styles.trigger),
+          "aria-label": email || logoutLabel,
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Avatar, { size: 28, initials, name: email })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.popoverBody, children: [
+        headerSlot,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.identity, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Avatar, { size: 40, initials, name: email }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.identityText, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.identityLabel, children: signedInAsLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.identityValue, title: email, children: email })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuList, { className: styles.actions, children: [
+          accountUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PersonEdit20Regular, {}),
+              onClick: () => {
+                window.location.href = accountUrl;
+              },
+              children: resolvedAccountLabel
+            }
+          ),
+          switchIdentityLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowSwap20Regular, {}),
+              onClick: handleSwitchIdentity,
+              children: switchIdentityLabel
+            }
+          ),
+          canImpersonate && /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.EyeTracking20Regular, {}),
+              onClick: () => setIsPickerOpen(true),
+              children: t("app.components.profile-main-menu.impersonate")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SignOut20Regular, {}), onClick: handleLogout, children: logoutLabel })
+        ] }),
+        footerSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
+          footerSlot
+        ] })
+      ] }) })
+    ] }),
+    canImpersonate && /* @__PURE__ */ jsxRuntime.jsx(
+      ImpersonationPickerDialog,
       {
-        type: "button",
-        className: reactComponents.mergeClasses("ppp-profile-main-menu", styles.trigger),
-        "aria-label": email || logoutLabel,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Avatar, { size: 28, initials, name: email })
+        open: isPickerOpen,
+        onClose: () => setIsPickerOpen(false)
       }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.popoverBody, children: [
-      headerSlot,
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.identity, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Avatar, { size: 40, initials, name: email }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.identityText, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.identityLabel, children: signedInAsLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.identityValue, title: email, children: email })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-      /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuList, { className: styles.actions, children: [
-        accountUrl && /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.MenuItem,
-          {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PersonEdit20Regular, {}),
-            onClick: () => {
-              window.location.href = accountUrl;
-            },
-            children: resolvedAccountLabel
-          }
-        ),
-        switchIdentityLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.MenuItem,
-          {
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowSwap20Regular, {}),
-            onClick: handleSwitchIdentity,
-            children: switchIdentityLabel
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SignOut20Regular, {}), onClick: handleLogout, children: logoutLabel })
-      ] }),
-      footerSlot && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-        footerSlot
-      ] })
-    ] }) })
+    )
   ] });
 }
+function ImpersonationBanner({
+  returnUrl = "/",
+  className
+}) {
+  const auth = react$1.useAuth();
+  const t = react$1.useT();
+  const [isStopping, setIsStopping] = react.useState(false);
+  const { stopImpersonation } = auth;
+  const handleStop = react.useCallback(async () => {
+    setIsStopping(true);
+    try {
+      await stopImpersonation();
+      window.location.assign(returnUrl);
+    } catch {
+      setIsStopping(false);
+    }
+  }, [returnUrl, stopImpersonation]);
+  if (auth.status !== react$1.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__ */ jsxRuntime.jsxs(
+      reactComponents.MessageBar,
+      {
+        className: reactComponents.mergeClasses("ppp-impersonation-banner", className),
+        intent: "error",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MessageBarBody, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarTitle, { children: t("app.components.impersonation-banner.viewing-as", [viewingAs]) }),
+            impersonator ? ` ${t("app.components.impersonation-banner.you-are", [impersonator])}` : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarActions, { children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowExit20Regular, {}),
+              iconPosition: "after",
+              disabled: isStopping,
+              onClick: handleStop,
+              children: t("app.components.impersonation-banner.stop")
+            }
+          ) })
+        ]
+      }
+    )
+  );
+}
 var usePanelStyles = reactComponents.makeStyles({
   // Vertical stack of setting sections with consistent gap. Matches the
   // panel body the SiteSettingsButton's drawer renders, but extracted
@@ -13255,7 +13663,7 @@ function SiteSettingsPanel({
     }
   );
 }
-var useStyles8 = reactComponents.makeStyles({
+var useStyles9 = reactComponents.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
@@ -13275,7 +13683,7 @@ function SiteSettingsButton({
   accentLabels
 }) {
   const t = react$1.useT();
-  const styles = useStyles8();
+  const styles = useStyles9();
   const [open, setOpen] = react.useState(false);
   const close = react.useCallback(() => setOpen(false), []);
   const label = t("app.site-settings-label");
@@ -13753,7 +14161,7 @@ function bestRouteMatch(routes, pathname) {
   }
   return best;
 }
-var useStyles9 = reactComponents.makeStyles({
+var useStyles10 = reactComponents.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
@@ -13815,7 +14223,7 @@ function FluentOverlayProvider({ children }) {
   ] });
 }
 function GlobalOverlayLayer() {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const overlay = react$1.useOverlayForTarget(void 0);
   if (!overlay) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(ScrimContent, { overlay, className: reactComponents.mergeClasses(styles.scrim, styles.global) });
@@ -13826,7 +14234,7 @@ function FluentOverlayTarget({
   className,
   style
 }) {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const overlay = react$1.useOverlayForTarget(targetId);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses("ppp-overlay-target", styles.scopedHost, className), style, children: [
     children,
@@ -13834,14 +14242,14 @@ function FluentOverlayTarget({
   ] });
 }
 function ScrimContent({ overlay, className }) {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const showProgress = overlay.showProgress !== false;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, role: "status", "aria-live": "polite", children: [
     showProgress && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { size: "large" }),
     overlay.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: overlay.description })
   ] });
 }
-var useStyles10 = reactComponents.makeStyles({
+var useStyles11 = reactComponents.makeStyles({
   // Centered placeholder used while prefixes are being fetched. Same
   // shape as the spinner blocks in `<NewRecordGridButton>` /
   // `<OpenRecordGridButton>` dialogs (~160px min height + vertical
@@ -13861,7 +14269,7 @@ function LocalizationBoundary({
   fallback,
   children
 }) {
-  const styles = useStyles10();
+  const styles = useStyles11();
   const resolvedPrefixes = prefixes ?? EMPTY_PREFIXES;
   const { locale } = react$1.useLocale();
   react$1.useLocalization(resolvedPrefixes);
@@ -13883,7 +14291,7 @@ function LocalizationBoundary({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses("ppp-localization-boundary", styles.fallback), role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Spinner, { size: "medium" }) });
 }
 var EMPTY_PREFIXES = Object.freeze([]);
-var useStyles11 = reactComponents.makeStyles({
+var useStyles12 = reactComponents.makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -13941,7 +14349,7 @@ function isSameLanguage(a, b) {
   return primaryA.length > 0 && primaryA === primary(b);
 }
 function LocalizationTranslator({ className }) {
-  const styles = useStyles11();
+  const styles = useStyles12();
   const t = react$1.useT();
   const { ppp } = react$1.usePowerPortalsPro();
   const [availability, setAvailability] = react.useState(null);
@@ -14429,7 +14837,7 @@ function SectionColumnRenderer({
     }
   );
 }
-var useStyles12 = reactComponents.makeStyles({
+var useStyles13 = reactComponents.makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -14552,7 +14960,7 @@ function cultureLabel(culture) {
   }
 }
 function LocalizationAdmin({ className }) {
-  const styles = useStyles12();
+  const styles = useStyles13();
   const t = react$1.useT();
   const { ppp } = react$1.usePowerPortalsPro();
   const [overview, setOverview] = react.useState(null);
@@ -15022,7 +15430,7 @@ function MergedSourcesDialog({
     ] })
   ] }) }) });
 }
-var useStyles13 = reactComponents.makeStyles({
+var useStyles14 = reactComponents.makeStyles({
   root: {
     display: "flex",
     flexDirection: "column",
@@ -15045,7 +15453,7 @@ var useStyles13 = reactComponents.makeStyles({
 });
 var toMs = (value) => Number(value);
 function CacheAdmin({ className }) {
-  const styles = useStyles13();
+  const styles = useStyles14();
   const t = react$1.useT();
   const { ppp } = react$1.usePowerPortalsPro();
   const [cacheNames, setCacheNames] = react.useState([]);
@@ -15180,7 +15588,7 @@ function CacheAdmin({ className }) {
     ] }) : null
   ] });
 }
-var useStyles14 = reactComponents.makeStyles({
+var useStyles15 = reactComponents.makeStyles({
   list: {
     margin: 0,
     paddingLeft: reactComponents.tokens.spacingHorizontalXL,
@@ -15195,7 +15603,7 @@ function ValidationSummary({
   className,
   style
 }) {
-  const styles = useStyles14();
+  const styles = useStyles15();
   const t = react$1.useT();
   const validation = react$1.useValidationContext();
   const resolvedTitle = title === void 0 ? t("app.errors.form-validation-errors") : title;
@@ -16072,7 +16480,7 @@ function isWizardRecordPageElement(node) {
   const type = node.type;
   return !!type && type[PAGE_MARKER] === true;
 }
-var useStyles15 = reactComponents.makeStyles({
+var useStyles16 = reactComponents.makeStyles({
   shell: {
     display: "flex",
     flexDirection: "column",
@@ -16214,7 +16622,7 @@ function WizardRecordFormInner({
   stepperVisibility,
   isCreate
 }) {
-  const styles = useStyles15();
+  const styles = useStyles16();
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: reactComponents.mergeClasses("ppp-wizard-record-form", styles.shell), children: /* @__PURE__ */ jsxRuntime.jsx(
     reactUseWizard.Wizard,
     {
@@ -16248,7 +16656,7 @@ function WizardFooter({
   onCancel,
   cancelLabel
 }) {
-  const styles = useStyles15();
+  const styles = useStyles16();
   const t = react$1.useT();
   const recordContext = react$1.useRecordContext();
   const wizard = reactUseWizard.useWizard();
@@ -17730,13 +18138,17 @@ var usePageLayoutStyles = reactComponents.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'
@@ -17846,6 +18258,11 @@ var usePageLayoutStyles = reactComponents.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",
@@ -17972,6 +18389,7 @@ function PageLayout({
     ...resizable ? { "--ppp-nav-width": `${navWidth}px` } : {}
   };
   return /* @__PURE__ */ jsxRuntime.jsx(PageLayoutNestingContext.Provider, { value: { isNested: true }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rootClass, style: rootStyle, children: [
+    !isNested && /* @__PURE__ */ jsxRuntime.jsx(ImpersonationBanner, { className: styles.impersonationBanner }),
     header !== void 0 && headerVisible && /* @__PURE__ */ jsxRuntime.jsx(Header, { className: headerClass, ...headerStyle && { style: headerStyle }, children: header }),
     navigation !== void 0 && navigationVisible && /* @__PURE__ */ jsxRuntime.jsx(
       "nav",
@@ -18200,7 +18618,7 @@ var RADIAL_CHART_TYPES = /* @__PURE__ */ new Set([
   reactCharts.ChartType.Radar,
   reactCharts.ChartType.Funnel
 ]);
-var useStyles16 = reactComponents.makeStyles({
+var useStyles17 = reactComponents.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
@@ -18278,7 +18696,7 @@ function FluentUIChartImpl(props, ref) {
     showBorder = true,
     onElementClick
   } = props;
-  const styles = useStyles16();
+  const styles = useStyles17();
   const containerRef = react.useRef(null);
   const palette = useFluentChartPalette(containerRef);
   const themedDatasets = react.useMemo(() => {
@@ -18359,7 +18777,7 @@ function assembleTheme(palette, yAxisPrefix, yAxisSuffix, xAxisPrefix, xAxisSuff
   if (orientation !== void 0) theme.indexAxis = reactCharts.toIndexAxis(orientation);
   return Object.keys(theme).length > 0 ? theme : void 0;
 }
-var useStyles17 = reactComponents.makeStyles({
+var useStyles18 = reactComponents.makeStyles({
   // Outer container — flex column so the view selector, message bar, and
   // chart fill share the caller's height budget.
   root: {
@@ -18437,7 +18855,7 @@ var DataverseChart = react.forwardRef(
     } = props;
     const chartSource = dataSource instanceof reactCharts.DataverseChartDataSource ? dataSource : void 0;
     const viewDs = dataSource instanceof reactCharts.DataverseChartDataSource ? void 0 : dataSource;
-    const styles = useStyles17();
+    const styles = useStyles18();
     const t = react$1.useT();
     const { ppp, viewMetadataCache } = react$1.usePowerPortalsPro();
     const [data, setData] = react.useState({ labels: [], datasets: [] });
@@ -18707,6 +19125,8 @@ exports.Header = Header;
 exports.Highlighter = Highlighter;
 exports.ImageEdit = ImageEdit;
 exports.ImageViewer = ImageViewer;
+exports.ImpersonationBanner = ImpersonationBanner;
+exports.ImpersonationPickerDialog = ImpersonationPickerDialog;
 exports.LabelPosition = LabelPosition;
 exports.LanguageDropdown = LanguageDropdown;
 exports.LinkExistingRecordGridButton = LinkExistingRecordGridButton;