@jant/core 0.2.17 → 0.2.19

package/dist/lib/sse.d.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";
 /**
@@ -88,6 +89,21 @@ export interface SSEStream {
      * ```
      */
     remove(selector: string): void;
+    /**
+     * Show a toast notification
+     *
+     * Appends a toast element to `#toast-container` with auto-dismiss after 3s.
+     *
+     * @param message - The message to display
+     * @param type - Toast type: "success" (default) or "error"
+     *
+     * @example
+     * ```ts
+     * await stream.toast("Settings saved successfully.");
+     * await stream.toast("Something went wrong.", "error");
+     * ```
+     */
+    toast(message: string, type?: "success" | "error"): void;
 }
 /**
  * Create an SSE response for Datastar
@@ -120,4 +136,57 @@ export interface SSEStream {
 export declare function sse(c: Context, handler: (stream: SSEStream) => Promise<void>, options?: {
     headers?: Record<string, string>;
 }): Response;
+/**
+ * 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 declare function dsRedirect(url: string, options?: {
+    headers?: Record<string, string>;
+}): Response;
+/**
+ * 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 declare function dsToast(message: string, type?: "success" | "error"): Response;
+/**
+ * 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 declare function dsSignals(signals: Record<string, unknown>): Response;
 //# sourceMappingURL=sse.d.ts.map

package/dist/lib/sse.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sse.d.ts","sourceRoot":"","sources":["../../src/lib/sse.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;;;;;;;;OAUG;IACH,YAAY,CACV,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,OAAO,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,GACpC,IAAI,CAAC;IAER;;;;;;;;;;;;;;;;;OAiBG;IACH,aAAa,CACX,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,GACA,IAAI,CAAC;IAER;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B;;;;;;;;;OASG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,GAAG,CACjB,CAAC,EAAE,OAAO,EACV,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,EAC7C,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GAC7C,QAAQ,CA2EV"}
+{"version":3,"file":"sse.d.ts","sourceRoot":"","sources":["../../src/lib/sse.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAEpC;;;;GAIG;AACH,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,OAAO,GACP,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;AAEb;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;;;;;;;;OAUG;IACH,YAAY,CACV,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChC,OAAO,CAAC,EAAE;QAAE,aAAa,CAAC,EAAE,OAAO,CAAA;KAAE,GACpC,IAAI,CAAC;IAER;;;;;;;;;;;;;;;;;OAiBG;IACH,aAAa,CACX,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,SAAS,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,GACA,IAAI,CAAC;IAER;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B;;;;;;;;;OASG;IACH,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAE/B;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;CAC1D;AA+CD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,GAAG,CACjB,CAAC,EAAE,OAAO,EACV,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,EAC7C,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GAC7C,QAAQ,CAoFV;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,EACX,OAAO,CAAC,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAAE,GAC7C,QAAQ,CASV;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CACrB,OAAO,EAAE,MAAM,EACf,IAAI,GAAE,SAAS,GAAG,OAAmB,GACpC,QAAQ,CAQV;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,QAAQ,CAIpE"}

package/dist/lib/sse.js

@@ -1,21 +1,39 @@
 /**
- * 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/
+ */ // ---------------------------------------------------------------------------
+// Shared internal helpers (used by both SSE and non-SSE response builders)
+// ---------------------------------------------------------------------------
+/** Build the redirect script tag for Datastar patch-elements */ function buildRedirectScript(url) {
+    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, type) {
+    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
  *
  * @param eventType - The Datastar event type (e.g. "datastar-patch-elements")
@@ -88,10 +106,8 @@
                     controller.enqueue(encoder.encode(formatEvent("datastar-patch-elements", dataLines)));
                 },
                 redirect (url) {
-                    const escapedUrl = url.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
-                    const script = `<script data-effect="el.remove()">window.location.href='${escapedUrl}'</script>`;
                     const dataLines = [
-                        `elements ${script}`,
+                        `elements ${buildRedirectScript(url)}`,
                         "mode append",
                         "selector body"
                     ];
@@ -103,6 +119,14 @@
                         `mode remove`,
                         `selector ${selector}`
                     ])));
