@jant/core 0.3.36 → 0.3.37

package/src/ui/feed/QuoteCard.tsx

@@ -12,30 +12,51 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
+import { StarRating } from "../shared/StarRating.js";
+import { PostFooter } from "../shared/PostFooter.js";
+import { PostStatusBadges } from "./PostStatusBadges.js";
+import { sanitizeUrl } from "../../lib/url.js";
+
+export const QuoteCard: FC<TimelineCardProps> = ({
+  post,
+  mode = "feed",
+  display,
+}) => {
+  const isCompact = mode === "compact";
+  const isDetail = mode === "detail";
+  const articleClass = `h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : " feed-quote-post"}`;
+  const safeUrl = post.url ? sanitizeUrl(post.url) : "";
+  const commentaryHtml = post.bodyHtml ?? null;
 
-export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
   return (
     <article
-      class={`h-entry${compact ? " feed-compact" : ""}`}
+      class={articleClass}
+      {...(isDetail ? { "data-page": "post" } : {})}
       data-post
       data-format="quote"
+      data-post-id={post.id}
+      data-post-permalink={post.permalink}
+      {...(post.pinned ? { "data-post-pinned": "" } : {})}
+      {...(post.featured ? { "data-post-featured": "" } : {})}
+      data-post-visibility={post.visibility}
+      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
     >
+      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
       {post.quoteText && (
-        <blockquote class="feed-quote">
+        <blockquote class={`feed-quote${isCompact ? "" : " feed-quote-card"}`}>
           <div
-            class={`e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+            class={`e-content feed-quote-content${isCompact ? " text-sm" : ""}`}
           >
             {post.quoteText}
           </div>
         </blockquote>
       )}
-      {!compact && (post.title || post.url) && (
-        <div class="mt-2 text-sm text-muted-foreground">
-          &mdash;{" "}
-          {post.url ? (
+      {!isCompact && (post.title || safeUrl) && (
+        <div class="feed-quote-attribution">
+          {safeUrl ? (
             <a
-              href={post.url}
-              class="hover:underline"
+              href={safeUrl}
+              class="feed-quote-source"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -46,23 +67,17 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           )}
         </div>
       )}
-      {!compact && post.bodyHtml && (
+      {!isCompact && commentaryHtml && (
         <div
-          class="mt-3 prose text-muted-foreground"
+          class="feed-quote-commentary prose text-muted-foreground"
           data-post-body
-          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+          dangerouslySetInnerHTML={{ __html: commentaryHtml }}
         />
       )}
-      <footer class="mt-2" data-post-meta>
-        <a
-          href={post.permalink}
-          class="u-url text-xs text-muted-foreground hover:underline"
-        >
-          <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtFormatted}
-          </time>
-        </a>
-      </footer>
+      {!isCompact && !display?.hideRating && (
+        <StarRating rating={post.rating} />
+      )}
+      <PostFooter post={post} detail={isDetail} display={display?.footer} />
     </article>
   );
 };

package/src/ui/feed/ThreadPreview.tsx

@@ -1,7 +1,8 @@
 /**
  * Thread Preview
  *
- * Root post + vertical line connector + compact replies underneath.
+ * Shows latest reply as the hero post with faded ancestor context above.
+ * Thread line connects all posts via `.thread-group` / `.thread-item`.
  */
 
 import type { FC } from "hono/jsx";
@@ -9,40 +10,103 @@ import { useLingui } from "@lingui/react/macro";
 import type { ThreadPreviewProps } from "../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
 import { TimelineItemFromPost } from "./TimelineItem.js";
+import {
+  getThreadPreviewState,
+  isThreadContextLikelyOverflow,
+} from "./thread-preview-state.js";
+
+const THREAD_CONTEXT_DISPLAY = {
+  hideStatusBadges: true,
+  hideRating: true,
+  footer: {
+    hideActions: true,
+  },
+} as const;
 
 export const ThreadPreview: FC<ThreadPreviewProps> = ({
   rootPost,
-  previewReplies,
+  latestReply,
+  parentReply,
   totalReplyCount,
 }) => {
   const { t } = useLingui();
-  const remainingCount = totalReplyCount - previewReplies.length;
+  const showMoreLabel = t({
+    message: "Show more",
+    comment: "@context: Button to expand faded thread context",
+  });
+  const showLessLabel = t({
+    message: "Show less",
+    comment: "@context: Button to collapse expanded thread context",
+  });
+  const { hiddenCount } = getThreadPreviewState({
+    hasParentReply: parentReply !== undefined,
+    totalReplyCount,
+  });
+  const startsCollapsedWithAffordances = isThreadContextLikelyOverflow({
+    rootPost,
+    parentReply,
+    hiddenCount,
+  });
 
   return (
-    <div>
-      <TimelineItem item={{ post: rootPost }} />
-      {previewReplies.length > 0 && (
-        <div class="feed-replies">
-          {previewReplies.map((reply) => (
-            <div key={reply.id} class="feed-reply">
-              <TimelineItemFromPost post={reply} compact />
-            </div>
-          ))}
-          {remainingCount > 0 && (
-            <div class="feed-reply">
-              <a
-                href={rootPost.permalink}
-                class="text-sm text-muted-foreground hover:text-foreground hover:underline"
-              >
-                {t({
-                  message: `Show ${remainingCount} more ${remainingCount === 1 ? "reply" : "replies"}`,
-                  comment: "@context: Link to show remaining thread replies",
-                })}
-              </a>
-            </div>
-          )}
+    <div class="thread-group thread-group-preview">
+      {/* Faded ancestor context */}
+      <div
+        class={`thread-context-shell thread-context-collapsed${startsCollapsedWithAffordances ? " thread-context-faded" : ""}`}
+        data-thread-context
+      >
+        {/* Root post */}
+        <div class="thread-item thread-item-context">
+          <TimelineItemFromPost
+            post={rootPost}
+            mode="feed"
+            display={THREAD_CONTEXT_DISPLAY}
+          />
         </div>
-      )}
+
+        {/* Hidden posts gap */}
+        {hiddenCount > 0 && (
+          <div class="thread-item thread-item-gap">
+            <a href={latestReply.permalink} class="thread-gap-link">
+              {t({
+                message: `${hiddenCount} more ${hiddenCount === 1 ? "post" : "posts"}`,
+                comment:
+                  "@context: Link showing count of hidden thread posts between root and latest",
+              })}
+            </a>
+          </div>
+        )}
+
+        {/* Parent of latest reply */}
+        {parentReply && (
+          <div class="thread-item thread-item-context">
+            <TimelineItemFromPost
+              post={parentReply}
+              mode="feed"
+              display={THREAD_CONTEXT_DISPLAY}
+            />
+          </div>
+        )}
+
+        <div class="thread-context-fade" />
+      </div>
+
+      {/* Toggle button */}
+      <button
+        type="button"
+        class={`thread-context-toggle text-xs text-muted-foreground hover:text-foreground${startsCollapsedWithAffordances ? "" : " hidden"}`}
+        data-thread-context-toggle
+        data-label-more={showMoreLabel}
+        data-label-less={showLessLabel}
+        aria-expanded="false"
+      >
+        {showMoreLabel}
+      </button>
+
+      {/* Latest reply (full card, hero) */}
+      <div class="thread-item thread-item-hero">
+        <TimelineItem item={{ post: latestReply }} />
+      </div>
     </div>
   );
 };

package/src/ui/feed/TimelineFeed.tsx

@@ -1,7 +1,7 @@
 /**
  * Timeline Feed
  *
- * Flat list of posts separated by simple dividers.
+ * Flat list of posts separated by lightweight dividers.
  */
 
 import type { FC } from "hono/jsx";
@@ -25,7 +25,8 @@ export const TimelineFeed: FC<TimelineFeedProps> = ({
               {item.threadPreview ? (
                 <ThreadPreview
                   rootPost={item.post}
-                  previewReplies={item.threadPreview.replies}
+                  latestReply={item.threadPreview.latestReply}
+                  parentReply={item.threadPreview.parentReply}
                   totalReplyCount={item.threadPreview.totalReplyCount}
                 />
               ) : (

package/src/ui/feed/TimelineItem.tsx

@@ -8,8 +8,10 @@ import type { FC } from "hono/jsx";
 import type {
   TimelineItemView,
   TimelineCardProps,
+  TimelineCardDisplayOptions,
   PostView,
   Format,
+  CardMode,
 } from "../../types.js";
 import { NoteCard } from "./NoteCard.js";
 import { LinkCard } from "./LinkCard.js";
@@ -23,23 +25,30 @@ const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
 
 interface TimelineItemProps {
   item: TimelineItemView;
-  compact?: boolean;
+  mode?: CardMode;
+  display?: TimelineCardDisplayOptions;
 }
 
 interface TimelineItemFromPostProps {
   post: PostView;
-  compact?: boolean;
+  mode?: CardMode;
+  display?: TimelineCardDisplayOptions;
 }
 
-export const TimelineItem: FC<TimelineItemProps> = ({ item, compact }) => {
+export const TimelineItem: FC<TimelineItemProps> = ({
+  item,
+  mode,
+  display,
+}) => {
   const Card = CARD_MAP[item.post.format];
-  return <Card post={item.post} compact={compact} />;
+  return <Card post={item.post} mode={mode} display={display} />;
 };
 
 export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
   post,
-  compact,
+  mode,
+  display,
 }) => {
   const Card = CARD_MAP[post.format];
-  return <Card post={post} compact={compact} />;
+  return <Card post={post} mode={mode} display={display} />;
 };

package/src/ui/feed/__tests__/thread-preview.test.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import type { PostView } from "../../../types.js";
+import {
+  getThreadPreviewState,
+  isThreadContextLikelyOverflow,
+} from "../thread-preview-state.js";
+
+function createPostView(overrides: Partial<PostView> = {}): PostView {
+  return {
+    id: "post-1",
+    permalink: "/post-1",
+    slug: "post-1",
+    format: "note",
+    status: "published",
+    visibility: "public",
+    pinned: false,
+    featured: false,
+    publishedAt: "2026-03-14T00:00:00.000Z",
+    publishedAtFormatted: "Mar 14, 2026",
+    publishedAtTime: "00:00",
+    publishedAtRelative: "now",
+    updatedAt: "2026-03-14T00:00:00.000Z",
+    media: [],
+    collections: [],
+    isLastInThread: false,
+    ...overrides,
+  };
+}
+
+describe("getThreadPreviewState", () => {
+  it("has no hidden ancestors for a 2-post thread", () => {
+    expect(
+      getThreadPreviewState({
+        hasParentReply: false,
+        totalReplyCount: 1,
+      }),
+    ).toEqual({
+      hiddenCount: 0,
+    });
+  });
+
+  it("has no hidden ancestors for a 3-post thread with parent context", () => {
+    expect(
+      getThreadPreviewState({
+        hasParentReply: true,
+        totalReplyCount: 2,
+      }),
+    ).toEqual({
+      hiddenCount: 0,
+    });
+  });
+
+  it("counts hidden ancestors for longer threads", () => {
+    expect(
+      getThreadPreviewState({
+        hasParentReply: true,
+        totalReplyCount: 5,
+      }),
+    ).toEqual({
+      hiddenCount: 3,
+    });
+  });
+
+  it("treats hidden ancestors as likely overflow", () => {
+    expect(
+      isThreadContextLikelyOverflow({
+        rootPost: createPostView(),
+        hiddenCount: 1,
+      }),
+    ).toBe(true);
+  });
+
+  it("treats media-heavy context as likely overflow", () => {
+    expect(
+      isThreadContextLikelyOverflow({
+        rootPost: createPostView({
+          media: [
+            {
+              id: "media-1",
+              url: "/image.jpg",
+              thumbnailUrl: "/image-thumb.jpg",
+              mimeType: "image/jpeg",
+            },
+          ],
+        }),
+        hiddenCount: 0,
+      }),
+    ).toBe(true);
+  });
+
+  it("keeps very short context collapsed without affordances", () => {
+    expect(
+      isThreadContextLikelyOverflow({
+        rootPost: createPostView({
+          bodyHtml: "<p>Short note.</p>",
+        }),
+        parentReply: createPostView({
+          id: "post-2",
+          permalink: "/post-2",
+          slug: "post-2",
+          bodyHtml: "<p>Tiny reply.</p>",
+        }),
+        hiddenCount: 0,
+      }),
+    ).toBe(false);
+  });
+});

package/src/ui/feed/thread-preview-state.ts

@@ -0,0 +1,61 @@
+import type { PostView } from "../../types.js";
+import { stripHtml } from "../../lib/excerpt.js";
+
+export function getThreadPreviewState({
+  hasParentReply,
+  totalReplyCount,
+}: {
+  hasParentReply: boolean;
+  totalReplyCount: number;
+}) {
+  const hiddenCount = hasParentReply
+    ? totalReplyCount - 2 // exclude latest + parent
+    : totalReplyCount - 1; // exclude latest only
+
+  return {
+    hiddenCount,
+  };
+}
+
+function getRenderedTextLength(post?: PostView): number {
+  if (!post) return 0;
+
+  const htmlText = stripHtml(post.summaryHtml ?? post.bodyHtml ?? "");
+  return (
+    (post.title?.length ?? 0) +
+    (post.quoteText?.length ?? 0) +
+    (post.excerpt?.length ?? 0) +
+    htmlText.length
+  );
+}
+
+export function isThreadContextLikelyOverflow({
+  rootPost,
+  parentReply,
+  hiddenCount,
+}: {
+  rootPost: PostView;
+  parentReply?: PostView;
+  hiddenCount: number;
+}): boolean {
+  if (hiddenCount > 0) return true;
+
+  const contextPosts = [rootPost, parentReply].filter(
+    (post): post is PostView => post !== undefined,
+  );
+
+  if (
+    contextPosts.some(
+      (post) => post.media.length > 0 || post.summaryHasMore === true,
+    )
+  ) {
+    return true;
+  }
+
+  const renderedTextLength = contextPosts.reduce(
+    (sum, post) => sum + getRenderedTextLength(post),
+    0,
+  );
+
+  return renderedTextLength > 220;
+}

package/src/ui/font-themes.ts

@@ -29,7 +29,7 @@ export interface FontTheme {
 
 /** System sans-serif stack */
 const SANS =
-  'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif';
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif';
 
 /**
  * Editorial serif stack
@@ -38,7 +38,7 @@ const SANS =
  * Charter (macOS); Cambria / Sitka Text (Windows); Georgia (universal)
  */
 const EDITORIAL_SERIF =
-  'ui-serif, "Iowan Old Style", Charter, "Bitstream Charter", Cambria, "Sitka Text", Georgia, "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif';
+  'ui-serif, "New York Small", "New York", "Iowan Old Style", Charter, "Bitstream Charter", Cambria, "Sitka Text", Georgia, "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", serif';
 
 /**
  * Classical serif stack

package/src/ui/layouts/BaseLayout.tsx

@@ -113,11 +113,11 @@ export const BaseLayout: FC<PropsWithChildren<BaseLayoutProps>> = ({
         {...(isAuthenticated ? { "data-authenticated": true } : {})}
       >
         {content}
-        <div id="toast-container" class="toast-container">
+        <div id="toast-container" class="toast-container" popover="manual">
           {toast && (
             <div
               class={`toast ${toast.type === "error" ? "toast-error" : "toast-success"}`}
-              data-init="history.replaceState({}, '', location.pathname); setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)"
+              data-init="el.closest('[popover]').showPopover(); history.replaceState({}, '', location.pathname); setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)"
             >
               {toast.type === "error" ? (
                 <svg