@jant/core 0.6.16 → 0.7.0

package/src/client/components/post-form-template.ts

@@ -1,352 +0,0 @@
-import { html, nothing } from "lit";
-import { unsafeSVG } from "lit/directives/unsafe-svg.js";
-import type { JantPostForm } from "./jant-post-form.js";
-import type { PostMediaItem } from "./post-form-types.js";
-import { getMediaCategory } from "../../lib/upload.js";
-
-function renderFileIcon(mimeType: string) {
-  const doc = `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`;
-
-  let inner: string;
-  if (mimeType === "application/pdf") {
-    inner = `<text x="12" y="16.5" text-anchor="middle" fill="currentColor" stroke="none" font-size="6" font-weight="700" font-family="system-ui, sans-serif">PDF</text>`;
-  } else if (mimeType === "text/markdown") {
-    inner = `<text x="12" y="16.5" text-anchor="middle" fill="currentColor" stroke="none" font-size="10" font-weight="700" font-family="system-ui, sans-serif">#</text>`;
-  } else if (mimeType === "text/csv") {
-    inner = `<line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="8" y1="18" x2="16" y2="18"/><line x1="10.7" y1="12" x2="10.7" y2="18"/><line x1="13.3" y1="12" x2="13.3" y2="18"/>`;
-  } else if (getMediaCategory(mimeType) === "archive") {
-    inner = `<line x1="12" y1="10" x2="12" y2="11.5"/><line x1="12" y1="13" x2="12" y2="14.5"/><line x1="12" y1="16" x2="12" y2="17.5"/>`;
-  } else if (mimeType.startsWith("audio/")) {
-    return html`<svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      ${unsafeSVG(
-        `<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>`,
-      )}
-    </svg>`;
-  } else if (mimeType.startsWith("video/")) {
-    return html`<svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      ${unsafeSVG(
-        `<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>`,
-      )}
-    </svg>`;
-  } else {
-    inner = `<line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/>`;
-  }
-
-  return html`<svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.5"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-  >
-    ${unsafeSVG(doc + inner)}
-  </svg>`;
-}
-
-function renderMediaThumb(item: PostMediaItem) {
-  const category = getMediaCategory(item.mimeType);
-
-  if (category === "image") {
-    return html`<img
-      src=${item.thumbUrl}
-      alt=${item.alt}
-      class="w-full h-full object-cover rounded-lg border"
-      loading="lazy"
-    />`;
-  }
-
-  return html`<div
-    class="w-full h-full rounded-lg border bg-muted flex flex-col items-center justify-center gap-1 p-1 text-muted-foreground"
-  >
-    ${renderFileIcon(item.mimeType)}
-    <span class="text-[10px] leading-tight text-center truncate w-full px-1"
-      >${item.originalName}</span
-    >
-  </div>`;
-}
-
-function renderMediaList(component: JantPostForm) {
-  const { media, labels, _mediaIds } = component;
-  if (_mediaIds.length === 0) {
-    return html`<p class="text-sm text-muted-foreground">
-      ${labels.mediaEmptyLabel}
-    </p>`;
-  }
-
-  const mediaMap = new Map(media.map((item) => [item.id, item]));
-
-  return html`<div class="grid grid-cols-4 sm:grid-cols-6 gap-2 mb-2">
-    ${_mediaIds.map((id) => {
-      const item = mediaMap.get(id);
-      if (!item) {
-        return html`<div
-          class="relative group aspect-square rounded-lg border bg-muted flex items-center justify-center text-xs text-muted-foreground"
-        >
-          ${id}
-          <button
-            type="button"
-            class="absolute top-1 right-1 w-5 h-5 flex items-center justify-center bg-black/60 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
-            @click=${() => component.removeMedia(id)}
-            aria-label=${labels.mediaRemoveButton}
-          >
-            &times;
-          </button>
-        </div>`;
-      }
-
-      return html`<div class="relative group aspect-square" data-media-id=${id}>
-        ${renderMediaThumb(item)}
-        <button
-          type="button"
-          class="absolute top-1 right-1 w-5 h-5 flex items-center justify-center bg-black/60 text-white rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
-          @click=${() => component.removeMedia(id)}
-          aria-label=${labels.mediaRemoveButton}
-        >
-          &times;
-        </button>
-      </div>`;
-    })}
-  </div>`;
-}
-
-function renderCollections(component: JantPostForm) {
-  if (!component.collections.length) return nothing;
-
-  return html`<div class="field">
-    <label class="label">${component.labels.collectionsLabel}</label>
-    <div class="flex flex-col gap-1">
-      ${component.collections.map((col) => {
-        return html`<label class="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            class="checkbox"
-            .checked=${component._collectionIds.includes(col.id)}
-            @change=${() => component.toggleCollection(col.id)}
-          />
-          <span>${col.title}</span>
-        </label>`;
-      })}
-    </div>
-  </div>`;
-}
-
-export function renderPostForm(component: JantPostForm) {
-  return html`<form
-      class="flex flex-col gap-4 max-w-2xl"
-      @submit=${(e: Event) => component.handleSubmit(e)}
-    >
-      <div class="field">
-        <label class="label">${component.labels.formatLabel}</label>
-        <select
-          class="select"
-          .value=${component._format}
-          @change=${(e: Event) => {
-            const target = e.target as HTMLSelectElement;
-            component._format =
-              (target.value as typeof component._format) ?? "note";
-          }}
-        >
-          <option value="note">${component.labels.noteOption}</option>
-          <option value="link">${component.labels.linkOption}</option>
-          <option value="quote">${component.labels.quoteOption}</option>
-        </select>
-      </div>
-
-      <div class="field">
-        <label class="label">${component.labels.titleLabel}</label>
-        <input
-          type="text"
-          class="input"
-          placeholder=${component.labels.titlePlaceholder}
-          .value=${component._title}
-          @input=${(e: Event) => component.handleTitleInput(e)}
-        />
-      </div>
-
-      <div class="field">
-        <label class="label">${component.labels.slugLabel}</label>
-        <input
-          type="text"
-          class="input"
-          placeholder=${component.labels.slugPlaceholder}
-          .value=${component._slug}
-          @input=${(e: Event) => component.handleSlugInput(e)}
-        />
-        ${component._slug
-          ? html`<p class="text-xs text-muted-foreground mt-1">
-              ${component.siteUrl}/${component._slug}
-            </p>`
-          : html`<p class="text-xs text-muted-foreground mt-1">
-              ${component.labels.slugHelp}
-            </p>`}
-      </div>
-
-      <div class="field">
-        <label class="label">${component.labels.bodyLabel}</label>
-        <div
-          class="post-form-tiptap-body compose-tiptap-body border rounded-lg p-3 min-h-32"
-        ></div>
-      </div>
-
-      <div class="field">
-        <label class="label">${component.labels.urlLabel}</label>
-        <input
-          type="url"
-          class="input"
-          placeholder=${component.labels.urlPlaceholder}
-          .value=${component._url}
-          @input=${(e: Event) => component.handleInput("_url", e)}
-        />
-      </div>
-
-      ${component._format === "quote"
-        ? html`<div class="field">
-            <label class="label">${component.labels.quoteTextLabel}</label>
-            <textarea
-              class="textarea"
-              rows="3"
-              placeholder=${component.labels.quoteTextPlaceholder}
-              .value=${component._quoteText}
-              @input=${(e: Event) => component.handleInput("_quoteText", e)}
-            ></textarea>
-          </div>`
-        : nothing}
-
-      <div class="field">
-        <label class="label">${component.labels.mediaLabel}</label>
-        ${renderMediaList(component)}
-        <button
-          type="button"
-          class="btn-outline text-sm"
-          @click=${() => component.openMediaPicker()}
-        >
-          ${component.labels.mediaAddButton}
-        </button>
-      </div>
-
-      <div class="field">
-        <label class="label">${component.labels.statusLabel}</label>
-        <select
-          class="select"
-          .value=${component._status}
-          @change=${(e: Event) => {
-            const target = e.target as HTMLSelectElement;
-            component._status =
-              (target.value as typeof component._status) ?? "published";
-          }}
-        >
-          <option value="published">${component.labels.statusPublished}</option>
-          <option value="draft">${component.labels.statusDraft}</option>
-        </select>
-      </div>
-
-      <div class="field">
-        <label class="label">${component.labels.visibilityLabel}</label>
-        <select
-          class="select"
-          .value=${component._visibility}
-          @change=${(e: Event) => {
-            const target = e.target as HTMLSelectElement;
-            component._visibility =
-              (target.value as typeof component._visibility) ?? "public";
-          }}
-        >
-          <option value="public">${component.labels.visibilityPublic}</option>
-          <option value="latest_hidden">
-            ${component.labels.visibilityHiddenFromLatest}
-          </option>
-        </select>
-      </div>
-
-      <label class="flex items-center gap-2 text-sm">
-        <input
-          type="checkbox"
-          class="checkbox"
-          .checked=${component._pinned}
-          @change=${(e: Event) => {
-            const target = e.target as HTMLInputElement;
-            component._pinned = target.checked;
-          }}
-        />
-        ${component.labels.pinnedLabel}
-      </label>
-
-      ${renderCollections(component)}
-
-      <div class="flex gap-2">
-        <button type="submit" class="btn" ?disabled=${component._loading}>
-          ${component._loading
-            ? html`<svg
-                class="animate-spin size-4"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                role="status"
-              >
-                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-              </svg>`
-            : nothing}
-          ${component.labels.submitLabel}
-        </button>
-        <a href=${component.cancelHref} class="btn-outline"
-          >${component.labels.cancelLabel}</a
-        >
-      </div>
-    </form>
-
-    <dialog
-      id="post-media-picker"
-      class="p-6 rounded-lg max-w-2xl w-full backdrop:bg-black/50"
-      @click=${(event: Event) => {
-        if (event.target === event.currentTarget) {
-          component.closeMediaPicker();
-        }
-      }}
-    >
-      <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg font-semibold">
-          ${component.labels.mediaDialogTitle}
-        </h2>
-        <button
-          type="button"
-          class="btn-outline text-sm"
-          @click=${() => component.closeMediaPicker()}
-        >
-          ${component.labels.mediaDialogDone}
-        </button>
-      </div>
-      <div
-        id="post-media-grid"
-        class="grid grid-cols-4 gap-2 max-h-96 overflow-y-auto"
-      >
-        <p class="text-muted-foreground text-sm col-span-4">
-          ${component.labels.mediaDialogLoading}
-        </p>
-      </div>
-    </dialog>`;
-}

