fix: expose anchor size CSS variables

[draedful]

Summary

• provide default --graph-block-anchor-width and --graph-block-anchor-height values on the graph wrapper
• consume the size variables without fallback declarations while preserving CSS overrides
• document anchor sizing and add browser regression coverage for defaults and overrides

Root cause

Anchor coordinates were exposed as concrete CSS custom-property values, while width and height existed only as fallbacks inside var(...). As a result, consumers could not read default values from the custom properties and CSS processing could emit duplicate width and height declarations.

Impact

The rendered anchor size remains 16px × 16px by default. Consumers can continue overriding either dimension through the CSS cascade; no inline values are introduced.

Validation

• CI=1 npx playwright test e2e/tests/anchor/anchor-css-variables.spec.ts
• npm run typecheck
• npm run lint
• npm test -- --runInBand
• git diff --check

Fixes #329

Summary by Sourcery

Expose default graph anchor dimensions through CSS variables and verify that consumers can override them.

Bug Fixes:

• Expose default anchor width and height as readable CSS custom properties while retaining cascade-based consumer overrides.

Enhancements:

• Document configurable anchor sizing through CSS variables.

Documentation:

• Add anchor size variables to the React usage and styling documentation.

Tests:

• Add browser regression coverage for default anchor dimensions and overrides on anchors and graph wrappers.

[sourcery-ai]

Reviewer's Guide

Moves anchor sizing defaults to graph-wrapper CSS custom properties so consumers can read and override them through the cascade, with browser regression tests and updated React documentation/examples.

File-Level Changes

Change	Details	Files
Expose default anchor dimensions as inherited, readable CSS custom properties and consume them for rendered sizing.	Define 16px width and height defaults on the graph wrapper. Replace fallback-based anchor sizing with the exposed variables while preserving element- and wrapper-level cascade overrides. Keep anchor styling compatible with custom sizing without adding inline values.	src/react-components/graph-canvas.css src/react-components/Anchor.css
Add regression coverage for default CSS-variable values and consumer overrides.	Verify default variables and computed anchor dimensions are 16px. Verify width and height overrides on the anchor and graph wrapper propagate to computed dimensions.	e2e/tests/anchor/anchor-css-variables.spec.ts
Update React usage examples to document and demonstrate CSS-variable-based anchor sizing and styling hooks.	Apply an anchor class to usage examples for consumer CSS customization. Document width and height variables with a configurable sizing example. Align the selected-state class and anchor content structure with the updated styling approach.	docs/react/usage.md

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#329	Expose readable default CSS custom properties for graph anchor width and height, specifically --graph-block-anchor-width and --graph-block-anchor-height.	✅
#329	Use the exposed width and height variables to control anchor dimensions while preserving consumer overrides through the CSS cascade and maintaining the default 16px by 16px size.	✅
#329	Document the new anchor sizing variables and provide regression coverage for default values and overrides.	✅

Possibly linked issues

• Missing css-variables of graph-block-anchor for width and height #329: The PR directly implements the requested width and height variables, including defaults, overrides, documentation, and tests.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[gravity-ui-bot]

Preview is ready.

[draedful]

@sourcery-ai review

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

Sourcery assessment

Approved.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}