@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.d053ea2

package/src/lib/MotionStreamConnection.ts

@@ -1,186 +0,0 @@
-import {
-  type AutoReconnectingWebsocket,
-  tryParseJson,
-} from "@wandelbots/nova-js"
-import type {
-  MotionGroupDescription,
-  MotionGroupState,
-  NovaClient,
-  RobotControllerState,
-} from "@wandelbots/nova-js/v2"
-import { makeAutoObservable, runInAction } from "mobx"
-import type { Vector3Simple } from "./JoggerConnection"
-import {
-  jointValuesEqual,
-  tcpMotionEqual,
-  unwrapRotationVector,
-} from "./motionStateUpdate"
-
-const MOTION_DELTA_THRESHOLD = 0.0001
-
-/**
- * Store representing the current state of a connected motion group.
- */
-export class MotionStreamConnection {
-  static async open(nova: NovaClient, motionGroupId: string) {
-    const [_motionGroupIndex, controllerId] = motionGroupId.split("@") as [
-      string,
-      string,
-    ]
-
-    const controller =
-      await nova.api.controller.getCurrentRobotControllerState(controllerId)
-    const motionGroup = controller?.motion_groups.find(
-      (mg: MotionGroupState) => mg.motion_group === motionGroupId,
-    )
-    if (!controller || !motionGroup) {
-      throw new Error(
-        `Controller ${controllerId} or motion group ${motionGroupId} not found`,
-      )
-    }
-
-    const motionStateSocket = nova.openReconnectingWebsocket(
-      `/controllers/${controllerId}/motion-groups/${motionGroupId}/state-stream`,
-    )
-
-    // Wait for the first message to get the initial state
-    const firstMessage = await motionStateSocket.firstMessage()
-    const initialMotionState = tryParseJson(firstMessage.data)
-      ?.result as MotionGroupState
-
-    if (!initialMotionState) {
-      throw new Error(
-        `Unable to parse initial motion state message ${firstMessage.data}`,
-      )
-    }
-
-    console.log(
-      `Connected motion state websocket to motion group ${motionGroup.motion_group}. Initial state:\n  `,
-      initialMotionState,
-    )
-
-    // Get the motion group description for later usage in jogging
-    const description = await nova.api.motionGroup.getMotionGroupDescription(
-      controllerId,
-      motionGroup.motion_group,
-    )
-
-    return new MotionStreamConnection(
-      nova,
-      controller,
-      motionGroup,
-      description,
-      initialMotionState,
-      motionStateSocket,
-    )
-  }
-
-  // Not mobx-observable as this changes very fast; should be observed
-  // using animation frames
-  rapidlyChangingMotionState: MotionGroupState
-
-  constructor(
-    readonly nova: NovaClient,
-    readonly controller: RobotControllerState,
-    readonly motionGroup: MotionGroupState,
-    readonly description: MotionGroupDescription,
-    readonly initialMotionState: MotionGroupState,
-    readonly motionStateSocket: AutoReconnectingWebsocket,
-  ) {
-    this.rapidlyChangingMotionState = initialMotionState
-
-    motionStateSocket.addEventListener("message", (event) => {
-      const latestMotionState = tryParseJson(event.data)?.result as
-        | MotionGroupState
-        | undefined
-
-      if (!latestMotionState) {
-        throw new Error(
-          `Failed to get motion state for ${this.motionGroupId}: ${event.data}`,
-        )
-      }
-
-      // handle joint position changes
-      if (
-        !jointValuesEqual(
-          this.rapidlyChangingMotionState.joint_position,
-          latestMotionState.joint_position,
-          MOTION_DELTA_THRESHOLD,
-        )
-      ) {
-        runInAction(() => {
-          this.rapidlyChangingMotionState.joint_position =
-            latestMotionState.joint_position
-        })
-      }
-
-      // handle tcp pose changes
-      if (
-        !tcpMotionEqual(
-          this.rapidlyChangingMotionState,
-          latestMotionState,
-          MOTION_DELTA_THRESHOLD,
-        )
-      ) {
-        runInAction(() => {
-          if (this.rapidlyChangingMotionState.tcp_pose == null) {
-            this.rapidlyChangingMotionState.tcp_pose =
-              latestMotionState.tcp_pose
-          } else if (
-            latestMotionState.tcp_pose?.orientation &&
-            latestMotionState.tcp_pose?.position &&
-            this.rapidlyChangingMotionState.tcp_pose?.orientation
-          ) {
-            this.rapidlyChangingMotionState.tcp_pose = {
-              position: latestMotionState.tcp_pose.position,
-              orientation: unwrapRotationVector(
-                latestMotionState.tcp_pose.orientation as Vector3Simple,
-                this.rapidlyChangingMotionState.tcp_pose
-                  .orientation as Vector3Simple,
-              ),
-            }
-          } else {
-            console.warn(
-              "Received incomplete tcp_pose, ignoring",
-              latestMotionState.tcp_pose,
-            )
-          }
-        })
-      }
-
-      // handle standstill changes
-      if (
-        this.rapidlyChangingMotionState.standstill !==
-        latestMotionState.standstill
-      ) {
-        runInAction(() => {
-          this.rapidlyChangingMotionState.standstill =
-            latestMotionState.standstill
-        })
-      }
-    })
-    makeAutoObservable(this)
-  }
-
-  get motionGroupId() {
-    return this.motionGroup.motion_group
-  }
-
-  get controllerId() {
-    return this.controller.controller
-  }
-
-  get joints() {
-    return this.initialMotionState.joint_position.map((_, i) => {
-      return {
-        index: i,
-      }
-    })
-  }
-
-  dispose() {
-    this.motionStateSocket.close()
-  }
-}
-
-export default MotionStreamConnection