package/src/client/components/post-form-types.ts

@@ -1,96 +0,0 @@
-/**
- * Shared type definitions for the post form Lit component.
- */
-
-export type PostFormat = "note" | "link" | "quote";
-export type PostStatus = "published" | "draft";
-export type PostVisibility = "public" | "latest_hidden";
-
-export interface PostFormLabels {
-  formatLabel: string;
-  noteOption: string;
-  linkOption: string;
-  quoteOption: string;
-  titleLabel: string;
-  titlePlaceholder: string;
-  slugLabel: string;
-  slugPlaceholder: string;
-  slugHelp: string;
-  bodyLabel: string;
-  bodyPlaceholder: string;
-  urlLabel: string;
-  urlPlaceholder: string;
-  quoteTextLabel: string;
-  quoteTextPlaceholder: string;
-  mediaLabel: string;
-  mediaAddButton: string;
-  mediaRemoveButton: string;
-  mediaEmptyLabel: string;
-  statusLabel: string;
-  statusPublished: string;
-  statusDraft: string;
-  visibilityLabel: string;
-  visibilityPublic: string;
-  visibilityHiddenFromLatest: string;
-  pinnedLabel: string;
-  collectionsLabel: string;
-  submitLabel: string;
-  cancelLabel: string;
-  mediaDialogTitle: string;
-  mediaDialogDone: string;
-  mediaDialogLoading: string;
-  submitSuccessMessage: string;
-  submitErrorMessage: string;
-  draftFallbackMessage: string;
-}
-
-export interface PostFormInitial {
-  format: PostFormat;
-  title: string;
-  slug: string;
-  body: string;
-  url: string;
-  quoteText: string;
-  status: PostStatus;
-  visibility: PostVisibility;
-  pinned: boolean;
-  rating: number;
-  collectionIds: number[];
-  mediaIds: string[];
-}
-
-export interface ThreadCollectionOption {
-  id: number;
-  title: string;
-}
-
-export interface PostMediaItem {
-  id: string;
-  thumbUrl: string;
-  alt: string;
-  mimeType: string;
-  originalName: string;
-}
-
-export interface PostSubmitDetail {
-  endpoint: string;
-  isEdit: boolean;
-  data: {
-    format: PostFormat;
-    title?: string;
-    slug?: string;
-    body?: string;
-    status: PostStatus;
-    visibility: PostVisibility;
-    pinned: boolean;
-    url?: string;
-    quoteText?: string;
-    rating?: number;
-    collectionIds: number[];
-    mediaIds: string[];
-  };
-  messages: {
-    success: string;
-    error: string;
-  };
-}

