react-display-scale-engine 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Piyawat
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# react-display-scale-engine
+
+React utilities for maintaining a consistent visual density on Windows displays with elevated OS display scaling, with first-class Material UI overlay support.
+
+The library is split into entry points, so an application only takes the layer it needs:
+
+```ts
+import { detectDisplayScale } from "react-display-scale-engine/core";
+import { DisplayScaleProvider } from "react-display-scale-engine/react";
+import { DisplayScaleMenu } from "react-display-scale-engine/mui";
+```
+
+## Install
+
+```bash
+npm install react-display-scale-engine
+```
+
+`react`, `react-dom`, `@mui/material`, `@emotion/react`, `@emotion/styled`, and `@popperjs/core` are peer dependencies. The MUI peers are necessary only for the `/mui` entry point.
+
+## Quick start
+
+Call the optional pre-mount warm-up, then wrap the application once.
+
+```tsx
+import { primeDisplayScaleCompensation } from "react-display-scale-engine/core";
+import { DisplayScaleProvider } from "react-display-scale-engine/react";
+
+primeDisplayScaleCompensation();
+
+export function AppRoot() {
+  return <DisplayScaleProvider><App /></DisplayScaleProvider>;
+}
+```
+
+Use supplied components for MUI overlays whose placement must account for the compensated coordinate space.
+
+```tsx
+import { DisplayScaleMenu } from "react-display-scale-engine/mui";
+
+<DisplayScaleMenu anchorEl={anchorEl} open={open} onClose={close}>
+  <MenuItem onClick={close}>Action</MenuItem>
+</DisplayScaleMenu>;
+```
+
+See [the engine guide](docs/display-scale-engine.md) for policy, limitations, and migration guidance.
+
+## Development
+
+```bash
+npm install
+npm run check
+npm run build
+npm pack --dry-run
+```
+
+Public entry points:
+
+| Import | Purpose |
+| --- | --- |
+| `react-display-scale-engine` | All public exports |
+| `…/core` | Framework-independent detection and compensation math |
+| `…/react` | Provider and React hooks |
+| `…/mui` | MUI Menu, Popover, Popper, Select, Drawer and token adapters |
+
+## Publishing
+
+Before first publishing, make sure the `name` in `package.json` is an npm scope you own, then run `npm login`.
+
+```bash
+npm run release:check
+npm run release:dry-run
+npm run release:publish -- --otp 123456
+```
+
+The package includes a CLI:
+
+```bash
+npx rds-engine check
+npx rds-engine publish --dry-run
+npx rds-engine publish --otp 123456
+```
+
+`publish` always builds and runs `npm pack --dry-run` first. It never changes the version; use `npm version patch|minor|major` before publishing. When npm account policy requires 2FA for publishing, supply the current authenticator code with `--otp` or use an npm granular access token that has bypass-2FA permission.

package/bin/rds-engine.mjs

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+import { spawnSync } from "node:child_process";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const cwd = process.cwd();
+const packagePath = resolve(cwd, "package.json");
+
+function run(command, args) {
+  const result = spawnSync(command, args, { cwd, stdio: "inherit" });
+  if (result.error) {
+    console.error(`Could not run ${command}: ${result.error.message}`);
+    process.exit(1);
+  }
+  if (result.status !== 0) process.exit(result.status ?? 1);
+}
+
+function readPackage() {
+  try {
+    return JSON.parse(readFileSync(packagePath, "utf8"));
+  } catch {
+    console.error("No package.json was found in the current directory.");
+    process.exit(1);
+  }
+}
+
+function usage() {
+  console.log(`Usage:
+  rds-engine check
+  rds-engine publish [--dry-run] [--tag <tag>] [--access public|restricted] [--otp <code>]
+
+Run from the package repository root.`);
+}
+
+const [command, ...args] = process.argv.slice(2);
+
+if (!command || command === "--help" || command === "-h") {
+  usage();
+  process.exit(0);
+}
+
+if (command === "--version" || command === "-v") {
+  console.log(readPackage().version);
+  process.exit(0);
+}
+
+if (command !== "check" && command !== "publish") {
+  usage();
+  process.exit(1);
+}
+
+const pkg = readPackage();
+if (!pkg.name || !pkg.version) {
+  console.error("package.json must include both name and version.");
+  process.exit(1);
+}
+
+run("npm", ["run", "check"]);
+run("npm", ["pack", "--dry-run"]);
+
+if (command === "check") {
+  console.log(`\\n✓ ${pkg.name}@${pkg.version} is ready to publish.`);
+  process.exit(0);
+}
+
+const dryRun = args.includes("--dry-run");
+const publishArgs = ["publish"];
+if (dryRun) publishArgs.push("--dry-run");
+
+for (let index = 0; index < args.length; index += 1) {
+  const arg = args[index];
+  if (arg === "--tag" || arg === "--access" || arg === "--otp") {
+    const value = args[index + 1];
+    if (!value) {
+      console.error(`${arg} needs a value.`);
+      process.exit(1);
+    }
+    publishArgs.push(arg, value);
+    index += 1;
+  }
+}
+
+if (pkg.name.startsWith("@") && !args.includes("--access")) {
+  publishArgs.push("--access", "public");
+}
+
+console.log(`\\nPublishing ${pkg.name}@${pkg.version}${dryRun ? " (dry run)" : ""}…`);
+run("npm", publishArgs);

