fix(web,api): trace the mark from the official export instead of the brand board

The board was the wrong source and the method was wrong for this shape.

`Brand.png` is a picture of the logo: a dark panel, a glow around the mark, and
a resolution chosen for a contact sheet. Tracing it meant colour-thresholding
lime out of that and hoping the halo fell outside the threshold. `Logo SENT.png`
is the artwork — transparent background, no glow, 1254px. The mask is "alpha >
127", which has nothing to tune and no halo to exclude.

THE ROUNDING WAS DONE TWICE
The previous trace eroded the mask, kept a small set of vertices, and told the
consumer to stroke them with a round join. That is the right trick when a shape
has SHARP corners in the source and you want them rounded. This one's are
already rounded, so eroding and re-stroking rounded them again — and spent two
dozen vertices retracing curves that were already in the file, which is what
should have given it away.

Tracing the outline as it stands reproduces the artwork including corners that
differ from one another. Thirty vertices per form, simplification error near
0.05 viewBox units: a twentieth of a pixel at 32px, under one on a 512px icon.
No stroke, no radius constant, nothing to keep in step.

The script now prefers the official export and falls back to the board, and its
tolerance is a fraction of the artwork's extent so a larger export does not
produce proportionally more vertices.

Verified by rendering the emitted paths and comparing against the export, then
in the app and on the share card.

Author: Sent-lab

Logo SENT.png

@@ -3,27 +3,26 @@
  *
  * WHERE THIS GEOMETRY COMES FROM
  * ------------------------------
- * `Brand.png`, in the repository root, measured. The previous version of this
- * file was drawn by eye from that board and said so; it was three flat slabs and
- * the real mark is two stepped diagonal forms with 180° rotational symmetry, so
- * it did not look like the brand on any page that used it — which is every page,
- * plus the favicon.
+ * `Logo SENT.png`, the official export, measured. Not drawn by eye — an earlier
+ * version of this file was, and it was three flat slabs where the mark is two
+ * stepped diagonal forms, on every page and in the favicon.
  *
- * The board was there the whole time. The shape is a measurement rather than an
- * opinion: the volt-lime pixels were masked, the two components traced with a
- * Moore boundary walk, and each contour reduced to the handful of vertices it
- * actually has. Re-derive with `scripts/trace-mark.py` if the board changes.
+ * `scripts/trace-mark.py` masks the artwork's alpha channel, walks each form's
+ * boundary and reduces it to the vertices it actually has. It prints exactly the
+ * constants below; run it when the artwork changes.
  *
- * WHY THE CORNERS ARE A STROKE AND NOT ARCS
- * -----------------------------------------
- * Every corner on the mark is rounded by the same radius. Writing that as arc
- * segments would mean twelve hand-tuned curves per path and a shape nobody can
- * safely edit afterwards.
+ * WHY THESE ARE PLAIN FILLED POLYGONS
+ * -----------------------------------
+ * A version before this traced an eroded mask and stroked it with a round join,
+ * which is how you round the corners of a shape whose corners are sharp in the
+ * source. This one's are not — the export already has its rounding — so that
+ * rounded everything twice and spent two dozen vertices retracing curves that
+ * were already there.
  *
- * Instead each path is the outline INSET by the corner radius, stroked with
- * twice that radius and a round line join. The stroke grows the shape back to
- * its true size with every corner rounded uniformly and exactly. It is why the
- * polygons below are traced from an eroded mask rather than the raw one.
+ * Tracing the outline as it stands reproduces the artwork, including corners
+ * that differ from one another. Roughly thirty vertices per form, with a
+ * simplification error near 0.05 viewBox units: a twentieth of a pixel at 32px,
+ * under one pixel on a 512px app icon.
  *
  * The mark is never re-coloured beyond the LOCKED palette and never stretched:
  * `preserveAspectRatio` is left at its default for exactly that reason.
@@ -32,17 +31,17 @@
 import type { JSX } from "react";
 
 /**
- * The two forms, inset by {@link CORNER}, in a 32×32 box.
+ * The two forms, in a 32×32 box, traced from the official export.
  *
- * Traced from `Brand.png`. The pair reads as an S at a glance and as two
- * offset slabs up close, which is what the board's "clear space and grid" panel
- * is protecting — hence the margin baked into these coordinates.
+ * The pair reads as an S at a glance and as two offset slabs up close, which is
+ * what the board's clear-space panel is protecting — hence the margin baked
+ * into these coordinates.
  */
