@jant/core 0.3.35 → 0.3.37

package/src/client/components/__tests__/jant-compose-editor.test.ts

@@ -0,0 +1,504 @@
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import type { ComposeLabels } from "../compose-types.js";
+import "../jant-compose-editor.js";
+import type { JantComposeEditor } from "../jant-compose-editor.js";
+
+function requireElement<T extends globalThis.Element>(
+  element: T | null,
+  message: string,
+): T {
+  if (!element) {
+    throw new Error(message);
+  }
+  return element;
+}
+
+function requireItem<T extends globalThis.Element>(
+  collection: globalThis.NodeListOf<T>,
+  index: number,
+  message: string,
+): T {
+  const item = collection.item(index);
+  if (!item) {
+    throw new Error(message);
+  }
+  return item;
+}
+
+const labels: ComposeLabels = {
+  cancel: "Cancel",
+  note: "Note",
+  link: "Link",
+  quote: "Quote",
+  saveDraft: "Save as Draft",
+  saveAsDraft: "Save as draft",
+  discard: "Discard",
+  titlePlaceholder: "Title",
+  bodyPlaceholder: "What's on your mind...",
+  urlPlaceholder: "Paste a URL...",
+  linkTitlePlaceholder: "Give it a title...",
+  thoughtsPlaceholder: "Your thoughts (optional)",
+  quotePlaceholder: "Type the quote...",
+  authorPlaceholder: "Author (optional)",
+  sourcePlaceholder: "Source link (optional)",
+  attachedText: "Attached Text",
+  attachedTextPlaceholder: "Paste text...",
+  attachedTextHint: "Supplementary content",
+  done: "Done",
+  media: "Media",
+  rate: "Rate",
+  emoji: "Emoji",
+  title: "Title",
+  collection: "Collection",
+  searchCollections: "Search...",
+  noCollections: "No collections found.",
+  emptyCollections: "Create a collection to get started.",
+  post: "Post",
+  addAlt: "+ ALT",
+  addAltTitle: "Add alt text",
+  altPlaceholder: "Describe this...",
+  altHint: "Alt text improves accessibility",
+  addMore: "Add",
+  uploading: "Uploading...",
+  published: "Published!",
+  view: "View",
+  retryAll: "Tap to retry",
+  editPost: "Edit post",
+  update: "Done",
+  confirmCloseTitle: "Save to drafts?",
+  confirmCloseSubtitle: "Save to drafts to edit and post at a later time.",
+  confirmCloseSave: "Save",
+  confirmCloseCancel: "Cancel",
+  confirmCloseDiscard: "Don't save",
+  confirmEditTitle: "You have unsaved changes",
+  confirmEditSubtitle: "Do you want to publish your changes or discard them?",
+  confirmEditPublish: "Publish",
+  confirmEditDiscard: "Discard",
+  drafts: "Drafts",
+  draftsEmpty: "No drafts yet. Save a draft to find it here.",
+  deleteDraft: "Delete Draft",
+  draftDeleted: "Draft deleted.",
+  publishFailedDraft: "Couldn't publish. Saved as draft.",
+  uploadFailedDraft: "Some uploads failed. Saved as draft.",
+  addCollection: "Add Collection",
+  collectionCountLabel: "%name% + %count% more",
+  draftRestored: "Draft restored.",
+  reply: "Reply",
+  publishFeatured: "Post as Featured",
+  publishUnlisted: "Post Unlisted",
+  publishPrivate: "Post as Private",
+  showMore: "Show more",
+  showLess: "Show less",
+  collectionFormLabels: {
+    titleLabel: "Title",
+    titlePlaceholder: "My Collection",
+    slugLabel: "Slug",
+    slugHelp: "URL-safe identifier",
+    descriptionLabel: "Description (optional)",
+    descriptionPlaceholder: "What's this collection about?",
+    removeIcon: "Remove",
+    iconsTab: "Icons",
+    emojisTab: "Emojis",
+    searchIconsPlaceholder: "Search icons...",
+    searchEmojisPlaceholder: "Search emojis...",
+    sortOrderLabel: "Sort Order",
+    sortNewest: "Newest first",
+    sortOldest: "Oldest first",
+    sortRatingDesc: "Highest rated",
+    sortRatingAsc: "Lowest rated",
+    submitLabel: "Save",
+    cancelLabel: "Cancel",
+  },
+};
+
+async function createElement(
+  format: string = "note",
+): Promise<JantComposeEditor> {
+  const el = document.createElement("jant-compose-editor") as JantComposeEditor;
+  el.format = format as "note" | "link" | "quote";
+  el.labels = labels;
+  document.body.appendChild(el);
+  await el.updateComplete;
+  return el;
+}
+
+describe("JantComposeEditor", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("renders note fields by default", async () => {
+    const el = await createElement("note");
+    const tiptapContainer = requireElement(
+      el.querySelector<HTMLElement>(".compose-tiptap-body"),
+      "expected compose Tiptap body container",
+    );
+    expect(tiptapContainer).toBeTruthy();
+  });
+
+  it("renders link fields when format is link", async () => {
+    const el = await createElement("link");
+    const urlInput = requireElement(
+      el.querySelector<HTMLInputElement>('input[type="url"]'),
+      "expected url input",
+    );
+    expect(urlInput.placeholder).toBe("Paste a URL...");
+
+    const titleInput = el.querySelector<HTMLInputElement>(
+      ".compose-link-title",
+    );
+    expect(titleInput).not.toBeNull();
+  });
+
+  it("renders quote fields when format is quote", async () => {
+    const el = await createElement("quote");
+    const quoteTextarea = el.querySelector<HTMLTextAreaElement>(
+      ".compose-quote-text",
+    );
+    expect(quoteTextarea).not.toBeNull();
+
+    const authorInput = el.querySelector<HTMLInputElement>(
+      ".compose-quote-author",
+    );
+    expect(authorInput).not.toBeNull();
+  });
+
+  it("toggles star rating visibility", async () => {
+    const el = await createElement("note");
+
+    // Rating not visible initially
+    expect(el.querySelector(".compose-star-rating")).toBeNull();
+
+    // Click score button to show rating
+    const toolButtons =
+      el.querySelectorAll<HTMLButtonElement>(".compose-tool-btn");
+    const scoreBtnEl = requireItem(
+      toolButtons,
+      2,
+      "expected score tool button",
+    );
+    scoreBtnEl.click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".compose-star-rating")).not.toBeNull();
+  });
+
+  it("sets rating on star click and deselects on same star", async () => {
+    const el = await createElement("note");
+    el._showRating = true;
+    await el.updateComplete;
+
+    const stars = el.querySelectorAll<HTMLButtonElement>(".compose-star");
+    expect(stars.length).toBe(5);
+
+    // Click third star
+    stars[2].click();
+    await el.updateComplete;
+    expect(el._rating).toBe(3);
+
+    // Rating label shows
+    const label = el.querySelector(".compose-star-label");
+    expect(label?.textContent).toContain("3/5");
+
+    // Click third star again to deselect
+    stars[2].click();
+    await el.updateComplete;
+    expect(el._rating).toBe(0);
+  });
+
+  it("dispatches attached panel open event and creates new item", async () => {
+    const el = await createElement("note");
+
+    const events: CustomEvent[] = [];
+    el.addEventListener("jant:attached-panel-open", (e) =>
+      events.push(e as CustomEvent),
+    );
+
+    // Click attached text tool button
+    const toolBtns =
+      el.querySelectorAll<HTMLButtonElement>(".compose-tool-btn");
+    const attachedBtn = requireItem(
+      toolBtns,
+      1,
+      "expected attached text button",
+    );
+    attachedBtn.click();
+    await el.updateComplete;
+
+    expect(events).toHaveLength(1);
+    expect(events[0].detail.index).toBe(0);
+    expect(el._attachedTexts).toHaveLength(1);
+    expect(el._attachedTexts[0].bodyJson).toBeNull();
+  });
+
+  it("shows title toggle only in note mode", async () => {
+    const el = await createElement("note");
+    const toolSep = el.querySelector(".compose-tool-sep");
+    expect(toolSep).not.toBeNull();
+
+    el.format = "link";
+    await el.updateComplete;
+    expect(el.querySelector(".compose-tool-sep")).toBeNull();
+  });
+
+  it("getData returns current field values", async () => {
+    const el = await createElement("note");
+    el._title = "Test Title";
+    el._showTitle = true;
+    el._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Test Body" }] },
+      ],
+    };
+    el._rating = 4;
+    el._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Some attached text" }],
+            },
+          ],
+        },
+        summary: "Some attached text",
+        bodyHtml: "<p>Some attached text</p>",
+      },
+    ];
+
+    const data = el.getData();
+    expect(data.title).toBe("Test Title");
+    expect(data.body).toContain("Test Body");
+    expect(data.rating).toBe(4);
+    expect(data.attachedTexts).toHaveLength(1);
+    expect(data.attachedTexts[0].bodyJson).not.toBeNull();
+    expect(data.url).toBe("");
+    expect(data.quoteText).toBe("");
+    expect(data.quoteAuthor).toBe("");
+  });
+
+  it("getData omits title when showTitle is off in note mode", async () => {
+    const el = await createElement("note");
+    el._title = "Hidden Title";
+    el._showTitle = false;
+
+    const data = el.getData();
+    expect(data.title).toBe("");
+  });
+
+  it("preserves title in memory when toggling off and restores on toggle on", async () => {
+    const el = await createElement("note");
+    el._title = "My Title";
+    el._showTitle = true;
+    await el.updateComplete;
+
+    // Toggle off — title stays in memory
+    el._showTitle = false;
+    await el.updateComplete;
+    expect(el._title).toBe("My Title");
+    expect(el.getData().title).toBe("");
+
+    // Toggle back on — title restored
+    el._showTitle = true;
+    await el.updateComplete;
+    expect(el.getData().title).toBe("My Title");
+  });
+
+  it("reset clears all fields", async () => {
+    const el = await createElement("note");
+    el._title = "Test";
+    el._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Body" }] },
+      ],
+    };
+    el._rating = 3;
+    el._showRating = true;
+    el._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "text" }],
+            },
+          ],
+        },
+        summary: "text",
+        bodyHtml: "<p>text</p>",
+      },
+    ];
+
+    el.reset();
+
+    expect(el._title).toBe("");
+    expect(el._bodyJson).toBeNull();
+    expect(el._rating).toBe(0);
+    expect(el._showRating).toBe(false);
+    expect(el._attachedTexts).toEqual([]);
+  });
+
+  it("shows attached text card in attachment strip", async () => {
+    const el = await createElement("note");
+    el._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "Some content here" }],
+            },
+          ],
+        },
+        summary: "Some content here",
+        bodyHtml: "<p>Some content here</p>",
+      },
+    ];
+    el._attachmentOrder = ["t1"];
+    await el.updateComplete;
+
+    const card = el.querySelector(".compose-attachment-text-card");
+    expect(card).not.toBeNull();
+    expect(card?.textContent).toContain("Some content here");
+  });
+
+  it("media button shows inline add label when attachments are present", async () => {
+    const el = await createElement("note");
+
+    // Media button should not have add style initially
+    const mediaBtn = el.querySelector<HTMLButtonElement>(".compose-tool-btn");
+    expect(mediaBtn?.classList.contains("compose-tool-btn-add")).toBe(false);
+
+    // Add an attachment
+    const blob = new Blob(["fake"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    el._attachments = [
+      {
+        clientId: "test-1",
+        file,
+        previewUrl: URL.createObjectURL(blob),
+        status: "done",
+        progress: null,
+        mediaId: "m1",
+        alt: "",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    await el.updateComplete;
+
+    const mediaBtnAfter =
+      el.querySelector<HTMLButtonElement>(".compose-tool-btn");
+    expect(mediaBtnAfter?.classList.contains("compose-tool-btn-add")).toBe(
+      true,
+    );
+
+    // Should show inline label, not tooltip
+    const label = mediaBtnAfter?.querySelector(".compose-tool-label");
+    expect(label).not.toBeNull();
+    expect(label?.textContent).toBe("Add");
+  });
+
+  it("moves attachments later with keyboard controls", async () => {
+    const el = await createElement("note");
+    const blob = new Blob(["fake"], { type: "image/png" });
+    const file = new File([blob], "test.png", { type: "image/png" });
+    el._attachments = [
+      {
+        clientId: "a1",
+        file,
+        previewUrl: URL.createObjectURL(blob),
+        status: "done",
+        progress: null,
+        mediaId: "m1",
+        alt: "",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+      {
+        clientId: "a2",
+        file,
+        previewUrl: URL.createObjectURL(blob),
+        status: "done",
+        progress: null,
+        mediaId: "m2",
+        alt: "",
+        error: null,
+        summary: null,
+        chars: null,
+      },
+    ];
+    el._attachmentOrder = ["a1", "a2"];
+    await el.updateComplete;
+
+    const attachment = requireElement(
+      el.querySelector<HTMLElement>(
+        '[data-attachment-id="a1"] [data-attachment-sortable]',
+      ),
+      "expected attachment card",
+    );
+    attachment.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "ArrowRight",
+        bubbles: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(el._attachmentOrder).toEqual(["a2", "a1"]);
+  });
+
+  it("preserves mixed attachment order when populate provides one", async () => {
+    const el = await createElement("note");
+
+    el.populate({
+      format: "note",
+      media: [
+        {
+          id: "m1",
+          previewUrl: "/a.png",
+          mimeType: "image/png",
+        },
+      ],
+      textAttachments: [
+        {
+          clientId: "t1",
+          bodyJson: JSON.stringify({
+            type: "doc",
+            content: [
+              {
+                type: "paragraph",
+                content: [{ type: "text", text: "Text attachment" }],
+              },
+            ],
+          }),
+          bodyHtml: "<p>Text attachment</p>",
+          summary: "Text attachment",
+        },
+      ],
+      attachmentOrder: ["t1", "m1"],
+    });
+    await el.updateComplete;
+
+    const items = [
+      ...el.querySelectorAll<HTMLElement>("[data-attachment-id]"),
+    ].map((item) => item.dataset.attachmentId);
+
+    expect(items).toHaveLength(2);
+    expect(items[0]).toBe(el._attachmentOrder[0]);
+    expect(items[1]).toBe(el._attachmentOrder[1]);
+    expect(el._attachmentOrder[0]).toBe("t1");
+  });
+});

package/src/{ui → client}/components/__tests__/jant-post-form.test.ts

@@ -18,6 +18,9 @@ const labels: PostFormLabels = {
   quoteOption: "Quote",
   titleLabel: "Title",
   titlePlaceholder: "Title...",
+  slugLabel: "Slug",
+  slugPlaceholder: "auto-generated",
+  slugHelp: "Auto-generated from title",
   bodyLabel: "Body",
   bodyPlaceholder: "Body...",
   urlLabel: "URL",
@@ -31,7 +34,9 @@ const labels: PostFormLabels = {
   statusLabel: "Status",
   statusPublished: "Published",
   statusDraft: "Draft",
-  featuredLabel: "Featured",
+  visibilityLabel: "Visibility",
+  visibilityPublic: "Public",
+  visibilityUnlisted: "Unlisted",
   pinnedLabel: "Pinned",
   collectionsLabel: "Collections",
   submitLabel: "Publish",
@@ -41,16 +46,18 @@ const labels: PostFormLabels = {
   mediaDialogLoading: "Loading...",
   submitSuccessMessage: "Saved!",
   submitErrorMessage: "Failed.",
+  draftFallbackMessage: "Couldn't publish. Saved as draft.",
 };
 
 const initial: PostFormInitial = {
   format: "note",
   title: "",
+  slug: "",
   body: "",
   url: "",
   quoteText: "",
   status: "published",
-  featured: false,
+  visibility: "public",
   pinned: false,
   rating: 0,
   collectionIds: [],
@@ -63,7 +70,13 @@ const collections: PostCollectionOption[] = [
 ];
 
 const media: PostMediaItem[] = [
-  { id: "m1", thumbUrl: "https://cdn.example.com/m1.jpg", alt: "Media 1" },
+  {
+    id: "m1",
+    thumbUrl: "https://cdn.example.com/m1.jpg",
+    alt: "Media 1",
+    mimeType: "image/jpeg",
+    originalName: "photo.jpg",
+  },
 ];
 
 async function createElement(
@@ -74,7 +87,7 @@ async function createElement(
   el.initial = { ...initial };
   el.collections = [...collections];
   el.media = [...media];
-  el.action = "/dash/posts";
+  el.action = "/compose";
   Object.assign(el, overrides);
   document.body.appendChild(el);
   await el.updateComplete;
@@ -119,21 +132,28 @@ describe("JantPostForm", () => {
     titleInput.value = "Sample Post";
     titleInput.dispatchEvent(new Event("input", { bubbles: true }));
 
-    const bodyTextarea =
-      el.querySelector<HTMLTextAreaElement>("textarea.textarea");
-    expect(bodyTextarea).not.toBeNull();
-    if (!bodyTextarea) throw new Error("Body textarea not found");
-    bodyTextarea.value = "Hello world";
-    bodyTextarea.dispatchEvent(new Event("input", { bubbles: true }));
+    // Set body via Tiptap JSON state (Tiptap editor may not init in happy-dom)
+    el._bodyJson = {
+      type: "doc",
+      content: [
+        { type: "paragraph", content: [{ type: "text", text: "Hello world" }] },
+      ],
+    };
+    el._body = JSON.stringify(el._bodyJson);
+
+    // Set visibility to "unlisted" via the select dropdown
+    const visibilitySelect =
+      el.querySelectorAll<HTMLSelectElement>("select.select")[2]; // [0]=format, [1]=status, [2]=visibility
+    expect(visibilitySelect).not.toBeNull();
+    if (!visibilitySelect) throw new Error("Visibility select not found");
+    visibilitySelect.value = "unlisted";
+    visibilitySelect.dispatchEvent(new Event("change", { bubbles: true }));
 
     const checkboxList =
       el.querySelectorAll<HTMLInputElement>("input.checkbox");
     expect(checkboxList.length).toBeGreaterThan(0);
-    const checkbox = checkboxList[0];
-    checkbox.checked = true;
-    checkbox.dispatchEvent(new Event("change", { bubbles: true }));
 
-    const collectionCheckbox = checkboxList.item(2);
+    const collectionCheckbox = checkboxList.item(1);
     expect(collectionCheckbox).not.toBeNull();
     if (!collectionCheckbox) throw new Error("Collection checkbox missing");
     collectionCheckbox.checked = true;
@@ -152,10 +172,10 @@ describe("JantPostForm", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as PostSubmitDetail;
-    expect(d.endpoint).toBe("/dash/posts");
+    expect(d.endpoint).toBe("/compose");
     expect(d.data.title).toBe("Sample Post");
-    expect(d.data.body).toBe("Hello world");
-    expect(d.data.featured).toBe(true);
+    expect(d.data.body).toContain("Hello world");
+    expect(d.data.visibility).toBe("unlisted");
     expect(d.data.collectionIds).toEqual([collections[0].id]);
     expect(d.data.mediaIds).toEqual(["m1"]);
   });

package/src/{ui → client}/components/__tests__/jant-settings-avatar.test.ts

@@ -179,7 +179,7 @@ describe("JantSettingsAvatar", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as SettingsSaveDetail;
-    expect(d.endpoint).toBe("/dash/settings/avatar/display");
+    expect(d.endpoint).toBe("/settings/avatar/display");
     expect(d.section).toBe("avatar-display");
     expect(d.data.showHeaderAvatar).toBe("true");
   });
@@ -201,7 +201,7 @@ describe("JantSettingsAvatar", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as AvatarRemoveDetail;
-    expect(d.endpoint).toBe("/dash/settings/avatar/remove");
+    expect(d.endpoint).toBe("/settings/avatar/remove");
   });
 
   it("saved() resets dirty state", async () => {

package/src/{ui → client}/components/__tests__/jant-settings-general.test.ts

@@ -188,7 +188,7 @@ describe("JantSettingsGeneral", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as SettingsSaveDetail;
-    expect(d.endpoint).toBe("/dash/settings");
+    expect(d.endpoint).toBe("/settings/general");
     expect(d.section).toBe("general");
     expect(d.data.siteName).toBe("New Name");
   });
@@ -255,7 +255,7 @@ describe("JantSettingsGeneral", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as SettingsSaveDetail;
-    expect(d.endpoint).toBe("/dash/settings");
+    expect(d.endpoint).toBe("/settings/general");
     expect(d.section).toBe("general");
     expect(d.data.siteFooter).toBe("New footer");
   });
@@ -286,7 +286,7 @@ describe("JantSettingsGeneral", () => {
 
     expect(detail).not.toBeNull();
     const d = detail as unknown as SettingsSaveDetail;
-    expect(d.endpoint).toBe("/dash/settings/seo");
+    expect(d.endpoint).toBe("/settings/general/seo");
     expect(d.section).toBe("seo");
   });