feat(web): lighten tabletop scene and tune contact shadows

Replace the dark surface plane with a grey background and a spotlight,
size the contact shadow to the table, and scale its blur and fade with
the shadow plane. Disable depth test on the stacking curve overlay.

packages/tabletop/src/index.ts

@@ -8,6 +8,7 @@ export {
   fallbackShape,
   traceToShape,
   traceToUvBounds,
+  MM_TO_WORLD,
 } from './part.js';
 export { resolveAssetUrl, assetUrl, traceImage } from './http.js';
 
@@ -34,7 +35,6 @@ export type { MountNode, MountTree } from './mount.js';
 export { WorldSurfaceView, SurfaceNode } from './surfaces/WorldSurfaceView.js';
 export { HudSurfaceView } from './surfaces/HudSurfaceView.js';
 export { SurfaceBounds } from './surfaces/SurfaceBounds.js';
-export { SurfacePlane } from './surfaces/SurfacePlane.js';
 
 // Part placement.
 export { PartPlacement } from './placement.js';

packages/tabletop/src/surfaces/StackingCurve.tsx

@@ -29,11 +29,11 @@ export function StackingCurve({ route }: { route: Route }) {
 
   return (
     <group>
-      <Line points={points} color="#f59e0b" lineWidth={2} />
+      <Line points={points} color="#f59e0b" lineWidth={2} depthTest={false} />
       {/* Marker at the curve's start, showing its direction. */}
       <mesh position={[start[0], 0.01, start[2]]}>
         <sphereGeometry args={[0.01, 8, 8]} />
-        <meshBasicMaterial color="#f59e0b" />
+        <meshBasicMaterial color="#f59e0b" depthTest={false} />
       </mesh>
     </group>
   );

packages/tabletop/src/surfaces/SurfacePlane.tsx

@@ -1,24 +0,0 @@
-/**
- * `SurfacePlane` — a visible table surface.
- *
- * A flat rectangle at the surface's reference `size` (mm, converted to world
- * units), centered on the mount anchor. Gives the parts a scale reference and
- * reads as the table the game is played on. Rendered only when `showSurface`
- * is enabled.
- */
-import type { Surface } from '@tts/bgm';
-import { MM_TO_WORLD } from '../part.js';
-
-export function SurfacePlane({ surface }: { surface: Surface }) {
-  if (!surface.size) return null;
-  const [w, h] = surface.size;
-  const width = w * MM_TO_WORLD;
-  const height = h * MM_TO_WORLD;
-
-  return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]} receiveShadow>
-      <planeGeometry args={[width, height]} />
-      <meshStandardMaterial color="#1c1f26" roughness={0.9} metalness={0} />
-    </mesh>
-  );
-}

packages/tabletop/src/surfaces/WorldSurfaceView.tsx

@@ -12,7 +12,6 @@ import { PartPlacement } from '../placement.js';
 import type { MountNode } from '../mount.js';
 import { MM_TO_WORLD, DEG_TO_RAD } from '../part.js';
 import { SurfaceBounds } from './SurfaceBounds.js';
-import { SurfacePlane } from './SurfacePlane.js';
 import { StackingCurve } from './StackingCurve.js';
 
 export function WorldSurfaceView({
@@ -47,7 +46,6 @@ export function SurfaceNode({
     >
       {showSurface && (
         <>
-          <SurfacePlane surface={node.surface} />
           <SurfaceBounds surface={node.surface} />
           {node.surface.layout.map((route, i) =>
             route.stacking ? <StackingCurve key={i} route={route} /> : null,