@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/landing/page-seo.ts

@@ -1,261 +0,0 @@
-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.
- */
-
-/** What {@link usePageSeo} declares for a page. */
-export interface PageSeo {
-  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>;
-}
-
-/**
- * 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(seo: PageSeo): void {
-  usePageSeoIf(seo);
-}
-
-/**
- * @internal {@link usePageSeo}, or nothing for `null` — for a component that declares a
- * page only sometimes (`PublicPage`'s `seo`): hooks cannot be called conditionally, so the
- * switch is the argument, as `useNoIndex(active)` has it.
- */
-export function usePageSeoIf(seo: PageSeo | null): void {
-  const canonicalPath = seo?.canonicalPath;
-  const title = seo?.title;
-  const description = seo?.description;
-  const jsonLd = seo?.jsonLd;
-  useEffect(() => {
-    if (canonicalPath === undefined) return;
-    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

@@ -1,121 +0,0 @@
-import type { ReactNode } from "react";
-
-import { Button } from "../components/button";
-import { usePhoneLayout } from "../hooks/use-breakpoint";
-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";
-import type { LabelOverride } from "../i18n/kit-labels";
-
-/** 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?: LabelOverride<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). In the phone layout (`usePhoneLayout()`) 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 = usePhoneLayout();
-  const size = phone ? "sm" : "md";
-  const home = homeHref ?? (session === "none" ? "/" : "/welcome");
-
-  const actions =
-    session === "user" ? (
-      <Button href={openAppHref} variant="accent" 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="accent" 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/public-page.tsx

@@ -1,106 +0,0 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
-
-import { cn } from "../lib/cn";
-import { useNoIndex } from "../hooks/use-noindex";
-import { PublicFooter } from "./landing-sections";
-import { usePageSeoIf, type PageSeo } from "./page-seo";
-
-export interface PublicPageProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
-  /** The app's public header — the one a signed-out visitor already sees on the landing
-   *  (`PublicHeader`, keksdose's `LandingHeader`, Kurvenschmiede's). */
-  header?: ReactNode;
-  /** Default: `<PublicFooter />`, the three legal links (§3.3: one click away from every
-   *  page a visitor can reach). Pass your own `PublicFooter` for a tagline; `null` for none. */
-  footer?: ReactNode;
-  /** The page's heading. */
-  title: ReactNode;
-  /** One or two sentences under the title: what the page is. */
-  description?: ReactNode;
-  /** Above the title — the app's "← Back" link (`<TextLink icon={ArrowLeft}>`). */
-  back?: ReactNode;
-  /** Beside the title from `sm` up, under it on a phone: the page's own controls (a
-   *  region and a month picker on keksdose's /prices). */
-  actions?: ReactNode;
-  /**
-   * What search engines are told, and it has no default on purpose: a public page is
-   * either one to find — then it names its canonical path (and title, description,
-   * structured data), through {@link usePageSeo} — or one to keep out of the index
-   * (`"noindex"`: a 404, a page a link was sent for). `null` declares nothing, for a page
-   * that is not the page: a preview inside another (the showcase).
-   */
-  seo: PageSeo | "noindex" | null;
-  /** The column. `"wide"` (default) is the landing's sections' width, for tiles and
-   *  tables; `"prose"` the legal pages' reading column. */
-  width?: "wide" | "prose";
-  /** Default `h1`; a lower level for a page shown inside another (a preview), as the
-   *  landing's sections take one. */
-  headingAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-  /** `false` draws the column as a `<div>` instead of `<main>`, for a host that has its
-   *  own `<main>`. Default true. */
-  landmark?: boolean;
-  children: ReactNode;
-}
-
-const WIDTH = { wide: "max-w-6xl", prose: "max-w-3xl" } as const;
-
-/**
- * A public page that is not the landing and not a legal page (0.51, Marcel 2026-10-26):
- * keksdose's regional price snapshot at /prices, and Kurvenschmiede's public pages. The
- * frame every public page has — the app's public header, a column, the public footer — is
- * {@link LegalPage}'s, without the legal parts: no numbered sections, no beta notice, no
- * "Back to home" of its own, and indexed unless it says otherwise.
- *
- * keksdose was about to compose it by hand (`PublicHeader` + a column + `PublicFooter` +
- * `usePageSeo`) for /prices, and Kurvenschmiede will have its next public page outside the
- * shell; each app would have drawn the frame its own way. (KS's visitor pages — /dashboard,
- * /control, /dynamics, /steering — are working screens and stay in the app shell, with
- * `VisitorLegalFooter`; this frame is not for them.)
- * The width is the landing's (`max-w-6xl`), so a link from a feature row lands on a page
- * whose edges line up with the one it came from.
- *
- * `seo` is required: a public page is found or it is not, and forgetting the canonical on
- * a page meant to be found is silent. The kit's words are none — the title, the copy and
- * the back link are the app's.
- */
-export function PublicPage({
-  header,
-  footer,
-  title,
-  description,
-  back,
-  actions,
-  seo,
-  width = "wide",
-  headingAs: Heading = "h1",
-  landmark = true,
-  className,
-  children,
-  ...rest
-}: PublicPageProps) {
-  useNoIndex(seo === "noindex");
-  usePageSeoIf(seo === "noindex" ? null : seo);
-  const Main = landmark ? "main" : "div";
-  return (
-    <div {...rest} data-slot="public-page" className={cn("flex min-h-full flex-col", className)}>
-      {header}
-      <Main className="flex-1">
-        <div data-slot="public-page-column" className={cn("mx-auto w-full px-4 py-12", WIDTH[width])}>
-          {back != null && <div className="mb-4 text-sm">{back}</div>}
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div className="min-w-0">
-              <Heading className="text-3xl font-bold tracking-tight break-words text-primary">{title}</Heading>
-              {description != null && <p className="mt-3 max-w-2xl text-lg text-secondary">{description}</p>}
-            </div>
-            {actions != null && (
-              <div data-slot="public-page-actions" className="flex shrink-0 flex-wrap items-center gap-2">
-                {actions}
-              </div>
-            )}
-          </div>
-          <div className="mt-8 space-y-8">{children}</div>
-        </div>
-      </Main>
-      {footer === undefined ? <PublicFooter /> : footer}
-    </div>
-  );
-}