package/dist/chunk-6UB65SJB.js

@@ -0,0 +1,68 @@
+import { toDisplayScaleLogicalPixels, getDisplayScaleOverlayMaxHeight, getDisplayScaleLogicalViewport } from './chunk-U3ZWHUJG.js';
+import { useDisplayScaleCompensation, useDisplayScale } from './chunk-R5CTLLUS.js';
+import { useCallback, useMemo } from 'react';
+
+function useDisplayScaleOverlay() {
+  const { compensation, overlayStrategy, rootRef } = useDisplayScaleCompensation();
+  const toLogicalPixels = useCallback(
+    (value) => toDisplayScaleLogicalPixels(value, compensation),
+    [compensation]
+  );
+  const toOverlayContentPixels = useCallback(
+    (value) => toDisplayScaleLogicalPixels(value, compensation),
+    [compensation]
+  );
+  const getMaxHeightBelowAnchor = useCallback(
+    (anchor, options) => {
+      if (overlayStrategy === "document-body") {
+        const { offset = 8, viewportInset = 16 } = options ?? {};
+        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+        const visibleHeight = Math.max(
+          0,
+          viewportHeight - anchor.getBoundingClientRect().bottom - offset - viewportInset
+        );
+        const zoom = compensation.zoom > 0 ? compensation.zoom : 1;
+        return Math.floor(visibleHeight / zoom);
+      }
+      return getDisplayScaleOverlayMaxHeight(anchor.getBoundingClientRect(), compensation, options);
+    },
+    [compensation, overlayStrategy]
+  );
+  return useMemo(
+    () => ({
+      portalContainer: overlayStrategy === "document-body" ? typeof document === "undefined" ? null : document.body : rootRef.current,
+      logicalViewport: getDisplayScaleLogicalViewport(compensation),
+      toLogicalPixels,
+      toOverlayContentPixels,
+      getMaxHeightBelowAnchor
+    }),
+    [
+      compensation,
+      getMaxHeightBelowAnchor,
+      overlayStrategy,
+      rootRef,
+      toLogicalPixels,
+      toOverlayContentPixels
+    ]
+  );
+}
+function useLogicalMinWidth(minWidth) {
+  const { snapshot } = useDisplayScale();
+  const { compensation } = useDisplayScaleCompensation();
+  return useMemo(() => {
+    const zoom = compensation.zoom > 0 ? compensation.zoom : 1;
+    return snapshot.viewport.width / zoom >= minWidth;
+  }, [compensation.zoom, minWidth, snapshot.viewport.width]);
+}
+function useLogicalMaxWidth(maxWidth) {
+  const { snapshot } = useDisplayScale();
+  const { compensation } = useDisplayScaleCompensation();
+  return useMemo(() => {
+    const zoom = compensation.zoom > 0 ? compensation.zoom : 1;
+    return snapshot.viewport.width / zoom <= maxWidth;
+  }, [compensation.zoom, maxWidth, snapshot.viewport.width]);
+}
+
+export { useDisplayScaleOverlay, useLogicalMaxWidth, useLogicalMinWidth };
+//# sourceMappingURL=chunk-6UB65SJB.js.map
+//# sourceMappingURL=chunk-6UB65SJB.js.map

