fix: convert values when switching CSS units to preserve visual size

Previously, changing unit (e.g. mm → px) kept the numeric value unchanged,
causing visual changes. Now values are converted through a px pivot unit
so the rendered size stays the same.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/utils/unit-conversion.js

@@ -0,0 +1,29 @@
+const PX_PER_MM = 3.7795275591;
+const PX_PER_REM = 16;
+const PX_PER_EM = 16;
+
+const toPx = {
+  px: (v) => v,
+  mm: (v) => v * PX_PER_MM,
+  rem: (v) => v * PX_PER_REM,
+  em: (v) => v * PX_PER_EM,
+};
+
+const fromPx = {
+  px: (v) => v,
+  mm: (v) => v / PX_PER_MM,
+  rem: (v) => v / PX_PER_REM,
+  em: (v) => v / PX_PER_EM,
+};
+
+export function convertUnit(value, fromUnit, toUnit) {
+  if (fromUnit === toUnit) return value;
+
+  const converterTo = toPx[fromUnit];
+  const converterFrom = fromPx[toUnit];
+
+  if (!converterTo || !converterFrom) return value;
+
+  const px = converterTo(value);
+  return Math.round(converterFrom(px) * 100) / 100;
+}