+                },
+                toast (message, type = "success") {
+                    const dataLines = [
+                        `elements ${buildToastHtml(message, type)}`,
+                        "mode append",
+                        "selector #toast-container"
+                    ];
+                    controller.enqueue(encoder.encode(formatEvent("datastar-patch-elements", dataLines)));
                 }
             };
             await handler(stream);
@@ -119,3 +143,77 @@
         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, options) {
+    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, type = "success") {
+    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) {
+    return new Response(JSON.stringify(signals), {
+        headers: {
+            "Content-Type": "application/json"
+        }
+    });
+}

package/dist/lib/theme.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Theme Resolution Helpers
+ *
+ * Resolves the active color theme and builds CSS for injection into `<head>`.
+ */
+import type { ColorTheme } from "../theme/color-themes.js";
+import type { JantConfig } from "../types.js";
+/**
+ * Get the list of available color themes.
+ *
+ * Returns `config.theme.colorThemes` if provided, otherwise the built-in list.
+ *
+ * @param config - The Jant configuration
+ * @returns Array of available color themes
+ *
+ * @example
+ * ```typescript
+ * const themes = getAvailableThemes(c.var.config);
+ * ```
+ */
+export declare function getAvailableThemes(config: JantConfig): ColorTheme[];
+/**
+ * Build a `<style>` CSS string from a color theme and optional cssVariables overlay.
+ *
+ * Priority (lowest → highest):
+ *   BaseCoat defaults → selected theme → cssVariables
+ *
+ * @param theme - The active color theme (undefined = no theme overrides)
+ * @param cssVariables - Extra CSS variable overrides from `createApp({ theme: { cssVariables } })`
+ * @returns CSS string to inject in `<head>`, or empty string if nothing to inject
+ *
+ * Uses `:root:root` and `:root.dark` selectors for higher specificity than
+ * BaseCoat defaults (`:root` and `.dark`). This ensures theme overrides win
+ * regardless of source order — important because Vite dev mode injects CSS
+ * as `<style>` tags after the theme `<style>`.
+ *
+ * @example
+ * ```typescript
+ * const css = buildThemeStyle(blueTheme, { "--radius": "0.5rem" });
+ * // => ":root:root { --primary: oklch(...); ... }\n:root.dark { ... }"
+ * ```
+ */
+export declare function buildThemeStyle(theme: ColorTheme | undefined, cssVariables?: Record<string, string>): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/lib/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/lib/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,UAAU,GAAG,UAAU,EAAE,CAEnE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,UAAU,GAAG,SAAS,EAC7B,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACpC,MAAM,CAkCR"}

package/dist/lib/theme.js

