feat(view): show transform measurements

view/bottom-controls/TransformControls.tsx

@@ -0,0 +1,28 @@
+import { BoundingBox } from "@phosphor-icons/react";
+import type { Rect } from "@core/geometry";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
+
+export type TransformControlsProps = {
+  bounds: Rect;
+};
+
+export function TransformControls({ bounds }: TransformControlsProps) {
+  return (
+    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+      <span className={bottomControlIconSlotClass()}>
+        <BoundingBox size={16} weight="regular" />
+      </span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>X</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.x)}</span>
+      <span className={bottomControlLabelClass()}>Y</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.y)}</span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>W</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.w)}</span>
+      <span className={bottomControlLabelClass()}>H</span>
+      <span className={bottomControlValueClass()}>{Math.round(bounds.h)}</span>
+    </div>
+  );
+}