package/src/lib/motionStateUpdate.test.ts

@@ -1,28 +0,0 @@
-import { describe, expect, test } from "vitest"
-import { poseEqual } from "./motionStateUpdate"
-
-describe("poseEqual", async () => {
-  test("returns true for identical poses", () => {
-    const pose1 = {
-      position: [0, 0, 0],
-      orientation: [0, 0, 0],
-    }
-    const pose2 = {
-      position: [0, 0, 0],
-      orientation: [0, 0, 0],
-    }
-    expect(poseEqual(pose1, pose2, 0.001)).toBe(true)
-  })
-
-  test("returns false for different poses", () => {
-    const pose1 = {
-      position: [0, 0, 0],
-      orientation: [0, 0, 0],
-    }
-    const pose2 = {
-      position: [1, 1, 1],
-      orientation: [1, 1, 1],
-    }
-    expect(poseEqual(pose1, pose2, 0.001)).toBe(false)
-  })
-})

package/src/lib/motionStateUpdate.ts

@@ -1,117 +0,0 @@
-import type { MotionGroupState, Pose } from "@wandelbots/nova-js/v2"
-import type { Vector3Simple } from "./JoggerConnection"
-import { Vector3 } from "three"
-
-export function jointValuesEqual(
-  oldJointValues: number[],
-  newJointValues: number[],
-  changeDeltaThreshold: number,
-): boolean {
-  if (newJointValues.length !== oldJointValues.length) {
-    return true
-  }
-
-  for (let jointIndex = 0; jointIndex < newJointValues.length; jointIndex++) {
-    if (
-      // biome-ignore lint/style/noNonNullAssertion: legacy code
-      Math.abs(newJointValues[jointIndex]! - oldJointValues[jointIndex]!) >
-      changeDeltaThreshold
-    ) {
-      return false
-    }
-  }
-
-  return true
-}
-
-export function poseEqual(
-  oldTcp: Pose | undefined,
-  newTcp: Pose | undefined,
-  changeDeltaThreshold: number,
-): boolean {
-  // undefined -> defined (+reverse) transition
-  if ((oldTcp === undefined && newTcp) || (oldTcp && newTcp === undefined)) {
-    return false
-  }
-
-  // Poses might be incomplete (missing orientation or position)
-  if (
-    oldTcp?.orientation === undefined ||
-    newTcp?.orientation === undefined ||
-    oldTcp?.position === undefined ||
-    newTcp?.position === undefined
-  ) {
-    return false
-  }
-
-  // the typechecker cannot resolve states to "!= undefined" if "&&" is used
-  if (oldTcp === undefined || newTcp === undefined) {
-    return true
-  }
-
-  let changedDelta = 0
-  changedDelta += Math.abs(oldTcp.orientation[0] - newTcp.orientation[0])
-  changedDelta += Math.abs(oldTcp.orientation[1] - newTcp.orientation[1])
-  changedDelta += Math.abs(oldTcp.orientation[2] - newTcp.orientation[2])
-  changedDelta += Math.abs(oldTcp.position[0] - newTcp.position[0])
-  changedDelta += Math.abs(oldTcp.position[1] - newTcp.position[1])
-  changedDelta += Math.abs(oldTcp.position[2] - newTcp.position[2])
-
-  return changedDelta <= changeDeltaThreshold
-}
-
-// Runs poseEqual check + coordinate system/tcp name equality
-export function tcpMotionEqual(
-  oldMotionState: MotionGroupState,
-  newMotionState: MotionGroupState,
-  changeDeltaThreshold: number,
-): boolean {
-  return (
-    oldMotionState.coordinate_system === newMotionState.coordinate_system &&
-    oldMotionState.tcp === newMotionState.tcp &&
-    poseEqual(
-      oldMotionState.tcp_pose,
-      newMotionState.tcp_pose,
-      changeDeltaThreshold,
-    )
-  )
-}
-
-export function unwrapRotationVector(
-  newRotationVectorApi: Vector3Simple,
-  currentRotationVectorApi: Vector3Simple,
-): Vector3Simple {
-  const currentRotationVector = new Vector3(
-    currentRotationVectorApi[0],
-    currentRotationVectorApi[1],
-    currentRotationVectorApi[2],
-  )
-
-  const newRotationVector = new Vector3(
-    newRotationVectorApi[0],
-    newRotationVectorApi[1],
-    newRotationVectorApi[2],
-  )
-
-  const currentAngle = currentRotationVector.length()
-  const currentAxis = currentRotationVector.normalize()
-
-  let newAngle = newRotationVector.length()
-  let newAxis = newRotationVector.normalize()
-
-  // Align rotation axes
-  if (newAxis.dot(currentAxis) < 0) {
-    newAngle = -newAngle
-    newAxis = newAxis.multiplyScalar(-1.0)
-  }
-
-  // Shift rotation angle close to previous one to extend domain of rotation angles beyond [0, pi]
-  // - this simplifies interpolation and prevents abruptly changing signs of the rotation angles
-  let angleDifference = newAngle - currentAngle
-  angleDifference -=
-    2.0 * Math.PI * Math.floor((angleDifference + Math.PI) / (2.0 * Math.PI))
-
-  newAngle = currentAngle + angleDifference
-
-  return [...newAxis.multiplyScalar(newAngle)] as Vector3Simple
-}

