@semics-tech/emdash-esign 0.0.0-stage → 1.0.0-rc.1

package/dist/ts/astro/lib/call.d.ts

@@ -0,0 +1,56 @@
+import { type PublicPluginRuntimeLocals } from "emdash/plugin-utils";
+/** Plugin ID (manifest slug) of the sandboxed E-sign core. */
+export declare const ESIGN_PLUGIN_ID = "semics-esign";
+export type PublicRouteMethod = "GET" | "POST";
+export interface PublicRouteCall {
+    /** Route name as declared in the core, e.g. `public/events`. A leading slash is ignored. */
+    path: string;
+    /** Defaults to GET. */
+    method?: PublicRouteMethod;
+    /** JSON body for POST; query parameters for GET. */
+    body?: unknown;
+    /** Defaults to the context's plugin id, then the E-sign core. */
+    pluginId?: string;
+}
+/** The parts of the Astro global the helper needs; pass `Astro` itself. */
+export interface PublicRouteContext {
+    locals: PublicPluginRuntimeLocals | null | undefined;
+    url: URL;
+    /**
+     * The visitor's request (`Astro.request`). Its user agent, client-IP headers and `cf` object are
+     * carried onto the in-process call, so the core's `requestMeta` (audit IP and user agent, per-IP
+     * rate limits) sees the visitor as a direct call would. Cookies, credentials and the Referer never are.
+     */
+    request?: Request;
+    /** The core's plugin id when it is not the default slug (the integration's `pluginId`). */
+    pluginId?: string;
+    /** Injected for tests. Defaults to the global `fetch`. */
+    fetch?: typeof fetch;
+}
+export interface PublicRouteIssue {
+    path: string;
+    code: string;
+}
+export interface PublicRouteError {
+    code: string;
+    message: string;
+    /** Input validation issues, when the route reported them (`BAD_REQUEST`). */
+    issues?: PublicRouteIssue[];
+}
+export type PublicRouteResult<T> = {
+    ok: true;
+    data: T;
+    via: "in-process" | "fetch";
+} | {
+    ok: false;
+    error: PublicRouteError;
+    via: "in-process" | "fetch";
+};
+/**
+ * The only way UI code calls the core. Dispatches in-process through
+ * `getPublicPluginApiRouteHandler(Astro.locals)` (Spike S2: reaches sandboxed public routes on the
+ * workerd runner), and falls back to `fetch(Astro.url.origin + route)` when the in-process handler
+ * isn't on `locals`. Never throws: every failure comes back as `{ ok: false, error }` so components
+ * can render a defined error state.
+ */
+export declare function callPublicRoute<T = unknown>(ctx: PublicRouteContext, call: PublicRouteCall): Promise<PublicRouteResult<T>>;

package/dist/ts/astro/lib/call.js

