@jant/core 0.3.35 → 0.3.37

package/src/client/media-metadata.ts

@@ -0,0 +1,247 @@
+/**
+ * Client-side Media Metadata Extraction
+ *
+ * Extracts dimensions and blurhash from image/video files using
+ * Canvas API and the blurhash library.
+ */
+
+import { encode } from "blurhash";
+
+export interface MediaMetadata {
+  width?: number;
+  height?: number;
+  blurhash?: string;
+  waveform?: string;
+  poster?: Blob;
+}
+
+/**
+ * Extract metadata (width, height, blurhash) from an image file.
+ * Uses a small canvas (max 32px) for blurhash computation.
+ */
+export async function extractImageMetadata(
+  file: File,
+): Promise<{ width: number; height: number; blurhash: string }> {
+  const img = await loadImage(file);
+  const { width, height } = img;
+
+  // Scale down for blurhash — max 32px on the longest side
+  const scale = Math.min(32 / width, 32 / height, 1);
+  const bw = Math.max(Math.round(width * scale), 1);
+  const bh = Math.max(Math.round(height * scale), 1);
+
+  const canvas = document.createElement("canvas");
+  canvas.width = bw;
+  canvas.height = bh;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Failed to get canvas context");
+  ctx.drawImage(img, 0, 0, bw, bh);
+
+  const imageData = ctx.getImageData(0, 0, bw, bh);
+  const blurhash = encode(imageData.data, bw, bh, 4, 3);
+
+  return { width, height, blurhash };
+}
+
+/**
+ * Extract metadata from a video file.
+ * Loads the video to get dimensions, then seeks to `min(duration * 0.1, 3)` and
+ * captures a frame for blurhash (32px canvas) and a poster image (640px WebP).
+ * Uses an 8s timeout — returns only dimensions if capture times out.
+ */
+export async function extractVideoMetadata(file: File): Promise<{
+  width: number;
+  height: number;
+  blurhash?: string;
+  poster?: Blob;
+}> {
+  const url = URL.createObjectURL(file);
+  try {
+    const video = document.createElement("video");
+    video.muted = true;
+    video.preload = "auto";
+
+    // Wait for metadata to load (includes duration)
+    const { width, height, duration } = await new Promise<{
+      width: number;
+      height: number;
+      duration: number;
+    }>((resolve, reject) => {
+      video.onloadedmetadata = () =>
+        resolve({
+          width: video.videoWidth,
+          height: video.videoHeight,
+          duration: video.duration,
+        });
+      video.onerror = () => reject(new Error("Failed to load video metadata"));
+      video.src = url;
+    });
+
+    // Try to capture frame for blurhash + poster (8s timeout)
+    let blurhash: string | undefined;
+    let poster: Blob | undefined;
+    try {
+      const seekTime = Math.min(duration * 0.1, 3);
+      const result = await Promise.race([
+        captureVideoFrameAndPoster(video, width, height, seekTime),
+        timeout(8000),
+      ]);
+      blurhash = result.blurhash;
+      poster = result.poster;
+    } catch {
+      // Timeout or capture failed — return dimensions only
+    }
+
+    return { width, height, blurhash, poster };
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+/**
+ * Extract waveform peak amplitudes from an audio file.
+ * Decodes via Web Audio API and returns a JSON string of ~100 normalized peak values (0–1).
+ *
+ * @param file - Audio file to extract peaks from
+ * @returns JSON string of peak values, e.g. "[0.2,0.8,0.5,...]"
+ */
+export async function extractAudioWaveform(file: File): Promise<string> {
+  const buffer = await file.arrayBuffer();
+  const audioCtx = new AudioContext();
+
+  try {
+    const decoded = await audioCtx.decodeAudioData(buffer);
+    const raw = decoded.getChannelData(0);
+    const count = 100;
+    const step = Math.max(1, Math.floor(raw.length / count));
+    const peaks: number[] = new Array(count);
+
+    for (let i = 0; i < count; i++) {
+      let max = 0;
+      const start = i * step;
+      const end = Math.min(start + step, raw.length);
+      for (let j = start; j < end; j++) {
+        const v = Math.abs(raw[j]);
+        if (v > max) max = v;
+      }
+      peaks[i] = max;
+    }
+
+    let maxPeak = 0;
+    for (const p of peaks) if (p > maxPeak) maxPeak = p;
+    if (maxPeak > 0) {
+      for (let i = 0; i < count; i++)
+        peaks[i] = Math.round((peaks[i] / maxPeak) * 100) / 100;
+    }
+
+    return JSON.stringify(peaks);
+  } finally {
+    await audioCtx.close();
+  }
+}
+
+/**
+ * Extract metadata from any media file based on MIME type.
+ */
+export async function extractMediaMetadata(file: File): Promise<MediaMetadata> {
+  try {
+    if (file.type.startsWith("image/")) {
+      return await extractImageMetadata(file);
+    }
+    if (file.type.startsWith("video/")) {
+      const result = await extractVideoMetadata(file);
+      return {
+        width: result.width,
+        height: result.height,
+        blurhash: result.blurhash,
+        poster: result.poster,
+      };
+    }
+    if (file.type.startsWith("audio/")) {
+      const waveform = await extractAudioWaveform(file);
+      return { waveform };
+    }
+  } catch {
+    // Extraction failed — return empty metadata
+  }
+  return {};
+}
+
+// --- Helpers ---
+
+function loadImage(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = url;
+  });
+}
+
+function captureVideoFrameAndPoster(
+  video: HTMLVideoElement,
+  width: number,
+  height: number,
+  seekTime: number,
+): Promise<{ blurhash: string; poster?: Blob }> {
+  return new Promise((resolve, reject) => {
+    video.currentTime = seekTime;
+    video.onseeked = () => {
+      try {
+        // Blurhash: small 32px canvas
+        const scale = Math.min(32 / width, 32 / height, 1);
+        const bw = Math.max(Math.round(width * scale), 1);
+        const bh = Math.max(Math.round(height * scale), 1);
+
+        const bhCanvas = document.createElement("canvas");
+        bhCanvas.width = bw;
+        bhCanvas.height = bh;
+        const bhCtx = bhCanvas.getContext("2d");
+        if (!bhCtx) throw new Error("Failed to get canvas context");
+        bhCtx.drawImage(video, 0, 0, bw, bh);
+
+        const imageData = bhCtx.getImageData(0, 0, bw, bh);
+        const blurhash = encode(imageData.data, bw, bh, 4, 3);
+
+        // Poster: 640px wide WebP
+        const posterScale = Math.min(640 / width, 1);
+        const pw = Math.round(width * posterScale);
+        const ph = Math.round(height * posterScale);
+
+        const posterCanvas = document.createElement("canvas");
+        posterCanvas.width = pw;
+        posterCanvas.height = ph;
+        const pCtx = posterCanvas.getContext("2d");
+        if (!pCtx) {
+          resolve({ blurhash });
+          return;
+        }
+        pCtx.drawImage(video, 0, 0, pw, ph);
+
+        posterCanvas.toBlob(
+          (blob) => {
+            resolve({ blurhash, poster: blob ?? undefined });
+          },
+          "image/webp",
+          0.8,
+        );
+      } catch (err) {
+        reject(err);
+      }
+    };
+    video.onerror = () => reject(new Error("Video seek failed"));
+  });
+}
+
+function timeout(ms: number): Promise<never> {
+  return new Promise((_, reject) =>
+    setTimeout(() => reject(new Error("Timeout")), ms),
+  );
+}

