@vespercms/admin 0.0.0-stage → 0.1.0-next.0

package/src/media/MediaPicker.tsx

@@ -0,0 +1,302 @@
+import { extensionOf, isImagePath, type MediaItem } from '@vespercms/core';
+import { Button, Dialog, Icon, TextField } from '@vespercms/ui';
+import { useMemo, useRef, useState } from 'react';
+import { FileImage } from '../app/file-url.tsx';
+import { useStudio } from '../app/context.tsx';
+import { useLoad } from '../app/load.ts';
+import { fileSize, megabytes } from './hygiene.ts';
+import { fileIcon } from './file-icon.ts';
+import { checkUpload, sendUpload, type UploadStep } from './upload.ts';
+
+export type MediaPickerProps = {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  kind: 'image' | 'file';
+  /** File extensions a file field accepts, lower case without dots. Empty for any. */
+  extensions?: readonly string[];
+  /** Where a new upload goes, site-relative. */
+  folder: string;
+  /** Called with the chosen file's site-relative path, and what hygiene did to a new upload. */
+  onChoose: (path: string, notes?: readonly string[]) => void;
+};
+
+/**
+ * Choose a file: upload a new one (after hygiene and a duplicate check) or
+ * pick one already in the site. One dialog, two plain sections.
+ */
+export function MediaPicker({
+  isOpen,
+  onOpenChange,
+  kind,
+  extensions = [],
+  folder,
+  onChoose,
+}: MediaPickerProps) {
+  return (
+    <Dialog
+      title={kind === 'image' ? 'Choose an image' : 'Choose a file'}
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+    >
+      {isOpen && (
+        <PickerBody
+          kind={kind}
+          extensions={extensions}
+          folder={folder}
+          onChoose={(path, notes) => {
+            onChoose(path, notes);
+            onOpenChange(false);
+          }}
+        />
+      )}
+    </Dialog>
+  );
+}
+
+function PickerBody({
+  kind,
+  extensions = [],
+  folder,
+  onChoose,
+}: Pick<MediaPickerProps, 'kind' | 'extensions' | 'folder' | 'onChoose'>) {
+  const { api, siteName, manifest } = useStudio();
+  const maxEdge = manifest.site.images?.maxUploadEdge;
+  const [media, reloadMedia] = useLoad(() => api.listMedia(), 'media');
+  const [step, setStep] = useState<UploadStep | { step: 'working'; text: string } | null>(null);
+  const [query, setQuery] = useState('');
+  const input = useRef<HTMLInputElement>(null);
+
+  const fits = (path: string) =>
+    kind === 'image'
+      ? isImagePath(path)
+      : extensions.length === 0 || extensions.includes(extensionOf(path));
+  const items = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    return (media.state === 'ready' ? media.value : [])
+      .filter((item) => fits(item.path))
+      .filter((item) => needle === '' || item.path.toLowerCase().includes(needle));
+    // `fits` only reads props that key this body.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [media, query]);
+
+  const upload = async (ready: Extract<UploadStep, { upload: unknown }>) => {
+    setStep({ step: 'working', text: 'Uploading…' });
+    // Chosen for a field: in GitHub mode it goes out with the entry's next publish.
+    const result = await sendUpload(api, ready.upload, folder, { withNextSave: true });
+    if (result.ok) {
+      reloadMedia();
+      onChoose(result.path, ready.upload.notes);
+    } else {
+      setStep({ step: 'refused', message: result.message });
+    }
+  };
+
+  const accept =
+    kind === 'image'
+      ? 'image/*,.heic,.heif'
+      : extensions.length > 0
+        ? extensions.map((e) => `.${e}`).join(',')
+        : undefined;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <section aria-labelledby="picker-upload" className="flex flex-col gap-3">
+        <h3 id="picker-upload" className="text-heading-3">
+          Upload from your computer
+        </h3>
+        <p className="text-small text-content-muted">
+          {kind === 'image'
+            ? `Large photos are scaled down, turned upright, and stripped of location data before they’re added to ${siteName}.`
+            : `The file is added to ${folder}.`}
+        </p>
+        <input
+          ref={input}
+          type="file"
+          accept={accept}
+          tabIndex={-1}
+          aria-hidden="true"
+          className="sr-only"
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            event.target.value = '';
+            if (!file) return;
+            setStep({ step: 'working', text: `Preparing ${file.name}…` });
+            void checkUpload(file, media.state === 'ready' ? media.value : [], {
+              accept: kind === 'image' ? 'image' : 'any',
+              ...(maxEdge ? { maxEdge } : {}),
+            }).then((next) => {
+              if (next.step === 'ready') void upload(next);
+              else setStep(next);
+            });
+          }}
+        />
+        <div>
+          <Button
+            icon="upload"
+            onPress={() => {
+              input.current?.click();
+            }}
+          >
+            {kind === 'image' ? 'Upload an image' : 'Upload a file'}
+          </Button>
+        </div>
+        <UploadStatus
+          step={step}
+          onUpload={(ready) => void upload(ready)}
+          onReuse={onChoose}
+          onCancel={() => {
+            setStep(null);
+          }}
+        />
+      </section>
+
+      <section aria-labelledby="picker-existing" className="flex flex-col gap-3">
+        <h3 id="picker-existing" className="text-heading-3">
+          Or choose one already in the site
+        </h3>
+        <TextField
+          label="Search by file name"
+          type="search"
+          icon="search"
+          value={query}
+          onChange={setQuery}
+        />
+        {media.state === 'loading' && (
+          <p className="text-small text-content-muted">Loading files…</p>
+        )}
+        {media.state === 'failed' && (
+          <p role="alert" className="text-danger">
+            Couldn’t list files: {media.message}
+          </p>
+        )}
+        {media.state === 'ready' && items.length === 0 && (
+          <p className="text-content-muted">No {kind === 'image' ? 'images' : 'files'} found.</p>
+        )}
+        <ul className="grid max-h-80 grid-cols-1 gap-2 overflow-y-auto sm:grid-cols-2">
+          {items.map((item) => (
+            <li key={item.path}>
+              <MediaChoice item={item} onChoose={onChoose} />
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}
+
+function MediaChoice({ item, onChoose }: { item: MediaItem; onChoose: (path: string) => void }) {
+  const name = item.path.slice(item.path.lastIndexOf('/') + 1);
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        onChoose(item.path);
+      }}
+      className="flex w-full items-center gap-3 rounded-md border border-border p-2 text-left hover:bg-surface-sunken focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-focus focus-visible:ring-6 focus-visible:ring-(color:--glow-focus)"
+    >
+      {isImagePath(item.path) ? (
+        <FileImage
+          path={item.path}
+          loading="lazy"
+          className="size-12 shrink-0 rounded-md object-cover"
+        />
+      ) : (
+        <span
+          aria-hidden="true"
+          className="flex size-12 shrink-0 items-center justify-center rounded-md bg-surface-sunken text-content-muted"
+        >
+          <Icon name={fileIcon(extensionOf(item.path))} size={24} />
+        </span>
+      )}
+      <span className="min-w-0">
+        <span className="block truncate font-semibold">{name}</span>
+        <span className="block font-mono text-caption break-all text-content-muted">
+          {item.path.slice(0, item.path.lastIndexOf('/'))} · {fileSize(item.size)}
+        </span>
+      </span>
+    </button>
+  );
+}
+
+export function UploadStatus({
+  step,
+  onUpload,
+  onReuse,
+  onCancel,
+}: {
+  step: UploadStep | { step: 'working'; text: string } | null;
+  onUpload: (ready: Extract<UploadStep, { upload: unknown }>) => void;
+  onReuse: (path: string) => void;
+  onCancel: () => void;
+}) {
+  if (!step) return null;
+  if (step.step === 'working') return <p role="status">{step.text}</p>;
+  if (step.step === 'refused') {
+    return (
+      <p role="alert" className="text-danger">
+        {step.message}
+      </p>
+    );
+  }
+  const notes = step.upload.notes.length > 0 && (
+    <ul className="list-disc pl-6 text-small text-content-muted">
+      {step.upload.notes.map((note) => (
+        <li key={note}>{note}</li>
+      ))}
+    </ul>
+  );
+  if (step.step === 'duplicate') {
+    return (
+      <div
+        role="alert"
+        className="flex flex-col gap-3 rounded-md border border-warning bg-surface-raised p-4"
+      >
+        <p>This file is already in the site as {step.existing}.</p>
+        <div className="flex flex-wrap gap-3">
+          <Button
+            onPress={() => {
+              onReuse(step.existing);
+            }}
+          >
+            Use the existing file
+          </Button>
+          <Button
+            variant="quiet"
+            onPress={() => {
+              onUpload(step);
+            }}
+          >
+            Upload a copy anyway
+          </Button>
+        </div>
+      </div>
+    );
+  }
+  if (step.step === 'confirm-large') {
+    return (
+      <div
+        role="alert"
+        className="flex flex-col gap-3 rounded-md border border-warning bg-surface-raised p-4"
+      >
+        <p>
+          {step.upload.name} is {megabytes(step.upload.bytes.length)}. Large files make the site’s
+          repository and pages heavier. Upload it anyway?
+        </p>
+        {notes}
+        <div className="flex flex-wrap gap-3">
+          <Button
+            onPress={() => {
+              onUpload(step);
+            }}
+          >
+            Upload it
+          </Button>
+          <Button variant="quiet" onPress={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    );
+  }
+  return null;
+}

package/src/media/file-icon.ts

@@ -0,0 +1,17 @@
+import type { IconName } from '@vespercms/ui';
+
+const KINDS: [IconName, string[]][] = [
+  [
+    'file-text',
+    ['pdf', 'doc', 'docx', 'odt', 'rtf', 'txt', 'md', 'mdx', 'mdoc', 'ppt', 'pptx', 'key'],
+  ],
+  ['file-sheet', ['csv', 'tsv', 'xls', 'xlsx', 'ods', 'numbers']],
+  ['file-archive', ['zip', 'gz', 'tgz', 'tar', '7z', 'rar']],
+  ['file-video', ['mp4', 'm4v', 'mov', 'webm', 'ogv']],
+  ['file-audio', ['mp3', 'm4a', 'wav', 'ogg', 'oga', 'flac', 'aac']],
+];
+
+/** The icon for a file that isn't an image, by its extension; a plain page when unknown. */
+export function fileIcon(extension: string): IconName {
+  return KINDS.find(([, extensions]) => extensions.includes(extension))?.[0] ?? 'file';
+}

package/src/media/formats.ts

@@ -0,0 +1,262 @@
+/*
+ * Just enough of each image format to make upload hygiene decisions without
+ * decoding pixels (spec §6.6.6): what a file really is, its size, its EXIF
+ * orientation, whether it carries location data, and how to drop metadata
+ * without re-encoding. Pure functions over bytes, so they're unit-tested.
+ */
+
+export type DetectedType =
+  'jpeg' | 'png' | 'gif' | 'webp' | 'avif' | 'heic' | 'svg' | 'pdf' | 'other';
+
+const ascii = (bytes: Uint8Array, start: number, length: number) =>
+  String.fromCharCode(...bytes.subarray(start, start + length));
+
+/** What a file is, from its first bytes rather than its name. */
+export function detectType(bytes: Uint8Array): DetectedType {
+  if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) return 'jpeg';
+  if (ascii(bytes, 0, 8) === '\x89PNG\r\n\x1a\n') return 'png';
+  if (ascii(bytes, 0, 4) === 'GIF8') return 'gif';
+  if (ascii(bytes, 0, 4) === 'RIFF' && ascii(bytes, 8, 4) === 'WEBP') return 'webp';
+  if (ascii(bytes, 0, 5) === '%PDF-') return 'pdf';
+  if (ascii(bytes, 4, 4) === 'ftyp') {
+    const size = view(bytes).getUint32(0);
+    const brands = [ascii(bytes, 8, 4)];
+    for (let at = 16; at + 4 <= Math.min(size, bytes.length); at += 4)
+      brands.push(ascii(bytes, at, 4));
+    if (brands.some((b) => b === 'avif' || b === 'avis')) return 'avif';
+    if (
+      brands.some((b) =>
+        ['heic', 'heix', 'hevc', 'hevx', 'heim', 'heis', 'mif1', 'msf1'].includes(b),
+      )
+    ) {
+      return 'heic';
+    }
+  }
+  const head = new TextDecoder()
+    .decode(bytes.subarray(0, 1024))
+    .replace(/^\uFEFF/, '')
+    .trimStart();
+  if (/^(<\?xml[^>]*>\s*)?(<!--[\s\S]*?-->\s*)*(<!DOCTYPE svg[^>]*>\s*)?<svg[\s>]/i.test(head))
+    return 'svg';
+  return 'other';
+}
+
+function view(bytes: Uint8Array): DataView {
+  return new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+}
+
+export type ImageFacts = {
+  width?: number;
+  height?: number;
+  /** EXIF orientation, 1–8. 1 (or absent) means the pixels are already upright. */
+  orientation?: number;
+  /** EXIF GPS data is present. */
+  hasLocation: boolean;
+  /** Any metadata a lossless strip would remove. */
+  hasMetadata: boolean;
+};
+
+// --- JPEG -----------------------------------------------------------------
+
+type Segment = { marker: number; start: number; end: number };
+
+/** Segments before the image data (SOS), with their byte ranges. */
+function jpegSegments(bytes: Uint8Array): { segments: Segment[]; dataStart: number } {
+  const segments: Segment[] = [];
+  let at = 2;
+  while (at + 4 <= bytes.length && bytes[at] === 0xff) {
+    const marker = bytes[at + 1] ?? 0;
+    if (marker === 0xff) {
+      at += 1; // fill byte
+      continue;
+    }
+    const length = view(bytes).getUint16(at + 2);
+    const end = at + 2 + length;
+    if (marker === 0xda) return { segments, dataStart: at };
+    segments.push({ marker, start: at, end });
+    at = end;
+  }
+  return { segments, dataStart: at };
+}
+
+/** Orientation and GPS presence from an EXIF (TIFF) block. */
+function readExif(tiff: Uint8Array): { orientation?: number; hasLocation: boolean } {
+  if (tiff.length < 8) return { hasLocation: false };
+  const little = ascii(tiff, 0, 2) === 'II';
+  const data = view(tiff);
+  const u16 = (o: number) => data.getUint16(o, little);
+  const u32 = (o: number) => data.getUint32(o, little);
+  const ifd = u32(4);
+  if (ifd + 2 > tiff.length) return { hasLocation: false };
+  let orientation: number | undefined;
+  let hasLocation = false;
+  const count = u16(ifd);
+  for (let i = 0; i < count; i++) {
+    const entry = ifd + 2 + i * 12;
+    if (entry + 12 > tiff.length) break;
+    const tag = u16(entry);
+    if (tag === 0x0112) orientation = u16(entry + 8);
+    if (tag === 0x8825) hasLocation = true;
+  }
+  return { ...(orientation !== undefined ? { orientation } : {}), hasLocation };
+}
+
+const KEEP_APP = new Set([0xe0, 0xe2, 0xee]); // JFIF, ICC colour profile, Adobe colour transform
+
+export function jpegFacts(bytes: Uint8Array): ImageFacts {
+  const facts: ImageFacts = { hasLocation: false, hasMetadata: false };
+  for (const s of jpegSegments(bytes).segments) {
+    const body = bytes.subarray(s.start + 4, s.end);
+    if (s.marker === 0xe1 && ascii(body, 0, 6) === 'Exif\0\0') {
+      Object.assign(facts, readExif(body.subarray(6)));
+    }
+    if ((s.marker >= 0xe1 && s.marker <= 0xef && !KEEP_APP.has(s.marker)) || s.marker === 0xfe) {
+      facts.hasMetadata = true;
+    }
+    // Start-of-frame markers carry the size (not DHT C4, JPG C8 or DAC CC).
+    if (s.marker >= 0xc0 && s.marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(s.marker)) {
+      facts.height = view(bytes).getUint16(s.start + 5);
+      facts.width = view(bytes).getUint16(s.start + 7);
+    }
+  }
+  return facts;
+}
+
+/** The same JPEG without EXIF, XMP, IPTC or comments. The image data is untouched. */
+export function stripJpeg(bytes: Uint8Array): Uint8Array {
+  const { segments, dataStart } = jpegSegments(bytes);
+  const parts: Uint8Array[] = [bytes.subarray(0, 2)];
+  for (const s of segments) {
+    const metadata =
+      (s.marker >= 0xe1 && s.marker <= 0xef && !KEEP_APP.has(s.marker)) || s.marker === 0xfe;
+    if (!metadata) parts.push(bytes.subarray(s.start, s.end));
+  }
+  parts.push(bytes.subarray(dataStart));
+  return concat(parts);
+}
+
+// --- PNG ------------------------------------------------------------------
+
+const PNG_METADATA = new Set(['eXIf', 'tEXt', 'iTXt', 'zTXt', 'tIME']);
+
+function pngChunks(bytes: Uint8Array): { type: string; start: number; end: number }[] {
+  const chunks: { type: string; start: number; end: number }[] = [];
+  let at = 8;
+  while (at + 12 <= bytes.length) {
+    const length = view(bytes).getUint32(at);
+    const type = ascii(bytes, at + 4, 4);
+    const end = at + 12 + length;
+    chunks.push({ type, start: at, end });
+    at = end;
+    if (type === 'IEND') break;
+  }
+  return chunks;
+}
+
+export function pngFacts(bytes: Uint8Array): ImageFacts {
+  const chunks = pngChunks(bytes);
+  const ihdr = chunks.find((c) => c.type === 'IHDR');
+  const exif = chunks.find((c) => c.type === 'eXIf');
+  return {
+    ...(ihdr
+      ? {
+          width: view(bytes).getUint32(ihdr.start + 8),
+          height: view(bytes).getUint32(ihdr.start + 12),
+        }
+      : {}),
+    ...(exif ? readExif(bytes.subarray(exif.start + 8, exif.end - 4)) : { hasLocation: false }),
+    hasMetadata: chunks.some((c) => PNG_METADATA.has(c.type)),
+  };
+}
+
+/** The same PNG without text, time or EXIF chunks. */
+export function stripPng(bytes: Uint8Array): Uint8Array {
+  const parts = [bytes.subarray(0, 8)];
+  for (const c of pngChunks(bytes)) {
+    if (!PNG_METADATA.has(c.type)) parts.push(bytes.subarray(c.start, c.end));
+  }
+  return concat(parts);
+}
+
+// --- WebP -----------------------------------------------------------------
+
+function webpChunks(bytes: Uint8Array): { type: string; start: number; end: number }[] {
+  const chunks: { type: string; start: number; end: number }[] = [];
+  let at = 12;
+  while (at + 8 <= bytes.length) {
+    const size = view(bytes).getUint32(at + 4, true);
+    const end = at + 8 + size + (size % 2);
+    chunks.push({ type: ascii(bytes, at, 4), start: at, end: Math.min(end, bytes.length) });
+    at = end;
+  }
+  return chunks;
+}
+
+export function webpFacts(bytes: Uint8Array): ImageFacts {
+  const chunks = webpChunks(bytes);
+  const data = view(bytes);
+  const facts: ImageFacts = {
+    hasLocation: false,
+    hasMetadata: chunks.some((c) => c.type === 'EXIF' || c.type === 'XMP '),
+  };
+  const exif = chunks.find((c) => c.type === 'EXIF');
+  if (exif) {
+    let tiff = bytes.subarray(exif.start + 8, exif.end);
+    if (ascii(tiff, 0, 6) === 'Exif\0\0') tiff = tiff.subarray(6);
+    Object.assign(facts, readExif(tiff));
+  }
+  for (const c of chunks) {
+    const d = c.start + 8;
+    if (c.type === 'VP8X') {
+      facts.width = 1 + (data.getUint32(d + 4, true) & 0xffffff);
+      facts.height = 1 + (data.getUint32(d + 7, true) & 0xffffff);
+      break;
+    }
+    if (c.type === 'VP8 ') {
+      facts.width = data.getUint16(d + 6, true) & 0x3fff;
+      facts.height = data.getUint16(d + 8, true) & 0x3fff;
+      break;
+    }
+    if (c.type === 'VP8L') {
+      const bits = data.getUint32(d + 1, true);
+      facts.width = 1 + (bits & 0x3fff);
+      facts.height = 1 + ((bits >> 14) & 0x3fff);
+      break;
+    }
+  }
+  return facts;
+}
+
+/** The same WebP without EXIF or XMP, with the header flags and size fixed up. */
+export function stripWebp(bytes: Uint8Array): Uint8Array {
+  const parts: Uint8Array[] = [];
+  for (const c of webpChunks(bytes)) {
+    if (c.type === 'EXIF' || c.type === 'XMP ') continue;
+    const chunk = bytes.slice(c.start, c.end);
+    if (c.type === 'VP8X') chunk[8] = (chunk[8] ?? 0) & ~(0x08 | 0x04);
+    parts.push(chunk);
+  }
+  const body = concat(parts);
+  const out = new Uint8Array(12 + body.length);
+  out.set(bytes.subarray(0, 12));
+  out.set(body, 12);
+  new DataView(out.buffer).setUint32(4, out.length - 8, true);
+  return out;
+}
+
+export function imageFacts(type: DetectedType, bytes: Uint8Array): ImageFacts {
+  if (type === 'jpeg') return jpegFacts(bytes);
+  if (type === 'png') return pngFacts(bytes);
+  if (type === 'webp') return webpFacts(bytes);
+  return { hasLocation: false, hasMetadata: false };
+}
+
+function concat(parts: Uint8Array[]): Uint8Array {
+  const out = new Uint8Array(parts.reduce((n, p) => n + p.length, 0));
+  let at = 0;
+  for (const part of parts) {
+    out.set(part, at);
+    at += part.length;
+  }
+  return out;
+}