@jant/core 0.2.17 → 0.2.19

package/dist/routes/dash/collections.js

@@ -7,7 +7,7 @@ import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, ListItemRow, ActionButtons, CrudPageHeader, 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";
 export const collectionsRoutes = new Hono();
 function CollectionsListContent({ collections }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
@@ -428,9 +428,7 @@ collectionsRoutes.post("/", async (c)=>{
         path: body.path,
         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
 collectionsRoutes.get("/:id", async (c)=>{
@@ -478,18 +476,14 @@ collectionsRoutes.post("/:id", async (c)=>{
         path: body.path,
         description: body.description || undefined
     });
-    return sse(c, async (stream)=>{
-        await stream.redirect(`/dash/collections/${id}`);
-    });
+    return dsRedirect(`/dash/collections/${id}`);
 });
 // Delete collection
 collectionsRoutes.post("/:id/delete", async (c)=>{
     const id = parseInt(c.req.param("id"), 10);
     if (isNaN(id)) return c.notFound();
     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
 collectionsRoutes.post("/:id/remove-post", async (c)=>{
@@ -499,7 +493,5 @@ collectionsRoutes.post("/:id/remove-post", async (c)=>{
     if (body.postId) {
         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}`);
 });

package/dist/routes/dash/media.js

@@ -11,7 +11,7 @@ import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 export const mediaRoutes = new Hono();
 /**
  * Format file size for display
@@ -72,8 +72,7 @@ export const mediaRoutes = new Hono();
 /**
  * Media list page content
  *
- * Uses plain JavaScript for upload state management (more reliable than Datastar signals
- * for complex async flows like file uploads with SSE responses).
+ * Upload is handled by media-upload.ts (client module) + Datastar @post for SSE.
  */ function MediaListContent({ mediaList, r2PublicUrl, imageTransformUrl }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const processingText = $__i18n._({
@@ -92,164 +91,18 @@ export const mediaRoutes = new Hono();
         id: "pZq3aX",
         message: "Upload failed. Please try again."
     });
-    // Plain JavaScript upload handler - shows progress in the list
-    const uploadScript = `
-async function handleMediaUpload(input) {
-  if (!input.files || !input.files[0]) return;
-
-  const file = input.files[0];
-  const errorBox = document.getElementById('upload-error');
-  errorBox.classList.add('hidden');
-
-  // Ensure grid exists (remove empty state if needed)
-  let grid = document.getElementById('media-grid');
-  if (!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);
-  }
-
-  // Create placeholder card showing progress
-  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">${processingText}</span>
-      </div>
-    </div>
-    <div class="mt-2 text-xs truncate" title="\${file.name}">\${file.name}</div>
-    <div class="text-xs text-muted-foreground">\${formatFileSize(file.size)}</div>
-  \`;
-  grid.prepend(placeholder);
-
-  try {
-    if (typeof ImageProcessor === 'undefined') {
-      throw new Error('ImageProcessor not loaded');
-    }
-
-    // Process image client-side
-    const processed = await ImageProcessor.processToFile(file);
-    document.getElementById('upload-status').textContent = '${uploadingText}';
-
-    // Upload with SSE response
-    const fd = new FormData();
-    fd.append('file', processed);
-
-    const response = await fetch('/api/upload', {
-      method: 'POST',
-      body: fd,
-      headers: { 'Accept': 'text/event-stream' }
-    });
-
-    if (!response.ok) throw new Error('Upload failed: ' + response.status);
-
-    // Parse SSE stream - will replace placeholder with real card
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-
-      buffer += decoder.decode(value, { stream: true });
-      const events = buffer.split('\\n\\n');
-      buffer = events.pop() || '';
-
-      for (const event of events) {
-        if (!event.trim()) continue;
-        processSSEEvent(event);
-      }
-    }
-
-  } catch (err) {
-    console.error('Upload error:', err);
-    // Show error in placeholder
-    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">\${err.message || '${errorText}'}</span>
-        </div>
-      </div>
-      <div class="mt-2 text-xs truncate text-destructive">\${file.name}</div>
-      <button type="button" class="text-xs text-muted-foreground hover:underline" onclick="this.closest('.group').remove()">Remove</button>
-    \`;
-  }
-
-  input.value = '';
-}
-
-function formatFileSize(bytes) {
-  if (bytes < 1024) return bytes + ' B';
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-}
-
-function processSSEEvent(event) {
-  const lines = event.split('\\n');
-  let eventType = '';
-  const data = {};
-  let elementsLines = [];
-  let inElements = false;
-
-  for (const line of lines) {
-    if (line.startsWith('event: ')) {
-      eventType = line.slice(7);
-    } else if (line.startsWith('data: ')) {
-      const content = line.slice(6);
-      if (content.startsWith('mode ')) {
-        data.mode = content.slice(5);
-        inElements = false;
-      } else if (content.startsWith('selector ')) {
-        data.selector = content.slice(9);
-        inElements = false;
-      } else if (content.startsWith('elements ')) {
-        elementsLines = [content.slice(9)];
-        inElements = true;
-      } else if (inElements) {
-        // Continuation of elements content
-        elementsLines.push(content);
-      }
-    }
-  }
-
-  if (elementsLines.length > 0) {
-    data.elements = elementsLines.join('\\n');
-  }
-
-  if (eventType === 'datastar-patch-elements') {
-    if (data.mode === 'remove' && data.selector) {
-      document.querySelector(data.selector)?.remove();
-    } else if (data.mode === 'outer' && data.selector && data.elements) {
-      // Replace element entirely (used for placeholder -> real card)
-      const target = document.querySelector(data.selector);
-      if (target) {
-        const temp = document.createElement('div');
-        temp.innerHTML = data.elements;
-        const newElement = temp.firstElementChild;
-        if (newElement) {
-          target.replaceWith(newElement);
-          if (window.Datastar) Datastar.apply(newElement);
-        }
-      }
-    }
-  }
-}
-`.trim();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx("script", {
-                dangerouslySetInnerHTML: {
-                    __html: uploadScript
-                }
+            /*#__PURE__*/ _jsx("form", {
+                id: "upload-form",
+                class: "hidden",
+                enctype: "multipart/form-data",
+                "data-on:submit__prevent": "@post('/api/upload', {contentType: 'form'})",
+                children: /*#__PURE__*/ _jsx("input", {
+                    id: "upload-file-input",
+                    type: "file",
+                    name: "file"
+                })
             }),
             /*#__PURE__*/ _jsxs("div", {
                 class: "flex items-center justify-between mb-6",
@@ -271,16 +124,15 @@ function processSSEEvent(event) {
                                 type: "file",
                                 class: "hidden",
                                 accept: "image/*",
-                                onchange: "handleMediaUpload(this)"
+                                "data-media-upload": true,
+                                "data-text-processing": processingText,
+                                "data-text-uploading": uploadingText,
+                                "data-text-error": errorText
                             })
                         ]
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx("div", {
-                id: "upload-error",
-                class: "hidden"
-            }),
             /*#__PURE__*/ _jsx("div", {
                 class: "card mb-6",
                 children: /*#__PURE__*/ _jsx("section", {
@@ -582,7 +434,5 @@ mediaRoutes.post("/:id/delete", async (c)=>{
     }
     // Delete from database
     await c.var.services.media.delete(id);
-    return sse(c, async (stream)=>{
-        await stream.redirect("/dash/media");
-    });
+    return dsRedirect("/dash/media");
 });

package/dist/routes/dash/pages.js

@@ -10,7 +10,7 @@ import { DashLayout } from "../../theme/layouts/index.js";
 import { PageForm, VisibilityBadge, EmptyState, ListItemRow, ActionButtons, CrudPageHeader, DangerZone } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 export const pagesRoutes = new Hono();
 function PagesListContent({ pages }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
@@ -224,9 +224,7 @@ pagesRoutes.post("/", async (c)=>{
         visibility: body.visibility,
         path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-")
     });
-    return sse(c, async (stream)=>{
-        await stream.redirect(`/dash/pages/${sqid.encode(page.id)}`);
-    });
+    return dsRedirect(`/dash/pages/${sqid.encode(page.id)}`);
 });
 // View single page
 pagesRoutes.get("/:id", async (c)=>{
@@ -274,16 +272,12 @@ pagesRoutes.post("/:id", async (c)=>{
         visibility: body.visibility,
         path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-")
     });
-    return sse(c, async (stream)=>{
-        await stream.redirect(`/dash/pages/${sqid.encode(id)}`);
-    });
+    return dsRedirect(`/dash/pages/${sqid.encode(id)}`);
 });
 // Delete page
 pagesRoutes.post("/:id/delete", async (c)=>{
     const id = sqid.decode(c.req.param("id"));
     if (!id) return c.notFound();
     await c.var.services.posts.delete(id);
-    return sse(c, async (stream)=>{
-        await stream.redirect("/dash/pages");
-    });
+    return dsRedirect("/dash/pages");
 });

package/dist/routes/dash/posts.js

@@ -7,7 +7,7 @@ import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { PostForm, PostList, CrudPageHeader, ActionButtons } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 export const postsRoutes = new Hono();
 function PostsListContent({ posts }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
@@ -90,9 +90,7 @@ postsRoutes.post("/", async (c)=>{
         sourceUrl: body.sourceUrl || undefined,
         path: body.path || undefined
     });
-    return sse(c, async (stream)=>{
-        await stream.redirect(`/dash/posts/${sqid.encode(post.id)}`);
-    });
+    return dsRedirect(`/dash/posts/${sqid.encode(post.id)}`);
 });
 function ViewPostContent({ post }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
@@ -203,16 +201,12 @@ postsRoutes.post("/:id", async (c)=>{
         sourceUrl: body.sourceUrl || null,
         path: body.path || null
     });
-    return sse(c, async (stream)=>{
-        await stream.redirect(`/dash/posts/${sqid.encode(id)}`);
-    });
+    return dsRedirect(`/dash/posts/${sqid.encode(id)}`);
 });
 // Delete post
 postsRoutes.post("/:id/delete", async (c)=>{
     const id = sqid.decode(c.req.param("id"));
     if (!id) return c.notFound();
     await c.var.services.posts.delete(id);
-    return sse(c, async (stream)=>{
-        await stream.redirect("/dash/posts");
-    });
+    return dsRedirect("/dash/posts");
 });

package/dist/routes/dash/redirects.js

@@ -6,7 +6,7 @@ import { getSiteName } from "../../lib/config.js";
 import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, ListItemRow, ActionButtons, CrudPageHeader } from "../../theme/components/index.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 export const redirectsRoutes = new Hono();
 function RedirectsListContent({ redirects }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
@@ -225,9 +225,7 @@ redirectsRoutes.post("/", async (c)=>{
     const body = await c.req.json();
     const type = parseInt(body.type, 10);
     await c.var.services.redirects.create(body.fromPath, body.toPath, type);
-    return sse(c, async (stream)=>{
-        await stream.redirect("/dash/redirects");
-    });
+    return dsRedirect("/dash/redirects");
 });
 // Delete redirect
 redirectsRoutes.post("/:id/delete", async (c)=>{
@@ -235,7 +233,5 @@ redirectsRoutes.post("/:id/delete", async (c)=>{
     if (!isNaN(id)) {
         await c.var.services.redirects.delete(id);
     }
-    return sse(c, async (stream)=>{
-        await stream.redirect("/dash/redirects");
-    });
+    return dsRedirect("/dash/redirects");
 });

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

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/settings.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;AASjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,cAAc,kDAAkB,CAAC"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../../src/routes/dash/settings.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;AAcjD,KAAK,GAAG,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3D,eAAO,MAAM,cAAc,kDAAkB,CAAC"}

package/dist/routes/dash/settings.js

@@ -4,10 +4,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "hono/jsx/jsx-
  */ import { Hono } from "hono";
 import { useLingui as $_useLingui } from "@jant/core/i18n";
 import { DashLayout } from "../../theme/layouts/index.js";
-import { sse } from "../../lib/sse.js";
-import { getSiteName, getSiteDescription, getSiteLanguage } from "../../lib/config.js";
+import { sse, dsToast } from "../../lib/sse.js";
+import { getSiteLanguage, getConfigFallback } from "../../lib/config.js";
+/** Escape HTML special characters for safe insertion into HTML strings */ function escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 export const settingsRoutes = new Hono();
-function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
+function SettingsContent({ siteName, siteDescription, siteLanguage, siteNameFallback, siteDescriptionFallback }) {
     const { i18n: $__i18n, _: $__ } = $_useLingui();
     const generalSignals = JSON.stringify({
         siteName,
@@ -23,17 +26,6 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                     message: "Settings"
                 })
             }),
-            saved && /*#__PURE__*/ _jsx("div", {
-                id: "settings-saved-toast",
-                class: "alert mb-4 max-w-lg transition-opacity duration-300",
-                "data-init": `console.log('[toast] init fired at', Date.now()); history.replaceState({}, '', '/dash/settings'); setTimeout(() => { console.log('[toast] hiding at', Date.now()); const el = document.getElementById('settings-saved-toast'); if (el) { el.style.opacity = '0'; setTimeout(() => el.remove(), 300) } }, 3000)`,
-                children: /*#__PURE__*/ _jsx("h2", {
-                    children: $__i18n._({
-                        id: "T0bsor",
-                        message: "Settings saved successfully."
-                    })
-                })
-            }),
             /*#__PURE__*/ _jsxs("div", {
                 class: "flex flex-col gap-6 max-w-lg",
                 children: [
@@ -41,9 +33,6 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                         "data-signals": generalSignals,
                         "data-on:submit__prevent": "@post('/dash/settings')",
                         children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                id: "settings-message"
-                            }),
                             /*#__PURE__*/ _jsxs("div", {
                                 class: "card",
                                 children: [
@@ -72,7 +61,7 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                                                         type: "text",
                                                         "data-bind": "siteName",
                                                         class: "input",
-                                                        required: true
+                                                        placeholder: siteNameFallback
                                                     })
                                                 ]
                                             }),
@@ -90,6 +79,7 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                                                         "data-bind": "siteDescription",
                                                         class: "textarea",
                                                         rows: 3,
+                                                        placeholder: siteDescriptionFallback,
                                                         children: siteDescription
                                                     })
                                                 ]
@@ -145,9 +135,6 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
                         "data-signals": "{currentPassword: '', newPassword: '', confirmPassword: ''}",
                         "data-on:submit__prevent": "@post('/dash/settings/password')",
                         children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                id: "password-message"
-                            }),
                             /*#__PURE__*/ _jsxs("div", {
                                 class: "card",
                                 children: [
@@ -242,40 +229,67 @@ function SettingsContent({ siteName, siteDescription, siteLanguage, saved }) {
 }
 // Settings page
 settingsRoutes.get("/", async (c)=>{
-    const siteName = await getSiteName(c);
-    const siteDescription = await getSiteDescription(c);
+    const { settings } = c.var.services;
+    // Fetch raw DB values (null if not set)
+    const dbSiteName = await settings.get("SITE_NAME");
+    const dbSiteDescription = await settings.get("SITE_DESCRIPTION");
     const siteLanguage = await getSiteLanguage(c);
+    // Fallback values (ENV > Default) for placeholders
+    const siteNameFallback = getConfigFallback(c, "SITE_NAME");
+    const siteDescriptionFallback = getConfigFallback(c, "SITE_DESCRIPTION");
     const saved = c.req.query("saved") !== undefined;
     return c.html(/*#__PURE__*/ _jsx(DashLayout, {
         c: c,
         title: "Settings",
-        siteName: siteName,
+        siteName: dbSiteName || siteNameFallback,
         currentPath: "/dash/settings",
+        toast: saved ? {
+            message: "Settings saved successfully."
+        } : undefined,
         children: /*#__PURE__*/ _jsx(SettingsContent, {
-            siteName: siteName,
-            siteDescription: siteDescription,
+            siteName: dbSiteName || "",
+            siteDescription: dbSiteDescription || "",
             siteLanguage: siteLanguage,
-            saved: saved
+            siteNameFallback: siteNameFallback,
+            siteDescriptionFallback: siteDescriptionFallback
         })
     }));
 });
 // Update settings
 settingsRoutes.post("/", async (c)=>{
     const body = await c.req.json();
-    const oldLanguage = await c.var.services.settings.get("SITE_LANGUAGE") ?? "en";
-    await c.var.services.settings.setMany({
-        SITE_NAME: body.siteName,
-        SITE_DESCRIPTION: body.siteDescription,
-        SITE_LANGUAGE: body.siteLanguage
-    });
+    const { settings } = c.var.services;
+    const oldLanguage = await settings.get("SITE_LANGUAGE") ?? "en";
+    // For text fields: empty = remove from DB (fall back to ENV > Default)
+    if (body.siteName.trim()) {
+        await settings.set("SITE_NAME", body.siteName.trim());
+    } else {
+        await settings.remove("SITE_NAME");
+    }
+    if (body.siteDescription.trim()) {
+        await settings.set("SITE_DESCRIPTION", body.siteDescription.trim());
+    } else {
+        await settings.remove("SITE_DESCRIPTION");
+    }
+    // Language always has a value from the select
+    await settings.set("SITE_LANGUAGE", body.siteLanguage);
     const languageChanged = oldLanguage !== body.siteLanguage;
+    // Determine the effective display name after save
+    const displayName = body.siteName.trim() || getConfigFallback(c, "SITE_NAME");
     return sse(c, async (stream)=>{
         if (languageChanged) {
             // Language changed - full reload needed to update all UI text
             await stream.redirect("/dash/settings?saved");
         } else {
-            // No language change - show inline success message
-            await stream.patchElements('<div id="settings-message"><div class="alert mb-4 transition-opacity duration-300" data-init="setTimeout(() => { el.style.opacity = \'0\'; setTimeout(() => el.remove(), 300) }, 3000)"><h2>Settings saved successfully.</h2></div></div>');
+            const escaped = escapeHtml(displayName);
+            // Update header site name
+            await stream.patchElements(`<a id="site-name" href="/dash" class="font-semibold">${escaped}</a>`);
+            // Update page title
+            await stream.patchElements(`Settings - ${escaped}`, {
+                mode: "inner",
+                selector: "title"
+            });
+            await stream.toast("Settings saved successfully.");
         }
     });
 });
@@ -283,9 +297,7 @@ settingsRoutes.post("/", async (c)=>{
 settingsRoutes.post("/password", async (c)=>{
     const body = await c.req.json();
     if (body.newPassword !== body.confirmPassword) {
-        return sse(c, async (stream)=>{
-            await stream.patchElements('<div id="password-message"><div class="alert-destructive mb-4"><h2>Passwords do not match.</h2></div></div>');
-        });
+        return dsToast("Passwords do not match.", "error");
     }
     try {
         await c.var.auth.api.changePassword({
@@ -297,12 +309,10 @@ settingsRoutes.post("/password", async (c)=>{
             headers: c.req.raw.headers
         });
     } catch  {
-        return sse(c, async (stream)=>{
-            await stream.patchElements('<div id="password-message"><div class="alert-destructive mb-4"><h2>Current password is incorrect.</h2></div></div>');
-        });
+        return dsToast("Current password is incorrect.", "error");
     }
     return sse(c, async (stream)=>{
-        await stream.patchElements('<div id="password-message"><div class="alert mb-4"><h2>Password changed successfully.</h2></div></div>');
+        await stream.toast("Password changed successfully.");
         await stream.patchSignals({
             currentPassword: "",
             newPassword: "",

package/dist/services/settings.d.ts

@@ -10,6 +10,7 @@ export interface SettingsService {
     getAll(): Promise<Record<string, string>>;
     set(key: SettingsKey, value: string): Promise<void>;
     setMany(entries: Partial<Record<SettingsKey, string>>): Promise<void>;
+    remove(key: SettingsKey): Promise<void>;
     isOnboardingComplete(): Promise<boolean>;
     completeOnboarding(): Promise<void>;
 }

package/dist/services/settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/services/settings.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,oBAAoB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,QAAQ,GAAG,eAAe,CA6DnE"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/services/settings.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAE7B,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC9C,MAAM,IAAI,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC,oBAAoB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACzC,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CACrC;AAED,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,QAAQ,GAAG,eAAe,CAiEnE"}

package/dist/services/settings.js

@@ -34,6 +34,9 @@ export function createSettingsService(db) {
                 }
             });
         },
+        async remove (key) {
+            await db.delete(settings).where(eq(settings.key, key));
+        },
         async setMany (entries) {
             const timestamp = now();
             const keys = Object.keys(entries);

package/dist/theme/color-themes.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Built-in Color Themes
+ *
+ * Each theme defines CSS variable overrides for light and dark modes,
+ * plus preview colors for the theme picker UI.
+ */
+/**
+ * A color theme definition with light and dark mode CSS variable overrides.
+ */
+export interface ColorTheme {
+    /** Stored in DB settings, e.g. "beach" */
+    id: string;
+    /** Display name, e.g. "Beach" */
+    name: string;
+    /** CSS variable overrides for :root (light mode) */
+    light: Record<string, string>;
+    /** CSS variable overrides for .dark (dark mode) */
+    dark: Record<string, string>;
+    /** Preview colors (hex) for theme picker cards */
+    preview: {
+        lightBg: string;
+        lightText: string;
+        lightLink: string;
+        darkBg: string;
+        darkText: string;
+        darkLink: string;
+    };
+}
+export declare const BUILTIN_COLOR_THEMES: ColorTheme[];
+//# sourceMappingURL=color-themes.d.ts.map

package/dist/theme/color-themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-themes.d.ts","sourceRoot":"","sources":["../../src/theme/color-themes.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,mDAAmD;IACnD,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7B,kDAAkD;IAClD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AA2FD,eAAO,MAAM,oBAAoB,EAAE,UAAU,EAyM5C,CAAC"}