package/src/client/multipart-upload.ts

@@ -0,0 +1,160 @@
+/**
+ * Client-side Multipart Upload Helper
+ *
+ * Transparently handles chunked uploads for files that exceed the
+ * Cloudflare Workers 100MB request body limit. Used by compose-bridge
+ * when a file is larger than MULTIPART_THRESHOLD.
+ */
+
+/** Files at or above this size use multipart upload (95MB, below 100MB Worker limit) */
+export const MULTIPART_THRESHOLD = 95 * 1024 * 1024;
+
+/** Size of each upload chunk (50MB) */
+const CHUNK_SIZE = 50 * 1024 * 1024;
+
+export interface MultipartUploadResult {
+  id: string;
+  filename: string;
+  url: string;
+  mimeType: string;
+  size: number;
+}
+
+export interface MultipartUploadOptions {
+  file: File;
+  metadata: {
+    width?: number;
+    height?: number;
+    blurhash?: string;
+    waveform?: string;
+    poster?: Blob;
+  };
+  onProgress?: (progress: number) => void;
+}
+
+/**
+ * Upload a large file using the multipart upload protocol.
+ *
+ * @param options - File, metadata, and optional progress callback
+ * @returns The uploaded media record
+ * @throws Error if any step of the upload fails
+ */
+export async function uploadMultipart(
+  options: MultipartUploadOptions,
+): Promise<MultipartUploadResult> {
+  const { file, metadata, onProgress } = options;
+
+  // 1. Initiate the multipart upload
+  const initRes = await fetch("/api/upload/multipart", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      filename: file.name,
+      contentType: file.type,
+      size: file.size,
+    }),
+  });
+
+  if (!initRes.ok) {
+    const data = await initRes.json();
+    throw new Error(data.error ?? "Failed to start upload");
+  }
+
+  const { id, uploadId, storageKey, filename, originalName } =
+    (await initRes.json()) as {
+      id: string;
+      uploadId: string;
+      storageKey: string;
+      filename: string;
+      originalName: string;
+    };
+
+  try {
+    // 2. Upload poster if present (small file, single request)
+    let posterKey: string | undefined;
+    if (metadata.poster) {
+      const posterForm = new FormData();
+      posterForm.append("poster", metadata.poster, "poster.webp");
+
+      const posterRes = await fetch(`/api/upload/multipart/${id}/poster`, {
+        method: "PUT",
+        body: posterForm,
+      });
+
+      if (!posterRes.ok) {
+        throw new Error("Failed to upload poster");
+      }
+
+      const posterData = (await posterRes.json()) as { posterKey: string };
+      posterKey = posterData.posterKey;
+    }
+
+    // 3. Slice file into chunks and upload each part
+    const totalSize = file.size;
+    const totalParts = Math.ceil(totalSize / CHUNK_SIZE);
+    const parts: { partNumber: number; etag: string }[] = [];
+    let uploadedBytes = 0;
+
+    for (let i = 0; i < totalParts; i++) {
+      const start = i * CHUNK_SIZE;
+      const end = Math.min(start + CHUNK_SIZE, totalSize);
+      const chunk = file.slice(start, end);
+      const partNumber = i + 1;
+
+      const partRes = await fetch(
+        `/api/upload/multipart/${id}/part?partNumber=${partNumber}&storageKey=${encodeURIComponent(storageKey)}&uploadId=${encodeURIComponent(uploadId)}`,
+        {
+          method: "PUT",
+          body: chunk,
+        },
+      );
+
+      if (!partRes.ok) {
+        throw new Error(`Failed to upload part ${partNumber}`);
+      }
+
+      const partData = (await partRes.json()) as {
+        partNumber: number;
+        etag: string;
+      };
+      parts.push(partData);
+
+      uploadedBytes += end - start;
+      onProgress?.(uploadedBytes / totalSize);
+    }
+
+    // 4. Complete the multipart upload — send all metadata for DB record
+    const completeRes = await fetch(`/api/upload/multipart/${id}/complete`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        storageKey,
+        uploadId,
+        parts,
+        filename,
+        originalName,
+        contentType: file.type,
+        size: file.size,
+        width: metadata.width,
+        height: metadata.height,
+        blurhash: metadata.blurhash,
+        waveform: metadata.waveform,
+        posterKey,
+      }),
+    });
+
+    if (!completeRes.ok) {
+      throw new Error("Failed to complete upload");
+    }
+
+    return (await completeRes.json()) as MultipartUploadResult;
+  } catch (err) {
+    // Abort on any failure — fire-and-forget cleanup
+    fetch(`/api/upload/multipart/${id}/abort`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ storageKey, uploadId }),
+    }).catch(() => {});
+    throw err;
+  }
+}