-const UPPER = "M 14.16 1.96 L 20.23 8.34 L 22.78 8.82 L 28.37 8.66 L 29.96 10.41 L 29.96 16.64 L 28.85 17.6 L 14.8 8.5 L 14.32 7.38 L 14.16 2.12 Z";
-const LOWER = "M 3.15 13.29 L 11.29 20.31 L 18.95 24.3 L 19.59 25.89 L 19.59 30.04 L 12.09 22.38 L 4.27 22.38 L 2.99 21.9 L 2.2 20.63 L 2.04 18.55 L 2.04 15.04 L 2.99 13.45 Z";
+const UPPER =
+  "M 13.94 1.0 L 14.63 1.03 L 15.32 1.38 L 22.43 8.53 L 22.78 8.77 L 23.2 8.98 L 23.96 9.18 L 29.37 9.22 L 30.06 9.5 L 30.48 9.84 L 30.86 10.47 L 31.0 11.09 L 31.0 17.99 L 30.86 18.69 L 30.48 19.35 L 29.86 19.87 L 29.06 20.14 L 27.5 20.14 L 26.7 19.87 L 20.28 15.25 L 13.83 10.88 L 13.28 10.4 L 12.83 9.71 L 12.65 9.18 L 12.58 8.7 L 12.58 2.42 L 12.72 1.87 L 12.93 1.55 L 13.35 1.21 L 13.9 1.03 Z";
 
