@jant/core 0.3.35 → 0.3.36

package/src/{lib → client}/compose-bridge.ts

@@ -5,10 +5,10 @@
  * Manages file uploads, deferred submit flow, and toast notifications.
  */
 
-import type { ComposeSubmitDetail } from "../ui/components/compose-types.js";
-import type { ComposeAttachment } from "../ui/components/compose-types.js";
-import type { JantComposeDialog } from "../ui/components/jant-compose-dialog.js";
-import type { JantComposeEditor } from "../ui/components/jant-compose-editor.js";
+import type { ComposeSubmitDetail } from "./components/compose-types.js";
+import type { ComposeAttachment } from "./components/compose-types.js";
+import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
+import type { JantComposeEditor } from "./components/jant-compose-editor.js";
 import { ImageProcessor } from "./image-processor.js";
 import {
   showToast,
@@ -37,12 +37,14 @@ async function uploadFile(
     // Update status to uploading
     editor?.updateAttachmentStatus(clientId, "uploading", null, null);
 
-    // Process image (resize, convert to WebP)
-    const processed = await ImageProcessor.processToFile(file);
+    // Process images (resize, convert to WebP); upload non-images as-is
+    const toUpload = file.type.startsWith("image/")
+      ? await ImageProcessor.processToFile(file)
+      : file;
 
     // Upload to server
     const formData = new FormData();
-    formData.append("file", processed);
+    formData.append("file", toUpload);
 
     const res = await fetch("/api/upload", {
       method: "POST",

package/src/client/lazy-slugify.ts

@@ -0,0 +1,51 @@
+/**
+ * Lazy-loaded slug generation
+ *
+ * Wraps the `slugify` function from `url.ts` behind a dynamic import so
+ * `limax` (used for i18n-aware transliteration) doesn't bloat the main
+ * client bundle. Vite code-splits it into a separate chunk.
+ *
+ * @example
+ * ```ts
+ * import { slugify, preloadSlug } from "./lazy-slugify.js";
+ *
+ * preloadSlug(); // start loading in background
+ * const s = await slugify("你好世界"); // "ni-hao-shi-jie"
+ * ```
+ */
+
+type SlugifyFn = (text: string) => string;
+
+let slugifyFn: SlugifyFn | undefined;
+let loadingPromise: Promise<SlugifyFn> | undefined;
+
+function load(): Promise<SlugifyFn> {
+  if (slugifyFn) return Promise.resolve(slugifyFn);
+  if (!loadingPromise) {
+    loadingPromise = import("../lib/url.js").then((mod) => {
+      slugifyFn = mod.slugify;
+      return mod.slugify;
+    });
+  }
+  return loadingPromise;
+}
+
+/**
+ * Start loading the slug library in the background.
+ * Call this early (e.g. when a form mounts) so `slugify()` resolves instantly later.
+ */
+export function preloadSlug(): void {
+  load();
+}
+
+/**
+ * Generate a URL-safe slug from the given text.
+ * Handles CJK scripts via pinyin transliteration.
+ *
+ * @param text - The input string to slugify
+ * @returns A lowercased, hyphen-separated slug
+ */
+export async function slugify(text: string): Promise<string> {
+  const fn = await load();
+  return fn(text);
+}

package/src/{lib → client}/media-upload.ts

@@ -10,6 +10,8 @@
  */
 
 import { ImageProcessor } from "./image-processor.js";
+import { validateUploadFile } from "../lib/upload.js";
+import { showToast } from "./toast.js";
 
 /**
  * Format file size for display
@@ -90,18 +92,29 @@ async function handleUpload(
   input: HTMLInputElement,
   file: File,
 ): Promise<void> {
+  const maxFileSizeMB = parseInt(input.dataset.maxFileSize || "500", 10) || 500;
   const processingText = input.dataset.textProcessing || "Processing...";
   const uploadingText = input.dataset.textUploading || "Uploading...";
   const errorText =
     input.dataset.textError || "Upload failed. Please try again.";
 
+  // Validate before creating placeholder — reject immediately with toast
+  const validationError = validateUploadFile(file, { maxFileSizeMB });
+  if (validationError) {
+    showToast(validationError, "error");
+    input.value = "";
+    return;
+  }
+
   const grid = ensureGridExists();
   const placeholder = createPlaceholder(file.name, file.size, processingText);
   grid.prepend(placeholder);
 
   try {
-    // Process image client-side (resize, convert to WebP)
-    const processed = await ImageProcessor.processToFile(file);
+    // Process images client-side (resize, convert to WebP); upload non-images as-is
+    const toUpload = file.type.startsWith("image/")
+      ? await ImageProcessor.processToFile(file)
+      : file;
 
     // Update status
     const statusEl = document.getElementById("upload-status");
@@ -117,7 +130,7 @@ async function handleUpload(
     if (!formInput || !form) throw new Error("Upload form not found");
 
     const dt = new DataTransfer();
-    dt.items.add(processed);
+    dt.items.add(toUpload);
     formInput.files = dt.files;
 
     // Trigger Datastar-intercepted form submission

package/src/{lib → client}/nav-manager-bridge.ts

@@ -9,7 +9,7 @@
 import type {
   NavManagerUpdateDetail,
   NavManagerDeleteDetail,
-} from "../ui/components/nav-manager-types.js";
+} from "./components/nav-manager-types.js";
 import { showToast } from "./toast.js";
 
 document.addEventListener("jant:nav-update", async (event: Event) => {

package/src/client/page-slug-bridge.ts

@@ -0,0 +1,42 @@
+/**
+ * Page Slug Bridge
+ *
+ * Auto-generates a slug from the page title in create mode.
+ * Listens for `input` events on the title field inside `[data-page-form]`
+ * and writes the slugified value into the slug input, dispatching an
+ * `input` event so Datastar picks up the signal change.
+ *
+ * Skipped in edit mode (detected via `data-page-edit` attribute).
+ */
+
+import { preloadSlug, slugify } from "./lazy-slugify.js";
+
+function init() {
+  const form = document.querySelector<HTMLFormElement>("[data-page-form]");
+  if (!form || form.hasAttribute("data-page-edit")) return;
+
+  preloadSlug();
+
+  const titleInput = form.querySelector<HTMLInputElement>(
+    '[data-bind="title"]',
+  );
+  const slugInput = form.querySelector<HTMLInputElement>('[data-bind="slug"]');
+  if (!titleInput || !slugInput) return;
+
+  titleInput.addEventListener("input", () => {
+    const currentTitle = titleInput.value;
+    slugify(currentTitle).then((slug) => {
+      if (titleInput.value === currentTitle) {
+        slugInput.value = slug;
+        slugInput.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    });
+  });
+}
+
+// Run on DOMContentLoaded if the document isn't ready yet, otherwise run now.
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", init);
+} else {
+  init();
+}

package/src/{lib → client}/post-form-bridge.ts

@@ -6,8 +6,8 @@
  * - `jant:post-load-media` → fetch media picker HTML and manage selections
  */
 
-import type { PostSubmitDetail } from "../ui/components/post-form-types.js";
-import type { JantPostForm } from "../ui/components/jant-post-form.js";
+import type { PostSubmitDetail } from "./components/post-form-types.js";
+import type { JantPostForm } from "./components/jant-post-form.js";
 import { showToast } from "./toast.js";
 
 function findPostForm(

package/src/{lib → client}/settings-bridge.ts

@@ -9,9 +9,9 @@
 import type {
   SettingsSaveDetail,
   AvatarRemoveDetail,
-} from "../ui/components/settings-types.js";
-import type { JantSettingsGeneral } from "../ui/components/jant-settings-general.js";
-import type { JantSettingsAvatar } from "../ui/components/jant-settings-avatar.js";
+} from "./components/settings-types.js";
+import type { JantSettingsGeneral } from "./components/jant-settings-general.js";
+import type { JantSettingsAvatar } from "./components/jant-settings-avatar.js";
 import { showToast } from "./toast.js";
 
 function updateSidebarSiteName(siteName: string) {

package/src/client/tiptap/bubble-menu.ts

@@ -0,0 +1,205 @@
+/**
+ * Bubble Menu Extension
+ *
+ * Floating toolbar that appears on text selection with inline
+ * formatting actions: Bold, Italic, H1, H2, Blockquote, Link.
+ * Vanilla DOM — positioned via ProseMirror plugin, dialog-aware.
+ */
+
+import { Extension, type Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import type { EditorView } from "@tiptap/pm/view";
+import { isLinkToolbarInputActive } from "./link-toolbar.js";
+
+const bubbleMenuKey = new PluginKey("bubbleMenu");
+
+// SVG icons (16×16, stroke-based)
+const ICONS = {
+  bold: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 0 1 0 8H6V4h8a4 4 0 0 1 0 8"/></svg>`,
+  italic: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>`,
+  h1: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M17 12l3-2v10"/></svg>`,
+  h2: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"/></svg>`,
+  blockquote: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>`,
+  link: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`,
+} as const;
+
+interface BubbleBtn {
+  key: string;
+  icon: string;
+  title: string;
+  action: (view: EditorView) => void;
+  isActive: (view: EditorView) => boolean;
+}
+
+function getButtons(editor: Editor): BubbleBtn[] {
+  return [
+    {
+      key: "bold",
+      icon: ICONS.bold,
+      title: "Bold",
+      action: () => editor.chain().focus().toggleBold().run(),
+      isActive: () => editor.isActive("bold"),
+    },
+    {
+      key: "italic",
+      icon: ICONS.italic,
+      title: "Italic",
+      action: () => editor.chain().focus().toggleItalic().run(),
+      isActive: () => editor.isActive("italic"),
+    },
+    {
+      key: "h1",
+      icon: ICONS.h1,
+      title: "Heading 1",
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: () => editor.isActive("heading", { level: 1 }),
+    },
+    {
+      key: "h2",
+      icon: ICONS.h2,
+      title: "Heading 2",
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: () => editor.isActive("heading", { level: 2 }),
+    },
+    {
+      key: "sep",
+      icon: "",
+      title: "",
+      action: () => {},
+      isActive: () => false,
+    },
+    {
+      key: "blockquote",
+      icon: ICONS.blockquote,
+      title: "Quote",
+      action: () => editor.chain().focus().toggleBlockquote().run(),
+      isActive: () => editor.isActive("blockquote"),
+    },
+    {
+      key: "link",
+      icon: ICONS.link,
+      title: "Link",
+      action: (view: EditorView) => {
+        if (editor.isActive("link")) {
+          editor.chain().focus().unsetLink().run();
+        } else {
+          view.dom.dispatchEvent(new CustomEvent("tiptap:open-link-input"));
+        }
+      },
+      isActive: () => editor.isActive("link"),
+    },
+  ];
+}
+
+export const BubbleMenu = Extension.create({
+  name: "bubbleMenu",
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    let el: HTMLElement | null = null;
+    let buttons: BubbleBtn[] = [];
+    const btnEls: Map<string, HTMLButtonElement> = new Map();
+
+    function create() {
+      el = document.createElement("div");
+      el.className = "tiptap-bubble-menu";
+      el.style.position = "fixed";
+      el.style.display = "none";
+
+      buttons = getButtons(editor);
+      for (const btn of buttons) {
+        if (btn.key === "sep") {
+          const sep = document.createElement("span");
+          sep.className = "tiptap-bubble-sep";
+          el.appendChild(sep);
+          continue;
+        }
+        const b = document.createElement("button");
+        b.type = "button";
+        b.innerHTML = btn.icon;
+        b.title = btn.title;
+        b.className = "tiptap-bubble-btn";
+        b.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          btn.action(editor.view);
+        });
+        el.appendChild(b);
+        btnEls.set(btn.key, b);
+      }
+    }
+
+    function show(view: EditorView) {
+      if (!el) return;
+
+      // Position above selection center
+      const { from, to } = view.state.selection;
+      const start = view.coordsAtPos(from);
+      const end = view.coordsAtPos(to);
+      const cx = (start.left + end.right) / 2;
+      const top = start.top;
+
+      // Dialog offset (same pattern as slash commands)
+      const dialog = view.dom.closest("dialog");
+      const offsetX = dialog?.getBoundingClientRect().left ?? 0;
+      const offsetY = dialog?.getBoundingClientRect().top ?? 0;
+
+      el.style.display = "flex";
+      // Measure width after display
+      const rect = el.getBoundingClientRect();
+      el.style.left = `${cx - rect.width / 2 - offsetX}px`;
+      el.style.top = `${top - rect.height - 8 - offsetY}px`;
+
+      syncActive();
+    }
+
+    function hide() {
+      if (!el) return;
+      el.style.display = "none";
+    }
+
+    function syncActive() {
+      for (const btn of buttons) {
+        if (btn.key === "sep") continue;
+        const b = btnEls.get(btn.key);
+        if (b) b.classList.toggle("is-active", btn.isActive(editor.view));
+      }
+    }
+
+    function shouldShow(view: EditorView): boolean {
+      const { state } = view;
+      const { selection } = state;
+      const { empty } = selection;
+      // Only show for non-empty text selections (not node selections)
+      if (empty) return false;
+      if (!selection.$from.parent.isTextblock) return false;
+      // Hide when link input popup is open
+      if (isLinkToolbarInputActive()) return false;
+      return true;
+    }
+
+    return [
+      new Plugin({
+        key: bubbleMenuKey,
+        view(editorView) {
+          create();
+          const dialog = editorView.dom.closest("dialog");
+          if (el) (dialog ?? document.body).appendChild(el);
+
+          return {
+            update(view) {
+              if (shouldShow(view)) {
+                show(view);
+              } else {
+                hide();
+              }
+            },
+            destroy() {
+              el?.remove();
+              el = null;
+            },
+          };
+        },
+      }),
+    ];
+  },
+});

package/src/client/tiptap/create-editor.ts

@@ -0,0 +1,40 @@
+/**
+ * Tiptap Editor Factory
+ *
+ * Creates configured Tiptap editor instances for use in Lit components.
+ */
+
+import { Editor, type JSONContent } from "@tiptap/core";
+import { createEditorExtensions } from "./extensions.js";
+
+export interface CreateEditorOptions {
+  element: HTMLElement;
+  placeholder?: string;
+  content?: JSONContent | null;
+  onUpdate?: (json: JSONContent) => void;
+  onFocus?: () => void;
+}
+
+/**
+ * Creates a Tiptap editor instance with the standard extension set.
+ *
+ * @param options - Editor configuration
+ * @returns Tiptap Editor instance
+ */
+export function createTiptapEditor(options: CreateEditorOptions): Editor {
+  const editor = new Editor({
+    element: options.element,
+    extensions: createEditorExtensions({
+      placeholder: options.placeholder,
+    }),
+    content: options.content ?? undefined,
+    onUpdate: ({ editor }) => {
+      options.onUpdate?.(editor.getJSON());
+    },
+    onFocus: () => {
+      options.onFocus?.();
+    },
+  });
+
+  return editor;
+}

package/src/client/tiptap/exitable-marks.ts

@@ -0,0 +1,73 @@
+/**
+ * Exitable Marks Extension
+ *
+ * Two behaviors for escaping inline marks (bold, italic, strike, code, underline):
+ *
+ * 1. ArrowRight at end of block — clears stored marks so next typed char is plain.
+ * 2. Enter on an empty block — clears stored marks on the new paragraph.
+ *    (Typing bold → Enter → empty line → Enter = formatting resets.)
+ */
+
+import { Extension } from "@tiptap/core";
+
+const EXITABLE_MARKS = new Set([
+  "bold",
+  "italic",
+  "strike",
+  "code",
+  "underline",
+]);
+
+function getExitableMarks(marks: readonly import("@tiptap/pm/model").Mark[]) {
+  return marks.filter((m) => EXITABLE_MARKS.has(m.type.name));
+}
+
+export const ExitableMarks = Extension.create({
+  name: "exitableMarks",
+
+  addKeyboardShortcuts() {
+    return {
+      ArrowRight: ({ editor }) => {
+        const { selection } = editor.state;
+        const { $from } = selection;
+
+        if (!selection.empty) return false;
+        if ($from.pos !== $from.end()) return false;
+
+        const exitables = getExitableMarks($from.marks());
+        if (!exitables.length) return false;
+
+        // Clear stored marks; return true to consume event (don't jump to next block)
+        const { tr } = editor.state;
+        for (const mark of exitables) {
+          tr.removeStoredMark(mark);
+        }
+        editor.view.dispatch(tr);
+        return true;
+      },
+
+      Enter: ({ editor }) => {
+        const { selection } = editor.state;
+        const { $from } = selection;
+
+        if (!selection.empty) return false;
+
+        // Only act on empty blocks (e.g. a blank bold line)
+        if ($from.parent.textContent.length > 0) return false;
+
+        const storedMarks = editor.state.storedMarks ?? $from.marks();
+        const exitables = getExitableMarks(storedMarks);
+        if (!exitables.length) return false;
+
+        // Let ProseMirror create the new paragraph first, then clear marks
+        requestAnimationFrame(() => {
+          const { tr } = editor.state;
+          tr.setStoredMarks([]);
+          editor.view.dispatch(tr);
+        });
+
+        return false;
+      },
+    };
+  },
+});

package/src/client/tiptap/extensions.ts

@@ -0,0 +1,60 @@
+/**
+ * Tiptap Extension Configuration
+ *
+ * Shared extension set for all Tiptap editor instances (compose + post form).
+ */
+
+import type { Extensions } from "@tiptap/core";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import {
+  Table,
+  TableRow,
+  TableCell,
+  TableHeader,
+} from "@tiptap/extension-table";
+import { ImageNode } from "./image-node.js";
+import { MoreBreak } from "./more-break.js";
+import { SlashCommands } from "./slash-commands.js";
+import { PasteImage } from "./paste-image.js";
+import { BubbleMenu } from "./bubble-menu.js";
+import { LinkToolbar } from "./link-toolbar.js";
+import { ExitableMarks } from "./exitable-marks.js";
+
+export interface EditorExtensionOptions {
+  placeholder?: string;
+}
+
+/**
+ * Creates the standard Tiptap extension array.
+ *
+ * @param options - Configuration for extensions
+ * @returns Configured extension array
+ */
+export function createEditorExtensions(
+  options: EditorExtensionOptions = {},
+): Extensions {
+  return [
+    StarterKit.configure({
+      heading: { levels: [1, 2, 3] },
+      link: { openOnClick: false, autolink: false },
+    }),
+    Placeholder.configure({
+      placeholder: options.placeholder ?? "Write something…",
+    }),
+    Table.configure({
+      resizable: false,
+      HTMLAttributes: { class: "tiptap-table" },
+    }),
+    TableRow,
+    TableCell,
+    TableHeader,
+    ImageNode,
+    MoreBreak,
+    SlashCommands,
+    PasteImage,
+    BubbleMenu,
+    LinkToolbar,
+    ExitableMarks,
+  ];
+}