@jant/core 0.6.16 → 0.7.0

package/src/client/compose-launch.ts

@@ -1,4 +1,5 @@
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
+import { ensureCompose } from "./lazy-entries.js";
 import { showToast } from "./toast.js";
 
 interface ReplyToData {
@@ -17,12 +18,64 @@ export interface ComposeOpenOptions {
   initialFormat?: "note" | "link" | "quote";
 }
 
+/**
+ * The composer element the server rendered, upgraded or not.
+ *
+ * Use it to ask whether the page has a composer; to call it, go through
+ * {@link ensureComposeDialog}.
+ *
+ * @returns The element, or null when the page has no composer
+ */
 export function getComposeDialog(): JantComposeDialog | null {
   return document.querySelector(
     "jant-compose-dialog",
   ) as JantComposeDialog | null;
 }
 
+/**
+ * The composer, ready to take calls.
+ *
+ * The composer ships in its own bundle, loaded on first use, so the element
+ * the server rendered may still be an unupgraded tag when a button is
+ * clicked. This loads the bundle — which defines the element and upgrades it
+ * in place — before handing the element back.
+ *
+ * @returns The upgraded composer, or null when the page has no composer
+ * @example
+ * ```ts
+ * const dialog = await ensureComposeDialog();
+ * await dialog?.openTranslation(threadId, "zh-Hans");
+ * ```
+ */
+export async function ensureComposeDialog(): Promise<JantComposeDialog | null> {
+  const dialog = getComposeDialog();
+  if (!dialog) return null;
+  await ensureCompose();
+  return dialog;
+}
+
+/**
+ * The composer's translated strings, readable before its bundle has loaded.
+ *
+ * The post menu borrows labels the server rendered onto the composer for its
+ * inline collection form. Until the element upgrades, Lit has not parsed the
+ * `labels` attribute into a property, so read the attribute directly then.
+ *
+ * @returns The labels, or null when the page has no composer or no labels
+ */
+export function readComposeDialogLabels(): JantComposeDialog["labels"] | null {
+  const dialog = getComposeDialog();
+  if (!dialog) return null;
+  if (dialog.labels) return dialog.labels;
+  const raw = dialog.getAttribute("labels");
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as JantComposeDialog["labels"];
+  } catch {
+    return null;
+  }
+}
+
 export function getActiveCollectionId(): string | undefined {
   return (
     document.querySelector<HTMLElement>(
@@ -133,14 +186,35 @@ function getReplyData(article: HTMLElement): ReplyToData {
 export async function openNewCompose(
   options?: ComposeOpenOptions,
 ): Promise<void> {
-  await getComposeDialog()?.openNew(options);
+  const dialog = await ensureComposeDialog();
+  await dialog?.openNew(options);
+}
+
+/**
+ * Open a post in the composer for editing.
+ *
+ * @param postId - The post to edit
+ */
+export async function openEditForPost(postId: string): Promise<void> {
+  const dialog = await ensureComposeDialog();
+  await dialog?.openEdit(postId);
+}
+
+/**
+ * Open a draft in the composer, from the draft preview page.
+ *
+ * @param postId - The draft to continue
+ */
+export async function openDraftForPost(postId: string): Promise<void> {
+  const dialog = await ensureComposeDialog();
+  await dialog?.openDraft(postId);
 }
 
 export async function openReplyForArticle(article: HTMLElement): Promise<void> {
   const postId = article.dataset.postId;
   if (!postId) return;
 
-  const dialog = getComposeDialog();
+  const dialog = await ensureComposeDialog();
   if (!dialog) return;
 
   // Only surfaces that hide the trailing draft redirect to it — the feed hands

package/src/client/compose-shortcuts.ts

@@ -3,6 +3,8 @@ import {
   getComposeDialog,
   getCurrentDetailPostArticle,
   getReplyTargetArticle,
+  openDraftForPost,
+  openEditForPost,
   openNewCompose,
   openReplyForArticle,
 } from "./compose-launch.js";
@@ -64,14 +66,13 @@ function openEditFromQueryParam() {
 
   const article = getCurrentDetailPostArticle();
   const postId = article?.dataset.postId;
-  const composeEl = getComposeDialog();
-  if (!postId || !composeEl) return;
+  if (!postId || !getComposeDialog()) return;
 
   consumeEditQueryParam();
   if (document.querySelector("[data-preview-status]")) {
-    void composeEl.openDraft(postId);
+    void openDraftForPost(postId);
   } else {
-    void composeEl.openEdit(postId);
+    void openEditForPost(postId);
   }
 }
 
@@ -141,10 +142,7 @@ document.addEventListener("keydown", (event: globalThis.KeyboardEvent) => {
     const postId = article.dataset.postId;
     if (!postId) return;
     event.preventDefault();
-    const composeEl = getComposeDialog();
-    if (composeEl) {
-      void composeEl.openEdit(postId);
-    }
+    void openEditForPost(postId);
     return;
   }
 

package/src/client/compose-triggers.ts

@@ -0,0 +1,50 @@
+/**
+ * Server-rendered buttons that open the composer.
+ *
+ * The composer ships in its own bundle, loaded on first use, so markup the
+ * server renders must not call the element directly: an unupgraded
+ * `<jant-compose-dialog>` has no methods yet. Buttons carry a data attribute
+ * instead, and this module — always on a signed-in page — turns the click
+ * into a call through `compose-launch.ts`, which loads the bundle first.
+ *
+ * - `[data-compose-open]`, with an optional `data-compose-collection-id`:
+ *   start a new post
+ * - `[data-reply-trigger]` inside `article[data-post]`: reply to that post
+ * - `[data-draft-continue]`: reopen an inline draft in the editor
+ */
+
+import {
+  openEditForPost,
+  openNewCompose,
+  openReplyForArticle,
+} from "./compose-launch.js";
+
+document.addEventListener("click", (event: MouseEvent) => {
+  const origin =
+    event.target instanceof globalThis.Element ? event.target : null;
+  if (!origin) return;
+
+  const composeOpen = origin.closest<HTMLElement>("[data-compose-open]");
+  if (composeOpen) {
+    const collectionId = composeOpen.dataset.composeCollectionId;
+    void openNewCompose(collectionId ? { collectionId } : undefined);
+    return;
+  }
+
+  const replyTrigger = origin.closest<HTMLElement>("[data-reply-trigger]");
+  if (replyTrigger) {
+    const article = replyTrigger.closest<HTMLElement>("article[data-post]");
+    if (article) void openReplyForArticle(article);
+    return;
+  }
+
+  // The badge on an inline draft doubles as its most likely next action.
+  // Publish and Delete live in the post menu with every other post action.
+  const draftContinue = origin.closest<HTMLElement>("[data-draft-continue]");
+  if (draftContinue) {
+    const postId =
+      draftContinue.dataset.postId ??
+      draftContinue.closest<HTMLElement>("article[data-post]")?.dataset.postId;
+    if (postId) void openEditForPost(postId);
+  }
+});

package/src/client/copy-field.ts

@@ -0,0 +1,108 @@
+/**
+ * Copy field behavior.
+ *
+ * Enhances the read-only address fields rendered by `ui/shared/CopyField.tsx`
+ * and by the feed URL rows in General settings. Delegated from the document, so
+ * fields that appear later — the settings page renders its rows from Lit after
+ * load — are covered without re-running anything.
+ *
+ * Two behaviors carry the weight here and must both stay:
+ *
+ * - The button writes the address to the clipboard and reports either way.
+ * - Clicking or focusing the input selects the whole address. The Clipboard API
+ *   is absent on insecure origins and can be denied by permission, so manual
+ *   selection is what keeps the address obtainable when the button cannot work.
+ *
+ * The server renders the button `hidden` — without this script it would be an
+ * affordance that does nothing — and it is revealed here. The input alone is
+ * the no-JavaScript state, and it is a usable one.
+ */
+
+import {
+  COPY_FIELD_BUTTON_ATTR,
+  COPY_FIELD_FAILED_ATTR,
+  COPY_FIELD_VALUE_ATTR,
+} from "../lib/copy-field.js";
+import { showToast } from "./toast.js";
+
+const BUTTON_SELECTOR = `[${COPY_FIELD_BUTTON_ATTR}]`;
+const VALUE_SELECTOR = `[${COPY_FIELD_VALUE_ATTR}]`;
+
+/**
+ * Find the address a copy button belongs to.
+ *
+ * @param button - The copy button that was activated
+ * @returns The input holding the address, or null when the field is malformed
+ */
+function findValueInput(button: HTMLElement): HTMLInputElement | null {
+  return (
+    button.parentElement?.querySelector<HTMLInputElement>(VALUE_SELECTOR) ??
+    button
+      .closest("[data-copy-field-root]")
+      ?.querySelector<HTMLInputElement>(VALUE_SELECTOR) ??
+    null
+  );
+}
+
+async function copy(button: HTMLElement): Promise<void> {
+  const input = findValueInput(button);
+  if (!input) return;
+
+  const failedMessage = button.getAttribute(COPY_FIELD_FAILED_ATTR) ?? "";
+
+  try {
+    if (!globalThis.navigator.clipboard?.writeText) {
+      throw new Error("Clipboard unavailable");
+    }
+
+    await globalThis.navigator.clipboard.writeText(input.value);
+    showToast(button.getAttribute(COPY_FIELD_BUTTON_ATTR) || "");
+  } catch {
+    showToast(failedMessage, "error");
+  }
+}
+
+/** Reveal buttons the server rendered hidden. */
+function revealButtons(root: globalThis.ParentNode = document): void {
+  for (const button of Array.from(
+    root.querySelectorAll<HTMLElement>(`${BUTTON_SELECTOR}[hidden]`),
+  )) {
+    button.hidden = false;
+  }
+}
+
+document.addEventListener("click", (event: globalThis.MouseEvent) => {
+  const target = event.target;
+  if (!(target instanceof globalThis.Element)) return;
+
+  const button = target.closest<HTMLElement>(BUTTON_SELECTOR);
+  if (button) {
+    event.preventDefault();
+    void copy(button);
+    return;
+  }
+
+  const input = target.closest<HTMLInputElement>(VALUE_SELECTOR);
+  if (input) input.select();
+});
+
+// Focus does not bubble; its capturing counterpart does.
+document.addEventListener(
+  "focus",
+  (event: globalThis.FocusEvent) => {
+    const target = event.target;
+    if (!(target instanceof globalThis.Element)) return;
+
+    const input = target.closest<HTMLInputElement>(VALUE_SELECTOR);
+    if (input) input.select();
+  },
+  true,
+);
+
+// Module scripts are deferred, so by the time this runs the server's fields are
+// already parsed — but the listener is registered unconditionally rather than
+// branching on readyState, so a field that arrives late is revealed too.
+revealButtons();
+document.addEventListener("DOMContentLoaded", () => revealButtons(), {
+  once: true,
+});

package/src/client/custom-url-menu.ts

@@ -1,10 +1,23 @@
 /**
  * Custom URL action menus on the settings page.
  *
- * Keeps row menus mutually exclusive and dismisses them on outside click
- * and Escape.
+ * Keeps row menus mutually exclusive and dismisses them on any click
+ * outside the trigger and the menu — including the rest of their own row —
+ * and on Escape.
+ *
+ * The row list rounds its corners with `overflow: hidden`, and no stacking
+ * order escapes an ancestor's clip. So an open menu is promoted to the top
+ * layer, which takes it out of the clip entirely and leaves it positioned
+ * against the viewport — hence the anchoring done here in script. Browsers
+ * without the popover API fall back to the absolutely positioned menu, which
+ * is clipped but still usable.
  */
 
+/** Space between the trigger and the menu, in pixels. */
+const MENU_GAP = 6;
+/** Closest the menu may sit to a viewport edge, in pixels. */
+const VIEWPORT_MARGIN = 8;
+
 /**
  * Initialize custom URL action menus within a root.
  *
@@ -30,8 +43,39 @@ export function initCustomUrlMenus(
 
       if (!(trigger instanceof HTMLButtonElement) || !menu) return;
 
+      const topLayer =
+        typeof menu.showPopover === "function" && menu.hasAttribute("popover");
+
+      /** Anchor the top-layer menu under the trigger, flipping above it when
+       *  the viewport bottom is closer than the menu is tall. */
+      const anchorToTrigger = () => {
+        const anchor = trigger.getBoundingClientRect();
+        const { width, height } = menu.getBoundingClientRect();
+        const below = anchor.bottom + MENU_GAP;
+        const above = anchor.top - MENU_GAP - height;
+        const top =
+          below + height <= window.innerHeight - VIEWPORT_MARGIN ||
+          above < VIEWPORT_MARGIN
+            ? below
+            : above;
+
+        menu.style.top = `${top}px`;
+        menu.style.left = `${Math.max(
+          VIEWPORT_MARGIN,
+          Math.min(
+            anchor.right - width,
+            window.innerWidth - VIEWPORT_MARGIN - width,
+          ),
+        )}px`;
+      };
+
       const close = (focusTrigger = false) => {
         if (menu.hidden) return;
+        if (topLayer) {
+          window.removeEventListener("resize", anchorToTrigger);
+          window.removeEventListener("scroll", anchorToTrigger, true);
+          if (menu.matches(":popover-open")) menu.hidePopover();
+        }
         menu.hidden = true;
         trigger.setAttribute("aria-expanded", "false");
         if (focusTrigger) trigger.focus();
@@ -44,6 +88,14 @@ export function initCustomUrlMenus(
           }),
         );
         menu.hidden = false;
+        if (topLayer) {
+          if (!menu.matches(":popover-open")) menu.showPopover();
+          anchorToTrigger();
+          window.addEventListener("resize", anchorToTrigger);
+          // Capture phase: the menu follows a scroll of any ancestor, not
+          // only the document.
+          window.addEventListener("scroll", anchorToTrigger, true);
+        }
         trigger.setAttribute("aria-expanded", "true");
         if (focusFirstItem) {
           const firstItem =
@@ -105,11 +157,15 @@ export function initCustomUrlMenus(
         }
       });
 
+      // The row is the action root, but it is not the menu's dismiss region:
+      // the rest of the row is blank space like any other, so only the
+      // trigger and the menu itself count as a click inside.
       document.addEventListener("click", (event) => {
         if (!(event.target instanceof Node)) return;
-        if (!menuRoot.contains(event.target)) {
-          close(false);
+        if (trigger.contains(event.target) || menu.contains(event.target)) {
+          return;
         }
+        close(false);
       });
 
       document.addEventListener("jant:custom-url-menu", (event) => {

package/src/client/icons.ts

@@ -0,0 +1,14 @@
+/**
+ * Inline SVG for the few Lucide icons client components render themselves.
+ *
+ * Server-rendered UI goes through `lib/icons.ts`, which indexes the whole
+ * `lucide-static` set (1,700+ icons, ≈1 MB minified). Client code must not
+ * import that module — one icon lookup would ship the entire set to the
+ * browser — so the handful of icons a component needs at runtime live here as
+ * literal markup, copied from `lucide-static` with the project's `icon-fine`
+ * stroke class appended.
+ */
+
+/** Lucide `funnel`, the marker for a smart collection. */
+export const FUNNEL_ICON_SVG =
+  '<svg class="lucide lucide-funnel icon-fine" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></svg>';

package/src/client/image-plan.ts

@@ -0,0 +1,165 @@
+/**
+ * Image processing plan and worker protocol.
+ *
+ * The pure decisions shared by the `ImageProcessor` facade on the main thread
+ * and the `image-worker` that decodes and encodes off it. Nothing here touches
+ * the DOM, so both sides — and the tests — import it without a canvas.
+ */
+
+/** Cap for the shorter image side — the side that determines text sharpness. */
+export const MAX_SHORT_SIDE = 1920;
+
+/**
+ * Largest long side we can still redraw on a canvas. A canvas bounded by
+ * MAX_SHORT_SIDE × MAX_LONG_SIDE (1920 × 8192 ≈ 15.7M px) stays under the
+ * ~16.7M-pixel area limit older mobile Safari enforces. Anything longer
+ * can't be re-encoded, so it uploads as-is.
+ */
+export const MAX_LONG_SIDE = 8192;
+
+/** Longest side of the tiny canvas a blurhash is sampled from. */
+export const BLURHASH_MAX_SIDE = 32;
+
+export interface ImageProcessOptions {
+  maxShortSide: number;
+  maxLongSide: number;
+  quality: number;
+  mimeType: "image/webp" | "image/jpeg" | "image/png";
+}
+
+export const DEFAULT_IMAGE_PROCESS_OPTIONS: ImageProcessOptions = {
+  maxShortSide: MAX_SHORT_SIDE,
+  maxLongSide: MAX_LONG_SIDE,
+  quality: 0.85,
+  mimeType: "image/webp",
+};
+
+export interface ImageProcessPlan {
+  /** When true, upload the original file untouched (too large to re-encode). */
+  passthrough: boolean;
+  /** Target dimensions — equal to the source dimensions when `passthrough`. */
+  width: number;
+  height: number;
+}
+
+/**
+ * Decide how to handle an image given its source dimensions.
+ *
+ * - Long side over `maxLongSide` → `passthrough` (canvas can't redraw it).
+ * - Short side within `maxShortSide` → keep dimensions, just re-encode.
+ * - Otherwise → scale down so the short side hits `maxShortSide`.
+ *
+ * @param sourceWidth - Natural image width in pixels
+ * @param sourceHeight - Natural image height in pixels
+ * @param options - `maxShortSide` and `maxLongSide` caps
+ * @returns The processing plan
+ *
+ * @example
+ * ```ts
+ * planImageProcessing(1080, 6000, { maxShortSide: 1920, maxLongSide: 8192 });
+ * // { passthrough: false, width: 1080, height: 6000 }
+ * ```
+ */
+export function planImageProcessing(
+  sourceWidth: number,
+  sourceHeight: number,
+  options: { maxShortSide: number; maxLongSide: number },
+): ImageProcessPlan {
+  const longSide = Math.max(sourceWidth, sourceHeight);
+  if (longSide > options.maxLongSide) {
+    return { passthrough: true, width: sourceWidth, height: sourceHeight };
+  }
+
+  const shortSide = Math.min(sourceWidth, sourceHeight);
+  if (shortSide <= options.maxShortSide) {
+    return { passthrough: false, width: sourceWidth, height: sourceHeight };
+  }
+
+  const scale = options.maxShortSide / shortSide;
+  return {
+    passthrough: false,
+    width: Math.round(sourceWidth * scale),
+    height: Math.round(sourceHeight * scale),
+  };
+}
+
+/**
+ * Settle the encoding format after a probe encode.
+ *
+ * A browser that cannot encode the requested format does not fail — it
+ * silently hands back a PNG (Safari has no WebP encoder). PNG ignores the
+ * quality parameter and produces oversized files, so anything other than the
+ * format asked for means "encode as JPEG", which every engine can do lossily.
+ * Probing a 1×1 canvas once beats encoding every photo twice.
+ *
+ * @param requested - The MIME type asked of the encoder
+ * @param produced - The MIME type of the blob it returned
+ * @returns The MIME type to encode real images with
+ *
+ * @example
+ * ```ts
+ * resolveEncodedMimeType("image/webp", "image/png"); // "image/jpeg"
+ * resolveEncodedMimeType("image/webp", "image/webp"); // "image/webp"
+ * ```
+ */
+export function resolveEncodedMimeType(
+  requested: string,
+  produced: string,
+): string {
+  return produced === requested ? requested : "image/jpeg";
+}
+
+/**
+ * Size of the canvas a blurhash is sampled from: the image scaled so its
+ * longest side is at most {@link BLURHASH_MAX_SIDE}, never below 1px.
+ *
+ * @param width - Source width in pixels
+ * @param height - Source height in pixels
+ * @returns The sample canvas dimensions
+ *
+ * @example
+ * ```ts
+ * blurhashDimensions(4032, 3024); // { width: 32, height: 24 }
+ * ```
+ */
+export function blurhashDimensions(
+  width: number,
+  height: number,
+): { width: number; height: number } {
+  const scale = Math.min(
+    BLURHASH_MAX_SIDE / width,
+    BLURHASH_MAX_SIDE / height,
+    1,
+  );
+  return {
+    width: Math.max(Math.round(width * scale), 1),
+    height: Math.max(Math.round(height * scale), 1),
+  };
+}
+
+// ── Worker protocol ──────────────────────────────────────────────────────
+
+export interface ImageWorkerRequest {
+  id: number;
+  file: File;
+  options: ImageProcessOptions;
+}
+
+export interface ImageWorkerSuccess {
+  id: number;
+  ok: true;
+  blob: Blob;
+  width: number;
+  height: number;
+  /** False when `blob` is the untouched original (too large to re-encode). */
+  processed: boolean;
+  blurhash?: string;
+}
+
+export interface ImageWorkerFailure {
+  id: number;
+  ok: false;
+  error: string;
+}
+
+export type ImageWorkerResponse = ImageWorkerSuccess | ImageWorkerFailure;