@jant/core 0.3.35 → 0.3.37

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

package/src/ui/layouts/SiteLayout.tsx

@@ -37,10 +37,15 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
   showHeaderAvatar,
   siteFooterHtml,
   sidebar,
+  uploadMaxFileSize,
+  showComposeDialog = true,
+  showHeader = true,
   children,
 }) => {
   const { t } = useLingui();
   const maxVisible = headerNavMaxVisible ?? 3;
+  const overflowLinks = links.slice(maxVisible);
+  const hasActiveOverflow = overflowLinks.some((l) => l.isActive);
 
   const latestHref = homeDefaultView === "featured" ? "/latest" : "/";
   const featuredHref = homeDefaultView === "featured" ? "/" : "/featured";
@@ -78,115 +83,118 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
 
   return (
     <div class="site-page">
-      <header class={`site-header ${sidebar ? "site-header-sidebar" : ""}`}>
-        <div class="site-header-inner">
-          <div class="site-header-top site-header-top-bordered">
-            <a href="/" class="site-logo">
-              {showHeaderAvatar && siteAvatarUrl && (
-                <img src={siteAvatarUrl} class="site-logo-avatar" alt="" />
-              )}
-              {siteName}
-            </a>
-            <div class="site-header-right">
-              {links.length > 0 && (
-                <nav class="site-header-nav">
-                  {links.slice(0, maxVisible).map((link) => (
-                    <HeaderLink key={link.id} link={link} />
-                  ))}
-                  {links.length > maxVisible && (
-                    <div class="dropdown-menu site-header-more">
-                      <button
-                        type="button"
-                        id="site-nav-more-trigger"
-                        class="site-header-more-btn"
-                        aria-haspopup="menu"
-                        aria-controls="site-nav-more-menu"
-                        aria-expanded="false"
-                        aria-label={t({
-                          message: "More links",
-                          comment:
-                            "@context: Button to show overflow nav links",
-                        })}
-                      >
-                        <svg
-                          xmlns="http://www.w3.org/2000/svg"
-                          width="16"
-                          height="16"
-                          viewBox="0 0 24 24"
-                          fill="currentColor"
+      {showHeader && (
+        <header class="site-header">
+          <div class="site-header-inner">
+            <div class="site-header-top site-header-top-bordered">
+              <a href="/" class="site-logo">
+                {showHeaderAvatar && siteAvatarUrl && (
+                  <img src={siteAvatarUrl} class="site-logo-avatar" alt="" />
+                )}
+                {siteName}
+              </a>
+              <div class="site-header-right">
+                {links.length > 0 && (
+                  <nav class="site-header-nav">
+                    {links.slice(0, maxVisible).map((link) => (
+                      <HeaderLink key={link.id} link={link} />
+                    ))}
+                    {overflowLinks.length > 0 && (
+                      <div class="dropdown-menu site-header-more">
+                        <button
+                          type="button"
+                          id="site-nav-more-trigger"
+                          class={`site-header-more-btn ${hasActiveOverflow ? "site-header-more-btn-active" : ""}`}
+                          aria-haspopup="menu"
+                          aria-controls="site-nav-more-menu"
+                          aria-expanded="false"
+                          aria-label={t({
+                            message: "More links",
+                            comment:
+                              "@context: Button to show overflow nav links",
+                          })}
                         >
-                          <circle cx="5" cy="12" r="2" />
-                          <circle cx="12" cy="12" r="2" />
-                          <circle cx="19" cy="12" r="2" />
-                        </svg>
-                      </button>
-                      <div
-                        id="site-nav-more-popover"
-                        data-popover
-                        data-align="end"
-                        aria-hidden="true"
-                      >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                          >
+                            <circle cx="5" cy="12" r="2" />
+                            <circle cx="12" cy="12" r="2" />
+                            <circle cx="19" cy="12" r="2" />
+                          </svg>
+                        </button>
                         <div
-                          role="menu"
-                          id="site-nav-more-menu"
-                          aria-labelledby="site-nav-more-trigger"
+                          id="site-nav-more-popover"
+                          data-popover
+                          data-align="end"
+                          aria-hidden="true"
                         >
-                          {links.slice(maxVisible).map((link) => (
-                            <a
-                              key={link.id}
-                              href={link.url}
-                              role="menuitem"
-                              {...(link.isExternal
-                                ? {
-                                    target: "_blank",
-                                    rel: "noopener noreferrer",
-                                  }
-                                : {})}
-                            >
-                              {link.label}
-                            </a>
-                          ))}
+                          <div
+                            role="menu"
+                            id="site-nav-more-menu"
+                            aria-labelledby="site-nav-more-trigger"
+                          >
+                            {overflowLinks.map((link) => (
+                              <a
+                                key={link.id}
+                                href={link.url}
+                                role="menuitem"
+                                class={
+                                  link.isActive
+                                    ? "site-header-menuitem-active"
+                                    : undefined
+                                }
+                                {...(link.isExternal
+                                  ? {
+                                      target: "_blank",
+                                      rel: "noopener noreferrer",
+                                    }
+                                  : {})}
+                              >
+                                {link.label}
+                              </a>
+                            ))}
+                          </div>
                         </div>
                       </div>
-                    </div>
-                  )}
-                </nav>
-              )}
-              <a
-                href="/search"
-                class={`site-header-search ${currentPath === "/search" ? "site-header-search-active" : ""}`}
-                aria-label={searchLabel}
-                title={searchLabel}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
+                    )}
+                  </nav>
+                )}
+                <a
+                  href="/search"
+                  class={`site-header-search ${currentPath === "/search" ? "site-header-search-active" : ""}`}
+                  aria-label={searchLabel}
+                  title={searchLabel}
                 >
-                  <circle cx="11" cy="11" r="8" />
-                  <path d="m21 21-4.35-4.35" />
-                </svg>
-              </a>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="11" cy="11" r="8" />
+                    <path d="m21 21-4.35-4.35" />
+                  </svg>
+                </a>
+              </div>
             </div>
           </div>
-        </div>
-      </header>
+        </header>
+      )}
 
       <main class="site-main">
         {sidebar ? (
-          <div class="container-sidebar">
-            <div class="sidebar-layout">
-              <aside class="sidebar-nav">{sidebar}</aside>
-              <div class="sidebar-main">
-                <div class="site-content">{children}</div>
-              </div>
-            </div>
+          <div class="site-container site-container-sidebar">
+            <aside class="sidebar-nav">{sidebar}</aside>
+            <div class="site-content">{children}</div>
           </div>
         ) : (
           <div class="site-container">
@@ -221,10 +229,7 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
       </main>
 
       {siteFooterHtml && (
-        <footer
-          class={`site-footer ${sidebar ? "site-footer-sidebar" : ""}`}
-          data-footer
-        >
+        <footer class="site-footer" data-footer>
           <div class="site-container">
             <div
               class="prose"
@@ -234,7 +239,15 @@ export const SiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
         </footer>
       )}
 
-      {isAuthenticated && <ComposeDialog collections={collections} />}
+      <jant-media-lightbox />
+      <jant-text-preview />
+      {isAuthenticated && <jant-post-menu />}
+      {isAuthenticated && showComposeDialog && (
+        <ComposeDialog
+          collections={collections}
+          uploadMaxFileSize={uploadMaxFileSize}
+        />
+      )}
     </div>
   );
 };