fix: the story thread no longer jumps up the page before its end

When the last chapter left the trace in the right margin, the way to the end
point on the left was drawn as one 45 degree line. Over the full page width
that line started more than a thousand pixels further up, so the trace and
the bit at its head shot up to the top right. The trace now crosses the page
just above its end and comes straight down beside the last sentence.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/components/story/threadPath.ts

@@ -72,6 +72,8 @@ const POLYGONS: Readonly<Record<Exclude<Figure, "circle">, readonly Point[]>> =
   };
 
 const CORNER = 36;
+/** How far above its end the trace crosses the page when it comes from the other side. */
+const END_DROP = 64;
 const round = (value: number): number => Math.round(value * 10) / 10;
 
 /** The figure as path commands. `direction` is 1 when the line arrives heading right, -1 heading left. */
@@ -134,8 +136,20 @@ export const threadPath = (thread: {
 
   if (thread.end) {
     const [x, y] = thread.end;
-    const bend = Math.abs(x - side);
-    d += `L${side} ${round(y - bend)}L${round(x)} ${round(y)}`;
+    const away = Math.abs(x - side);
+    if (away <= 2 * CORNER) {
+      // The end is beside the margin the trace is in: one bend leads to it.
+      d += `L${side} ${round(y - away)}L${round(x)} ${round(y)}`;
+    } else {
+      // The end is on the other side: cross the page above it, then come
+      // straight down to it, beside the text. One long diagonal instead would start far up the page.
+      const inward = x < side ? -1 : 1;
+      const across = round(y - END_DROP);
+      d +=
+        `L${side} ${across - CORNER}L${side + inward * CORNER} ${across}` +
+        `L${round(x - inward * CORNER)} ${across}L${round(x)} ${across + CORNER}L${round(x)} ${round(y)}`;
+      pads.push([side, across - CORNER]);
+    }
     pads.push([round(x), round(y)]);
   }
   return { d, pads };