feat(workspace): image blocks via /bild (M2)

- /bild (only in an empty bullet) turns the bullet into an inline picker:
  file, camera on phones, drag & drop, paste, or an https link the server
  copies. Esc/✕ restores the empty bullet; nothing is synced before the
  upload succeeded.
- Photos are shrunk to 2048 px and stored as WebP (JPEG fallback); the
  re-encoding drops EXIF data such as the location.
- Image block: loaded with the login as blob URL, click opens full
  screen, optional caption kept in the block content
  (![caption](media:id)).

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

frontend/src/lib/media.ts

@@ -0,0 +1,115 @@
+// Images and audio in notes. A block points to its file through its content:
+//   image  ![Beschriftung](media:med_…)
+//   audio  [Beschriftung](media:med_…)
+// so the reference travels with the normal note sync. Files are loaded with the login (fetch) and
+// shown as blob: URLs; there are no public links.
+import { getToken } from './api';
+
+const MEDIA_RE = /^!?\[((?:[^\]\\]|\\.)*)\]\(media:(med_[0-9a-f]+)\)$/;
+
+export interface MediaRef {
+  id: string;
+  caption: string;
+}
+
+export function parseMediaContent(content: string): MediaRef | null {
+  const m = MEDIA_RE.exec((content || '').trim());
+  if (!m) return null;
+  return { id: m[2], caption: m[1].replace(/\\(.)/g, '$1') };
+}
+
+export function mediaContent(kind: 'image' | 'audio', id: string, caption = ''): string {
+  const safe = caption.replace(/[\r\n]+/g, ' ').replace(/([\\\]])/g, '\\$1');
+  return `${kind === 'image' ? '!' : ''}[${safe}](media:${id})`;
+}
+
+const objectURLs = new Map<string, Promise<string>>();
+
+/** blob: URL of a file; loaded once per page. */
+export function mediaObjectURL(id: string): Promise<string> {
+  let p = objectURLs.get(id);
+  if (!p) {
+    p = (async () => {
+      const token = getToken();
+      const res = await fetch(`/api/v1/media/${encodeURIComponent(id)}`, {
+        headers: token ? { Authorization: `Bearer ${token}` } : {},
+      });
+      if (!res.ok) throw new Error(res.status === 404 ? 'Datei nicht gefunden' : `HTTP ${res.status}`);
+      return URL.createObjectURL(await res.blob());
+    })();
+    p.catch(() => objectURLs.delete(id)); // try again next time (e.g. was offline)
+    objectURLs.set(id, p);
+  }
+  return p;
+}
+
+export interface UploadedMedia {
+  id: string;
+  kind: 'image' | 'audio';
+  mime: string;
+  size: number;
+  url: string;
+}
+
+async function mediaRequest(path: string, init: RequestInit): Promise<UploadedMedia> {
+  const token = getToken();
+  const res = await fetch(path, {
+    ...init,
+    headers: { ...(init.headers as Record<string, string>), ...(token ? { Authorization: `Bearer ${token}` } : {}) },
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `Hochladen fehlgeschlagen (HTTP ${res.status})`);
+  return data as UploadedMedia;
+}
+
+export function uploadMedia(docId: string, file: Blob, filename: string): Promise<UploadedMedia> {
+  const form = new FormData();
+  form.append('file', file, filename);
+  return mediaRequest(`/api/v1/documents/${encodeURIComponent(docId)}/media`, { method: 'POST', body: form });
+}
+
+/** Lets the server copy an external image (https). */
+export function copyExternalImage(docId: string, url: string): Promise<UploadedMedia> {
+  return mediaRequest(`/api/v1/documents/${encodeURIComponent(docId)}/media/fetch`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url }),
+  });
+}
+
+const MAX_EDGE = 2048;
+
+function canvasBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> {
+  return new Promise((resolve) => canvas.toBlob((b) => resolve(b), type, quality));
+}
+
+/**
+ * Shrinks photos to at most 2048 px and stores them as WebP (JPEG where the browser cannot write WebP).
+ * Re-encoding also drops EXIF data such as the location. GIFs stay as they are (animation); anything
+ * the browser cannot decode is sent unchanged and checked by the server.
+ */
+export async function prepareImage(file: Blob): Promise<{ blob: Blob; name: string }> {
+  if (file.type === 'image/gif' || typeof createImageBitmap === 'undefined') return { blob: file, name: 'bild' };
+  let bitmap: ImageBitmap;
+  try {
+    bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' } as ImageBitmapOptions);
+  } catch {
+    return { blob: file, name: 'bild' };
+  }
+  const scale = Math.min(1, MAX_EDGE / Math.max(bitmap.width, bitmap.height));
+  const canvas = document.createElement('canvas');
+  canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+  canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return { blob: file, name: 'bild' };
+  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+  bitmap.close?.();
+  const webp = await canvasBlob(canvas, 'image/webp', 0.82);
+  if (webp && webp.type === 'image/webp') return { blob: webp, name: 'bild.webp' };
+  // No WebP encoder (older Safari): JPEG on white, since JPEG has no transparency
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  const jpeg = await canvasBlob(canvas, 'image/jpeg', 0.85);
+  return jpeg ? { blob: jpeg, name: 'bild.jpg' } : { blob: file, name: 'bild' };
+}