@@ -0,0 +1,138 @@
+// i18n-ignore-file: these errors are for developers (the UI shows its own text by error code, T102).
+import { getPublicPluginApiRouteHandler } from "emdash/plugin-utils";
+/** Plugin ID (manifest slug) of the sandboxed E-sign core. */
+export const ESIGN_PLUGIN_ID = "semics-esign";
+/**
+ * The only way UI code calls the core. Dispatches in-process through
+ * `getPublicPluginApiRouteHandler(Astro.locals)` (Spike S2: reaches sandboxed public routes on the
+ * workerd runner), and falls back to `fetch(Astro.url.origin + route)` when the in-process handler
+ * isn't on `locals`. Never throws: every failure comes back as `{ ok: false, error }` so components
+ * can render a defined error state.
+ */
+export async function callPublicRoute(ctx, call) {
+    const method = call.method ?? "GET";
+    const path = call.path.replace(/^\/+/, "");
+    const pluginId = call.pluginId ?? ctx.pluginId ?? ESIGN_PLUGIN_ID;
+    const handler = getPublicPluginApiRouteHandler(ctx.locals);
+    const via = handler ? "in-process" : "fetch";
+    const unsafeKey = method === "GET" ? tokenLikeKey(call.body) : undefined;
+    if (unsafeKey !== undefined) {
+        return {
+            ok: false,
+            error: {
+                code: "TOKEN_IN_QUERY",
+                message: `"${unsafeKey}" looks like a token; send it with POST, never in a URL`,
+            },
+            via,
+        };
+    }
+    const request = buildRequest(ctx.url.origin, pluginId, method, path, call.body, ctx.request);
+    if (handler) {
+        try {
+            return toResult(await handler(pluginId, method, path, request), "in-process");
+        }
+        catch (error) {
+            return failure(error, "in-process");
+        }
+    }
+    try {
+        const response = await (ctx.fetch ?? fetch)(request);
+        const envelope = (await response.json().catch(() => ({})));
+        if (!response.ok && envelope.success !== false) {
+            return {
+                ok: false,
+                error: { code: `HTTP_${response.status}`, message: response.statusText || "Request failed" },
+                via: "fetch",
+            };
+        }
+        return toResult(envelope, "fetch");
+    }
+    catch (error) {
+        return failure(error, "fetch");
+    }
+}
+/** Tokens must never travel in URLs (BUILD-PLAN R10), so GET bodies may not carry token-like keys. */
+const TOKEN_LIKE = /^(t|.*token.*|.*receipt.*|.*secret.*|.*otp.*)$/i;
+function tokenLikeKey(body) {
+    if (!body || typeof body !== "object")
+        return undefined;
+    return Object.keys(body).find((key) => TOKEN_LIKE.test(key));
+}
+/**
+ * Headers never copied from the visitor's request: credentials (a public route has no use for them),
+ * the Referer (the sign page's own URL holds the token), and the framing of the page's own body.
+ */
+const NOT_FORWARDED = new Set([
+    "authorization",
+    "connection",
+    "content-length",
+    "content-type",
+    "cookie",
+    "expect",
+    "host",
+    "keep-alive",
+    "proxy-authorization",
+    "referer",
+    "transfer-encoding",
+    "upgrade",
+    "x-emdash-request",
+]);
+function forwardedHeaders(incoming) {
+    const headers = new Headers();
+    incoming?.headers.forEach((value, key) => {
+        if (!NOT_FORWARDED.has(key.toLowerCase()))
+            headers.set(key, value);
+    });
+    return headers;
+}
+/** On Cloudflare the host trusts `cf-connecting-ip` only on a request that carries a `cf` object. */
+function withCf(request, incoming) {
+    const cf = incoming?.cf;
+    if (cf !== undefined && cf !== null)
+        Object.defineProperty(request, "cf", { value: cf, enumerable: true });
+    return request;
+}
+function buildRequest(origin, pluginId, method, path, body, incoming) {
+    const headers = forwardedHeaders(incoming);
+    const url = new URL(`/_emdash/api/plugins/${encodeURIComponent(pluginId)}/${path}`, origin);
+    if (method === "GET") {
+        if (body && typeof body === "object") {
+            for (const [key, value] of Object.entries(body)) {
+                for (const item of Array.isArray(value) ? value : [value]) {
+                    if (item !== undefined && item !== null)
+                        url.searchParams.append(key, String(item));
+                }
+            }
+        }
+        return withCf(new Request(url, { method, headers }), incoming);
+    }
+    headers.set("content-type", "application/json");
+    const json = body === undefined ? undefined : JSON.stringify(body);
+    return withCf(new Request(url, { method, headers, body: json }), incoming);
+}
+/** A sandboxed route's own refusal (`{ ok: false, error, issues? }`), which the host wraps as a success. */
+function refusal(data) {
+    if (!data || typeof data !== "object")
+        return undefined;
+    const body = data;
+    if (body.ok !== false || typeof body.error?.code !== "string")
+        return undefined;
+    return {
+        code: body.error.code,
+        message: typeof body.error.message === "string" ? body.error.message : "Request failed",
+        ...(Array.isArray(body.issues) ? { issues: body.issues } : {}),
+    };
+}
+function toResult(envelope, via) {
+    if (envelope.success === true) {
+        const refused = refusal(envelope.data);
+        return refused ? { ok: false, error: refused, via } : { ok: true, data: envelope.data, via };
+    }
+    const code = typeof envelope.error?.code === "string" ? envelope.error.code : "ROUTE_CALL_FAILED";
+    const message = typeof envelope.error?.message === "string" ? envelope.error.message : "Request failed";
+    return { ok: false, error: { code, message }, via };
+}
+function failure(error, via) {
+    const message = error instanceof Error ? error.message : "Request failed";
+    return { ok: false, error: { code: "ROUTE_CALL_FAILED", message }, via };
+}

package/dist/ts/integration/index.d.ts

