feat: drop new nodes at centre of visible canvas

New nodes previously landed at a fixed canvas origin, often off-screen,
forcing the user to drag them into view. Add a projector (registered by
CanvasContainer inside ReactFlowProvider) that maps the visible-canvas
centre into flow coordinates, and use it for add-node, group rect, text,
Zigbee/Z-Wave imports, and pending-device approval (single + bulk).

ha-relevant: yes

frontend/src/utils/viewportCenter.ts

@@ -0,0 +1,30 @@
+import type { XYPosition } from '@xyflow/react'
+
+// Projects the centre of the visible canvas into flow-space coordinates.
+// Registered by CanvasContainer (inside ReactFlowProvider) so that add-node
+// handlers living outside the provider — App handlers, modals — can still drop
+// new nodes where the user is actually looking instead of at a fixed canvas
+// origin.
+type Projector = () => XYPosition
+
+let projector: Projector | null = null
+
+// Used before any canvas is mounted (tests, first render). Matches the old
+// hard-coded add position so behaviour degrades gracefully.
+const FALLBACK: XYPosition = { x: 300, y: 300 }
+
+export function setViewportCenterProjector(fn: Projector | null): void {
+  projector = fn
+}
+
+// Flow-space coordinate at the centre of the visible canvas.
+export function getViewportCenter(): XYPosition {
+  return projector ? projector() : { ...FALLBACK }
+}
+
+// Flow-space top-left position so that a box of `width`×`height` ends up
+// centred on screen. With no size it returns the raw centre point.
+export function getCenteredPosition(width = 0, height = 0): XYPosition {
+  const c = getViewportCenter()
+  return { x: c.x - width / 2, y: c.y - height / 2 }
+}