firstly 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # firstly
 
+## 0.4.3
+
+### Patch Changes
+
+- [#265](https://github.com/jycouet/firstly/pull/265) [`9105a8b`](https://github.com/jycouet/firstly/commit/9105a8b4ee47121fdfd8c33419c43bfa75f75c5c) Thanks [@jycouet](https://github.com/jycouet)! - mail: store `attachments` count in `Mail.metadata` so the admin UI can show how many files were sent.
+
+## 0.4.2
+
+### Patch Changes
+
+- [#258](https://github.com/jycouet/firstly/pull/258) [`43f3f77`](https://github.com/jycouet/firstly/commit/43f3f77aa34f064720c90cdd240ac050a360ecf6) Thanks [@jycouet](https://github.com/jycouet)! - `firstly/changeLog`: export the `ChangeLog` entity class so apps can declare `@Relations` to it (e.g. linking changelog rows back to a `User`).
+
+- [#253](https://github.com/jycouet/firstly/pull/253) [`6e203da`](https://github.com/jycouet/firstly/commit/6e203dab7bcbfe043c087703e8c199d42916015f) Thanks [@jycouet](https://github.com/jycouet)! - `firstly/mail`: export `MailSection`, persist nodemailer response into `Mail.metadata.transport` (so provider IDs like Resend's `re_...` are recoverable from the DB), ship drop-in `<WriteMail />` + `<LastMails />` admin components and an opt-in `MailController.sendTest` BackendMethod (`mail({ enableTest: true })`), plus a Resend docs section. Root: new `errorMessage(err)` helper that handles native `Error`, remult `ErrorInfo` rejections, and falls back to JSON instead of `[object Object]`.
+
+- [#252](https://github.com/jycouet/firstly/pull/252) [`a4ee628`](https://github.com/jycouet/firstly/commit/a4ee628262ac290901039eba77cdf508dde48a2e) Thanks [@jycouet](https://github.com/jycouet)! - `firstly/sqlAdmin`: drop daisyUI dep, style with raw Tailwind, and add docs page.
+
 ## 0.4.1
 
 ### Patch Changes

package/esm/changeLog/index.d.ts

@@ -1,6 +1,6 @@
 import { type EntityOptions, type FieldRef, type FieldsRef, type LifecycleEvent } from 'remult';
-import { Roles_ChangeLog, type change } from './changeLogEntities';
-export { Roles_ChangeLog };
+import { ChangeLog, Roles_ChangeLog, type change } from './changeLogEntities';
+export { ChangeLog, Roles_ChangeLog };
 export type { change };
 export interface changeEvent {
     date: Date;

package/esm/changeLog/index.js

@@ -1,6 +1,6 @@
 import { getEntityRef, IdEntity, isBackend, remult, repo, } from 'remult';
 import { ChangeLog, Roles_ChangeLog } from './changeLogEntities';
-export { Roles_ChangeLog };
+export { ChangeLog, Roles_ChangeLog };
 export async function recordSaved(entity, e, options) {
     if (isBackend()) {
         const changes = [];

package/esm/core/FF_Validators.d.ts

@@ -0,0 +1,63 @@
+/**
+ * A localized message. Either a literal string (single-locale projects) or a
+ * function called at validation time (multi-locale projects - typically a
+ * paraglide / i18next / lingui message function that resolves against the
+ * current request's locale).
+ */
+export type LocalizedMessage = string | (() => string);
+export type EmailMessages = {
+    /** Returned when the value doesn't match the basic email shape regex. */
+    invalid?: LocalizedMessage;
+    /** Returned when the domain is malformed (`..`, leading/trailing dot, missing TLD). */
+    invalidDomain?: LocalizedMessage;
+    /** Returned when the domain is on the blocked list (`example.com`, `test.com`, ...). */
+    blockedDomain?: LocalizedMessage;
+    /** Returned when the TLD is on the blocked list (`.test`, `.example`, `.invalid`, ...). */
+    blockedTld?: LocalizedMessage;
+};
+export type ValidatorMessages = {
+    email?: EmailMessages;
+};
+/**
+ * Build a project-localized set of validators. Override any subset of
+ * messages; defaults are English.
+ *
+ * Each message can be a literal string OR a function returning a string.
+ * Function form is called at validation time (NOT at factory call time), so
+ * pass paraglide / i18next / lingui message functions to get per-request
+ * locale resolution:
+ *
+ * ```ts
+ * import { createValidators } from '..'
+ * import * as m from '../paraglide/messages'
+ *
+ * export const App_Validators = createValidators({
+ *   email: {
+ *     invalid:        () => m.email_invalid(),
+ *     invalidDomain:  () => m.email_invalid_domain(),
+ *     blockedDomain:  () => m.email_blocked_domain(),
+ *     blockedTld:     () => m.email_blocked_tld(),
+ *   },
+ * })
+ * ```
+ *
+ * Each validator group exposes two members:
+ * - `checkXxx(value)` - pure function, returns `true` on valid or a
+ *   localized error message string. Use for live UI feedback.
+ * - `xxx` - a Remult `Validator` wrapping the same `checkXxx`. Use as
+ *   `@Fields.string({ validate: app.email })`.
+ */
+export declare function createValidators(messages?: ValidatorMessages): {
+    checkEmail: (value: string) => true | string;
+    email: import("remult").Validator<string>;
+};
+/**
+ * Default English validators. For localized messages, build your own with
+ * `createValidators(messages)` and import that one in your project instead.
+ */
+export declare const FF_Validators: {
+    checkEmail: (value: string) => true | string;
+    email: import("remult").Validator<string>;
+};
+/** Convenience direct export of `FF_Validators.checkEmail` for ad-hoc use. */
+export declare const checkEmail: (value: string) => true | string;

package/esm/core/FF_Validators.js

@@ -0,0 +1,97 @@
+import { createValueValidator } from 'remult';
+// RFC 2606 reserved test/example domains and obvious placeholders.
+const BLOCKED_EMAIL_DOMAINS = new Set([
+    'example.com',
+    'example.net',
+    'example.org',
+    'test.com',
+    'test.net',
+    'test.org',
+    'foo.com',
+    'foo.bar',
+    'bar.com',
+    'baz.com',
+    'domain.com',
+    'mail.com',
+    'localhost',
+    'invalid',
+]);
+const BLOCKED_EMAIL_TLDS = new Set(['test', 'example', 'invalid', 'localhost', 'local']);
+const EMAIL_SHAPE_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const DEFAULT_EMAIL_MESSAGES = {
+    invalid: 'Invalid email',
+    invalidDomain: 'Invalid domain',
+    blockedDomain: 'Test/example email not accepted',
+    blockedTld: 'Test/example TLD not accepted',
+};
+/** Resolve a `LocalizedMessage` to its current string value. */
+function resolve(m) {
+    return typeof m === 'function' ? m() : m;
+}
+/**
+ * Build a project-localized set of validators. Override any subset of
+ * messages; defaults are English.
+ *
+ * Each message can be a literal string OR a function returning a string.
+ * Function form is called at validation time (NOT at factory call time), so
+ * pass paraglide / i18next / lingui message functions to get per-request
+ * locale resolution:
+ *
+ * ```ts
+ * import { createValidators } from '..'
+ * import * as m from '../paraglide/messages'
+ *
+ * export const App_Validators = createValidators({
+ *   email: {
+ *     invalid:        () => m.email_invalid(),
+ *     invalidDomain:  () => m.email_invalid_domain(),
+ *     blockedDomain:  () => m.email_blocked_domain(),
+ *     blockedTld:     () => m.email_blocked_tld(),
+ *   },
+ * })
+ * ```
+ *
+ * Each validator group exposes two members:
+ * - `checkXxx(value)` - pure function, returns `true` on valid or a
+ *   localized error message string. Use for live UI feedback.
+ * - `xxx` - a Remult `Validator` wrapping the same `checkXxx`. Use as
+ *   `@Fields.string({ validate: app.email })`.
+ */
+export function createValidators(messages = {}) {
+    const m = {
+        ...DEFAULT_EMAIL_MESSAGES,
+        ...messages.email,
+    };
+    function checkEmail(value) {
+        if (value === '')
+            return true;
+        if (!EMAIL_SHAPE_RE.test(value))
+            return resolve(m.invalid);
+        const at = value.lastIndexOf('@');
+        const domain = value.slice(at + 1).toLowerCase();
+        if (!domain || domain.includes('..') || domain.startsWith('.') || domain.endsWith('.')) {
+            return resolve(m.invalidDomain);
+        }
+        if (BLOCKED_EMAIL_DOMAINS.has(domain))
+            return resolve(m.blockedDomain);
+        const tld = domain.split('.').pop() ?? '';
+        if (BLOCKED_EMAIL_TLDS.has(tld))
+            return resolve(m.blockedTld);
+        if (!domain.includes('.') || tld.length < 2)
+            return resolve(m.invalidDomain);
+        return true;
+    }
+    return {
+        checkEmail,
+        // Pass a function so the per-request locale is resolved when the
+        // validator actually fires, not when the validator is built.
+        email: createValueValidator(checkEmail, () => resolve(m.invalid)),
+    };
+}
+/**
+ * Default English validators. For localized messages, build your own with
+ * `createValidators(messages)` and import that one in your project instead.
+ */
+export const FF_Validators = createValidators();
+/** Convenience direct export of `FF_Validators.checkEmail` for ad-hoc use. */
+export const checkEmail = FF_Validators.checkEmail;

package/esm/core/helper.d.ts

@@ -1,2 +1,19 @@
 import type { ErrorInfo } from 'remult';
 export declare function isError<T>(object: any): object is ErrorInfo<T>;
+/**
+ * Extract a user-readable message from any thrown / rejected value.
+ *
+ * Why a helper instead of `String(err)`: when a remult `BackendMethod`
+ * rejects, the client receives a plain object matching `ErrorInfo`
+ * (`{ message?, modelState? }`) - **not** an `Error` instance. The naive
+ * `err instanceof Error ? err.message : String(err)` fallback prints
+ * `[object Object]` for those rejections and surfaces nothing useful.
+ *
+ * Order of resolution:
+ * 1. plain string -> as-is
+ * 2. native `Error` (incl. `EntityError`, `ForbiddenError`) -> `.message`
+ * 3. `ErrorInfo`-shaped object with `.message` -> that message
+ * 4. `ErrorInfo`-shaped object with `.modelState` -> first non-empty value
+ * 5. fallback to `JSON.stringify(err)` (so the shape is at least readable)
+ */
+export declare function errorMessage(err: unknown, fallback?: string): string;

package/esm/core/helper.js

@@ -1,3 +1,43 @@
 export function isError(object) {
     return object;
 }
+/**
+ * Extract a user-readable message from any thrown / rejected value.
+ *
+ * Why a helper instead of `String(err)`: when a remult `BackendMethod`
+ * rejects, the client receives a plain object matching `ErrorInfo`
+ * (`{ message?, modelState? }`) - **not** an `Error` instance. The naive
+ * `err instanceof Error ? err.message : String(err)` fallback prints
+ * `[object Object]` for those rejections and surfaces nothing useful.
+ *
+ * Order of resolution:
+ * 1. plain string -> as-is
+ * 2. native `Error` (incl. `EntityError`, `ForbiddenError`) -> `.message`
+ * 3. `ErrorInfo`-shaped object with `.message` -> that message
+ * 4. `ErrorInfo`-shaped object with `.modelState` -> first non-empty value
+ * 5. fallback to `JSON.stringify(err)` (so the shape is at least readable)
+ */
+export function errorMessage(err, fallback = 'Unknown error') {
+    if (err == null)
+        return fallback;
+    if (typeof err === 'string')
+        return err || fallback;
+    if (err instanceof Error && err.message)
+        return err.message;
+    if (typeof err === 'object') {
+        const e = err;
+        if (typeof e.message === 'string' && e.message)
+            return e.message;
+        if (e.modelState && typeof e.modelState === 'object') {
+            const first = Object.values(e.modelState).find((v) => typeof v === 'string' && v);
+            if (typeof first === 'string')
+                return first;
+        }
+    }
+    try {
+        return JSON.stringify(err);
+    }
+    catch {
+        return String(err);
+    }
+}

package/esm/index.d.ts

@@ -9,7 +9,9 @@ export { FF_Entity } from './core/FF_Entity.js';
 export { FF_Role } from './core/common.js';
 export { FF_Allow } from './core/FF_Allow.js';
 export { FF_Filter } from './core/FF_Filter.js';
-export { isError } from './core/helper.js';
+export { FF_Validators, createValidators } from './core/FF_Validators.js';
+export type { EmailMessages, ValidatorMessages } from './core/FF_Validators.js';
+export { errorMessage, isError } from './core/helper.js';
 export { tryCatch, tryCatchSync } from './core/tryCatch.js';
 export type { ResolvedType, UnArray, RecursivePartial } from './core/types.js';
 export { tw } from './core/tailwind.js';

package/esm/index.js

@@ -11,7 +11,8 @@ export { FF_Entity } from './core/FF_Entity.js';
 export { FF_Role } from './core/common.js';
 export { FF_Allow } from './core/FF_Allow.js';
 export { FF_Filter } from './core/FF_Filter.js';
-export { isError } from './core/helper.js';
+export { FF_Validators, createValidators } from './core/FF_Validators.js';
+export { errorMessage, isError } from './core/helper.js';
 export { tryCatch, tryCatchSync } from './core/tryCatch.js';
 export { tw } from './core/tailwind.js';
 // Misc primitives still exposed from the root.

package/esm/mail/MailController.d.ts

@@ -0,0 +1,22 @@
+export declare class MailController {
+    /**
+     * Drives the bundled `<WriteMail />` component. Sends a single-section
+     * mail through `remult.context.sendMail` (set by the `mail()` module) and
+     * returns the provider's `messageId` when available.
+     *
+     * Each of `to`, `cc`, `bcc` is a comma-separated string. Splitting,
+     * trimming, lowercasing, and per-entry validation happen here on the
+     * server - the client just hands over what the user typed.
+     */
+    static sendTest(input: {
+        to: string;
+        cc?: string;
+        bcc?: string;
+        subject: string;
+        body: string;
+    }): Promise<{
+        ok: boolean;
+        messageId: string | null;
+        error: string | null;
+    }>;
+}

package/esm/mail/MailController.js

@@ -0,0 +1,68 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { BackendMethod, remult } from 'remult';
+import { checkEmail } from '../core/FF_Validators';
+import { Roles_Mail } from './Roles_Mail';
+/** Split on commas, trim, lowercase, drop empties. */
+function parseRecipients(raw) {
+    if (!raw)
+        return [];
+    return raw
+        .split(',')
+        .map((s) => s.trim().toLowerCase())
+        .filter(Boolean);
+}
+export class MailController {
+    /**
+     * Drives the bundled `<WriteMail />` component. Sends a single-section
+     * mail through `remult.context.sendMail` (set by the `mail()` module) and
+     * returns the provider's `messageId` when available.
+     *
+     * Each of `to`, `cc`, `bcc` is a comma-separated string. Splitting,
+     * trimming, lowercasing, and per-entry validation happen here on the
+     * server - the client just hands over what the user typed.
+     */
+    static async sendTest(input) {
+        if (import.meta.env.SSR) {
+            if (!remult.context.sendMail) {
+                throw new Error('mail module not registered (call mail() in remultApi.modules)');
+            }
+            const tos = parseRecipients(input.to);
+            const ccs = parseRecipients(input.cc);
+            const bccs = parseRecipients(input.bcc);
+            if (tos.length === 0 && ccs.length === 0 && bccs.length === 0) {
+                throw new Error('At least one recipient is required (to, cc, or bcc).');
+            }
+            for (const entry of [...tos, ...ccs, ...bccs]) {
+                const verdict = checkEmail(entry);
+                if (verdict !== true)
+                    throw new Error(`${verdict}: "${entry}"`);
+            }
+            const safe = (s) => s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c]);
+            const r = await remult.context.sendMail('test', {
+                to: tos.length === 1 ? tos[0] : tos,
+                cc: ccs.length ? (ccs.length === 1 ? ccs[0] : ccs) : undefined,
+                bcc: bccs.length ? (bccs.length === 1 ? bccs[0] : bccs) : undefined,
+                subject: input.subject,
+                sections: [
+                    {
+                        html: `<p style="margin:0;white-space:pre-wrap;">${safe(input.body) || '<em>(no body)</em>'}</p>`,
+                    },
+                ],
+            });
+            return {
+                ok: !!r.data,
+                messageId: r.data?.messageId ?? null,
+                error: r.error ? String(r.error.message ?? r.error) : null,
+            };
+        }
+        throw new Error('sendTest: server-only');
+    }
+}
+__decorate([
+    BackendMethod({ allowed: Roles_Mail.Mail_Admin })
+], MailController, "sendTest", null);

package/esm/mail/index.d.ts

@@ -1,6 +1,11 @@
 import { Log } from '@kitql/helpers';
 import { Mail } from './Mail';
+export { Mail } from './Mail';
+export { MailController } from './MailController';
 export { Roles_Mail } from './Roles_Mail';
+export type { MailSection } from './types';
+export { default as WriteMail } from './ui/WriteMail.svelte';
+export { default as LastMails } from './ui/LastMails.svelte';
 export declare const key = "mail";
 export declare const log: Log;
 export declare const mailEntities: {

package/esm/mail/index.js

@@ -1,6 +1,10 @@
 import { Log } from '@kitql/helpers';
 import { Mail } from './Mail';
+export { Mail } from './Mail';
+export { MailController } from './MailController';
 export { Roles_Mail } from './Roles_Mail';
+export { default as WriteMail } from './ui/WriteMail.svelte';
+export { default as LastMails } from './ui/LastMails.svelte';
 export const key = 'mail';
 export const log = new Log(key);
 export const mailEntities = {

package/esm/mail/server/formatMailHelper.d.ts

@@ -1,16 +1,11 @@
+import type { MailSection } from '../types';
 export type MailStyle = {
     service: string;
     primaryColor: string;
     secondaryColor: string;
     subject: string;
     title: string;
-    sections: {
-        html: string;
-        cta?: {
-            html: string;
-            link: string;
-        } | undefined;
-    }[];
+    sections: MailSection[];
     footer: string;
 };
 export declare const toHtml: (args: MailStyle) => string;

package/esm/mail/server/index.d.ts

@@ -6,6 +6,7 @@ import type SMTPPool from 'nodemailer/lib/smtp-pool';
 import type SMTPTransport from 'nodemailer/lib/smtp-transport';
 import type StreamTransport from 'nodemailer/lib/stream-transport';
 import { Module } from 'remult/server';
+import type { MailSection } from '../types';
 import { type MailStyle } from './formatMailHelper';
 declare module 'remult' {
     interface RemultContext {
@@ -28,6 +29,14 @@ export type MailOptions = GlobalEasyOptions & {
         transport?: TransportTypes;
         defaults?: DefaultOptions;
     };
+    /**
+     * Register `MailController.sendTest` (the BackendMethod that drives the
+     * bundled `<WriteMail />` component). Off by default - exposing a
+     * "send any mail to anyone" endpoint should be an explicit opt-in.
+     *
+     * Gated by `Roles_Mail.Mail_Admin` regardless.
+     */
+    enableTest?: boolean;
 };
 export type SendMail = typeof sendMail;
 export type SendMailResult = {
@@ -41,15 +50,11 @@ export declare const sendMail: (
 /** usefull for logs, it has NO impact on the mail itself */
 topic: string, easyOptions: GlobalEasyOptions & {
     to: Required<DefaultOptions>['to'];
+    cc?: DefaultOptions['cc'];
+    bcc?: DefaultOptions['bcc'];
     subject: Required<DefaultOptions>['subject'];
     title?: string;
-    sections: {
-        html: string;
-        cta?: {
-            html: string;
-            link: string;
-        } | undefined;
-    }[];
+    sections: MailSection[];
 }, options?: {
     nodemailer?: MailOptions['nodemailer'];
 }) => Promise<SendMailResult>;

package/esm/mail/server/index.js

@@ -3,6 +3,7 @@ import { remult, repo } from 'remult';
 import { Module } from 'remult/server';
 import { cyan, green, magenta, red, sleep, white } from '@kitql/helpers';
 import { log, mailEntities } from '../index';
+import { MailController } from '../MailController';
 import { toHtml } from './formatMailHelper';
 let transporter;
 let globalOptions;
@@ -64,12 +65,14 @@ export const sendMail = async (topic, easyOptions, options) => {
         from: easyOptions.from ?? globalOptions?.from,
     };
     let { primaryColor, secondaryColor, title, footer, service } = easyOptionsToUse;
-    const { subject, sections, to } = easyOptionsToUse;
+    const { subject, sections, to, cc, bcc } = easyOptionsToUse;
     service = service ?? 'service';
     primaryColor = primaryColor ?? '#0d0f70';
     secondaryColor = secondaryColor ?? '#653eae';
     title = title ?? subject ?? 'subject';
     footer = footer ?? 'The team wishes you a great day 🚀';
+    const mergedAttachments = options?.nodemailer?.defaults?.attachments ?? globalOptions?.nodemailer?.defaults?.attachments;
+    const attachments = Array.isArray(mergedAttachments) ? mergedAttachments.length : 0;
     const metadata = {
         service,
         primaryColor,
@@ -78,12 +81,17 @@ export const sendMail = async (topic, easyOptions, options) => {
         title,
         footer,
         sections,
+        cc,
+        bcc,
+        attachments,
     };
     const html = easyOptionsToUse.toHtml ? easyOptionsToUse.toHtml(metadata) : toHtml(metadata);
     nodemailerOptions = {
         defaults: {
             ...globalOptions?.nodemailer?.defaults,
             to,
+            cc,
+            bcc,
             subject,
             html,
             ...nodemailerOptions?.defaults,
@@ -100,18 +108,19 @@ export const sendMail = async (topic, easyOptions, options) => {
     try {
         if (!globalOptions?.nodemailer?.transport) {
             const data = await transporter.sendMail({ ...nodemailerOptions.defaults });
-            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️ 
-		We are still nice and generated you an email preview link (the mail we not really sent): 
-		👉 ${cyan(String(nodemailer.getTestMessageUrl(data)))}
-			
-		To really send mails, check out the doc ${white(`https://firstly.fun/modules/mail`)}. 
+            const previewUrl = nodemailer.getTestMessageUrl(data) || undefined;
+            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not configured`)} ⚠️
+		We are still nice and generated you an email preview link (the mail was NOT really sent):
+		👉 ${cyan(String(previewUrl))}
+
+		To really send mails (likely a missing provider API key), see ${white(`https://firstly.fun/docs/modules/mail`)}.
       `);
             await repo(mailEntities.Mail).insert({
                 status: 'transport_not_configured',
                 to: JSON.stringify(to),
                 html: easyOptionsToUse.saveHtml ? html : '',
                 topic,
-                metadata,
+                metadata: { ...metadata, transport: extractTransportInfo(data, previewUrl) },
             });
             return { data };
         }
@@ -123,16 +132,18 @@ export const sendMail = async (topic, easyOptions, options) => {
                 to: JSON.stringify(to),
                 html: easyOptionsToUse.saveHtml ? html : '',
                 topic,
-                metadata,
+                metadata: { ...metadata, transport: extractTransportInfo(data) },
             });
             return { data };
         }
     }
     catch (error) {
         if (error instanceof Error && error.message.includes('Missing credentials for "PLAIN"')) {
-            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not well configured`)} ⚠️ 
+            log.error(`${magenta(`[${topic}]`)} - ⚠️  ${red(`mail not well configured`)} ⚠️
 👉 transport used:
 ${cyan(JSON.stringify(globalOptions?.nodemailer?.transport, null, 2))}
+
+Auth was refused - check your provider's API key. Docs: ${white(`https://firstly.fun/docs/modules/mail`)}.
 			`);
         }
         else {
@@ -177,20 +188,34 @@ ${cyan(JSON.stringify(globalOptions?.nodemailer?.transport, null, 2))}
         return { error };
     }
 };
-const mailModule = new Module({
+/**
+ * Captured nodemailer-side metadata persisted on every send. This makes
+ * provider-side IDs (e.g. Resend's `re_...` returned via SMTP `messageId`)
+ * recoverable from the DB without an extra round-trip to the provider.
+ */
+function extractTransportInfo(data, preview) {
+    return {
+        messageId: data.messageId,
+        response: data.response,
+        accepted: data.accepted,
+        rejected: data.rejected,
+        envelope: data.envelope,
+        preview,
+    };
+}
+export const mail = (o) => new Module({
     key: 'mail',
     priority: -888,
     entities: Object.values(mailEntities),
-});
-export const mail = (o) => {
-    mailModule.initApi = () => {
+    // Opt-in: only register the test endpoint when the consumer asks for it.
+    controllers: o?.enableTest ? [MailController] : [],
+    initApi: () => {
         initMail(o);
         // Need to init in the 2 places!
         remult.context.sendMail = sendMail;
-    };
-    mailModule.initRequest = async () => {
+    },
+    initRequest: async () => {
         // Need to init in the 2 places!
         remult.context.sendMail = sendMail;
-    };
-    return mailModule;
-};
+    },
+});

package/esm/mail/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * One section in a mail body. Pure structural type, safe to import on the
+ * client when building sections from a UI.
+ */
+export type MailSection = {
+    html: string;
+    cta?: {
+        html: string;
+        link: string;
+    };
+};

package/esm/mail/types.js

@@ -0,0 +1 @@
+export {};

package/esm/mail/ui/LastMails.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte'
+
+	import { remult, repo } from 'remult'
+
+	import { Mail } from '../Mail'
+	import { Roles_Mail } from '../Roles_Mail'
+
+	const hasAccess = $derived(remult.user?.roles?.includes(Roles_Mail.Mail_Admin) ?? false)
+
+	type Props = {
+		limit?: number
+		/** Subscribe to a remult `liveQuery` so the list updates over SSE.
+		 * Default `true`. Set to `false` to fall back to a one-shot fetch on
+		 * mount (the Refresh button still works either way). */
+		live?: boolean
+	}
+	let { limit = 30, live = true }: Props = $props()
+
+	let mails: Mail[] = $state([])
+	let isLoading = $state(false)
+	let error = $state('')
+	let unsubscribe: (() => void) | null = null
+
+	export async function refresh() {
+		isLoading = true
+		error = ''
+		try {
+			mails = await repo(Mail).find({ limit })
+		} catch (e) {
+			error = e instanceof Error ? e.message : String(e)
+		} finally {
+			isLoading = false
+		}
+	}
+
+	onMount(() => {
+		if (live) {
+			// Pass `orderBy` explicitly: remult keeps the live state sorted on
+			// incremental adds/replaces only when `query.options.orderBy` is
+			// set (the entity's `defaultOrderBy` only applies to the initial
+			// fetch). Without this, new SSE rows would land at the bottom.
+			unsubscribe = repo(Mail)
+				.liveQuery({ limit, orderBy: { createdAt: 'desc' } })
+				.subscribe((res) => {
+					mails = res.items
+					error = ''
+				})
+		} else {
+			refresh()
+		}
+	})
+
+	onDestroy(() => unsubscribe?.())
+
+	function formatList(v: unknown): string {
+		if (v == null) return ''
+		if (Array.isArray(v)) return v.join(', ')
+		return String(v)
+	}
+
+	function parseTo(raw: string): string {
+		try {
+			return formatList(JSON.parse(raw))
+		} catch {
+			return raw
+		}
+	}
+
+	function formatDate(d: unknown): string {
+		if (!d) return ''
+		const date = d instanceof Date ? d : new Date(d as string)
+		if (isNaN(date.getTime())) return String(d)
+		return date.toLocaleString()
+	}
+
+	function badgeClass(status: Mail['status']): string {
+		if (status === 'sent') return 'bg-emerald-500/10 border-emerald-500/40 text-emerald-300'
+		if (status === 'transport_not_configured')
+			return 'bg-amber-500/10 border-amber-500/40 text-amber-300'
+		return 'bg-red-500/10 border-red-500/40 text-red-300'
+	}
+</script>
+
+<div class="border border-slate-700 bg-slate-800 text-slate-200">
+	<header class="flex flex-wrap items-center gap-3 border-b border-slate-700 px-5 py-4">
+		<div class="flex flex-col">
+			<h2 class="text-lg font-semibold text-slate-100">Last mails</h2>
+			<p class="text-sm text-slate-400">Recent mails sent through this app.</p>
+		</div>
+		{#if hasAccess}
+			<button
+				type="button"
+				onclick={refresh}
+				disabled={isLoading}
+				class="ml-auto inline-flex items-center gap-2 border border-slate-600 bg-slate-700 px-3 py-1.5 text-sm font-medium text-slate-100 hover:bg-slate-600 disabled:opacity-50"
+			>
+				{#if isLoading}
+					<svg
+						class="h-4 w-4 animate-spin"
+						viewBox="0 0 24 24"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						aria-hidden="true"
+					>
+						<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.25" stroke-width="4"
+						></circle>
+						<path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="4" stroke-linecap="round"
+						></path>
+					</svg>
+				{/if}
+				Refresh
+			</button>
+			<span class="text-xs text-slate-500">
+				{mails.length} mail{mails.length === 1 ? '' : 's'}
+				{#if live}<span class="text-indigo-400">· live</span>{/if}
+			</span>
+		{/if}
+	</header>
+
+	<div class="p-5">
+		{#if !hasAccess}
+			<div class="border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200">
+				You need the
+				<code class="bg-amber-500/20 px-1 py-0.5 text-xs text-amber-100">Mail.Admin</code>
+				role to use this.
+			</div>
+		{:else if error}
+			<div class="border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-200">{error}</div>
+		{:else if mails.length === 0}
+			<div class="border border-slate-700 bg-slate-900 p-3 text-sm text-slate-400">No mails yet.</div>
+		{:else}
+			<div class="flex flex-col gap-3">
+				{#each mails as m (m.id)}
+					{@const subject = m.metadata?.subject as string | undefined}
+					{@const cc = formatList(m.metadata?.cc)}
+					{@const bcc = formatList(m.metadata?.bcc)}
+					{@const messageId = m.metadata?.transport?.messageId as string | undefined}
+					{@const preview = m.metadata?.transport?.preview as string | undefined}
+					<article class="flex flex-col gap-2 border border-slate-700 bg-slate-900 p-4">
+						<div class="flex flex-wrap items-center gap-2">
+							<span class="border px-2 py-0.5 text-xs font-medium {badgeClass(m.status)}">{m.status}</span>
+							<span
+								class="border border-slate-600 bg-slate-700/50 px-2 py-0.5 text-xs font-medium text-slate-200"
+								>{m.topic}</span
+							>
+							<span class="text-xs text-slate-400">{parseTo(m.to)}</span>
+							<span class="ml-auto text-xs text-slate-500">{formatDate(m.createdAt)}</span>
+						</div>
+
+						<div class="text-base font-medium text-slate-100">{subject || '(no subject)'}</div>
+
+						{#if cc}
+							<div class="text-xs text-slate-500">cc: {cc}</div>
+						{/if}
+						{#if bcc}
+							<div class="text-xs text-slate-500">bcc: {bcc}</div>
+						{/if}
+
+						{#if preview}
+							<div class="text-xs">
+								<a
+									href={preview}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="text-indigo-400 underline hover:text-indigo-300">preview (mail not really sent)</a
+								>
+							</div>
+						{/if}
+
+						{#if messageId}
+							<div class="text-xs break-all text-slate-500">id: <code>{messageId}</code></div>
+						{/if}
+
+						{#if m.status === 'error' && m.errorInfo}
+							<pre
+								class="border border-red-500/40 bg-red-500/10 p-2 text-xs whitespace-pre-wrap text-red-200">{m.errorInfo}</pre>
+						{/if}
+					</article>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>

package/esm/mail/ui/LastMails.svelte.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    limit?: number;
+    /** Subscribe to a remult `liveQuery` so the list updates over SSE.
+     * Default `true`. Set to `false` to fall back to a one-shot fetch on
+     * mount (the Refresh button still works either way). */
+    live?: boolean;
+};
+declare const LastMails: import("svelte").Component<Props, {
+    refresh: () => Promise<void>;
+}, "">;
+type LastMails = ReturnType<typeof LastMails>;
+export default LastMails;

package/esm/mail/ui/WriteMail.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { remult } from 'remult'
+	import { errorMessage } from '../..'
+
+	import { MailController } from '../MailController'
+	import { Roles_Mail } from '../Roles_Mail'
+
+	const hasAccess = $derived(remult.user?.roles?.includes(Roles_Mail.Mail_Admin) ?? false)
+
+	let to = $state('')
+	let cc = $state('')
+	let bcc = $state('')
+	let subject = $state('')
+	let body = $state('')
+	let isLoading = $state(false)
+
+	let result: { ok: boolean; messageId: string | null } | null = $state(null)
+	let error = $state('')
+
+	// Bare-minimum client gate: subject + at least one recipient slot has
+	// content. Server splits, trims, lowercases, and validates each entry.
+	const canSend = $derived(
+		subject.trim().length > 0 && (to.trim() || cc.trim() || bcc.trim()).length > 0,
+	)
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault()
+		if (!canSend) return
+		result = null
+		error = ''
+		isLoading = true
+		// We don't gate the request on `hasAccess` (it's a client-only signal):
+		// the server cookie-auths via the BackendMethod's `allowed`. The amber
+		// notice in the template is for UX only.
+		try {
+			const r = await MailController.sendTest({ to, cc, bcc, subject, body })
+			if (r.ok) {
+				result = { ok: true, messageId: r.messageId }
+			} else {
+				error = r.error ?? 'Unknown error'
+			}
+		} catch (e) {
+			error = errorMessage(e)
+		} finally {
+			isLoading = false
+		}
+	}
+</script>
+
+<div class="border border-slate-700 bg-slate-800 text-slate-200">
+	<header class="border-b border-slate-700 px-5 py-4">
+		<h2 class="text-lg font-semibold text-slate-100">Write mail</h2>
+		<p class="mt-1 text-sm text-slate-400">Send a test mail through the configured transport.</p>
+	</header>
+
+	<div class="p-5">
+		{#if !hasAccess}
+			<div class="border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200">
+				You need the
+				<code class="bg-amber-500/20 px-1 py-0.5 text-xs text-amber-100">Mail.Admin</code>
+				role to use this.
+			</div>
+		{:else}
+			<form onsubmit={handleSubmit} class="flex flex-col gap-4">
+				<div class="flex flex-col gap-1">
+					<label for="write-mail-to" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
+						>To</label
+					>
+					<input
+						id="write-mail-to"
+						type="text"
+						bind:value={to}
+						disabled={isLoading}
+						placeholder="someone@example.com, other@example.com"
+						class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4 max-md:grid-cols-1">
+					<div class="flex flex-col gap-1">
+						<label for="write-mail-cc" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
+							>Cc</label
+						>
+						<input
+							id="write-mail-cc"
+							type="text"
+							bind:value={cc}
+							disabled={isLoading}
+							placeholder="optional, comma-separated"
+							class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+						/>
+					</div>
+					<div class="flex flex-col gap-1">
+						<label for="write-mail-bcc" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
+							>Bcc</label
+						>
+						<input
+							id="write-mail-bcc"
+							type="text"
+							bind:value={bcc}
+							disabled={isLoading}
+							placeholder="optional, comma-separated"
+							class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+						/>
+					</div>
+				</div>
+
+				<div class="flex flex-col gap-1">
+					<label
+						for="write-mail-subject"
+						class="text-xs font-medium tracking-wide text-slate-400 uppercase">Subject</label
+					>
+					<input
+						id="write-mail-subject"
+						type="text"
+						bind:value={subject}
+						disabled={isLoading}
+						required
+						placeholder="Subject"
+						class="border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+					/>
+				</div>
+
+				<div class="flex flex-col gap-1">
+					<label for="write-mail-body" class="text-xs font-medium tracking-wide text-slate-400 uppercase"
+						>Body</label
+					>
+					<textarea
+						id="write-mail-body"
+						bind:value={body}
+						disabled={isLoading}
+						placeholder="Write your message..."
+						class="h-40 w-full border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
+					></textarea>
+				</div>
+
+				<div class="flex items-center gap-4 border-t border-slate-700 pt-4">
+					<button
+						type="submit"
+						disabled={isLoading || !canSend}
+						class="inline-flex items-center gap-2 bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-400 disabled:opacity-50"
+					>
+						{#if isLoading}
+							<svg
+								class="h-4 w-4 animate-spin"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+								aria-hidden="true"
+							>
+								<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.25" stroke-width="4"
+								></circle>
+								<path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="4" stroke-linecap="round"
+								></path>
+							</svg>
+						{/if}
+						Send
+					</button>
+
+					{#if !canSend && !result && !error}
+						<span class="text-xs text-slate-500"> Add a subject and at least one recipient. </span>
+					{/if}
+
+					{#if result}
+						<div
+							class="flex flex-1 items-center gap-2 border border-emerald-500/40 bg-emerald-500/10 px-3 py-1.5 text-sm text-emerald-200"
+						>
+							<span class="font-medium">Sent</span>
+							{#if result.messageId}
+								<code class="ml-auto text-xs break-all">{result.messageId}</code>
+							{/if}
+						</div>
+					{/if}
+
+					{#if error}
+						<pre
+							class="flex-1 overflow-auto border border-red-500/40 bg-red-500/10 px-3 py-1.5 text-xs whitespace-pre-wrap text-red-200">{error}</pre>
+					{/if}
+				</div>
+			</form>
+		{/if}
+	</div>
+</div>

package/esm/mail/ui/WriteMail.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const WriteMail: import("svelte").Component<Record<string, never>, {}, "">;
+type WriteMail = ReturnType<typeof WriteMail>;
+export default WriteMail;

package/esm/sqlAdmin/ui/SqlAdmin.svelte

@@ -2,10 +2,15 @@
 	/**
 	 * SQL Admin UI.
 	 *
+	 * Dark theme (zinc + indigo accent), styled with raw Tailwind utilities only -
+	 * no plugin (daisyUI, shadcn, etc.) required. Drop into any Tailwind-powered
+	 * project and it just works.
+	 *
 	 * Results are logged to the browser console as `for AI: <json rows>` after
 	 * each successful query - chrome-devtools / AI agents inspecting the page
 	 * can read them with `list_console_messages`.
 	 */
+	import { log } from '../index'
 	import { SqlAdminController } from '../SqlAdminController'
 
 	const defaultQuery = `SELECT *
@@ -46,9 +51,7 @@ ORDER BY tablename, indexname`,
 		},
 	} as const
 
-	console.info(
-		'[firstly/SqlAdmin] AI Hint: results are also logged as "for AI:" JSON after each query.',
-	)
+	log.info('AI Hint: results are also logged as "for AI:" JSON after each query.')
 
 	function setPresetQuery(queryId: keyof typeof queries) {
 		sqlInput = queries[queryId].sql
@@ -60,8 +63,8 @@ ORDER BY tablename, indexname`,
 			error = ''
 			isLoading = true
 			result = { ...(await SqlAdminController.exec(sqlInput)) }
-			console.info('for AI:', JSON.stringify(result.r.rows))
-			console.info('for humans:', result)
+			log.info('for AI:', JSON.stringify(result.r.rows))
+			log.info('for humans:', result)
 		} catch (e) {
 			error = JSON.stringify(e, null, 2)
 		} finally {
@@ -75,72 +78,120 @@ ORDER BY tablename, indexname`,
 	}
 </script>
 
-<div class="flex flex-col gap-4">
-	<div class="flex flex-col gap-2">
-		<h2 class="text-2xl font-bold">SQL Admin</h2>
-		<p class="text-sm text-base-content/70">
+<div class="border border-slate-700 bg-slate-800 text-slate-200">
+	<header class="border-b border-slate-700 px-5 py-4">
+		<h2 class="text-lg font-semibold text-slate-100">SQL Admin</h2>
+		<p class="mt-1 text-sm text-slate-400">
 			Execute SQL queries directly on the database. Results are displayed below and also logged to the
 			browser console.
 		</p>
-	</div>
-	<div class="flex flex-wrap gap-2">
-		{#each Object.entries(queries) as [id, query] (id)}
-			<button class="btn btn-outline btn-sm" onclick={() => setPresetQuery(id as keyof typeof queries)}
-				>{query.label}</button
-			>
-		{/each}
-	</div>
-	<form onsubmit={handleSubmit} class="flex flex-col gap-4">
-		<fieldset class="fieldset">
+	</header>
+
+	<div class="flex flex-col gap-4 p-5">
+		<div class="flex flex-wrap gap-2">
+			{#each Object.entries(queries) as [id, query] (id)}
+				<button
+					type="button"
+					class="border border-slate-600 bg-slate-700 px-3 py-1.5 text-sm font-medium text-slate-100 hover:bg-slate-600 disabled:opacity-50"
+					onclick={() => setPresetQuery(id as keyof typeof queries)}>{query.label}</button
+				>
+			{/each}
+		</div>
+		<form onsubmit={handleSubmit} class="flex flex-col gap-4">
 			<textarea
 				bind:value={sqlInput}
-				class="textarea h-52 w-full font-mono"
+				class="h-52 w-full border border-slate-700 bg-slate-900 p-3 font-mono text-sm text-slate-100 placeholder-slate-500 focus:border-indigo-400 focus:outline-none disabled:opacity-50"
 				placeholder="Enter SQL command..."
 				disabled={isLoading}
 			></textarea>
-		</fieldset>
-		<div class="flex items-center gap-4">
-			<button type="submit" class="btn btn-primary" disabled={isLoading}>
-				{#if isLoading}<span class="loading loading-spinner"></span>{/if}
-				Execute SQL
-			</button>
-			{#if error}<pre class="alert flex-1 text-sm alert-error">{error.replaceAll(
-						'\\n',
-						'\n',
-					)}</pre>{/if}
-			{#if result}
-				<div class="alert flex flex-1 justify-between alert-success">
-					<span class="text-success-content">{result.took.toFixed(0)} ms</span>
-					<span class="text-success-content">{result.r.rowCount} rows</span>
-				</div>
-			{/if}
-		</div>
-	</form>
-	{#if result}
-		<div class="max-h-[600px] overflow-auto rounded-lg border border-base-300">
-			{#if result.r.rows && result.r.rows.length > 0}
-				<table class="table w-full table-zebra bg-base-200">
-					<thead class="sticky top-0 z-10 bg-base-300">
-						<tr
-							>{#each getHeaders(result.r.rows) as header, i (i)}<th>{header}</th>{/each}</tr
+			<div class="flex flex-wrap items-center gap-4">
+				<button
+					type="submit"
+					class="inline-flex items-center gap-2 bg-indigo-500 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-400 disabled:opacity-50"
+					disabled={isLoading}
+				>
+					{#if isLoading}
+						<svg
+							class="h-4 w-4 animate-spin"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							aria-hidden="true"
 						>
-					</thead>
-					<tbody>
-						{#each result.r.rows as row, r (r)}
+							<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-opacity="0.25" stroke-width="4"
+							></circle>
+							<path d="M4 12a8 8 0 0 1 8-8" stroke="currentColor" stroke-width="4" stroke-linecap="round"
+							></path>
+						</svg>
+					{/if}
+					Execute SQL
+				</button>
+				{#if error}
+					<pre
+						class="flex-1 overflow-auto border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-200">{error.replaceAll(
+							'\\n',
+							'\n',
+						)}</pre>
+				{/if}
+				{#if result}
+					<div
+						class="flex flex-1 justify-between border border-emerald-500/40 bg-emerald-500/10 p-3 text-sm text-emerald-200"
+					>
+						<span>{result.took.toFixed(0)} ms</span>
+						<span>{result.r.rowCount} rows</span>
+					</div>
+				{/if}
+			</div>
+		</form>
+		{#if result}
+			<!-- contain: paint isolates the scroll container's repaint area; without
+				 it, scrolling a wide result table forces the whole page to repaint
+				 every frame, which is what made horizontal scroll feel laggy. -->
+			<div class="max-h-[600px] overflow-auto border border-slate-700 [contain:paint]">
+				{#if result.r.rows && result.r.rows.length > 0}
+					<table class="w-full border-collapse text-sm">
+						<thead class="sticky top-0 z-10 bg-slate-700">
 							<tr>
-								{#each Object.values(row) as cell, c (c)}
-									<td class="align-top">
-										{#if typeof cell === 'object'}<pre class="text-xs">{JSON.stringify(cell, null, 2)}</pre>
-										{:else}{cell === null ? 'null' : cell}{/if}
-									</td>
+								{#each getHeaders(result.r.rows) as header, i (i)}
+									<th class="border-b border-slate-600 px-3 py-2 text-left font-semibold text-slate-100"
+										>{header}</th
+									>
 								{/each}
 							</tr>
-						{/each}
-					</tbody>
-				</table>
-			{:else}
-				<div class="alert alert-info">No rows returned</div>
-			{/if}
-		</div>
-	{/if}
+						</thead>
+						<tbody>
+							{#each result.r.rows as row, r (r)}
+								<!-- Solid stripe (no /50 alpha) so the GPU doesn't have to alpha-
+									 composite every cell on every scroll frame. -->
+								<tr class="even:bg-slate-900">
+									{#each Object.values(row) as cell, c (c)}
+										<!-- min-w to keep short cells readable, max-w-xs to cap
+											 wide ones, break-all so long unbroken strings (URLs,
+											 DIDs) wrap inside their cell instead of forcing the
+											 column to ~940px and the table to 2.5kpx (which is
+											 what made horizontal scroll laggy). -->
+										<td
+											class="max-w-xs min-w-[8rem] border-b border-slate-700 px-3 py-2 align-top text-sm break-all text-slate-200"
+										>
+											{#if typeof cell === 'object'}<pre
+													class="text-xs whitespace-pre-wrap text-slate-400">{JSON.stringify(
+														cell,
+														null,
+														2,
+													)}</pre>
+											{:else}{cell === null ? 'null' : cell}{/if}
+										</td>
+									{/each}
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				{:else}
+					<div class="border border-slate-700 bg-slate-800 p-3 text-sm text-slate-300">
+						No rows returned
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "firstly",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "type": "module",
   "description": "Firstly, an opinionated Remult setup!",
   "funding": "https://github.com/sponsors/jycouet",
@@ -40,8 +40,8 @@
     "nodemailer": "8.0.5",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4.2.2",
-    "vite-plugin-kit-routes": "1.0.3",
-    "vite-plugin-stripper": "0.10.1"
+    "vite-plugin-kit-routes": "1.0.5",
+    "vite-plugin-stripper": "0.10.3"
   },
   "sideEffects": false,
   "exports": {
@@ -85,6 +85,7 @@
     },
     "./mail": {
       "types": "./esm/mail/index.d.ts",
+      "svelte": "./esm/mail/index.js",
       "default": "./esm/mail/index.js"
     },
     "./mail/server": {