@@ -0,0 +1,65 @@
+/**
+ * Theme Resolution Helpers
+ *
+ * Resolves the active color theme and builds CSS for injection into `<head>`.
+ */ import { BUILTIN_COLOR_THEMES } from "../theme/color-themes.js";
+/**
+ * Get the list of available color themes.
+ *
+ * Returns `config.theme.colorThemes` if provided, otherwise the built-in list.
+ *
+ * @param config - The Jant configuration
+ * @returns Array of available color themes
+ *
+ * @example
+ * ```typescript
+ * const themes = getAvailableThemes(c.var.config);
+ * ```
+ */ export function getAvailableThemes(config) {
+    return config.theme?.colorThemes ?? BUILTIN_COLOR_THEMES;
+}
+/**
+ * Build a `<style>` CSS string from a color theme and optional cssVariables overlay.
+ *
+ * Priority (lowest → highest):
+ *   BaseCoat defaults → selected theme → cssVariables
+ *
+ * @param theme - The active color theme (undefined = no theme overrides)
+ * @param cssVariables - Extra CSS variable overrides from `createApp({ theme: { cssVariables } })`
+ * @returns CSS string to inject in `<head>`, or empty string if nothing to inject
+ *
+ * Uses `:root:root` and `:root.dark` selectors for higher specificity than
+ * BaseCoat defaults (`:root` and `.dark`). This ensures theme overrides win
+ * regardless of source order — important because Vite dev mode injects CSS
+ * as `<style>` tags after the theme `<style>`.
+ *
+ * @example
+ * ```typescript
+ * const css = buildThemeStyle(blueTheme, { "--radius": "0.5rem" });
+ * // => ":root:root { --primary: oklch(...); ... }\n:root.dark { ... }"
+ * ```
+ */ export function buildThemeStyle(theme, cssVariables) {
+    const lightVars = {
+        ...theme?.light ?? {},
+        ...cssVariables ?? {}
+    };
+    const darkVars = {
+        ...theme?.dark ?? {},
+        ...cssVariables ?? {}
+    };
+    const hasLight = Object.keys(lightVars).length > 0;
+    const hasDark = Object.keys(darkVars).length > 0;
+    if (!hasLight && !hasDark) return "";
+    const parts = [];
+    if (hasLight) {
+        const declarations = Object.entries(lightVars).map(([k, v])=>`  ${k}: ${v};`).join("\n");
+        // :root:root has specificity (0,0,2) > BaseCoat's :root (0,0,1)
+        parts.push(`:root:root {\n${declarations}\n}`);
+    }
+    if (hasDark) {
+        const declarations = Object.entries(darkVars).map(([k, v])=>`  ${k}: ${v};`).join("\n");
+        // :root.dark has specificity (0,1,1) > BaseCoat's .dark (0,1,0)
+        parts.push(`:root.dark {\n${declarations}\n}`);
+    }
+    return parts.join("\n");
+}

package/dist/routes/api/upload.js

@@ -7,7 +7,7 @@
 import { html } from "hono/html";
 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";
 export const uploadApiRoutes = new Hono();
 // Require auth for all upload routes
 uploadApiRoutes.use("*", requireAuthApi());
