@jant/core 0.6.1 → 0.6.2

package/dist/node.js

@@ -1,8 +1,8 @@
-import "./url-umUptr5z.js";
-import { B as isAssetPath, L as buildThemeStyle, R as BUILTIN_COLOR_THEMES, _ as sqliteSchemaBundle, a as resolveDatabaseDialect, c as resolveConfig, d as setWebhook, f as BUILTIN_FONT_THEMES, g as pgSchemaBundle, i as createSiteService, l as getWebhookUrl, m as getFontThemeCssVariables, n as createNodeCliRuntime, o as getHostBasedStartupConfigurationIssues, p as getCjkSerifCssVariables, r as createNodeRequestRuntime, s as createStorageDriver, t as createApp, u as setMyCommands, v as createNodeDatabase, y as schema_exports, z as getPublicAssetBasePath } from "./app-DYQdDMs8.js";
-import { t as createExportService } from "./export-Bbn86HmS.js";
-import { C as shouldTrustProxy, S as getTelegramWebhookSecret, b as getSiteResolutionMode, d as getHostedControlPlaneBaseUrl, i as getConfiguredSingleSitePathPrefix, l as getEnvString, r as getConfiguredSingleSiteOrigin, x as getTelegramBotPool, y as getPort } from "./env-C7e2Nlnt.js";
-import "./github-sync-CBQPRZ8H.js";
+import "./url-XF0GbKGO.js";
+import { B as isAssetPath, L as buildThemeStyle, R as BUILTIN_COLOR_THEMES, _ as sqliteSchemaBundle, a as resolveDatabaseDialect, c as resolveConfig, d as setWebhook, f as BUILTIN_FONT_THEMES, g as pgSchemaBundle, i as createSiteService, l as getWebhookUrl, m as getFontThemeCssVariables, n as createNodeCliRuntime, o as getHostBasedStartupConfigurationIssues, p as getCjkSerifCssVariables, r as createNodeRequestRuntime, s as createStorageDriver, t as createApp, u as setMyCommands, v as createNodeDatabase, y as schema_exports, z as getPublicAssetBasePath } from "./app-Ct9c4zYF.js";
+import { t as createExportService } from "./export-O2w3AsZX.js";
+import { C as shouldTrustProxy, S as getTelegramWebhookSecret, b as getSiteResolutionMode, d as getHostedControlPlaneBaseUrl, i as getConfiguredSingleSitePathPrefix, l as getEnvString, r as getConfiguredSingleSiteOrigin, x as getTelegramBotPool, y as getPort } from "./env-CoSe-1y4.js";
+import "./github-sync-D49RADci.js";
 import { drizzle } from "drizzle-orm/better-sqlite3";
 import { serve } from "@hono/node-server";
 import Database from "better-sqlite3";