@@ -0,0 +1,32 @@
+export interface EsignIntegrationOptions {
+    /**
+     * The sandboxed core's plugin id. Defaults to the slug (`semics-esign`, npm installs).
+     * Registry installs get an `r_…` id: pass it here.
+     */
+    pluginId?: string;
+}
+/** The slice of Astro's integration API this needs (so the package takes no `astro` dependency). */
+interface SetupArgs {
+    injectRoute(route: {
+        pattern: string;
+        entrypoint: string;
+        prerender?: boolean;
+    }): void;
+    updateConfig(config: {
+        vite: {
+            plugins: unknown[];
+        };
+    }): void;
+}
+export interface EsignAstroIntegration {
+    name: string;
+    hooks: {
+        "astro:config:setup": (args: SetupArgs) => void;
+    };
+}
+/**
+ * Astro integration: injects the signing page `/sign/[token]`, the signed-copy page `/signed/[token]` and `/verify`, all
+ * server-rendered with `Referrer-Policy: no-referrer`. Add it to `integrations` beside `emdash()`.
+ */
+export declare function esignIntegration(options?: EsignIntegrationOptions): EsignAstroIntegration;
+export default esignIntegration;

package/dist/ts/integration/index.js

@@ -0,0 +1,49 @@
+import { ESIGN_PLUGIN_ID } from "../astro/lib/call.js";
+const VIRTUAL = "virtual:semics-esign/config";
+const RESOLVED = `\0${VIRTUAL}`;
+/**
+ * Astro integration: injects the signing page `/sign/[token]`, the signed-copy page `/signed/[token]` and `/verify`, all
+ * server-rendered with `Referrer-Policy: no-referrer`. Add it to `integrations` beside `emdash()`.
+ */
+export function esignIntegration(options = {}) {
+    const pluginId = options.pluginId ?? ESIGN_PLUGIN_ID;
+    return {
+        name: "semics-esign",
+        hooks: {
+            "astro:config:setup": ({ injectRoute, updateConfig }) => {
+                injectRoute({
+                    pattern: "/sign/[token]",
+                    entrypoint: "@semics-tech/emdash-esign/astro/SignPage.astro",
+                    prerender: false,
+                });
+                injectRoute({
+                    pattern: "/signed/[token]",
+                    entrypoint: "@semics-tech/emdash-esign/astro/SignedCopyPage.astro",
+                    prerender: false,
+                });
+                injectRoute({
+                    pattern: "/_esign/start",
+                    entrypoint: "@semics-tech/emdash-esign/astro/self-serve-endpoint",
+                    prerender: false,
+                });
+                injectRoute({
+                    pattern: "/verify",
+                    entrypoint: "@semics-tech/emdash-esign/astro/VerifyPage.astro",
+                    prerender: false,
+                });
+                updateConfig({
+                    vite: {
+                        plugins: [
+                            {
+                                name: "semics-esign-config",
+                                resolveId: (id) => (id === VIRTUAL ? RESOLVED : undefined),
+                                load: (id) => id === RESOLVED ? `export const pluginId = ${JSON.stringify(pluginId)};` : undefined,
+                            },
+                        ],
+                    },
+                });
+            },
+        },
+    };
+}
+export default esignIntegration;

package/dist/ts/ui/index.d.ts

@@ -0,0 +1,6 @@
+import type { PluginDescriptor, ResolvedPlugin } from "emdash";
+/** Native UI plugin descriptor. Add to `plugins: [esignUi()]` beside the sandboxed core. */
+export declare function esignUi(): PluginDescriptor;
+/** Runtime entry: no capabilities, storage, hooks or routes. The pages come from the integration; it registers the editor block only. */
+export declare function createPlugin(): ResolvedPlugin;
+export default createPlugin;

package/dist/ts/ui/index.js

@@ -0,0 +1,35 @@
+import { definePlugin } from "emdash";
+const ID = "semics-esign-ui";
+const VERSION = "0.1.0";
+/** Native UI plugin descriptor. Add to `plugins: [esignUi()]` beside the sandboxed core. */
+export function esignUi() {
+    return {
+        id: ID,
+        version: VERSION,
+        entrypoint: "@semics-tech/emdash-esign/ui",
+        componentsEntry: "@semics-tech/emdash-esign/astro",
+    };
+}
+/** Runtime entry: no capabilities, storage, hooks or routes. The pages come from the integration; it registers the editor block only. */
+export function createPlugin() {
+    return definePlugin({
+        id: ID,
+        version: VERSION,
+        admin: {
+            portableTextBlocks: [
+                {
+                    type: "esign-request",
+                    label: "Self-serve signing form",
+                    icon: "code",
+                    description: "A form that emails the visitor a link to sign a self-serve template (E-sign Pro)",
+                    category: "E-sign",
+                    fields: [
+                        { type: "text_input", action_id: "template", label: "Template ID" },
+                        { type: "text_input", action_id: "heading", label: "Heading", initial_value: "Sign this document" },
+                    ],
+                },
+            ],
+        },
+    });
+}
+export default createPlugin;

