@jant/core 0.6.14 → 0.6.16

package/src/client/compose-bridge.ts

@@ -8,6 +8,7 @@
 import type { ComposeSubmitDetail } from "./components/compose-types.js";
 import type { ComposeAttachment } from "./components/compose-types.js";
 import type { ComposeSubmitAttachment } from "./components/compose-types.js";
+import type { LocalDraftMedia } from "./components/compose-types.js";
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
 import type { JantComposeEditor } from "./components/jant-compose-editor.js";
 import type { PostAttachmentInput } from "../types.js";
@@ -25,10 +26,15 @@ import {
   replaceWithAutoClose,
   queueToastForNextPage,
 } from "./toast.js";
-import { openReplyForArticle } from "./compose-launch.js";
-import { hydratePartial } from "./hydrate-partial.js";
+import { getComposeDialog, openReplyForArticle } from "./compose-launch.js";
+import {
+  refreshPostCardView,
+  refreshPostPageView,
+  refreshTimelineThreadView,
+} from "./post-refresh.js";
 import { getJsonString, readJsonObject } from "./json.js";
 import { uploadViaSession } from "./upload-session.js";
+import type { UploadSessionResult } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
 import { getMediaCategory } from "../lib/upload.js";
@@ -66,104 +72,6 @@ function getComposeDialogFromEventTarget(
     : null;
 }
 