-/** Corner radius in viewBox units, from the board. */
-const CORNER = 0.957;
+const LOWER =
+  "M 3.08 11.92 L 4.68 11.96 L 5.13 12.1 L 5.61 12.38 L 11.96 18.24 L 18.72 22.29 L 19.38 22.85 L 19.8 23.47 L 20.04 24.41 L 20.04 29.72 L 19.94 30.17 L 19.76 30.48 L 19.31 30.86 L 18.86 31.0 L 18.27 30.93 L 17.96 30.76 L 17.27 30.03 L 11.58 23.4 L 11.09 22.95 L 10.36 22.54 L 9.53 22.33 L 2.8 22.33 L 1.97 22.05 L 1.49 21.64 L 1.14 21.05 L 1.0 20.42 L 1.03 13.8 L 1.31 13.03 L 1.66 12.58 L 2.21 12.17 L 2.7 11.99 L 3.05 11.96 Z";
 
 export interface LogoProps {
   readonly size?: number;
@@ -71,13 +70,7 @@ export function Logo({
       aria-label={variant === "full" ? undefined : "SENT"}
       style={glow ? { filter: "drop-shadow(0 0 8px rgba(198, 246, 0, 0.5))" } : undefined}
     >
-      <g
-        fill="currentColor"
-        stroke="currentColor"
-        strokeWidth={CORNER * 2}
-        strokeLinejoin="round"
-        strokeLinecap="round"
-      >
+      <g fill="currentColor">
         <path d={UPPER} />
         <path d={LOWER} />
       </g>

apps/web/src/components/Logo.tsx

@@ -1,66 +1,93 @@
 #!/usr/bin/env python3
 """
-Derive the SENT mark's geometry from `Brand.png`.
+Derive the SENT mark's geometry from the official artwork.
 
 WHY THIS EXISTS
 ---------------
-The mark in `apps/web/src/components/Logo.tsx` was drawn by eye from the brand
-board and did not match it — three flat slabs where the real mark is two stepped
-diagonal forms. The board was in the repository the whole time, so the shape can
-be measured instead of remembered, and this is the measurement.
+The mark in `apps/web/src/components/Logo.tsx` was once drawn by eye and did not
+match — three flat slabs where the real mark is two stepped diagonal forms. The
+artwork is in the repository, so the shape can be measured instead of
+remembered, and this is the measurement.
 
-Run it when `Brand.png` changes. It prints the two paths and the corner radius
-in the same form `Logo.tsx` holds them.
+Run it when the artwork changes. It prints the two paths in the same form
+`Logo.tsx` and `services/api/src/preview.ts` hold them.
 
     pip install pillow numpy scipy
     python scripts/trace-mark.py
 
-WHAT IT PRODUCES, AND WHY IT IS SHAPED THAT WAY
------------------------------------------------
-Every corner on the mark is rounded by one radius. Emitting that as arc segments
-would be a dozen hand-tuned curves per path that nobody could safely edit later.
-
-So the polygons printed here are the outline INSET by that radius: the consumer
-strokes them with twice the radius and a round line join, which grows the shape
-back to true size with every corner rounded exactly. That is why the trace runs
-against an ERODED mask rather than the raw one.
-
-The contour walk is Moore neighbour tracing. An earlier attempt ordered boundary
-pixels by angle around the centroid, which is only valid for a star-shaped
-region; this mark is a concave step, so that interleaved the two sides of the
-notch and produced a zigzag.
+SOURCE, IN ORDER OF PREFERENCE
+------------------------------
+`Logo SENT.png` is the official export: transparent background, no glow, no
+surrounding board. The mask is then simply "alpha > 0", which has no threshold
+to tune and no halo to exclude.
+
+`Brand.png` is the brand board and the fallback. Tracing from it means colour-
+thresholding the volt lime out of a dark panel with a glow around it, which
+works but is measuring a picture of the logo rather than the logo.
+
+WHAT IT PRODUCES
+----------------
+Two closed polygons, filled. Nothing else — no stroke, no arcs.
+
+An earlier version traced an ERODED mask and told the consumer to stroke it with
+a round join, on the theory that this rounds every corner from a small set of
+sharp vertices. That is the right trick for a shape whose corners are sharp in
+the source. This one's are not: the official artwork already has its rounding,
+so eroding and re-stroking rounded it twice and spent two dozen vertices
+retracing curves that were already there.
+
+Tracing the outline as it is reproduces the artwork exactly, including corners
+that differ from each other. It costs about thirty vertices per form and a
+simplification error of roughly 0.05 viewBox units — under a tenth of a pixel at
+the sizes the mark is drawn, and under a pixel on a 512px app icon.
+
+The contour walk is Moore neighbour tracing. An attempt before that ordered
+boundary pixels by angle around the centroid, which is only valid for a
+star-shaped region; this mark is a concave step, so it interleaved the two sides
+of the notch and produced a zigzag.
 """
 
 import json
+import os
 import sys
 
 import numpy as np
 from PIL import Image
 from scipy import ndimage
 
+OFFICIAL = "Logo SENT.png"
 BOARD = "Brand.png"
 
-# Corner radius in source pixels, and the breathing room the board's clear-space
-# panel asks for, in viewBox units.
-RADIUS_PX = 6
+# Breathing room the brand board's clear-space panel asks for, in viewBox units.
 MARGIN = 1.0
 VIEWBOX = 32.0
 
+# Simplification tolerance as a FRACTION of the mark's largest dimension, so a
+# 4k export does not produce four times the vertices of a 1k one.
+EPS_FRACTION = 0.0015
 
-def load_mask() -> np.ndarray:
-    """Volt-lime pixels of the hero mark, as a filled binary mask."""
-    a = np.asarray(Image.open(BOARD).convert("RGB")).astype(np.int16)
-    h, w = a.shape[:2]
-
-    # The hero panel, top left. Generous — the colour mask does the precision.
-    crop = a[int(h * 0.03) : int(h * 0.30), int(w * 0.10) : int(w * 0.30)]
 
-    r, g, b = crop[..., 0], crop[..., 1], crop[..., 2]
-    # Volt lime is #C6F600: high green, near-zero blue, and a wide green-blue gap
-    # that the glow halo around the mark does not have.
-    mask = (g > 150) & (b < 120) & (g - b > 90)
+def load_mask() -> np.ndarray:
+    """The mark as a filled binary mask, from the cleanest source available."""
+    if os.path.exists(OFFICIAL):
+        im = Image.open(OFFICIAL).convert("RGBA")
+        alpha = np.asarray(im)[..., 3]
+        # Transparent background: no threshold to tune, no glow to exclude.
+        # Half-opaque is the antialiased edge, so that is the boundary.
+        mask = alpha > 127
+        print(f"source: {OFFICIAL} (alpha)", file=sys.stderr)
+    else:
+        a = np.asarray(Image.open(BOARD).convert("RGB")).astype(np.int16)
+        h, w = a.shape[:2]
+        # The hero panel, top left. Generous — the colour mask does the work.
+        crop = a[int(h * 0.03) : int(h * 0.30), int(w * 0.10) : int(w * 0.30)]
+        r, g, b = crop[..., 0], crop[..., 1], crop[..., 2]
+        # Volt lime is #C6F600: high green, near-zero blue, and a green-blue gap
+        # the glow halo does not have.
+        mask = (g > 150) & (b < 120) & (g - b > 90)
+        mask = ndimage.binary_opening(mask, np.ones((3, 3)))
+        print(f"source: {BOARD} (colour)", file=sys.stderr)
 
-    mask = ndimage.binary_opening(mask, np.ones((3, 3)))
     return ndimage.binary_fill_holes(mask)
 
 
@@ -76,7 +103,7 @@ def moore(m: np.ndarray) -> np.ndarray:
     contour = [start]
     cur, back = start, 0
 
-    for _ in range(200_000):
+    for _ in range(2_000_000):
         for k in range(8):
             i = (back + 1 + k) % 8
             cand = (cur[0] + nbr[i][0], cur[1] + nbr[i][1])
@@ -118,48 +145,49 @@ def main() -> int:
     mask = load_mask()
     lab, n = ndimage.label(mask)
     if n < 2:
-        print(f"expected two components in the mark, found {n}", file=sys.stderr)
+        print(f"expected two forms in the mark, found {n}", file=sys.stderr)
         return 1
 
     sizes = ndimage.sum(mask, lab, range(1, n + 1))
     keep = [int(i) + 1 for i in np.argsort(sizes)[::-1][:2]]
 
+    ys, xs = np.nonzero(mask)
+    extent = max(xs.max() - xs.min(), ys.max() - ys.min())
+    eps = max(1.0, extent * EPS_FRACTION)
+
     polys = []
     for comp in keep:
-        inset = ndimage.binary_erosion(lab == comp, np.ones((RADIUS_PX * 2 + 1,) * 2))
-        p = rdp(moore(inset), eps=2.2)
+        p = rdp(moore(lab == comp), eps=eps)
         if np.allclose(p[0], p[-1]):
             p = p[:-1]
         polys.append(p)
 
     # Upper form first, so the emitted order matches how the mark reads.
     polys.sort(key=lambda p: p[:, 1].min())
 
-    # The DRAWN extent is the polygon grown by the stroke radius, so the fit has
-    # to account for it or the stroke overflows the viewBox.
     allp = np.vstack(polys)
-    lo = allp.min(axis=0) - RADIUS_PX
-    hi = allp.max(axis=0) + RADIUS_PX
+    lo, hi = allp.min(axis=0), allp.max(axis=0)
     span = float((hi - lo).max())
 
     scale = (VIEWBOX - 2 * MARGIN) / span
     offset = (VIEWBOX - (hi - lo) * scale) / 2.0
 
     out = [(p - lo) * scale + offset for p in polys]
-    radius = RADIUS_PX * scale
 
-    print(f"const CORNER = {radius:.3f};\n")
+    print(
+        f"// {extent}px extent, eps {eps:.1f}px, "
+        f"{len(out[0])}/{len(out[1])} vertices, "
+        f"~{eps * scale:.3f} viewBox units of error",
+        file=sys.stderr,
+    )
     for name, p in zip(("UPPER", "LOWER"), out):
         d = "M " + " L ".join(f"{x:.2f} {y:.2f}" for x, y in p) + " Z"
-        print(f'const {name} = "{d}";')
+        print(f'const {name} =\n  "{d}";')
 
     print("\n// JSON, for any other consumer:")
     print(
         json.dumps(
-            {
-                "radius": round(radius, 3),
-                "paths": [[[round(float(x), 2), round(float(y), 2)] for x, y in p] for p in out],
-            }
+            {"paths": [[[round(float(x), 2), round(float(y), 2)] for x, y in p] for p in out]}
         )
     )
     return 0

scripts/trace-mark.py

@@ -74,20 +74,17 @@ const WARN = "#fbbf24";
  * diagonal forms, so the artefact that travels furthest carried a glyph that is
  * not the logo — on every link anyone ever posted.
  *
- * Measured from `Brand.png` by `scripts/trace-mark.py`, which prints exactly
- * these constants; `apps/web/src/components/Logo.tsx` holds the same values for
- * the same reason the colours are repeated here. An SVG served to a crawler has
- * no stylesheet and no imports — it has to be self-contained, and the price of
- * that is a copy. The script is the source; both copies are its output.
- *
- * The paths are the outline INSET by the corner radius, stroked with twice it
- * and a round join, which rounds every corner uniformly without a dozen arcs.
+ * Measured from the official export by `scripts/trace-mark.py`, which prints
+ * exactly these constants; `apps/web/src/components/Logo.tsx` holds the same
+ * values for the same reason the colours are repeated here. An SVG served to a
+ * crawler has no stylesheet and no imports — it has to be self-contained, and
+ * the price of that is a copy. The script is the source; both copies are its
+ * output.
  */
 const MARK_UPPER =
-  "M 14.16 1.96 L 20.23 8.34 L 22.78 8.82 L 28.37 8.66 L 29.96 10.41 L 29.96 16.64 L 28.85 17.60 L 14.80 8.50 L 14.32 7.38 L 14.16 2.12 Z";
+  "M 13.94 1.0 L 14.63 1.03 L 15.32 1.38 L 22.43 8.53 L 22.78 8.77 L 23.2 8.98 L 23.96 9.18 L 29.37 9.22 L 30.06 9.5 L 30.48 9.84 L 30.86 10.47 L 31.0 11.09 L 31.0 17.99 L 30.86 18.69 L 30.48 19.35 L 29.86 19.87 L 29.06 20.14 L 27.5 20.14 L 26.7 19.87 L 20.28 15.25 L 13.83 10.88 L 13.28 10.4 L 12.83 9.71 L 12.65 9.18 L 12.58 8.7 L 12.58 2.42 L 12.72 1.87 L 12.93 1.55 L 13.35 1.21 L 13.9 1.03 Z";
 const MARK_LOWER =
-  "M 3.15 13.29 L 11.29 20.31 L 18.95 24.30 L 19.59 25.89 L 19.59 30.04 L 12.09 22.38 L 4.27 22.38 L 2.99 21.90 L 2.20 20.63 L 2.04 18.55 L 2.04 15.04 L 2.99 13.45 Z";
-const MARK_CORNER = 0.957;
+  "M 3.08 11.92 L 4.68 11.96 L 5.13 12.1 L 5.61 12.38 L 11.96 18.24 L 18.72 22.29 L 19.38 22.85 L 19.8 23.47 L 20.04 24.41 L 20.04 29.72 L 19.94 30.17 L 19.76 30.48 L 19.31 30.86 L 18.86 31.0 L 18.27 30.93 L 17.96 30.76 L 17.27 30.03 L 11.58 23.4 L 11.09 22.95 L 10.36 22.54 L 9.53 22.33 L 2.8 22.33 L 1.97 22.05 L 1.49 21.64 L 1.14 21.05 L 1.0 20.42 L 1.03 13.8 L 1.31 13.03 L 1.66 12.58 L 2.21 12.17 L 2.7 11.99 L 3.05 11.96 Z";
 /** The mark is authored in a 32-unit box; the card wants it at 44. */
 const MARK_SCALE = 44 / 32;
 
@@ -216,7 +213,7 @@ export function renderPreview(m: PreviewMarket): string {
 
   <!-- Brand mark. §231: the platform is named on anything that travels. -->
   <g transform="translate(80 66)">
-    <g transform="scale(${MARK_SCALE})" fill="${VOLT}" stroke="${VOLT}" stroke-width="${MARK_CORNER * 2}" stroke-linejoin="round" stroke-linecap="round">
+    <g transform="scale(${MARK_SCALE})" fill="${VOLT}">
       <path d="${MARK_UPPER}" />
       <path d="${MARK_LOWER}" />
     </g>