@jant/core 0.6.14 → 0.6.16

package/src/client/tiptap/table-size-picker.ts

@@ -0,0 +1,254 @@
+/** Accessible table-dimension picker opened by the compose slash command. */
+
+import type { Editor, Range } from "@tiptap/core";
+import {
+  getFixedFloatingContainerRect,
+  getFloatingPosition,
+} from "./floating-position.js";
+import type { TableControlLabels } from "./table-control-labels.js";
+
+const MAX_ROWS = 8;
+const MAX_COLUMNS = 8;
+const DEFAULT_ROWS = 3;
+const DEFAULT_COLUMNS = 3;
+
+interface ActivePicker {
+  close: (restoreFocus?: boolean) => void;
+}
+
+let activePicker: ActivePicker | null = null;
+
+function formatSizeLabel(
+  template: string,
+  rows: number,
+  columns: number,
+): string {
+  return template
+    .replaceAll("%rows%", String(rows))
+    .replaceAll("%cols%", String(columns));
+}
+
+/**
+ * Opens a bounded 8×8 table-size picker at the current slash-command range.
+ *
+ * @param editor - Editor receiving the selected table
+ * @param range - Slash query range to remove before opening the picker
+ * @param labels - Localized table UI labels
+ * @returns Nothing
+ */
+export function openTableSizePicker(
+  editor: Editor,
+  range: Range,
+  labels: TableControlLabels,
+): void {
+  activePicker?.close(false);
+
+  editor.chain().focus().deleteRange(range).run();
+  const insertPosition = editor.state.selection.from;
+  const dialog = editor.view.dom.closest("dialog");
+  const container = dialog ?? document.body;
+
+  const picker = document.createElement("div");
+  picker.className = "tiptap-table-size-picker";
+  picker.dataset.editorFloatingUi = "true";
+  picker.style.position = "fixed";
+  picker.setAttribute("role", "dialog");
+  picker.setAttribute("aria-label", labels.sizePickerLabel);
+
+  const header = document.createElement("div");
+  header.className = "tiptap-table-size-picker-header";
+  const title = document.createElement("span");
+  title.textContent = labels.sizePickerLabel;
+  const dimensions = document.createElement("output");
+  dimensions.className = "tiptap-table-size-picker-dimensions";
+  dimensions.setAttribute("aria-live", "polite");
+  header.appendChild(title);
+  header.appendChild(dimensions);
+  picker.appendChild(header);
+
+  const grid = document.createElement("div");
+  grid.className = "tiptap-table-size-grid";
+  grid.setAttribute("role", "grid");
+  grid.setAttribute("aria-label", labels.sizePickerLabel);
+  picker.appendChild(grid);
+
+  let selectedRows = DEFAULT_ROWS;
+  let selectedColumns = DEFAULT_COLUMNS;
+  let closed = false;
+  const cells: HTMLButtonElement[][] = [];
+
+  function labelFor(rows: number, columns: number): string {
+    return formatSizeLabel(labels.insertTableSize, rows, columns);
+  }
+
+  function updateSelection(rows: number, columns: number): void {
+    selectedRows = Math.min(Math.max(rows, 1), MAX_ROWS);
+    selectedColumns = Math.min(Math.max(columns, 1), MAX_COLUMNS);
+    dimensions.textContent = `${selectedRows} × ${selectedColumns}`;
+    picker.setAttribute(
+      "aria-label",
+      `${labels.sizePickerLabel}: ${labelFor(selectedRows, selectedColumns)}`,
+    );
+
+    for (let row = 1; row <= MAX_ROWS; row += 1) {
+      for (let column = 1; column <= MAX_COLUMNS; column += 1) {
+        const cell = cells[row - 1]?.[column - 1];
+        if (!cell) continue;
+        const isCurrent = row === selectedRows && column === selectedColumns;
+        cell.classList.toggle(
+          "is-selected",
+          row <= selectedRows && column <= selectedColumns,
+        );
+        cell.classList.toggle("is-current", isCurrent);
+        cell.tabIndex = isCurrent ? 0 : -1;
+        cell.setAttribute("aria-selected", String(isCurrent));
+      }
+    }
+  }
+
+  function focusSelection(): void {
+    cells[selectedRows - 1]?.[selectedColumns - 1]?.focus();
+  }
+
+  function insertTable(): void {
+    if (closed) return;
+    close(false);
+    editor
+      .chain()
+      .focus()
+      .setTextSelection(insertPosition)
+      .insertTable({
+        rows: selectedRows,
+        cols: selectedColumns,
+        withHeaderRow: true,
+      })
+      .run();
+  }
+
+  function onKeydown(event: KeyboardEvent): void {
+    let nextRows = selectedRows;
+    let nextColumns = selectedColumns;
+    if (event.key === "ArrowUp") nextRows -= 1;
+    else if (event.key === "ArrowDown") nextRows += 1;
+    else if (event.key === "ArrowLeft") nextColumns -= 1;
+    else if (event.key === "ArrowRight") nextColumns += 1;
+    else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      insertTable();
+      return;
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+      return;
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    updateSelection(nextRows, nextColumns);
+    focusSelection();
+  }
+
+  for (let row = 1; row <= MAX_ROWS; row += 1) {
+    const rowElement = document.createElement("div");
+    rowElement.className = "tiptap-table-size-grid-row";
+    rowElement.setAttribute("role", "row");
+    const rowCells: HTMLButtonElement[] = [];
+    for (let column = 1; column <= MAX_COLUMNS; column += 1) {
+      const cell = document.createElement("button");
+      cell.type = "button";
+      cell.className = "tiptap-table-size-cell";
+      cell.dataset.row = String(row);
+      cell.dataset.column = String(column);
+      cell.setAttribute("role", "gridcell");
+      cell.setAttribute("aria-label", labelFor(row, column));
+      cell.addEventListener("pointerenter", () => {
+        updateSelection(row, column);
+      });
+      cell.addEventListener("focus", () => {
+        updateSelection(row, column);
+      });
+      cell.addEventListener("keydown", onKeydown);
+      cell.addEventListener("click", insertTable);
+      rowElement.appendChild(cell);
+      rowCells.push(cell);
+    }
+    cells.push(rowCells);
+    grid.appendChild(rowElement);
+  }
+
+  function positionPicker(): void {
+    if (closed) return;
+    const coords = editor.view.coordsAtPos(insertPosition);
+    const rect = picker.getBoundingClientRect();
+    const layout = getFloatingPosition({
+      anchorRect: {
+        left: coords.left,
+        right: coords.right,
+        top: coords.top,
+        bottom: coords.bottom,
+      },
+      containerRect: getFixedFloatingContainerRect(dialog),
+      floatingWidth: rect.width,
+      floatingHeight: rect.height,
+      preferredPlacement: "bottom",
+      fallbackPlacement: "top",
+      align: "start",
+    });
+    picker.style.left = `${layout.left}px`;
+    picker.style.top = `${layout.top}px`;
+    picker.dataset.placement = layout.placement;
+  }
+
+  function onOutsidePointer(event: MouseEvent): void {
+    const target = event.target;
+    if (target instanceof Node && !picker.contains(target)) {
+      close(false);
+    }
+  }
+
+  function onOutsideFocus(event: globalThis.FocusEvent): void {
+    const target = event.target;
+    if (
+      target instanceof Node &&
+      !picker.contains(target) &&
+      !editor.view.dom.contains(target)
+    ) {
+      close(false);
+    }
+  }
+
+  function onEditorDestroy(): void {
+    close(false);
+  }
+
+  function close(restoreFocus = false): void {
+    if (closed) return;
+    closed = true;
+    document.removeEventListener("mousedown", onOutsidePointer, true);
+    document.removeEventListener("focusin", onOutsideFocus, true);
+    window.removeEventListener("resize", positionPicker);
+    window.removeEventListener("scroll", positionPicker, true);
+    editor.off("destroy", onEditorDestroy);
+    picker.remove();
+    if (activePicker?.close === close) activePicker = null;
+    if (restoreFocus && !editor.isDestroyed) editor.view.focus();
+  }
+
+  activePicker = { close };
+  container.appendChild(picker);
+  updateSelection(DEFAULT_ROWS, DEFAULT_COLUMNS);
+  positionPicker();
+  window.addEventListener("resize", positionPicker);
+  window.addEventListener("scroll", positionPicker, true);
+  editor.on("destroy", onEditorDestroy);
+  setTimeout(() => {
+    if (closed) return;
+    document.addEventListener("mousedown", onOutsidePointer, true);
+    document.addEventListener("focusin", onOutsideFocus, true);
+    focusSelection();
+  }, 0);
+}

