@jant/core 0.2.18 → 0.2.20

package/src/lib/image-processor.ts

@@ -217,10 +217,3 @@ async function processToFile(
 }
 
 export const ImageProcessor = { process, processToFile };
-
-// Expose globally for inline scripts
-if (typeof window !== "undefined") {
-  (
-    window as unknown as { ImageProcessor: typeof ImageProcessor }
-  ).ImageProcessor = ImageProcessor;
-}

package/src/lib/media-upload.ts

@@ -0,0 +1,148 @@
+/**
+ * Client-side Media Upload Handler
+ *
+ * Handles file upload flow:
+ * 1. User selects file via [data-media-upload] input
+ * 2. Creates placeholder in grid with spinner
+ * 3. Processes image via ImageProcessor (resize/convert to WebP)
+ * 4. Sets processed file on hidden Datastar form via DataTransfer API
+ * 5. Triggers form.requestSubmit() — Datastar handles upload + SSE response
+ */
+
+import { ImageProcessor } from "./image-processor.js";
+
+/**
+ * Format file size for display
+ */
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+/**
+ * Ensure the media grid exists, removing empty state if needed
+ */
+function ensureGridExists(): HTMLElement {
+  let grid = document.getElementById("media-grid");
+  if (grid) return grid;
+
+  document.getElementById("empty-state")?.remove();
+
+  grid = document.createElement("div");
+  grid.id = "media-grid";
+  grid.className =
+    "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4";
+  document.getElementById("media-content")?.appendChild(grid);
+  return grid;
+}
+
+/**
+ * Create a placeholder card with spinner in the media grid
+ */
+function createPlaceholder(
+  fileName: string,
+  fileSize: number,
+  statusText: string,
+): HTMLElement {
+  const placeholder = document.createElement("div");
+  placeholder.id = "upload-placeholder";
+  placeholder.className = "group relative";
+  placeholder.innerHTML = `
+    <div class="aspect-square bg-muted rounded-lg overflow-hidden border flex items-center justify-center">
+      <div class="text-center px-2">
+        <svg class="animate-spin h-6 w-6 text-muted-foreground mx-auto mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+        <span id="upload-status" class="text-xs text-muted-foreground">${statusText}</span>
+      </div>
+    </div>
+    <div class="mt-2 text-xs truncate" title="${fileName}">${fileName}</div>
+    <div class="text-xs text-muted-foreground">${formatFileSize(fileSize)}</div>
+  `;
+  return placeholder;
+}
+
+/**
+ * Replace placeholder content with an error message
+ */
+function showPlaceholderError(
+  placeholder: HTMLElement,
+  fileName: string,
+  errorMessage: string,
+): void {
+  placeholder.innerHTML = `
+    <div class="aspect-square bg-destructive/10 rounded-lg overflow-hidden border border-destructive flex items-center justify-center">
+      <div class="text-center px-2">
+        <span class="text-xs text-destructive">${errorMessage}</span>
+      </div>
+    </div>
+    <div class="mt-2 text-xs truncate text-destructive">${fileName}</div>
+    <button type="button" class="text-xs text-muted-foreground hover:underline" onclick="this.closest('.group').remove()">Remove</button>
+  `;
+}
+
+/**
+ * Handle the upload flow for a selected file
+ */
+async function handleUpload(
+  input: HTMLInputElement,
+  file: File,
+): Promise<void> {
+  const processingText = input.dataset.textProcessing || "Processing...";
+  const uploadingText = input.dataset.textUploading || "Uploading...";
+  const errorText =
+    input.dataset.textError || "Upload failed. Please try again.";
+
+  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);
+
+    // Update status
+    const statusEl = document.getElementById("upload-status");
+    if (statusEl) statusEl.textContent = uploadingText;
+
+    // Set processed file on hidden form input via DataTransfer API
+    const formInput = document.getElementById(
+      "upload-file-input",
+    ) as HTMLInputElement | null;
+    const form = document.getElementById(
+      "upload-form",
+    ) as HTMLFormElement | null;
+    if (!formInput || !form) throw new Error("Upload form not found");
+
+    const dt = new DataTransfer();
+    dt.items.add(processed);
+    formInput.files = dt.files;
+
+    // Trigger Datastar-intercepted form submission
+    form.requestSubmit();
+  } catch (err) {
+    const message = err instanceof Error ? err.message : errorText;
+    showPlaceholderError(placeholder, file.name, message);
+  }
+
+  // Reset file input so the same file can be re-selected
+  input.value = "";
+}
+
+/**
+ * Initialize media upload via event delegation
+ */
+function initMediaUpload(): void {
+  document.addEventListener("change", (e) => {
+    const input = (e.target as HTMLElement).closest(
+      "[data-media-upload]",
+    ) as HTMLInputElement | null;
+    if (!input?.files?.[0]) return;
+
+    handleUpload(input, input.files[0]);
+  });
+}
+
+initMediaUpload();

