@hearthlog/module-gallery 0.0.0-stage → 1.0.1

package/public/contract.ts

@@ -0,0 +1,211 @@
+export const PUBLIC_GALLERY_PREFIX = 'v1/galleries';
+export const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+/**
+ * Photo details an owner chose to share in the review. Each is absent when its
+ * switch is off; the public copies themselves never carry embedded metadata.
+ */
+export interface PublicGalleryPhotoDetails {
+    /** When the photo was taken, by the camera's own clock: `yyyy-MM-dd` or `yyyy-MM-ddTHH:mm`. */
+    takenAt?: string;
+    camera?: string;
+    lens?: string;
+    fNumber?: number;
+    exposureTime?: number;
+    iso?: number;
+    focalLength?: number;
+    latitude?: number;
+    longitude?: number;
+}
+
+export interface PublicGalleryPhoto extends PublicGalleryPhotoDetails {
+    assetId: string;
+    caption: string;
+    alt: string;
+    width: number;
+    height: number;
+}
+
+/** A month of a dated gallery in time order, with the position of its first photo. */
+export interface PublicGalleryMonth {
+    month: string;
+    photos: number;
+    position: number;
+}
+
+export interface PublicGalleryManifest {
+    version: 1;
+    title: string;
+    description: string;
+    photos: PublicGalleryPhoto[];
+}
+
+export interface PublicGalleryIndex {
+    version: 2;
+    title: string;
+    description: string;
+    photoCount: number;
+    /** Present when every photo shares its date and the photos run in time order. */
+    months?: PublicGalleryMonth[];
+    /** Set when the revision has `ids/` lookup shards, so a photo address can name its asset alone. */
+    ids?: true;
+}
+
+/** Positions of the photos whose asset ID starts with one shard prefix, in the reviewed order. */
+export interface PublicGalleryIds {
+    version: 2;
+    positions: Record<string, number>;
+}
+
+export interface PublicGalleryPage {
+    version: 2;
+    photos: PublicGalleryPhoto[];
+}
+
+export function activeKey(publicationId: string): string {
+    return `${PUBLIC_GALLERY_PREFIX}/${publicationId}/active.json`;
+}
+
+/** Whole v1 manifest of revisions activated before sharding; new revisions no longer write one. */
+export function manifestKey(publicationId: string, revision: string): string {
+    return `${PUBLIC_GALLERY_PREFIX}/${publicationId}/revisions/${revision}/manifest.json`;
+}
+
+export function indexKey(publicationId: string, revision: string): string {
+    return `${PUBLIC_GALLERY_PREFIX}/${publicationId}/revisions/${revision}/index.json`;
+}
+
+export function pageKey(publicationId: string, revision: string, page: number): string {
+    return `${PUBLIC_GALLERY_PREFIX}/${publicationId}/revisions/${revision}/pages/${page}.json`;
+}
+
+export function idsKey(publicationId: string, revision: string, shard: string): string {
+    return `${PUBLIC_GALLERY_PREFIX}/${publicationId}/revisions/${revision}/ids/${shard}.json`;
+}
+
+/** The lookup shard of an asset: the first two hex digits of its ID. */
+export function idShard(assetId: string): string {
+    return assetId.slice(0, 2).toLowerCase();
+}
+
+/** Lookup shards for a revision: asset ID to position, 256 shards at most. */
+export function publicIdShards(photos: readonly { assetId: string }[]): Map<string, PublicGalleryIds> {
+    const shards = new Map<string, PublicGalleryIds>();
+    photos.forEach((photo, position) => {
+        const shard = idShard(photo.assetId);
+        let ids = shards.get(shard);
+        if (!ids) shards.set(shard, ids = { version: 2, positions: {} });
+        ids.positions[photo.assetId.toLowerCase()] = position;
+    });
+    return shards;
+}
+
+export function assetKey(publicationId: string, revision: string, assetId: string, variant: 'thumbnail' | 'display'): string {
+    return `${PUBLIC_GALLERY_PREFIX}/${publicationId}/revisions/${revision}/assets/${assetId}/${variant}.webp`;
+}
+
+const TAKEN_AT = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2})?$/;
+const MONTH = /^\d{4}-\d{2}$/;
+
+function optionalText(value: unknown): boolean {
+    return value === undefined || (typeof value === 'string' && value.length > 0 && value.length <= 120);
+}
+
+function optionalMeasure(value: unknown): boolean {
+    return value === undefined || (typeof value === 'number' && Number.isFinite(value) && value > 0 && value < 1_000_000);
+}
+
+/** Shared details are optional; present ones must be well formed. */
+export function validPhotoDetails(photo: PublicGalleryPhotoDetails): boolean {
+    const hasLatitude = photo.latitude !== undefined;
+    if (hasLatitude !== (photo.longitude !== undefined)) return false;
+    if (hasLatitude && !(typeof photo.latitude === 'number' && Math.abs(photo.latitude) <= 90
+        && typeof photo.longitude === 'number' && Math.abs(photo.longitude) <= 180)) return false;
+    return (photo.takenAt === undefined || (typeof photo.takenAt === 'string' && TAKEN_AT.test(photo.takenAt)))
+        && optionalText(photo.camera) && optionalText(photo.lens)
+        && optionalMeasure(photo.fNumber) && optionalMeasure(photo.exposureTime)
+        && optionalMeasure(photo.iso) && optionalMeasure(photo.focalLength);
+}
+
+function validPhoto(photo: PublicGalleryPhoto | undefined, ids: Set<string>): boolean {
+    if (!photo || !UUID.test(photo.assetId) || ids.has(photo.assetId)
+        || typeof photo.caption !== 'string' || photo.caption.length > 500
+        || typeof photo.alt !== 'string' || photo.alt.length > 500
+        || !Number.isSafeInteger(photo.width) || photo.width <= 0
+        || !Number.isSafeInteger(photo.height) || photo.height <= 0
+        || !validPhotoDetails(photo)) return false;
+    ids.add(photo.assetId);
+    return true;
+}
+
+/**
+ * Months for the spine, when every photo has a date and they run in time
+ * order; otherwise none, and the page shows no month headings or spine.
+ */
+export function publicMonths(photos: readonly PublicGalleryPhotoDetails[]): PublicGalleryMonth[] | undefined {
+    const months: PublicGalleryMonth[] = [];
+    for (let position = 0; position < photos.length; position += 1) {
+        const month = photos[position].takenAt?.slice(0, 7);
+        if (!month) return undefined;
+        const last = months[months.length - 1];
+        if (last && month < last.month) return undefined;
+        if (last?.month === month) last.photos += 1;
+        else months.push({ month, photos: 1, position });
+    }
+    return months.length ? months : undefined;
+}
+
+export function parsePublicManifest(value: unknown): PublicGalleryManifest | null {
+    if (!value || typeof value !== 'object') return null;
+    const manifest = value as Partial<PublicGalleryManifest>;
+    if (manifest.version !== 1 || typeof manifest.title !== 'string' || manifest.title.length > 120
+        || typeof manifest.description !== 'string' || manifest.description.length > 500
+        || !Array.isArray(manifest.photos) || manifest.photos.length === 0 || manifest.photos.length > 10_000) return null;
+    const ids = new Set<string>();
+    for (const photo of manifest.photos) if (!validPhoto(photo, ids)) return null;
+    return manifest as PublicGalleryManifest;
+}
+
+export function parsePublicIndex(value: unknown): PublicGalleryIndex | null {
+    if (!value || typeof value !== 'object') return null;
+    const index = value as Partial<PublicGalleryIndex>;
+    if (!(index.version === 2 && typeof index.title === 'string' && index.title.length <= 120
+        && typeof index.description === 'string' && index.description.length <= 500
+        && Number.isSafeInteger(index.photoCount) && index.photoCount! > 0 && index.photoCount! <= 10_000)) return null;
+    if (index.ids !== undefined && index.ids !== true) return null;
+    if (index.months !== undefined) {
+        if (!Array.isArray(index.months) || index.months.length === 0) return null;
+        let previous = '';
+        let covered = 0;
+        for (const month of index.months) {
+            if (!month || typeof month.month !== 'string' || !MONTH.test(month.month) || month.month <= previous
+                || !Number.isSafeInteger(month.photos) || month.photos <= 0
+                || month.position !== covered) return null;
+            previous = month.month;
+            covered += month.photos;
+        }
+        if (covered !== index.photoCount) return null;
+    }
+    return index as PublicGalleryIndex;
+}
+
+export function parsePublicPage(value: unknown): PublicGalleryPage | null {
+    if (!value || typeof value !== 'object') return null;
+    const page = value as Partial<PublicGalleryPage>;
+    if (page.version !== 2 || !Array.isArray(page.photos) || page.photos.length < 1 || page.photos.length > 100) return null;
+    const ids = new Set<string>();
+    for (const photo of page.photos) if (!validPhoto(photo, ids)) return null;
+    return page as PublicGalleryPage;
+}
+
+export function parsePublicIds(value: unknown): PublicGalleryIds | null {
+    if (!value || typeof value !== 'object') return null;
+    const ids = value as Partial<PublicGalleryIds>;
+    if (ids.version !== 2 || !ids.positions || typeof ids.positions !== 'object') return null;
+    const entries = Object.entries(ids.positions);
+    if (entries.length === 0 || entries.length > 10_000) return null;
+    for (const [assetId, position] of entries) {
+        if (!UUID.test(assetId) || !Number.isSafeInteger(position) || position < 0 || position >= 10_000) return null;
+    }
+    return ids as PublicGalleryIds;
+}

