@jant/core 0.3.36 → 0.3.38

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

@@ -54,6 +54,7 @@ const labels: ComposeLabels = {
   collection: "Collection",
   searchCollections: "Search...",
   noCollections: "No collections found.",
+  emptyCollections: "Create a collection to get started.",
   post: "Post",
   addAlt: "+ ALT",
   addAltTitle: "Add alt text",
@@ -62,7 +63,54 @@ const labels: ComposeLabels = {
   addMore: "Add",
   uploading: "Uploading...",
   published: "Published!",
-  retryAll: "Click to retry all",
+  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(
@@ -160,11 +208,13 @@ describe("JantComposeEditor", () => {
     expect(el._rating).toBe(0);
   });
 
-  it("dispatches attached panel open event", async () => {
+  it("dispatches attached panel open event and creates new item", async () => {
     const el = await createElement("note");
 
-    const events: Event[] = [];
-    el.addEventListener("jant:attached-panel-open", (e) => events.push(e));
+    const events: CustomEvent[] = [];
+    el.addEventListener("jant:attached-panel-open", (e) =>
+      events.push(e as CustomEvent),
+    );
 
     // Click attached text tool button
     const toolBtns =
@@ -178,7 +228,9 @@ describe("JantComposeEditor", () => {
     await el.updateComplete;
 
     expect(events).toHaveLength(1);
-    expect(el._showAttachedText).toBe(true);
+    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 () => {
@@ -202,13 +254,29 @@ describe("JantComposeEditor", () => {
       ],
     };
     el._rating = 4;
-    el._attachedText = "Some attached text";
+    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.attachedText).toBe("Some attached text");
+    expect(data.attachedTexts).toHaveLength(1);
+    expect(data.attachedTexts[0].bodyJson).not.toBeNull();
     expect(data.url).toBe("");
     expect(data.quoteText).toBe("");
     expect(data.quoteAuthor).toBe("");
@@ -252,8 +320,22 @@ describe("JantComposeEditor", () => {
     };
     el._rating = 3;
     el._showRating = true;
-    el._attachedText = "text";
-    el._showAttachedText = true;
+    el._attachedTexts = [
+      {
+        clientId: "t1",
+        bodyJson: {
+          type: "doc",
+          content: [
+            {
+              type: "paragraph",
+              content: [{ type: "text", text: "text" }],
+            },
+          ],
+        },
+        summary: "text",
+        bodyHtml: "<p>text</p>",
+      },
+    ];
 
     el.reset();
 
@@ -261,18 +343,33 @@ describe("JantComposeEditor", () => {
     expect(el._bodyJson).toBeNull();
     expect(el._rating).toBe(0);
     expect(el._showRating).toBe(false);
-    expect(el._attachedText).toBe("");
-    expect(el._showAttachedText).toBe(false);
+    expect(el._attachedTexts).toEqual([]);
   });
 
-  it("shows attached text badge when text is present", async () => {
+  it("shows attached text card in attachment strip", async () => {
     const el = await createElement("note");
-    el._attachedText = "Some content here";
+    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 badge = el.querySelector(".compose-attached-badge");
-    expect(badge).not.toBeNull();
-    expect(badge?.textContent).toContain("chars");
+    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 () => {
@@ -291,9 +388,12 @@ describe("JantComposeEditor", () => {
         file,
         previewUrl: URL.createObjectURL(blob),
         status: "done",
+        progress: null,
         mediaId: "m1",
         alt: "",
         error: null,
+        summary: null,
+        chars: null,
       },
     ];
     await el.updateComplete;
@@ -309,4 +409,96 @@ describe("JantComposeEditor", () => {
     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/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",
@@ -32,8 +35,7 @@ const labels: PostFormLabels = {
   statusPublished: "Published",
   statusDraft: "Draft",
   visibilityLabel: "Visibility",
-  visibilityListed: "Listed",
-  visibilityFeatured: "Featured",
+  visibilityPublic: "Public",
   visibilityUnlisted: "Unlisted",
   pinnedLabel: "Pinned",
   collectionsLabel: "Collections",
@@ -44,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",
-  visibility: "listed",
+  visibility: "public",
   pinned: false,
   rating: 0,
   collectionIds: [],
@@ -66,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(
@@ -77,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;
@@ -131,12 +141,12 @@ describe("JantPostForm", () => {
     };
     el._body = JSON.stringify(el._bodyJson);
 
-    // Set visibility to "featured" via the select dropdown
+    // 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 = "featured";
+    visibilitySelect.value = "unlisted";
     visibilitySelect.dispatchEvent(new Event("change", { bubbles: true }));
 
     const checkboxList =
@@ -162,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).toContain("Hello world");
-    expect(d.data.visibility).toBe("featured");
+    expect(d.data.visibility).toBe("unlisted");
     expect(d.data.collectionIds).toEqual([collections[0].id]);
     expect(d.data.mediaIds).toEqual(["m1"]);
   });

package/src/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/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/general");
+    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/general");
+    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/general/seo");
+    expect(d.endpoint).toBe("/settings/general/seo");
     expect(d.section).toBe("seo");
   });
 

package/src/client/components/collection-sidebar-types.ts

@@ -25,21 +25,19 @@ export interface CollectionSidebarLabels {
 }
 
 export interface SidebarCollection {
-  id: number;
+  id: string;
   slug: string;
   title: string;
   description: string | null;
   icon: string | null;
   sortOrder: string;
-  position: number;
   postCount: number;
 }
 
-export interface SidebarDivider {
-  id: number;
-  position: number;
+export interface ClientSidebarItem {
+  id: string;
+  type: "collection" | "divider";
+  collectionId: string | null;
+  position: string;
+  collection?: SidebarCollection;
 }
-
-export type SidebarItem =
-  | { kind: "collection"; data: SidebarCollection }
-  | { kind: "divider"; data: SidebarDivider };

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

@@ -5,16 +5,74 @@
  * Lit Web Components, and the compose bridge script.
  */
 
+import type { JSONContent } from "@tiptap/core";
+import type { CollectionFormLabels } from "./collection-types.js";
+
 export type ComposeFormat = "note" | "link" | "quote";
 
 export interface ComposeAttachment {
   clientId: string;
   file: File;
   previewUrl: string;
-  status: "pending" | "uploading" | "done" | "error";
+  status: "pending" | "processing" | "uploading" | "done" | "error";
+  progress: number | null;
   mediaId: string | null;
   alt: string;
   error: string | null;
+  /** Text content preview for text files (first ~100 chars) */
+  summary: string | null;
+  /** Character count of text content */
+  chars: number | null;
+}
+
+export interface AttachedTextItem {
+  clientId: string;
+  bodyJson: JSONContent | null;
+  /** Pre-rendered HTML from TipTap, used for preview on the public page */
+  bodyHtml: string;
+  summary: string;
+  /** Set for already-persisted text media items (edit mode) */
+  mediaId?: string;
+}
+
+export interface DraftItem {
+  id: string;
+  format: ComposeFormat;
+  title: string | null;
+  bodyText: string | null;
+  bodyHtml: string | null;
+  url: string | null;
+  quoteText: string | null;
+  replyToId: string | null;
+  updatedAt: number;
+  mediaAttachments: {
+    id: string;
+    previewUrl: string;
+    alt: string | null;
+    mimeType: string;
+  }[];
+}
+
+export interface LocalDraft {
+  format: ComposeFormat;
+  title: string;
+  bodyJson: JSONContent | null;
+  url: string;
+  quoteText: string;
+  quoteAuthor: string;
+  rating: number;
+  showTitle: boolean;
+  showRating: boolean;
+  collectionIds: string[];
+  replyToId: string | null;
+  attachedTexts: Array<{
+    clientId: string;
+    bodyJson: JSONContent | null;
+    bodyHtml: string;
+    summary: string;
+  }>;
+  attachmentOrder?: string[];
+  savedAt: number;
 }
 
 export interface ComposeLabels {
@@ -44,6 +102,7 @@ export interface ComposeLabels {
   collection: string;
   searchCollections: string;
   noCollections: string;
+  emptyCollections: string;
   post: string;
   addAlt: string;
   addAltTitle: string;
@@ -52,9 +111,39 @@ export interface ComposeLabels {
   addMore: string;
   uploading: string;
   published: string;
+  view: string;
   retryAll: string;
+  editPost: string;
+  update: string;
+  confirmCloseTitle: string;
+  confirmCloseSubtitle: string;
+  confirmCloseSave: string;
+  confirmCloseCancel: string;
+  confirmCloseDiscard: string;
+  confirmEditTitle: string;
+  confirmEditSubtitle: string;
+  confirmEditPublish: string;
+  confirmEditDiscard: string;
+  drafts: string;
+  draftsEmpty: string;
+  deleteDraft: string;
+  draftDeleted: string;
+  publishFailedDraft: string;
+  uploadFailedDraft: string;
+  addCollection: string;
+  collectionCountLabel: string;
+  draftRestored: string;
+  reply: string;
+  publishFeatured: string;
+  publishUnlisted: string;
+  publishPrivate: string;
+  showMore: string;
+  showLess: string;
+  collectionFormLabels: CollectionFormLabels;
 }
 
+export type ComposeVisibility = "public" | "unlisted" | "private";
+
 export interface ComposeSubmitDetail {
   format: ComposeFormat;
   title: string;
@@ -63,15 +152,23 @@ export interface ComposeSubmitDetail {
   quoteText: string;
   quoteAuthor: string;
   status: "published" | "draft";
+  visibility: ComposeVisibility;
   rating: number;
-  collectionIds: number[];
+  collectionIds: string[];
   mediaIds: string[];
   mediaAlts: Record<string, string>;
-  attachedText: string;
+  attachedTexts: AttachedTextItem[];
+  /** Interleaved order of media clientIds + text clientIds */
+  attachmentOrder: string[];
+  /** clientId → mediaId for already-uploaded file attachments (captured at submit time) */
+  mediaClientMap: Record<string, string>;
+  featured?: boolean;
+  editPostId?: string;
+  replyToId?: string;
 }
 
 export interface ComposeCollection {
-  id: number;
+  id: string;
   title: string;
   iconHtml: string;
 }