package/src/lib/sse.ts

@@ -1,20 +1,21 @@
 /**
- * Server-Sent Events (SSE) utilities for Datastar v1.0.0-RC.7
+ * Datastar response utilities for v1.0.0-RC.7
  *
- * Generates SSE events compatible with the Datastar client's expected format.
+ * Provides both SSE (multi-event) and plain HTTP (single-event) response helpers.
  *
- * @see https://data-star.dev/
+ * **Non-SSE helpers** (preferred for single operations):
+ * - `dsRedirect(url)` — redirect via text/html
+ * - `dsToast(message, type)` — toast notification via text/html
+ * - `dsSignals(signals)` — signal patch via application/json
  *
- * @example
- * ```ts
- * app.post("/api/example", (c) => {
- *   return sse(c, async (stream) => {
- *     await stream.patchSignals({ loading: false });
- *     await stream.patchElements('<div id="result">Done!</div>');
- *     await stream.redirect("/success");
- *   });
- * });
- * ```
+ * **SSE** (for multiple operations in one response):
+ * - `sse(c, handler)` — streaming SSE with full stream API
+ *
+ * Datastar auto-detects response type by Content-Type:
+ * - `text/html` → dispatches as `datastar-patch-elements`
+ * - `application/json` → dispatches as `datastar-patch-signals`
+ *
+ * @see https://data-star.dev/
  */
 
 import type { Context } from "hono";
@@ -124,6 +125,35 @@ export interface SSEStream {
   toast(message: string, type?: "success" | "error"): void;
 }
 