package/emdash-plugin.jsonc

@@ -0,0 +1,144 @@
+{
+	"$schema": "./node_modules/@emdash-cms/plugin-cli/schemas/emdash-plugin.schema.json",
+
+	"slug": "semics-esign",
+	"publisher": "did:plc:mire6xkehfirmoj5pmpqgpvq",
+
+	"license": "MIT",
+	"author": { "name": "semics", "url": "https://semics.co.uk" },
+	"security": { "email": "security@semics.co.uk" },
+	"description": "Simple electronic signatures for EmDash",
+	"repo": "https://github.com/semics-uk/emdash-plugins",
+
+	// Registry listing (T103): the package page's text and images. Not part of the trust contract.
+	// The images are made by apps/playground/e2e/t103-screenshots.spec.ts (T103_WRITE=1).
+	"name": "semics E-sign",
+	"keywords": ["e-signature", "esign", "contracts", "waivers", "audit trail"],
+	"sections": {
+		"description": { "file": "listing/description.md" },
+		"installation": { "file": "listing/installation.md" },
+		"faq": { "file": "listing/faq.md" },
+		"security": { "file": "listing/security.md" }
+	},
+	"release": {
+		"requires": { "env:emdash": ">=1.2.0 <2" },
+		"artifacts": {
+			"icon": { "file": "listing/icon.png" },
+			"banner": { "file": "listing/banner.png" },
+			"screenshots": [
+				{ "file": "listing/screenshots/1-signing-page.png" },
+				{ "file": "listing/screenshots/2-signed.png" },
+				{ "file": "listing/screenshots/3-verify.png" }
+			]
+		}
+	},
+
+	// Trust contract — what runtime APIs the plugin asks for.
+	// Empty arrays mean no extra privileges beyond logging,
+	// KV, and route/hook registration. Changing these between
+	// releases requires a version bump because installed
+	// users have consented to the old contract.
+	"capabilities": ["email:send", "media:read", "media:bytes:read", "network:request"],
+	"allowedHosts": ["challenges.cloudflare.com"],
+	"storage": {
+		"templates": { "indexes": ["status", "kind", "public"] },
+		"envelopes": {
+			"indexes": [
+				"status",
+				"expiresAt",
+				"createdAt",
+				"clientId",
+				"externalRef",
+				"pdfSha256",
+				"signerEmail",
+				["status", "expiresAt"]
+			]
+		},
+		"signers": { "indexes": ["envelopeId", "email", "copyTokenHash"], "uniqueIndexes": ["tokenHash"] },
+		"snapshots": { "indexes": ["envelopeId"] },
+		"artifacts": { "indexes": ["envelopeId", ["envelopeId", "kind"]] },
+		"audit_events": { "indexes": ["envelopeId", ["envelopeId", "seq"]] },
+		"clients": { "indexes": ["createdAt"] },
+		"nonces": { "indexes": ["expiresAt"], "uniqueIndexes": ["nonce"] },
+		"outbox": { "indexes": [["status", "nextAttemptAt"]] }
+	},
+	"admin": {
+		// Block Kit pages, answered by the private `admin` route (src/admin/pages.ts).
+		"pages": [
+			{ "path": "/envelopes", "label": "Envelopes", "icon": "file" },
+			{ "path": "/templates", "label": "Templates", "icon": "file-text" },
+			{ "path": "/integrations", "label": "Integrations", "icon": "link" },
+			{ "path": "/settings", "label": "Settings", "icon": "gear" }
+		],
+		"settingsSchema": {
+			"senderName": {
+				"label": "Sender name",
+				"type": "string",
+				"description": "Shown as the sender of signing emails."
+			},
+			"consentVersion": {
+				"label": "Consent version",
+				"type": "string",
+				"default": "1",
+				"description": "Recorded with every signature; bump when the wording changes."
+			},
+			"consentWording": {
+				"label": "Consent wording",
+				"type": "string",
+				"multiline": true,
+				"default": "I agree to use electronic records and an electronic signature for this document.",
+				"description": "Shown to signers before they sign."
+			},
+			"expiryDays": { "label": "Envelope expiry (days)", "type": "number", "default": 30, "min": 1, "max": 365 },
+			"reminderCadenceDays": {
+				"label": "Reminder cadence (days)",
+				"type": "number",
+				"default": 3,
+				"min": 1,
+				"max": 30,
+				"description": "Pro: automatic reminders."
+			},
+			"otpDefault": {
+				"label": "Require email code by default",
+				"type": "boolean",
+				"default": false,
+				"description": "Pro: one-time code before signing."
+			},
+			"otpContractTemplates": {
+				"label": "Require email code for contract templates",
+				"type": "boolean",
+				"default": true,
+				"description": "Pro."
+			},
+			"retentionPersonalDataMonths": {
+				"label": "Keep personal data (months)",
+				"type": "number",
+				"default": 12,
+				"min": 1,
+				"max": 120
+			},
+			"retentionSignedRecordsYears": {
+				"label": "Keep signed records (years)",
+				"type": "number",
+				"default": 7,
+				"min": 1,
+				"max": 50
+			},
+			"turnstileSiteKey": { "label": "Turnstile site key", "type": "string" },
+			"turnstileSecretKey": { "label": "Turnstile secret key", "type": "secret" },
+			"integrationMasterKey": {
+				"label": "Integration master key",
+				"type": "secret",
+				"description": "Client secrets are derived from this key; it is never shown again."
+			},
+			// The secret an E-sign Pro build stores (T067). Declared here so a site switched back to Free
+			// can still read its settings: EmDash refuses to list an encrypted value the manifest does not
+			// declare as a secret. Free never reads it.
+			"licenceKey": {
+				"type": "secret",
+				"label": "Licence key (Pro)",
+				"description": "Used by E-sign Pro only; the Free edition ignores it. Stored encrypted."
+			}
+		}
+	}
+}

