feat(core): add dot and cross patterns to viewport gridlines

[johnyanarella]

Summary by CodeRabbit

• New Features
  • Viewport gridlines now support line, dot, and cross patterns, with examples of the new styles in the documentation.
• Bug Fixes
  • Updated the compressed bundle size check to allow a slightly larger maximum size.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

🧰 Additional context used

📚 Code guidelines (1)

AGENTS.md — auto-discovered

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository: NVIDIA/elements/.coderabbit.yaml
• Review profile: ASSERTIVE
• Plan: Enterprise
• Run ID: ab4ca9bb-1a8d-4fb8-9649-ef61c93b37bb

📥 Commits

Reviewing files that changed from the base of the PR and between 5bd07ef and 49b54d0.

⛔ Files ignored due to path filters (6)

• projects/core/.visual/viewport-crosses.dark.png is excluded by !**/*.png
• projects/core/.visual/viewport-crosses.png is excluded by !**/*.png
• projects/core/.visual/viewport-dots.dark.png is excluded by !**/*.png
• projects/core/.visual/viewport-dots.png is excluded by !**/*.png
• projects/core/.visual/viewport.dark.png is excluded by !**/*.png
• projects/core/.visual/viewport.png is excluded by !**/*.png

📒 Files selected for processing (7)

• projects/core/src/index.test.lighthouse.ts
• projects/core/src/viewport/viewport-gridlines.css
• projects/core/src/viewport/viewport-gridlines.test.ts
• projects/core/src/viewport/viewport-gridlines.ts
• projects/core/src/viewport/viewport.examples.ts
• projects/core/src/viewport/viewport.test.visual.ts
• projects/site/src/docs/elements/viewport.md

Included review availability: This review used your included allowance. Your plan provides up to 12 included reviews per hour; 11 remain after this review.

---

📝 Walkthrough

Walkthrough

The viewport gridlines element now supports line, dot, and cross patterns. Examples, documentation, and tests cover the new patterns. The Lighthouse test also raises the compressed bundle-size limit for index.js.

Changes

Viewport Gridline Patterns

Layer / File(s)	Summary
Pattern property, rendering, and validation projects/core/src/viewport/viewport-gridlines.ts, projects/core/src/viewport/viewport-gridlines.css, projects/core/src/viewport/viewport-gridlines.test.ts, projects/core/src/viewport/viewport.test.visual.ts	The element adds a reflected pattern property with lines, dots, and crosses options. SVG rendering and styles support each pattern. Tests cover pattern origins, geometry, sizing, opacity, and visual baselines.
Pattern examples and documentation projects/core/src/viewport/viewport.examples.ts, projects/site/src/docs/elements/viewport.md	Examples and documentation show dot and cross grids. The background example uses a triangle pattern, and the Minimap summary refers to default bounding boxes.

Bundle-Size Check

Layer / File(s)	Summary
Lighthouse size limit projects/core/src/index.test.lighthouse.ts	The compressed-size upper limit for index.js changes from 123.5 KB to 124.0 KB.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 49b54

No actionable merge-blocking issue was identified; the change is mergeable after normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 5 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the primary change: adding dot and cross patterns to viewport gridlines.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 5 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

projects/core/src/index.test.lighthouse.ts

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

projects/core/src/viewport/viewport-gridlines.css

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

projects/core/src/viewport/viewport-gridlines.test.ts

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

• 3 others

🔧 Vale (3.21.0)

{
"Line": 0,
"Path": "",
"Text": "E100 [loadStyles] Runtime error\n\nstyle 'Google' does not exist on StylesPath\n\nExecution stopped with code 1.",
"Code": "E100",
"Span": 0
}

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-code-quality]

Code Coverage Overview

Languages: TypeScript

TypeScript / code-coverage/vitest

The overall line coverage in commit 49b54d0 in the topic/viewport-gridl... branch remains at 99%, unchanged from commit 5bd07ef in the main branch.