@jant/core 0.5.3 → 0.5.4

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ as url_exports } from "./url-umUptr5z.js";
-import { A as NAV_ITEM_TYPES, C as toPostView, D as MAX_MEDIA_ATTACHMENTS, E as FORMATS, M as STATUSES, N as TEXT_ATTACHMENT_CONTENT_FORMATS, O as MAX_PINNED_POSTS, S as toNavItemViews, T as toSearchResultView, _ as createMediaContext, b as toMediaView, f as defaultFeedRenderer, j as SORT_ORDERS, k as MEDIA_KINDS, t as createApp, v as toArchiveGroups, w as toPostViews, x as toNavItemView, y as toArchiveGroupsWithMedia } from "./app-C481ssbr.js";
+import { A as NAV_ITEM_TYPES, C as toPostView, D as MAX_MEDIA_ATTACHMENTS, E as FORMATS, M as STATUSES, N as TEXT_ATTACHMENT_CONTENT_FORMATS, O as MAX_PINNED_POSTS, S as toNavItemViews, T as toSearchResultView, _ as createMediaContext, b as toMediaView, f as defaultFeedRenderer, j as SORT_ORDERS, k as MEDIA_KINDS, t as createApp, v as toArchiveGroups, w as toPostViews, x as toNavItemView, y as toArchiveGroupsWithMedia } from "./app-BtNdUAqz.js";
 import { T as time_exports, a as markdown_exports } from "./export-CR9Megtb.js";
 import "./env-CgaH9Mut.js";
 import "./github-sync-DYZq9rQp.js";

package/dist/node.js

@@ -1,5 +1,5 @@
 import "./url-umUptr5z.js";
-import { F as BUILTIN_COLOR_THEMES, I as getPublicAssetBasePath, L as isAssetPath, P as buildThemeStyle, a as resolveDatabaseDialect, c as resolveConfig, d as getFontThemeCssVariables, g as schema_exports, h as createNodeDatabase, i as createSiteService, l as BUILTIN_FONT_THEMES, m as sqliteSchemaBundle, n as createNodeCliRuntime, o as getHostBasedStartupConfigurationIssues, p as pgSchemaBundle, r as createNodeRequestRuntime, s as createStorageDriver, t as createApp, u as getCjkSerifCssVariables } from "./app-C481ssbr.js";
+import { F as BUILTIN_COLOR_THEMES, I as getPublicAssetBasePath, L as isAssetPath, P as buildThemeStyle, a as resolveDatabaseDialect, c as resolveConfig, d as getFontThemeCssVariables, g as schema_exports, h as createNodeDatabase, i as createSiteService, l as BUILTIN_FONT_THEMES, m as sqliteSchemaBundle, n as createNodeCliRuntime, o as getHostBasedStartupConfigurationIssues, p as pgSchemaBundle, r as createNodeRequestRuntime, s as createStorageDriver, t as createApp, u as getCjkSerifCssVariables } from "./app-BtNdUAqz.js";
 import { t as createExportService } from "./export-CR9Megtb.js";
 import { b as getSiteResolutionMode, i as getConfiguredSingleSitePathPrefix, l as getEnvString, r as getConfiguredSingleSiteOrigin, x as shouldTrustProxy, y as getPort } from "./env-CgaH9Mut.js";
 import "./github-sync-DYZq9rQp.js";
