@jant/core 0.3.27 → 0.3.28

package/src/lib/avatar-upload.ts

@@ -51,13 +51,10 @@ function resizeToSquarePng(img: HTMLImageElement, size: number): Promise<Blob> {
   ctx.drawImage(img, sx, sy, sw, sh, 0, 0, size, size);
 
   return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (blob) resolve(blob);
-        else reject(new Error("Failed to create PNG blob"));
-      },
-      "image/png",
-    );
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error("Failed to create PNG blob"));
+    }, "image/png");
   });
 }
 
@@ -84,7 +81,18 @@ async function handleAvatarUpload(
     // Load the image
     const img = await loadImage(file);
 
-    // Generate variants in parallel
+    // Resize avatar to 512x512 PNG (skip for SVG — scalable and already small)
+    let avatarFile: File | Blob = file;
+    let avatarFilename = file.name;
+    if (file.type !== "image/svg+xml") {
+      const png512 = await resizeToSquarePng(img, 512);
+      avatarFile = new File([png512], file.name.replace(/\.[^.]+$/, ".png"), {
+        type: "image/png",
+      });
+      avatarFilename = (avatarFile as File).name;
+    }
+
+    // Generate favicon variants in parallel
     const [png16, png32, png180] = await Promise.all([
       resizeToSquarePng(img, 16),
       resizeToSquarePng(img, 32),
@@ -105,9 +113,9 @@ async function handleAvatarUpload(
     if (label)
       label.textContent = input.dataset.textUploading || "Uploading...";
 
-    // Build FormData with original + variants
+    // Build FormData with resized avatar + variants
     const formData = new FormData();
-    formData.append("file", file);
+    formData.append("file", avatarFile, avatarFilename);
     formData.append("favicon", icoBlob, "favicon.ico");
     formData.append("appleTouch", png180, "apple-touch-icon.png");
 

package/src/lib/collection-form-bridge.ts

@@ -0,0 +1,52 @@
+/**
+ * Collection Form Bridge
+ *
+ * Handles communication between <jant-collection-form> and the server.
+ * Listens for `jant:collection-submit`, POSTs JSON to the endpoint, and
+ * redirects on success. Displays toasts on failure.
+ */
+
+import type { CollectionSubmitDetail } from "../ui/components/collection-types.js";
+import type { JantCollectionForm } from "../ui/components/jant-collection-form.js";
+import { showToast } from "./toast.js";
+
+document.addEventListener("jant:collection-submit", async (event: Event) => {
+  const customEvent = event as CustomEvent<CollectionSubmitDetail>;
+  const detail = customEvent.detail;
+  const formEl =
+    customEvent.target instanceof HTMLElement
+      ? (customEvent.target as JantCollectionForm)
+      : document.querySelector<JantCollectionForm>("jant-collection-form");
+
+  if (!detail?.endpoint || !formEl) return;
+
+  formEl.loading = true;
+
+  try {
+    const res = await fetch(detail.endpoint, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify(detail.data),
+    });
+
+    if (!res.ok) {
+      throw new Error(`HTTP ${res.status}`);
+    }
+
+    const json = await res.json();
+
+    if (json?.status === "redirect" && typeof json.url === "string") {
+      window.location.href = json.url;
+      return;
+    }
+
+    showToast("Saved successfully.");
+  } catch {
+    showToast("Failed to save collection. Please try again.", "error");
+  } finally {
+    formEl.loading = false;
+  }
+});

package/src/lib/collections-reorder.ts

@@ -0,0 +1,28 @@
+/**
+ * Collection Reorder
+ *
+ * Initializes SortableJS on the collections list in the dashboard.
+ * Auto-detects the list element and only activates when present.
+ * Sends prefixed string IDs (e.g. "c-1", "d-2") to support mixed
+ * collections and dividers in a unified sort order.
+ */
+
+import Sortable from "sortablejs";
+
+const list = document.getElementById("collections-list");
+if (list) {
+  Sortable.create(list, {
+    animation: 150,
+    handle: "[data-id]",
+    onEnd() {
+      const items = [...list.querySelectorAll<HTMLElement>("[data-id]")]
+        .map((el) => el.dataset.id)
+        .filter((id): id is string => id !== undefined);
+      fetch("/dash/collections/reorder", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ items }),
+      });
+    },
+  });
+}

package/src/lib/compose-bridge.ts

@@ -0,0 +1,251 @@
+/**
+ * Compose Bridge
+ *
+ * Handles server communication between the Lit compose dialog and the server.
+ * Manages file uploads, deferred submit flow, and toast notifications.
+ */
+
+import type { ComposeSubmitDetail } from "../ui/components/compose-types.js";
+import type { ComposeAttachment } from "../ui/components/compose-types.js";
+import type { JantComposeDialog } from "../ui/components/jant-compose-dialog.js";
+import type { JantComposeEditor } from "../ui/components/jant-compose-editor.js";
+import { ImageProcessor } from "./image-processor.js";
+import {
+  showToast,
+  showPersistentToast,
+  replaceWithAutoClose,
+} from "./toast.js";
+
+// ── Upload manager ──────────────────────────────────────────────────
+
+/** Track in-flight upload promises keyed by clientId */
+const uploadPromises = new Map<string, Promise<string | null>>();
+
+/**
+ * Upload a single file: process with ImageProcessor, then POST to /api/upload.
+ * Returns the mediaId on success, null on failure.
+ */
+async function uploadFile(
+  file: File,
+  clientId: string,
+  editor: JantComposeEditor | null,
+): Promise<string | null> {
+  try {
+    // Update status to uploading
+    editor?.updateAttachmentStatus(clientId, "uploading", null, null);
+
+    // Process image (resize, convert to WebP)
+    const processed = await ImageProcessor.processToFile(file);
+
+    // Upload to server
+    const formData = new FormData();
+    formData.append("file", processed);
+
+    const res = await fetch("/api/upload", {
+      method: "POST",
+      body: formData,
+    });
+
+    if (!res.ok) {
+      const data = await res.json();
+      const error = data.error ?? "Upload failed";
+      editor?.updateAttachmentStatus(clientId, "error", null, error);
+      return null;
+    }
+
+    const data = await res.json();
+    const mediaId = data.id as string;
+    editor?.updateAttachmentStatus(clientId, "done", mediaId, null);
+    return mediaId;
+  } catch {
+    editor?.updateAttachmentStatus(clientId, "error", null, "Upload failed");
+    return null;
+  }
+}
+
+function getEditor(): JantComposeEditor | null {
+  return document.querySelector("jant-compose-editor");
+}
+
+// ── File selection handler ──────────────────────────────────────────
+
+document.addEventListener("jant:files-selected", (e: Event) => {
+  const event = e as CustomEvent<{
+    files: { file: File; clientId: string }[];
+  }>;
+  const editor = getEditor();
+
+  for (const { file, clientId } of event.detail.files) {
+    const promise = uploadFile(file, clientId, editor);
+    uploadPromises.set(clientId, promise);
+    promise.finally(() => uploadPromises.delete(clientId));
+  }
+});
+
+// ── Submit handler ──────────────────────────────────────────────────
+
+document.addEventListener("jant:compose-submit", async (e: Event) => {
+  const event = e as CustomEvent<ComposeSubmitDetail>;
+  const detail = event.detail;
+  const dialog = document.getElementById(
+    "compose-dialog",
+  ) as HTMLDialogElement | null;
+  const composeEl = document.querySelector(
+    "jant-compose-dialog",
+  ) as JantComposeDialog | null;
+
+  if (!composeEl) return;
+  composeEl.loading = true;
+
+  try {
+    const res = await fetch("/compose", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        format: detail.format,
+        title: detail.title || undefined,
+        body: detail.body || undefined,
+        url: detail.url || undefined,
+        quoteText: detail.quoteText || undefined,
+        status: detail.status,
+        rating: detail.rating || undefined,
+        collectionIds:
+          detail.collectionIds.length > 0 ? detail.collectionIds : undefined,
+        mediaIds: detail.mediaIds.length > 0 ? detail.mediaIds : undefined,
+        mediaAlts:
+          Object.keys(detail.mediaAlts).length > 0
+            ? detail.mediaAlts
+            : undefined,
+      }),
+    });
+
+    if (!res.ok) {
+      const data = await res.json();
+      showToast(data.error ?? "Something went wrong", "error");
+      return;
+    }
+
+    const data = await res.json();
+
+    if (data.status === "draft") {
+      showToast(data.toast ?? "Draft saved.");
+    } else if (data.status === "published" && data.cardHtml) {
+      const timeline = document.getElementById("timeline-items");
+      if (timeline) {
+        document.getElementById("empty-timeline")?.remove();
+        timeline.insertAdjacentHTML("afterbegin", data.cardHtml);
+      }
+    }
+
+    dialog?.close();
+    // Prevent browser from restoring focus to the trigger button
+    (document.activeElement as HTMLElement)?.blur();
+    composeEl.reset();
+  } catch {
+    showToast("Something went wrong", "error");
+  } finally {
+    composeEl.loading = false;
+  }
+});
+
+// ── Deferred submit handler ─────────────────────────────────────────
+
+interface DeferredDetail extends ComposeSubmitDetail {
+  pendingAttachments: ComposeAttachment[];
+}
+
+document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
+  const event = e as CustomEvent<DeferredDetail>;
+  const detail = event.detail;
+  const composeEl = document.querySelector(
+    "jant-compose-dialog",
+  ) as JantComposeDialog | null;
+
+  // Get labels for toast messages
+  const labels = composeEl?.labels;
+  const uploadingMsg = labels?.uploading ?? "Uploading...";
+  const publishedMsg = labels?.published ?? "Published!";
+
+  // Show persistent toast
+  showPersistentToast("compose-deferred", uploadingMsg);
+
+  try {
+    // Wait for all pending uploads to complete
+    const pendingClientIds = detail.pendingAttachments.map((a) => a.clientId);
+    const pendingPromises = pendingClientIds
+      .map((id) => uploadPromises.get(id))
+      .filter((p): p is Promise<string | null> => p !== undefined);
+
+    const results = await Promise.all(pendingPromises);
+
+    // Merge newly completed mediaIds with already-done ones
+    const newMediaIds = results.filter((id): id is string => id !== null);
+    const allMediaIds = [...detail.mediaIds, ...newMediaIds];
+
+    // Merge alt text: for pending attachments that just uploaded,
+    // map their clientId → mediaId and include their alt text
+    const mediaAlts = { ...detail.mediaAlts };
+    for (const att of detail.pendingAttachments) {
+      if (att.alt) {
+        // Find the mediaId from the upload result by matching clientId position
+        const idx = pendingClientIds.indexOf(att.clientId);
+        const mediaId = results[idx];
+        if (mediaId) {
+          mediaAlts[mediaId] = att.alt;
+        }
+      }
+    }
+
+    // POST to /compose
+    const res = await fetch("/compose", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      body: JSON.stringify({
+        format: detail.format,
+        title: detail.title || undefined,
+        body: detail.body || undefined,
+        url: detail.url || undefined,
+        quoteText: detail.quoteText || undefined,
+        status: detail.status,
+        rating: detail.rating || undefined,
+        collectionIds:
+          detail.collectionIds.length > 0 ? detail.collectionIds : undefined,
+        mediaIds: allMediaIds.length > 0 ? allMediaIds : undefined,
+        mediaAlts: Object.keys(mediaAlts).length > 0 ? mediaAlts : undefined,
+      }),
+    });
+
+    if (!res.ok) {
+      const data = await res.json();
+      replaceWithAutoClose(
+        "compose-deferred",
+        data.error ?? "Something went wrong",
+        "error",
+      );
+      return;
+    }
+
+    const data = await res.json();
+
+    if (data.status === "published" && data.cardHtml) {
+      const timeline = document.getElementById("timeline-items");
+      if (timeline) {
+        document.getElementById("empty-timeline")?.remove();
+        timeline.insertAdjacentHTML("afterbegin", data.cardHtml);
+      }
+    }
+
+    replaceWithAutoClose(
+      "compose-deferred",
+      data.status === "draft" ? (data.toast ?? "Draft saved.") : publishedMsg,
+    );
+  } catch {
+    replaceWithAutoClose("compose-deferred", "Something went wrong", "error");
+  }
+});

package/src/lib/errors.ts

@@ -0,0 +1,116 @@
+/**
+ * Domain Error Classes
+ *
+ * Typed errors per coding-standards.md error taxonomy.
+ * Services throw these; the error handler middleware maps them to HTTP responses.
+ */
+
+/**
+ * Base class for all domain errors.
+ * Each subclass maps to a specific HTTP status code.
+ */
+export class DomainError extends Error {
+  constructor(
+    message: string,
+    public readonly statusCode: number,
+    public readonly code: string,
+  ) {
+    super(message);
+    this.name = this.constructor.name;
+  }
+}
+
+/** Invalid input — 400 */
+export class ValidationError extends DomainError {
+  constructor(
+    message: string,
+    public readonly details?: unknown,
+  ) {
+    super(message, 400, "VALIDATION_ERROR");
+  }
+}
+
+/** Not authenticated — 401 */
+export class UnauthorizedError extends DomainError {
+  constructor(message = "Unauthorized") {
+    super(message, 401, "UNAUTHORIZED");
+  }
+}
+
+/** Authenticated but not allowed — 403 */
+export class ForbiddenError extends DomainError {
+  constructor(message = "Forbidden") {
+    super(message, 403, "FORBIDDEN");
+  }
+}
+
+/** Resource doesn't exist — 404 */
+export class NotFoundError extends DomainError {
+  constructor(resource = "Resource") {
+    super(`${resource} not found`, 404, "NOT_FOUND");
+  }
+}
+
+/** State conflict (e.g. duplicate) — 409 */
+export class ConflictError extends DomainError {
+  constructor(message: string) {
+    super(message, 409, "CONFLICT");
+  }
+}
+
+/** Too many requests — 429 */
+export class RateLimitError extends DomainError {
+  constructor(message = "Too many requests") {
+    super(message, 429, "RATE_LIMIT");
+  }
+}
+
+/** Third-party failure — 500 */
+export class ExternalServiceError extends DomainError {
+  constructor(message: string) {
+    super(message, 500, "EXTERNAL_SERVICE_ERROR");
+  }
+}
+
+// =============================================================================
+// Route Helpers
+// =============================================================================
+
+/**
+ * Asserts a value is not null/undefined, throwing NotFoundError if it is.
+ *
+ * @param value - The value to check
+ * @param resource - Resource name for the error message
+ * @returns The non-null value
+ * @example
+ * ```ts
+ * const post = assertFound(await services.posts.getById(id), "Post");
+ * ```
+ */
+export function assertFound<T>(
+  value: T | null | undefined,
+  resource: string,
+): T {
+  if (value == null) {
+    throw new NotFoundError(resource);
+  }
+  return value;
+}
+
+/**
+ * Parse a route parameter as a positive integer, throwing ValidationError if invalid.
+ *
+ * @param value - Raw string parameter from the route
+ * @returns Parsed integer
+ * @example
+ * ```ts
+ * const id = parseIntParam(c.req.param("id"));
+ * ```
+ */
+export function parseIntParam(value: string): number {
+  const id = parseInt(value, 10);
+  if (isNaN(id) || id < 1) {
+    throw new ValidationError("Invalid ID");
+  }
+  return id;
+}

package/src/lib/excerpt.ts

@@ -61,7 +61,7 @@ export interface HtmlExcerpt {
 export function getHtmlExcerpt(bodyHtml: string): HtmlExcerpt {
   // Honor manual <!--more--> marker
   if (bodyHtml.includes("<!--more-->")) {
-    const excerpt = bodyHtml.split("<!--more-->")[0]!;
+    const excerpt = bodyHtml.split("<!--more-->")[0] ?? "";
     return { excerpt, hasMore: true };
   }
 

package/src/lib/favicon.ts

@@ -34,9 +34,7 @@ export const FAVICON_SIZES = {
  * ]);
  * ```
  */
-export function encodeIco(
-  entries: { size: number; png: ArrayBuffer }[],
-): Blob {
+export function encodeIco(entries: { size: number; png: ArrayBuffer }[]): Blob {
   const headerSize = 6;
   const dirEntrySize = 16;
   const dirSize = entries.length * dirEntrySize;
@@ -54,7 +52,7 @@ export function encodeIco(
 
   const pngBuffers: ArrayBuffer[] = [];
   for (let i = 0; i < entries.length; i++) {
-    const entry = entries[i]!;
+    const entry = entries[i] as (typeof entries)[number];
     const offset = headerSize + i * dirEntrySize;
 
     // Width/height: 0 means 256
@@ -89,7 +87,7 @@ export function arrayBufferToBase64(buffer: ArrayBuffer): string {
   const bytes = new Uint8Array(buffer);
   let binary = "";
   for (let i = 0; i < bytes.byteLength; i++) {
-    binary += String.fromCharCode(bytes[i]!);
+    binary += String.fromCharCode(bytes[i] as number);
   }
   return btoa(binary);
 }

package/src/lib/html.ts

@@ -0,0 +1,22 @@
+/**
+ * HTML Utilities
+ */
+
+/**
+ * Escape HTML special characters for safe insertion into HTML strings.
+ *
+ * @param str - The string to escape
+ * @returns The escaped string
+ * @example
+ * ```ts
+ * escapeHtml('<script>alert("xss")</script>')
+ * // '&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;'
+ * ```
+ */
+export function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}