create-nevela 0.7.1 → 0.9.1

package/template/web/components/public-form-guard.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import * as React from "react";
+import type { PublicForm } from "@/hooks/use-public-form";
+
+/** The part of Cloudflare's script this uses. */
+interface Turnstile {
+  render: (
+    element: HTMLElement,
+    options: { sitekey: string; action?: string; callback: (token: string) => void; "expired-callback": () => void; "error-callback": () => void },
+  ) => string;
+  reset: (id: string) => void;
+  remove: (id: string) => void;
+}
+
+const SITE_KEY = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? "";
+const SCRIPT = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+
+let loading: Promise<Turnstile> | null = null;
+
+/** Cloudflare's script, asked for once however many forms a visit shows. */
+function turnstile(): Promise<Turnstile> {
+  const loaded = () => (window as unknown as { turnstile?: Turnstile }).turnstile;
+  loading ??= new Promise<Turnstile>((resolve, reject) => {
+    const existing = loaded();
+    if (existing) return resolve(existing);
+    const script = document.createElement("script");
+    script.src = SCRIPT;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      const ready = loaded();
+      if (ready) resolve(ready);
+      else reject(new Error("Turnstile didn't load."));
+    };
+    script.onerror = () => {
+      // Not kept: the next form to appear tries again.
+      loading = null;
+      script.remove();
+      reject(new Error("Turnstile didn't load."));
+    };
+    document.head.appendChild(script);
+  });
+  return loading;
+}
+
+/**
+ * What a protected form carries besides its own fields. Put it inside the form:
+ *
+ * ```tsx
+ * <PublicFormGuard form={form} />
+ * ```
+ *
+ * - The honeypot: a field a person never sees or reaches, and a bot fills in.
+ * - The robot check (Cloudflare Turnstile), where the descriptor asks for it and
+ *   NEXT_PUBLIC_TURNSTILE_SITE_KEY is set. Its answer is good once, so it starts over
+ *   after every attempt. With no site key there is no widget, and the form carries the
+ *   honeypot and its token only.
+ *
+ * The form's token is the hook's to send. Nothing here is the check itself: Laravel
+ * makes every one of them.
+ */
+export function PublicFormGuard({ form, className }: { form: PublicForm; className?: string }) {
+  const { honeypot, turnstile: asked, action, attempt, robot } = form.guard;
+  const holder = React.useRef<HTMLDivElement>(null);
+  const widget = React.useRef<string | null>(null);
+  const shown = asked && SITE_KEY !== "";
+
+  // Rendered by hand, not by the script on load: moving between pages here doesn't reload
+  // the document, so a widget the script found once would not be found again.
+  React.useEffect(() => {
+    if (!shown || !holder.current) return;
+    let current = true;
+    let api: Turnstile | null = null;
+    turnstile()
+      .then((ready) => {
+        if (!current || !holder.current) return;
+        api = ready;
+        widget.current = ready.render(holder.current, {
+          sitekey: SITE_KEY,
+          // Which form this check is for. Laravel refuses a token solved for another.
+          ...(action ? { action } : {}),
+          callback: (token) => robot(token),
+          "expired-callback": () => robot(null),
+          "error-callback": () => robot(null),
+        });
+      })
+      .catch(() => robot(null));
+    return () => {
+      current = false;
+      if (api && widget.current) api.remove(widget.current);
+      widget.current = null;
+      robot(null);
+    };
+  }, [shown, action, robot]);
+
+  // A used answer is refused the second time, so a corrected form needs a new one.
+  React.useEffect(() => {
+    if (attempt === 0 || !widget.current) return;
+    const api = (window as unknown as { turnstile?: Turnstile }).turnstile;
+    api?.reset(widget.current);
+  }, [attempt]);
+
+  React.useEffect(() => {
+    if (asked && SITE_KEY === "" && process.env.NODE_ENV !== "production") {
+      console.warn("This form asks for the robot check, and NEXT_PUBLIC_TURNSTILE_SITE_KEY isn't set, so no widget is shown and Laravel will refuse it.");
+    }
+  }, [asked]);
+
+  return (
+    <>
+      {honeypot && (
+        // Off the page, and out of the way of a keyboard and a screen reader. Not `hidden`
+        // or display:none: a bot that skips those would skip this too.
+        <div aria-hidden="true" style={{ position: "absolute", left: "-10000px", top: "auto", width: 1, height: 1, overflow: "hidden" }}>
+          <label>
+            Leave this empty
+            <input type="text" name={honeypot} tabIndex={-1} autoComplete="off" defaultValue="" />
+          </label>
+        </div>
+      )}
+      {shown && <div ref={holder} className={className} />}
+    </>
+  );
+}