package/public/index.ts

@@ -0,0 +1,237 @@
+import { render } from 'svelte/server';
+import { activeKey, assetKey, idShard, idsKey, indexKey, manifestKey, pageKey, parsePublicIds, parsePublicIndex, parsePublicManifest, parsePublicPage, UUID, type PublicGalleryIndex, type PublicGalleryPage, type PublicGalleryPhoto } from './contract.js';
+import { clientAssets } from './client-assets.js';
+import { PAGE_SIZE, type PublicGalleryData, type PublicPageResponse, type PublicPhoto } from './app/types.js';
+import App from './app/App.svelte';
+
+export interface PublicGalleryEnv {
+    GALLERY_PUBLIC: {
+        get(key: string): Promise<{ json(): Promise<unknown>; body: ReadableStream<Uint8Array> } | null>;
+    };
+    PUBLIC_ORIGIN: string;
+}
+
+const PAGE = /^\/g\/([0-9a-f-]{36})\/?$/i;
+const DETAIL = /^\/g\/([0-9a-f-]{36})\/photos\/([0-9a-f-]{36})\/?$/i;
+/** Photo addresses shared before they dropped the revision and position; they redirect to `DETAIL`. */
+const LEGACY_DETAIL = /^\/g\/([0-9a-f-]{36})\/photos\/([0-9a-f-]{36})\/(0|[1-9][0-9]{0,4})\/([0-9a-f-]{36})\/?$/i;
+const ASSET = /^\/g\/([0-9a-f-]{36})\/assets\/([0-9a-f-]{36})\/(0|[1-9][0-9]{0,4})\/([0-9a-f-]{36})\/(thumbnail|display)\.webp$/i;
+const PAGE_JSON = /^\/g\/([0-9a-f-]{36})\/pages\/(0|[1-9][0-9]{0,4})\.json$/i;
+const BUNDLE = /^\/_app\/[A-Za-z0-9_.-]+$/;
+
+/** Images may rest in a browser briefly; everything else is re-read so an unpublish shows at once. */
+const IMAGE_CACHE_CONTROL = 'private, max-age=60';
+
+/** Only this Worker's own bundle runs; styles may be inline for layout sizes. */
+const CONTENT_SECURITY_POLICY = "default-src 'none'; img-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'";
+
+function response(body: BodyInit | null, status = 200, contentType = 'text/html; charset=utf-8', cacheControl = 'no-store', extra: Record<string, string> = {}): Response {
+    return new Response(body, { status, headers: {
+        ...extra,
+        'Content-Type': contentType,
+        'Cache-Control': cacheControl,
+        'X-Content-Type-Options': 'nosniff',
+        'X-Robots-Tag': 'noindex, nofollow, noarchive',
+        'Referrer-Policy': 'no-referrer',
+        'Content-Security-Policy': CONTENT_SECURITY_POLICY,
+    } });
+}
+
+interface ActiveGallery {
+    revision: string;
+    index: PublicGalleryIndex;
+    /** Photos of a whole v1 manifest, which has no page shards. */
+    photos?: PublicGalleryPhoto[];
+}
+
+async function readJson(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], key: string): Promise<unknown> {
+    const object = await bucket.get(key);
+    if (!object) return null;
+    try { return await object.json(); } catch { return null; }
+}
+
+/**
+ * Files of one revision never change, so this isolate keeps the recent ones.
+ * The active pointer is not among them: it is read on every request.
+ */
+const revisionFiles = new Map<string, unknown>();
+const REVISION_FILE_LIMIT = 256;
+
+async function readRevisionJson(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], key: string): Promise<unknown> {
+    if (revisionFiles.has(key)) return revisionFiles.get(key);
+    const value = await readJson(bucket, key);
+    if (value !== null) {
+        if (revisionFiles.size >= REVISION_FILE_LIMIT) revisionFiles.delete(revisionFiles.keys().next().value!);
+        revisionFiles.set(key, value);
+    }
+    return value;
+}
+
+async function activeGallery(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], publicationId: string): Promise<ActiveGallery | null> {
+    const pointer = await readJson(bucket, activeKey(publicationId));
+    if (!pointer || typeof pointer !== 'object' || !('revision' in pointer) || !UUID.test(String(pointer.revision))) return null;
+    const revision = String(pointer.revision);
+    const index = parsePublicIndex(await readRevisionJson(bucket, indexKey(publicationId, revision)));
+    if (index) return { revision, index };
+    // Revisions activated before index.json keep either a sharded index or a whole v1 manifest here.
+    const legacy = await readRevisionJson(bucket, manifestKey(publicationId, revision));
+    const legacyIndex = parsePublicIndex(legacy);
+    if (legacyIndex) return { revision, index: legacyIndex };
+    const manifest = parsePublicManifest(legacy);
+    return manifest ? {
+        revision, photos: manifest.photos,
+        index: { version: 2, title: manifest.title, description: manifest.description, photoCount: manifest.photos.length },
+    } : null;
+}
+
+async function galleryPage(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], publicationId: string, gallery: ActiveGallery, page: number): Promise<PublicGalleryPage | null> {
+    if (page < 0 || page >= Math.ceil(gallery.index.photoCount / PAGE_SIZE)) return null;
+    if (gallery.photos) return { version: 2, photos: gallery.photos.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE) };
+    const shard = parsePublicPage(await readRevisionJson(bucket, pageKey(publicationId, gallery.revision, page)));
+    return shard?.photos.length === Math.min(PAGE_SIZE, gallery.index.photoCount - page * PAGE_SIZE) ? shard : null;
+}
+
+async function photoAt(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], publicationId: string, gallery: ActiveGallery, position: number): Promise<PublicGalleryPhoto | null> {
+    if (position < 0 || position >= gallery.index.photoCount) return null;
+    const shard = await galleryPage(bucket, publicationId, gallery, Math.floor(position / PAGE_SIZE));
+    return shard?.photos[position % PAGE_SIZE] ?? null;
+}
+
+/**
+ * Where a photo sits in the reviewed order. Revisions with lookup shards read
+ * one; a revision published before them is searched page by page.
+ */
+async function positionOf(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], publicationId: string, gallery: ActiveGallery, assetId: string): Promise<number | null> {
+    if (gallery.photos) {
+        const found = gallery.photos.findIndex((photo) => photo.assetId === assetId);
+        return found < 0 ? null : found;
+    }
+    if (gallery.index.ids) {
+        const ids = parsePublicIds(await readRevisionJson(bucket, idsKey(publicationId, gallery.revision, idShard(assetId))));
+        return ids?.positions[assetId] ?? null;
+    }
+    for (let page = 0; page < Math.ceil(gallery.index.photoCount / PAGE_SIZE); page += 1) {
+        const shard = await galleryPage(bucket, publicationId, gallery, page);
+        const found = shard?.photos.findIndex((photo) => photo.assetId === assetId) ?? -1;
+        if (found >= 0) return page * PAGE_SIZE + found;
+    }
+    return null;
+}
+
+function escapeHtml(value: string): string {
+    return value.replace(/[&<>"']/g, (character) => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    })[character]!);
+}
+
+/** The photos of one shard, with their positions in the reviewed order. */
+function positioned(shard: PublicGalleryPage, page: number): PublicPhoto[] {
+    return shard.photos.map((photo, offset) => ({ ...photo, position: page * PAGE_SIZE + offset }));
+}
+
+/**
+ * The page is rendered on the server, so it reads and links without a
+ * script; the browser bundle then takes over the same markup.
+ */
+function renderDocument(data: PublicGalleryData, documentTitle: string): string {
+    const { head, body } = render(App, { props: { data } });
+    // Script-free JSON for the browser, safe to embed in HTML.
+    const state = JSON.stringify(data).replace(/</g, '\\u003c');
+    const styles = clientAssets.styles.map((style) => `<link rel="stylesheet" href="${style.path}">`).join('');
+    const script = clientAssets.script ? `<script type="module" src="${clientAssets.script.path}"></script>` : '';
+    return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta name="robots" content="noindex,nofollow,noarchive"><title>${escapeHtml(documentTitle)}</title>${styles}${head}${script}</head><body><div id="app">${body}</div><script type="application/json" id="gallery-data">${state}</script></body></html>`;
+}
+
+async function galleryDocument(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], publicationId: string, gallery: ActiveGallery, page: number): Promise<string | null> {
+    const shard = await galleryPage(bucket, publicationId, gallery, page);
+    if (!shard) return null;
+    return renderDocument({
+        publicationId, revision: gallery.revision, title: gallery.index.title, description: gallery.index.description,
+        photoCount: gallery.index.photoCount, months: gallery.index.months ?? null,
+        firstPage: page, photos: positioned(shard, page), open: null,
+    }, gallery.index.title);
+}
+
+/** A photo opened over its page; a photo near the page's edge brings the neighbouring page for the filmstrip. */
+async function photoDocument(bucket: PublicGalleryEnv['GALLERY_PUBLIC'], publicationId: string, gallery: ActiveGallery, position: number): Promise<string | null> {
+    const page = Math.floor(position / PAGE_SIZE);
+    const pages = [page];
+    const lastPage = Math.ceil(gallery.index.photoCount / PAGE_SIZE) - 1;
+    if (position % PAGE_SIZE < 8 && page > 0) pages.unshift(page - 1);
+    if (position % PAGE_SIZE > PAGE_SIZE - 9 && page < lastPage) pages.push(page + 1);
+    const shards = await Promise.all(pages.map((number) => galleryPage(bucket, publicationId, gallery, number)));
+    if (shards.some((shard) => !shard)) return null;
+    const photos = shards.flatMap((shard, index) => positioned(shard!, pages[index]));
+    const photo = photos.find((each) => each.position === position)!;
+    return renderDocument({
+        publicationId, revision: gallery.revision, title: gallery.index.title, description: gallery.index.description,
+        photoCount: gallery.index.photoCount, months: gallery.index.months ?? null,
+        firstPage: pages[0], photos, open: position,
+    }, photo.caption || gallery.index.title);
+}
+
+export async function handlePublicGalleryRequest(request: Request, env: PublicGalleryEnv): Promise<Response> {
+    const url = new URL(request.url);
+    if (url.origin !== env.PUBLIC_ORIGIN) return response('Not found', 404, 'text/plain; charset=utf-8');
+    if (request.method !== 'GET' && request.method !== 'HEAD') return response('Not found', 404, 'text/plain; charset=utf-8');
+    if (url.pathname === '/robots.txt') return response(request.method === 'HEAD' ? null : 'User-agent: *\nDisallow: /\n', 200, 'text/plain; charset=utf-8');
+    if (BUNDLE.test(url.pathname)) {
+        // The browser bundle is named by its content, so it can be kept for good.
+        const file = [clientAssets.script, ...clientAssets.styles].find((asset) => asset?.path === url.pathname);
+        if (!file) return response('Not found', 404, 'text/plain; charset=utf-8');
+        return response(request.method === 'HEAD' ? null : file.body, 200, file.type, 'public, max-age=31536000, immutable');
+    }
+    const pageMatch = url.pathname.match(PAGE);
+    const detailMatch = url.pathname.match(DETAIL);
+    const legacyMatch = url.pathname.match(LEGACY_DETAIL);
+    const assetMatch = url.pathname.match(ASSET);
+    const jsonMatch = url.pathname.match(PAGE_JSON);
+    if (!pageMatch && !detailMatch && !legacyMatch && !assetMatch && !jsonMatch) return response('Not found', 404, 'text/plain; charset=utf-8');
+    const publicationId = (pageMatch?.[1] ?? detailMatch?.[1] ?? legacyMatch?.[1] ?? assetMatch?.[1] ?? jsonMatch?.[1])!;
+    if (!UUID.test(publicationId)) return response('Not found', 404, 'text/plain; charset=utf-8');
+    let active;
+    try { active = await activeGallery(env.GALLERY_PUBLIC, publicationId); }
+    catch { return response('Unavailable', 503, 'text/plain; charset=utf-8'); }
+    if (!active) return response('Not found', 404, 'text/plain; charset=utf-8');
+    try {
+        if (pageMatch) {
+            const rawPage = url.searchParams.get('page') ?? '0';
+            if (!/^(0|[1-9]\d{0,4})$/.test(rawPage)) return response('Not found', 404, 'text/plain; charset=utf-8');
+            const html = await galleryDocument(env.GALLERY_PUBLIC, publicationId, active, Number(rawPage));
+            if (!html) return response('Not found', 404, 'text/plain; charset=utf-8');
+            return response(request.method === 'HEAD' ? null : html);
+        }
+        if (jsonMatch) {
+            const page = Number(jsonMatch[2]);
+            const shard = await galleryPage(env.GALLERY_PUBLIC, publicationId, active, page);
+            if (!shard) return response('Not found', 404, 'text/plain; charset=utf-8');
+            const body: PublicPageResponse = { revision: active.revision, page, photos: positioned(shard, page) };
+            return response(request.method === 'HEAD' ? null : JSON.stringify(body), 200, 'application/json; charset=utf-8');
+        }
+        if (detailMatch || legacyMatch) {
+            const assetId = (detailMatch?.[2] ?? legacyMatch![4]).toLowerCase();
+            const position = await positionOf(env.GALLERY_PUBLIC, publicationId, active, assetId);
+            if (position === null) return response('Not found', 404, 'text/plain; charset=utf-8');
+            if (legacyMatch) {
+                return response(null, 302, 'text/plain; charset=utf-8', 'no-store', { Location: `/g/${publicationId}/photos/${assetId}` });
+            }
+            const photo = await photoAt(env.GALLERY_PUBLIC, publicationId, active, position);
+            if (!photo || photo.assetId !== assetId) return response('Not found', 404, 'text/plain; charset=utf-8');
+            const html = await photoDocument(env.GALLERY_PUBLIC, publicationId, active, position);
+            if (!html) return response('Not found', 404, 'text/plain; charset=utf-8');
+            return response(request.method === 'HEAD' ? null : html);
+        }
+        const [, , revision, rawPosition, assetId, variant] = assetMatch!;
+        if (revision !== active.revision || !UUID.test(assetId)) return response('Not found', 404, 'text/plain; charset=utf-8');
+        const photo = await photoAt(env.GALLERY_PUBLIC, publicationId, active, Number(rawPosition));
+        if (!photo || photo.assetId !== assetId) return response('Not found', 404, 'text/plain; charset=utf-8');
+        const object = await env.GALLERY_PUBLIC.get(assetKey(publicationId, revision, assetId, variant as 'thumbnail' | 'display'));
+        if (!object) return response('Not found', 404, 'text/plain; charset=utf-8');
+        return response(request.method === 'HEAD' ? null : object.body, 200, 'image/webp', IMAGE_CACHE_CONTROL);
+    } catch (error) {
+        console.error('[Gallery] Public request failed', error);
+        return response('Unavailable', 503, 'text/plain; charset=utf-8');
+    }
+}
+
+export default { fetch: handlePublicGalleryRequest };

package/public/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": []
+  },
+  "include": [
+    "index.ts",
+    "contract.ts",
+    "client-assets.ts",
+    "app/*.ts"
+  ]
+}

package/src/components/gallery/AlbumCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import type { GalleryAlbumSummary } from '../../data/gallery.js';
+    import { galleryRendition } from '../../gallery/file-store.js';
+    import IconImage from '~icons/mdi/image-multiple-outline';
+
+    let { album, tenantId, logId, onOpen }: {
+        album: GalleryAlbumSummary;
+        tenantId: string;
+        logId: string;
+        onOpen: () => void;
+    } = $props();
+
+    let imageUrl = $state('');
+    $effect(() => {
+        imageUrl = '';
+        if (!album.effective_cover_photo_id || !album.cover_file_version_id || !tenantId || !logId) return;
+        let cancelled = false;
+        let objectUrl = '';
+        void galleryRendition({
+            tenantId, logId, photoId: album.effective_cover_photo_id,
+            fileVersionId: album.cover_file_version_id,
+        }, 'thumbnail').then((blob) => {
+            if (cancelled) return;
+            objectUrl = URL.createObjectURL(blob);
+            imageUrl = objectUrl;
+        }).catch(() => undefined);
+        return () => {
+            cancelled = true;
+            if (objectUrl) URL.revokeObjectURL(objectUrl);
+        };
+    });
+</script>
+
+<button type="button" onclick={onOpen} class="group min-w-0 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] rounded-xl">
+    <span class="flex aspect-[4/3] items-center justify-center overflow-hidden rounded-xl bg-[var(--stor-surface-muted)] text-[var(--stor-muted-text)]">
+        {#if imageUrl}<img src={imageUrl} alt="" class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-[1.025] motion-reduce:transition-none" />
+        {:else}<IconImage class="h-8 w-8" />{/if}
+    </span>
+    <span class="mt-2 block truncate text-sm font-semibold text-[var(--stor-ink)]">{album.title}</span>
+    <span class="block text-xs text-[var(--stor-muted-text)]">{album.photo_count} {album.photo_count === 1 ? 'photo' : 'photos'}</span>
+</button>