package/src/client/toast.ts

@@ -20,8 +20,40 @@ interface QueuedToast {
 
 export const QUEUED_TOAST_STORAGE_KEY = "jant.pendingToast";
 
-/** Ensure the toast container is in the top layer (above <dialog> etc.) */
+function openModalDialogs(): HTMLDialogElement[] {
+  const open = [
+    ...document.querySelectorAll<HTMLDialogElement>("dialog[open]"),
+  ];
+  try {
+    const modal = open.filter((dialog) => dialog.matches(":modal"));
+    if (modal.length > 0) return modal;
+  } catch {
+    // ":modal" unsupported — treat every open dialog as potentially modal.
+  }
+  // Engines without working ":modal" (happy-dom) match nothing above; Jant
+  // only opens dialogs via showModal(), so open dialogs are the right proxy.
+  return open;
+}
+
+/**
+ * A modal <dialog> makes everything outside its subtree inert: the popover
+ * promotion keeps toasts *painted* above the dialog, but clicks and text
+ * selection would still fall through to the dialog. Mounting the container
+ * inside the topmost open modal dialog escapes the inert tree; the close
+ * watcher moves it back out when that dialog closes.
+ */
+function mountOutsideInertTree(container: HTMLElement): void {
+  const dialogs = openModalDialogs();
+  // Top-layer order isn't queryable; document order matches Jant's dialog
+  // nesting (confirm dialogs are descendants of the dialog that opened them).
+  const host = dialogs.at(-1) ?? document.body;
+  if (container.parentElement !== host) host.appendChild(container);
+}
+
+/** Ensure the toast container is interactive and in the top layer (above <dialog> etc.) */
 function ensureTopLayer(container: HTMLElement): void {
+  mountOutsideInertTree(container);
+
   if (typeof container.showPopover !== "function") return;
 
   // Re-promote above any modal dialog that was opened after the toast container.
@@ -38,7 +70,21 @@ function ensureTopLayer(container: HTMLElement): void {
 }
 
 function getToastContainer(): HTMLElement | null {
-  return document.getElementById("toast-container");
+  const existing = document.getElementById("toast-container");
+  if (existing) return existing;
+  if (!document.body) return null;
+
+  // The container can vanish with a modal dialog it was mounted into if that
+  // dialog is removed from the DOM while open. Recreate it so toasts keep
+  // working for the rest of the page's lifetime.
+  const container = document.createElement("div");
+  container.id = "toast-container";
+  container.className = "toast-container";
+  container.setAttribute("popover", "manual");
+  container.setAttribute("aria-live", "polite");
+  container.setAttribute("aria-relevant", "additions text");
+  document.body.appendChild(container);
+  return container;
 }
 
 function canUseSessionStorage(): boolean {
@@ -92,10 +138,9 @@ const TOAST_ICONS = {
     '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>',
 };
 
-const COPY_ICON =
-  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>';
-const CHECK_ICON =
-  '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path d="M20 6 9 17l-5-5"/></svg>';
+const TOAST_DURATION_MS = 3000;
+const ACTION_TOAST_DURATION_MS = 5000;
+const MIN_RESUME_MS = 1000;
 
 /** Build toast inner content using safe DOM APIs (icon is trusted, text uses textContent). */
 function setToastContent(
@@ -115,21 +160,62 @@ function setToastContent(
     a.textContent = action.label;
     toast.appendChild(a);
   }
-  if (type === "error" && navigator.clipboard) {
-    const btn = document.createElement("button");
-    btn.className = "toast-copy";
-    btn.setAttribute("aria-label", "Copy error message");
-    btn.innerHTML = COPY_ICON;
-    btn.addEventListener("click", () => {
-      navigator.clipboard.writeText(message).then(() => {
-        btn.innerHTML = CHECK_ICON;
-        setTimeout(() => {
-          btn.innerHTML = COPY_ICON;
-        }, 1500);
-      });
-    });
-    toast.appendChild(btn);
-  }
+}
+
+/**
+ * Auto-dismiss a toast after `duration`, pausing while the pointer hovers it
+ * or focus is inside it — so the message can be read, selected, and copied.
+ * On leave, the remaining time resumes (at least MIN_RESUME_MS).
+ */
+function scheduleAutoDismiss(toast: HTMLElement, duration: number): void {
+  let remaining = duration;
+  let startedAt = 0;
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  let hovered = false;
+  let focused = false;
+
+  const pause = () => {
+    if (timer === null) return;
+    clearTimeout(timer);
+    timer = null;
+    remaining = Math.max(remaining - (Date.now() - startedAt), MIN_RESUME_MS);
+  };
+
+  const resume = () => {
+    if (timer !== null) return;
+    startedAt = Date.now();
+    timer = setTimeout(() => {
+      toast.classList.add("toast-out");
+      toast.addEventListener("animationend", () => toast.remove());
+    }, remaining);
+  };
+
+  const sync = () => {
+    if (hovered || focused) {
+      pause();
+    } else {
+      resume();
+    }
+  };
+
+  toast.addEventListener("pointerenter", () => {
+    hovered = true;
+    sync();
+  });
+  toast.addEventListener("pointerleave", () => {
+    hovered = false;
+    sync();
+  });
+  toast.addEventListener("focusin", () => {
+    focused = true;
+    sync();
+  });
+  toast.addEventListener("focusout", () => {
+    focused = false;
+    sync();
+  });
+
+  resume();
 }
 
 /**
@@ -155,17 +241,14 @@ export function showToast(message: string, type: ToastType = "success"): void {
   setToastContent(toast, type, message);
   container.appendChild(toast);
 
-  setTimeout(() => {
-    toast.classList.add("toast-out");
-    toast.addEventListener("animationend", () => toast.remove());
-  }, 3000);
+  scheduleAutoDismiss(toast, TOAST_DURATION_MS);
 }
 
 /**
  * Show a toast with an action link.
  *
  * @param message - Text to display
- * @param action - Action link with label and href
+ * @param action - Action link rendered beside the message
  * @param type - Visual style: "success" (default) or "error"
  *
  * @example
@@ -188,10 +271,7 @@ export function showToastWithAction(
   setToastContent(toast, type, message, action);
   container.appendChild(toast);
 
-  setTimeout(() => {
-    toast.classList.add("toast-out");
-    toast.addEventListener("animationend", () => toast.remove());
-  }, 3000);
+  scheduleAutoDismiss(toast, ACTION_TOAST_DURATION_MS);
 }
 
 /**
@@ -282,10 +362,7 @@ export function replaceWithAutoClose(
   toast.replaceChildren();
   setToastContent(toast, type, message);
 
-  setTimeout(() => {
-    toast.classList.add("toast-out");
-    toast.addEventListener("animationend", () => toast.remove());
-  }, 3000);
+  scheduleAutoDismiss(toast, TOAST_DURATION_MS);
 }
 
 /**
@@ -293,7 +370,7 @@ export function replaceWithAutoClose(
  *
  * @param id - The toast identifier
  * @param message - New message text
- * @param action - Action link with label and href
+ * @param action - Action link rendered beside the message
  * @param type - Visual style: "success" (default) or "error"
  *
  * @example
@@ -315,10 +392,7 @@ export function replaceWithAutoCloseAction(
   toast.replaceChildren();
   setToastContent(toast, type, message, action);
 
-  setTimeout(() => {
-    toast.classList.add("toast-out");
-    toast.addEventListener("animationend", () => toast.remove());
-  }, 3000);
+  scheduleAutoDismiss(toast, ACTION_TOAST_DURATION_MS);
 }
 
 /**
@@ -361,6 +435,25 @@ export function consumeQueuedToast(): boolean {
   return true;
 }
 
+function initDialogCloseWatcher(): void {
+  // "close" doesn't bubble; capture reaches it from the document anyway.
+  document.addEventListener(
+    "close",
+    (event) => {
+      const dialog = event.target;
+      if (!(dialog instanceof HTMLDialogElement)) return;
+
+      const container = document.getElementById("toast-container");
+      if (!container || !dialog.contains(container)) return;
+
+      // The closed dialog is display:none — move the container back out
+      // (into the next open modal dialog, if any) so live toasts stay visible.
+      ensureTopLayer(container);
+    },
+    true,
+  );
+}
+
 function initQueuedToastConsumer(): void {
   const showQueuedToast = () => {
     consumeQueuedToast();
@@ -376,4 +469,5 @@ function initQueuedToastConsumer(): void {
   showQueuedToast();
 }
 
+initDialogCloseWatcher();
 initQueuedToastConsumer();

package/src/client-auth.ts

@@ -18,6 +18,7 @@ import "./client/slash-discovery-bridge.js";
 import "./client/compose-shortcuts.js";
 import "./client/components/jant-settings-general.js";
 import "./client/components/jant-settings-avatar.js";
+import "./client/components/jant-config-editor.js";
 import "./client/settings-bridge.js";
 import "./client/components/jant-repo-picker.js";
 import "./client/components/jant-collection-form.js";

package/src/client.ts

@@ -19,6 +19,7 @@ import "./client/note-expand.js";
 import "./client/archive-nav.js";
 import "./client/site-header-nav.js";
 import "./client/collection-sort-menu.js";
+import "./client/footnote-rail.js";
 
 declare const __JANT_VERSION__: string;