package/template/web/hooks/use-public-form.ts

@@ -0,0 +1,175 @@
+"use client";
+
+import * as React from "react";
+
+/** What Laravel hands a protected form before it is shown: GET /api/public/_nevela/form/<slug>. */
+interface Issued {
+  token: string | null;
+  honeypot: string | null;
+  minSeconds: number;
+  turnstile: boolean;
+  /** The name the robot check is made under. Cloudflare returns it, and Laravel checks it is this form's. */
+  action?: string | null;
+}
+
+export interface PublicForm {
+  /** Give this to the form: `<form onSubmit={form.submit}>`. */
+  submit: (event: React.FormEvent<HTMLFormElement>) => void;
+  /** Being sent. */
+  pending: boolean;
+  /** Sent, and taken. */
+  sent: boolean;
+  /** What went wrong, where it isn't about one field: the robot check, too many tries, no connection. */
+  error: string | null;
+  /** What is wrong with a field, by its name. */
+  errors: Record<string, string>;
+  /** Start again after a form was sent, to send another. */
+  again: () => void;
+  /** For `<PublicFormGuard form={form} />`. Not for the form itself to read. */
+  guard: {
+    honeypot: string | null;
+    turnstile: boolean;
+    action: string | null;
+    /** Goes up after every attempt: a robot token is good once, so the widget starts over. */
+    attempt: number;
+    robot: (token: string | null) => void;
+  };
+}
+
+export interface PublicFormOptions {
+  /** The record to send, from the form's fields. By default each named field, as typed, with empty ones left out. */
+  values?: (data: FormData) => Record<string, unknown>;
+  onSent?: () => void;
+}
+
+const UNREACHABLE = "That didn't send. Check your connection and try again.";
+
+/**
+ * A form anyone can send: a resource's public create, with whatever its descriptor's
+ * "protect" asks for.
+ *
+ * ```tsx
+ * const form = usePublicForm("contact-messages");
+ *
+ * <form onSubmit={form.submit}>
+ *   <input name="email" />
+ *   {form.errors.email}
+ *   <PublicFormGuard form={form} />
+ *   <button disabled={form.pending}>Send</button>
+ *   {form.error}
+ * </form>
+ * ```
+ *
+ * It asks Laravel for the form's token when the form is shown and again after every
+ * attempt, sends the fields with it, and sorts the answer: a problem with a field goes to
+ * `errors` under that field's name, and anything else to `error`. The checks themselves
+ * are Laravel's. Nothing here decides who is let through.
+ *
+ * A resource with no "protect" works too: there is no token to fetch, and the form is
+ * sent as it is.
+ */
+export function usePublicForm(slug: string, { values, onSent }: PublicFormOptions = {}): PublicForm {
+  const [issued, setIssued] = React.useState<Issued | null>(null);
+  const [attempt, setAttempt] = React.useState(0);
+  const [pending, setPending] = React.useState(false);
+  const [sent, setSent] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [errors, setErrors] = React.useState<Record<string, string>>({});
+  const robot = React.useRef<string | null>(null);
+  const sending = React.useRef(false);
+
+  // The token says when the form was handed out, so it is asked for when the form
+  // appears, and a fresh one after each attempt.
+  React.useEffect(() => {
+    let current = true;
+    fetch(`/api/public/_nevela/form/${encodeURIComponent(slug)}`, { cache: "no-store", headers: { Accept: "application/json" } })
+      .then((response) => (response.ok ? (response.json() as Promise<Issued>) : null))
+      .then((form) => {
+        if (current) setIssued(form);
+      })
+      .catch(() => {
+        if (current) setIssued(null);
+      });
+    return () => {
+      current = false;
+    };
+  }, [slug, attempt]);
+
+  const setRobot = React.useCallback((token: string | null) => {
+    robot.current = token;
+  }, []);
+
+  const submit = React.useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (sending.current) return;
+      const element = event.currentTarget;
+      const data = new FormData(element);
+      const body: Record<string, unknown> = values ? { ...values(data) } : {};
+      if (!values) {
+        for (const [name, value] of data.entries()) {
+          // A file is uploaded on its own, and its key sent here: see the public uploads route.
+          if (typeof value === "string" && value !== "") body[name] = value;
+        }
+      }
+      // The field no person sees goes as it is, whatever `values` kept: it is how a bot is known.
+      if (issued?.honeypot) {
+        const bait = data.get(issued.honeypot);
+        if (typeof bait === "string" && bait !== "") body[issued.honeypot] = bait;
+      }
+      if (issued?.token) body._form = issued.token;
+      if (robot.current) body._turnstile = robot.current;
+
+      sending.current = true;
+      setPending(true);
+      setError(null);
+      setErrors({});
+      fetch(`/api/public/${encodeURIComponent(slug)}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
+        body: JSON.stringify(body),
+      })
+        .then(async (response) => {
+          if (response.ok) {
+            element.reset();
+            setSent(true);
+            onSent?.();
+            return;
+          }
+          const answer = (await response.json().catch(() => null)) as { error?: string; issues?: { path?: string; message?: string }[] } | null;
+          const byField: Record<string, string> = {};
+          const rest: string[] = [];
+          for (const issue of answer?.issues ?? []) {
+            if (!issue.message) continue;
+            // The first thing wrong with a field is the one to fix first.
+            if (issue.path && element.elements.namedItem(issue.path)) byField[issue.path] ??= issue.message;
+            else rest.push(issue.path ? `${issue.path}: ${issue.message}` : issue.message);
+          }
+          setErrors(byField);
+          setError(Object.keys(byField).length > 0 && rest.length === 0 ? null : (rest[0] ?? answer?.error ?? UNREACHABLE));
+        })
+        .catch(() => setError(UNREACHABLE))
+        .finally(() => {
+          sending.current = false;
+          robot.current = null;
+          setPending(false);
+          // Whatever happened, the next attempt needs a new token and a new robot check.
+          setAttempt((count) => count + 1);
+        });
+    },
+    [slug, issued, values, onSent],
+  );
+
+  const again = React.useCallback(() => {
+    setSent(false);
+    setError(null);
+    setErrors({});
+  }, []);
+
+  const guard = React.useMemo(
+    () => ({ honeypot: issued?.honeypot ?? null, turnstile: issued?.turnstile ?? false, action: issued?.action ?? null, attempt, robot: setRobot }),
+    [issued, attempt, setRobot],
+  );
+
+  return { submit, pending, sent, error, errors, again, guard };
+}

package/template/web/lib/access.ts

@@ -51,8 +51,10 @@ export interface PermissionFeature {
   /** The first half of a permission: "products". */
   key: string;
   name: string;
-  /** The second halves that mean something for it: create, view, edit, delete. */
+  /** The second halves that mean something for it: create, view, edit, delete, then the resource's own actions. */
   actions: string[];
+  /** What a resource's own actions are called, by second half: { accept: "Accept" }. */
+  labels?: Record<string, string>;
 }
 
 export interface PermissionModule {

package/template/web/lib/dashboard.ts

@@ -1,3 +1,4 @@
+import { actionsOf, type ResourceAction } from "@/lib/extras";
 import { cache } from "react";
 import { notFound, redirect } from "next/navigation";
 import { can, type Policy, type PolicyAction, type Resource } from "@flaredev/core";
@@ -96,6 +97,15 @@ export async function adminPermissions(resourceName: string): Promise<Record<Exc
   return { read: read!, create: create!, update: update!, delete: remove! };
 }
 
+/**
+ * The resource's own actions that the current person may run, for drawing their buttons.
+ * Each is a permission by name. Laravel checks it again when the button is pressed.
+ */
+export async function allowedActions(resourceName: string): Promise<ResourceAction[]> {
+  const { session, may } = await dashboardSession();
+  return session ? actionsOf(resourceName).filter((action) => may(action.permission)) : [];
+}
+
 const stores = new Map<string, ResourceStore>();
 
 /** CRUD store for a resource by name (404 for unknown names). */

package/template/web/lib/extras.ts

@@ -0,0 +1,105 @@
+// What a resource has beyond its fields, which Flare's descriptor has no place for.
+//
+// Written by `php nevela generate` into resources/index.ts as `extras`, by resource
+// name, from the descriptors in the Laravel app. Read through here, on the server: a
+// client component is handed what it needs of it as props.
+
+import * as registry from "@/resources";
+
+/** A field an action asks for, as the descriptor has it. */
+export interface ActionField {
+  kind: "string" | "text" | "int" | "float" | "boolean" | "date" | "datetime" | "enum";
+  format?: string;
+  options?: string[];
+  required?: boolean;
+  label?: string;
+  maxLength?: number;
+}
+
+/**
+ * Something that can be done to a record, or to the list, beyond creating, editing and
+ * deleting: the descriptor's "actions" section. What it does is a class in the Laravel
+ * app; this is what the dashboard needs to offer it.
+ */
+export interface ResourceAction {
+  /** Its name in the descriptor and in the address: "accept". */
+  key: string;
+  /** The permission that allows it: "internship_applications.accept". */
+  permission: string;
+  label: string;
+  /** A lucide icon name. */
+  icon?: string;
+  /** Where its button is: on one record, or on the list as a whole. */
+  on: "record" | "collection";
+  /** A question asked before it runs. */
+  confirm?: string;
+  /** Field values a record must have for the action to apply to it. */
+  when?: Record<string, string | number | boolean | null>;
+  /** What it asks for, in a sheet. */
+  fields?: Record<string, ActionField>;
+  /** A record action that can also be run on the rows selected in the table. */
+  many?: boolean;
+}
+
+interface ResourceExtras {
+  actions?: Record<string, Omit<ResourceAction, "key">>;
+  /** The date-and-time field its records are published by (the descriptor's "publish"). */
+  publish?: string;
+  /** Where on the site its public records are a blog: "/blog". */
+  blog?: string;
+  /** What its public form checks, and the address it has proved (the descriptor's "protect" and "confirm"). */
+  form?: ResourceForm;
+}
+
+/** A resource's public form, as far as the dashboard needs to know of it. */
+export interface ResourceForm {
+  protect?: { turnstile?: boolean; honeypot?: boolean; minSeconds?: number; email?: string };
+  /** The field holding an address that is proved by a link sent to it. Until then a record is "Not confirmed". */
+  confirm?: string;
+}
+
+/** What a record with a publish date is: on the site, waiting for its time, or neither. */
+export type PublishState = "published" | "scheduled" | "draft";
+
+export const PUBLISH_LABELS: Record<PublishState, string> = { published: "Published", scheduled: "Scheduled", draft: "Draft" };
+
+/** An app generated before there were any has no `extras` in its registry, and none to have. */
+const extras = ((registry as { extras?: unknown }).extras ?? {}) as Record<string, ResourceExtras>;
+
+/** A resource's actions, in the order the descriptor gives them. */
+export function actionsOf(resourceName: string): ResourceAction[] {
+  return Object.entries(extras[resourceName]?.actions ?? {}).map(([key, action]) => ({ ...action, key }));
+}
+
+/** The field a resource's records are published by, if it has one. */
+export function publishFieldOf(resourceName: string): string | undefined {
+  return extras[resourceName]?.publish;
+}
+
+/** What a resource's public form checks and confirms, if its descriptor says either. */
+export function formOf(resourceName: string): ResourceForm | undefined {
+  return extras[resourceName]?.form;
+}
+
+/** Which of the three a record is, from its publish date and the time now. */
+export function publishState(value: unknown, now: Date = new Date()): PublishState {
+  if (typeof value !== "string" || value === "") return "draft";
+  return new Date(value).getTime() <= now.getTime() ? "published" : "scheduled";
+}
+
+/** Links for the site's header to what the resources have put on the site: the blog. */
+export function siteLinks(): { label: string; href: string }[] {
+  return Object.values(extras).flatMap((entry) => (entry.blog ? [{ label: "Blog", href: entry.blog }] : []));
+}
+
+/** Whether an action applies to a record as it is now. Laravel asks the same before running it. */
+export function actionApplies(action: ResourceAction, record: Record<string, unknown>): boolean {
+  return Object.entries(action.when ?? {}).every(([field, wanted]) => {
+    const value = record[field] ?? null;
+    if (wanted === null) return value === null;
+    if (value === null) return false;
+    // A yes/no value may arrive as 1 or 0.
+    if (typeof wanted === "boolean") return (value === true || value === 1 || value === "1") === wanted;
+    return String(value) === String(wanted);
+  });
+}

package/template/web/lib/files.ts

@@ -17,5 +17,19 @@ export function fileUrl(key: string, rendition?: string): string {
   return `/api/_nevela/files/${path.split("/").map(encodeURIComponent).join("/")}`;
 }
 
+/**
+ * Whether a key is a private file's. Such a file has no address of its own: asked for by
+ * key, Laravel answers that there is no such file. It is fetched through its record.
+ */
+export const isPrivateKey = (key: string) => key.startsWith("private/");
+
+/**
+ * Where a private file is fetched from: the record it belongs to and the field it is in.
+ * Laravel hands it over only to someone signed in who may view that record.
+ */
+export function privateFileUrl(resourceSlug: string, id: string, fieldKey: string): string {
+  return `/api/_nevela/private/${encodeURIComponent(resourceSlug)}/${encodeURIComponent(id)}/${encodeURIComponent(fieldKey)}`;
+}
+
 /** "products/image/2026/10/<uuid>-kettle.webp" → "kettle.webp" */
 export const fileName = (key: string) => key.slice(key.lastIndexOf("/") + 1).replace(/^[0-9a-f-]{36}-/, "");

package/template/web/lib/laravel.ts

@@ -34,6 +34,17 @@ export async function callerHeaders(): Promise<Record<string, string>> {
   if (agent) sent["X-Nevela-User-Agent"] = agent.slice(0, 500);
   const address = (incoming.get("x-forwarded-for") ?? "").split(",")[0]?.trim() || incoming.get("x-real-ip");
   if (address) sent["X-Nevela-Ip"] = address.replace(/^::ffff:/, "");
+  // That one is for showing: the first entry of X-Forwarded-For is whatever the request
+  // came with, and anyone can send one. The address a visitor is *counted* by (the public
+  // routes' throttle) has to be one they couldn't have made up. Each proxy adds the
+  // address it was called from to the end of the list, so with one proxy in front of this
+  // app the last entry is the visitor as that proxy saw them. NEVELA_TRUSTED_PROXIES says
+  // how many proxies are in front: 1 unless set, and 0 when this app is reached directly,
+  // in which case nobody's word is taken and visitors are counted together.
+  const proxies = Number.parseInt(process.env.NEVELA_TRUSTED_PROXIES ?? "1", 10);
+  const chain = (incoming.get("x-forwarded-for") ?? "").split(",").map((part) => part.trim()).filter(Boolean);
+  const counted = Number.isInteger(proxies) && proxies > 0 ? chain[chain.length - proxies] : undefined;
+  sent["X-Nevela-Client"] = counted ? counted.replace(/^::ffff:/, "") : "unknown";
   // Proves to Laravel that this is the dashboard speaking for a browser, and not someone
   // calling the API with made-up headers. The same value is in the Laravel app's .env.
   if (process.env.NEVELA_PROXY_SECRET) sent["X-Nevela-Proxy-Secret"] = process.env.NEVELA_PROXY_SECRET;
@@ -80,3 +91,52 @@ export async function laravel(path: string, { method = "GET", body, token }: Lar
   }
   return { status: response.status, ok: response.ok, body: parsed };
 }
+
+export interface PublicRequest {
+  /** How long an answer may be reused, in seconds. Default 300. `false` keeps it until one of its tags is revalidated. */
+  revalidate?: number | false;
+  /** What makes it stale. `resourceTag("Post")` from lib/cache: the dashboard revalidates it when a post is created, changed, deleted or restored. */
+  tags?: string[];
+}
+
+/**
+ * Read what a resource's "public" section opens, for a page anyone can visit.
+ *
+ * ```ts
+ * const { body } = await laravelPublic("posts?sort=-publishedAt", { tags: [resourceTag("Post")] });
+ * ```
+ *
+ * Unlike `laravel()` it carries nothing of the person asking: no token and none of their
+ * headers. The answer is the same for everyone, so it is cached and shared between
+ * visitors, and a published post appears as soon as the dashboard saves it, because
+ * saving revalidates the resource's tag.
+ *
+ * `path` is under `{api}/public/`. To send a form (a public create), post to
+ * `/api/public/<slug>` from the browser: see app/api/[...path]/route.ts.
+ */
+export async function laravelPublic(path: string, { revalidate = 300, tags = [] }: PublicRequest = {}): Promise<LaravelResponse> {
+  let response: Response;
+  try {
+    response = await fetch(`${API_URL}/public/${path.replace(/^\/+/, "")}`, {
+      headers: {
+        Accept: "application/json",
+        // The site reading its own data, to show to many: Laravel doesn't count it against
+        // a visitor's allowance, which it otherwise would against this server's address.
+        ...(process.env.NEVELA_PROXY_SECRET ? { "X-Nevela-Proxy-Secret": process.env.NEVELA_PROXY_SECRET } : {}),
+      },
+      next: { revalidate, tags },
+    });
+  } catch {
+    return { status: 502, ok: false, body: { error: "Can't reach the API." } };
+  }
+  const text = response.status === 204 ? "" : await response.text();
+  let parsed: unknown = null;
+  if (text) {
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      parsed = { error: `Laravel answered ${response.status} with something that isn't JSON.` };
+    }
+  }
+  return { status: response.status, ok: response.ok, body: parsed };
+}

