manage-columns: percent-unit xywh selectors double-scale when rendering overlay boxes

[thehabes]

Context

Follow-up to the hotfix in interfaces/manage-columns/index.js for parseXYWH. The parser now accepts all three W3C Media Fragments forms:

• xywh=100,200,300,400 (no unit — defaults to pixel per spec)
• xywh=pixel:100,200,300,400
• xywh=percent:100,200,300,400

However, the renderer at interfaces/manage-columns/index.js:967-970 assumes the parsed values are pixels and divides by image dimensions to convert to percent:

box.style.left   = `${(x / imgWidth) * 100}%`
box.style.top    = `${(y / imgHeight) * 100}%`
box.style.width  = `${(w / imgWidth) * 100}%`
box.style.height = `${(h / imgHeight) * 100}%`

If an annotation arrives with a xywh=percent:... selector, the values are already in percent and get divided again — producing tiny/invisible overlay boxes.

Impact

Low-likelihood today — current production data appears to be pixel-based — but it is a latent correctness bug that will silently mis-render any percent-unit annotation.

Suggested fix

Have parseXYWH return the detected unit alongside the numbers, and branch in the render call:

parseXYWH(target) {
  const raw = typeof target === "string" ? target : target?.selector?.value ?? ""
  const match = raw.match(/xywh=(pixel:|percent:)?([^,]+),([^,]+),([^,]+),([^,]+)/)
  if (!match) return { x: 0, y: 0, w: 0, h: 0, unit: "pixel" }
  const unit = match[1] === "percent:" ? "percent" : "pixel"
  const [x, y, w, h] = [match[2], match[3], match[4], match[5]].map(Number)
  return { x, y, w, h, unit }
}

Then in renderAnnotations, skip the / imgWidth * 100 math when unit === "percent".

Acceptance

• Annotations using xywh=percent:... selectors render at the correct position and size.
• Annotations using xywh=pixel:... and bare xywh=... continue to render as they do today.