@jant/core 0.6.16 → 0.7.0

package/src/__tests__/stylesheet-breakpoints.test.ts

@@ -0,0 +1,183 @@
+import { describe, expect, it } from "vitest";
+import { readAllStylesheets } from "./helpers/component-css.js";
+
+/**
+ * The sanctioned width breakpoints, mirroring the ledger comment in
+ * `styles/tokens.css`. Each number is one job; a job never gets a second
+ * number.
+ *
+ * This is not bookkeeping for its own sake. The composer once switched to its
+ * full-screen sheet at 700px while its own controls took their touch sizing at
+ * 760px, so a 750px window rendered a thumb-sized Post button (46px, against
+ * 33px one pixel wider) inside a windowed dialog. Nothing was wrong in either
+ * rule on its own — they had simply drifted to two numbers for one switch, and
+ * no test could see it.
+ */
+const LEDGER = [
+  480, // Header hamburger; the composer's post-meta pill sheds its words.
+  580, // Nav collapse tier-sm.
+  640, // Media grid and lightbox chrome.
+  700, // The phone switch.
+  780, // Nav collapse tier-md.
+  960, // Nav collapse tier-lg.
+  1024, // Tufte two-column → single-column.
+  1079, // Collections sidebar drops out.
+  1200, // Header search collapses to an icon.
+] as const;
+
+/**
+ * Height breakpoints are a separate axis with a separate job: a short viewport
+ * has no room for the composer's chrome regardless of how wide it is. One
+ * number, stated on both sides.
+ */
+const HEIGHT_LEDGER = [760] as const;
+
+interface Condition {
+  /** The stylesheet the condition appears in. */
+  file: string;
+  /** 1-indexed line of the `@media` prelude the condition sits in. */
+  line: number;
+  /** `min` or `max`. */
+  bound: "min" | "max";
+  /** `width` or `height`. */
+  axis: "width" | "height";
+  /** The pixel value as written. */
+  value: number;
+  /** The condition as written, for failure messages. */
+  text: string;
+}
+
+/**
+ * Every `(min-width: …)` / `(max-width: …)` / `(min-height: …)` /
+ * `(max-height: …)` condition in an `@media` prelude across the hand-written
+ * stylesheets.
+ *
+ * `@media` only. A `@container` query carrying the same words measures its
+ * container, not the viewport, so it answers to the component it wraps rather
+ * than to this ledger — the archive filter bar splits on its own inline size
+ * at 39rem and is right to.
+ *
+ * A prelude may span several lines (the composer's full-screen sheet lists
+ * three conditions), so the line number is counted to the condition itself
+ * rather than to the `@media` that opens it.
+ */
+function collectConditions(): Condition[] {
+  const found: Condition[] = [];
+
+  for (const { name, css } of readAllStylesheets()) {
+    const preludes = /@media\b([^{;]*)/g;
+    let prelude: RegExpExecArray | null;
+
+    while ((prelude = preludes.exec(css)) !== null) {
+      const offset = prelude.index + "@media".length;
+      const pattern = /\((min|max)-(width|height):\s*([^)]+)\)/g;
+      let match: RegExpExecArray | null;
+
+      while ((match = pattern.exec(prelude[1])) !== null) {
+        const [text, bound, axis, raw] = match;
+        const px = /^(\d+(?:\.\d+)?)px$/.exec(raw.trim());
+
+        found.push({
+          file: name,
+          line: css.slice(0, offset + match.index).split("\n").length,
+          bound: bound as "min" | "max",
+          axis: axis as "width" | "height",
+          // A non-px unit lands as NaN and fails the ledger check by name,
+          // which is the point: `rem` in a media query resolves against the
+          // initial font-size rather than the root this document sets, so the
+          // number it reads as is not the number it is.
+          value: px ? Number(px[1]) : Number.NaN,
+          text,
+        });
+      }
+    }
+  }
+
+  return found;
+}
+
+/**
+ * The breakpoint a condition belongs to. `min-width: 700px` and
+ * `max-width: 699px` are the two sides of the same 700px switch, so the `max`
+ * side is stated one pixel below the number it divides on.
+ */
+function breakpointOf(condition: Condition): number {
+  return condition.bound === "max" ? condition.value + 1 : condition.value;
+}
+
+describe("stylesheet breakpoints", () => {
+  it("uses only the breakpoints on the ledger", () => {
+    const strays = collectConditions()
+      .filter((condition) => {
+        const ledger = condition.axis === "width" ? LEDGER : HEIGHT_LEDGER;
+        // Both spellings of a breakpoint are accepted here — `max-width: 640px`
+        // and `max-width: 639px` are the same switch. Which one a file may use
+        // is settled by the overlap test below.
+        return !(
+          ledger.includes(condition.value as never) ||
+          ledger.includes(breakpointOf(condition) as never)
+        );
+      })
+      .map(
+        (condition) =>
+          `${condition.file}:${condition.line} ${condition.text}` +
+          ` — not on the ledger in styles/tokens.css`,
+      );
+
+    expect(strays).toEqual([]);
+  });
+
+  it("never lets both sides of a breakpoint match the same viewport", () => {
+    const conditions = collectConditions();
+    const overlaps: string[] = [];
+
+    for (const axis of ["width", "height"] as const) {
+      const onAxis = conditions.filter((condition) => condition.axis === axis);
+
+      for (const value of new Set(
+        onAxis.filter((c) => c.bound === "min").map((c) => c.value),
+      )) {
+        // `min-*: N` and `max-*: N` both match at exactly N. Wherever a
+        // breakpoint is written from both sides, the lower side has to sit one
+        // pixel below it — otherwise a viewport of exactly N gets the phone
+        // layout and the desktop spacing at once.
+        const clash = onAxis.filter(
+          (condition) => condition.bound === "max" && condition.value === value,
+        );
+
+        overlaps.push(
+          ...clash.map(
+            (condition) =>
+              `${condition.file}:${condition.line} ${condition.text}` +
+              ` overlaps (min-${axis}: ${value}px) at exactly ${value}px` +
+              ` — write it as (max-${axis}: ${value - 1}px)`,
+          ),
+        );
+      }
+    }
+
+    expect(overlaps).toEqual([]);
+  });
+
+  it("keeps the phone switch on one number", () => {
+    // The regression this file exists for. Touch sizing and the mobile type
+    // scale used to ride on 760px while the layout they sit inside switched at
+    // 700px; anything between the two was a desktop window wearing phone
+    // controls. Any width breakpoint in the 700s that is not the nav ladder's
+    // 780px is that drift coming back.
+    const nearMisses = collectConditions()
+      .filter(
+        (condition) =>
+          condition.axis === "width" &&
+          condition.value > 700 &&
+          condition.value < 780,
+      )
+      .map(
+        (condition) =>
+          `${condition.file}:${condition.line} ${condition.text}` +
+          ` — the phone switch is 700px; see the ledger in styles/tokens.css`,
+      );
+
+    expect(nearMisses).toEqual([]);
+  });
+});