-async function fetchPartialHtml(path: string): Promise<string | null> {
-  const res = await fetch(path, {
-    headers: { Accept: "text/html" },
-  });
-  if (!res.ok) return null;
-  return res.text();
-}
-
-async function refreshTimelineThreadView(
-  threadRootId: string,
-): Promise<boolean> {
-  try {
-    const timelineItem = document.querySelector<HTMLElement>(
-      `[data-timeline-item][data-thread-root-id="${threadRootId}"]`,
-    );
-    const content = timelineItem?.querySelector<HTMLElement>(
-      "[data-timeline-item-content]",
-    );
-    if (!content) return false;
-
-    const html = await fetchPartialHtml(
-      `/_/timeline-item/${encodeURIComponent(threadRootId)}`,
-    );
-    if (!html) return false;
-
-    content.innerHTML = html;
-    // Swapped-in markup carries interactions whose per-element setup only runs
-    // on DOMContentLoaded (thread "Show more" toggle, feed video autoplay, audio
-    // waveform); re-initialize them or they stay inert until a full reload.
-    hydratePartial(content);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function refreshPostCardView(postId: string): Promise<boolean> {
-  try {
-    const timelineItem = document
-      .querySelector<HTMLElement>(`article[data-post-id="${postId}"]`)
-      ?.closest<HTMLElement>("[data-timeline-item]");
-    const html = await fetchPartialHtml(
-      `/_/post-card/${encodeURIComponent(postId)}`,
-    );
-    if (!html) return false;
-
-    if (timelineItem) {
-      const content = timelineItem.querySelector<HTMLElement>(
-        "[data-timeline-item-content]",
-      );
-      if (!content) return false;
-      content.innerHTML = html;
-      hydratePartial(content);
-      return true;
-    }
-
-    const article = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (!article) return false;
-
-    article.outerHTML = html;
-    // outerHTML detaches `article`; re-query the replacement to hydrate it.
-    const nextArticle = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (nextArticle) hydratePartial(nextArticle);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function refreshPostPageView(postId: string): Promise<boolean> {
-  try {
-    const container = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (!container) return false;
-
-    const html = await fetchPartialHtml(
-      `/_/post-view/${encodeURIComponent(postId)}`,
-    );
-    if (!html) return false;
-
-    container.outerHTML = html;
-    // outerHTML detaches `container`; re-query the replacement to hydrate it
-    // (see refreshTimelineThreadView).
-    const next = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (next) hydratePartial(next);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 async function refreshReplyTarget(
   detail: ComposeSubmitDetail,
 ): Promise<boolean> {
@@ -233,7 +141,7 @@ function refreshUploadToast() {
 }
 
 /**
- * Track completed upload mediaIds by clientId.
+ * Track completed upload results by clientId.
  *
  * When an attachment is migrated between editor instances (e.g. entering thread
  * mode while an upload is in-flight), `updateAttachmentStatus` fires on the old
@@ -242,8 +150,11 @@ function refreshUploadToast() {
  * handler can't look it up. This map provides a fallback: we record the result
  * here as soon as any upload succeeds, and `buildRequestAttachments` reads it
  * when `attachment.mediaId` is null and the clientId isn't in `uploadPromises`.
+ *
+ * The full result (not just the id) is kept so a failed publish can restore
+ * uploaded attachments into the reopened compose dialog.
  */
-const completedMediaIds = new Map<string, string>();
+const completedUploads = new Map<string, UploadSessionResult>();
 
 /**
  * Quickly grab the very first decoded frame of a video as a small poster.
@@ -495,8 +406,14 @@ async function uploadFile(
 
     uploadProgress.set(clientId, 1);
     refreshUploadToast();
-    editor?.updateAttachmentStatus(clientId, "done", result.id, null);
-    completedMediaIds.set(clientId, result.id);
+    editor?.updateAttachmentStatus(
+      clientId,
+      "done",
+      result.id,
+      null,
+      result.url,
+    );
+    completedUploads.set(clientId, result);
     return result.id;
   } catch (error) {
     uploadProgress.delete(clientId);
@@ -516,7 +433,7 @@ document.addEventListener("jant:attachment-removed", (e: Event) => {
     e as CustomEvent<{ clientId: string; mediaId: string | null }>
   ).detail;
 
-  completedMediaIds.delete(clientId);
+  completedUploads.delete(clientId);
 
   if (mediaId) {
     // Upload already finished — fire-and-forget delete
@@ -565,6 +482,25 @@ document.addEventListener("click", (e: MouseEvent) => {
   void openReplyForArticle(article);
 });
 
+// ── Draft badge → editor ────────────────────────────────────────────
+//
+// The badge on an inline draft doubles as its most likely next action. Publish
+// and Delete live in the post menu with every other post action.
+
+document.addEventListener("click", (e: MouseEvent) => {
+  const trigger = (e.target as HTMLElement).closest<HTMLElement>(
+    "[data-draft-continue]",
+  );
+  if (!trigger) return;
+
+  const postId =
+    trigger.dataset.postId ??
+    trigger.closest<HTMLElement>("article[data-post]")?.dataset.postId;
+  if (!postId) return;
+
+  void getComposeDialog()?.openEdit(postId);
+});
+
 // ── Submit handler ──────────────────────────────────────────────────
 
 /** Build the JSON body for both create and update requests */
@@ -621,7 +557,10 @@ function buildPostBody(
         ? detail.rating
         : null
       : detail.rating || undefined,
-    collectionIds: detail.collectionIds,
+    // Reply creation and Child edits must not reorganize their existing
+    // Thread as a side effect. Collection management stays on Thread-level
+    // organization surfaces; JSON.stringify omits this undefined field.
+    collectionIds: detail.replyToId ? undefined : detail.collectionIds,
     attachments: attachments.length > 0 ? attachments : undefined,
     replyToId: detail.replyToId || undefined,
     quietReply: detail.quietReply || undefined,
@@ -648,7 +587,7 @@ function buildRequestAttachments(
       const mediaId =
         attachment.mediaId ??
         pendingMediaIds.get(attachment.clientId) ??
-        completedMediaIds.get(attachment.clientId);
+        completedUploads.get(attachment.clientId)?.id;
       if (!mediaId) continue;
 
       requestAttachments.push({
@@ -691,6 +630,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     getComposeDialogFromEventTarget(event.target) ??
     (document.querySelector("jant-compose-dialog") as JantComposeDialog | null);
   const isPageMode = !!composeEl?.pageMode;
+  const isDraftPreviewPage = !!document.querySelector("[data-preview-status]");
 
   // Get labels for toast messages
   const labels = composeEl?.labels;
@@ -748,12 +688,48 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     }
     composeEl?.clearLocalDraftFromStorage?.();
   };
+  /**
+   * Uploads that completed before the publish failed. The local draft's own
+   * media snapshot misses uploads that finished after the dialog closed, so
+   * the reopened compose merges these over it.
+   */
+  const collectRestorableMedia = (): LocalDraftMedia[] => {
+    const details = detail.threadPosts?.length ? detail.threadPosts : [detail];
+    const media: LocalDraftMedia[] = [];
+    const seen = new Set<string>();
+    for (const d of details) {
+      for (const attachment of d.attachments) {
+        if (attachment.type !== "media" || seen.has(attachment.clientId)) {
+          continue;
+        }
+        seen.add(attachment.clientId);
+        const upload = completedUploads.get(attachment.clientId);
+        if (!upload) continue;
+        media.push({
+          clientId: attachment.clientId,
+          mediaId: upload.id,
+          url: upload.url,
+          mimeType: upload.mimeType,
+          name: upload.filename || undefined,
+          alt: attachment.alt || undefined,
+        });
+      }
+    }
+    return media;
+  };
+
   const reopenComposeAfterFailure = async () => {
     if (!composeEl || isPageMode) return;
 
+    if (detail.draftSourceId) {
+      if (typeof composeEl.openDraft !== "function") return;
+      await composeEl.openDraft(detail.draftSourceId);
+      return;
+    }
+
     if (isEdit && detail.editPostId) {
       if (typeof composeEl.openEdit !== "function") return;
-      await composeEl.openEdit(detail.editPostId);
+      await composeEl.openEdit(detail.editPostId, { restoreToast: false });
       return;
     }
 
@@ -769,13 +745,22 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
               id: detail.replyRefreshId,
             }
           : undefined,
-        { restoreDraft: true, initialFormat: detail.format },
+        {
+          restoreDraft: true,
+          initialFormat: detail.format,
+          restoreToast: false,
+          restoreMedia: collectRestorableMedia(),
+        },
       );
       return;
     }
 
     if (typeof composeEl.openNew !== "function") return;
-    await composeEl.openNew({ restoreDraft: true });
+    await composeEl.openNew({
+      restoreDraft: true,
+      restoreToast: false,
+      restoreMedia: collectRestorableMedia(),
+    });
   };
   const handleSubmitError = async (message: string) => {
     clearPageLoading();
@@ -815,10 +800,10 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     const results = await Promise.all(pendingPromises);
 
     // If any pending upload failed (null result where we expected a mediaId
-    // AND the upload wasn't already tracked in completedMediaIds):
+    // AND the upload wasn't already tracked in completedUploads):
     const failedCount = results.filter(
       (id, i) =>
-        id === null && !completedMediaIds.has(pendingClientIds[i] ?? ""),
+        id === null && !completedUploads.has(pendingClientIds[i] ?? ""),
     ).length;
     if (failedCount > 0) {
       if (detail.status === "published" && !isEdit) {
@@ -927,7 +912,12 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
 
       if (threadStatus === "published") {
         clearRecoveredLocalDraft();
-        if (isPageMode) {
+        if (isDraftPreviewPage && detail.draftSourceId) {
+          queueSuccessToast(publishedMsg);
+          globalThis.location.assign(
+            threadPermalink ?? globalThis.location.pathname,
+          );
+        } else if (isPageMode) {
           await refreshComposeCollections();
           resetPageCompose();
           toastMsg(publishedMsg);
@@ -942,6 +932,11 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         }
       } else {
         clearRecoveredLocalDraft();
+        if (isDraftPreviewPage && detail.draftSourceId) {
+          queueSuccessToast(threadToast ?? "Draft saved.");
+          globalThis.location.assign(globalThis.location.pathname);
+          return;
+        }
         await refreshComposeCollections();
         if (!leavePageAfterConfirmSave()) resetPageCompose();
         toastMsg(threadToast ?? "Draft saved.");
@@ -1030,21 +1025,50 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       const editData = await readJsonObject(res);
       const editPostId = detail.editPostId ?? "";
       const newSlug = getJsonString(editData, "slug");
-      const newPath = newSlug ? publicPath(`/${newSlug}`) : null;
+      const nextStatus = getJsonString(editData, "status") ?? detail.status;
+      const newPath = newSlug
+        ? publicPath(
+            nextStatus === "draft" ? `/preview/${newSlug}` : `/${newSlug}`,
+          )
+        : null;
+      const editSuccessMessage =
+        nextStatus === "draft"
+          ? "Draft saved."
+          : detail.draftSourceId
+            ? publishedMsg
+            : "Post updated.";
+
+      // Draft preview pages cannot use the public post-view refresh endpoint.
+      // Reload the authenticated preview so saved content stays visible.
+      if (nextStatus === "draft") {
+        if (isDraftPreviewPage) {
+          queueSuccessToast(editSuccessMessage);
+          globalThis.location.assign(newPath ?? globalThis.location.pathname);
+          return;
+        }
+
+        // Drafts opened from the compose panel stay in that workflow. The
+        // completion event lets a pending "save and open drafts" action fetch
+        // the updated list only after the write has finished.
+        await refreshComposeCollections();
+        toastMsg(editSuccessMessage);
+        dispatchSubmitComplete(composeEl, "draft");
+        return;
+      }
 
       if (isPageMode) {
         // On the post detail page: refresh or navigate if slug changed
         if (newPath && newPath !== globalThis.location.pathname) {
-          queueSuccessToast("Post updated.");
+          queueSuccessToast(editSuccessMessage);
           globalThis.location.assign(newPath);
         } else {
           const refreshed =
             editPostId && (await refreshPostPageView(editPostId));
           if (!refreshed) {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.assign(globalThis.location.pathname);
           } else {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           }
         }
       } else if (editPostId) {
@@ -1054,15 +1078,15 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         );
         if (postView) {
           if (newPath && newPath !== globalThis.location.pathname) {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.assign(newPath);
             return;
           }
           const refreshed = await refreshPostPageView(editPostId);
           if (refreshed) {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           } else {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.reload();
           }
         } else {
@@ -1077,14 +1101,14 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
             ? await refreshTimelineThreadView(threadRootId)
             : await refreshPostCardView(editPostId);
           if (refreshed) {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           } else {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.reload();
           }
         }
       } else {
-        queueSuccessToast("Post updated.");
+        queueSuccessToast(editSuccessMessage);
         globalThis.location.reload();
       }
       return;

package/src/client/compose-launch.ts

@@ -1,4 +1,5 @@
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
+import { showToast } from "./toast.js";
 
 interface ReplyToData {
   contentHtml: string;
@@ -142,6 +143,18 @@ export async function openReplyForArticle(article: HTMLElement): Promise<void> {
   const dialog = getComposeDialog();
   if (!dialog) return;
 
+  // Only surfaces that hide the trailing draft redirect to it — the feed hands
+  // its ID down on the last published post. Where the draft is rendered the
+  // author can already see it, so Reply keeps its ordinary meaning: continue
+  // the thread after this post. (`create` keeps that continuation a draft, so
+  // the chain never publishes past an unpublished post.)
+  const hiddenDraftTailId = article.dataset.threadDraftTailId;
+  if (hiddenDraftTailId) {
+    showToast("Picking up the unfinished draft at the end of this thread.");
+    await dialog.openEdit(hiddenDraftTailId);
+    return;
+  }
+
   const threadRootId = article.dataset.threadRootId ?? postId;
   await dialog.openReply(
     postId,

package/src/client/compose-shortcuts.ts

@@ -68,7 +68,11 @@ function openEditFromQueryParam() {
   if (!postId || !composeEl) return;
 
   consumeEditQueryParam();
-  void composeEl.openEdit(postId);
+  if (document.querySelector("[data-preview-status]")) {
+    void composeEl.openDraft(postId);
+  } else {
+    void composeEl.openEdit(postId);
+  }
 }
 
 async function toggleFeatured(

package/src/client/feed-video-player.ts

@@ -1,4 +1,10 @@
-import { MEDIA_LIGHTBOX_TOGGLE_EVENT } from "./media-lightbox-events.js";
+import {
+  isMediaVideoPlaybackPaused,
+  MEDIA_LIGHTBOX_TOGGLE_EVENT,
+  MEDIA_VIDEO_PLAYBACK_INTENT_EVENT,
+  setMediaVideoPlaybackPaused,
+  type MediaVideoPlaybackIntentDetail,
+} from "./media-lightbox-events.js";
 
 const FEED_VIDEO_PRELOAD_ROOT_MARGIN = "75% 0px";
 const FEED_VIDEO_PLAY_THRESHOLD = 0.6;
@@ -72,6 +78,28 @@ function readMetrics(video: HTMLVideoElement): FeedVideoMetrics | undefined {
   return videoMetrics.get(video);
 }
 
+/**
+ * Decide whether a feed video is excluded from autoplay by explicit user
+ * intent.
+ *
+ * @param mediaId - Stable media ID from the rendered video
+ * @returns `true` when autoplay should leave this media paused
+ *
+ * @example
+ * ```ts
+ * shouldSuppressFeedVideoAutoplay("med_123");
+ * ```
+ */
+export function shouldSuppressFeedVideoAutoplay(
+  mediaId: string | undefined,
+): boolean {
+  return isMediaVideoPlaybackPaused(mediaId);
+}
+
+function isAutoplaySuppressed(video: HTMLVideoElement): boolean {
+  return shouldSuppressFeedVideoAutoplay(video.dataset.feedVideoId);
+}
+
 function getMuteButton(video: HTMLVideoElement): HTMLButtonElement | null {
   return (
     video
@@ -120,6 +148,11 @@ function pauseVideo(video: HTMLVideoElement | null): void {
 }
 
 function playVideo(video: HTMLVideoElement): void {
+  if (isAutoplaySuppressed(video)) {
+    pauseVideo(video);
+    return;
+  }
+
   ensureVideoLoaded(video);
   video.muted = soundEnabledVideo !== video;
   video.playsInline = true;
@@ -159,12 +192,13 @@ function reevaluateAutoplay(): void {
   for (const video of registeredVideos) {
     const metrics = readMetrics(video);
     if (!metrics) continue;
+    if (isAutoplaySuppressed(video)) continue;
     if (metrics.intersectionRatio < FEED_VIDEO_PLAY_THRESHOLD) continue;
     candidates.push({ video, ...metrics });
   }
 
   let winner: HTMLVideoElement | null = null;
-  if (preferredVideo?.isConnected) {
+  if (preferredVideo?.isConnected && !isAutoplaySuppressed(preferredVideo)) {
     const preferredMetrics = readMetrics(preferredVideo);
     if (
       preferredMetrics &&
@@ -177,6 +211,8 @@ function reevaluateAutoplay(): void {
     ) {
       preferredVideo = null;
     }
+  } else if (preferredVideo && isAutoplaySuppressed(preferredVideo)) {
+    preferredVideo = null;
   }
 
   if (!winner) {
@@ -187,6 +223,7 @@ function reevaluateAutoplay(): void {
     const currentMetrics = activeVideo ? readMetrics(activeVideo) : undefined;
     if (
       activeVideo &&
+      !isAutoplaySuppressed(activeVideo) &&
       currentMetrics &&
       currentMetrics.intersectionRatio > FEED_VIDEO_PAUSE_THRESHOLD
     ) {
@@ -313,6 +350,10 @@ function handleMuteToggle(event: Event): void {
     return;
   }
 
+  const mediaId = video.dataset.feedVideoId?.trim();
+  if (mediaId) {
+    setMediaVideoPlaybackPaused(mediaId, false);
+  }
   preferredVideo = video;
 
   const willEnableSound = soundEnabledVideo !== video || video.muted;
@@ -358,6 +399,25 @@ document.addEventListener(MEDIA_LIGHTBOX_TOGGLE_EVENT, (event: Event) => {
   scheduleReevaluate();
 });
 
+document.addEventListener(MEDIA_VIDEO_PLAYBACK_INTENT_EVENT, (event: Event) => {
+  const detail = (event as CustomEvent<MediaVideoPlaybackIntentDetail>).detail;
+  const mediaId = detail?.mediaId?.trim();
+  if (!mediaId || typeof detail.paused !== "boolean") {
+    return;
+  }
+
+  for (const video of registeredVideos) {
+    if (video.dataset.feedVideoId?.trim() !== mediaId) continue;
+    if (detail.paused) {
+      pauseVideo(video);
+      if (activeVideo === video) activeVideo = null;
+      if (preferredVideo === video) preferredVideo = null;
+    }
+  }
+
+  scheduleReevaluate();
+});
+
 document.addEventListener("visibilitychange", () => {
   if (document.hidden) {
     pauseVideo(activeVideo);