fix(tabletop): align cards to the stacking curve

Fix the tangent angle at the curve's start and rotate cards to follow
the curve direction. Add a stacking curve visualization shown with
surface debug.

packages/tabletop/src/stacking.ts

@@ -375,7 +375,7 @@ function sampleArc(
 /** Sample density per curve segment. */
 const SEGMENTS = 32;
 
-/** The point (and tangent angle) at a distance along a sampled path. */
+/** The point (and tangent angle in degrees) at a distance along a sampled path. */
 export function pointAt(path: SampledPath, distance: number): { x: number; y: number; angle: number } {
   const { points, length } = path;
   if (points.length === 0) return { x: 0, y: 0, angle: 0 };
@@ -395,6 +395,14 @@ export function pointAt(path: SampledPath, distance: number): { x: number; y: nu
   const u = seg > 0 ? (d - a.t) / seg : 0;
   const x = a.x + (b.x - a.x) * u;
   const y = a.y + (b.y - a.y) * u;
-  const angle = Math.atan2(b.y - a.y, b.x - a.x);
+  // The tangent direction in degrees, matching the format's angle units. At
+  // the very start (lo === 0) the segment is degenerate (a === b), so fall
+  // back to the first segment's direction instead of a 0° angle.
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const angle =
+    lo === 0 && points.length > 1
+      ? (Math.atan2(points[1]!.y - points[0]!.y, points[1]!.x - points[0]!.x) * 180) / Math.PI
+      : (Math.atan2(dy, dx) * 180) / Math.PI;
   return { x, y, angle };
 }