package/src/{lib → client}/nav-manager-bridge.ts

@@ -9,7 +9,7 @@
 import type {
   NavManagerUpdateDetail,
   NavManagerDeleteDetail,
-} from "../ui/components/nav-manager-types.js";
+} from "./components/nav-manager-types.js";
 import { showToast } from "./toast.js";
 
 document.addEventListener("jant:nav-update", async (event: Event) => {

package/src/{lib → client}/post-form-bridge.ts

@@ -6,8 +6,11 @@
  * - `jant:post-load-media` → fetch media picker HTML and manage selections
  */
 
-import type { PostSubmitDetail } from "../ui/components/post-form-types.js";
-import type { JantPostForm } from "../ui/components/jant-post-form.js";
+import type {
+  PostSubmitDetail,
+  PostFormLabels,
+} from "./components/post-form-types.js";
+import type { JantPostForm } from "./components/jant-post-form.js";
 import { showToast } from "./toast.js";
 
 function findPostForm(
@@ -57,16 +60,64 @@ async function handlePostSubmit(event: Event) {
       } catch {
         // Ignore JSON parse failure; keep fallback message.
       }
+
+      // Auto-save as draft when a new publish fails
+      if (detail.data.status === "published" && !detail.isEdit) {
+        try {
+          const retryRes = await fetch(detail.endpoint, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+            body: JSON.stringify({ ...detail.data, status: "draft" }),
+          });
+
+          if (retryRes.ok) {
+            const retryJson = await retryRes.json();
+            const labelsAttr = formEl.getAttribute("labels");
+            let fallbackMsg = "Couldn't publish. Saved as draft.";
+            if (labelsAttr) {
+              try {
+                const parsed = JSON.parse(
+                  labelsAttr,
+                ) as Partial<PostFormLabels>;
+                if (parsed.draftFallbackMessage)
+                  fallbackMsg = parsed.draftFallbackMessage;
+              } catch {
+                // Ignore parse failure; use default message
+              }
+            }
+            showToast(fallbackMsg);
+
+            if (
+              retryJson?.status === "redirect" &&
+              typeof retryJson.url === "string"
+            ) {
+              formEl.clearDirty();
+              window.location.href = retryJson.url;
+              return;
+            }
+            formEl.clearDirty();
+            return;
+          }
+        } catch {
+          // Retry failed — fall through to show original error
+        }
+      }
+
       throw new Error(message);
     }
 
     const json = await res.json();
 
     if (json?.status === "redirect" && typeof json.url === "string") {
+      formEl.clearDirty();
       window.location.href = json.url;
       return;
     }
 
+    formEl.clearDirty();
     showToast(detail.messages.success);
   } catch (err) {
     const message =

package/src/{lib → client}/settings-bridge.ts

@@ -9,18 +9,11 @@
 import type {
   SettingsSaveDetail,
   AvatarRemoveDetail,
-} from "../ui/components/settings-types.js";
-import type { JantSettingsGeneral } from "../ui/components/jant-settings-general.js";
-import type { JantSettingsAvatar } from "../ui/components/jant-settings-avatar.js";
+} from "./components/settings-types.js";
+import type { JantSettingsGeneral } from "./components/jant-settings-general.js";
+import type { JantSettingsAvatar } from "./components/jant-settings-avatar.js";
 import { showToast } from "./toast.js";
 
