a framing slot renders the original, not a rung

The preview asked `derived/` for a 640-wide rung and drew it about 1900 pixels wide — stretched three
times over, which reads as a poor photograph rather than as the wrong file. Raising the rung only moves
the problem: the box is most of a panel wide and can be zoomed on top of that, so any rung chosen in
advance is chosen wrong, and the widest one available is whatever the ladder happens to hold.

The original has every pixel there is. It is also, often, a HEIC that no browser can decode — which is
what av-club is for, and the platform already renders those for its own file browser through exactly
this path.

So there is a `/original/*` route: it resolves a path inside `originals/`, forwards to av-club's
`/v1/render` with a width, and streams back something a browser can draw. It decodes nothing itself.
That is the standing rule and the reason there is no image library in this plugin.

Not cached on disk, like the platform's own /render and for the same reason: a full-size render is
large, looked at once, and keyed on a width the panel chose. Caching it would fill a disk to make the
second look at one photograph faster.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/MediaField.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { ImageOff, Pencil, Trash2, Upload } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { MediaPicker } from './MediaPicker';
-import { posterUrl, thumbUrl } from './thumbnail';
+import { originalUrl, posterUrl } from './thumbnail';
 
 /**
  * One picture or video on the page, shown at the shape the page will show it.
@@ -219,7 +219,30 @@ export const MediaField = ({
     return () => element.removeEventListener('wheel', onWheel);
   }, [framable, current, onCropChange, natural, slotAspect]);
 
-  const preview = value ? (kind === 'video' ? posterUrl(value) : thumbUrl(value, 640)) : null;
+  /*
+    1280, not a thumbnail.
+
+    This slot is drawn at most of the panel's width and can be zoomed into on top of that, so it is the
+    one place in the admin that needs real pixels. 640 was being stretched about three times over, which
+    reads as a poor photograph rather than as the wrong file.
+
+    Not `full.webp`: on this library that is 4.6 MB for a single header, and an admin panel that takes a
+    second to show a picture is its own problem. 1280 is the widest rung most originals have.
+  */
+  /*
+    The ORIGINAL, rendered at roughly what this slot draws.
+
+    Not a rung from `derived/`. This box is most of the panel wide and can be zoomed on top of that, so
+    a rung picked in advance is picked wrong: 640 stretched over 1900 pixels reads as a poor photograph
+    rather than as the wrong file, and the widest rung available is whatever the ladder happens to hold.
+    av-club renders whatever the original is — including a HEIC no browser can decode — at the width
+    asked for.
+
+    1600 rather than measuring the box: the panel is a fixed fraction of a window, this is an admin
+    rather than a page, and a resize observer to save a few hundred kilobytes would be machinery nobody
+    benefits from.
+  */
+  const preview = value ? (kind === 'video' ? posterUrl(value) : originalUrl(value, 1600)) : null;
 
   const accept = (event: React.DragEvent): string | null => {
     if (!event.dataTransfer.types.includes(DRAG_TYPE)) return null;

web/thumbnail.ts

@@ -15,7 +15,7 @@ import { getHeaders } from 'hooks/useClient';
  * MediaField. Three copies of a URL shape is three places to be wrong about the rung when the ladder
  * changes — which it did, four times in a day.
  */
-export const thumbUrl = (path: string, width: 256 | 320 | 480 | 640 = 320): string => {
+export const thumbUrl = (path: string, width: 256 | 320 | 480 | 640 | 960 | 1280 = 320): string => {
   const token = getHeaders()['Authorization']?.replace('Bearer ', '') ?? '';
   const encoded = path.split('/').map(encodeURIComponent).join('/');
   return `/api/fofos-admin/derived/${encoded}/${width}.webp?token=${encodeURIComponent(token)}`;
@@ -32,3 +32,19 @@ export const posterUrl = (path: string): string => {
   const encoded = path.split('/').map(encodeURIComponent).join('/');
   return `/api/fofos-admin/derived/${encoded}/poster-512.webp?token=${encodeURIComponent(token)}`;
 };
+
+/**
+ * An ORIGINAL, rendered at a width, for something drawn at size.
+ *
+ * The derived ladder is right for a row thumbnail and wrong for a framing slot: that is most of a panel
+ * wide and can be zoomed on top of it, so a rung chosen in advance is a rung that is wrong. This asks
+ * for the width the slot actually draws, from the file that has every pixel.
+ *
+ * `width` is a hint the server clamps to 256..4096. Ask for what will be drawn — twice it, on a screen
+ * that is worth it — rather than a round number.
+ */
+export const originalUrl = (path: string, width: number): string => {
+  const token = getHeaders()['Authorization']?.replace('Bearer ', '') ?? '';
+  const encoded = path.split('/').map(encodeURIComponent).join('/');
+  return `/api/fofos-admin/original/${encoded}?width=${Math.round(width)}&token=${encodeURIComponent(token)}`;
+};