@@ -88,10 +88,8 @@ function formatSize(bytes) {
 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({
@@ -102,10 +100,8 @@ uploadApiRoutes.post("/", async (c)=>{
     const file = formData.get("file");
     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({
@@ -122,10 +118,8 @@ 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({
@@ -136,10 +130,8 @@ 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({
@@ -176,6 +168,7 @@ uploadApiRoutes.post("/", async (c)=>{
                     mode: "outer",
                     selector: "#upload-placeholder"
                 });
+                await stream.toast("Upload successful!");
             });
         }
         // JSON response for API clients
@@ -190,7 +183,12 @@ uploadApiRoutes.post("/", async (c)=>{
     } catch (err) {
         // 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/dist/routes/dash/appearance.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Dashboard Appearance Routes
+ */
+import { Hono } from "hono";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+type Env = {
+    Bindings: Bindings;
+    Variables: AppVariables;
+};
+export declare const appearanceRoutes: Hono<Env, import("hono/types").BlankSchema, "/">;
+export {};
+//# sourceMappingURL=appearance.d.ts.map

package/dist/routes/dash/appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/appearance.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAQjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,gBAAgB,kDAAkB,CAAC"}

package/dist/routes/dash/appearance.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "hono/jsx/jsx-runtime";
+/**
+ * Dashboard Appearance Routes
+ */ import { Hono } from "hono";
+import { useLingui as $_useLingui } from "@jant/core/i18n";
+import { DashLayout } from "../../theme/layouts/index.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";
+export const appearanceRoutes = new Hono();
+function ThemeCard({ theme, selected }) {
+    const expr = `$theme === '${theme.id}'`;
+    const { preview } = theme;
+    return /*#__PURE__*/ _jsx("label", {
+        class: `block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`,
+        "data-class:border-primary": expr,
+        "data-class:border-border": `$theme !== '${theme.id}'`,
+        children: /*#__PURE__*/ _jsxs("div", {
+            class: "grid grid-cols-2",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    class: "p-5",
+                    style: `background-color:${preview.lightBg};color:${preview.lightText}`,
+                    children: [
+                        /*#__PURE__*/ _jsx("input", {
+                            type: "radio",
+                            name: "theme",
+                            value: theme.id,
+                            "data-bind": "theme",
+                            checked: selected || undefined,
+                            class: "mb-1"
+                        }),
+                        /*#__PURE__*/ _jsx("h3", {
+                            class: "font-bold text-lg",
+                            children: theme.name
+                        }),
+                        /*#__PURE__*/ _jsxs("p", {
+                            class: "text-sm mt-2 leading-relaxed",
+                            children: [
+                                "This is the ",
+                                theme.name,
+                                " theme in light mode. Links",
+                                " ",
+                                /*#__PURE__*/ _jsx("a", {
+                                    tabIndex: -1,
+                                    class: "underline",
+                                    style: `color:${preview.lightLink}`,
+                                    children: "look like this"
+                                }),
+                                ". We'll show the correct light or dark mode based on your visitor's settings."
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    class: "p-5",
+                    style: `background-color:${preview.darkBg};color:${preview.darkText}`,
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            class: "font-bold text-lg",
+                            children: theme.name
+                        }),
+                        /*#__PURE__*/ _jsxs("p", {
+                            class: "text-sm mt-2 leading-relaxed",
+                            children: [
+                                "This is the ",
+                                theme.name,
+                                " theme in dark mode. Links",
+                                " ",
+                                /*#__PURE__*/ _jsx("a", {
+                                    tabIndex: -1,
+                                    class: "underline",
+                                    style: `color:${preview.darkLink}`,
+                                    children: "look like this"
+                                }),
+                                ". We'll show the correct light or dark mode based on your visitor's settings."
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function AppearanceContent({ themes, currentThemeId }) {
+    const { i18n: $__i18n, _: $__ } = $_useLingui();
+    const signals = JSON.stringify({
+        theme: currentThemeId
+    }).replace(/</g, "\\u003c");
+    return /*#__PURE__*/ _jsx("div", {
+        "data-signals": signals,
+        "data-on:change": "@post('/dash/appearance')",
+        class: "max-w-3xl",
+        children: /*#__PURE__*/ _jsxs("fieldset", {
+            children: [
+                /*#__PURE__*/ _jsx("legend", {
+                    class: "text-lg font-semibold",
+                    children: $__i18n._({
+                        id: "rFmBG3",
+                        message: "Color theme"
+                    })
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    class: "text-sm text-muted-foreground mb-4",
+                    children: $__i18n._({
+                        id: "07Epll",
+                        message: "This will theme both your site and your dashboard. All color themes support dark mode."
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    class: "flex flex-col gap-4",
+                    children: themes.map((theme)=>/*#__PURE__*/ _jsx(ThemeCard, {
+                            theme: theme,
+                            selected: theme.id === currentThemeId
+                        }, theme.id))
+                })
+            ]
+        })
+    });
+}
+// Appearance page
+appearanceRoutes.get("/", async (c)=>{
+    const { settings } = c.var.services;
+    const siteName = await getSiteName(c);
+    const currentThemeId = await settings.get(SETTINGS_KEYS.THEME) ?? "default";
+    const themes = getAvailableThemes(c.var.config);
+    const saved = c.req.query("saved") !== undefined;
+    return c.html(/*#__PURE__*/ _jsx(DashLayout, {
+        c: c,
+        title: "Appearance",
+        siteName: siteName,
+        currentPath: "/dash/appearance",
+        toast: saved ? {
+            message: "Theme saved successfully."
+        } : undefined,
+        children: /*#__PURE__*/ _jsx(AppearanceContent, {
+            themes: themes,
+            currentThemeId: currentThemeId
+        })
+    }));
+});
+// Save theme
+appearanceRoutes.post("/", async (c)=>{
+    const body = await c.req.json();
+    const { settings } = c.var.services;
+    const themes = getAvailableThemes(c.var.config);
+    // Validate theme ID
+    const validTheme = themes.find((t)=>t.id === body.theme);
+    if (!validTheme) {
+        return dsToast("Invalid theme selected.", "error");
+    }
+    if (validTheme.id === "default") {
+        await settings.remove(SETTINGS_KEYS.THEME);
+    } else {
+        await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
+    }
+    // Full page reload to apply the new theme CSS
+    return dsRedirect("/dash/appearance?saved");
+});