@jant/core 0.6.15 → 0.7.0

package/src/client/media-scroll-hint.ts

@@ -6,7 +6,8 @@
  * mouse or the keyboard has no obvious way to scroll it. This module:
  *
  *  - Toggles `.can-scroll-start` / `.can-scroll-end` on the wrap so CSS can
- *    fade the edge that has hidden content and reveal the matching arrow.
+ *    fade the edge that has hidden content and reveal the matching arrow,
+ *    re-measuring on scroll and on any size change of the strip or its items.
  *  - Wires the prev/next arrow buttons to scroll the strip by one page.
  *  - Scrolls the strip with Arrow / Home / End keys while it is focused.
  */
@@ -41,6 +42,39 @@ function scrollByStep(scroller: HTMLElement, direction: 1 | -1): void {
   });
 }
 
+/**
+ * Re-measure whenever the strip or its items change size.
+ *
+ * Scroll events alone are not enough: they only fire while the strip actually
+ * overflows, so a hint measured against a narrower strip — a smaller window at
+ * load time, a zoom change, an item that resolves its width late — latches on
+ * forever. The arrow keeps pointing at content that is already fully visible,
+ * and no scroll can ever happen to correct it.
+ */
+function watchLayout(wrap: HTMLElement, scroller: HTMLElement): void {
+  if (!("ResizeObserver" in globalThis)) return;
+
+  let raf = 0;
+  const schedule = (): void => {
+    cancelAnimationFrame(raf);
+    raf = requestAnimationFrame(() => updateHints(wrap));
+  };
+
+  // The strip covers viewport and column width changes; its items cover
+  // content width changes. Re-observe when a morph swaps the items out.
+  const observer = new globalThis.ResizeObserver(schedule);
+  const observeAll = (): void => {
+    observer.disconnect();
+    observer.observe(scroller);
+    for (const item of scroller.children) observer.observe(item);
+  };
+  observeAll();
+  new globalThis.MutationObserver(() => {
+    observeAll();
+    schedule();
+  }).observe(scroller, { childList: true });
+}
+
 function initWrap(wrap: HTMLElement): void {
   // Guard against double-init (initAll + the MutationObserver can overlap).
   if (wrap.dataset.scrollHintReady === "1") return;
@@ -48,11 +82,13 @@ function initWrap(wrap: HTMLElement): void {
   if (!scroller) return;
   wrap.dataset.scrollHintReady = "1";
 
-  // Initial check + keep edge hints in sync while scrolling.
+  // Initial check + keep edge hints in sync while scrolling and while the
+  // strip is resized or its items change.
   updateHints(wrap);
   scroller.addEventListener("scroll", () => updateHints(wrap), {
     passive: true,
   });
+  watchLayout(wrap, scroller);
 
   // Prev/next arrow buttons — the mouse affordance.
   wrap
@@ -117,3 +153,8 @@ if (document.readyState === "loading") {
   initAll();
   observer.observe(document.body, { childList: true, subtree: true });
 }
+
+export const __testOnly = {
+  initWrap,
+  updateHints,
+};

package/src/client/mediabunny.ts

@@ -0,0 +1,29 @@
+/**
+ * Lazy access to mediabunny.
+ *
+ * mediabunny is ≈900 KB minified (≈170 KB gzipped) and only does anything once
+ * a video or audio file is picked for upload, so the processors fetch it on
+ * demand instead of shipping it in `client-auth.js`. Same pattern as `heic-to`
+ * in `compose-bridge.ts`; the build guard in `vite.shared.ts` keeps it out of
+ * the entry chunks.
+ *
+ * @example
+ * ```ts
+ * const { Input, BlobSource, ALL_FORMATS } = await loadMediabunny();
+ * const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS });
+ * ```
+ */
+
+type Mediabunny = typeof import("mediabunny");
+
+let loading: Promise<Mediabunny> | undefined;
+
+/**
+ * Load mediabunny once and share the module across callers.
+ *
+ * @returns The mediabunny module namespace
+ */
+export function loadMediabunny(): Promise<Mediabunny> {
+  loading ??= import("mediabunny");
+  return loading;
+}

package/src/client/post-picker.ts

@@ -0,0 +1,41 @@
+import "./components/jant-post-picker.js";
+import type {
+  JantPostPicker,
+  PostPickerItem,
+  PostPickerOptions,
+} from "./components/jant-post-picker.js";
+
+const POST_PICKER_TAG = "jant-post-picker";
+
+/**
+ * Ensure the shared post picker is mounted once.
+ *
+ * @returns The mounted picker element
+ */
+export function ensurePostPicker(): JantPostPicker {
+  const existing = document.querySelector<JantPostPicker>(POST_PICKER_TAG);
+  if (existing) return existing;
+
+  const picker = document.createElement(POST_PICKER_TAG) as JantPostPicker;
+  document.body.appendChild(picker);
+  return picker;
+}
+
+/**
+ * Open the shared picker and resolve to the post the author chose.
+ *
+ * @param options - Copy, and the search that produces the candidates
+ * @returns The picked post's ID, or null when dismissed
+ * @example
+ * const id = await pickPost({
+ *   heading: "Link a translation",
+ *   placeholder: "Search your posts…",
+ *   emptyHint: "Nothing matched.",
+ *   search: (q) => fetchCandidates(q),
+ * });
+ */
+export function pickPost(options: PostPickerOptions): Promise<string | null> {
+  return ensurePostPicker().pick(options);
+}
+
+export type { PostPickerItem, PostPickerOptions };

package/src/client/post-refresh.ts

@@ -0,0 +1,135 @@
+/**
+ * In-place refresh of a rendered Post.
+ *
+ * Reply submission, draft publishing, and anything else that changes a Post
+ * server-side needs the same thing afterwards: re-render exactly the surface
+ * the Post is shown on — a thread page, a feed item, or a standalone card —
+ * without a full page load.
+ */
+
+import { hydratePartial } from "./hydrate-partial.js";
+import { getReplyRefreshTarget } from "./compose-launch.js";
+
+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();
+}
+
+export 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;
+  }
+}
+
+export 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;
+  }
+}
+
+export 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;
+  }
+}
+
+/**
+ * Re-renders whichever surface an article belongs to, reusing the same
+ * targeting the reply flow uses.
+ *
+ * @param article - The rendered `article[data-post]` element to refresh
+ * @returns Whether a surface was found and re-rendered
+ * @example
+ * ```ts
+ * if (!(await refreshArticleView(article))) globalThis.location.reload();
+ * ```
+ */
+export async function refreshArticleView(
+  article: HTMLElement,
+): Promise<boolean> {
+  const target = getReplyRefreshTarget(article);
+  if (!target) return false;
+
+  if (target.kind === "timeline-item") {
+    return refreshTimelineThreadView(target.id);
+  }
+  if (target.kind === "post-view") {
+    return refreshPostPageView(target.id);
+  }
+  return refreshPostCardView(target.id);
+}