package/src/test/consumer.test.ts

@@ -1,257 +0,0 @@
-/**
- * Consumer import tests.
- *
- * These tests run against the built dist/ output, exercising the package's
- * `exports` map the same way a real downstream consumer would. They check:
- *
- *   1. Every public subpath resolves via Node's `exports` resolver to a file
- *      that actually exists on disk (ESM, CJS, and .d.ts).
- *   2. The wildcard subpath export lets consumers deep-import any module
- *      under src/ (including folder-based ones like Timer/CycleTimer that
- *      have a sibling barrel).
- *   3. Named exports remain importable AND the MUI-style default export is
- *      also available and identical to the named one for primary components.
- *
- * Run via `pnpm test:consumer` (which builds first) or as part of
- * `pnpm test:unit:run` once dist/ exists.
- */
-import { execFileSync } from "node:child_process"
-import {
-  existsSync,
-  mkdirSync,
-  rmSync,
-  symlinkSync,
-  writeFileSync,
-} from "node:fs"
-import { createRequire } from "node:module"
-import { dirname, resolve } from "node:path"
-import { fileURLToPath } from "node:url"
-import { afterAll, beforeAll, describe, expect, it } from "vitest"
-
-const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "../..")
-const distDir = resolve(repoRoot, "dist")
-const pkgName = "@wandelbots/wandelbots-js-react-components"
-
-// Create a scratch directory outside the repo with a node_modules symlink
-// pointing at the repo, so the Node resolver treats us as if we were
-// installed as a dependency.
-const sandbox = resolve(repoRoot, ".tmp-consumer-test")
-const sandboxReq = createRequire(resolve(sandbox, "consumer.cjs"))
-// A tiny .mjs helper that prints the ESM resolution of `process.argv[2]`.
-// We invoke it as a child Node process because Vite's SSR runtime (used by
-// vitest) strips `import.meta.resolve`, and we specifically want to verify
-// Node's own resolver honours our `exports` map.
-const esmResolverScript = resolve(sandbox, "resolve-esm.mjs")
-
-beforeAll(() => {
-  if (!existsSync(distDir)) {
-    throw new Error(
-      "dist/ not found. Run `pnpm build` before running the consumer tests.",
-    )
-  }
-  rmSync(sandbox, { recursive: true, force: true })
-  mkdirSync(resolve(sandbox, "node_modules/@wandelbots"), { recursive: true })
-  symlinkSync(repoRoot, resolve(sandbox, "node_modules", pkgName), "dir")
-  writeFileSync(
-    esmResolverScript,
-    'import { fileURLToPath } from "node:url"\n' +
-      "process.stdout.write(fileURLToPath(import.meta.resolve(process.argv[2])))\n",
-  )
-})
-
-afterAll(() => {
-  rmSync(sandbox, { recursive: true, force: true })
-})
-
-function resolveEsm(spec: string): string {
-  return execFileSync(process.execPath, [esmResolverScript, spec], {
-    encoding: "utf8",
-    cwd: sandbox,
-  })
-}
-
-function resolveCjs(spec: string): string {
-  return sandboxReq.resolve(spec)
-}
-
-// The exports map doesn't advertise a `types` condition, but TypeScript's
-// resolver uses the same path with a `.d.ts` extension. Probe the ESM path
-// and swap the extension.
-function typesFor(esmPath: string): string {
-  return esmPath.replace(/\.js$/, ".d.ts")
-}
-
-describe("package exports — aggregate entries", () => {
-  const entries = [
-    { spec: pkgName, esm: "dist/index.js", cjs: "dist/index.cjs" },
-    { spec: `${pkgName}/core`, esm: "dist/core.js", cjs: "dist/core.cjs" },
-    { spec: `${pkgName}/3d`, esm: "dist/3d.js", cjs: "dist/3d.cjs" },
-    {
-      spec: `${pkgName}/wb-icons`,
-      esm: "dist/wb-icons.js",
-      cjs: "dist/wb-icons.cjs",
-    },
-  ]
-
-  it.each(entries)("$spec resolves ESM, CJS, and types", ({
-    spec,
-    esm,
-    cjs,
-  }) => {
-    const esmPath = resolveEsm(spec)
-    const cjsPath = resolveCjs(spec)
-    expect(esmPath).toBe(resolve(repoRoot, esm))
-    expect(cjsPath).toBe(resolve(repoRoot, cjs))
-    expect(existsSync(esmPath)).toBe(true)
-    expect(existsSync(cjsPath)).toBe(true)
-    expect(existsSync(typesFor(esmPath))).toBe(true)
-  })
-})
-
-describe("package exports — deep component imports", () => {
-  const specs = [
-    // File-backed modules resolved via the "./*" wildcard.
-    "components/DataGrid",
-    "components/AppHeader",
-    "components/LogPanel",
-    "components/ProgramControl",
-    "components/RobotCard",
-    "components/TabBar",
-    "components/VelocitySlider",
-    "components/jogging/JoggingPanel",
-    "components/jogging/JoggingStore",
-    "components/jogging/JoggingCartesianAxisControl",
-    "components/safetyBar/SafetyBar",
-    "components/3d-viewport/SafetyZonesRenderer",
-    "components/3d-viewport/TrajectoryRenderer",
-    "components/robots/Robot",
-    "components/robots/MotionGroupVisualizer",
-    "components/modal/NoMotionGroupModal",
-    "lib/ConnectedMotionGroup",
-    "lib/JoggerConnection",
-    "lib/MotionStreamConnection",
-    "themes/createDarkTheme",
-    // Directory-backed modules that have a sibling barrel so the wildcard
-    // subpath still resolves. Regression test for copilot review comment.
-    "components/Timer",
-    "components/CycleTimer",
-  ]
-
-  it.each(specs)("%s resolves ESM, CJS, and types", (sub) => {
-    const spec = `${pkgName}/${sub}`
-    const esmPath = resolveEsm(spec)
-    const cjsPath = resolveCjs(spec)
-    expect(esmPath).toMatch(/\.js$/)
-    expect(cjsPath).toMatch(/\.cjs$/)
-    expect(existsSync(esmPath)).toBe(true)
-    expect(existsSync(cjsPath)).toBe(true)
-    expect(existsSync(typesFor(esmPath))).toBe(true)
-  })
-})
-
-describe("MUI-style default + named exports", () => {
-  // These modules are the primary public "one-component-per-file" entries
-  // that downstream apps will import directly. Each must expose both a
-  // named export (preserving the existing API) and a matching `default`
-  // export (the MUI-style convention introduced by this PR).
-  const cases = [
-    { sub: "components/DataGrid", name: "WandelbotsDataGrid" },
-    { sub: "components/AppHeader", name: "AppHeader" },
-    { sub: "components/TabBar", name: "TabBar" },
-    { sub: "components/ProgramControl", name: "ProgramControl" },
-    { sub: "components/RobotCard", name: "RobotCard" },
-    { sub: "components/VelocitySlider", name: "VelocitySlider" },
-    { sub: "components/jogging/JoggingPanel", name: "JoggingPanel" },
-    { sub: "components/jogging/JoggingStore", name: "JoggingStore" },
-    { sub: "components/safetyBar/SafetyBar", name: "SafetyBar" },
-    { sub: "components/Timer", name: "Timer" },
-    { sub: "components/CycleTimer", name: "CycleTimer" },
-    { sub: "lib/ConnectedMotionGroup", name: "ConnectedMotionGroup" },
-    { sub: "lib/JoggerConnection", name: "JoggerConnection" },
-    { sub: "lib/MotionStreamConnection", name: "MotionStreamConnection" },
-  ]
-
-  it.each(cases)("$sub exposes $name as both named and default", async ({
-    sub,
-    name,
-  }) => {
-    const mod = (await import(`${pkgName}/${sub}`)) as Record<string, unknown>
-    expect(mod[name], `missing named export ${name}`).toBeDefined()
-    expect(mod.default, "missing default export").toBeDefined()
-    expect(mod.default).toBe(mod[name])
-  })
-})
-
-describe("aggregate barrel preserves named exports", () => {
-  it("@wandelbots/.../core re-exports the same symbols as deep imports", async () => {
-    const core = await import(`${pkgName}/core`)
-    const deep = await import(`${pkgName}/components/DataGrid`)
-    expect(core.WandelbotsDataGrid).toBe(deep.WandelbotsDataGrid)
-  })
-
-  it("@wandelbots/.../3d re-exports the same symbols as deep imports", async () => {
-    const agg = await import(`${pkgName}/3d`)
-    const deep = await import(`${pkgName}/components/robots/Robot`)
-    expect(agg.Robot).toBe(deep.Robot)
-  })
-})
-
-describe("CJS interop", () => {
-  it("require() returns the same symbols as import", async () => {
-    const esm = (await import(`${pkgName}/components/DataGrid`)) as Record<
-      string,
-      unknown
-    >
-    const cjs = sandboxReq(`${pkgName}/components/DataGrid`) as Record<
-      string,
-      unknown
-    >
-    expect(cjs.default).toBe(cjs.WandelbotsDataGrid)
-    // Both resolvers must reach a real, loadable module (the identities
-    // naturally differ between ESM/CJS, so we compare by exported keys).
-    expect(Object.keys(cjs).sort()).toEqual(Object.keys(esm).sort())
-  })
-
-  // Regression test: Vitest's `await import()` goes through Vite's lenient
-  // resolver, which happily accepts extensionless ESM specifiers like
-  // `lodash-es/throttle`. Real downstream consumers hit Node's strict ESM
-  // resolver, which requires `.js`. Spawn a real Node process so the whole
-  // dependency graph (including transitive imports from dist/) is exercised
-  // under strict resolution.
-  it.each([
-    "components/DataGrid",
-    "components/VelocitySlider",
-    "components/jogging/JoggingPanel",
-    "components/jogging/JoggingJointValueControl",
-    "components/jogging/JoggingJointLimitDetector",
-    "components/jogging/JoggingStore",
-  ])("Node strict ESM can import %s and its transitive deps", (sub) => {
-    // Redirect stderr to stdout so the assertion message surfaces any
-    // "Cannot find module" errors from the child process.
-    execFileSync(
-      process.execPath,
-      [
-        "--input-type=module",
-        "-e",
-        `await import(${JSON.stringify(`${pkgName}/${sub}`)})`,
-      ],
-      { cwd: sandbox, stdio: "pipe", encoding: "utf8" },
-    )
-  })
-
-  it('Node can load the CJS output under `"type": "module"`', () => {
-    // Sanity check that `.cjs` extension was emitted (not `.cjs.js`) so
-    // that Node's CJS loader accepts it despite the package being ESM.
-    const output = execFileSync(
-      process.execPath,
-      [
-        "-e",
-        "const m = require(process.argv[1]); " +
-          "console.log(typeof m.WandelbotsDataGrid);",
-        resolve(repoRoot, "dist/components/DataGrid.cjs"),
-      ],
-      { encoding: "utf8" },
-    ).trim()
-    expect(output).toBe("function")
-  })
-})

