@jant/core 0.6.12 → 0.6.14

package/src/client/components/__tests__/jant-nav-manager.test.ts

@@ -104,6 +104,46 @@ const suggestedLinks: NavManagerSuggestedLink[] = [
   },
 ];
 
+function renderHeaderFragment(label: string): string {
+  return `
+    <header class="site-header" data-site-header-fragment="header">
+      <div class="site-header-inner">
+        <div class="site-header-top">
+          <a href="/" class="site-logo">Test Site</a>
+          <nav class="site-header-nav" aria-label="Primary">
+            <a href="/now" class="site-header-link">${label}</a>
+          </nav>
+          <button
+            type="button"
+            class="site-header-hamburger"
+            aria-controls="site-nav-drawer"
+            aria-expanded="false"
+          ></button>
+        </div>
+      </div>
+    </header>
+    <div
+      class="site-nav-drawer-backdrop"
+      data-site-header-fragment="drawer-backdrop"
+      aria-hidden="true"
+    ></div>
+    <div
+      id="site-nav-drawer"
+      class="site-nav-drawer"
+      data-site-header-fragment="drawer"
+      aria-hidden="true"
+      inert
+    >
+      <button class="site-nav-drawer-close" type="button"></button>
+      <a href="/now" class="site-nav-drawer-link">${label}</a>
+    </div>
+  `;
+}
+
+function installCurrentHeaderFragment(label = "Old"): void {
+  document.body.insertAdjacentHTML("afterbegin", renderHeaderFragment(label));
+}
+
 function requireElement<T>(value: T | null, message: string): T {
   if (!value) {
     throw new Error(message);
@@ -148,6 +188,12 @@ function getSortableOptions(
   return options as Record<string, ((event: unknown) => void) | undefined>;
 }
 
+async function flushAsyncWork(): Promise<void> {
+  await Promise.resolve();
+  await Promise.resolve();
+  await Promise.resolve();
+}
+
 async function createElement(): Promise<JantNavManager> {
   const el = document.createElement("jant-nav-manager") as JantNavManager;
   el.labels = labels;
@@ -170,6 +216,7 @@ describe("JantNavManager", () => {
       vi.fn().mockResolvedValue({
         ok: true,
         status: 200,
+        json: async () => ({ ...items[1] }),
       }),
     );
   });
@@ -209,8 +256,7 @@ describe("JantNavManager", () => {
     });
 
     await el.updateComplete;
-    await Promise.resolve();
-    await Promise.resolve();
+    await flushAsyncWork();
 
     expect(getListIds(headerList)).toEqual(["nav-1"]);
     expect(getListIds(moreList)).toEqual(["nav-2", "nav-3"]);
@@ -234,6 +280,9 @@ describe("JantNavManager", () => {
       "/api/nav-items/nav-2/move",
       expect.objectContaining({
         method: "PUT",
+        headers: expect.objectContaining({
+          "X-Jant-Site-Header": "include",
+        }),
         body: JSON.stringify({
           after: null,
           before: "nav-3",
@@ -293,22 +342,28 @@ describe("JantNavManager", () => {
       url: "/now",
       placement: "header",
     };
+    installCurrentHeaderFragment("Old");
     const fetchMock = vi.fn().mockResolvedValue({
       ok: true,
       status: 201,
-      json: async () => created,
+      json: async () => ({
+        ...created,
+        headerHtml: renderHeaderFragment("Now"),
+      }),
     });
     vi.stubGlobal("fetch", fetchMock);
 
     addButton.click();
-    await Promise.resolve();
-    await Promise.resolve();
+    await flushAsyncWork();
     await el.updateComplete;
 
     expect(fetchMock).toHaveBeenCalledWith(
       "/api/nav-items",
       expect.objectContaining({
         method: "POST",
+        headers: expect.objectContaining({
+          "X-Jant-Site-Header": "include",
+        }),
         body: JSON.stringify({
           type: "collection",
           collectionId: "col_now",
@@ -325,12 +380,25 @@ describe("JantNavManager", () => {
       ),
     ).toContain("nav-now");
     expect(el.querySelector(".nav-suggestion-item")).toBeNull();
+    expect(
+      document
+        .querySelector<HTMLElement>('[data-site-header-fragment="header"]')
+        ?.textContent?.trim(),
+    ).toContain("Now");
   });
 
-  it("confirms before dispatching nav deletion", async () => {
+  it("confirms before deleting a navigation item", async () => {
     const el = await createElement();
-    const deleteHandler = vi.fn();
-    el.addEventListener("jant:nav-delete", deleteHandler);
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        success: true,
+        headerHtml: renderHeaderFragment("Links"),
+      }),
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    installCurrentHeaderFragment("About");
 
     (
       el as unknown as { _editingId: string | null; requestUpdate: () => void }
@@ -343,7 +411,7 @@ describe("JantNavManager", () => {
       "expected nav delete button",
     );
     deleteButton.click();
-    await Promise.resolve();
+    await flushAsyncWork();
 
     const host = requireElement(
       document.querySelector<HTMLElement>("jant-confirm-dialog"),
@@ -356,19 +424,37 @@ describe("JantNavManager", () => {
       "expected confirm button",
     );
     confirmButton.click();
-    await Promise.resolve();
-    await Promise.resolve();
+    await flushAsyncWork();
+    await el.updateComplete;
 
-    expect(deleteHandler).toHaveBeenCalledTimes(1);
-    expect(deleteHandler.mock.calls[0]?.[0]).toMatchObject({
-      detail: { id: "nav-1" },
-    });
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/nav-items/nav-1",
+      expect.objectContaining({
+        method: "DELETE",
+        headers: expect.objectContaining({
+          "X-Jant-Site-Header": "include",
+        }),
+      }),
+    );
+    expect(
+      getListIds(
+        requireElement(
+          el.querySelector<HTMLElement>("#nav-items-header"),
+          "expected header nav list",
+        ),
+      ),
+    ).toEqual(["nav-2"]);
+    expect(
+      document
+        .querySelector<HTMLElement>('[data-site-header-fragment="header"]')
+        ?.textContent?.trim(),
+    ).toContain("Links");
   });
 
-  it("does not dispatch nav deletion when confirmation is canceled", async () => {
+  it("does not delete when confirmation is canceled", async () => {
     const el = await createElement();
-    const deleteHandler = vi.fn();
-    el.addEventListener("jant:nav-delete", deleteHandler);
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
 
     (
       el as unknown as { _editingId: string | null; requestUpdate: () => void }
@@ -381,7 +467,7 @@ describe("JantNavManager", () => {
       "expected nav delete button",
     );
     deleteButton.click();
-    await Promise.resolve();
+    await flushAsyncWork();
 
     const host = requireElement(
       document.querySelector<HTMLElement>("jant-confirm-dialog"),
@@ -394,9 +480,8 @@ describe("JantNavManager", () => {
       "expected cancel button",
     );
     cancelButton.click();
-    await Promise.resolve();
-    await Promise.resolve();
+    await flushAsyncWork();
 
-    expect(deleteHandler).not.toHaveBeenCalled();
+    expect(fetchMock).not.toHaveBeenCalled();
   });
 });

package/src/client/components/__tests__/jant-settings-general.test.ts

@@ -657,6 +657,7 @@ describe("JantSettingsGeneral", () => {
     const d = detail as unknown as SettingsSaveDetail;
     expect(d.endpoint).toBe("/settings/general/home");
     expect(d.section).toBe("home");
+    expect(d.data).not.toHaveProperty("homeDefaultView");
     expect(d.data.showJantBrandingOnHome).toBe(true);
     expect(siteSaveBtn?.disabled).toBe(true);
   });

package/src/client/components/compose-title-from-heading.ts

@@ -0,0 +1,66 @@
+import type { JSONContent } from "@tiptap/core";
+
+export interface LeadingH1TitlePromotion {
+  title: string;
+  bodyJson: JSONContent | null;
+  headingIndex: number;
+}
+
+function textFromNode(node: JSONContent): string {
+  if (typeof node.text === "string") return node.text;
+  if (!node.content) return node.type === "hardBreak" ? " " : "";
+  return node.content.map(textFromNode).join("");
+}
+
+function hasOnlyEmptyInlineContent(node: JSONContent): boolean {
+  if (!node.content || node.content.length === 0) return true;
+  return node.content.every((child) => {
+    if (child.type === "text") return !child.text?.trim();
+    if (child.type === "hardBreak") return true;
+    return false;
+  });
+}
+
+function isIgnorableLeadingBlock(node: JSONContent): boolean {
+  return (
+    (node.type === "paragraph" || node.type === "heading") &&
+    hasOnlyEmptyInlineContent(node)
+  );
+}
+
+function normalizeTitleText(text: string): string {
+  return text.replace(/\s+/g, " ").trim();
+}
+
+export function promoteLeadingH1Title(
+  bodyJson: JSONContent | null,
+): LeadingH1TitlePromotion | null {
+  const content = bodyJson?.content;
+  if (!bodyJson || !content?.length) return null;
+
+  const headingIndex = content.findIndex((node) => {
+    return !isIgnorableLeadingBlock(node);
+  });
+
+  if (headingIndex < 0) return null;
+
+  const heading = content[headingIndex];
+  if (heading?.type !== "heading" || heading.attrs?.level !== 1) return null;
+
+  const title = normalizeTitleText(textFromNode(heading));
+  if (!title) return null;
+
+  const nextContent = content.slice(headingIndex + 1);
+  if (nextContent.length === 0) {
+    return { title, bodyJson: null, headingIndex };
+  }
+
+  return {
+    title,
+    bodyJson: {
+      ...bodyJson,
+      content: nextContent,
+    },
+    headingIndex,
+  };
+}

package/src/client/components/compose-types.ts

@@ -149,6 +149,14 @@ export interface ComposeLabels {
   imageNotRehosted?: string;
   /** Toast when several pasted remote images couldn't be rehosted (uses a {count} placeholder). */
   imagesNotRehosted?: string;
+  /** Inline editor label shown when an image node cannot load. */
+  brokenImageUnavailable?: string;
+  /** Button label for removing a broken inline image. */
+  brokenImageDelete?: string;
+  /** Button label for replacing a broken inline image. */
+  brokenImageReplace?: string;
+  /** Button label for opening the original broken image URL. */
+  brokenImageOpen?: string;
   loadingPost: string;
   loadPostFailed: string;
   published: string;

package/src/client/components/inline-image-issues.ts

@@ -0,0 +1,17 @@
+import type { ImageNodeLabels } from "../tiptap/image-node.js";
+import type { ComposeLabels } from "./compose-types.js";
+
+export function getInlineImageNodeLabels(
+  labels: ComposeLabels,
+): Partial<ImageNodeLabels> {
+  const imageLabels: Partial<ImageNodeLabels> = {};
+  if (labels.brokenImageUnavailable) {
+    imageLabels.unavailable = labels.brokenImageUnavailable;
+  }
+  if (labels.brokenImageDelete) imageLabels.delete = labels.brokenImageDelete;
+  if (labels.brokenImageReplace) {
+    imageLabels.replace = labels.brokenImageReplace;
+  }
+  if (labels.brokenImageOpen) imageLabels.open = labels.brokenImageOpen;
+  return imageLabels;
+}

package/src/client/components/jant-command-palette.ts

@@ -30,6 +30,19 @@ interface CommandItem {
   action: () => void;
 }
 
+interface DisplayItem {
+  label: string;
+  secondary?: string;
+  icon: string;
+  /** For search-mode items: the query to execute */
+  searchQuery?: string;
+  /** For path-mode items: the local path to open */
+  pathTarget?: string;
+  /** Keep cross-mode actions visible below the scrollable result list. */
+  placement?: "results" | "footer";
+  shortcut?: string;
+}
+
 // ---------------------------------------------------------------------------
 // SVG icon paths (reuse existing Lucide-style icons from the codebase)
 // ---------------------------------------------------------------------------
@@ -280,15 +293,7 @@ export class JantCommandPalette extends LitElement {
     return COMMANDS.filter((c) => !q || c.label.toLowerCase().includes(q));
   }
 
-  get #displayItems(): Array<{
-    label: string;
-    secondary?: string;
-    icon: string;
-    /** For search-mode items: the query to execute */
-    searchQuery?: string;
-    /** For path-mode items: the local path to open */
-    pathTarget?: string;
-  }> {
+  get #displayItems(): DisplayItem[] {
     const mode = this.#mode;
 
     if (mode === "command") {
@@ -320,13 +325,7 @@ export class JantCommandPalette extends LitElement {
     if (mode === "path") {
       const target = getPathCommandTarget(this._query);
       const searchQuery = getPathCommandSearchQuery(this._query);
-      const items: Array<{
-        label: string;
-        secondary?: string;
-        icon: string;
-        searchQuery?: string;
-        pathTarget?: string;
-      }> = [
+      const items: DisplayItem[] = [
         {
           label: `Go to ${target}`,
           icon: ICONS.path,
@@ -346,25 +345,25 @@ export class JantCommandPalette extends LitElement {
     }
 
     // Navigate mode — show all items when no query (autocomplete)
-    const navItems: Array<{
-      label: string;
-      secondary?: string;
-      icon: string;
-      searchQuery?: string;
-      pathTarget?: string;
-    }> = this.#navigateItems.map((item) => ({
+    // Rank direct destinations and let the scrollable result list handle
+    // overflow without hiding valid matches.
+    const q = normalizeSearch(this._query);
+    const navItems: DisplayItem[] = this.#navigateItems.map((item) => ({
       label: item.title,
-      secondary: item.type === "system" ? item.path : item.path,
+      secondary: item.path,
       icon: ICONS[item.type],
     }));
 
-    // When navigate mode has no matches, offer a full-text search fallback
-    const q = normalizeSearch(this._query);
-    if (navItems.length === 0 && q) {
+    // Full-text search is a persistent action, not another navigation result.
+    // Keep it outside the scrollable list while retaining it as the final
+    // keyboard option.
+    if (q) {
       navItems.push({
-        label: `Search for "${this._query.trim()}"`,
+        label: `Search all content for "${this._query.trim()}"`,
         icon: ICONS.search,
         searchQuery: this._query.trim(),
+        placement: "footer",
+        ...(navItems.length > 0 ? { shortcut: "⌘/Ctrl ↵" } : {}),
       });
     }
 
@@ -375,6 +374,12 @@ export class JantCommandPalette extends LitElement {
   // Actions
   // -----------------------------------------------------------------------
 
+  #executeSearch(query: string) {
+    saveHistory(SEARCH_HISTORY_KEY, query);
+    this.close();
+    window.location.href = `/search?q=${encodeURIComponent(query)}`;
+  }
+
   #executeItem(index: number) {
     const mode = this.#mode;
 
@@ -391,9 +396,7 @@ export class JantCommandPalette extends LitElement {
       const displayItem = this.#displayItems[index];
       const q = displayItem?.searchQuery;
       if (q) {
-        saveHistory(SEARCH_HISTORY_KEY, q);
-        this.close();
-        window.location.href = `/search?q=${encodeURIComponent(q)}`;
+        this.#executeSearch(q);
       }
       return;
     }
@@ -408,10 +411,7 @@ export class JantCommandPalette extends LitElement {
       }
 
       if (displayItem?.searchQuery) {
-        const q = displayItem.searchQuery;
-        saveHistory(SEARCH_HISTORY_KEY, q);
-        this.close();
-        window.location.href = `/search?q=${encodeURIComponent(q)}`;
+        this.#executeSearch(displayItem.searchQuery);
       }
       return;
     }
@@ -419,10 +419,7 @@ export class JantCommandPalette extends LitElement {
     // Navigate mode — check if the selected item is a search fallback
     const displayItem = this.#displayItems[index];
     if (displayItem?.searchQuery) {
-      const q = displayItem.searchQuery;
-      saveHistory(SEARCH_HISTORY_KEY, q);
-      this.close();
-      window.location.href = `/search?q=${encodeURIComponent(q)}`;
+      this.#executeSearch(displayItem.searchQuery);
       return;
     }
 
@@ -475,6 +472,19 @@ export class JantCommandPalette extends LitElement {
       return;
     }
 
+    if (
+      event.key === "Enter" &&
+      (event.metaKey || event.ctrlKey) &&
+      this.#mode === "navigate"
+    ) {
+      const query = this._query.trim();
+      if (query) {
+        event.preventDefault();
+        this.#executeSearch(query);
+        return;
+      }
+    }
+
     if (event.key === "Enter") {
       event.preventDefault();
       this.#executeItem(this._selectedIndex);
@@ -521,10 +531,49 @@ export class JantCommandPalette extends LitElement {
   // Render
   // -----------------------------------------------------------------------
 
+  #renderItem(item: DisplayItem, index: number, footer = false) {
+    return html`
+      <div
+        id="command-palette-item-${index}"
+        class=${classMap({
+          "command-palette-result": true,
+          "command-palette-result-selected": index === this._selectedIndex,
+          "command-palette-search-action": footer,
+        })}
+        role="option"
+        aria-selected=${index === this._selectedIndex}
+        @click=${this.#handleItemClick(index)}
+      >
+        <span class="command-palette-result-icon">${unsafeSVG(item.icon)}</span>
+        <span class="command-palette-result-body">
+          <span class="command-palette-result-title">${item.label}</span>
+          ${item.secondary
+            ? html`<span class="command-palette-result-path"
+                >${item.secondary}</span
+              >`
+            : nothing}
+        </span>
+        ${item.shortcut
+          ? html`<kbd
+              class="command-palette-result-shortcut"
+              aria-label="Command or Control plus Enter"
+              >${item.shortcut}</kbd
+            >`
+          : nothing}
+      </div>
+    `;
+  }
+
   render() {
     if (!this._open) return nothing;
 
     const items = this.#displayItems;
+    const resultItems = items
+      .map((item, index) => ({ item, index }))
+      .filter(({ item }) => item.placement !== "footer");
+    const footerItems = items
+      .map((item, index) => ({ item, index }))
+      .filter(({ item }) => item.placement === "footer");
 
     return html`
       <dialog
@@ -563,41 +612,22 @@ export class JantCommandPalette extends LitElement {
 
           ${items.length > 0
             ? html`
-                <ul
+                <div
                   id="command-palette-results"
-                  class="command-palette-results"
+                  class="command-palette-results-container"
                   role="listbox"
                 >
-                  ${items.map(
-                    (item, i) => html`
-                      <li
-                        id="command-palette-item-${i}"
-                        class=${classMap({
-                          "command-palette-result": true,
-                          "command-palette-result-selected":
-                            i === this._selectedIndex,
-                        })}
-                        role="option"
-                        aria-selected=${i === this._selectedIndex}
-                        @click=${this.#handleItemClick(i)}
-                      >
-                        <span class="command-palette-result-icon"
-                          >${unsafeSVG(item.icon)}</span
-                        >
-                        <span class="command-palette-result-body">
-                          <span class="command-palette-result-title"
-                            >${item.label}</span
-                          >
-                          ${item.secondary
-                            ? html`<span class="command-palette-result-path"
-                                >${item.secondary}</span
-                              >`
-                            : nothing}
-                        </span>
-                      </li>
-                    `,
+                  ${resultItems.length > 0
+                    ? html`<div class="command-palette-results">
+                        ${resultItems.map(({ item, index }) =>
+                          this.#renderItem(item, index),
+                        )}
+                      </div>`
+                    : nothing}
+                  ${footerItems.map(({ item, index }) =>
+                    this.#renderItem(item, index, true),
                   )}
-                </ul>
+                </div>
               `
             : this._query.trim() && !this._loading
               ? html`<div class="command-palette-empty">No results</div>`

package/src/client/components/jant-compose-dialog.ts

@@ -1321,6 +1321,7 @@ export class JantComposeDialog extends LitElement {
     index: number,
     status: "published" | "draft",
   ): ComposeSubmitDetail {
+    editor.promoteLeadingH1Title({ force: true });
     const editorData = editor.getData();
     const mediaAttachments = new Map(
       (editorData.attachments ?? []).map((a) => [a.clientId, a]),
@@ -1389,6 +1390,7 @@ export class JantComposeDialog extends LitElement {
     const editor = this._editor;
     if (!editor) return null;
 
+    editor.promoteLeadingH1Title({ force: true });
     const editorData = editor.getData();
     const mediaAttachments = new Map(
       (editorData.attachments ?? []).map((attachment) => [
@@ -4031,7 +4033,7 @@ export class JantComposeDialog extends LitElement {
           <span class="compose-alt-title">${this.labels.attachedText}</span>
           <button
             type="button"
-            class="compose-post-btn ml-auto"
+            class="compose-attached-done"
             @click=${() => this._doneAttachedPanel()}
           >
             ${this.labels.done}