@jant/core 0.6.16 → 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/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);
+}

package/src/client/smart-collection-page-actions.ts

@@ -0,0 +1,208 @@
+/**
+ * Smart collection page owner menu.
+ *
+ * The same menu shape a collection page has, item for item — Edit, Add to
+ * navigation, Edit navigation, Delete — with one difference: Edit opens the
+ * dialog rather than navigating to an editor page, because a smart collection
+ * has no editor page. There is no Edit button beside the title either; a
+ * collection page has none, and the menu is where a page keeps its owner
+ * actions.
+ */
+
+import { getCollectionsDirectoryPath } from "../lib/collection-paths.js";
+import { addSmartCollectionToNavigation } from "./collection-navigation.js";
+import { NAVIGATION_SETTINGS_PATH } from "../lib/settings-paths.js";
+import { showConfirmDialog } from "./confirm.js";
+import { showToast, showToastWithAction } from "./toast.js";
+import { openSmartCollectionDialog } from "./smart-collection-dialog-host.js";
+
+interface PageActionLabels {
+  addToNavigation: string;
+  addingToNavigation: string;
+  addedToNavigation: string;
+  editNavigation: string;
+  addToNavigationFailed: string;
+  confirmDelete: string;
+  deleteCollection: string;
+  cancel: string;
+  saveFailed: string;
+  deleted: string;
+}
+
+const parseLabels = (value: string | undefined): PageActionLabels => {
+  const empty: PageActionLabels = {
+    addToNavigation: "",
+    addingToNavigation: "",
+    addedToNavigation: "",
+    editNavigation: "",
+    addToNavigationFailed: "",
+    confirmDelete: "",
+    deleteCollection: "",
+    cancel: "",
+    saveFailed: "",
+    deleted: "",
+  };
+  if (!value) return empty;
+  try {
+    return { ...empty, ...(JSON.parse(value) as Partial<PageActionLabels>) };
+  } catch {
+    return empty;
+  }
+};
+
+document
+  .querySelectorAll<HTMLElement>("[data-smart-collection-page-actions]")
+  .forEach((root) => {
+    if (root.dataset.smartCollectionPageActionsInitialized === "true") return;
+
+    const labels = parseLabels(root.dataset.collectionPageLabels);
+    const smartCollectionId = root.dataset.smartCollectionId;
+    const redirectUrl =
+      root.dataset.collectionPageRedirectUrl || getCollectionsDirectoryPath();
+    const trigger = root.querySelector<HTMLElement>(
+      "[data-collection-page-action='toggle-menu']",
+    );
+    const menu = root.querySelector<HTMLElement>("[data-collection-page-menu]");
+    const addToNavigationButton = root.querySelector<HTMLButtonElement>(
+      "[data-collection-page-action='add-to-navigation']",
+    );
+    const editNavigationLink = root.querySelector<HTMLAnchorElement>(
+      "[data-collection-page-edit-navigation]",
+    );
+
+    if (!smartCollectionId || !trigger || !menu) return;
+
+    const closeMenu = (focusTrigger = false) => {
+      if (menu.hidden) return;
+      menu.hidden = true;
+      trigger.setAttribute("aria-expanded", "false");
+      if (focusTrigger) trigger.focus();
+    };
+
+    const openMenu = (focusFirstItem = false) => {
+      menu.hidden = false;
+      trigger.setAttribute("aria-expanded", "true");
+      if (focusFirstItem) {
+        menu.querySelector<HTMLElement>("[role='menuitem']")?.focus();
+      }
+    };
+
+    const handleEdit = async () => {
+      closeMenu(false);
+      const changed = await openSmartCollectionDialog({ smartCollectionId });
+      // The address, the title, the conditions, and the count can all have
+      // moved, so the page is re-read rather than patched in place.
+      if (changed) window.location.reload();
+    };
+
+    const handleDelete = async () => {
+      closeMenu(false);
+      const confirmed = await showConfirmDialog({
+        message: labels.confirmDelete,
+        confirmLabel: labels.deleteCollection,
+        cancelLabel: labels.cancel,
+        tone: "danger",
+      });
+      if (!confirmed) return;
+
+      try {
+        const res = await fetch(`/api/smart-collections/${smartCollectionId}`, {
+          method: "DELETE",
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        showToast(labels.deleted);
+        window.location.href = redirectUrl;
+      } catch {
+        showToast(labels.saveFailed, "error");
+      }
+    };
+
+    const handleAddToNavigation = async () => {
+      if (!addToNavigationButton || addToNavigationButton.disabled) return;
+
+      closeMenu(false);
+      const label = addToNavigationButton.querySelector<HTMLElement>(
+        ".collections-page-menu-item-label",
+      );
+      addToNavigationButton.disabled = true;
+      if (label) label.textContent = labels.addingToNavigation;
+
+      try {
+        await addSmartCollectionToNavigation(smartCollectionId);
+
+        addToNavigationButton.hidden = true;
+        if (editNavigationLink) editNavigationLink.hidden = false;
+        root.dataset.collectionInNavigation = "true";
+        showToastWithAction(labels.addedToNavigation, {
+          label: labels.editNavigation,
+          href:
+            editNavigationLink?.getAttribute("href") ??
+            NAVIGATION_SETTINGS_PATH,
+        });
+      } catch {
+        showToast(labels.addToNavigationFailed, "error");
+      } finally {
+        addToNavigationButton.disabled = false;
+        if (label) label.textContent = labels.addToNavigation;
+      }
+    };
+
+    trigger.addEventListener("click", (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (menu.hidden) openMenu(false);
+      else closeMenu(false);
+    });
+
+    trigger.addEventListener("keydown", (event) => {
+      if (
+        event.key === "Enter" ||
+        event.key === " " ||
+        event.key === "ArrowDown"
+      ) {
+        event.preventDefault();
+        if (menu.hidden) openMenu(true);
+        else closeMenu(false);
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu(true);
+      }
+    });
+
+    menu.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closeMenu(true);
+      }
+    });
+
+    root.addEventListener("click", (event) => {
+      const target = event.target as HTMLElement | null;
+      const actionEl = target?.closest<HTMLElement>(
+        "[data-collection-page-action]",
+      );
+      if (!actionEl || !root.contains(actionEl)) return;
+
+      const action = actionEl.dataset.collectionPageAction;
+      if (action === "edit") {
+        event.preventDefault();
+        void handleEdit();
+      }
+      if (action === "delete") {
+        event.preventDefault();
+        void handleDelete();
+      }
+      if (action === "add-to-navigation") {
+        event.preventDefault();
+        void handleAddToNavigation();
+      }
+    });
+
+    document.addEventListener("click", (event) => {
+      if (!(event.target instanceof Node)) return;
+      if (!root.contains(event.target)) closeMenu(false);
+    });
+
+    root.dataset.smartCollectionPageActionsInitialized = "true";
+  });