@rapidmx/crm-plugin 0.1.0

package/apps/shared/components/designer/designModel.ts

@@ -0,0 +1,276 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The template designer's edits, as pure functions over a `TemplateDesign`: each returns a new design and leaves the one it was given
+ * alone, so the designer can keep every earlier design for undo.
+ */
+import type { BlockType, DesignBlock, DesignColumn, DesignSection, TemplateDesign } from "../../crmApi.js";
+
+/** A fresh id for a section, column or block. */
+export function newId(): string {
+    return crypto.randomUUID();
+}
+
+/** The block types the palette offers, in its order, with what each is called. */
+export const BLOCK_TYPES: { type: BlockType; label: string }[] = [
+    { type: "heading", label: "Heading" },
+    { type: "text", label: "Text" },
+    { type: "image", label: "Image" },
+    { type: "button", label: "Button" },
+    { type: "divider", label: "Divider" },
+    { type: "spacer", label: "Spacer" },
+    { type: "social", label: "Social links" },
+    { type: "footer", label: "Footer" },
+    { type: "html", label: "HTML" },
+];
+
+/** What a block type is called. */
+export function blockLabel(type: BlockType): string {
+    return BLOCK_TYPES.find((entry) => entry.type === type)!.label;
+}
+
+/** A new block of `type`, with the content a new one starts with. */
+export function newBlock(type: BlockType): DesignBlock {
+    const id: string = newId();
+    switch (type) {
+        case "heading":
+            return { id, type, text: "New heading", level: 2 };
+        case "text":
+            return { id, type, html: "<p>Write something here.</p>" };
+        case "image":
+            return { id, type, src: "", alt: "" };
+        case "button":
+            return { id, type, text: "Click here", href: "" };
+        case "divider":
+            return { id, type };
+        case "spacer":
+            return { id, type, height: 24 };
+        case "social":
+            return { id, type, links: [{ network: "web", href: "" }], align: "center" };
+        case "html":
+            return { id, type, html: "<p>Your HTML</p>" };
+        default:
+            return { id, type: "footer" };
+    }
+}
+
+/** A new section with `columns` empty columns (1 to 4). */
+export function newSection(columns: number): DesignSection {
+    return { id: newId(), padding: 16, columns: Array.from({ length: columns }, () => ({ id: newId(), blocks: [] })) };
+}
+
+/** `blocks` with fresh ids, for pasting a saved block or duplicating one. */
+export function withNewIds(blocks: DesignBlock[]): DesignBlock[] {
+    return blocks.map((block) => ({ ...structuredClone(block), id: newId() }));
+}
+
+/** Where a block is. */
+export interface BlockLocation {
+    section: number;
+    column: number;
+    index: number;
+}
+
+/** Where block `id` is, or `undefined`. */
+export function findBlock(design: TemplateDesign, id: string): BlockLocation | undefined {
+    for (const [section, { columns }] of design.sections.entries()) {
+        for (const [column, { blocks }] of columns.entries()) {
+            const index: number = blocks.findIndex((block) => block.id === id);
+            if (index >= 0) {
+                return { section, column, index };
+            }
+        }
+    }
+    return undefined;
+}
+
+/** The block `id`, or `undefined`. */
+export function getBlock(design: TemplateDesign, id: string): DesignBlock | undefined {
+    const at: BlockLocation | undefined = findBlock(design, id);
+    return at && design.sections[at.section].columns[at.column].blocks[at.index];
+}
+
+/** Where column `id` is: its section's index and its own. */
+function findColumn(design: TemplateDesign, id: string): { section: number; column: number } | undefined {
+    for (const [section, { columns }] of design.sections.entries()) {
+        const column: number = columns.findIndex((entry) => entry.id === id);
+        if (column >= 0) {
+            return { section, column };
+        }
+    }
+    return undefined;
+}
+
+/** `design` with the blocks of each column passed through `change` (given the column's id). */
+function mapColumns(design: TemplateDesign, change: (column: DesignColumn) => DesignBlock[]): TemplateDesign {
+    return {
+        ...design,
+        sections: design.sections.map((section) => ({ ...section, columns: section.columns.map((column) => ({ ...column, blocks: change(column) })) })),
+    };
+}
+
+/** `design` with block `id` changed by `patch`. */
+export function updateBlock(design: TemplateDesign, id: string, patch: Partial<DesignBlock>): TemplateDesign {
+    return mapColumns(design, ({ blocks }) => blocks.map((block) => (block.id === id ? ({ ...block, ...patch } as DesignBlock) : block)));
+}
+
+/** `design` without block `id`. */
+export function removeBlock(design: TemplateDesign, id: string): TemplateDesign {
+    return mapColumns(design, ({ blocks }) => blocks.filter((block) => block.id !== id));
+}
+
+/** `design` with `blocks` put into column `columnId` at `index` (its end when past it). */
+export function insertBlocks(design: TemplateDesign, columnId: string, index: number, blocks: DesignBlock[]): TemplateDesign {
+    return mapColumns(design, (column) => (column.id === columnId ? [...column.blocks.slice(0, index), ...blocks, ...column.blocks.slice(index)] : column.blocks));
+}
+
+/** `design` with a copy of block `id` right after it; the copy's id is returned too. */
+export function duplicateBlock(design: TemplateDesign, id: string): { design: TemplateDesign; id: string } {
+    const at: BlockLocation = findBlock(design, id)!;
+    const column: DesignColumn = design.sections[at.section].columns[at.column];
+    const [copy] = withNewIds([column.blocks[at.index]]);
+    return { design: insertBlocks(design, column.id, at.index + 1, [copy]), id: copy.id };
+}
+
+/** `design` with block `id` moved to column `columnId` at `index` (counted without the block). */
+export function moveBlock(design: TemplateDesign, id: string, columnId: string, index: number): TemplateDesign {
+    const block: DesignBlock | undefined = getBlock(design, id);
+    return block ? insertBlocks(removeBlock(design, id), columnId, index, [block]) : design;
+}
+
+/** `design` with block `id` one place up (`delta` -1) or down (1) its column; unchanged at the column's end. */
+export function nudgeBlock(design: TemplateDesign, id: string, delta: -1 | 1): TemplateDesign {
+    const at: BlockLocation = findBlock(design, id)!;
+    const column: DesignColumn = design.sections[at.section].columns[at.column];
+    const index: number = at.index + delta;
+    return index < 0 || index >= column.blocks.length ? design : moveBlock(design, id, column.id, index);
+}
+
+/**
+ * `design` after dragging block `activeId` over `overId` - another block (it takes that block's place) or a column (it goes to the column's
+ * end, which is how an empty column is dropped into). Unchanged when either is unknown.
+ */
+export function dropBlock(design: TemplateDesign, activeId: string, overId: string): TemplateDesign {
+    const from: BlockLocation | undefined = findBlock(design, activeId);
+    if (!from || activeId === overId) {
+        return design;
+    }
+    const overBlock: BlockLocation | undefined = findBlock(design, overId);
+    if (overBlock) {
+        const columnId: string = design.sections[overBlock.section].columns[overBlock.column].id;
+        return moveBlock(design, activeId, columnId, overBlock.index);
+    }
+    const overColumn = findColumn(design, overId);
+    if (!overColumn) {
+        return design;
+    }
+    const column: DesignColumn = design.sections[overColumn.section].columns[overColumn.column];
+    const sameColumn: boolean = from.section === overColumn.section && from.column === overColumn.column;
+    return moveBlock(design, activeId, column.id, column.blocks.length - (sameColumn ? 1 : 0));
+}
+
+/** `design` with `section` put at `index`. */
+export function addSection(design: TemplateDesign, index: number, section: DesignSection): TemplateDesign {
+    return { ...design, sections: [...design.sections.slice(0, index), section, ...design.sections.slice(index)] };
+}
+
+/** `design` without section `id`. */
+export function removeSection(design: TemplateDesign, id: string): TemplateDesign {
+    return { ...design, sections: design.sections.filter((section) => section.id !== id) };
+}
+
+/** `design` with section `id` one place up (-1) or down (1); unchanged at either end. */
+export function nudgeSection(design: TemplateDesign, id: string, delta: -1 | 1): TemplateDesign {
+    const from: number = design.sections.findIndex((section) => section.id === id);
+    const to: number = from + delta;
+    if (to < 0 || to >= design.sections.length) {
+        return design;
+    }
+    const sections: DesignSection[] = [...design.sections];
+    [sections[from], sections[to]] = [sections[to], sections[from]];
+    return { ...design, sections };
+}
+
+/**
+ * `design` with section `id` changed by `patch`; a `columns` count (1 to 4) adds empty columns or folds the blocks of removed ones into
+ * the last one kept, so no block is lost.
+ */
+export function updateSection(design: TemplateDesign, id: string, patch: { backgroundColor?: string; padding?: number; columns?: number }): TemplateDesign {
+    const { columns: count, ...rest } = patch;
+    return {
+        ...design,
+        sections: design.sections.map((section) => {
+            if (section.id !== id) {
+                return section;
+            }
+            let columns: DesignColumn[] = section.columns;
+            if (count !== undefined && count > columns.length) {
+                columns = [...columns, ...Array.from({ length: count - columns.length }, () => ({ id: newId(), blocks: [] }))];
+            } else if (count !== undefined && count < columns.length) {
+                const folded: DesignBlock[] = columns.slice(count - 1).flatMap((column) => column.blocks);
+                columns = [...columns.slice(0, count - 1), { ...columns[count - 1], blocks: folded }];
+            }
+            return { ...section, ...rest, columns };
+        }),
+    };
+}
+
+/** What stops a design being saved, block by block - fields the server would refuse. */
+export function designProblems(design: TemplateDesign): { blockId: string; message: string }[] {
+    const problems: { blockId: string; message: string }[] = [];
+    for (const { columns } of design.sections) {
+        for (const { blocks } of columns) {
+            for (const block of blocks) {
+                const add = (message: string) => problems.push({ blockId: block.id, message });
+                if (block.type === "image" && !/^https:\/\//i.test(block.src)) {
+                    add("An image needs an https:// address.");
+                } else if (block.type === "button" && !isLink(block.href)) {
+                    add(`The button "${block.text}" needs a link.`);
+                } else if (block.type === "social" && block.links.some((link) => !isLink(link.href))) {
+                    add("Every social link needs an address.");
+                } else if (block.type === "heading" && block.text.trim() === "") {
+                    add("A heading needs some text.");
+                }
+            }
+        }
+    }
+    return problems;
+}
+
+/** Whether `href` is a link the server takes: web, mail or phone, or starting with a merge tag. */
+export function isLink(href: string): boolean {
+    return /^(?:https?:\/\/\S|mailto:\S|tel:\S|\{\{)/i.test(href.trim());
+}
+
+/** Undo history: the designs before the current one, the current one, and those undone. */
+export interface History {
+    past: TemplateDesign[];
+    present: TemplateDesign;
+    future: TemplateDesign[];
+}
+
+/** How many designs back undo reaches. */
+export const HISTORY_LIMIT = 100;
+
+/** `history` with `design` as the current design (dropping what was undone). */
+export function record(history: History, design: TemplateDesign): History {
+    return { past: [...history.past, history.present].slice(-HISTORY_LIMIT), present: design, future: [] };
+}
+
+/** `history` one step back; unchanged when there's nothing to undo. */
+export function undo(history: History): History {
+    if (history.past.length === 0) {
+        return history;
+    }
+    return { past: history.past.slice(0, -1), present: history.past[history.past.length - 1], future: [history.present, ...history.future] };
+}
+
+/** `history` one step forward again; unchanged when nothing was undone. */
+export function redo(history: History): History {
+    if (history.future.length === 0) {
+        return history;
+    }
+    return { past: [...history.past, history.present], present: history.future[0], future: history.future.slice(1) };
+}

package/apps/shared/components/public/PublicPages.tsx

@@ -0,0 +1,343 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/**
+ * The CRM's public pages, which subscribers reach from emails and forms without signing in: the preference center, double opt-in
+ * confirmation, one-click unsubscribe, and signup forms. Each is drawn in the deployment's branding.
+ */
+import React, { FormEvent, PropsWithChildren, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/web-client/lib/util/api.js";
+import useBranding from "@rapidmx/web-client/lib/branding/useBranding.js";
+import { BrandingFooter, BrandingHeader } from "@rapidmx/web-client/shared/components/layout/BrandingChrome.js";
+import Alert from "@rapidmx/web-client/lib/components/feedback/Alert.js";
+import Button from "@rapidmx/web-client/lib/components/buttons/Button.js";
+import FormField from "@rapidmx/web-client/lib/components/forms/FormField.js";
+import {
+    FormResult,
+    Preferences,
+    PublicForm,
+    PublicFormField,
+    confirmSubscription,
+    getPreferences,
+    getPublicForm,
+    savePreferences,
+    submitForm,
+    unsubscribe,
+} from "../../publicApi.js";
+import { HONEYPOT_NAME } from "./honeypot.js";
+
+const INPUT_CLASS = "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+/** What a failed call says to a visitor: the server's own words for a refusal, a friendlier line for a link that doesn't work. */
+function visitorMessage(err: unknown, fallback: string): string {
+    if (err instanceof ApiRequestError && err.status === 404) {
+        return "This link doesn't work any more. Use the link in your most recent email.";
+    }
+    return err instanceof ApiRequestError ? err.message : fallback;
+}
+
+/** The frame of a public page: the deployment's branding around a centred card. */
+export function PublicPage({ title, children }: PropsWithChildren<{ title: string }>) {
+    const { branding } = useBranding();
+    return (
+        <div className="min-h-screen flex flex-col">
+            <BrandingHeader branding={branding} />
+            <main className="flex-1 bg-surface-alt px-4 py-8 sm:py-12">
+                <div className="mx-auto w-full max-w-xl rounded-lg border border-border bg-surface shadow-sm p-6 sm:p-8">
+                    <h1 className="text-xl font-bold tracking-tight mb-4">{title}</h1>
+                    {children}
+                </div>
+            </main>
+            <BrandingFooter branding={branding} />
+        </div>
+    );
+}
+
+/** A page that needs a token from an email but was opened without one. */
+export function MissingLinkPage({ title }: { title: string }) {
+    return (
+        <PublicPage title={title}>
+            <p className="text-sm">Open this page from the link in one of our emails.</p>
+        </PublicPage>
+    );
+}
+
+/** The preference center: which lists to be on, and unsubscribing from all email. */
+export function PreferenceCenterPage({ token }: { token: string }) {
+    const [preferences, setPreferences] = useState<Preferences | null>(null);
+    const [choices, setChoices] = useState<Record<string, boolean>>({});
+    const [error, setError] = useState<string | null>(null);
+    const [saved, setSaved] = useState<string | null>(null);
+
+    function show(next: Preferences): void {
+        setPreferences(next);
+        setChoices(Object.fromEntries(next.lists.map((list) => [list.uid, list.subscribed])));
+    }
+
+    useEffect(() => {
+        getPreferences(token)
+            .then(show)
+            .catch((err) => setError(visitorMessage(err, "Your preferences could not be loaded.")));
+    }, [token]);
+
+    async function save(input: { lists?: Record<string, boolean>; unsubscribeAll?: boolean }, message: string): Promise<void> {
+        try {
+            show(await savePreferences(token, input));
+            setSaved(message);
+            setError(null);
+        } catch (err) {
+            setSaved(null);
+            setError(visitorMessage(err, "Your preferences could not be saved."));
+        }
+    }
+
+    return (
+        <PublicPage title="Email preferences">
+            {error && <Alert>{error}</Alert>}
+            {saved && <p className="text-sm text-success mb-3">{saved}</p>}
+            {preferences && (
+                <>
+                    <p className="text-sm mb-4">
+                        Choose what {preferences.workspaceName} sends to <strong>{preferences.email}</strong>.
+                    </p>
+                    {preferences.unsubscribedAll && (
+                        <div className="text-sm mb-4">
+                            You have unsubscribed from all email.{" "}
+                            <button type="button" className="text-primary-dark underline" onClick={() => void save({ unsubscribeAll: false }, "Welcome back.")}>
+                                Resubscribe
+                            </button>
+                        </div>
+                    )}
+                    <form
+                        onSubmit={(event: FormEvent) => {
+                            event.preventDefault();
+                            void save({ lists: choices }, "Your preferences are saved.");
+                        }}
+                        className="flex flex-col gap-3"
+                    >
+                        {preferences.lists.map((list) => (
+                            <label key={list.uid} className="flex items-start gap-3 text-sm">
+                                <input
+                                    type="checkbox"
+                                    className="mt-1"
+                                    checked={choices[list.uid] ?? false}
+                                    onChange={(event) => setChoices((current) => ({ ...current, [list.uid]: event.target.checked }))}
+                                />
+                                <span>
+                                    <span className="font-medium">{list.name}</span>
+                                    {list.description && <span className="block text-text-muted">{list.description}</span>}
+                                </span>
+                            </label>
+                        ))}
+                        {preferences.lists.length > 0 && (
+                            <Button type="submit" className="!w-auto self-start">
+                                Save preferences
+                            </Button>
+                        )}
+                    </form>
+                    {!preferences.unsubscribedAll && (
+                        <button
+                            type="button"
+                            className="text-sm text-danger underline mt-6"
+                            onClick={() => void save({ unsubscribeAll: true }, "You won't get any more marketing email from us.")}
+                        >
+                            Unsubscribe from all email
+                        </button>
+                    )}
+                </>
+            )}
+        </PublicPage>
+    );
+}
+
+/** Confirming a double opt-in subscription: one button, so a link scanner opening the page doesn't confirm on the reader's behalf. */
+export function ConfirmPage({ token }: { token: string }) {
+    const [result, setResult] = useState<{ workspaceName: string; lists: string[] } | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    async function confirm(): Promise<void> {
+        setBusy(true);
+        try {
+            setResult(await confirmSubscription(token));
+            setError(null);
+        } catch (err) {
+            setError(visitorMessage(err, "Your subscription could not be confirmed."));
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <PublicPage title="Confirm your subscription">
+            {error && <Alert>{error}</Alert>}
+            {result ? (
+                <p className="text-sm">
+                    {result.lists.length > 0
+                        ? `Thanks! You're subscribed to ${result.lists.join(", ")} from ${result.workspaceName}.`
+                        : "There is nothing left to confirm: you may have confirmed already, or unsubscribed since."}
+                </p>
+            ) : (
+                <>
+                    <p className="text-sm mb-4">Confirm that you want to receive these emails.</p>
+                    <Button type="button" className="!w-auto" loading={busy} disabled={busy} onClick={() => void confirm()}>
+                        Confirm subscription
+                    </Button>
+                </>
+            )}
+        </PublicPage>
+    );
+}
+
+/** An unsubscribe link's landing page: one button, then a way to the preference center. */
+export function UnsubscribePage({ token }: { token: string }) {
+    const [result, setResult] = useState<{ workspaceName: string; list?: string; preferencesToken: string } | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    async function run(): Promise<void> {
+        setBusy(true);
+        try {
+            setResult(await unsubscribe(token));
+            setError(null);
+        } catch (err) {
+            setError(visitorMessage(err, "You could not be unsubscribed. Please try again."));
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <PublicPage title="Unsubscribe">
+            {error && <Alert>{error}</Alert>}
+            {result ? (
+                <>
+                    <p className="text-sm mb-4">
+                        {result.list ? `You're unsubscribed from ${result.list}.` : `You won't get any more marketing email from ${result.workspaceName}.`}
+                    </p>
+                    <a className="text-sm text-primary-dark underline" href={`/subscriptions/${encodeURIComponent(result.preferencesToken)}`}>
+                        Manage your email preferences
+                    </a>
+                </>
+            ) : (
+                <Button type="button" className="!w-auto" loading={busy} disabled={busy} onClick={() => void run()}>
+                    Unsubscribe
+                </Button>
+            )}
+        </PublicPage>
+    );
+}
+
+/** A signup form. */
+export function SignupFormPage({ formUid }: { formUid: string }) {
+    const [form, setForm] = useState<PublicForm | null>(null);
+    const [values, setValues] = useState<Record<string, unknown>>({});
+    const [trap, setTrap] = useState("");
+    const [result, setResult] = useState<FormResult | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [busy, setBusy] = useState(false);
+
+    useEffect(() => {
+        getPublicForm(formUid)
+            .then(setForm)
+            .catch((err) => setError(err instanceof ApiRequestError && err.status === 404 ? "This form isn't available." : "The form could not be loaded."));
+    }, [formUid]);
+
+    async function submit(event: FormEvent): Promise<void> {
+        event.preventDefault();
+        setBusy(true);
+        try {
+            const answer: FormResult = await submitForm(formUid, values, trap);
+            if (answer.result === "subscribed" && answer.redirectUrl) {
+                window.location.assign(answer.redirectUrl);
+                return;
+            }
+            setResult(answer);
+            setError(null);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "The form could not be sent. Please try again.");
+        } finally {
+            setBusy(false);
+        }
+    }
+
+    return (
+        <PublicPage title={form?.title ?? "Sign up"}>
+            {error && <Alert>{error}</Alert>}
+            {result && <p className="text-sm">{result.message}</p>}
+            {form && !result && (
+                <form onSubmit={submit} className="flex flex-col gap-3" aria-label={form.title}>
+                    {form.description && <p className="text-sm text-text-muted">{form.description}</p>}
+                    {form.fields.map((field) => (
+                        <SignupField key={field.target} field={field} value={values[field.target]} onChange={(value) => setValues((current) => ({ ...current, [field.target]: value }))} />
+                    ))}
+                    <div aria-hidden="true" className="absolute -left-[9999px] h-0 overflow-hidden">
+                        <label>
+                            Leave this empty
+                            <input name={HONEYPOT_NAME} tabIndex={-1} autoComplete="off" value={trap} onChange={(event) => setTrap(event.target.value)} />
+                        </label>
+                    </div>
+                    <Button type="submit" className="!w-auto self-start" loading={busy} disabled={busy}>
+                        Sign up
+                    </Button>
+                </form>
+            )}
+        </PublicPage>
+    );
+}
+
+/** One field of a signup form, with an input suited to its type. */
+function SignupField({ field, value, onChange }: { field: PublicFormField; value: unknown; onChange: (value: unknown) => void }) {
+    const id: string = `signup-${field.target}`;
+    const label: string = `${field.label}${field.required ? " *" : ""}`;
+    if (field.type === "boolean") {
+        return (
+            <label className="text-sm flex items-center gap-2">
+                <input type="checkbox" checked={value === true} onChange={(event) => onChange(event.target.checked)} />
+                {label}
+            </label>
+        );
+    }
+    if (field.type === "multi_select") {
+        const chosen: string[] = Array.isArray(value) ? (value as string[]) : [];
+        return (
+            <fieldset className="text-sm">
+                <legend className="font-medium mb-1">{label}</legend>
+                {(field.options ?? []).map((option) => (
+                    <label key={option.value} className="flex items-center gap-2">
+                        <input
+                            type="checkbox"
+                            checked={chosen.includes(option.value)}
+                            onChange={(event) => onChange(event.target.checked ? [...chosen, option.value] : chosen.filter((entry) => entry !== option.value))}
+                        />
+                        {option.label}
+                    </label>
+                ))}
+            </fieldset>
+        );
+    }
+    return (
+        <FormField label={label} htmlFor={id}>
+            {field.type === "select" ? (
+                <select id={id} className={INPUT_CLASS} value={(value as string) ?? ""} required={field.required} onChange={(event) => onChange(event.target.value)}>
+                    <option value="">Choose&hellip;</option>
+                    {(field.options ?? []).map((option) => (
+                        <option key={option.value} value={option.value}>
+                            {option.label}
+                        </option>
+                    ))}
+                </select>
+            ) : (
+                <input
+                    id={id}
+                    className={INPUT_CLASS}
+                    type={field.type === "email" ? "email" : field.type === "number" ? "number" : field.type === "date" ? "date" : "text"}
+                    required={field.required}
+                    value={(value as string) ?? ""}
+                    onChange={(event) => onChange(event.target.value)}
+                />
+            )}
+        </FormField>
+    );
+}

package/apps/shared/components/public/honeypot.ts

@@ -0,0 +1,7 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** The name of a signup form's hidden trap field - the server's `HONEYPOT_FIELD`: people never fill it in, simple bots do. */
+export const HONEYPOT_NAME = "website";