@@ -529,7 +529,7 @@ async function createNodeRequestHandler(options) {
 async function start(env = process.env, app) {
 	const handler = await createNodeRequestHandler({
 		env,
-		app: async () => app ?? (await import("./app-CMSW_AYG.js")).createApp()
+		app: async () => app ?? (await import("./app-CUZaVgsC.js")).createApp()
 	});
 	const hostname = resolveHost(env);
 	const port = resolvePort(env);

package/dist/{url-umUptr5z.js → url-XF0GbKGO.js}

@@ -29,6 +29,7 @@ var __exportAll = (all, no_symbols) => {
 	sanitizeUrl: () => sanitizeUrl,
 	slugify: () => slugify,
 	stripSitePathPrefix: () => stripSitePathPrefix,
+	toAbsoluteAssetUrl: () => toAbsoluteAssetUrl,
 	toAbsoluteSiteUrl: () => toAbsoluteSiteUrl,
 	toPublicHref: () => toPublicHref,
 	toPublicPath: () => toPublicPath
@@ -330,5 +331,25 @@ var SAFE_URL_PROTOCOLS = new Set([
 	if (!siteUrl) return toPublicPath(path, sitePathPrefix);
 	return new URL(toPublicPath(path, sitePathPrefix), siteUrl).toString();
 }
+/**
+* Resolve a possibly-relative asset URL to an absolute URL, leaving
+* already-absolute (`http(s):`) and protocol-relative (`//host`) URLs
+* untouched. Use for assets — like media — whose stored URL may be either an
+* app-local path or a full CDN URL.
+*
+* @param url - Asset URL: an internal path or an already-absolute URL
+* @param siteUrl - Normalized site URL
+* @param sitePathPrefix - Public site path prefix
+* @returns Absolute URL, or the original value when it is already absolute
+*
+* @example
+* ```ts
+* toAbsoluteAssetUrl("/m/a.png", "https://site.com");   // "https://site.com/m/a.png"
+* toAbsoluteAssetUrl("https://cdn.example/a.png", "x"); // "https://cdn.example/a.png"
+* ```
+*/ function toAbsoluteAssetUrl(url, siteUrl, sitePathPrefix = "") {
+	if (isFullUrl(url) || url.startsWith("//")) return url;
+	return toAbsoluteSiteUrl(url, siteUrl, sitePathPrefix);
+}
 //#endregion
-export { url_exports as _, getSitePathPrefix as a, normalizePath as c, sanitizeUrl as d, slugify as f, toPublicPath as g, toPublicHref as h, getSiteOrigin as i, normalizeSitePathPrefix as l, toAbsoluteSiteUrl as m, extractDisplayDomain as n, isFullUrl as o, stripSitePathPrefix as p, extractDomain as r, isSafeInternalRedirect as s, buildSiteUrl as t, normalizeSiteUrl as u, __exportAll as v };
+export { toPublicPath as _, getSitePathPrefix as a, normalizePath as c, sanitizeUrl as d, slugify as f, toPublicHref as g, toAbsoluteSiteUrl as h, getSiteOrigin as i, normalizeSitePathPrefix as l, toAbsoluteAssetUrl as m, extractDisplayDomain as n, isFullUrl as o, stripSitePathPrefix as p, extractDomain as r, isSafeInternalRedirect as s, buildSiteUrl as t, normalizeSiteUrl as u, url_exports as v, __exportAll as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "exports": {

package/src/client/__tests__/image-processor.test.ts

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { planImageProcessing } from "../image-processor.js";
+
+const OPTS = { maxShortSide: 1920, maxLongSide: 8192 };
+
+describe("planImageProcessing", () => {
+  it("leaves small images untouched", () => {
+    expect(planImageProcessing(800, 600, OPTS)).toEqual({
+      passthrough: false,
+      width: 800,
+      height: 600,
+    });
+  });
+
+  it("keeps long screenshots at full resolution", () => {
+    expect(planImageProcessing(1080, 6000, OPTS)).toEqual({
+      passthrough: false,
+      width: 1080,
+      height: 6000,
+    });
+  });
+
+  it("keeps wide screenshots at full resolution", () => {
+    expect(planImageProcessing(6000, 1080, OPTS)).toEqual({
+      passthrough: false,
+      width: 6000,
+      height: 1080,
+    });
+  });
+
+  it("downscales a large photo by its short side, not its long side", () => {
+    const plan = planImageProcessing(4032, 3024, OPTS);
+    expect(plan.passthrough).toBe(false);
+    expect(plan.height).toBe(1920);
+    expect(plan.width).toBe(Math.round(4032 * (1920 / 3024)));
+  });
+
+  it("caps the short side regardless of orientation", () => {
+    const portrait = planImageProcessing(3024, 4032, OPTS);
+    expect(portrait.width).toBe(1920);
+    expect(portrait.height).toBe(Math.round(4032 * (1920 / 3024)));
+  });
+
+  it("uploads images taller than the canvas limit untouched", () => {
+    expect(planImageProcessing(1080, 12000, OPTS)).toEqual({
+      passthrough: true,
+      width: 1080,
+      height: 12000,
+    });
+  });
+
+  it("uploads images wider than the canvas limit untouched", () => {
+    expect(planImageProcessing(12000, 1080, OPTS)).toEqual({
+      passthrough: true,
+      width: 12000,
+      height: 1080,
+    });
+  });
+
+  it("treats the long-side cap as inclusive", () => {
+    expect(planImageProcessing(1080, 8192, OPTS).passthrough).toBe(false);
+    expect(planImageProcessing(1080, 8193, OPTS).passthrough).toBe(true);
+  });
+});

package/src/client/components/__tests__/jant-media-lightbox.test.ts

@@ -94,7 +94,7 @@ describe("JantMediaLightbox", () => {
     ).toBe(false);
   });
 
-  it("renders tall images in a scrollable stage", async () => {
+  it("previews tall images contained, then expands to a scrollable stage on click", async () => {
     const el = await createElement();
 
     el.open(
@@ -110,14 +110,67 @@ describe("JantMediaLightbox", () => {
     );
     await flush(el);
 
-    const stage = el.querySelector(".media-lightbox-stage");
-    const img = el.querySelector(".media-lightbox-img");
+    const initialStage = el.querySelector(".media-lightbox-stage");
+    const initialImg = el.querySelector<HTMLImageElement>(
+      ".media-lightbox-img",
+    );
 
-    expect(stage?.classList.contains("media-lightbox-stage-scroll")).toBe(true);
-    expect(img?.classList.contains("media-lightbox-img-scroll")).toBe(true);
+    expect(
+      initialStage?.classList.contains("media-lightbox-stage-scroll"),
+    ).toBe(false);
+    expect(initialImg?.classList.contains("media-lightbox-img-scroll")).toBe(
+      false,
+    );
+    expect(initialImg?.classList.contains("media-lightbox-img-zoomable")).toBe(
+      true,
+    );
+
+    initialImg?.dispatchEvent(
+      new MouseEvent("click", { bubbles: true, cancelable: true }),
+    );
+    await flush(el);
+
+    const zoomedStage = el.querySelector(".media-lightbox-stage");
+    const zoomedImg = el.querySelector(".media-lightbox-img");
+    expect(zoomedStage?.classList.contains("media-lightbox-stage-scroll")).toBe(
+      true,
+    );
+    expect(zoomedImg?.classList.contains("media-lightbox-img-scroll")).toBe(
+      true,
+    );
+
+    zoomedImg?.dispatchEvent(
+      new MouseEvent("click", { bubbles: true, cancelable: true }),
+    );
+    await flush(el);
+
+    const collapsedStage = el.querySelector(".media-lightbox-stage");
+    expect(
+      collapsedStage?.classList.contains("media-lightbox-stage-scroll"),
+    ).toBe(false);
   });
 
-  it("resets stage scroll when navigating between images", async () => {
+  it("does not show the zoom affordance for regular-aspect images", async () => {
+    const el = await createElement();
+
+    el.open(
+      [
+        {
+          url: "https://example.com/wide.jpg",
+          alt: "",
+          width: 1600,
+          height: 900,
+        },
+      ],
+      0,
+    );
+    await flush(el);
+
+    const img = el.querySelector(".media-lightbox-img");
+    expect(img?.classList.contains("media-lightbox-img-zoomable")).toBe(false);
+  });
+
+  it("resets zoom and stage scroll when navigating between images", async () => {
     const el = await createElement();
 
     el.open(
@@ -139,10 +192,18 @@ describe("JantMediaLightbox", () => {
     );
     await flush(el);
 
+    el.querySelector<HTMLImageElement>(".media-lightbox-img")?.dispatchEvent(
+      new MouseEvent("click", { bubbles: true, cancelable: true }),
+    );
+    await flush(el);
+
     const initialStage = el.querySelector<HTMLElement>(".media-lightbox-stage");
     if (!initialStage) {
       throw new Error("expected lightbox stage");
     }
+    expect(initialStage.classList.contains("media-lightbox-stage-scroll")).toBe(
+      true,
+    );
     initialStage.scrollTop = 180;
 
     el.querySelector<HTMLButtonElement>(".media-lightbox-nav-next")?.click();
@@ -150,6 +211,9 @@ describe("JantMediaLightbox", () => {
 
     const nextStage = el.querySelector<HTMLElement>(".media-lightbox-stage");
     expect(nextStage?.scrollTop).toBe(0);
+    expect(nextStage?.classList.contains("media-lightbox-stage-scroll")).toBe(
+      false,
+    );
   });
 
   it("uses natural image dimensions for inline post-body images", async () => {
@@ -179,8 +243,15 @@ describe("JantMediaLightbox", () => {
     );
     await flush(el);
 
-    const stage = el.querySelector(".media-lightbox-stage");
-    expect(stage?.classList.contains("media-lightbox-stage-scroll")).toBe(true);
+    const lightboxImg = el.querySelector<HTMLImageElement>(
+      ".media-lightbox-img",
+    );
+    expect(lightboxImg?.classList.contains("media-lightbox-img-zoomable")).toBe(
+      true,
+    );
+    expect(lightboxImg?.classList.contains("media-lightbox-img-scroll")).toBe(
+      false,
+    );
   });
 
   it("renders custom controls for short videos", async () => {

package/src/client/components/jant-compose-editor.ts

@@ -2524,9 +2524,9 @@ export class JantComposeEditor extends LitElement {
           : this.format === "link"
             ? this._renderLinkFields()
             : this._renderQuoteFields()}
-        ${this._renderStarRating()}
       </section>
-      ${this._renderAttachmentDock()} ${this._renderToolsRow()}
+      ${this._renderAttachmentDock()} ${this._renderStarRating()}
+      ${this._renderToolsRow()}
     `;
   }
 }

package/src/client/components/jant-media-lightbox.ts

@@ -140,6 +140,7 @@ export class JantMediaLightbox extends LitElement {
     _videoCurrentTime: { state: true },
     _videoDuration: { state: true },
     _videoMuted: { state: true },
+    _imageZoomed: { state: true },
   };
 
   declare _images: LightboxImage[];
@@ -150,6 +151,7 @@ export class JantMediaLightbox extends LitElement {
   declare _videoCurrentTime: number;
   declare _videoDuration: number;
   declare _videoMuted: boolean;
+  declare _imageZoomed: boolean;
 
   createRenderRoot() {
     this.innerHTML = "";
@@ -167,6 +169,7 @@ export class JantMediaLightbox extends LitElement {
     this._videoCurrentTime = 0;
     this._videoDuration = 0;
     this._videoMuted = false;
+    this._imageZoomed = false;
   }
 
   connectedCallback() {
@@ -188,6 +191,7 @@ export class JantMediaLightbox extends LitElement {
     this._images = images;
     this._currentIndex = Math.max(0, Math.min(index, images.length - 1));
     this.#resetShortVideoState(this._images[this._currentIndex]);
+    this._imageZoomed = false;
     this._open = true;
     document.dispatchEvent(
       new CustomEvent(MEDIA_LIGHTBOX_TOGGLE_EVENT, {
@@ -267,6 +271,7 @@ export class JantMediaLightbox extends LitElement {
   #prev() {
     if (this._images.length <= 1) return;
     this.#pauseCurrentVideo();
+    this._imageZoomed = false;
     this._currentIndex =
       (this._currentIndex - 1 + this._images.length) % this._images.length;
   }
@@ -274,9 +279,22 @@ export class JantMediaLightbox extends LitElement {
   #next() {
     if (this._images.length <= 1) return;
     this.#pauseCurrentVideo();
+    this._imageZoomed = false;
     this._currentIndex = (this._currentIndex + 1) % this._images.length;
   }
 
+  #handleImageClick = (e: Event) => {
+    const img = this._images[this._currentIndex];
+    const eligible = shouldUseScrollableLightboxImage(
+      img,
+      this._viewportWidth,
+      this._viewportHeight,
+    );
+    if (!eligible) return;
+    e.stopPropagation();
+    this._imageZoomed = !this._imageZoomed;
+  };
+
   #handleKeydown = (e: Event) => {
     const ke = e as globalThis.KeyboardEvent;
     const target = e.target as HTMLElement | null;
@@ -531,14 +549,22 @@ export class JantMediaLightbox extends LitElement {
     super.updated(changed);
 
     if (!this._open) return;
-    if (!changed.has("_currentIndex") && !changed.has("_open")) return;
+    if (
+      !changed.has("_currentIndex") &&
+      !changed.has("_open") &&
+      !changed.has("_imageZoomed")
+    ) {
+      return;
+    }
 
     const stage = this.querySelector<HTMLElement>(".media-lightbox-stage");
     if (!stage) return;
     stage.scrollTop = 0;
     stage.scrollLeft = 0;
-    this.#syncCurrentVideo();
-    this.#focusCurrentMedia();
+    if (changed.has("_currentIndex") || changed.has("_open")) {
+      this.#syncCurrentVideo();
+      this.#focusCurrentMedia();
+    }
   }
 
   render() {
@@ -548,11 +574,12 @@ export class JantMediaLightbox extends LitElement {
     const multiple = this._images.length > 1;
     const isVideo = img?.mimeType?.startsWith("video/");
     const usesShortVideoControls = shouldUseShortVideoExperience(img);
-    const isScrollableImage = shouldUseScrollableLightboxImage(
+    const isScrollableEligible = shouldUseScrollableLightboxImage(
       img,
       this._viewportWidth,
       this._viewportHeight,
     );
+    const isScrollableImage = isScrollableEligible && this._imageZoomed;
     const shortVideoFrameSize = usesShortVideoControls
       ? getContainedLightboxMediaSize(
           img,
@@ -683,9 +710,10 @@ export class JantMediaLightbox extends LitElement {
                     @focus=${this.#handleVideoFocus}
                   ></video>`
               : html`<img
-                  class=${`media-lightbox-img${isScrollableImage ? " media-lightbox-img-scroll" : ""}`}
+                  class=${`media-lightbox-img${isScrollableEligible ? " media-lightbox-img-zoomable" : ""}${isScrollableImage ? " media-lightbox-img-scroll" : ""}`}
                   src=${img?.url ?? ""}
                   alt=${img?.alt ?? ""}
+                  @click=${this.#handleImageClick}
                 />`}
           </div>
           ${multiple

package/src/client/image-processor.ts

@@ -2,18 +2,35 @@
  * Client-side Image Processor
  *
  * Processes images before upload:
- * - Resizes to max dimensions
+ * - Resizes oversized images (caps the short side; the long side rides free)
  * - Strips all metadata (privacy)
  * - Converts to WebP format (JPEG fallback when WebP encoding is unavailable)
  *
  * EXIF orientation is handled automatically by the browser — modern
  * engines (Chrome 81+, Safari 13.1+, Firefox 93+) apply orientation
  * both in `<img>` rendering and in canvas `drawImage`.
+ *
+ * Long and wide screenshots (chat logs, articles, wide tables) lose their
+ * text legibility if the short side is scaled down, so the resize step caps
+ * only the *short* side and leaves the long side alone. Images whose long
+ * side exceeds the safe canvas limit can't be redrawn at all — those upload
+ * untouched, so images of any length are supported.
+ */
+
+/** Cap for the shorter image side — the side that determines text sharpness. */
+const MAX_SHORT_SIDE = 1920;
+
+/**
+ * Largest long side we can still redraw on a canvas. A canvas bounded by
+ * MAX_SHORT_SIDE × MAX_LONG_SIDE (1920 × 8192 ≈ 15.7M px) stays under the
+ * ~16.7M-pixel area limit older mobile Safari enforces. Anything longer
+ * can't be re-encoded, so it uploads as-is.
  */
+const MAX_LONG_SIDE = 8192;
 
 const DEFAULT_OPTIONS = {
-  maxWidth: 1920,
-  maxHeight: 1920,
+  maxShortSide: MAX_SHORT_SIDE,
+  maxLongSide: MAX_LONG_SIDE,
   quality: 0.85,
   mimeType: "image/webp" as const,
 };
@@ -35,23 +52,52 @@ function loadImage(file: File): Promise<HTMLImageElement> {
   });
 }
 
+export interface ImageProcessPlan {
+  /** When true, upload the original file untouched (too large to re-encode). */
+  passthrough: boolean;
+  /** Target dimensions — equal to the source dimensions when `passthrough`. */
+  width: number;
+  height: number;
+}
+
 /**
- * Calculate output dimensions maintaining aspect ratio
+ * Decide how to handle an image given its source dimensions.
+ *
+ * - Long side over `maxLongSide` → `passthrough` (canvas can't redraw it).
+ * - Short side within `maxShortSide` → keep dimensions, just re-encode.
+ * - Otherwise → scale down so the short side hits `maxShortSide`.
+ *
+ * @param sourceWidth - Natural image width in pixels
+ * @param sourceHeight - Natural image height in pixels
+ * @param options - `maxShortSide` and `maxLongSide` caps
+ * @returns The processing plan
+ *
+ * @example
+ * ```ts
+ * planImageProcessing(1080, 6000, { maxShortSide: 1920, maxLongSide: 8192 });
+ * // { passthrough: false, width: 1080, height: 6000 }
+ * ```
  */
-function calculateDimensions(
-  width: number,
-  height: number,
-  maxWidth: number,
-  maxHeight: number,
-): { width: number; height: number } {
-  if (width <= maxWidth && height <= maxHeight) {
-    return { width, height };
+export function planImageProcessing(
+  sourceWidth: number,
+  sourceHeight: number,
+  options: { maxShortSide: number; maxLongSide: number },
+): ImageProcessPlan {
+  const longSide = Math.max(sourceWidth, sourceHeight);
+  if (longSide > options.maxLongSide) {
+    return { passthrough: true, width: sourceWidth, height: sourceHeight };
+  }
+
+  const shortSide = Math.min(sourceWidth, sourceHeight);
+  if (shortSide <= options.maxShortSide) {
+    return { passthrough: false, width: sourceWidth, height: sourceHeight };
   }
 
-  const ratio = Math.min(maxWidth / width, maxHeight / height);
+  const scale = options.maxShortSide / shortSide;
   return {
-    width: Math.round(width * ratio),
-    height: Math.round(height * ratio),
+    passthrough: false,
+    width: Math.round(sourceWidth * scale),
+    height: Math.round(sourceHeight * scale),
   };
 }
 
@@ -92,6 +138,8 @@ export interface ProcessResult {
   blob: Blob;
   width: number;
   height: number;
+  /** False when `blob` is the untouched original (too large to re-encode). */
+  processed: boolean;
 }
 
 export interface ProcessToFileResult {
@@ -112,26 +160,32 @@ async function process(
   const img = await loadImage(file);
 
   // img.width / img.height already reflect EXIF orientation in modern browsers
-  const { width, height } = calculateDimensions(
-    img.width,
-    img.height,
-    opts.maxWidth,
-    opts.maxHeight,
-  );
+  const plan = planImageProcessing(img.width, img.height, opts);
+
+  // Too large to redraw on a canvas without crushing detail — keep the
+  // original bytes so images of any length upload at full quality.
+  if (plan.passthrough) {
+    return {
+      blob: file,
+      width: plan.width,
+      height: plan.height,
+      processed: false,
+    };
+  }
 
   const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
+  canvas.width = plan.width;
+  canvas.height = plan.height;
 
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("Failed to get canvas context");
 
   // drawImage respects EXIF orientation — no manual rotation needed
-  ctx.drawImage(img, 0, 0, width, height);
+  ctx.drawImage(img, 0, 0, plan.width, plan.height);
 
   const blob = await canvasToBlob(canvas, opts.mimeType, opts.quality);
 
-  return { blob, width, height };
+  return { blob, width: plan.width, height: plan.height, processed: true };
 }
 
 /**
@@ -141,7 +195,12 @@ async function processToFile(
   file: File,
   options: ProcessOptions = {},
 ): Promise<ProcessToFileResult> {
-  const { blob, width, height } = await process(file, options);
+  const result = await process(file, options);
+
+  // Original kept untouched — upload the file as-is.
+  if (!result.processed) {
+    return { file, width: result.width, height: result.height };
+  }
 
   // Use actual blob type — Safari falls back to JPEG when WebP encoding isn't supported
   const EXT_MAP: Record<string, string> = {
@@ -149,14 +208,14 @@ async function processToFile(
     "image/jpeg": "jpg",
     "image/png": "png",
   };
-  const ext = EXT_MAP[blob.type] ?? "png";
+  const ext = EXT_MAP[result.blob.type] ?? "png";
   const originalName = file.name.replace(/\.[^.]+$/, "");
   const newName = `${originalName}.${ext}`;
 
   return {
-    file: new File([blob], newName, { type: blob.type }),
-    width,
-    height,
+    file: new File([result.blob], newName, { type: result.blob.type }),
+    width: result.width,
+    height: result.height,
   };
 }
 

package/src/client/media-scroll-hint.ts

@@ -1,16 +1,24 @@
 /**
- * Media gallery horizontal scroll fade hints.
+ * Media gallery horizontal scroll affordances.
  *
- * Toggles `.can-scroll-start` / `.can-scroll-end` on `.media-gallery-scroll-wrap`
- * based on the inner scroller's scroll position.
+ * The gallery strip (`[data-post-media]` inside `.media-gallery-scroll-wrap`)
+ * is trackpad- and touch-friendly, but its scrollbar is hidden, so a plain
+ * mouse or the keyboard has no obvious way to scroll it. This module:
+ *
+ *  - Toggles `.can-scroll-start` / `.can-scroll-end` on the wrap so CSS can
+ *    fade the edge that has hidden content and reveal the matching arrow.
+ *  - Wires the prev/next arrow buttons to scroll the strip by one page.
+ *  - Scrolls the strip with Arrow / Home / End keys while it is focused.
  */
 
 const THRESHOLD = 4; // px tolerance for "at edge"
 
+function getScroller(wrap: HTMLElement): HTMLElement | null {
+  return wrap.querySelector("[data-post-media]");
+}
+
 function updateHints(wrap: HTMLElement): void {
-  const scroller = wrap.querySelector(
-    "[data-post-media]",
-  ) as HTMLElement | null;
+  const scroller = getScroller(wrap);
   if (!scroller) return;
 
   const { scrollLeft, scrollWidth, clientWidth } = scroller;
@@ -21,16 +29,61 @@ function updateHints(wrap: HTMLElement): void {
   );
 }
 
+/** Horizontal distance moved per arrow-button click or arrow keypress. */
+function pageStep(scroller: HTMLElement): number {
+  return Math.max(160, Math.round(scroller.clientWidth * 0.85));
+}
+
+function scrollByStep(scroller: HTMLElement, direction: 1 | -1): void {
+  scroller.scrollBy({
+    left: direction * pageStep(scroller),
+    behavior: "smooth",
+  });
+}
+
 function initWrap(wrap: HTMLElement): void {
-  const scroller = wrap.querySelector("[data-post-media]");
+  // Guard against double-init (initAll + the MutationObserver can overlap).
+  if (wrap.dataset.scrollHintReady === "1") return;
+  const scroller = getScroller(wrap);
   if (!scroller) return;
+  wrap.dataset.scrollHintReady = "1";
 
-  // Initial check
+  // Initial check + keep edge hints in sync while scrolling.
   updateHints(wrap);
-
   scroller.addEventListener("scroll", () => updateHints(wrap), {
     passive: true,
   });
+
+  // Prev/next arrow buttons — the mouse affordance.
+  wrap
+    .querySelector(".media-gallery-nav-prev")
+    ?.addEventListener("click", () => scrollByStep(scroller, -1));
+  wrap
+    .querySelector(".media-gallery-nav-next")
+    ?.addEventListener("click", () => scrollByStep(scroller, 1));
+
+  // Keyboard scrolling while the strip itself is focused.
+  scroller.addEventListener("keydown", (event) => {
+    if (event.target !== scroller) return;
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault();
+        scrollByStep(scroller, 1);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        scrollByStep(scroller, -1);
+        break;
+      case "Home":
+        event.preventDefault();
+        scroller.scrollTo({ left: 0, behavior: "smooth" });
+        break;
+      case "End":
+        event.preventDefault();
+        scroller.scrollTo({ left: scroller.scrollWidth, behavior: "smooth" });
+        break;
+    }
+  });
 }
 
 // Init all existing galleries