fix: resolve zIndexMap collisions between hover outlines and control buttons

lib/utils/z-index-map.ts

@@ -5,6 +5,9 @@ export const zIndexMap = {
   viewMenu: 55,
   viewMenuBackdrop: 54,
   clickToInteractOverlay: 100,
-  schematicComponentHoverOutline: 47,
-  schematicPortHoverOutline: 48,
+  // Kept below viewMenuIcon (48): schematicPortHoverOutline + 1 (the port
+  // hover label's z-index, see SchematicPortMouseTarget) must stay clear of
+  // schematicGridIcon (49) too.
+  schematicComponentHoverOutline: 45,
+  schematicPortHoverOutline: 46,
 }

tests/z-index-map.test.ts

@@ -0,0 +1,19 @@
+import { expect, test } from "bun:test"
+import { zIndexMap } from "../lib/utils/z-index-map"
+
+test("all zIndexMap values are unique", () => {
+  const values = Object.values(zIndexMap)
+  expect(new Set(values).size).toBe(values.length)
+})
+
+test("the schematic port hover label doesn't collide with any other layer", () => {
+  // SchematicPortMouseTarget renders its hover label at
+  // schematicPortHoverOutline + 1, so that derived value needs to stay clear
+  // of every other layer too, not just the base value.
+  const portHoverLabelZIndex = zIndexMap.schematicPortHoverOutline + 1
+  const otherValues = Object.entries(zIndexMap)
+    .filter(([key]) => key !== "schematicPortHoverOutline")
+    .map(([, value]) => value)
+
+  expect(otherValues).not.toContain(portHoverLabelZIndex)
+})