@eifi1/ui-kit 0.29.0 → 0.31.0

package/src/landing/page-seo.ts

@@ -0,0 +1,251 @@
+import { useEffect } from "react";
+
+/**
+ * Search-engine helpers for the public landing page (docs/landing-demo-harmonization.md
+ * §4.3): the hook that declares a page's canonical URL, title, description and JSON-LD,
+ * and the two pure helpers each app's SEO test is built from.
+ */
+
+/**
+ * Declares the current page's canonical URL — and optionally its title and meta
+ * description — while the calling component is mounted (feedback #129).
+ *
+ * Client-side because there is nowhere else to put it: the SPA is served by
+ * Caddy's `try_files … /index.html`, so every route shares one static head.
+ * Googlebot renders JS and reads the canonical from the RENDERED DOM, which is
+ * what makes this work; non-rendering scrapers (WhatsApp, Slack) only ever see
+ * index.html's static tags, which is why those stay in place as the fallback.
+ *
+ * The href is resolved against `window.location.origin` rather than hardcoded, so
+ * a preview deployment or the VPS host stays self-referential instead of pointing
+ * every copy of the app at production.
+ *
+ * The cleanup matters for the same reason as in {@link useNoIndex}: an SPA
+ * navigation from the landing page into the app must not leave the landing's
+ * canonical (or title) behind on an app page.
+ *
+ * 0.31 (§4.3): keksdose's `usePageSeo` (shared/hooks/use-page-seo.ts), verbatim. The
+ * landing calls it with `canonicalPath: "/"` on both `/` and `/welcome`, so the two URLs
+ * of one page are one result; there are no per-language URLs and no hreflang.
+ */
+export function usePageSeo({
+  canonicalPath,
+  title,
+  description,
+  jsonLd,
+}: {
+  canonicalPath: string;
+  title?: string;
+  description?: string;
+  /** Structured data for this page, as the object (not a string). Injected as an
+   *  `application/ld+json` DATA BLOCK — a script element the browser never executes,
+   *  which is also why it can be added here rather than in `index.html`: the CSP
+   *  carries a HASH of the one inline script that file is allowed to have, and
+   *  `csp-inline-script.test.ts` fails the build on a second one (live #250). */
+  jsonLd?: Record<string, unknown>;
+}): void {
+  useEffect(() => {
+    const link = document.createElement("link");
+    link.rel = "canonical";
+    link.href = new URL(canonicalPath, window.location.origin).toString();
+    document.head.appendChild(link);
+
+    const previousTitle = document.title;
+    if (title) document.title = title;
+
+    // The description tag ships in index.html, so upsert rather than append —
+    // two `meta[name=description]` tags would be a coin flip for the scraper.
+    const meta = description
+      ? document.head.querySelector<HTMLMetaElement>('meta[name="description"]')
+      : null;
+    const previousDescription = meta?.content;
+    if (meta && description) meta.content = description;
+
+    let ld: HTMLScriptElement | null = null;
+    if (jsonLd) {
+      ld = document.createElement("script");
+      ld.type = "application/ld+json";
+      ld.textContent = JSON.stringify(jsonLd);
+      document.head.appendChild(ld);
+    }
+
+    return () => {
+      link.remove();
+      ld?.remove();
+      if (title) document.title = previousTitle;
+      if (meta && previousDescription !== undefined) meta.content = previousDescription;
+    };
+    // `jsonLd` is built inline by the caller, so it is a new object every render and
+    // cannot be a dependency — it is derived from `title`/`description`, which are.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [canonicalPath, title, description]);
+}
+
+/* ── The SEO test's helpers ──────────────────────────────────────────────── */
+
+/** What a search result shows of the landing, in one language. */
+export interface SeoCopy {
+  /** The page title (`landing.seo.title`): "Keksdose — envelope budgeting". */
+  title: string;
+  /** The meta description. */
+  description: string;
+  /** The product name the title carries, before or after its tagline. */
+  brand: string;
+}
+
+/** The width budgets, as characters. */
+export interface SeoCopyLimits {
+  /** Default 60: a result's title is cut around 580px. */
+  maxTitle?: number;
+  /** Default 155: a snippet is cut around 920px. */
+  maxDescription?: number;
+}
+
+export type SeoCopyProblemCode =
+  | "title-empty"
+  | "description-empty"
+  | "title-too-long"
+  | "description-too-long"
+  | "title-without-brand"
+  | "description-repeats-title";
+
+/** One thing wrong with a language's copy. `message` is for the test's failure output. */
+export interface SeoCopyProblem {
+  code: SeoCopyProblemCode;
+  message: string;
+}
+
+/** Characters as a reader counts them: code points, so an emoji or a rare CJK character
+ *  is one, not two UTF-16 units. */
+const length = (text: string) => Array.from(text).length;
+
+const escapeRegExp = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+/** The separators a title puts between the brand and its tagline. */
+const SEPARATOR = "\\s*[—–\\-|:·•]\\s*";
+
+/** The title without the brand and its separator, or `null` when the brand is in
+ *  neither place. */
+function taglineOf(title: string, brand: string): string | null {
+  const name = escapeRegExp(brand.trim());
+  const leading = new RegExp(`^${name}${SEPARATOR}`, "i");
+  if (leading.test(title)) return title.replace(leading, "").trim();
+  const trailing = new RegExp(`${SEPARATOR}${name}$`, "i");
+  if (trailing.test(title)) return title.replace(trailing, "").trim();
+  return null;
+}
+
+/**
+ * What is wrong with one language's search-result copy (§4.3) — an empty list when
+ * nothing is. keksdose's landing-seo.test.ts (live #305), made reusable:
+ *
+ * - the title fits `maxTitle` characters (60) and the description `maxDescription`
+ *   (155) — conservative stand-ins for Google's pixel budgets; German is the language
+ *   most likely to blow through them, and what gets cut is always the end;
+ * - the title carries the brand, before or after its tagline ("Keksdose — …");
+ * - the description does not open with the title's tagline again — a snippet that
+ *   repeats the line above it spends its first forty characters saying nothing new.
+ *
+ * ```ts
+ * for (const [locale, bundle] of Object.entries(LOCALES)) {
+ *   it(`fits ${locale} into a search result`, () => {
+ *     expect(seoCopyProblems({ ...bundle.landing.seo, brand: "Keksdose" })).toEqual([]);
+ *   });
+ * }
+ * ```
+ */
+export function seoCopyProblems(copy: SeoCopy, limits: SeoCopyLimits = {}): SeoCopyProblem[] {
+  const { maxTitle = 60, maxDescription = 155 } = limits;
+  const title = copy.title.replace(/\s+/g, " ").trim();
+  const description = copy.description.replace(/\s+/g, " ").trim();
+  const problems: SeoCopyProblem[] = [];
+  if (!title) problems.push({ code: "title-empty", message: "the title is empty" });
+  if (!description) problems.push({ code: "description-empty", message: "the description is empty" });
+  if (length(title) > maxTitle) {
+    problems.push({
+      code: "title-too-long",
+      message: `the title is ${length(title)} characters, over ${maxTitle}: "${title}"`,
+    });
+  }
+  if (length(description) > maxDescription) {
+    problems.push({
+      code: "description-too-long",
+      message: `the description is ${length(description)} characters, over ${maxDescription}: "${description}"`,
+    });
+  }
+  if (!title) return problems;
+  const tagline = taglineOf(title, copy.brand);
+  if (tagline === null) {
+    problems.push({
+      code: "title-without-brand",
+      message: `the title does not start or end with "${copy.brand}" and a separator: "${title}"`,
+    });
+  }
+  const repeated = (tagline ?? title).toLowerCase();
+  if (repeated && description.toLowerCase().startsWith(repeated)) {
+    problems.push({
+      code: "description-repeats-title",
+      message: `the description opens with the title's tagline "${tagline ?? title}"`,
+    });
+  }
+  return problems;
+}
+
+/** The five named references and the numeric ones — enough for a meta tag's text. */
+function decodeEntities(text: string): string {
+  const named: Record<string, string> = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
+  return text.replace(/&(#x[\da-f]+|#\d+|[a-z]+);/gi, (whole, ref: string) => {
+    if (ref[0] === "#") {
+      const code = ref[1] === "x" || ref[1] === "X" ? parseInt(ref.slice(2), 16) : parseInt(ref.slice(1), 10);
+      return Number.isFinite(code) ? String.fromCodePoint(code) : whole;
+    }
+    return named[ref.toLowerCase()] ?? whole;
+  });
+}
+
+/** A tag's attributes, names lower-cased; values double-, single- or un-quoted. */
+function attributesOf(tag: string): Map<string, string> {
+  const found = new Map<string, string>();
+  for (const m of tag.matchAll(/([^\s=/<>"']+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+))/g)) {
+    found.set(m[1]!.toLowerCase(), m[2] ?? m[3] ?? m[4] ?? "");
+  }
+  return found;
+}
+
+/**
+ * The `content` of the first `<meta>` in `html` that `selector` picks, whitespace
+ * collapsed and entities decoded — or `undefined` when there is none. For each app's
+ * parity test (§4.3): `index.html`'s static description and `og:` tags must equal the
+ * default language's strings, because a scraper that runs no script (WhatsApp, Slack)
+ * sees only those.
+ *
+ * `selector` names attributes, as in CSS — `meta[name="description"]`,
+ * `[property="og:title"]` or just `property="og:description"` — and every one named must
+ * match. A `RegExp` is matched against the tag's source instead (keksdose's form).
+ * String parsing, not a DOM: the test runs under `@vitest-environment node`.
+ *
+ * ```ts
+ * expect(metaContent(html, 'meta[name="description"]')).toBe(de.landing.seo.description);
+ * ```
+ */
+export function metaContent(html: string, selector: string | RegExp): string | undefined {
+  const wanted =
+    typeof selector === "string"
+      ? Array.from(selector.matchAll(/([\w:.-]+)\s*=\s*(?:"([^"]*)"|'([^']*)')/g), (m) => [
+          m[1]!.toLowerCase(),
+          m[2] ?? m[3] ?? "",
+        ])
+      : null;
+  if (wanted !== null && wanted.length === 0) {
+    throw new Error(`metaContent: the selector names no attribute: ${selector as string}`);
+  }
+  const pattern = selector instanceof RegExp ? new RegExp(selector.source, selector.flags.replace("g", "")) : null;
+  for (const tag of html.match(/<meta\b[^>]*>/gi) ?? []) {
+    const attrs = attributesOf(tag);
+    const matches = pattern ? pattern.test(tag) : wanted!.every(([name, value]) => attrs.get(name!) === value);
+    if (!matches) continue;
+    const content = attrs.get("content");
+    return content === undefined ? undefined : decodeEntities(content).replace(/\s+/g, " ").trim();
+  }
+  return undefined;
+}

package/src/landing/public-header.tsx

@@ -0,0 +1,120 @@
+import type { ReactNode } from "react";
+
+import { Button, PHONE_QUERY } from "../components/ui";
+import { useMediaQuery } from "../hooks/use-media-query";
+import { TopBar } from "../shell/top-bar";
+import type { TopBarProps } from "../shell/top-bar";
+import { TopBarBrand } from "../shell/top-bar-brand";
+import { useAccessAction } from "./access";
+import type { AccessChoice } from "./access";
+import { useLandingLabels } from "./landing-labels";
+import type { LandingLabels } from "./landing-labels";
+import type { LandingSession } from "./landing-actions";
+
+/** The header's brand: what `TopBarBrand` draws. */
+export interface PublicHeaderBrand {
+  /** The brand mark — an SVG or an `<img alt="">`. */
+  logo: ReactNode;
+  /** The product name beside it, and the link's accessible name. */
+  name: ReactNode;
+  /** See `TopBarBrand`. Default `sm`: the logo alone on a phone. */
+  collapseBelow?: "sm" | "md" | false;
+}
+
+export interface PublicHeaderProps extends Omit<TopBarProps, "brand" | "actions" | "children"> {
+  brand: PublicHeaderBrand;
+  /** Where the brand links. Default `/` without a session and `/welcome` with one —
+   *  `/` would resume into the app, `/welcome` is always the landing (§3.1). */
+  homeHref?: string;
+  session: LandingSession;
+  access: AccessChoice;
+  /** "Sign in". Default `/login`. */
+  signInHref?: string;
+  /** "Open app" for a real session — the resume target. Default `/`, which resumes
+   *  through `RootEntry`. */
+  openAppHref?: string;
+  /** "Continue the demo" for a demo session. Default `/demo`, which continues a live
+   *  demo (§3.1). */
+  demoHref?: string;
+  /** The app's `LanguageMenu`, before the actions. */
+  languageMenu?: ReactNode;
+  /** The app's `ThemeToggle`, before the language menu. */
+  themeToggle?: ReactNode;
+  labels?: Partial<LandingLabels>;
+}
+
+/**
+ * The header of every public page (docs/landing-demo-harmonization.md §4.1): the
+ * landing, the auth pages, the legal pages and the 404 — keksdose's `LandingHeader`, on
+ * the kit's `TopBar` and `TopBarBrand`, with its hard-coded teal turned into `--brand`.
+ *
+ * | session | actions |
+ * |---|---|
+ * | none | Sign in (secondary, hidden below `sm`), **Request access** (primary) |
+ * | demo | Continue the demo (secondary), **Request access** (primary) |
+ * | user | **Open app** (primary) |
+ *
+ * A demo session is not "signed in" here: it is still offered access, which is the point
+ * of the demo (§5.6). On a phone (`PHONE_QUERY`) the actions take the kit's `sm` size, so
+ * the brand mark, the two controls and two actions fit 390px; "Sign in" gives way below
+ * `sm` as in keksdose — the sign-in page is one tap away from "Request access" anyway.
+ */
+export function PublicHeader({
+  brand,
+  homeHref,
+  session,
+  access,
+  signInHref = "/login",
+  openAppHref = "/",
+  demoHref = "/demo",
+  languageMenu,
+  themeToggle,
+  labels: labelsProp,
+  className,
+  ...rest
+}: PublicHeaderProps) {
+  const labels = useLandingLabels(labelsProp);
+  const accessLink = useAccessAction(access, labelsProp);
+  const phone = useMediaQuery(PHONE_QUERY, false);
+  const size = phone ? "sm" : "md";
+  const home = homeHref ?? (session === "none" ? "/" : "/welcome");
+
+  const actions =
+    session === "user" ? (
+      <Button href={openAppHref} variant="brand" size={size}>
+        {labels.openApp}
+      </Button>
+    ) : (
+      <>
+        {session === "demo" ? (
+          <Button href={demoHref} variant="secondary" size={size}>
+            {labels.continueDemo}
+          </Button>
+        ) : (
+          <Button href={signInHref} variant="secondary" size={size} className="max-sm:hidden">
+            {labels.signIn}
+          </Button>
+        )}
+        <Button href={accessLink.href} variant="brand" size={size}>
+          {accessLink.label}
+        </Button>
+      </>
+    );
+
+  return (
+    <TopBar
+      {...rest}
+      className={className}
+      brand={<TopBarBrand logo={brand.logo} name={brand.name} to={home} collapseBelow={brand.collapseBelow} />}
+      actions={
+        <>
+          {themeToggle}
+          {languageMenu}
+          <span data-slot="public-header-actions" className="ms-1 flex items-center gap-1.5 sm:gap-2">
+            {actions}
+          </span>
+        </>
+      }
+    />
+  );
+}

package/src/landing/routing.tsx

@@ -0,0 +1,209 @@
+import { useEffect } from "react";
+import type { ReactNode } from "react";
+import { Navigate, Outlet, useLocation } from "react-router";
+
+import { readStored, writeStored } from "../lib/safe-storage";
+import type { LandingSession } from "./landing-actions";
+
+/**
+ * The public routes' logic (docs/landing-demo-harmonization.md §3): what `/` shows,
+ * which pages a session skips, and the page a session resumes on — keksdose's
+ * `RootEntry`, `RedirectIfAuthed` and use-last-visited-page.ts, for every app.
+ * Router-aware (react-router), so they belong to the `./shell` entry.
+ */
+
+/* ── ?next= ──────────────────────────────────────────────────────────────── */
+
+/** The query parameter that carries "where I was actually trying to go" through the
+ *  sign-in bounce (keksdose's `NEXT_PARAM`). */
+export const NEXT_PARAM = "next";
+
+/**
+ * A `?next=` value that is safe to navigate to, or null.
+ *
+ * Same-origin PATHS only, decided by the URL PARSER rather than by string prefix —
+ * this is the open-redirect check, and it is the reason this lives in one place
+ * instead of at each call site.
+ *
+ * The prefix version ("starts with `/`, does not start with `//`") let two shapes
+ * through that the browser resolves cross-origin, because the WHATWG parser does not
+ * read them as text: a backslash after the leading slash counts as a second slash for
+ * a special scheme, so `/\evil.example` resolves to `https://evil.example/`; and tab,
+ * LF and CR are STRIPPED anywhere in the input before parsing, so `/<TAB>/evil.example`
+ * becomes `//evil.example`. Asking the same parser the browser will use closes every
+ * such shape at once, including ones nobody has thought of yet, and it normalises what
+ * comes back instead of echoing the caller's spelling.
+ *
+ * keksdose's (shared/hooks/use-last-visited-page.ts), verbatim but for the fallback
+ * origin.
+ */
+export function safeNextPath(raw: string | null | undefined): string | null {
+  if (!raw) return null;
+  const base = typeof window !== "undefined" ? window.location.origin : "https://kit.invalid";
+  try {
+    const url = new URL(raw, base);
+    if (url.origin !== base) return null;
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return null;
+  }
+}
+
+/* ── The last visited page (§3.2) ────────────────────────────────────────── */
+
+/** A path to leave out: a string is the path and everything under it (`/demo` is
+ *  `/demo` and `/demo/ended`; `/` is only `/`), a RegExp is tested on the pathname. */
+export type PathPattern = string | RegExp;
+
+/**
+ * The pages never recorded as a resume target (§3.2): the landing (`/`, `/welcome`), the
+ * auth pages, the demo's own (`/demo*`) and the legal pages. The 404 has no path of its
+ * own — call {@link useLastVisitedPage} inside the signed-in layout, as keksdose does,
+ * and it never sees one. The app adds its own one-shot routes (keksdose:
+ * `/banks/callback`, `/join`, `/share-target`) through `exclude`.
+ */
+export const DEFAULT_LAST_VISITED_EXCLUDES: readonly PathPattern[] = Object.freeze([
+  "/",
+  "/welcome",
+  "/login",
+  "/register",
+  "/forgot-password",
+  "/reset-password",
+  "/verify-email",
+  "/demo",
+  "/impressum",
+  "/privacy",
+  "/terms",
+]);
+
+function matchesPath(pathname: string, pattern: PathPattern): boolean {
+  if (typeof pattern !== "string") return new RegExp(pattern.source, pattern.flags.replace("g", "")).test(pathname);
+  if (pattern === "/") return pathname === "/";
+  const base = pattern.endsWith("/") ? pattern.slice(0, -1) : pattern;
+  return pathname === base || pathname.startsWith(`${base}/`);
+}
+
+/** Whether `pathname` is one of the defaults or the app's `exclude`. */
+function isExcluded(pathname: string, exclude: readonly PathPattern[]): boolean {
+  return [...DEFAULT_LAST_VISITED_EXCLUDES, ...exclude].some((pattern) => matchesPath(pathname, pattern));
+}
+
+export interface LastVisitedPageOptions {
+  /** The device key: `<app>.lastVisitedPage` (§3.2), one per app on the origin. */
+  key: string;
+  /** The app's own paths to leave out, ON TOP of {@link DEFAULT_LAST_VISITED_EXCLUDES}. */
+  exclude?: readonly PathPattern[];
+  /** `false` records nothing — while the session is still being restored, say. */
+  enabled?: boolean;
+}
+
+/**
+ * Remember the page a session is on (path and query), on every navigation, so `/` — a
+ * revisit, a fresh sign-in, the installed PWA, whose `start_url` is `/` — resumes there
+ * (§3.2, keksdose feedback #59). Device-local, in `localStorage` under `key`; a blocked
+ * storage records nothing.
+ *
+ * Call it once in the signed-in layout. The excluded paths are never written, so a
+ * one-shot page (a bank callback, an invitation link) never becomes the place the next
+ * launch opens on.
+ */
+export function useLastVisitedPage({ key, exclude = [], enabled = true }: LastVisitedPageOptions): void {
+  const { pathname, search } = useLocation();
+  // Decided here, so the effect depends on the answer and not on an `exclude` array the
+  // caller likely builds inline.
+  const skip = !enabled || isExcluded(pathname, exclude);
+  useEffect(() => {
+    if (skip) return;
+    writeStored(key, pathname + search);
+  }, [key, pathname, search, skip]);
+}
+
+/**
+ * The page {@link useLastVisitedPage} remembered under `key` — checked by
+ * {@link safeNextPath}, so a value someone planted in storage cannot leave the origin —
+ * or `fallback` (default `null`) when there is none or storage is blocked. A string
+ * fallback narrows the answer to a string, for react-router's `to`.
+ */
+export function readLastVisitedPage(key: string, fallback: string): string;
+export function readLastVisitedPage(key: string, fallback?: null): string | null;
+export function readLastVisitedPage(key: string, fallback: string | null = null): string | null {
+  return safeNextPath(readStored(key)) ?? fallback;
+}
+
+/** Forget the remembered page — on an explicit sign-out, so the next account does not
+ *  resume on the previous one's page. */
+export function clearLastVisitedPage(key: string): void {
+  if (typeof window === "undefined") return;
+  try {
+    window.localStorage.removeItem(key);
+  } catch {
+    // storage blocked: there is nothing to forget
+  }
+}
+
+/* ── RootEntry ───────────────────────────────────────────────────────────── */
+
+export interface RootEntryProps {
+  /** Without a session `/` is the landing; with one (real or demo) it resumes. */
+  session: LandingSession;
+  /** The remembered page — `readLastVisitedPage(key)`. */
+  resumePath?: string | null;
+  /** The landing page element. */
+  landing: ReactNode;
+  /** The app's home: where a session goes with nothing to resume (keksdose `/budget`,
+   *  kastlan and Kurvenschmiede `/dashboard`). */
+  home: string;
+}
+
+/**
+ * The `/` route (§3.1): the landing for a visitor, and for a session — real or demo —
+ * the last visited page, else the app's home. Indexed and canonical `/` for the visitor;
+ * a crawler never has a session, so for it `/` is stable.
+ *
+ * keksdose showed a session with nothing remembered the landing; the contract sends it
+ * home instead, because a session at `/` came to use the app. The landing stays one tap
+ * away at `/welcome`, where the signed-in brand link points.
+ */
+export function RootEntry({ session, resumePath, landing, home }: RootEntryProps) {
+  if (session === "none") return <>{landing}</>;
+  const resume = safeNextPath(resumePath);
+  return <Navigate to={resume && resume !== "/" ? resume : home} replace />;
+}
+
+/* ── RedirectIfAuthed ────────────────────────────────────────────────────── */
+
+export interface RedirectIfAuthedProps {
+  session: LandingSession;
+  /**
+   * Let a DEMO session through (§5.6): on `/login`, `/register` and the app's invitation
+   * pages, so a demo visitor can sign in or accept an invitation — a successful one
+   * replaces the demo session. Default `false`: on `/demo` a live demo continues instead
+   * of starting a second one (§5.2), and on `/forgot-password` a demo has no password.
+   */
+  allowDemo?: boolean;
+  /** Where a redirected session goes: the resume target —
+   *  `readLastVisitedPage(key, home)`. A safe `?next=` goes first. */
+  fallback: string;
+  /** The page. Left out, an `<Outlet />`: the component is a layout route around the
+   *  public pages, as in keksdose. */
+  children?: ReactNode;
+}
+
+/**
+ * Public pages a session skips (§3.1): a signed-in visitor at `/login` goes back into
+ * the app, to a safe `?next=` when the URL carries one (a share invitation or a push
+ * deep link opened with a live session in another tab — keksdose) and else to
+ * `fallback`.
+ *
+ * A demo session passes where `allowDemo` says so (§5.6). Mount one wrapper with
+ * `allowDemo` around `/login`, `/register` and the invitation pages, and one without
+ * around `/demo` (and `/forgot-password`).
+ */
+export function RedirectIfAuthed({ session, allowDemo = false, fallback, children }: RedirectIfAuthedProps) {
+  const { search } = useLocation();
+  if (session === "none" || (session === "demo" && allowDemo)) {
+    return children === undefined ? <Outlet /> : <>{children}</>;
+  }
+  const next = safeNextPath(new URLSearchParams(search).get(NEXT_PARAM));
+  return <Navigate to={next ?? fallback} replace />;
+}