package/src/app.tsx

@@ -16,11 +16,13 @@ import { hostedDomainCheckRoutes } from "./routes/hosted/domain-check.js";
 
 // Routes - Pages
 import { homeRoutes } from "./routes/pages/home.js";
+import { languageRoutes } from "./routes/pages/language.js";
 import { pageRoutes } from "./routes/pages/page.js";
 import { collectionRoutes } from "./routes/pages/collection.js";
 import { archiveRoutes } from "./routes/pages/archive.js";
 import { searchRoutes } from "./routes/pages/search.js";
 import { featuredRoutes } from "./routes/pages/featured.js";
+import { subscribeRoutes } from "./routes/pages/subscribe.js";
 import { latestRoutes } from "./routes/pages/latest.js";
 import { collectionsPageRoutes } from "./routes/pages/collections.js";
 import { newPostRoutes } from "./routes/pages/new.js";
@@ -37,6 +39,7 @@ import { postsApiRoutes } from "./routes/api/posts.js";
 import { attachmentsApiRoutes } from "./routes/api/attachments.js";
 import { navItemsApiRoutes } from "./routes/api/nav-items.js";
 import { collectionsApiRoutes } from "./routes/api/collections.js";
+import { smartCollectionsApiRoutes } from "./routes/api/smart-collections.js";
 import { settingsApiRoutes } from "./routes/api/settings.js";
 import { uploadApiRoutes } from "./routes/api/upload.js";
 import { uploadsApiRoutes } from "./routes/api/uploads.js";
@@ -59,6 +62,7 @@ import { internalPostBodyHtmlRoutes } from "./routes/api/internal/post-body-html
 import { internalUploadsRoutes } from "./routes/api/internal/uploads.js";
 import { publicArchiveApiRoutes } from "./routes/api/public/archive.js";
 import { publicPostsApiRoutes } from "./routes/api/public/posts.js";