+// ---------------------------------------------------------------------------
+// Shared internal helpers (used by both SSE and non-SSE response builders)
+// ---------------------------------------------------------------------------
+
+/** Build the redirect script tag for Datastar patch-elements */
+function buildRedirectScript(url: string): string {
+  const escapedUrl = url.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return `<script data-effect="el.remove()">window.location.href='${escapedUrl}'</script>`;
+}
+
+/** Build a toast notification HTML element */
+function buildToastHtml(message: string, type: "success" | "error"): string {
+  const cls = type === "error" ? "toast-error" : "toast-success";
+  const icon =
+    type === "error"
+      ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>'
+      : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>';
+  const closeBtn = `<button class="toast-close" data-on:click="el.closest('.toast').classList.add('toast-out'); el.closest('.toast').addEventListener('animationend', () => el.closest('.toast').remove())"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path d="M18 6 6 18M6 6l12 12"/></svg></button>`;
+  const escapedMessage = message
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+  return `<div class="toast ${cls}" data-init="setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)">${icon}<span>${escapedMessage}</span>${closeBtn}</div>`;
+}
+
+// ---------------------------------------------------------------------------
+// SSE helpers
+// ---------------------------------------------------------------------------
+
 /**
  * Format a single SSE event string
  *
@@ -209,10 +239,8 @@ export function sse(
         },
 
         redirect(url) {
-          const escapedUrl = url.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
-          const script = `<script data-effect="el.remove()">window.location.href='${escapedUrl}'</script>`;
           const dataLines: string[] = [
-            `elements ${script}`,
+            `elements ${buildRedirectScript(url)}`,
             "mode append",
             "selector body",
           ];
@@ -234,19 +262,8 @@ export function sse(
         },
 
         toast(message, type = "success") {
-          const cls = type === "error" ? "toast-error" : "toast-success";
-          const icon =
-            type === "error"
-              ? '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>'
-              : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>';
-          const closeBtn = `<button class="toast-close" data-on:click="el.closest('.toast').classList.add('toast-out'); el.closest('.toast').addEventListener('animationend', () => el.closest('.toast').remove())"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path d="M18 6 6 18M6 6l12 12"/></svg></button>`;
-          const escapedMessage = message
-            .replace(/&/g, "&amp;")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;");
-          const html = `<div class="toast ${cls}" data-init="setTimeout(() => { el.classList.add('toast-out'); el.addEventListener('animationend', () => el.remove()) }, 3000)">${icon}<span>${escapedMessage}</span>${closeBtn}</div>`;
           const dataLines: string[] = [
-            `elements ${html}`,
+            `elements ${buildToastHtml(message, type)}`,
             "mode append",
             "selector #toast-container",
           ];
@@ -270,3 +287,88 @@ export function sse(
 
   return new Response(body, { headers });
 }
+
+// ---------------------------------------------------------------------------
+// Non-SSE Datastar helpers (for single-operation responses)
+// ---------------------------------------------------------------------------
+
+/**
+ * Datastar redirect via text/html
+ *
+ * Returns a plain HTML response that Datastar dispatches as `datastar-patch-elements`.
+ * Use instead of `sse()` when the only action is a redirect.
+ *
+ * @param url - The URL to redirect to
+ * @param options - Optional extra headers (e.g. Set-Cookie for auth)
+ * @returns Response with text/html content-type
+ *
+ * @example
+ * ```ts
+ * return dsRedirect("/dash/posts");
+ *
+ * // With cookie forwarding (for auth)
+ * return dsRedirect("/dash", { headers: { "Set-Cookie": cookie } });
+ * ```
+ */
+export function dsRedirect(
+  url: string,
+  options?: { headers?: Record<string, string> },
+): Response {
+  return new Response(buildRedirectScript(url), {
+    headers: {
+      "Content-Type": "text/html",
+      "Datastar-Mode": "append",
+      "Datastar-Selector": "body",
+      ...options?.headers,
+    },
+  });
+}
+
+/**
+ * Datastar toast notification via text/html
+ *
+ * Returns a plain HTML response that Datastar dispatches as `datastar-patch-elements`.
+ * Use instead of `sse()` when the only action is showing a toast.
+ *
+ * @param message - The message to display
+ * @param type - Toast type: "success" (default) or "error"
+ * @returns Response with text/html content-type
+ *
+ * @example
+ * ```ts
+ * return dsToast("Settings saved successfully.");
+ * return dsToast("Something went wrong.", "error");
+ * ```
+ */
+export function dsToast(
+  message: string,
+  type: "success" | "error" = "success",
+): Response {
+  return new Response(buildToastHtml(message, type), {
+    headers: {
+      "Content-Type": "text/html",
+      "Datastar-Mode": "append",
+      "Datastar-Selector": "#toast-container",
+    },
+  });
+}
+
+/**
+ * Datastar signal patch via application/json
+ *
+ * Returns a JSON response that Datastar dispatches as `datastar-patch-signals`.
+ * Use instead of `sse()` when the only action is updating signals.
+ *
+ * @param signals - Object containing signal values to update
+ * @returns Response with application/json content-type
+ *
+ * @example
+ * ```ts
+ * return dsSignals({ _uploadError: "File too large" });
+ * ```
+ */
+export function dsSignals(signals: Record<string, unknown>): Response {
+  return new Response(JSON.stringify(signals), {
+    headers: { "Content-Type": "application/json" },
+  });
+}

package/src/routes/api/upload.ts

@@ -11,7 +11,7 @@ import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { requireAuthApi } from "../../middleware/auth.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-import { sse } from "../../lib/sse.js";
+import { sse, dsSignals } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -117,11 +117,7 @@ function wantsSSE(c: {
 uploadApiRoutes.post("/", async (c) => {
   if (!c.env.R2) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({
-          _uploadError: "R2 storage not configured",
-        });
-      });
+      return dsSignals({ _uploadError: "R2 storage not configured" });
     }
     return c.json({ error: "R2 storage not configured" }, 500);
   }