package/package.json

@@ -1,6 +1,72 @@
 {
   "name": "@semics-tech/emdash-esign",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-rc.1",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./sandbox": "./dist/plugin.mjs",
+    "./ui": {
+      "import": "./dist/ts/ui/index.js",
+      "types": "./dist/ts/ui/index.d.ts"
+    },
+    "./integration": {
+      "import": "./dist/ts/integration/index.js",
+      "types": "./dist/ts/integration/index.d.ts"
+    },
+    "./astro": "./src/astro/index.js",
+    "./astro/lib/*": "./src/astro/lib/*.ts",
+    "./i18n": "./src/i18n/index.ts",
+    "./astro/SignPage.astro": "./src/astro/SignPage.astro",
+    "./astro/SigningCeremony.astro": "./src/astro/SigningCeremony.astro",
+    "./astro/SignedCopyPage.astro": "./src/astro/SignedCopyPage.astro",
+    "./astro/VerifyDocument.astro": "./src/astro/VerifyDocument.astro",
+    "./astro/VerifyPage.astro": "./src/astro/VerifyPage.astro",
+    "./astro/SelfServeBlock.astro": "./src/astro/SelfServeBlock.astro",
+    "./astro/self-serve-endpoint": "./src/astro/self-serve-endpoint.ts",
+    "./client": "./src/client/index.ts"
+  },
+  "files": [
+    "dist",
+    "src/astro",
+    "src/i18n",
+    "src/client",
+    "emdash-plugin.jsonc"
+  ],
+  "peerDependencies": {
+    "emdash": ">=1.2.0 <2"
+  },
+  "devDependencies": {
+    "@emdash-cms/plugin-cli": "0.13.3",
+    "@emdash-cms/plugin-test": "0.2.8",
+    "@vitest/coverage-v8": "4.1.12",
+    "emdash": "1.2.0",
+    "typescript": "^5.9.0",
+    "vitest": "^4.1.12",
+    "@semics-tech/shared": "0.1.0-rc.1"
+  },
+  "description": "Simple electronic signatures for EmDash",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semics-uk/emdash-plugins",
+    "directory": "packages/esign"
+  },
+  "scripts": {
+    "validate": "emdash-plugin validate",
+    "build": "emdash-plugin build && tsc -p tsconfig.ui.json",
+    "dev": "emdash-plugin dev",
+    "typecheck": "tsc --noEmit",
+    "test:coverage": "vitest run --coverage --reporter=dot",
+    "test:verify": "vitest run --reporter=dot ${CI:+--coverage}",
+    "verify": "pnpm run validate && pnpm run typecheck && pnpm run test:verify && pnpm run build",
+    "test": "emdash-plugin validate && vitest run",
+    "bundle": "emdash-plugin bundle",
+    "login": "emdash-plugin login",
+    "registry:publish": "emdash-plugin publish",
+    "release:setup": "emdash-plugin release setup"
+  }
 }