package/template/web/lib/rich.ts

@@ -0,0 +1,79 @@
+// Rich text: a text field whose value is HTML, written in an editor.
+//
+// Laravel is what makes it safe. Whatever a form, a script or a file sends is cleaned
+// there against a list of tags (config/nevela.php, rich_text) before it is stored, and
+// again when it is read, so the HTML that reaches this app is HTML that may be shown.
+// Nothing here is a security boundary; tidy() below only keeps the editor neat.
+
+/** The tags the editor's toolbar makes, which are the ones Laravel keeps by default. */
+const KEPT = new Set(["p", "br", "strong", "em", "s", "a", "h2", "h3", "ul", "ol", "li", "blockquote"]);
+const SAME_AS: Record<string, string> = { b: "strong", i: "em", strike: "s", del: "s" };
+const DROPPED = new Set(["script", "style", "iframe", "object", "embed", "noscript", "template", "svg", "math", "head", "title", "meta", "link"]);
+
+/**
+ * Whether a field holds rich text. The generated descriptor says so with `rich: true`
+ * on a text field, a key Flare doesn't know and carries along untouched.
+ */
+export function isRich(def: { kind: string }): boolean {
+  return def.kind === "text" && (def as { rich?: boolean }).rich === true;
+}
+
+/** The words alone, on one line: what a table cell shows of a rich text value. */
+export function richToText(html: string, limit = 0): string {
+  const text = html
+    .replace(/<(br|\/p|\/h[1-6]|\/li|\/blockquote)\b[^>]*>/gi, " ")
+    .replace(/<[^>]*>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"')
+    .replace(/&#0*39;|&apos;/g, "'")
+    .replace(/&#(\d+);/g, (_, code: string) => String.fromCodePoint(Number(code)))
+    .replace(/&amp;/g, "&")
+    .replace(/\s+/g, " ")
+    .trim();
+  return limit > 0 && text.length > limit ? `${text.slice(0, limit - 1).trimEnd()}…` : text;
+}
+
+/** Whether there is anything in it to read. An editor that was opened and left holds `<p><br></p>`. */
+export function isBlankHtml(html: string): boolean {
+  return richToText(html) === "";
+}
+
+/**
+ * What was pasted, with only what the toolbar could have made: a page copied from a
+ * word processor arrives with fonts, colours and spans that would be stripped on save
+ * anyway, and look wrong until then. Browser only.
+ */
+export function tidyHtml(html: string): string {
+  const body = new DOMParser().parseFromString(html, "text/html").body;
+  const escape = (text: string) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const write = (node: Node): string => {
+    if (node.nodeType === Node.TEXT_NODE) return escape(node.textContent ?? "");
+    if (node.nodeType !== Node.ELEMENT_NODE) return "";
+    const element = node as Element;
+    const raw = element.tagName.toLowerCase();
+    const tag = SAME_AS[raw] ?? raw;
+    if (DROPPED.has(tag)) return "";
+    const inner = Array.from(element.childNodes).map(write).join("");
+    if (!KEPT.has(tag)) return inner;
+    if (tag === "br") return "<br>";
+    if (tag === "a") {
+      const href = element.getAttribute("href") ?? "";
+      return /^(https?:|mailto:|\/|#)/i.test(href.trim()) ? `<a href="${escape(href.trim()).replace(/"/g, "&quot;")}">${inner}</a>` : inner;
+    }
+    return `<${tag}>${inner}</${tag}>`;
+  };
+  return Array.from(body.childNodes).map(write).join("");
+}
+
+/** An address as it was typed, made into one a link can have. Empty when it can't be one. */
+export function linkAddress(typed: string): string {
+  const address = typed.trim();
+  if (address === "") return "";
+  if (/^(https?:\/\/|mailto:|\/|#)/i.test(address)) return address;
+  // Any other scheme (javascript:, data:) is not somewhere a link goes.
+  if (/^[a-z][a-z0-9+.-]*:/i.test(address) && !/^[^/:]+:\d/.test(address)) return "";
+  if (/^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(address)) return `mailto:${address}`;
+  return `https://${address}`;
+}

package/template/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nevela-web",
-  "version": "0.7.1",
+  "version": "0.9.1",
   "private": true,
   "type": "module",
   "scripts": {