fix(tabletop): key placements by surface, path, and piece

A piece can appear on more than one path of the same surface (e.g. the
poker deck expands to every card while the flop also places the ace), so
the render key must include the path to stay unique.

packages/tabletop/src/surfaces/HudSurfaceView.tsx

@@ -7,7 +7,7 @@
  */
 import { Html } from '@react-three/drei';
 import type { Package } from '@tts/bgm';
-import { useRenderState } from '../state.js';
+import { useRenderState, placementKey } from '../state.js';
 import { PartPlacement } from '../placement.js';
 import type { MountNode } from '../mount.js';
 import { SurfaceNode } from './WorldSurfaceView.js';
@@ -24,7 +24,7 @@ export function HudSurfaceView({ pkg, node }: { pkg: Package; node: MountNode })
       style={{ pointerEvents: 'none' }}
     >
       {own.map((p) => (
-        <PartPlacement key={`${p.surface}:${p.piece}`} pkg={pkg} placement={p} />
+        <PartPlacement key={placementKey(p)} pkg={pkg} placement={p} />
       ))}
       {node.children.map((child) => (
         <SurfaceNode key={child.id} pkg={pkg} node={child} />

packages/tabletop/src/surfaces/WorldSurfaceView.tsx

@@ -7,7 +7,7 @@
  * it's never rendered.
  */
 import type { Package } from '@tts/bgm';
-import { useRenderState } from '../state.js';
+import { useRenderState, placementKey } from '../state.js';
 import { PartPlacement } from '../placement.js';
 import type { MountNode } from '../mount.js';
 
@@ -23,7 +23,7 @@ export function SurfaceNode({ pkg, node }: { pkg: Package; node: MountNode }) {
   return (
     <group position={[node.x, 0, node.y]} rotation={[0, node.rotation, 0]}>
       {own.map((p) => (
-        <PartPlacement key={`${p.surface}:${p.piece}`} pkg={pkg} placement={p} />
+        <PartPlacement key={placementKey(p)} pkg={pkg} placement={p} />
       ))}
       {node.children.map((child) => (
         <SurfaceNode key={child.id} pkg={pkg} node={child} />