@@ -131,9 +127,7 @@ uploadApiRoutes.post("/", async (c) => {
 
   if (!file) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({ _uploadError: "No file provided" });
-      });
+      return dsSignals({ _uploadError: "No file provided" });
     }
     return c.json({ error: "No file provided" }, 400);
   }
@@ -148,9 +142,7 @@ uploadApiRoutes.post("/", async (c) => {
   ];
   if (!allowedTypes.includes(file.type)) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({ _uploadError: "File type not allowed" });
-      });
+      return dsSignals({ _uploadError: "File type not allowed" });
     }
     return c.json({ error: "File type not allowed" }, 400);
   }
@@ -159,11 +151,7 @@ uploadApiRoutes.post("/", async (c) => {
   const maxSize = 10 * 1024 * 1024;
   if (file.size > maxSize) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({
-          _uploadError: "File too large (max 10MB)",
-        });
-      });
+      return dsSignals({ _uploadError: "File too large (max 10MB)" });
     }
     return c.json({ error: "File too large (max 10MB)" }, 400);
   }
@@ -206,6 +194,7 @@ uploadApiRoutes.post("/", async (c) => {
           mode: "outer",
           selector: "#upload-placeholder",
         });
+        await stream.toast("Upload successful!");
       });
     }
 
@@ -222,7 +211,12 @@ uploadApiRoutes.post("/", async (c) => {
     // eslint-disable-next-line no-console -- Error logging is intentional
     console.error("Upload error:", err);
 
-    // Return error - client will handle updating the placeholder
+    if (wantsSSE(c)) {
+      return sse(c, async (stream) => {
+        await stream.remove("#upload-placeholder");
+        await stream.toast("Upload failed. Please try again.", "error");
+      });
+    }
     return c.json({ error: "Upload failed" }, 500);
   }
 });

package/src/routes/dash/appearance.tsx

@@ -7,7 +7,7 @@ import { useLingui } from "@lingui/react/macro";
 import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { DashLayout } from "../../theme/layouts/index.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect, dsToast } from "../../lib/sse.js";
 import { getSiteName } from "../../lib/config.js";
 import { SETTINGS_KEYS } from "../../lib/constants.js";
 import { getAvailableThemes } from "../../lib/theme.js";
@@ -162,9 +162,7 @@ appearanceRoutes.post("/", async (c) => {
   // Validate theme ID
   const validTheme = themes.find((t) => t.id === body.theme);
   if (!validTheme) {
-    return sse(c, async (stream) => {
-      await stream.toast("Invalid theme selected.", "error");
-    });
+    return dsToast("Invalid theme selected.", "error");
   }
 
   if (validTheme.id === "default") {
@@ -174,7 +172,5 @@ appearanceRoutes.post("/", async (c) => {
   }
 
   // Full page reload to apply the new theme CSS
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/appearance?saved");
-  });
+  return dsRedirect("/dash/appearance?saved");
 });

package/src/routes/dash/collections.tsx

@@ -16,7 +16,7 @@ import {
   DangerZone,
 } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 
 type Env = { Bindings: Bindings; Variables: AppVariables };
 
@@ -409,9 +409,7 @@ collectionsRoutes.post("/", async (c) => {
     description: body.description || undefined,
   });
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/collections/${collection.id}`);
-  });
+  return dsRedirect(`/dash/collections/${collection.id}`);
 });
 
 // View single collection
@@ -476,9 +474,7 @@ collectionsRoutes.post("/:id", async (c) => {
     description: body.description || undefined,
   });
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/collections/${id}`);
-  });
+  return dsRedirect(`/dash/collections/${id}`);
 });
 
 // Delete collection
@@ -488,9 +484,7 @@ collectionsRoutes.post("/:id/delete", async (c) => {
 
   await c.var.services.collections.delete(id);
 
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/collections");
-  });
+  return dsRedirect("/dash/collections");
 });
 
 // Remove post from collection
@@ -504,7 +498,5 @@ collectionsRoutes.post("/:id/remove-post", async (c) => {
     await c.var.services.collections.removePost(id, body.postId);
   }
 
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/collections/${id}`);
-  });
+  return dsRedirect(`/dash/collections/${id}`);
 });