Arranging: boxes on everything, handwriting movable, the Eraser's preview, a Circle shape, pixel-exact cues

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

client/js/stroke_geometry.js

@@ -39,6 +39,29 @@ export function widthAt(stroke, index) {
   return stroke.width * (0.36 + 4 * pressure * pressure);
 }
 
+/**
+ * The rectangle a stroke's ink covers: around its points, each taken
+ * out by half the line's width at that point (round caps and joins).
+ * @param {Stroke} stroke
+ * @returns {{left: number, top: number, width: number, height: number} | null}
+ */
+export function inkExtent(stroke) {
+  const p = stroke.points;
+  if (p.length < POINT_SIZE) return null;
+  let left = Infinity;
+  let top = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  for (let i = 0, k = 0; i < p.length; i += POINT_SIZE, k++) {
+    const half = widthAt(stroke, k) / 2;
+    left = Math.min(left, p[i] - half);
+    right = Math.max(right, p[i] + half);
+    top = Math.min(top, p[i + 1] - half);
+    bottom = Math.max(bottom, p[i + 1] + half);
+  }
+  return { left, top, width: right - left, height: bottom - top };
+}
+
 /**
  * The part of a stroke that belongs to point `k`.
  * @param {Stroke} stroke