Bloch Sphere Widget - Command and Dev Playground

[ScottCarda-MS]

Bloch Sphere View for Q# UX (Playground + VS Code)

Summary

This PR introduces an interactive Bloch sphere view in the shared Q# UX package and wires it into both:

• the dev playground (as a first-class Tools view)
• the VS Code extension webview (via a dedicated command)

It also adds the synthesis data/tooling used by the Bloch Rz helper.

What’s Included

New Bloch UX surface

• Adds a new Bloch widget implementation in the shared UX layer.
• Includes gate application controls, sequence playback/history, and Rz synthesis integration.
• Includes theme-aware rendering/styling for host environments.

Shared math and compute cleanup

• Introduces shared quantum math primitives used across Bloch/state visualization paths.
• Refactors relevant state-viz worker computation to align with shared math utilities.

Rz synthesis artifacts and generator source

• Adds checked-in lookup artifacts:
  • source/npm/qsharp/rz-array.json
  • source/npm/qsharp/rz-details.json
• Adds generator source/tooling for reproducibility:
  • source/npm/qsharp/tools/rz-synthesis.ts
  • source/npm/qsharp/tools/tsconfig.json

Playground integration

• Adds Bloch view routing/rendering in the dev playground.
• Adds navigation entry placement under Tools.

VS Code integration

• Adds/updates webview command plumbing for Bloch panel display.
• Ensures webview/learning webview type-check configs support shared UX JSON import path.

Packaging and dependency updates

• Updates npm dependency metadata and lockfiles.
• Updates component governance manifest for shipped dependency compliance.

Key Files (high signal)

• source/npm/qsharp/ux/bloch.tsx
• source/npm/qsharp/ux/blochGates.ts
• source/npm/qsharp/ux/quantum-math.ts
• source/npm/qsharp/ux/cplx.ts
• source/npm/qsharp/ux/circuit-vis/state-viz/worker/stateCompute.ts
• source/npm/qsharp/rz-array.json
• source/npm/qsharp/rz-details.json
• source/npm/qsharp/tools/rz-synthesis.ts
• source/playground/src/nav.tsx
• source/playground/src/main.tsx
• source/vscode/src/webviewPanel.ts
• source/vscode/src/webview/webview.tsx

Screenshots

[amcasey]

Are the colors we want in dark mode? I find the arrows and the axis labels pretty close together.

Edit: from the code, they seem to have been chosen pretty deliberately. I find the white on beige a little strange, but it's not substantially hurting readability.

Also, this might just be my ignorance, but is n/a the appropriate value for phi here?

[amcasey]

Were we expecting it to expand with the pane?

[amcasey]

It seems like the slider at the bottom manipulates Rz in radians but the angles at the top are in degrees? Maybe that's a feature?

[amcasey]

Personally, I'd find it very helpful to see the ending state in the top-level summary (maybe top-right) and not just in the sidebar.

[amcasey]

Is the Reset button supposed to clear the Rz slider too?

[amcasey]

Random drive-by comments. That's a lot of 3D geometry code to review...

[billti]

This increases the size of the webview.js file in VS Code from 3MB to 4.4MB, which is a pretty sizable increase (~50%) for a file that gets loaded every time a webview opens (such as histogram, circuit viewer, etc.). We should determine if we've happy with this from a size and performance perspective before merging - as we've been pretty agressive on both of those fronts with the QDK to date.

[amcasey]

This increases the size of the webview.js file in VS Code from 3MB to 4.4MB, which is a pretty sizable increase (~50%) for a file that gets loaded every time a webview opens (such as histogram, circuit viewer, etc.). We should determine if we've happy with this from a size and performance perspective before merging - as we've been pretty agressive on both of those fronts with the QDK to date.

If size matters, have we considered minifying it?