package/src/astro/SelfServeBlock.astro

@@ -0,0 +1,84 @@
+---
+// The `esign-request` Portable Text block (BUILD-PLAN 3.4): a form for a self-serve template (E-sign Pro).
+// The visitor gives a name, an email address and any template fields and passes the security check; the
+// signing link is then emailed to that address and is never shown here. A site on Free, or a template
+// that is not offered, renders a short unavailable note instead of a form.
+import { pickLocale, translator } from "../i18n/index.ts";
+import { START_PATH, anchorOf, loadSelfServe, readStartState, startMessage } from "./lib/self-serve.ts";
+
+interface Props {
+	node?: { template?: string; heading?: string };
+	template?: string;
+	heading?: string;
+	/** The page's language (T102); else `Astro.currentLocale` (a Portable Text block), else British English. */
+	locale?: string;
+}
+
+const props = Astro.props as Props;
+const templateId = (props.node?.template ?? props.template ?? "").trim();
+const locale = pickLocale(props.locale, Astro.currentLocale);
+const { t, lang, dir } = translator(locale);
+const heading = props.node?.heading ?? props.heading ?? t("selfServe.heading");
+const view = templateId ? await loadSelfServe(Astro, { templateId }) : ({ state: "unavailable" } as const);
+const notice = readStartState(Astro.url, templateId);
+const returnTo = `${Astro.url.pathname}${Astro.url.search}`;
+const id = anchorOf(templateId || "none");
+---
+{
+	templateId && (
+		<section id={id} class="semics-esign semics-esign-request" lang={lang} dir={dir} aria-labelledby={`${id}-title`} data-testid="esign-request">
+			<h2 id={`${id}-title`}>{heading}</h2>
+			{
+				view.state === "unavailable" ? (
+					<p data-testid="esign-request-unavailable">{t("selfServe.unavailable")}</p>
+				) : notice.sent ? (
+					<p role="status" data-testid="esign-request-sent">{t("selfServe.sent")}</p>
+				) : (
+					<form method="post" action={START_PATH} data-testid="esign-request-form">
+						{notice.code && (
+							<p role="alert" data-testid="esign-request-error">
+								{startMessage(notice.code, locale)}
+							</p>
+						)}
+						{view.template.description && <p>{view.template.description}</p>}
+						<input type="hidden" name="templateId" value={templateId} />
+						<input type="hidden" name="returnTo" value={returnTo} />
+						<p>
+							<label for={`${id}-name`}>{t("selfServe.name")}</label>
+							<input id={`${id}-name`} name="name" autocomplete="name" required maxlength="200" />
+						</p>
+						<p>
+							<label for={`${id}-email`}>{t("selfServe.email")}</label>
+							<input id={`${id}-email`} name="email" type="email" autocomplete="email" required maxlength="254" />
+						</p>
+						{view.template.fields.map((key) => (
+							<p>
+								<label for={`${id}-f-${key}`}>{key.replaceAll("_", " ")}</label>
+								<input id={`${id}-f-${key}`} name={`field:${key}`} required maxlength="500" />
+							</p>
+						))}
+						<p style="position:absolute;inset-inline-start:-10000px;inline-size:1px;block-size:1px;overflow:hidden" aria-hidden="true">
+							<label>
+								{t("selfServe.honeypot")}
+								<input name="website" tabindex="-1" autocomplete="off" />
+							</label>
+						</p>
+						{view.turnstileSiteKey && (
+							<>
+								<div class="cf-turnstile" data-sitekey={view.turnstileSiteKey} />
+								{/* Compact below 300 px so a 320 px screen never scrolls sideways (WCAG 1.4.10). */}
+								<script is:inline>(function (s) { var t = s && s.previousElementSibling; if (t && t.clientWidth < 300) t.setAttribute("data-size", "compact"); })(document.currentScript);</script>
+								<noscript>
+									<p>{t("selfServe.needsJs")}</p>
+								</noscript>
+								<script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
+							</>
+						)}
+						<p>{t("selfServe.note")}</p>
+						<button type="submit">{t("selfServe.button")}</button>
+					</form>
+				)
+			}
+		</section>
+	)
+}