Prevent VSCode themes from interfering with D2 diagram rendering

[trukhinyuri]

fix: Prevent VSCode themes from interfering with D2 diagram rendering

Problem:
Users reported black traces appearing on arrows when rendering D2 diagrams
in VSCode. This was caused by VSCode themes overriding D2's CSS classes,
particularly the .connection class used for drawing arrows and connections.

Root Cause:
D2 uses global CSS classes (.connection, .shape, .blend) that were being
overridden by external stylesheets in VSCode themes, causing visual
artifacts on diagram elements.

Solution:
Added targeted CSS rules to prevent external style interference while
maintaining proper rendering of all diagram elements:

• Added svg path.connection rule to specifically target path elements
  (not polygons in arrow markers) and prevent fill/background overrides
• Added svg .connection:not(.blend) to exclude blend elements from
  background overrides
• Added svg .shape to prevent background interference on shapes
• Used !important declarations to ensure D2 styles take precedence

The CSS rules are carefully scoped to:

1. Prevent arrow markers (polygons) from becoming invisible
2. Preserve opacity for blend elements
3. Block external theme interference without breaking D2's own styling

Changes made:

• Modified d2renderers/d2svg/style.css to add protective CSS rules
• Updated all affected E2E test snapshots to include the new CSS

This ensures D2 diagrams render correctly regardless of the VSCode theme
or other external CSS that may be present in the rendering environment.

Fixes: Black traces on arrows in VSCode-rendered D2 diagrams

[Copilot]

Pull Request Overview

This PR strengthens D2’s SVG styling to avoid theme overrides in VSCode and reshapes some internal APIs and tests to support hover functionality and updated hashing.

• Added more specific CSS selectors in style.css to lock down fills and backgrounds against external styles.
• Updated the object ID hash function from FNV32a with a salt to a plain FNV64a hex-encoded output.
• Added extensive hover tests in the LSP layer and exposed hover support in the JS/WASM API.

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
d2renderers/d2svg/style.css	Scoped CSS rules to override external theme styles
d2renderers/d2svg/d2svg.go	Replaced salted FNV-32a hash with hex‐encoded FNV‐64a
d2lsp/hover_test.go	Added comprehensive hover information tests
d2lsp/hover.go	Implemented hover logic for keywords, values, edges
d2js/js.go	Registered new “getHover” API in JS/WASM entry point
d2js/d2wasm/functions.go	Added GetHover binding and response serialization

Comments suppressed due to low confidence (4)

d2js/js.go:15

• You’ve exposed a new getHover API in the JS/WASM layer; consider adding or updating unit/integration tests to verify its behavior and argument handling.

	api.Register("getHover", d2wasm.GetHover)

d2js/d2wasm/functions.go:548

• [nitpick] The error message is generic; include which arguments are missing (e.g., expected 3 but got X) to make debugging easier for API consumers.

		return nil, &WASMError{Message: "missing required arguments", Code: 400}

d2renderers/d2svg/d2svg.go:3166

• [nitpick] The hash function no longer includes the previous secret salt and now hex-encodes a 64-bit FNV value; document this behavioral change to avoid confusion and ensure downstream code expecting the old format is updated.

func hash(s string) string {

d2lsp/hover.go:197

• The list of shape names contains duplicate entries (diamond, oval twice); removing duplicates will reduce maintenance overhead and avoid confusion.

				"**Available shapes**: rectangle, circle, oval, diamond, parallelogram, hexagon, cylinder, queue, package, step, callout, stored_data, person, diamond, oval, cloud, text, code, class, sql_table, image, sequence_diagram",

[Copilot]

The background property does not apply to most SVG elements; to prevent external theme overrides on shapes use fill: none !important and/or stroke: none !important instead.

Suggested change

	background: none !important;
	}
	svg .shape {
	background: none !important;
	}
	svg .shape {