Add photo-first layouts, more image formats and better downloads

[rodneyosodo]

Making a pinout leaf from a photo used to mean guessing width, height and image offsets until the pins lined up. This PR adds a second way to do it: start from the photo and click where the headers are. The existing grid config still works exactly as before; I checked that all existing boards produce the same SVGs byte for byte.

Photo-first layouts

Use headers instead of width/height/offsets/pins. Each header is its first and last hole in image pixels, and the holes in between are spaced evenly. The scale comes from the pin pitch (2.54 mm by default), so the output still prints at real size.

image:
  front:
    src: "board-front.png"
  back:
    src: "board-back.png"
headers:
  - start: [ 672, 1682 ]
    end: [ 657, 2550 ]
    back:                 # optional, same header on the back photo
      start: [ 1728, 1695 ]
      end: [ 1728, 2518 ]
    pins:
      - [ "DTR:uart" ]
      - [ "PWR" ]
      - [ ]               # hole without a label

• Picking coordinates: tick "📍 Pick coordinates" in the editor and click a hole; its pixel position goes into the YAML at your cursor. It works on both the front and back photos.
• Back photo: placed independently and fitted onto the front, so the two sheets still line up when you fold them.
• Double-row headers: 2×N headers work with rows: 2 plus rowStart/rowEnd. Pin numbering is set with order (zigzag, rows or around).
• Options: pitch, count, side, and null to skip a hole.
• Warnings: you get one when a header's spacing looks off or back holes don't match the front.

Images

• Formats: PNG, JPEG, GIF, WebP, AVIF, BMP and SVG. The type is detected from the file contents, not the extension.
• Remote URLs: these are sturdier now. Requests time out after 30 s, and errors say what actually went wrong (e.g. HTTP 404).
• Browser embedding: the editor fetches images directly first and only falls back to the embed service if that fails.
• Notices: the editor shows one when an image can't be loaded, or when it can only be linked, which means the downloaded SVG needs internet access.

Editor

• Grayscale toggle and opacity slider: they write grayscale/opacity into the YAML, touching only those lines, so comments and formatting are left alone.
• Downloads: front, back, both as two files, or both in one file (laid out like the print view) as SVG or PNG. PNGs are 300 DPI with the resolution stored in the file, so they print at real size too. Linked images are embedded into downloads wherever possible.
• Undo: no longer wipes the definition you just loaded.

Testing

• CLI: all existing boards give identical SVGs before and after. I also tested photo layouts with real boards (SIM7080G and others), every image format, remote URLs (working, 404, missing domain, a server that never responds) and a generated 2×6 header covering every pin order.
• Web editor (Chrome): coordinate picking, the image controls, all download combinations (including checking the PNG DPI) and the error notices.

Known limitation

In the browser, a non-PNG/JPEG image from a host that doesn't allow cross-origin requests can't be embedded, because the embed service only handles PNG/JPEG. It's linked instead, and the editor says so. The CLI doesn't have this problem.