package/dist/chunk-6UB65SJB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useDisplayScaleOverlay.ts","../src/useLogicalBreakpoint.ts"],"names":["useMemo"],"mappings":"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","file":"chunk-6UB65SJB.js","sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDisplayScaleCompensation } from \"./DisplayScaleCompensationProvider\";\nimport {\n  type DisplayScaleOverlayBoundsOptions,\n  getDisplayScaleLogicalViewport,\n  getDisplayScaleOverlayMaxHeight,\n  toDisplayScaleLogicalPixels,\n} from \"./displayScaleLogicalViewport\";\n\nexport type DisplayScaleOverlay = {\n  /** MUI portal target selected by the engine strategy. */\n  portalContainer: HTMLElement | null;\n  logicalViewport: ReturnType<typeof getDisplayScaleLogicalViewport>;\n  toLogicalPixels: (value: number) => number;\n  /** Converts a visible size to the CSS size required by density-zoomed content. */\n  toOverlayContentPixels: (value: number) => number;\n  getMaxHeightBelowAnchor: (\n    anchor: HTMLElement,\n    options?: DisplayScaleOverlayBoundsOptions,\n  ) => number;\n};\n\n/**\n * Overlay geometry adapter. Use this instead of dividing coordinates by the\n * display-scale zoom in feature code.\n */\nexport function useDisplayScaleOverlay(): DisplayScaleOverlay {\n  const { compensation, overlayStrategy, rootRef } = useDisplayScaleCompensation();\n\n  // A density-zoomed portal consumes positioning values in its logical\n  // coordinate space, even when it is hosted by document.body.\n  const toLogicalPixels = useCallback(\n    (value: number) => toDisplayScaleLogicalPixels(value, compensation),\n    [compensation],\n  );\n\n  const toOverlayContentPixels = useCallback(\n    (value: number) => toDisplayScaleLogicalPixels(value, compensation),\n    [compensation],\n  );\n\n  const getMaxHeightBelowAnchor = useCallback(\n    (anchor: HTMLElement, options?: DisplayScaleOverlayBoundsOptions) => {\n      if (overlayStrategy === \"document-body\") {\n        const { offset = 8, viewportInset = 16 } = options ?? {};\n        const viewportHeight = window.visualViewport?.height ?? window.innerHeight;\n        const visibleHeight = Math.max(\n          0,\n          viewportHeight - anchor.getBoundingClientRect().bottom - offset - viewportInset,\n        );\n\n        // The portal is positioned in browser-visible pixels, but its content\n        // inherits MUI's density zoom. Convert only a content dimension back\n        // to logical pixels so its visible height reaches this boundary.\n        const zoom = compensation.zoom > 0 ? compensation.zoom : 1;\n        return Math.floor(visibleHeight / zoom);\n      }\n      return getDisplayScaleOverlayMaxHeight(anchor.getBoundingClientRect(), compensation, options);\n    },\n    [compensation, overlayStrategy],\n  );\n\n  return useMemo(\n    () => ({\n      portalContainer:\n        overlayStrategy === \"document-body\"\n          ? typeof document === \"undefined\"\n            ? null\n            : document.body\n          : rootRef.current,\n      logicalViewport: getDisplayScaleLogicalViewport(compensation),\n      toLogicalPixels,\n      toOverlayContentPixels,\n      getMaxHeightBelowAnchor,\n    }),\n    [\n      compensation,\n      getMaxHeightBelowAnchor,\n      overlayStrategy,\n      rootRef,\n      toLogicalPixels,\n      toOverlayContentPixels,\n    ],\n  );\n}\n","import { useMemo } from \"react\";\nimport { useDisplayScaleCompensation } from \"./DisplayScaleCompensationProvider\";\nimport { useDisplayScale } from \"./useDisplayScale\";\n\n/**\n * Tests a breakpoint against the compensated root width rather than the raw\n * browser viewport. Use for app-shell decisions that must preserve the same\n * layout at Windows 100% and compensated 150%.\n */\nexport function useLogicalMinWidth(minWidth: number): boolean {\n  const { snapshot } = useDisplayScale();\n  const { compensation } = useDisplayScaleCompensation();\n\n  return useMemo(() => {\n    const zoom = compensation.zoom > 0 ? compensation.zoom : 1;\n    return snapshot.viewport.width / zoom >= minWidth;\n  }, [compensation.zoom, minWidth, snapshot.viewport.width]);\n}\n\n/** Logical counterpart to a max-width media query. */\nexport function useLogicalMaxWidth(maxWidth: number): boolean {\n  const { snapshot } = useDisplayScale();\n  const { compensation } = useDisplayScaleCompensation();\n\n  return useMemo(() => {\n    const zoom = compensation.zoom > 0 ? compensation.zoom : 1;\n    return snapshot.viewport.width / zoom <= maxWidth;\n  }, [compensation.zoom, maxWidth, snapshot.viewport.width]);\n}\n"]}

