@jant/core 0.3.39 → 0.3.42

package/src/client/site-header-nav.js

@@ -1,38 +1,37 @@
 /**
- * Site Header Overflow Menu
+ * Site Header — Mobile Drawer + More Dropdown
  *
- * Initializes the public site header's "more links" dropdown.
- * The markup follows BaseCoat's dropdown structure, but we manage
- * this menu locally so it works even when BaseCoat's JS isn't loaded.
+ * Toggles a slide-in drawer on mobile for navigation and search.
+ * Manages the "More" dropdown popover.
  */
 
-document.querySelectorAll(".site-header-more").forEach((menuRoot) => {
-  if (menuRoot.dataset.siteHeaderMenuInitialized === "true") return;
+function initMoreDropdown(root) {
+  const trigger = root.querySelector(".site-header-more-btn");
+  const popover = root.querySelector(".site-header-more-popover");
 
-  const trigger = menuRoot.querySelector(":scope > button");
-  const popover = menuRoot.querySelector(":scope > [data-popover]");
-  const menu = popover ? popover.querySelector('[role="menu"]') : null;
+  if (!trigger || !popover) return;
+  if (trigger.dataset.moreInitialized === "true") return;
+  trigger.dataset.moreInitialized = "true";
 
-  if (!trigger || !popover || !menu) return;
+  function open() {
+    popover.setAttribute("aria-hidden", "false");
+    trigger.setAttribute("aria-expanded", "true");
+    document.dispatchEvent(
+      new CustomEvent("basecoat:popover", {
+        detail: { source: trigger.parentElement },
+      }),
+    );
+  }
 
-  const close = (focusTrigger = false) => {
-    if (popover.getAttribute("aria-hidden") === "true") return;
+  function close(focusTrigger = false) {
     popover.setAttribute("aria-hidden", "true");
     trigger.setAttribute("aria-expanded", "false");
     if (focusTrigger) trigger.focus();
-  };
-
-  const open = () => {
-    document.dispatchEvent(
-      new CustomEvent("basecoat:popover", { detail: { source: menuRoot } }),
-    );
-    popover.setAttribute("aria-hidden", "false");
-    trigger.setAttribute("aria-expanded", "true");
-  };
+  }
 
-  trigger.addEventListener("click", (event) => {
-    event.preventDefault();
-    event.stopPropagation();
+  trigger.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (trigger.getAttribute("aria-expanded") === "true") {
       close();
     } else {
@@ -40,45 +39,134 @@ document.querySelectorAll(".site-header-more").forEach((menuRoot) => {
     }
   });
 
-  trigger.addEventListener("keydown", (event) => {
-    if (
-      event.key === "Enter" ||
-      event.key === " " ||
-      event.key === "ArrowDown"
-    ) {
-      event.preventDefault();
-      open();
-      const firstItem = menu.querySelector('[role="menuitem"]');
-      if (firstItem instanceof HTMLElement) {
-        firstItem.focus();
-      }
-      return;
-    }
+  document.addEventListener("click", (e) => {
+    if (!(e.target instanceof Node)) return;
+    if (!trigger.parentElement?.contains(e.target)) close();
+  });
 
-    if (event.key === "Escape") {
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && popover.getAttribute("aria-hidden") === "false") {
       close(true);
     }
   });
 
-  popover.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      close(true);
+  document.addEventListener("basecoat:popover", (e) => {
+    if (e.detail?.source !== trigger.parentElement) close();
+  });
+}
+
+const FRESH_VISIT_KEY = "jant:nav-fresh-visits";
+
+function createFreshBadge() {
+  const badge = document.createElement("span");
+  badge.className = "site-header-link-fresh";
+  badge.setAttribute("aria-hidden", "true");
+  badge.textContent = "*";
+  return badge;
+}
+
+function initNavFreshness(root) {
+  try {
+    const stored = JSON.parse(localStorage.getItem(FRESH_VISIT_KEY) || "{}");
+    const currentPath = location.pathname;
+
+    const freshLinks = root.querySelectorAll("[data-fresh-at]");
+    for (const link of freshLinks) {
+      const href = new URL(link.href).pathname;
+      const freshAt = parseInt(link.dataset.freshAt, 10);
+
+      if (href === currentPath) {
+        // User is on this collection page — record the visit
+        stored[href] = Math.floor(Date.now() / 1000);
+      } else {
+        // Show dot only if user hasn't visited since the last update
+        const visitedAt = stored[href];
+        if (!visitedAt || visitedAt < freshAt) {
+          // Insert dot after the text, before any external link icon
+          const icon = link.querySelector("svg");
+          link.insertBefore(createFreshBadge(), icon);
+        }
+      }
+    }
+
+    localStorage.setItem(FRESH_VISIT_KEY, JSON.stringify(stored));
+  } catch {
+    // localStorage unavailable or corrupted — ignore
+  }
+}
+
+export function initSiteHeaderNav(root = document) {
+  const hamburger = root.querySelector(".site-header-hamburger");
+  const drawer = root.querySelector("#site-nav-drawer");
+  const backdrop = root.querySelector(".site-nav-drawer-backdrop");
+  const closeBtn = drawer?.querySelector(".site-nav-drawer-close");
+
+  // --- Freshness indicators ---
+  initNavFreshness(root);
+
+  // --- More dropdown ---
+  initMoreDropdown(root);
+
+  // --- Mobile drawer ---
+  if (!hamburger || !drawer || !backdrop) return;
+  if (hamburger.dataset.drawerInitialized === "true") return;
+  hamburger.dataset.drawerInitialized = "true";
+
+  function open() {
+    drawer.setAttribute("aria-hidden", "false");
+    drawer.removeAttribute("inert");
+    backdrop.setAttribute("aria-hidden", "false");
+    hamburger.setAttribute("aria-expanded", "true");
+    document.documentElement.classList.add("drawer-open");
+
+    const firstFocusable =
+      drawer.querySelector(".site-nav-drawer-close") ??
+      drawer.querySelector("a[href], button");
+    if (firstFocusable) firstFocusable.focus();
+  }
+
+  function close(returnFocus = true) {
+    drawer.setAttribute("aria-hidden", "true");
+    backdrop.setAttribute("aria-hidden", "true");
+    hamburger.setAttribute("aria-expanded", "false");
+    document.documentElement.classList.remove("drawer-open");
+
+    drawer.addEventListener(
+      "transitionend",
+      () => {
+        if (drawer.getAttribute("aria-hidden") === "true") {
+          drawer.setAttribute("inert", "");
+        }
+      },
+      { once: true },
+    );
+
+    if (returnFocus) hamburger.focus();
+  }
+
+  hamburger.addEventListener("click", () => {
+    if (hamburger.getAttribute("aria-expanded") === "true") {
+      close();
+    } else {
+      open();
     }
   });
 
-  document.addEventListener("click", (event) => {
-    if (!(event.target instanceof Node)) return;
-    if (!menuRoot.contains(event.target)) {
+  closeBtn?.addEventListener("click", () => close());
+  backdrop.addEventListener("click", () => close());
+  drawer.addEventListener("click", (event) => {
+    if (!(event.target instanceof Element)) return;
+    if (event.target.closest("a[href]")) {
       close(false);
     }
   });
 
-  document.addEventListener("basecoat:popover", (event) => {
-    if (event.detail?.source !== menuRoot) {
-      close(false);
+  drawer.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
     }
   });
+}
 
-  menuRoot.dataset.siteHeaderMenuInitialized = "true";
-});
+initSiteHeaderNav();

package/src/client/sortable-list.ts

@@ -15,6 +15,8 @@ import type { SortableEvent, SortableOptions } from "sortablejs";
 export const responsiveSortableOptions = {
   animation: 180,
   bubbleScroll: false,
+  delay: 150,
+  delayOnTouchOnly: true,
   fallbackTolerance: 4,
   forceAutoScrollFallback: true,
   scrollSensitivity: 56,

package/src/client/thread-context.ts

@@ -11,10 +11,19 @@ function parsePixelValue(value: string, fallback: number): number {
 }
 
 function getCollapsedMaxHeight(container: HTMLElement): number {
-  const value = getComputedStyle(container).getPropertyValue(
-    "--site-thread-context-max-height",
-  );
-  return parsePixelValue(value, 188);
+  const wasExpanded = container.classList.contains("expanded");
+  if (wasExpanded) {
+    container.classList.remove("expanded");
+  }
+
+  const value = getComputedStyle(container).maxHeight;
+  const maxHeight = parsePixelValue(value, 188);
+
+  if (wasExpanded) {
+    container.classList.add("expanded");
+  }
+
+  return maxHeight;
 }
 
 function getPendingImages(container: HTMLElement): HTMLImageElement[] {
@@ -117,6 +126,41 @@ export function setupThreadContexts(
   });
 }
 
+function isFirstThreadDetailItem(current: HTMLElement): boolean {
+  const group = current.closest<HTMLElement>(".thread-group-detail");
+  if (!group) return false;
+
+  const firstItem = group.querySelector<HTMLElement>(".thread-detail-item");
+  return firstItem === current;
+}
+
+function isContinueHash(): boolean {
+  return globalThis.location.hash === "#continue";
+}
+
+function scrollCurrentDetailPostIntoView(
+  root: globalThis.Document | globalThis.Element = document,
+): void {
+  const current = root.querySelector("[data-post-current]");
+  if (!(current instanceof HTMLElement)) return;
+
+  const continueHash = isContinueHash();
+
+  // Explicit hashes still win, except for #continue on thread detail pages.
+  if (globalThis.location.hash && !continueHash) return;
+
+  const scrollBehavior = continueHash ? "auto" : "smooth";
+  const isFirstItem = isFirstThreadDetailItem(current);
+
+  requestAnimationFrame(() => {
+    // Root posts should stay at the top, but #continue deep-links need to be
+    // reset because permalink thread pages should open at the current post start.
+    if (isFirstItem && !continueHash) return;
+
+    current.scrollIntoView({ behavior: scrollBehavior, block: "start" });
+  });
+}
+
 // Expand/collapse: event delegation on toggle buttons
 document.addEventListener("click", (e) => {
   const toggle = (e.target as HTMLElement).closest<HTMLElement>(
@@ -136,11 +180,10 @@ document.addEventListener("click", (e) => {
 // Auto-scroll to current post on detail pages
 document.addEventListener("DOMContentLoaded", () => {
   setupThreadContexts(document);
-
-  const current = document.querySelector("[data-post-current]");
-  if (!current) return;
-
-  requestAnimationFrame(() => {
-    current.scrollIntoView({ behavior: "smooth", block: "center" });
-  });
+  scrollCurrentDetailPostIntoView(document);
 });
+
+export const __testOnly = {
+  isFirstThreadDetailItem,
+  scrollCurrentDetailPostIntoView,
+};

package/src/client/tiptap/__tests__/block-insertion.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { Editor } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import { ImageNode } from "../image-node.js";
+import { MoreBreak } from "../more-break.js";
+
+const editors: Editor[] = [];
+
+function createEditor() {
+  const element = document.createElement("div");
+  document.body.appendChild(element);
+
+  const editor = new Editor({
+    element,
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [1, 2, 3] },
+        link: { openOnClick: false, autolink: false },
+      }),
+      ImageNode,
+      MoreBreak,
+    ],
+    content: "<p></p>",
+  });
+
+  editors.push(editor);
+  return editor;
+}
+
+afterEach(() => {
+  while (editors.length > 0) {
+    editors.pop()?.destroy();
+  }
+  document.body.innerHTML = "";
+});
+
+describe("Block insertion flow", () => {
+  it("moves the cursor into the next paragraph after inserting read more", () => {
+    const editor = createEditor();
+
+    editor.commands.focus("start");
+
+    expect(editor.commands.insertMoreBreak()).toBe(true);
+    expect(editor.state.doc.firstChild?.type.name).toBe("moreBreak");
+    expect(editor.state.doc.lastChild?.type.name).toBe("paragraph");
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
+    expect(editor.state.selection.$from.parentOffset).toBe(0);
+  });
+
+  it("moves the cursor into the next paragraph after inserting an image", () => {
+    const editor = createEditor();
+
+    editor.commands.focus("start");
+
+    expect(editor.commands.setImage({ src: "/uploads/test.webp" })).toBe(true);
+    expect(editor.state.doc.firstChild?.type.name).toBe("image");
+    expect(editor.state.doc.lastChild?.type.name).toBe("paragraph");
+    expect(editor.state.selection.empty).toBe(true);
+    expect(editor.state.selection.$from.parent.type.name).toBe("paragraph");
+    expect(editor.state.selection.$from.parentOffset).toBe(0);
+  });
+});