+import { discoverApiRoutes } from "./routes/api/discover.js";
 // Routes - Compose
 import { composeRoutes } from "./routes/compose.js";
 
@@ -71,7 +75,7 @@ import { siteSkillRoutes } from "./routes/site-skill.js";
 // Middleware
 import { requireAuth } from "./middleware/auth.js";
 import { attachSession } from "./middleware/session.js";
-import { defaultCacheControl } from "./middleware/cache-control.js";
+import { defaultCacheControl, noStore } from "./middleware/cache-control.js";
 import { requireRssFeedsEnabled } from "./middleware/public-content-access.js";
 import { requireOnboarding } from "./middleware/onboarding.js";
 import { errorHandler } from "./middleware/error-handler.js";
@@ -90,6 +94,10 @@ import {
 import { isAssetPath } from "./lib/asset-path.js";
 import { getHostedCanonicalRedirect } from "./lib/hosted-domain.js";
 import { stripSitePathPrefix, toPublicHref } from "./lib/url.js";
+import {
+  matchesIfNoneMatch,
+  withConditionalResponse,
+} from "./lib/http-cache.js";
 import { withWorkerResponseCache } from "./lib/worker-response-cache.js";
 import { createRequestRuntime } from "./runtime/index.js";
 import { getInstanceReadiness } from "./runtime/readiness.js";
@@ -265,22 +273,30 @@ export function createApp(): App {
   const app = new Hono<{ Bindings: Bindings; Variables: AppVariables }>();
   const defaultFetch = app.fetch.bind(app);
 
-  app.fetch = (request, env, executionCtx) => {
+  app.fetch = async (request, env, executionCtx) => {
     const bindings = env as Bindings | undefined;
     const preparedRequest = prepareRequestForRouting(
       request,
       getConfiguredSingleSitePathPrefix(bindings),
     );
     if (preparedRequest instanceof Response) {
-      return Promise.resolve(preparedRequest);
+      return preparedRequest;
     }
-    return withWorkerResponseCache({
-      bindings,
-      executionCtx,
+    // Revalidation sits outside the response cache, so a reader holding the
+    // current version is answered from a cache hit as cheaply as from a miss,
+    // and a miss still stores the full document on its way out.
+    return withConditionalResponse(
       request,
-      next: () =>
-        Promise.resolve(defaultFetch(preparedRequest, bindings, executionCtx)),
-    });
+      await withWorkerResponseCache({
+        bindings,
+        executionCtx,
+        request,
+        next: () =>
+          Promise.resolve(
+            defaultFetch(preparedRequest, bindings, executionCtx),
+          ),
+      }),
+    );
   };
 
   // Global error handler: maps DomainError → HTTP responses
@@ -307,7 +323,11 @@ export function createApp(): App {
     if (startupConfigError) {
       return c.html(startupConfigError, 500);
     }
-    const runtime = await createRequestRuntime(c.env, publicRequestUrl);
+    const runtime = await createRequestRuntime(
+      c.env,
+      publicRequestUrl,
+      c.req.raw,
+    );
     c.set("services", runtime.services);
     c.set("servicesForSite", runtime.servicesForSite);
     c.set("hostedHandoff", runtime.hostedHandoff);
@@ -324,12 +344,35 @@ export function createApp(): App {
   // downstream handlers don't each call auth.api.getSession themselves.
   app.use("*", attachSession());
 
-  // Default every response without an explicit Cache-Control to
-  // `private, no-store`. Jant pages are auth-variant, so a shared/CDN cache
-  // must never store them; routes serving genuinely public resources (media,
-  // feeds, sitemaps, favicons) set their own Cache-Control and are untouched.
+  // Default every response without an explicit Cache-Control: `private,
+  // no-cache` for an anonymous reader, `private, no-store` once signed in.
+  // Jant pages are auth-variant, so a shared/CDN cache must never store them
+  // — that is what `private` is for in both — while a reader's own browser
+  // keeps the page and its back/forward cache. Routes serving genuinely public
+  // resources (media, feeds, sitemaps, favicons) set their own Cache-Control
+  // and are untouched.
   app.use("*", defaultCacheControl());
 
+  // Credential surfaces override that default. Each of these is served to
+  // someone with no session yet, so the anonymous branch above would let the
+  // browser keep it — and its URL — on disk: a reset link's one-time token, a
+  // sign-in form, an SSO handoff. One list rather than a `use()` beside each
+  // route group, because it has to be registered up here anyway: `/api/auth/*`
+  // ends in a terminal handler that never yields, so a middleware registered
+  // after it never runs. The handlers themselves live under "Auth routes"
+  // below and in `app.all("/api/auth/*")`; a new one belongs in both places.
+  for (const path of [
+    "/setup",
+    "/signin",
+    "/signout",
+    "/reset",
+    "/__sso",
+    "/__dev/login",
+    "/api/auth/*",
+  ]) {
+    app.use(path, noStore());
+  }
+
   app.use("*", async (c, next) => {
     const redirectUrl = await getHostedCanonicalRedirect({
       currentSite: c.var.currentSite,
@@ -371,8 +414,10 @@ export function createApp(): App {
     const storage = c.var.storage;
     if (!storage) return c.notFound();
 
+    // The outer conditional layer would answer this too, but only after the
+    // object has been fetched and rendered; matching here skips that work.
     const etag = `"${media.updatedAt}"`;
-    if (c.req.header("If-None-Match") === etag) {
+    if (matchesIfNoneMatch(c.req.header("If-None-Match"), etag)) {
       return new Response(null, { status: 304, headers: { ETag: etag } });
     }
 
@@ -529,15 +574,18 @@ export function createApp(): App {
   // API Routes
   app.route("/api/public/posts", publicPostsApiRoutes);
   app.route("/api/public/archive", publicArchiveApiRoutes);
+  app.route("/api/discover", discoverApiRoutes);
   app.route("/api/posts", postsApiRoutes);
   app.route("/api/nav-items", navItemsApiRoutes);
   app.route("/api/collections", collectionsApiRoutes);
+  app.route("/api/smart-collections", smartCollectionsApiRoutes);
   app.route("/api/settings", settingsApiRoutes);
   app.route("/api/custom-urls", customUrlsApiRoutes);
   app.route("/api/export", exportApiRoutes);
   app.route("/api/github-sync", githubSyncAdminRoutes);
 
-  // Auth routes
+  // Auth routes. Their paths are also listed in the `noStore()` block above,
+  // which is what keeps a credential page out of the browser's disk cache.
   app.route("/", setupRoutes);
   app.route("/", signinRoutes);
   app.route("/", resetRoutes);
@@ -571,6 +619,7 @@ export function createApp(): App {
   app.route("/", newPostRoutes);
   app.route("/archive", archiveRoutes);
   app.route("/featured", featuredRoutes);
+  app.route("/subscribe", subscribeRoutes);
   app.route("/latest", latestRoutes);
   app.route("/", partialPageRoutes);
   app.route("/_", brandRoutes);
@@ -579,6 +628,12 @@ export function createApp(): App {
   app.route("/collections", collectionRoutes);
   app.route("/", homeRoutes);
 
+  // Per-language views of every surface above. Mounted here on purpose: after
+  // the static route groups, so `/archive` is the archive rather than a
+  // language named "archive", and before the catch-all, so `/en` is a language
+  // view rather than a lookup for a post whose slug is "en".
+  app.route("/:lang", languageRoutes);
+
   // Custom page catch-all (must be last)
   app.route("/", pageRoutes);
 

package/src/auth.ts

@@ -66,7 +66,24 @@ export function createAuth(
       },
     },
     session: {
-      expiresIn: 3600 * 24 * 30, // 30 days
+      // An idle window, not a hard cap. `attachSession` writes better-auth's
+      // re-issued cookie back to the browser, so any visit inside the window
+      // pushes both the stored session and the cookie out another 90 days —
+      // a single author on their own machine should effectively never be
+      // asked to sign in again.
+      expiresIn: 3600 * 24 * 90, // 90 days
+      // How stale a session may get before a read renews it. Same as
+      // better-auth's default, but stated here because it sets the renewal
+      // cadence and that shouldn't be invisible library behaviour.
+      updateAge: 3600 * 24, // 1 day
+      // Turns off better-auth's re-authentication gate, whose default lets a
+      // session read `/list-sessions` only within 24 hours of sign-in — and it
+      // measures that from `createdAt`, which renewal never moves, so the
+      // Sessions page would answer "Session is not fresh" from day two onward.
+      // The gate also guards nothing here: revoking a session, the destructive
+      // half of that page, is not behind it, and the endpoints that would care
+      // (delete-user, unlink-account) are not part of Jant.
+      freshAge: 0,
       cookieCache: {
         enabled: true,
         maxAge: 60 * 5, // 5 minutes

package/src/client/__tests__/collection-page-actions.test.ts

@@ -11,6 +11,10 @@ vi.mock("../confirm.js", () => ({
   showConfirmDialog: vi.fn(),
 }));
 
+vi.mock("../collection-dialog-host.js", () => ({
+  openCollectionDialog: vi.fn(),
+}));
+
 function createMarkup() {
   document.body.innerHTML = `
     <div id="toast-container"></div>
@@ -29,9 +33,9 @@ function createMarkup() {
         More actions
       </button>
       <div data-collection-page-menu hidden>
-        <a href="/collections/original-slug/edit?returnTo=%2Foriginal-slug" role="menuitem">
+        <button type="button" role="menuitem" data-collection-page-action="edit">
           Edit
-        </a>
+        </button>
         <button
           type="button"
           role="menuitem"
@@ -132,6 +136,51 @@ describe("collection detail page actions", () => {
     expect(window.location.pathname).toBe("/collections");
   });
 
+  it("edits the collection in the dialog, and follows a moved address", async () => {
+    createMarkup();
+    const { openCollectionDialog } =
+      await import("../collection-dialog-host.js");
+    vi.mocked(openCollectionDialog).mockResolvedValue({
+      changed: true,
+      collection: { id: "collection-1", slug: "renamed", title: "Renamed" },
+    });
+    await import("../collection-page-actions.js");
+
+    document
+      .querySelector<HTMLElement>("[data-collection-page-action='toggle-menu']")
+      ?.click();
+    document
+      .querySelector<HTMLElement>("[data-collection-page-action='edit']")
+      ?.click();
+    await flushAsyncWork();
+
+    expect(openCollectionDialog).toHaveBeenCalledWith({
+      collectionId: "collection-1",
+    });
+    expect(window.location.pathname).toBe("/renamed");
+  });
+
+  it("leaves the page where it is when the dialog is dismissed", async () => {
+    createMarkup();
+    const { openCollectionDialog } =
+      await import("../collection-dialog-host.js");
+    vi.mocked(openCollectionDialog).mockResolvedValue({ changed: false });
+    const reload = vi.fn();
+    vi.spyOn(window.location, "reload").mockImplementation(reload);
+    await import("../collection-page-actions.js");
+
+    document
+      .querySelector<HTMLElement>("[data-collection-page-action='toggle-menu']")
+      ?.click();
+    document
+      .querySelector<HTMLElement>("[data-collection-page-action='edit']")
+      ?.click();
+    await flushAsyncWork();
+
+    expect(reload).not.toHaveBeenCalled();
+    expect(window.location.pathname).toBe("/original-slug");
+  });
+
   it("adds the collection to navigation and reveals the settings action", async () => {
     createMarkup();
     const fetchMock = vi.fn().mockResolvedValue(

package/src/client/__tests__/compose-bridge-image-upload.test.ts

@@ -0,0 +1,196 @@
+// @vitest-environment happy-dom
+
+/**
+ * Selecting a photo used to fetch the 3MB HEIC decoder and read the whole
+ * file into memory just to check four bytes of it, then decode the processed
+ * image a second time for its blurhash. The bridge now sniffs the header
+ * itself, imports `heic-to` only for a real HEIC, and takes the blurhash the
+ * processor already sampled.
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type {
+  ComposeAttachment,
+  ComposeLabels,
+} from "../components/compose-types.js";
+import type { JantComposeEditor } from "../components/jant-compose-editor.js";
+
+const processToFile = vi.fn();
+const uploadViaSession = vi.fn();
+const heicTo = vi.fn();
+const heicToImports = { count: 0 };
+
+vi.mock("../image-processor.js", () => ({
+  ImageProcessor: {
+    processToFile: (...args: unknown[]) => processToFile(...args),
+  },
+}));
+
+vi.mock("../upload-session.js", () => ({
+  uploadViaSession: (...args: unknown[]) => uploadViaSession(...args),
+}));
+
+vi.mock("heic-to", () => {
+  heicToImports.count += 1;
+  return { heicTo: (...args: unknown[]) => heicTo(...args) };
+});
+
+await import("../compose-bridge.js");
+await import("../components/jant-compose-editor.js");
+
+const PROCESSED = new File(["webp"], "photo.webp", { type: "image/webp" });
+const BLURHASH = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+
+function jpegFile() {
+  return new File(
+    [new Uint8Array([0xff, 0xd8, 0xff, 0xe0, 0, 0, 0, 0])],
+    "photo.jpg",
+    {
+      type: "image/jpeg",
+    },
+  );
+}
+
+function heicFile() {
+  const bytes = new Uint8Array(16);
+  bytes.set([...new TextEncoder().encode("ftyp")], 4);
+  bytes.set([...new TextEncoder().encode("heic")], 8);
+  return new File([bytes], "IMG_0001.HEIC", { type: "image/heic" });
+}
+
+function selectFile(file: File) {
+  document.dispatchEvent(
+    new CustomEvent("jant:files-selected", {
+      detail: { files: [{ file, clientId: "attachment-1" }] },
+    }),
+  );
+}
+
+async function settle() {
+  for (let i = 0; i < 10; i++) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+}
+
+describe("compose bridge image upload", () => {
+  beforeEach(() => {
+    processToFile.mockReset().mockResolvedValue({
+      file: PROCESSED,
+      width: 1200,
+      height: 900,
+      blurhash: BLURHASH,
+    });
+    uploadViaSession.mockReset().mockResolvedValue({
+      id: "med_1",
+      filename: "photo.webp",
+      url: "/media/photo.webp",
+      mimeType: "image/webp",
+      size: 4,
+    });
+    heicTo
+      .mockReset()
+      .mockResolvedValue(new Blob(["jpeg"], { type: "image/jpeg" }));
+  });
+
+  it("uploads a JPEG with the processor's blurhash and never loads heic-to", async () => {
+    const file = jpegFile();
+
+    selectFile(file);
+    await settle();
+
+    expect(heicToImports.count).toBe(0);
+    expect(heicTo).not.toHaveBeenCalled();
+    expect(processToFile).toHaveBeenCalledWith(file);
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+    expect(uploadViaSession.mock.calls[0][0]).toBe(PROCESSED);
+    expect(uploadViaSession.mock.calls[0][1]).toMatchObject({
+      width: 1200,
+      height: 900,
+      blurhash: BLURHASH,
+    });
+  });
+
+  it("converts a file whose bytes say HEIC before processing it", async () => {
+    selectFile(heicFile());
+    await settle();
+
+    expect(heicToImports.count).toBe(1);
+    expect(heicTo).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "image/jpeg" }),
+    );
+    const converted = processToFile.mock.calls[0][0] as File;
+    expect(converted.name).toBe("IMG_0001.jpg");
+    expect(converted.type).toBe("image/jpeg");
+    expect(uploadViaSession.mock.calls[0][1]).toMatchObject({
+      blurhash: BLURHASH,
+    });
+  });
+
+  it("reports to the editor that took the post over, not the one it started in", async () => {
+    // Entering or leaving thread mode renders the post in a new editor. An
+    // upload still running then used to keep reporting to the old one, so the
+    // new editor showed "uploading" forever and the file never reached the
+    // local draft.
+    let finishUpload: (value: unknown) => void = () => {};
+    uploadViaSession.mockReset().mockReturnValue(
+      new Promise((resolve) => {
+        finishUpload = resolve;
+      }),
+    );
+    const editor = async () => {
+      const el = document.createElement(
+        "jant-compose-editor",
+      ) as JantComposeEditor;
+      el.labels = {} as ComposeLabels;
+      document.body.appendChild(el);
+      await el.updateComplete;
+      return el;
+    };
+    const file = jpegFile();
+    const pending: ComposeAttachment = {
+      clientId: "attachment-1",
+      file,
+      previewUrl: "blob:preview",
+      posterUrl: null,
+      status: "pending",
+      progress: null,
+      mediaId: null,
+      remoteUrl: null,
+      alt: "",
+      error: null,
+      summary: null,
+      chars: null,
+    };
+
+    const started = await editor();
+    started._attachments = [pending];
+    started._attachmentOrder = [pending.clientId];
+    started.dispatchEvent(
+      new CustomEvent("jant:files-selected", {
+        bubbles: true,
+        detail: { files: [{ file, clientId: pending.clientId }] },
+      }),
+    );
+    await settle();
+    expect(uploadViaSession).toHaveBeenCalledTimes(1);
+
+    started.remove();
+    const next = await editor();
+    next.takeOver(started);
+
+    finishUpload({
+      id: "med_1",
+      filename: "photo.webp",
+      url: "/media/photo.webp",
+      mimeType: "image/webp",
+      size: 4,
+    });
+    await settle();
+
+    expect(next._attachments[0]).toMatchObject({
+      status: "done",
+      mediaId: "med_1",
+      remoteUrl: "/media/photo.webp",
+    });
+  });
+});