package/dist/chunk-AGM7V7PR.js

@@ -0,0 +1,413 @@
+import { useDisplayScaleCompensation, useDisplayScaleAnchor } from './chunk-R5CTLLUS.js';
+import { Menu, Popover, Popper, Select } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useCallback, useLayoutEffect, useRef, useMemo, useId, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/createMuiDisplayScaleComponents.ts
+function createMuiDisplayScaleComponents({
+  getPortalContainer,
+  overlayZoom = 1
+}) {
+  const zoom = overlayZoom > 0 ? overlayZoom : 1;
+  const resolveContainerZoom = (container) => {
+    if (typeof document === "undefined") return zoom;
+    const resolvedContainer = typeof container === "function" ? container() : container;
+    return resolvedContainer == null || resolvedContainer === document.body ? zoom : 1;
+  };
+  return {
+    MuiModal: {
+      defaultProps: {
+        container: getPortalContainer
+      }
+    },
+    MuiDialog: {
+      defaultProps: {
+        container: getPortalContainer
+      },
+      styleOverrides: {
+        paper: ({ ownerState }) => ({ zoom: resolveContainerZoom(ownerState?.container) })
+      }
+    },
+    MuiPopover: {
+      defaultProps: {
+        container: getPortalContainer
+      },
+      styleOverrides: {
+        paper: ({ ownerState }) => ({ zoom: resolveContainerZoom(ownerState?.container) })
+      }
+    },
+    MuiPopper: {
+      defaultProps: {
+        container: getPortalContainer
+      },
+      styleOverrides: {
+        root: ({ ownerState }) => ({ zoom: resolveContainerZoom(ownerState?.container) })
+      }
+    },
+    MuiDrawer: {
+      defaultProps: {
+        // Drawer inherits Modal props. Supplying the portal host here (rather
+        // than only through MuiModal) also covers Drawer internals directly.
+        container: getPortalContainer
+      },
+      styleOverrides: {
+        paper: ({ ownerState }) => {
+          if (ownerState.variant !== "temporary") return {};
+          const isVertical = ownerState.anchor === "left" || ownerState.anchor === "right";
+          return isVertical ? {
+            zoom,
+            height: "var(--ep-display-scale-overlay-viewport-height, 100dvh)",
+            maxHeight: "var(--ep-display-scale-overlay-viewport-height, 100dvh)"
+          } : {
+            zoom,
+            width: "var(--ep-display-scale-overlay-viewport-width, 100dvw)",
+            maxWidth: "var(--ep-display-scale-overlay-viewport-width, 100dvw)"
+          };
+        }
+      }
+    }
+  };
+}
+function resolveOffset(origin, size) {
+  if (typeof origin === "number") return origin;
+  if (origin === "center") return size / 2;
+  if (origin === "bottom" || origin === "right") return size;
+  return 0;
+}
+function resolveOrigins(anchorOrigin, transformOrigin, anchorWidth, anchorHeight, paperWidth, paperHeight) {
+  const resolvedAnchorOrigin = anchorOrigin ?? { vertical: "top", horizontal: "left" };
+  const resolvedTransformOrigin = transformOrigin ?? { vertical: "top", horizontal: "left" };
+  return {
+    anchorX: resolveOffset(resolvedAnchorOrigin.horizontal, anchorWidth),
+    anchorY: resolveOffset(resolvedAnchorOrigin.vertical, anchorHeight),
+    transformX: resolveOffset(resolvedTransformOrigin.horizontal, paperWidth),
+    transformY: resolveOffset(resolvedTransformOrigin.vertical, paperHeight)
+  };
+}
+function useDisplayScalePopoverPosition({
+  open,
+  overlayRootRef,
+  anchorElement,
+  anchorReference,
+  anchorPosition,
+  anchorOrigin,
+  transformOrigin,
+  marginThreshold = 16
+}) {
+  const { compensation, layoutExtents, rootRef } = useDisplayScaleCompensation();
+  const correctPosition = useCallback(() => {
+    if (!open || !compensation.active || !layoutExtents) return;
+    const overlayRoot = overlayRootRef.current;
+    const paper = overlayRoot?.querySelector(".MuiPopover-paper");
+    if (!paper) return;
+    const zoom = compensation.zoom > 0 ? compensation.zoom : 1;
+    const rootRect = rootRef.current?.getBoundingClientRect();
+    const rootLeft = rootRect?.left ?? 0;
+    const rootTop = rootRect?.top ?? 0;
+    const anchorRect = anchorElement?.getBoundingClientRect();
+    const anchorX = anchorReference === "anchorPosition" && anchorPosition ? (anchorPosition.left - rootLeft) / zoom : anchorRect ? (anchorRect.left - rootLeft) / zoom : null;
+    const anchorY = anchorReference === "anchorPosition" && anchorPosition ? (anchorPosition.top - rootTop) / zoom : anchorRect ? (anchorRect.top - rootTop) / zoom : null;
+    if (anchorX == null || anchorY == null) return;
+    const paperWidth = paper.offsetWidth;
+    const paperHeight = paper.offsetHeight;
+    const {
+      anchorX: originX,
+      anchorY: originY,
+      transformX,
+      transformY
+    } = resolveOrigins(
+      anchorOrigin,
+      transformOrigin,
+      anchorRect ? anchorRect.width / zoom : 0,
+      anchorRect ? anchorRect.height / zoom : 0,
+      paperWidth,
+      paperHeight
+    );
+    const margin = typeof marginThreshold === "number" ? marginThreshold : 16;
+    const maxLeft = Math.max(margin, layoutExtents.layoutWidthPx - margin - paperWidth);
+    const maxTop = Math.max(margin, layoutExtents.layoutHeightPx - margin - paperHeight);
+    const left = Math.min(maxLeft, Math.max(margin, anchorX + originX - transformX));
+    const top = Math.min(maxTop, Math.max(margin, anchorY + originY - transformY));
+    paper.style.left = `${Math.round(left)}px`;
+    paper.style.top = `${Math.round(top)}px`;
+  }, [
+    anchorElement,
+    anchorOrigin,
+    anchorPosition,
+    anchorReference,
+    compensation.active,
+    compensation.zoom,
+    layoutExtents,
+    marginThreshold,
+    open,
+    overlayRootRef,
+    rootRef,
+    transformOrigin
+  ]);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const firstFrame = window.requestAnimationFrame(() => {
+      correctPosition();
+      window.requestAnimationFrame(correctPosition);
+    });
+    window.addEventListener("resize", correctPosition);
+    window.addEventListener("scroll", correctPosition, true);
+    return () => {
+      window.cancelAnimationFrame(firstFrame);
+      window.removeEventListener("resize", correctPosition);
+      window.removeEventListener("scroll", correctPosition, true);
+    };
+  }, [correctPosition, open]);
+}
+function DisplayScaleMenu({ anchorEl, ...props }) {
+  const displayScaleAnchor = useDisplayScaleAnchor(anchorEl ?? null);
+  const { compensation, rootRef } = useDisplayScaleCompensation();
+  const theme = useTheme();
+  const overlayRootRef = useRef(null);
+  const horizontalOrigin = theme.direction === "rtl" ? "right" : "left";
+  const anchorOrigin = props.anchorOrigin ?? {
+    vertical: "bottom",
+    horizontal: horizontalOrigin
+  };
+  const transformOrigin = props.transformOrigin ?? {
+    vertical: "top",
+    horizontal: horizontalOrigin
+  };
+  const anchorPosition = useMemo(() => {
+    if (props.anchorReference !== "anchorPosition" || !props.anchorPosition) {
+      return props.anchorPosition;
+    }
+    const zoom = compensation.zoom > 0 ? compensation.zoom : 1;
+    return {
+      top: props.anchorPosition.top / zoom,
+      left: props.anchorPosition.left / zoom
+    };
+  }, [compensation.zoom, props.anchorPosition, props.anchorReference]);
+  useDisplayScalePopoverPosition({
+    open: props.open,
+    overlayRootRef,
+    anchorElement: anchorEl ?? null,
+    anchorReference: props.anchorReference,
+    anchorPosition: props.anchorPosition,
+    anchorOrigin,
+    transformOrigin,
+    marginThreshold: props.marginThreshold
+  });
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      ...props,
+      ref: overlayRootRef,
+      anchorEl: displayScaleAnchor,
+      anchorPosition,
+      anchorOrigin,
+      container: rootRef.current ?? document.body,
+      transformOrigin
+    }
+  );
+}
+function DisplayScalePopover({
+  anchorEl,
+  ...props
+}) {
+  const displayScaleAnchor = useDisplayScaleAnchor(anchorEl ?? null);
+  const { rootRef } = useDisplayScaleCompensation();
+  const overlayRootRef = useRef(null);
+  useDisplayScalePopoverPosition({
+    open: props.open,
+    overlayRootRef,
+    anchorElement: anchorEl ?? null,
+    anchorReference: props.anchorReference,
+    anchorPosition: props.anchorPosition,
+    anchorOrigin: props.anchorOrigin,
+    transformOrigin: props.transformOrigin,
+    marginThreshold: props.marginThreshold
+  });
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ...props,
+      ref: overlayRootRef,
+      anchorEl: displayScaleAnchor,
+      container: rootRef.current ?? document.body
+    }
+  );
+}
+var defaultDisplayScalePopperModifiers = [
+  {
+    name: "offset",
+    options: { offset: [0, 8] }
+  }
+];
+function scalePopperOffsets(modifiers, zoom) {
+  if (!modifiers || zoom === 1) return modifiers;
+  return modifiers.map((modifier) => {
+    if (modifier.name !== "offset") return modifier;
+    const options = modifier.options;
+    const rawOffset = options?.offset;
+    if (!rawOffset) return modifier;
+    const scaleValue = (value) => value == null ? value : value / zoom;
+    const offset = typeof rawOffset === "function" ? (args) => {
+      const [skidding, distance] = rawOffset(args);
+      return [scaleValue(skidding), scaleValue(distance)];
+    } : [scaleValue(rawOffset[0]), scaleValue(rawOffset[1])];
+    return { ...modifier, options: { ...options, offset } };
+  });
+}
+function DisplayScalePopper({ anchorEl, ...props }) {
+  const displayScaleAnchor = useDisplayScaleAnchor(anchorEl ?? null);
+  const { compensation, rootRef } = useDisplayScaleCompensation();
+  const modifiers = useMemo(
+    () => scalePopperOffsets(props.modifiers ?? defaultDisplayScalePopperModifiers, compensation.zoom),
+    [compensation.zoom, props.modifiers]
+  );
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...props,
+      anchorEl: displayScaleAnchor,
+      container: rootRef.current ?? document.body,
+      modifiers,
+      style: { ...props.style, zoom: 1 }
+    }
+  );
+}
+function DisplayScaleSelect(props) {
+  const {
+    MenuProps,
+    SelectDisplayProps,
+    defaultOpen,
+    onClose,
+    onOpen,
+    open: openProp,
+    ...selectProps
+  } = props;
+  const { rootRef } = useDisplayScaleCompensation();
+  const menuRootRef = useRef(null);
+  const selectId = useId();
+  const [anchorElement, setAnchorElement] = useState(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+  const open = openProp ?? uncontrolledOpen;
+  useLayoutEffect(() => {
+    if (!open) {
+      setAnchorElement(null);
+      return;
+    }
+    setAnchorElement(
+      document.querySelector(`[data-ep-display-scale-select="${selectId}"]`)
+    );
+  }, [open, selectId]);
+  const handleOpen = useCallback(
+    (event) => {
+      if (openProp === void 0) setUncontrolledOpen(true);
+      onOpen?.(event);
+    },
+    [onOpen, openProp]
+  );
+  const handleClose = useCallback(
+    (event) => {
+      if (openProp === void 0) setUncontrolledOpen(false);
+      onClose?.(event);
+    },
+    [onClose, openProp]
+  );
+  useDisplayScalePopoverPosition({
+    open,
+    overlayRootRef: menuRootRef,
+    anchorElement,
+    anchorOrigin: { vertical: "bottom", horizontal: "center" },
+    transformOrigin: { vertical: "top", horizontal: "center" }
+  });
+  const menuProps = useMemo(() => {
+    const paperSlot = MenuProps?.slotProps?.paper;
+    const resolvedPaperSlot = typeof paperSlot === "function" ? void 0 : paperSlot;
+    return {
+      ...MenuProps,
+      container: rootRef.current ?? document.body,
+      ref: menuRootRef,
+      slotProps: {
+        ...MenuProps?.slotProps,
+        paper: {
+          ...resolvedPaperSlot,
+          style: { ...resolvedPaperSlot?.style, zoom: 1 }
+        }
+      }
+    };
+  }, [MenuProps, rootRef]);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...selectProps,
+      open,
+      onOpen: handleOpen,
+      onClose: handleClose,
+      MenuProps: menuProps,
+      SelectDisplayProps: {
+        ...SelectDisplayProps,
+        "data-ep-display-scale-select": selectId
+      }
+    }
+  );
+}
+function useDisplayScaleTabsIndicator(tabsRef, value) {
+  const { compensation } = useDisplayScaleCompensation();
+  useLayoutEffect(() => {
+    if (!compensation.active) return;
+    const updateIndicator = () => {
+      const tabs = tabsRef.current;
+      const indicator = tabs?.querySelector(".MuiTabs-indicator");
+      const selectedTab = tabs?.querySelector(".MuiTab-root.Mui-selected");
+      if (!tabs || !indicator || !selectedTab) return;
+      const isRtl = getComputedStyle(tabs).direction === "rtl";
+      const left = selectedTab.offsetLeft;
+      const width = selectedTab.offsetWidth;
+      indicator.style.width = `${width}px`;
+      if (isRtl) {
+        indicator.style.left = "auto";
+        indicator.style.right = `${tabs.offsetWidth - left - width}px`;
+      } else {
+        indicator.style.right = "auto";
+        indicator.style.left = `${left}px`;
+      }
+    };
+    const frame = window.requestAnimationFrame(updateIndicator);
+    const observer = new ResizeObserver(updateIndicator);
+    if (tabsRef.current) observer.observe(tabsRef.current);
+    window.addEventListener("resize", updateIndicator);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      observer.disconnect();
+      window.removeEventListener("resize", updateIndicator);
+    };
+  }, [compensation.active, tabsRef, value]);
+}
+
+// src/displayScaleLayoutTokens.ts
+var displayScalePageFillSx = {
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  width: "100%",
+  height: "100%"
+};
+var signinViewportShellSx = {
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  width: "100%",
+  height: "100%",
+  overflow: "hidden",
+  boxSizing: "border-box"
+};
+var signinSplitColumnSx = {
+  flex: { xs: "0 0 auto", md: "1 1 0" },
+  width: { xs: "100%", md: "50%" },
+  maxWidth: { xs: "100%", md: "50%" },
+  minWidth: 0,
+  boxSizing: "border-box"
+};
+
+export { DisplayScaleMenu, DisplayScalePopover, DisplayScalePopper, DisplayScaleSelect, createMuiDisplayScaleComponents, displayScalePageFillSx, signinSplitColumnSx, signinViewportShellSx, useDisplayScalePopoverPosition, useDisplayScaleTabsIndicator };
+//# sourceMappingURL=chunk-AGM7V7PR.js.map
+//# sourceMappingURL=chunk-AGM7V7PR.js.map