package/src/client/runtime-paths.ts

@@ -4,10 +4,16 @@ import {
   toPublicAssetPath,
 } from "../lib/asset-path.js";
 import { toPublicHref } from "../lib/url.js";
+import { isPerLanguageSurface } from "../lib/per-language-surfaces.js";
 
 type FetchInput = Parameters<typeof fetch>[0];
 
-function sitePathPrefix(): string {
+/**
+ * The deployment's public path prefix, as the server stamped it on the page.
+ *
+ * @returns Prefix like `/blog`, or an empty string when the site is rooted
+ */
+export function sitePathPrefix(): string {
   return document.documentElement.dataset.sitePathPrefix || "";
 }
 
@@ -15,6 +21,27 @@ function assetBasePath(): string {
   return document.documentElement.dataset.assetBasePath || ASSET_BASE_PATH;
 }
 
+function viewBasePath(): string {
+  const base = document.documentElement.dataset.viewBasePath;
+  return base === undefined ? sitePathPrefix() : base;
+}
+
+/**
+ * Content language of the view the reader is in, as the server stamped it.
+ *
+ * The primary language is served at the root and stamps nothing, so `undefined`
+ * means "this site's default view", not "unknown". Send it to an API that
+ * narrows by language so the numbers it returns match the ones the page was
+ * rendered with.
+ *
+ * @returns BCP 47 tag like `en`, or undefined in the root view
+ * @example
+ * viewLang(); // "ja" on /ja/collections, undefined on /collections
+ */
+export function viewLang(): string | undefined {
+  return document.documentElement.dataset.viewLang || undefined;
+}
+
 export function publicPath(path: string): string {
   if (isAssetPath(path)) {
     return toPublicAssetPath(path, assetBasePath());
@@ -22,6 +49,52 @@ export function publicPath(path: string): string {
   return toPublicHref(path, sitePathPrefix());
 }
 
+/**
+ * Build a link to a target the caller knows exists once per language.
+ *
+ * The client-side counterpart of the server's `toViewPath`: it always carries
+ * the current view's language prefix. Reach for it when the call site knows
+ * what it is linking to — a collection row knows its target is a collection
+ * page, which is served per language even though it sits at `/{slug}` in the
+ * same root namespace as language-neutral post permalinks.
+ *
+ * When the target's kind is not known at the call site, use {@link navPath}.
+ *
+ * @param path - Internal app path such as `/collections` or a collection slug
+ * @returns Public path prefixed by the current view's language and site prefix
+ * @example
+ * viewPath("/collections"); // "/collections", or "/en/collections" under /en
+ */
+export function viewPath(path: string): string {
+  if (isAssetPath(path)) {
+    return toPublicAssetPath(path, assetBasePath());
+  }
+  return toPublicHref(path, viewBasePath());
+}
+
+/**
+ * Build a link to a target whose kind the call site does not know.
+ *
+ * The command palette navigates to settings pages, posts, and archives through
+ * one code path, so it cannot assert what any given target is. This keeps the
+ * reader in their language view for the surfaces that demonstrably exist per
+ * language, and leaves everything else at its single site-wide address — so a
+ * jump to `/settings` never becomes `/en/settings`, which is a 404.
+ *
+ * Paths in the root namespace (`/{slug}`) are left alone, because a post and a
+ * collection are indistinguishable there and posts have one address by design.
+ * A call site that knows better should say so with {@link viewPath}.
+ *
+ * @param path - Internal app path, query string included if there is one
+ * @returns Public path, carrying the view's language prefix where one applies
+ * @example
+ * navPath("/archive?media=any"); // "/en/archive?media=any" under /en
+ * navPath("/settings"); // "/settings" — the dashboard is one place
+ */
+export function navPath(path: string): string {
+  return isPerLanguageSurface(path) ? viewPath(path) : publicPath(path);
+}
+
 function normalizeFetchInput(input: FetchInput | URL): FetchInput | URL {
   if (typeof input === "string") {
     if (/^https?:\/\//.test(input)) {

package/src/client/settings-bridge.ts

@@ -19,26 +19,22 @@ import { showToast } from "./toast.js";
 function parseSettingsInitialData(data: unknown): SettingsInitialData | null {
   const siteName = getJsonString(data, "siteName");
   const siteDescription = getJsonString(data, "siteDescription");
-  const siteLanguage = getJsonString(data, "siteLanguage");
-  // Tolerate older payloads without the key: empty = follow content language.
-  const dashboardLanguage = getJsonString(data, "dashboardLanguage") ?? "";
-  const cjkSerifFont = getJsonString(data, "cjkSerifFont");
   const mainRssFeed = getJsonString(data, "mainRssFeed");
   const timeZone = getJsonString(data, "timeZone");
   const siteFooter = getJsonString(data, "siteFooter");
   const showJantBrandingOnHome = getJsonBoolean(data, "showJantBrandingOnHome");
   const noindex = getJsonBoolean(data, "noindex");
+  const discover = getJsonString(data, "discover");
 
   if (
     siteName === undefined ||
     siteDescription === undefined ||
-    siteLanguage === undefined ||
-    cjkSerifFont === undefined ||
     mainRssFeed === undefined ||
     timeZone === undefined ||
     siteFooter === undefined ||
     showJantBrandingOnHome === undefined ||
-    noindex === undefined
+    noindex === undefined ||
+    discover === undefined
   ) {
     return null;
   }
@@ -46,14 +42,12 @@ function parseSettingsInitialData(data: unknown): SettingsInitialData | null {
   return {
     siteName,
     siteDescription,
-    siteLanguage,
-    dashboardLanguage,
-    cjkSerifFont,
     mainRssFeed,
     timeZone,
     siteFooter,
     showJantBrandingOnHome,
     noindex,
+    discover,
   };
 }
 

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

@@ -8,9 +8,18 @@
 const moreControllers = new WeakMap();
 const drawerControllers = new WeakMap();
 
-function initMoreDropdown(root) {
-  const trigger = root.querySelector(".site-header-more-btn");
-  const popover = root.querySelector(".site-header-more-popover");
+/** Header dropdowns, in the order they appear: the "More" nav overflow and,
+ *  on a multilingual site, the language switcher. Both behave identically —
+ *  click to toggle, outside click or Escape to close, opening one closes the
+ *  other via the shared `basecoat:popover` event. */
+const DROPDOWNS = [
+  { trigger: ".site-header-more-btn", popover: ".site-header-more-popover" },
+  { trigger: ".site-header-lang-btn", popover: ".site-header-lang-popover" },
+];
+
+function initDropdown(root, triggerSelector, popoverSelector) {
+  const trigger = root.querySelector(triggerSelector);
+  const popover = root.querySelector(popoverSelector);
 
   if (!trigger || !popover) return;
   if (trigger.dataset.moreInitialized === "true") return;
@@ -129,8 +138,10 @@ export function initSiteHeaderNav(root = document) {
   // --- Freshness indicators ---
   initNavFreshness(root);
 
-  // --- More dropdown ---
-  initMoreDropdown(root);
+  // --- Header dropdowns ---
+  for (const { trigger, popover } of DROPDOWNS) {
+    initDropdown(root, trigger, popover);
+  }
 
   // --- Mobile drawer ---
   if (!hamburger || !drawer || !backdrop) return;
@@ -210,7 +221,8 @@ export function initSiteHeaderNav(root = document) {
 }
 
 export function destroySiteHeaderNav(root = document) {
-  for (const trigger of root.querySelectorAll(".site-header-more-btn")) {
+  const triggerSelector = DROPDOWNS.map((d) => d.trigger).join(", ");
+  for (const trigger of root.querySelectorAll(triggerSelector)) {
     const controller = moreControllers.get(trigger);
     controller?.abort();
     moreControllers.delete(trigger);

package/src/client/smart-collection-dialog-host.ts

@@ -0,0 +1,116 @@
+/**
+ * Smart collection dialog host.
+ *
+ * One dialog element for the whole page, mounted lazily and reused. Three
+ * places open it — the collections page menu, a directory row's menu, and the
+ * smart collection page's own menu — and they all go through
+ * {@link openSmartCollectionDialog}, because creating and editing are one
+ * surface.
+ */
+
+import "./components/jant-smart-collection-dialog.js";
+import type { JantSmartCollectionDialog } from "./components/jant-smart-collection-dialog.js";
+import type {
+  SmartCollectionDialogLabels,
+  SmartCollectionDialogState,
+} from "./components/smart-collection-dialog-types.js";
+import { setCollectionVocabulary } from "./components/smart-collection-conditions.js";
+import { publicPath } from "./runtime-paths.js";
+
+const LABELS_ATTRIBUTE = "data-smart-collection-dialog-labels";
+
+let labels: SmartCollectionDialogLabels | null = null;
+let element: JantSmartCollectionDialog | null = null;
+let collections: Promise<SiteCollection[]> | null = null;
+
+interface SiteCollection {
+  id: string;
+  slug: string;
+  title: string;
+}
+
+/**
+ * The dialog's strings, rendered into the page by whichever surface can open
+ * it. Read once and cached: they are the same on every surface of a page, and
+ * the collection vocabulary is written into this object once it loads.
+ */
+function readLabels(): SmartCollectionDialogLabels | null {
+  if (labels) return labels;
+  const holder = document.querySelector<HTMLElement>(`[${LABELS_ATTRIBUTE}]`);
+  const raw = holder?.getAttribute(LABELS_ATTRIBUTE);
+  if (!raw) return null;
+  try {
+    labels = JSON.parse(raw) as SmartCollectionDialogLabels;
+    return labels;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Load the site's collections so the collection condition can offer them.
+ *
+ * Fetched at most once per page, and only when the dialog is actually opened —
+ * most page loads never open it. The names are written into the labels on every
+ * open rather than only on the first: an opened-once flag would leave the
+ * second open with a collection menu that lists nothing.
+ */
+async function ensureCollectionVocabulary(
+  target: SmartCollectionDialogLabels,
+): Promise<void> {
+  collections ??= fetchCollections();
+  const loaded = await collections;
+  setCollectionVocabulary(loaded);
+  for (const collection of loaded) {
+    target.values[`collection.${collection.slug}`] = collection.title;
+  }
+}
+
+async function fetchCollections(): Promise<SiteCollection[]> {
+  try {
+    const res = await fetch(publicPath("/api/collections"));
+    if (!res.ok) return [];
+    const json = (await res.json()) as { collections?: SiteCollection[] };
+    return json.collections ?? [];
+  } catch {
+    // The condition is still offered; it simply lists nothing to choose.
+    return [];
+  }
+}
+
+function ensureElement(
+  dialogLabels: SmartCollectionDialogLabels,
+): JantSmartCollectionDialog {
+  if (element?.isConnected) {
+    element.labels = dialogLabels;
+    return element;
+  }
+  element = document.createElement(
+    "jant-smart-collection-dialog",
+  ) as JantSmartCollectionDialog;
+  element.labels = dialogLabels;
+  document.body.appendChild(element);
+  return element;
+}
+
+/**
+ * Open the smart collection dialog.
+ *
+ * @param options.smartCollectionId - Edit this one; omit to create a new one
+ * @param options.prefill - Starting values, shown to the author before anything
+ *   is saved
+ * @returns Whether anything was created, changed, or deleted
+ * @example
+ * await openSmartCollectionDialog({ smartCollectionId: "smc_…" });
+ */
+export async function openSmartCollectionDialog(options: {
+  smartCollectionId?: string;
+  prefill?: SmartCollectionDialogState;
+}): Promise<boolean> {
+  const dialogLabels = readLabels();
+  if (!dialogLabels) return false;
+
+  await ensureCollectionVocabulary(dialogLabels);
+  const dialog = ensureElement(dialogLabels);
+  return dialog.open(options);
+}