@jant/core 0.3.36 → 0.3.37

package/src/client/toast.ts

@@ -5,6 +5,13 @@
  * Appends a temporary notification to `#toast-container`.
  */
 
+/** Ensure the toast container is in the top layer (above <dialog> etc.) */
+function ensureTopLayer(container: HTMLElement): void {
+  if (!container.matches(":popover-open")) {
+    container.showPopover();
+  }
+}
+
 const TOAST_ICONS = {
   success:
     '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
@@ -12,6 +19,26 @@ const TOAST_ICONS = {
     '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>',
 };
 
+/** Build toast inner content using safe DOM APIs (icon is trusted, text uses textContent). */
+function setToastContent(
+  toast: HTMLElement,
+  type: "success" | "error",
+  message: string,
+  action?: { label: string; href: string },
+): void {
+  toast.innerHTML = TOAST_ICONS[type];
+  const span = document.createElement("span");
+  span.textContent = message;
+  toast.appendChild(span);
+  if (action) {
+    const a = document.createElement("a");
+    a.href = action.href;
+    a.className = "toast-action";
+    a.textContent = action.label;
+    toast.appendChild(a);
+  }
+}
+
 /**
  * Show a toast notification.
  *
@@ -31,9 +58,44 @@ export function showToast(
   const container = document.getElementById("toast-container");
   if (!container) return;
 
+  ensureTopLayer(container);
+
   const toast = document.createElement("div");
   toast.className = `toast toast-${type}`;
-  toast.innerHTML = `${TOAST_ICONS[type]}<span>${message}</span>`;
+  setToastContent(toast, type, message);
+  container.appendChild(toast);
+
+  setTimeout(() => {
+    toast.classList.add("toast-out");
+    toast.addEventListener("animationend", () => toast.remove());
+  }, 3000);
+}
+
+/**
+ * Show a toast with an action link.
+ *
+ * @param message - Text to display
+ * @param action - Action link with label and href
+ * @param type - Visual style: "success" (default) or "error"
+ *
+ * @example
+ * showToastWithAction("Post published.", { label: "View", href: "/p/abc" });
+ */
+export function showToastWithAction(
+  message: string,
+  action: { label: string; href: string },
+  type: "success" | "error" = "success",
+): void {
+  if (!message) return;
+
+  const container = document.getElementById("toast-container");
+  if (!container) return;
+
+  ensureTopLayer(container);
+
+  const toast = document.createElement("div");
+  toast.className = `toast toast-${type}`;
+  setToastContent(toast, type, message, action);
   container.appendChild(toast);
 
   setTimeout(() => {
@@ -61,10 +123,12 @@ export function showPersistentToast(
   const container = document.getElementById("toast-container");
   if (!container) return null;
 
+  ensureTopLayer(container);
+
   const toast = document.createElement("div");
   toast.className = `toast toast-${type}`;
   toast.id = `toast-${id}`;
-  toast.innerHTML = `${TOAST_ICONS[type]}<span>${message}</span>`;
+  setToastContent(toast, type, message);
   container.appendChild(toast);
 
   return toast;
@@ -125,7 +189,41 @@ export function replaceWithAutoClose(
   }
 
   toast.className = `toast toast-${type}`;
-  toast.innerHTML = `${TOAST_ICONS[type]}<span>${message}</span>`;
+  toast.replaceChildren();
+  setToastContent(toast, type, message);
+
+  setTimeout(() => {
+    toast.classList.add("toast-out");
+    toast.addEventListener("animationend", () => toast.remove());
+  }, 3000);
+}
+
+/**
+ * Replace a persistent toast with an auto-dismissing one that has an action link.
+ *
+ * @param id - The toast identifier
+ * @param message - New message text
+ * @param action - Action link with label and href
+ * @param type - Visual style: "success" (default) or "error"
+ *
+ * @example
+ * replaceWithAutoCloseAction("upload", "Post published.", { label: "View", href: "/p/abc" });
+ */
+export function replaceWithAutoCloseAction(
+  id: string,
+  message: string,
+  action: { label: string; href: string },
+  type: "success" | "error" = "success",
+): void {
+  const toast = document.getElementById(`toast-${id}`);
+  if (!toast) {
+    showToastWithAction(message, action, type);
+    return;
+  }
+
+  toast.className = `toast toast-${type}`;
+  toast.replaceChildren();
+  setToastContent(toast, type, message, action);
 
   setTimeout(() => {
     toast.classList.add("toast-out");

package/src/client/types/sortablejs.d.ts

@@ -13,8 +13,23 @@ declare module "sortablejs" {
 
   interface SortableOptions {
     animation?: number;
+    bubbleScroll?: boolean;
+    chosenClass?: string;
+    direction?: "horizontal" | "vertical";
+    dragClass?: string;
+    fallbackTolerance?: number;
+    filter?: string;
+    forceAutoScrollFallback?: boolean;
+    ghostClass?: string;
     handle?: string;
+    onChoose?: (event: SortableEvent) => void;
+    onStart?: (event: SortableEvent) => void;
+    onUnchoose?: (event: SortableEvent) => void;
     onEnd?: (event: SortableEvent) => void;
+    preventOnFilter?: boolean;
+    scroll?: boolean | HTMLElement;
+    scrollSensitivity?: number;
+    scrollSpeed?: number;
   }
 
   interface SortableInstance {

package/src/client/upload-with-metadata.ts

@@ -0,0 +1,54 @@
+/**
+ * Shared Upload Helper with Metadata
+ *
+ * Processes images via ImageProcessor, extracts dimensions + blurhash,
+ * and uploads with metadata attached to the FormData.
+ * Used by paste-image, image-node replace, and fullscreen compose.
+ */
+
+import { ImageProcessor } from "./image-processor.js";
+import { extractImageMetadata } from "./media-metadata.js";
+
+/**
+ * Process an image file and upload it with dimension/blurhash metadata.
+ *
+ * @returns The server response with url and id
+ */
+export async function uploadWithMetadata(
+  file: File,
+): Promise<{ url: string; id: string }> {
+  // Process image (resize, convert to WebP)
+  const {
+    file: processed,
+    width,
+    height,
+  } = await ImageProcessor.processToFile(file);
+
+  // Extract blurhash from the processed file
+  let blurhash: string | undefined;
+  try {
+    const meta = await extractImageMetadata(processed);
+    blurhash = meta.blurhash;
+  } catch {
+    // Blurhash extraction failed — upload without it
+  }
+
+  const formData = new FormData();
+  formData.append("file", processed);
+  formData.append("width", String(width));
+  formData.append("height", String(height));
+  if (blurhash) {
+    formData.append("blurhash", blurhash);
+  }
+
+  const response = await fetch("/api/upload", {
+    method: "POST",
+    body: formData,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Upload failed: ${response.status}`);
+  }
+
+  return (await response.json()) as { url: string; id: string };
+}

package/src/client/video-processor.ts

@@ -0,0 +1,207 @@
+/**
+ * Client-side Video Processor
+ *
+ * Processes videos before upload using mediabunny:
+ * - Transcodes to H.264/AAC MP4 (universal playback)
+ * - Resizes to max 1920×1080
+ * - Extracts poster frame + blurhash during processing
+ *
+ * Requires WebCodecs API support — check `isSupported()` before use.
+ */
+
+import {
+  Input,
+  Output,
+  Mp4OutputFormat,
+  BufferTarget,
+  BlobSource,
+  CanvasSink,
+  Conversion,
+  QUALITY_HIGH,
+  ALL_FORMATS,
+} from "mediabunny";
+import { encode } from "blurhash";
+
+const MAX_WIDTH = 1920;
+const MAX_HEIGHT = 1080;
+const POSTER_WIDTH = 640;
+const BLURHASH_SIZE = 32;
+
+export interface VideoProcessResult {
+  file: File;
+  width: number;
+  height: number;
+  poster?: Blob;
+  blurhash?: string;
+}
+
+/**
+ * Check if the browser supports WebCodecs-based video processing.
+ *
+ * @returns `true` if `VideoEncoder` is available in the current environment
+ */
+function isSupported(): boolean {
+  return typeof VideoEncoder !== "undefined";
+}
+
+/**
+ * Extract a poster frame, blurhash, and source dimensions from a video file.
+ * Seeks to `min(duration × 0.1, 3s)` and captures the frame.
+ * Also returns the original video dimensions so the caller can compute
+ * the correct output size without opening a second Input instance.
+ *
+ * @param file - Source video file
+ * @returns Poster blob (640px-wide WebP), blurhash string, and source dimensions
+ */
+async function extractPoster(file: File): Promise<{
+  poster?: Blob;
+  blurhash?: string;
+  sourceWidth?: number;
+  sourceHeight?: number;
+}> {
+  const input = new Input({
+    source: new BlobSource(file),
+    formats: ALL_FORMATS,
+  });
+  try {
+    const videoTrack = await input.getPrimaryVideoTrack();
+    if (!videoTrack) return {};
+
+    const sourceWidth = videoTrack.displayWidth;
+    const sourceHeight = videoTrack.displayHeight;
+
+    const duration = await input.computeDuration();
+    const seekTime = Math.min(duration * 0.1, 3);
+
+    const sink = new CanvasSink(videoTrack);
+    const wrapped = await sink.getCanvas(seekTime);
+    if (!wrapped) return { sourceWidth, sourceHeight };
+
+    const canvas = wrapped.canvas as HTMLCanvasElement;
+
+    // Poster: 640px wide WebP
+    const srcW = canvas.width;
+    const srcH = canvas.height;
+    const posterScale = Math.min(POSTER_WIDTH / srcW, 1);
+    const pw = Math.round(srcW * posterScale);
+    const ph = Math.round(srcH * posterScale);
+
+    const posterCanvas = document.createElement("canvas");
+    posterCanvas.width = pw;
+    posterCanvas.height = ph;
+    const pCtx = posterCanvas.getContext("2d");
+    if (!pCtx) return { sourceWidth, sourceHeight };
+    pCtx.drawImage(canvas, 0, 0, pw, ph);
+
+    const poster = await new Promise<Blob | undefined>((resolve) => {
+      posterCanvas.toBlob(
+        (blob) => resolve(blob ?? undefined),
+        "image/webp",
+        0.8,
+      );
+    });
+
+    // Blurhash: 32px canvas, 4×3 components
+    const bhScale = Math.min(BLURHASH_SIZE / srcW, BLURHASH_SIZE / srcH, 1);
+    const bw = Math.max(Math.round(srcW * bhScale), 1);
+    const bh = Math.max(Math.round(srcH * bhScale), 1);
+
+    const bhCanvas = document.createElement("canvas");
+    bhCanvas.width = bw;
+    bhCanvas.height = bh;
+    const bhCtx = bhCanvas.getContext("2d");
+    if (!bhCtx) return { poster, sourceWidth, sourceHeight };
+    bhCtx.drawImage(canvas, 0, 0, bw, bh);
+
+    const imageData = bhCtx.getImageData(0, 0, bw, bh);
+    const blurhash = encode(imageData.data, bw, bh, 4, 3);
+
+    return { poster, blurhash, sourceWidth, sourceHeight };
+  } catch {
+    return {};
+  } finally {
+    input.dispose();
+  }
+}
+
+/**
+ * Process a video file: transcode to H.264/AAC MP4, resize to fit within
+ * 1920×1080, and extract poster frame + blurhash.
+ *
+ * @param file - Source video file
+ * @param onProgress - Optional callback receiving progress from 0 to 1
+ * @returns Processed MP4 file with dimensions, poster, and blurhash
+ */
+async function processToFile(
+  file: File,
+  onProgress?: (progress: number) => void,
+): Promise<VideoProcessResult> {
+  // Extract poster + blurhash + source dimensions (separate Input instance,
+  // so the transcoding Input below starts with clean demuxer state).
+  const { poster, blurhash, sourceWidth, sourceHeight } =
+    await extractPoster(file);
+
+  // Compute output size preserving the original aspect ratio
+  let width = MAX_WIDTH;
+  let height = MAX_HEIGHT;
+  if (sourceWidth && sourceHeight) {
+    const scale = Math.min(
+      MAX_WIDTH / sourceWidth,
+      MAX_HEIGHT / sourceHeight,
+      1,
+    );
+    width = Math.round(sourceWidth * scale);
+    height = Math.round(sourceHeight * scale);
+  }
+  // H.264 requires even dimensions
+  width += width % 2;
+  height += height % 2;
+
+  // Transcode to MP4 H.264/AAC (fresh Input — not shared with extractPoster)
+  const input = new Input({
+    source: new BlobSource(file),
+    formats: ALL_FORMATS,
+  });
+  const target = new BufferTarget();
+  const output = new Output({
+    format: new Mp4OutputFormat({ fastStart: "in-memory" }),
+    target,
+  });
+
+  try {
+    const conversion = await Conversion.init({
+      input,
+      output,
+      video: {
+        codec: "avc",
+        width,
+        height,
+        fit: "contain",
+        bitrate: QUALITY_HIGH,
+      },
+      audio: {
+        codec: "aac",
+      },
+    });
+
+    if (onProgress) {
+      conversion.onProgress = onProgress;
+    }
+
+    await conversion.execute();
+
+    const buffer = target.buffer;
+    if (!buffer) throw new Error("Video processing produced no output");
+
+    const originalName = file.name.replace(/\.[^.]+$/, "");
+    const mp4File = new File([buffer], `${originalName}.mp4`, {
+      type: "video/mp4",
+    });
+
+    return { file: mp4File, width, height, poster, blurhash };
+  } finally {
+    input.dispose();
+  }
+}
+
+export const VideoProcessor = { isSupported, processToFile };

package/src/client.ts

@@ -10,7 +10,6 @@
 import "./vendor/datastar.js";
 import "basecoat-css/all";
 import "./client/image-processor.js";
-import "./client/media-upload.js";
 import "./client/avatar-upload.js";
 
 // Lit Web Components (and their bridge modules)
@@ -30,7 +29,11 @@ import "./client/components/jant-collection-sidebar.js";
 import "./client/collection-form-bridge.js";
 import "./client/components/jant-post-form.js";
 import "./client/post-form-bridge.js";
-import "./client/page-slug-bridge.js";
 import "./client/components/jant-nav-manager.js";
 import "./client/nav-manager-bridge.js";
+import "./client/audio-player.js";
 import "./client/components/jant-media-lightbox.js";
+import "./client/components/jant-text-preview.js";
+import "./client/components/jant-post-menu.js";
+import "./client/thread-context.js";
+import "./client/archive-nav.js";

package/src/db/__tests__/migrations.test.ts

@@ -0,0 +1,118 @@
+/**
+ * Migration Integrity Tests
+ *
+ * Ensures every migration SQL file is tracked in the Drizzle journal.
+ * Hand-written migrations bypass drizzle-kit and won't have journal entries,
+ * which breaks `drizzle-kit generate` for future schema changes.
+ *
+ * Fix: always run `mise run db-generate` instead of writing SQL by hand.
+ */
+
+import { describe, it, expect } from "vitest";
+import { readdirSync, readFileSync } from "fs";
+import { resolve } from "path";
+
+const MIGRATIONS_DIR = resolve(import.meta.dirname, "../migrations");
+const JOURNAL_PATH = resolve(MIGRATIONS_DIR, "meta/_journal.json");
+
+interface JournalEntry {
+  idx: number;
+  version: string;
+  when: number;
+  tag: string;
+  breakpoints: boolean;
+}
+
+interface Journal {
+  version: string;
+  dialect: string;
+  entries: JournalEntry[];
+}
+
+function readJournal(): Journal {
+  return JSON.parse(readFileSync(JOURNAL_PATH, "utf-8"));
+}
+
+function listMigrationFiles(): string[] {
+  return readdirSync(MIGRATIONS_DIR)
+    .filter((f) => f.endsWith(".sql"))
+    .sort();
+}
+
+describe("migration integrity", () => {
+  it("every SQL file has a corresponding journal entry", () => {
+    const journal = readJournal();
+    const tags = new Set(journal.entries.map((e) => e.tag));
+    const sqlFiles = listMigrationFiles();
+
+    const untracked = sqlFiles
+      .map((f) => f.replace(".sql", ""))
+      .filter((tag) => !tags.has(tag));
+
+    expect(
+      untracked,
+      [
+        "These migration files are not tracked in meta/_journal.json.",
+        "This usually means they were hand-written instead of generated with `mise run db-generate`.",
+        "Fix: update src/db/schema.ts first, then run `mise run db-generate`.",
+        `Untracked files: ${untracked.map((t) => `${t}.sql`).join(", ")}`,
+      ].join("\n"),
+    ).toEqual([]);
+  });
+
+  it("every journal entry has a corresponding SQL file", () => {
+    const journal = readJournal();
+    const sqlFiles = new Set(
+      listMigrationFiles().map((f) => f.replace(".sql", "")),
+    );
+
+    const missing = journal.entries
+      .map((e) => e.tag)
+      .filter((tag) => !sqlFiles.has(tag));
+
+    expect(
+      missing,
+      [
+        "These journal entries have no matching SQL file.",
+        `Missing files: ${missing.map((t) => `${t}.sql`).join(", ")}`,
+      ].join("\n"),
+    ).toEqual([]);
+  });
+
+  it("journal entries have sequential idx values", () => {
+    const journal = readJournal();
+    for (let i = 0; i < journal.entries.length; i++) {
+      const entry = journal.entries[i];
+      if (entry) expect(entry.idx).toBe(i);
+    }
+  });
+
+  it("latest migration has a snapshot file", () => {
+    const journal = readJournal();
+    const lastEntry = journal.entries[journal.entries.length - 1];
+    if (!lastEntry) return;
+
+    const prefix = lastEntry.tag.split("_")[0];
+    const snapshotPath = resolve(
+      MIGRATIONS_DIR,
+      `meta/${prefix}_snapshot.json`,
+    );
+
+    let exists = false;
+    try {
+      readFileSync(snapshotPath);
+      exists = true;
+    } catch {
+      // file doesn't exist
+    }
+
+    expect(
+      exists,
+      [
+        `Missing snapshot for latest migration: meta/${prefix}_snapshot.json`,
+        "This means the migration was not generated by drizzle-kit.",
+        "Fix: run `mise run db-generate` to regenerate it properly.",
+      ].join("\n"),
+    ).toBe(true);
+  });
+});

package/src/db/index.ts

@@ -12,3 +12,55 @@ export function createDatabase(d1: D1Database) {
 }
 
 export { schema };
+
+/**
+ * D1 enforces a lower SQL variable limit than standard SQLite (~999).
+ * Keep batch size well under the limit to leave room for other
+ * query parameters besides the IN-list.
+ */
+const BATCH_SIZE = 50;
+
+/**
+ * Run a query function in batches to avoid SQLite's variable limit.
+ * Splits `items` into chunks, calls `fn` for each chunk, and merges
+ * the resulting Maps.
+ *
+ * @param items - Array of IDs to batch
+ * @param fn - Async function that takes a chunk and returns a Map
+ * @returns Merged Map from all batches
+ */
+export async function batchQuery<K, V>(
+  items: K[],
+  fn: (chunk: K[]) => Promise<Map<K, V>>,
+): Promise<Map<K, V>> {
+  if (items.length <= BATCH_SIZE) return fn(items);
+
+  const result = new Map<K, V>();
+  for (let i = 0; i < items.length; i += BATCH_SIZE) {
+    const chunk = items.slice(i, i + BATCH_SIZE);
+    const partial = await fn(chunk);
+    for (const [k, v] of partial) {
+      result.set(k, v);
+    }
+  }
+  return result;
+}
+
+/**
+ * Like `batchQuery` but for functions that return an array of rows
+ * rather than a Map.
+ */
+export async function batchQueryRows<K, R>(
+  items: K[],
+  fn: (chunk: K[]) => Promise<R[]>,
+): Promise<R[]> {
+  if (items.length <= BATCH_SIZE) return fn(items);
+
+  const result: R[] = [];
+  for (let i = 0; i < items.length; i += BATCH_SIZE) {
+    const chunk = items.slice(i, i + BATCH_SIZE);
+    const partial = await fn(chunk);
+    result.push(...partial);
+  }
+  return result;
+}