package/src/client/media-metadata.ts

@@ -1,247 +0,0 @@
-/**
- * Client-side Media Metadata Extraction
- *
- * Extracts dimensions and blurhash from image/video files using
- * Canvas API and the blurhash library.
- */
-
-import { encode } from "blurhash";
-
-export interface MediaMetadata {
-  width?: number;
-  height?: number;
-  blurhash?: string;
-  waveform?: string;
-  poster?: Blob;
-}
-
-/**
- * Extract metadata (width, height, blurhash) from an image file.
- * Uses a small canvas (max 32px) for blurhash computation.
- */
-export async function extractImageMetadata(
-  file: File,
-): Promise<{ width: number; height: number; blurhash: string }> {
-  const img = await loadImage(file);
-  const { width, height } = img;
-
-  // Scale down for blurhash — max 32px on the longest side
-  const scale = Math.min(32 / width, 32 / height, 1);
-  const bw = Math.max(Math.round(width * scale), 1);
-  const bh = Math.max(Math.round(height * scale), 1);
-
-  const canvas = document.createElement("canvas");
-  canvas.width = bw;
-  canvas.height = bh;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("Failed to get canvas context");
-  ctx.drawImage(img, 0, 0, bw, bh);
-
-  const imageData = ctx.getImageData(0, 0, bw, bh);
-  const blurhash = encode(imageData.data, bw, bh, 4, 3);
-
-  return { width, height, blurhash };
-}
-
-/**
- * Extract metadata from a video file.
- * Loads the video to get dimensions, then seeks to `min(duration * 0.1, 1)` and
- * captures a frame for blurhash (32px canvas) and a poster image (640px WebP).
- * Uses an 8s timeout — returns only dimensions if capture times out.
- */
-export async function extractVideoMetadata(file: File): Promise<{
-  width: number;
-  height: number;
-  blurhash?: string;
-  poster?: Blob;
-}> {
-  const url = URL.createObjectURL(file);
-  try {
-    const video = document.createElement("video");
-    video.muted = true;
-    video.preload = "auto";
-
-    // Wait for metadata to load (includes duration)
-    const { width, height, duration } = await new Promise<{
-      width: number;
-      height: number;
-      duration: number;
-    }>((resolve, reject) => {
-      video.onloadedmetadata = () =>
-        resolve({
-          width: video.videoWidth,
-          height: video.videoHeight,
-          duration: video.duration,
-        });
-      video.onerror = () => reject(new Error("Failed to load video metadata"));
-      video.src = url;
-    });
-
-    // Try to capture frame for blurhash + poster (8s timeout)
-    let blurhash: string | undefined;
-    let poster: Blob | undefined;
-    try {
-      const seekTime = Math.min(duration * 0.1, 1);
-      const result = await Promise.race([
-        captureVideoFrameAndPoster(video, width, height, seekTime),
-        timeout(8000),
-      ]);
-      blurhash = result.blurhash;
-      poster = result.poster;
-    } catch {
-      // Timeout or capture failed — return dimensions only
-    }
-
-    return { width, height, blurhash, poster };
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-/**
- * Extract waveform peak amplitudes from an audio file.
- * Decodes via Web Audio API and returns a JSON string of ~100 normalized peak values (0–1).
- *
- * @param file - Audio file to extract peaks from
- * @returns JSON string of peak values, e.g. "[0.2,0.8,0.5,...]"
- */
-export async function extractAudioWaveform(file: File): Promise<string> {
-  const buffer = await file.arrayBuffer();
-  const audioCtx = new AudioContext();
-
-  try {
-    const decoded = await audioCtx.decodeAudioData(buffer);
-    const raw = decoded.getChannelData(0);
-    const count = 100;
-    const step = Math.max(1, Math.floor(raw.length / count));
-    const peaks: number[] = new Array(count);
-
-    for (let i = 0; i < count; i++) {
-      let max = 0;
-      const start = i * step;
-      const end = Math.min(start + step, raw.length);
-      for (let j = start; j < end; j++) {
-        const v = Math.abs(raw[j]);
-        if (v > max) max = v;
-      }
-      peaks[i] = max;
-    }
-
-    let maxPeak = 0;
-    for (const p of peaks) if (p > maxPeak) maxPeak = p;
-    if (maxPeak > 0) {
-      for (let i = 0; i < count; i++)
-        peaks[i] = Math.round((peaks[i] / maxPeak) * 100) / 100;
-    }
-
-    return JSON.stringify(peaks);
-  } finally {
-    await audioCtx.close();
-  }
-}
-
-/**
- * Extract metadata from any media file based on MIME type.
- */
-export async function extractMediaMetadata(file: File): Promise<MediaMetadata> {
-  try {
-    if (file.type.startsWith("image/")) {
-      return await extractImageMetadata(file);
-    }
-    if (file.type.startsWith("video/")) {
-      const result = await extractVideoMetadata(file);
-      return {
-        width: result.width,
-        height: result.height,
-        blurhash: result.blurhash,
-        poster: result.poster,
-      };
-    }
-    if (file.type.startsWith("audio/")) {
-      const waveform = await extractAudioWaveform(file);
-      return { waveform };
-    }
-  } catch {
-    // Extraction failed — return empty metadata
-  }
-  return {};
-}
-
-// --- Helpers ---
-
-function loadImage(file: File): Promise<HTMLImageElement> {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    const url = URL.createObjectURL(file);
-    img.onload = () => {
-      URL.revokeObjectURL(url);
-      resolve(img);
-    };
-    img.onerror = () => {
-      URL.revokeObjectURL(url);
-      reject(new Error("Failed to load image"));
-    };
-    img.src = url;
-  });
-}
-
-function captureVideoFrameAndPoster(
-  video: HTMLVideoElement,
-  width: number,
-  height: number,
-  seekTime: number,
-): Promise<{ blurhash: string; poster?: Blob }> {
-  return new Promise((resolve, reject) => {
-    video.currentTime = seekTime;
-    video.onseeked = () => {
-      try {
-        // Blurhash: small 32px canvas
-        const scale = Math.min(32 / width, 32 / height, 1);
-        const bw = Math.max(Math.round(width * scale), 1);
-        const bh = Math.max(Math.round(height * scale), 1);
-
-        const bhCanvas = document.createElement("canvas");
-        bhCanvas.width = bw;
-        bhCanvas.height = bh;
-        const bhCtx = bhCanvas.getContext("2d");
-        if (!bhCtx) throw new Error("Failed to get canvas context");
-        bhCtx.drawImage(video, 0, 0, bw, bh);
-
-        const imageData = bhCtx.getImageData(0, 0, bw, bh);
-        const blurhash = encode(imageData.data, bw, bh, 4, 3);
-
-        // Poster: 640px wide WebP
-        const posterScale = Math.min(640 / width, 1);
-        const pw = Math.round(width * posterScale);
-        const ph = Math.round(height * posterScale);
-
-        const posterCanvas = document.createElement("canvas");
-        posterCanvas.width = pw;
-        posterCanvas.height = ph;
-        const pCtx = posterCanvas.getContext("2d");
-        if (!pCtx) {
-          resolve({ blurhash });
-          return;
-        }
-        pCtx.drawImage(video, 0, 0, pw, ph);
-
-        posterCanvas.toBlob(
-          (blob) => {
-            resolve({ blurhash, poster: blob ?? undefined });
-          },
-          "image/webp",
-          0.8,
-        );
-      } catch (err) {
-        reject(err);
-      }
-    };
-    video.onerror = () => reject(new Error("Video seek failed"));
-  });
-}
-
-function timeout(ms: number): Promise<never> {
-  return new Promise((_, reject) =>
-    setTimeout(() => reject(new Error("Timeout")), ms),
-  );
-}