-function updateSidebarSiteName(siteName: string) {
-  const el = document.getElementById("site-name");
-  if (el) el.textContent = siteName;
-  const titleEl = document.querySelector("title");
-  if (titleEl) titleEl.textContent = `Settings - ${siteName}`;
-}
-
 // ── Settings save handler ───────────────────────────────────────────
 
 document.addEventListener("jant:settings-save", async (e: Event) => {
@@ -59,11 +52,6 @@ document.addEventListener("jant:settings-save", async (e: Event) => {
       showToast(json.toast);
     }
 
-    // Update sidebar site name when general settings are saved
-    if (section === "general" && json.siteName) {
-      updateSidebarSiteName(json.siteName);
-    }
-
     // Notify the component that save succeeded
     if (section === "avatar-display") {
       avatarEl?.saved();

package/src/client/thread-context.ts

@@ -0,0 +1,140 @@
+/**
+ * Thread Context Interactions
+ *
+ * 1. Expand/collapse faded ancestor context via toggle button
+ * 2. Auto-scroll to current post on thread detail pages
+ */
+
+function parsePixelValue(value: string, fallback: number): number {
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function getCollapsedMaxHeight(container: HTMLElement): number {
+  const value = getComputedStyle(container).getPropertyValue(
+    "--site-thread-context-max-height",
+  );
+  return parsePixelValue(value, 188);
+}
+
+function getPendingImages(container: HTMLElement): HTMLImageElement[] {
+  return Array.from(container.querySelectorAll("img")).filter(
+    (image) => !image.complete,
+  );
+}
+
+function waitForContentToSettle(
+  container: HTMLElement,
+  callback: () => void,
+): void {
+  const pendingImages = getPendingImages(container);
+  if (pendingImages.length === 0) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(callback);
+    });
+    return;
+  }
+
+  let remaining = pendingImages.length;
+  const handleDone = (): void => {
+    remaining -= 1;
+    if (remaining === 0) {
+      callback();
+    }
+  };
+
+  pendingImages.forEach((image) => {
+    image.addEventListener("load", handleDone, { once: true });
+    image.addEventListener("error", handleDone, { once: true });
+  });
+}
+
+function updateThreadContextState(
+  container: HTMLElement,
+  toggle: HTMLElement,
+  allowExpand: boolean,
+): void {
+  const collapsedMaxHeight = getCollapsedMaxHeight(container);
+  const isExpanded = container.classList.contains("expanded");
+  const overflows = container.scrollHeight > collapsedMaxHeight + 1;
+  const showMoreLabel = toggle.dataset.labelMore ?? "Show more";
+  const showLessLabel = toggle.dataset.labelLess ?? "Show less";
+
+  if (!overflows) {
+    if (allowExpand) {
+      container.classList.remove(
+        "thread-context-collapsed",
+        "thread-context-faded",
+        "expanded",
+      );
+    } else {
+      container.classList.add("thread-context-collapsed");
+      container.classList.remove("thread-context-faded", "expanded");
+    }
+    toggle.classList.add("hidden");
+    toggle.textContent = showMoreLabel;
+    toggle.setAttribute("aria-expanded", "false");
+    return;
+  }
+
+  container.classList.add("thread-context-collapsed");
+  container.classList.add("thread-context-faded");
+  toggle.classList.remove("hidden");
+  toggle.textContent = isExpanded ? showLessLabel : showMoreLabel;
+  toggle.setAttribute("aria-expanded", isExpanded ? "true" : "false");
+}
+
+function setupThreadContext(group: HTMLElement): void {
+  const container = group.querySelector<HTMLElement>("[data-thread-context]");
+  const toggle = group.querySelector<HTMLElement>(
+    "[data-thread-context-toggle]",
+  );
+  if (!container || !toggle) return;
+
+  let allowExpand = false;
+  updateThreadContextState(container, toggle, allowExpand);
+
+  waitForContentToSettle(container, () => {
+    allowExpand = true;
+    updateThreadContextState(container, toggle, allowExpand);
+  });
+
+  if ("ResizeObserver" in globalThis) {
+    const observer = new globalThis.ResizeObserver(() => {
+      updateThreadContextState(container, toggle, allowExpand);
+    });
+    observer.observe(container);
+  }
+}
+
+// Expand/collapse: event delegation on toggle buttons
+document.addEventListener("click", (e) => {
+  const toggle = (e.target as HTMLElement).closest<HTMLElement>(
+    "[data-thread-context-toggle]",
+  );
+  if (!toggle) return;
+
+  const container = toggle
+    .closest(".thread-group")
+    ?.querySelector<HTMLElement>("[data-thread-context]");
+  if (!container) return;
+
+  container.classList.toggle("expanded");
+  updateThreadContextState(container, toggle, true);
+});
+
+// Auto-scroll to current post on detail pages
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".thread-group").forEach((group) => {
+    if (group instanceof HTMLElement) {
+      setupThreadContext(group);
+    }
+  });
+
+  const current = document.querySelector("[data-post-current]");
+  if (!current) return;
+
+  requestAnimationFrame(() => {
+    current.scrollIntoView({ behavior: "smooth", block: "center" });
+  });
+});