@jant/core 0.6.1 → 0.6.3

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

package/src/i18n/coverage.generated.ts

@@ -12,6 +12,6 @@ import type { Locale } from "./locales.js";
 
 export const SETTINGS_TRANSLATION_COVERAGE: Record<Locale, number> = {
   en: 1,
-  "zh-Hans": 0.9254658385093167,
-  "zh-Hant": 0.9254658385093167,
+  "zh-Hans": 1,
+  "zh-Hant": 1,
 } as const;

package/src/i18n/locales/public/en.po

@@ -371,14 +371,8 @@ msgstr "Clear filter"
 msgid "Close menu"
 msgstr "Close menu"
 
-#. @context: Singular collection count label
-#. @context: Singular collection count label
-#. @context: Singular collection count label
 #. @context: Singular collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collection"
 msgstr "collection"
 
@@ -412,14 +406,8 @@ msgstr "Collection order updated."
 msgid "Collection saved."
 msgstr "Collection saved."
 
-#. @context: Plural collection count label
-#. @context: Plural collection count label
-#. @context: Plural collection count label
 #. @context: Plural collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collections"
 msgstr "collections"
 

package/src/i18n/locales/public/zh-Hans.po

@@ -371,14 +371,8 @@ msgstr ""
 msgid "Close menu"
 msgstr ""
 
-#. @context: Singular collection count label
-#. @context: Singular collection count label
-#. @context: Singular collection count label
 #. @context: Singular collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collection"
 msgstr ""
 
@@ -412,14 +406,8 @@ msgstr ""
 msgid "Collection saved."
 msgstr ""
 
-#. @context: Plural collection count label
-#. @context: Plural collection count label
-#. @context: Plural collection count label
 #. @context: Plural collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collections"
 msgstr ""
 

package/src/i18n/locales/public/zh-Hant.po

@@ -371,14 +371,8 @@ msgstr ""
 msgid "Close menu"
 msgstr ""
 
-#. @context: Singular collection count label
-#. @context: Singular collection count label
-#. @context: Singular collection count label
 #. @context: Singular collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collection"
 msgstr ""
 
@@ -412,14 +406,8 @@ msgstr ""
 msgid "Collection saved."
 msgstr ""
 
-#. @context: Plural collection count label
-#. @context: Plural collection count label
-#. @context: Plural collection count label
 #. @context: Plural collection count label on an aggregate collection page
 #: src/ui/pages/CollectionPage.tsx
-#: src/ui/pages/CollectionsPage.tsx
-#: src/ui/shared/CollectionsManager.tsx
-#: src/ui/shared/CollectionsManager.tsx
 msgid "collections"
 msgstr ""