package/src/test/setup.ts

@@ -1,111 +0,0 @@
-import "@testing-library/jest-dom"
-import { beforeAll, vi } from "vitest"
-
-// Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
-
-// Mock IntersectionObserver
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
-
-// Mock matchMedia
-Object.defineProperty(window, "matchMedia", {
-  writable: true,
-  value: vi.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-})
-
-// Mock WebGL context for Three.js
-const mockWebGLContext = {
-  getExtension: vi.fn(),
-  getParameter: vi.fn(),
-  createShader: vi.fn(),
-  shaderSource: vi.fn(),
-  compileShader: vi.fn(),
-  createProgram: vi.fn(),
-  attachShader: vi.fn(),
-  linkProgram: vi.fn(),
-  useProgram: vi.fn(),
-  createBuffer: vi.fn(),
-  bindBuffer: vi.fn(),
-  bufferData: vi.fn(),
-  createTexture: vi.fn(),
-  bindTexture: vi.fn(),
-  texImage2D: vi.fn(),
-  texParameteri: vi.fn(),
-  generateMipmap: vi.fn(),
-  viewport: vi.fn(),
-  clearColor: vi.fn(),
-  clear: vi.fn(),
-  drawArrays: vi.fn(),
-  drawElements: vi.fn(),
-  enableVertexAttribArray: vi.fn(),
-  vertexAttribPointer: vi.fn(),
-  uniform1f: vi.fn(),
-  uniform2f: vi.fn(),
-  uniform3f: vi.fn(),
-  uniform4f: vi.fn(),
-  uniformMatrix4fv: vi.fn(),
-  getUniformLocation: vi.fn(),
-  getAttribLocation: vi.fn(),
-  enable: vi.fn(),
-  disable: vi.fn(),
-  depthFunc: vi.fn(),
-  blendFunc: vi.fn(),
-  cullFace: vi.fn(),
-  frontFace: vi.fn(),
-  VERTEX_SHADER: 35633,
-  FRAGMENT_SHADER: 35632,
-  ARRAY_BUFFER: 34962,
-  ELEMENT_ARRAY_BUFFER: 34963,
-  STATIC_DRAW: 35044,
-  DYNAMIC_DRAW: 35048,
-  TEXTURE_2D: 3553,
-  RGBA: 6408,
-  UNSIGNED_BYTE: 5121,
-  TEXTURE_MAG_FILTER: 10240,
-  TEXTURE_MIN_FILTER: 10241,
-  LINEAR: 9729,
-  COLOR_BUFFER_BIT: 16384,
-  DEPTH_BUFFER_BIT: 256,
-  DEPTH_TEST: 2929,
-  BLEND: 3042,
-  SRC_ALPHA: 770,
-  ONE_MINUS_SRC_ALPHA: 771,
-  CULL_FACE: 2884,
-  BACK: 1029,
-  CCW: 2305,
-  FLOAT: 5126,
-  FALSE: 0,
-  TRUE: 1,
-}
-
-HTMLCanvasElement.prototype.getContext = vi
-  .fn()
-  .mockImplementation((contextType) => {
-    if (contextType === "webgl" || contextType === "experimental-webgl") {
-      return mockWebGLContext
-    }
-    return null
-  })
-
-beforeAll(() => {
-  // Suppress console errors in tests
-  vi.spyOn(console, "error").mockImplementation(() => {})
-  vi.spyOn(console, "warn").mockImplementation(() => {})
-})