feat(view): add contextual layer controls

view/bottom-controls/PanControls.tsx

@@ -0,0 +1,24 @@
+import { Hand } from "@phosphor-icons/react";
+import { BottomControlDivider } from "./Divider";
+import { bottomControlIconSlotClass, bottomControlLabelClass, bottomControlValueClass } from "./styles";
+
+export type PanControlsProps = {
+  x: number;
+  y: number;
+};
+
+export function PanControls({ x, y }: PanControlsProps) {
+  return (
+    <div className="flex w-full items-center justify-center gap-2 tabular-nums">
+      <span className={bottomControlIconSlotClass()}>
+        <Hand size={16} weight="regular" />
+      </span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>X</span>
+      <span className={bottomControlValueClass()}>{x}</span>
+      <BottomControlDivider />
+      <span className={bottomControlLabelClass()}>Y</span>
+      <span className={bottomControlValueClass()}>{y}</span>
+    </div>
+  );
+}