@@ -474,7 +474,7 @@ async function createNodeRequestHandler(options) {
 async function start(env = process.env, app) {
 	const handler = await createNodeRequestHandler({
 		env,
-		app: async () => app ?? (await import("./app-BgMwEN-M.js")).createApp()
+		app: async () => app ?? (await import("./app-DLINgGBd.js")).createApp()
 	});
 	const hostname = resolveHost(env);
 	const port = resolvePort(env);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jant/core",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "A modern, open-source microblogging platform built on Cloudflare Workers",
   "type": "module",
   "exports": {

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

@@ -46,6 +46,7 @@ import {
   uploadAndInsertInlineImage,
   adoptPendingInlineImageUploads,
 } from "../tiptap/inline-image-upload.js";
+import { getClipboardFiles } from "../tiptap/paste-media.js";
 import { isSafeAbsoluteUrl } from "../../lib/url.js";
 import { randomUUID } from "../random-uuid.js";
 import {
@@ -276,6 +277,13 @@ export class JantComposeEditor extends LitElement {
       "jant:slash-command-discovered",
       this._onSlashCommandDiscovered,
     );
+    this.addEventListener("dragenter", this._onDragEnter);
+    // Capture phase: a file dragover is stopped here before ProseMirror sees
+    // it, so its drop cursor never appears for file drags (the drop position
+    // is decided by _shouldPasteInlineImage, not the cursor).
+    this.addEventListener("dragover", this._onDragOver, true);
+    this.addEventListener("dragleave", this._onDragLeave);
+    this.addEventListener("drop", this._onDrop);
   }
 
   disconnectedCallback() {
@@ -291,6 +299,10 @@ export class JantComposeEditor extends LitElement {
       this._onSlashCommandDiscovered,
     );
     document.removeEventListener("click", this._onDocClickBound);
+    this.removeEventListener("dragenter", this._onDragEnter);
+    this.removeEventListener("dragover", this._onDragOver, true);
+    this.removeEventListener("dragleave", this._onDragLeave);
+    this.removeEventListener("drop", this._onDrop);
     hideSlashCommandHint(this);
     this._emojiContainer?.remove();
     this._emojiPickerEl = null;
@@ -298,6 +310,66 @@ export class JantComposeEditor extends LitElement {
     this._filePickerCleanup = null;
   }
 
+  // Tracks dragenter/dragleave nesting so the highlight only clears when the
+  // pointer actually leaves the editor, not when it crosses a child element.
+  #dragDepth = 0;
+
+  #dragHasFiles(event: DragEvent): boolean {
+    const types = event.dataTransfer?.types;
+    return types ? Array.from(types).includes("Files") : false;
+  }
+
+  private _onDragEnter = (event: DragEvent) => {
+    if (!this.#dragHasFiles(event)) return;
+    this.#dragDepth += 1;
+    this.classList.add("compose-editor-dragover");
+  };
+
+  private _onDragOver = (event: DragEvent) => {
+    if (!this.#dragHasFiles(event)) return;
+    // Keep the file dragover away from ProseMirror so its drop cursor stays
+    // hidden; internal content drags still bubble through untouched.
+    event.stopPropagation();
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  };
+
+  private _onDragLeave = (event: DragEvent) => {
+    if (!this.#dragHasFiles(event)) return;
+    this.#dragDepth = Math.max(0, this.#dragDepth - 1);
+    if (this.#dragDepth === 0) {
+      this.classList.remove("compose-editor-dragover");
+    }
+  };
+
+  private _onDrop = (event: DragEvent) => {
+    this.#dragDepth = 0;
+    this.classList.remove("compose-editor-dragover");
+    // Drops onto the TipTap body are claimed by the pasteMedia plugin's
+    // handleDrop, which calls preventDefault — skip those to avoid handling
+    // the same files twice.
+    if (event.defaultPrevented) return;
+    const files = getClipboardFiles(event.dataTransfer);
+    if (files.length === 0) return;
+    event.preventDefault();
+
+    const inlineFiles: File[] = [];
+    const attachmentFiles: File[] = [];
+    for (const file of files) {
+      if (this._editor && this._shouldPasteInlineImage(file)) {
+        inlineFiles.push(file);
+      } else {
+        attachmentFiles.push(file);
+      }
+    }
+    for (const file of inlineFiles) {
+      this._uploadAndInsertImage(file);
+    }
+    if (attachmentFiles.length > 0) {
+      this.addFiles(attachmentFiles);
+    }
+  };
+
   private _onSlashCommandDiscovered = () => {
     markSlashCommandDiscovered();
   };

package/src/client/tiptap/paste-media.ts

@@ -76,6 +76,47 @@ export const PasteMedia = Extension.create<PasteMediaOptions>({
   addProseMirrorPlugins() {
     const extension = this;
 
+    /**
+     * Routes dropped/pasted files into inline images or attachments using the
+     * same decision as the host (`shouldInsertInline`). Returns false when
+     * there is nothing this extension can handle, so the caller leaves the
+     * event to the editor's default behavior.
+     */
+    const routeFiles = (files: File[]): boolean => {
+      const inlineFiles = files.filter(
+        (file) => extension.options.shouldInsertInline?.(file) === true,
+      );
+      const attachmentFiles = files.filter(
+        (file) => !inlineFiles.includes(file),
+      );
+
+      if (
+        inlineFiles.length === 0 &&
+        (attachmentFiles.length === 0 ||
+          extension.options.onPasteFiles === undefined)
+      ) {
+        return false;
+      }
+
+      for (const file of inlineFiles) {
+        const uploadInlineImage = extension.options.uploadInlineImage;
+        if (uploadInlineImage) {
+          void uploadInlineImage(file);
+          continue;
+        }
+        void uploadAndInsertInlineImage(extension.editor, file);
+      }
+
+      if (
+        attachmentFiles.length > 0 &&
+        extension.options.onPasteFiles !== undefined
+      ) {
+        extension.options.onPasteFiles(attachmentFiles);
+      }
+
+      return true;
+    };
+
     return [
       new Plugin({
         key: pasteMediaPluginKey,
@@ -83,40 +124,15 @@ export const PasteMedia = Extension.create<PasteMediaOptions>({
           handlePaste(_view, event) {
             const files = getClipboardFiles(event.clipboardData);
             if (files.length === 0) return false;
-
-            const inlineFiles = files.filter(
-              (file) => extension.options.shouldInsertInline?.(file) === true,
-            );
-            const attachmentFiles = files.filter(
-              (file) => !inlineFiles.includes(file),
-            );
-
-            if (
-              inlineFiles.length === 0 &&
-              (attachmentFiles.length === 0 ||
-                extension.options.onPasteFiles === undefined)
-            ) {
-              return false;
-            }
-
+            if (!routeFiles(files)) return false;
+            event.preventDefault();
+            return true;
+          },
+          handleDrop(_view, event) {
+            const files = getClipboardFiles(event.dataTransfer);
+            if (files.length === 0) return false;
+            if (!routeFiles(files)) return false;
             event.preventDefault();
-
-            for (const file of inlineFiles) {
-              const uploadInlineImage = extension.options.uploadInlineImage;
-              if (uploadInlineImage) {
-                void uploadInlineImage(file);
-                continue;
-              }
-              void uploadAndInsertInlineImage(extension.editor, file);
-            }
-
-            if (
-              attachmentFiles.length > 0 &&
-              extension.options.onPasteFiles !== undefined
-            ) {
-              extension.options.onPasteFiles(attachmentFiles);
-            }
-
             return true;
           },
         },

package/src/client/video-processor.ts

@@ -7,6 +7,8 @@
  * - Strips spurious rotation metadata from the output (mediabunny may
  *   bake rotation into pixels AND write a display matrix, causing the
  *   browser to double-rotate)
+ * - Clears the alternate_group track flag (mediabunny sets it non-zero,
+ *   which stops Safari's native video controls from auto-hiding)
  * - Extracts poster frame + blurhash during processing
  *
  * Requires WebCodecs API support — check `isSupported()` before use.
@@ -25,6 +27,7 @@ import {
 } from "mediabunny";
 import { encode } from "blurhash";
 import { normalizeDurationSeconds } from "../lib/video-playback.js";
+import { zeroTrackAlternateGroups } from "../lib/mp4-track-flags.js";
 
 /** Maximum pixels for the long edge of the output video. */
 const MAX_LONG_EDGE = 1920;
@@ -222,6 +225,12 @@ async function processToFile(
     const buffer = target.buffer;
     if (!buffer) throw new Error("Video processing produced no output");
 
+    // Mediabunny tags each track with a non-zero alternate_group, which makes
+    // Safari treat tracks as mutually exclusive alternates and never auto-hide
+    // the native <video> control bar during playback. Zero it so the controls
+    // behave like any other MP4.
+    zeroTrackAlternateGroups(buffer);
+
     // Detect whether this browser double-rotates.  Chrome's WebCodecs
     // bakes rotation into the pixel data AND mediabunny writes a display
     // matrix → the browser applies the matrix again (double-rotation).

package/src/lib/__tests__/mp4-track-flags.test.ts

@@ -0,0 +1,117 @@
+import { describe, it, expect } from "vitest";
+import { zeroTrackAlternateGroups } from "../mp4-track-flags.js";
+
+const str4 = (s: string): number[] => [...s].map((c) => c.charCodeAt(0));
+const u32 = (n: number): number[] => [
+  (n >>> 24) & 0xff,
+  (n >>> 16) & 0xff,
+  (n >>> 8) & 0xff,
+  n & 0xff,
+];
+const u16 = (n: number): number[] => [(n >>> 8) & 0xff, n & 0xff];
+const box = (type: string, ...payload: number[][]): number[] => {
+  const body = payload.flat();
+  return [...u32(body.length + 8), ...str4(type), ...body];
+};
+
+/** A `tkhd` box with a given version and alternate_group value. */
+function tkhd(version: 0 | 1, alternateGroup: number): number[] {
+  // creation, modification, trackID, reserved: 4 fields, 4 or 8 bytes each.
+  const idAndTimes =
+    version === 1 ? new Array(24).fill(0) : new Array(16).fill(0);
+  const duration = version === 1 ? new Array(8).fill(0) : new Array(4).fill(0);
+  return box(
+    "tkhd",
+    [version, 0, 0, 0], // version + flags
+    idAndTimes,
+    duration,
+    new Array(8).fill(0), // reserved[2]
+    u16(0), // layer
+    u16(alternateGroup),
+    new Array(48).fill(0), // volume, reserved, matrix, width, height
+  );
+}
+
+describe("zeroTrackAlternateGroups", () => {
+  it("zeroes a non-zero alternate_group in every tkhd (v0)", () => {
+    const bytes = new Uint8Array(
+      box(
+        "moov",
+        box("trak", tkhd(0, 1), box("mdia", [])),
+        box("trak", tkhd(0, 2), box("mdia", [])),
+      ),
+    );
+    zeroTrackAlternateGroups(bytes.buffer);
+
+    const view = new DataView(bytes.buffer);
+    // Locate both tkhd boxes and confirm alternate_group is now 0.
+    const groups: number[] = [];
+    for (let i = 0; i + 8 <= bytes.length; i++) {
+      if (
+        String.fromCharCode(
+          bytes[i + 4],
+          bytes[i + 5],
+          bytes[i + 6],
+          bytes[i + 7],
+        ) === "tkhd"
+      ) {
+        groups.push(view.getUint16(i + 8 + 4 + 20 + 8 + 2));
+      }
+    }
+    expect(groups).toEqual([0, 0]);
+  });
+
+  it("handles version 1 tkhd boxes", () => {
+    const bytes = new Uint8Array(box("moov", box("trak", tkhd(1, 7))));
+    zeroTrackAlternateGroups(bytes.buffer);
+
+    const view = new DataView(bytes.buffer);
+    let offset = -1;
+    for (let i = 0; i + 8 <= bytes.length; i++) {
+      if (
+        String.fromCharCode(
+          bytes[i + 4],
+          bytes[i + 5],
+          bytes[i + 6],
+          bytes[i + 7],
+        ) === "tkhd"
+      ) {
+        offset = i + 8 + 4 + 32 + 8 + 2;
+      }
+    }
+    expect(view.getUint16(offset)).toBe(0);
+  });
+
+  it("touches nothing but the alternate_group field", () => {
+    const original = new Uint8Array(
+      box(
+        "moov",
+        box("trak", tkhd(0, 0x0102), box("mdia", box("mdhd", u32(0)))),
+      ),
+    );
+    const copy = new Uint8Array(original);
+    zeroTrackAlternateGroups(copy.buffer);
+
+    const diffs: number[] = [];
+    for (let i = 0; i < original.length; i++) {
+      if (original[i] !== copy[i]) diffs.push(i);
+    }
+    // Exactly the two bytes of one alternate_group field changed.
+    expect(diffs).toHaveLength(2);
+    expect(diffs[1]).toBe(diffs[0] + 1);
+  });
+
+  it("leaves an already-zero alternate_group untouched", () => {
+    const original = new Uint8Array(box("moov", box("trak", tkhd(0, 0))));
+    const copy = new Uint8Array(original);
+    zeroTrackAlternateGroups(copy.buffer);
+    expect([...copy]).toEqual([...original]);
+  });
+
+  it("ignores files with no tkhd box", () => {
+    const original = new Uint8Array(box("ftyp", str4("isom")));
+    const copy = new Uint8Array(original);
+    zeroTrackAlternateGroups(copy.buffer);
+    expect([...copy]).toEqual([...original]);
+  });
+});

package/src/lib/mp4-track-flags.ts

@@ -0,0 +1,71 @@
+/**
+ * In-place patching of MP4 track header (`tkhd`) flags.
+ *
+ * Mediabunny's MP4 muxer writes a non-zero `alternate_group` into every
+ * `tkhd` box (video → 1, audio → 2). Per ISO-BMFF, a non-zero
+ * `alternate_group` marks a track as one of several mutually exclusive
+ * alternates. Safari's native `<video>` player reacts to this by never
+ * auto-hiding the control bar during playback — the controls stay pinned.
+ * ffmpeg writes 0 here; matching that restores normal control-bar behavior.
+ */
+
+/** ISO-BMFF container boxes that hold a `tkhd` somewhere below them. */
+const CONTAINER_TYPES = new Set(["moov", "trak"]);
+
+/**
+ * Byte offset of the `alternate_group` field within a `tkhd` box, measured
+ * from the start of the box. The field sits after the box header, the
+ * version/flags word, the (version-sized) time/duration fields, the two
+ * reserved words, and the 2-byte `layer` field.
+ */
+function alternateGroupOffset(version: number): number {
+  // header(8) + version/flags(4) + variable middle + reserved(8) + layer(2):
+  //   v0: creation(4) modification(4) trackID(4) reserved(4) duration(4) = 20
+  //   v1: creation(8) modification(8) trackID(4) reserved(4) duration(8) = 32
+  return 8 + 4 + (version === 1 ? 32 : 20) + 8 + 2;
+}
+
+/**
+ * Zero the `alternate_group` field of every `tkhd` box in an MP4 buffer,
+ * operating in place. Safe to call on any ISO-BMFF file; boxes without a
+ * `tkhd` are left untouched.
+ *
+ * @param buffer - The MP4 file bytes. Mutated in place.
+ * @example
+ * zeroTrackAlternateGroups(mediabunnyOutput);
+ */
+export function zeroTrackAlternateGroups(buffer: ArrayBuffer): void {
+  const view = new DataView(buffer);
+
+  const walk = (start: number, end: number): void => {
+    let pos = start;
+    while (pos + 8 <= end) {
+      let size = view.getUint32(pos);
+      const type = String.fromCharCode(
+        view.getUint8(pos + 4),
+        view.getUint8(pos + 5),
+        view.getUint8(pos + 6),
+        view.getUint8(pos + 7),
+      );
+      if (size === 0) size = end - pos;
+      if (size < 8 || pos + size > end) break;
+
+      if (type === "tkhd") {
+        const version = view.getUint8(pos + 8);
+        const fieldOffset = pos + alternateGroupOffset(version);
+        if (
+          fieldOffset + 2 <= pos + size &&
+          view.getUint16(fieldOffset) !== 0
+        ) {
+          view.setUint16(fieldOffset, 0);
+        }
+      } else if (CONTAINER_TYPES.has(type)) {
+        walk(pos + 8, pos + size);
+      }
+
+      pos += size;
+    }
+  };
+
+  walk(0, buffer.byteLength);
+}

package/src/styles/ui.css

@@ -4432,6 +4432,24 @@
     position: relative;
   }
 
+  jant-compose-editor.compose-editor-dragover {
+    position: relative;
+  }
+
+  jant-compose-editor.compose-editor-dragover::after {
+    content: "";
+    position: absolute;
+    inset: 6px;
+    z-index: 5;
+    pointer-events: none;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--site-accent) 4%, transparent);
+    box-shadow:
+      inset 0 0 0 1.5px color-mix(in srgb, var(--site-accent) 45%, transparent),
+      inset 0 0 28px -12px
+        color-mix(in srgb, var(--site-accent) 45%, transparent);
+  }
+
   .compose-edit-loading {
     display: flex;
     flex: 1;