Updates

[gilbarbara]

This pull request includes a mix of dependency upgrades, improvements to the overlay spotlight calculation logic, and various configuration and test updates. The most significant change is a refactor of how the overlay spotlight cutout is calculated and rendered, especially when using custom portals, making the logic more robust and accurate across different DOM layouts. Additionally, many dependencies and GitHub Actions have been updated for security and compatibility.

Overlay spotlight calculation improvements:

• Refactored the overlay spotlight cutout logic in Overlay.tsx to compute the cutout relative to the SVG origin, handling custom portals, body-level portals, and fixed-position targets more accurately. This includes using a new svgRef and removing the old getAbsoluteOffset logic. [1] [2] [3] [4]
• Updated and expanded tests in Overlay.spec.tsx to cover the new spotlight logic, including various portal and positioning scenarios. [1] [2] [3]

Dependency and tooling upgrades:

• Upgraded numerous dependencies in package.json, including React, TypeScript, Playwright, ESLint, Prettier, and others, as well as updating the package manager field. [1] [2]
• Updated several GitHub Actions versions in .github/workflows/ci.yml for improved security and compatibility. [1] [2] [3]
• Updated workspace and build configurations in pnpm-workspace.yaml, website/pnpm-workspace.yaml, and vitest.config.mts to align with new dependency versions and plugin changes. [1] [2] [3]

Website/demo updates:

• Updated dependencies and some demo logic in website/package.json and Overview.tsx, including switching to a new color picker and minor demo timing tweaks. [1] [2] [3]

Code cleanup and minor fixes:

• Removed unused or redundant code, such as the getAbsoluteOffset function in dom.ts, and made minor code style improvements in various files. [1] [2] [3] [4] [5]

These changes collectively improve the robustness of the overlay rendering logic, modernize dependencies, and ensure better compatibility and maintainability across the codebase.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[Copilot]

Pull request overview

This PR modernizes the repo (dependency/tooling updates and CI tweaks) and refactors the overlay spotlight cutout computation to be more robust across portals and DOM layouts, with expanded test coverage to validate the new behavior.

Changes:

• Refactors Overlay spotlight cutout positioning to compute relative to the rendered SVG origin (better handling of custom portals / fixed targets), and updates tests accordingly.
• Upgrades and aligns dependencies/tooling (React/TS/Vite/Vitest/Playwright/ESLint/Prettier) plus workspace configuration adjustments.
• Updates the website/demo (new color picker, minor UI tweaks, and demo step timing adjustments).

Reviewed changes

Copilot reviewed 20 out of 24 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
website/tsconfig.json	Adjusts TS compiler options and path mappings for the website workspace.
website/src/providers/ConfigProvider.tsx	Minor type formatting cleanup for style settings lookup.
website/src/css/index.css	Adds Tailwind source scanning for the new color picker package.
website/src/components/SourceCodeLink.tsx	Tweaks button styling and icon sizing for the source link UI.
website/src/components/Playground.tsx	Tweaks button styling and icon sizing for the playground UI.
website/src/components/ConfigPanel/FAB.tsx	Tweaks FAB styling and icon sizing.
website/src/components/ColorPicker.tsx	Replaces the color picker implementation and updates rendering for transparency.
website/src/app/demos/overview/Overview.tsx	Adjusts step timing and updates explanatory copy.
website/pnpm-workspace.yaml	Adds pnpm workspace overrides/hoisting/build allowlist for the website workspace.
website/package.json	Updates website dependencies (including new color picker) and version pins.
website/.npmrc	Removes now-redundant hoisting config (moved to workspace config).
vitest.config.mts	Updates Vitest/Vite plugin configuration to match new toolchain versions.
tsconfig.json	Updates root TS path mappings/types for the main workspace.
test/components/Overlay.spec.tsx	Adds new tests for spotlight origin offsets across portal/fixed scenarios.
test/setup/test-utils.ts	Removes an eslint-disable and keeps the test-utils re-export surface.
src/types/step.ts	Minor type formatting cleanup.
src/modules/dom.ts	Removes unused offset helper and updates documentation around element positioning.
src/components/Overlay.tsx	Refactors spotlight cutout coordinate calculation using SVG origin + scrolling context.
pnpm-workspace.yaml	Adds root pnpm workspace configuration (overrides/allowBuilds).
package.json	Updates core devDependencies and sets an explicit pnpm packageManager version.
.github/workflows/ci.yml	Updates GitHub Actions versions and pnpm setup configuration.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud