@jant/core 0.3.35 → 0.3.37

package/src/client/audio-processor.ts

@@ -0,0 +1,84 @@
+/**
+ * Client-side Audio Processor
+ *
+ * Transcodes audio files to AAC in an M4A container (MP4 audio-only)
+ * using mediabunny. Mirrors the video-processor pattern but discards
+ * any video track and skips poster/blurhash extraction.
+ *
+ * Requires WebCodecs API support — check `isSupported()` before use.
+ */
+
+import {
+  Input,
+  Output,
+  Mp4OutputFormat,
+  BufferTarget,
+  BlobSource,
+  Conversion,
+  QUALITY_HIGH,
+  ALL_FORMATS,
+} from "mediabunny";
+
+export interface AudioProcessResult {
+  file: File;
+}
+
+/**
+ * Check if the browser supports WebCodecs-based audio processing.
+ *
+ * @returns `true` if `AudioEncoder` is available in the current environment
+ */
+function isSupported(): boolean {
+  return typeof AudioEncoder !== "undefined";
+}
+
+/**
+ * Process an audio file: transcode to AAC in an M4A (MP4) container.
+ *
+ * @param file - Source audio file
+ * @param onProgress - Optional callback receiving progress from 0 to 1
+ * @returns Processed M4A file
+ */
+async function processToFile(
+  file: File,
+  onProgress?: (progress: number) => void,
+): Promise<AudioProcessResult> {
+  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: { discard: true },
+      audio: { codec: "aac", bitrate: QUALITY_HIGH },
+    });
+
+    if (onProgress) {
+      conversion.onProgress = onProgress;
+    }
+
+    await conversion.execute();
+
+    const buffer = target.buffer;
+    if (!buffer) throw new Error("Audio processing produced no output");
+
+    const originalName = file.name.replace(/\.[^.]+$/, "");
+    const m4aFile = new File([buffer], `${originalName}.m4a`, {
+      type: "audio/mp4",
+    });
+
+    return { file: m4aFile };
+  } finally {
+    input.dispose();
+  }
+}
+
+export const AudioProcessor = { isSupported, processToFile };

package/src/{lib → client}/avatar-upload.ts

@@ -9,7 +9,7 @@
  * Uses the `[data-avatar-upload]` attribute on file inputs.
  */
 
-import { encodeIco } from "./favicon.js";
+import { encodeIco } from "../lib/favicon.js";
 
 /**
  * Load an image from a File object
@@ -120,7 +120,7 @@ async function handleAvatarUpload(
     formData.append("appleTouch", png180, "apple-touch-icon.png");
 
     // Upload
-    const response = await fetch("/dash/settings/avatar", {
+    const response = await fetch("/settings/avatar", {
       method: "POST",
       body: formData,
     });
@@ -130,7 +130,7 @@ async function handleAvatarUpload(
     }
 
     // Redirect on success
-    window.location.href = "/dash/settings?saved";
+    window.location.href = "/settings/avatar?saved";
   } catch {
     // Restore button text on error
     if (label) label.textContent = originalText;
@@ -139,6 +139,7 @@ async function handleAvatarUpload(
       input.dataset.textError || "Upload failed. Please try again.";
     const container = document.getElementById("toast-container");
     if (container) {
+      if (!container.matches(":popover-open")) container.showPopover();
       const toast = document.createElement("div");
       toast.className = "toast toast-error";
       toast.innerHTML = `<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><span>${errorMsg}</span>`;

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

@@ -6,8 +6,8 @@
  * 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 type { CollectionSubmitDetail } from "./components/collection-types.js";
+import type { JantCollectionForm } from "./components/jant-collection-form.js";
 import { showToast } from "./toast.js";
 
 document.addEventListener("jant:collection-submit", async (event: Event) => {

package/src/{ui → client}/components/__tests__/jant-collection-form.test.ts

@@ -1,6 +1,20 @@
 // @vitest-environment happy-dom
 
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+
+vi.mock("../../lazy-slugify.js", () => ({
+  slugify: (text: string) =>
+    Promise.resolve(
+      text
+        .toLowerCase()
+        .trim()
+        .replace(/[^\w\s-]/g, "")
+        .replace(/[\s_-]+/g, "-")
+        .replace(/^-+|-+$/g, ""),
+    ),
+  preloadSlug: () => {},
+}));
+
 import type {
   CollectionFormInitial,
   CollectionFormLabels,
@@ -16,12 +30,11 @@ const labels: CollectionFormLabels = {
   slugHelp: "Help text",
   descriptionLabel: "Description",
   descriptionPlaceholder: "Placeholder Description",
-  iconLabel: "Icon",
-  chooseIcon: "Choose Icon",
   removeIcon: "Remove",
-  dialogTitle: "Choose Icon",
-  dialogClose: "Close",
+  iconsTab: "Icons",
+  emojisTab: "Emojis",
   searchIconsPlaceholder: "Search icons...",
+  searchEmojisPlaceholder: "Search emojis...",
   sortOrderLabel: "Sort Order",
   sortNewest: "Newest first",
   sortOldest: "Oldest first",
@@ -47,8 +60,8 @@ async function createElement(
   ) as JantCollectionForm;
   el.labels = labels;
   el.initial = initial;
-  el.action = "/dash/collections";
-  el.cancelHref = "/dash/collections";
+  el.action = "/api/collections";
+  el.cancelHref = "/api/collections";
   el.isEdit = false;
   Object.assign(el, overrides);
   document.body.appendChild(el);
@@ -82,6 +95,8 @@ describe("JantCollectionForm", () => {
 
     titleInput.value = "My Great Collection!";
     titleInput.dispatchEvent(new Event("input", { bubbles: true }));
+    // slugify is async — flush the microtask then wait for Lit re-render
+    await new Promise((r) => setTimeout(r, 0));
     await el.updateComplete;
 
     expect(slugInput.value).toBe("my-great-collection");
@@ -143,11 +158,13 @@ describe("JantCollectionForm", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as CollectionSubmitDetail;
-    expect(d.endpoint).toBe("/dash/collections");
+    expect(d.endpoint).toBe("/api/collections");
     expect(d.data.title).toBe("Books");
     expect(d.data.slug).toBe("books");
     expect(d.data.description).toBe("All about books");
     expect(d.data.sortOrder).toBe("rating_desc");
-    expect(d.data.icon).toBeUndefined();
+    // Default icon is auto-selected in create mode (library icon with gray color)
+    expect(d.data.icon).toBeDefined();
+    expect(d.data.icon).toContain('"name":"library"');
   });
 });