@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/landing/access.ts

@@ -1,93 +0,0 @@
-import { useMemo } from "react";
-
-import { DEFAULT_LANDING_LABELS, useLandingLabels } from "./landing-labels";
-import type { LandingLabels } from "./landing-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-
-/**
- * How a visitor gets an account (docs/landing-demo-harmonization.md §2.2, §4.2).
- *
- * - `request` — every app today: registration is invitation-only, so the primary action
- *   is a mail to `support@<domain>`, answered with an invitation. There is no request
- *   form and no table. `app` names the product in the mail's subject ("Access to
- *   Kastlan"); `askCompany` adds kastlan's "Company:" line to the body.
- * - `register` — the day an app opens registration, the SAME slot becomes "Get started"
- *   → its `/register`. Nothing else on the page changes.
- *
- * One value per app, passed to every part that offers access — `PublicHeader`, `Hero`,
- * `CtaBand`, `LandingActions`, `SignInForm`, `DemoStart`, `DemoBanner`, `DemoEnded` — so
- * the switch is one line when it comes.
- */
-export type AccessChoice =
-  { kind: "request"; email: string; app?: string; askCompany?: boolean } | { kind: "register"; href: string };
-
-/** What {@link accessAction} answers: where the access action goes and what it says. */
-export interface AccessLink {
-  kind: AccessChoice["kind"];
-  /** A `mailto:` for `request`, the app's register page for `register`. */
-  href: string;
-  /** "Request access" or "Get started". */
-  label: string;
-}
-
-/** The words {@link accessAction} reads. */
-export type AccessLabels = Pick<
-  LandingLabels,
-  "requestAccess" | "getStarted" | "accessSubject" | "accessName" | "accessCompany" | "accessUse"
->;
-
-/**
- * RFC 3986 percent-encoding, stricter than `encodeURIComponent`: `!'()*` too. RFC 6068
- * would allow them in a header value, but a mail client that splits on `'` or `(` is
- * the one that breaks a subject like "Access to Ada's Garden Planner", and an encoded
- * one reads the same everywhere.
- */
-function encodeStrict(value: string): string {
-  return encodeURIComponent(value).replace(/[!'()*]/g, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`);
-}
-
-/**
- * The `mailto:` of a request (§4.2): the subject in the visitor's language ("Access to
- * <App>") and a short body to fill in — "Name:", kastlan's "Company:", "What would you
- * use it for:" — one prompt per line.
- *
- * RFC 6068: the lines are separated by CRLF (`%0D%0A`), spaces are `%20` (a `+` would be
- * read as a plus), and the address keeps its `@` but nothing else unencoded.
- */
-function mailtoHref(access: Extract<AccessChoice, { kind: "request" }>, labels: AccessLabels): string {
-  const body = [labels.accessName, ...(access.askCompany ? [labels.accessCompany] : []), labels.accessUse].join("\r\n");
-  const to = encodeStrict(access.email).replace(/%40/g, "@");
-  return `mailto:${to}?subject=${encodeStrict(labels.accessSubject(access.app))}&body=${encodeStrict(body)}`;
-}
-
-/**
- * The access action for `access`, in the language of `labels` (§4.2): "Request access"
- * as a mail to support, or "Get started" → the register page.
- *
- * Pure, so a test or an app's own button can use it; the kit's parts call
- * {@link useAccessAction}, which takes the words from the provider. The labels already
- * carry the language — there is no separate locale argument.
- */
-export function accessAction(access: AccessChoice, labels: Partial<AccessLabels> = {}): AccessLink {
-  // A key given as `undefined` keeps the English, as in every kit namespace.
-  const words: AccessLabels = { ...DEFAULT_LANDING_LABELS };
-  for (const [key, value] of Object.entries(labels)) {
-    if (value !== undefined) (words as unknown as Record<string, unknown>)[key] = value;
-  }
-  if (access.kind === "register") return { kind: "register", href: access.href, label: words.getStarted };
-  return { kind: "request", href: mailtoHref(access, words), label: words.requestAccess };
-}
-
-/** {@link accessAction} with the `landing` words of the nearest provider (then `labels`). */
-export function useAccessAction(access: AccessChoice, labels?: LabelOverride<LandingLabels>): AccessLink {
-  const words = useLandingLabels(labels);
-  // `access` is usually an inline object; its fields are what the link depends on.
-  const kind = access.kind;
-  const target = access.kind === "register" ? access.href : access.email;
-  const app = access.kind === "request" ? access.app : undefined;
-  const askCompany = access.kind === "request" ? access.askCompany === true : false;
-  return useMemo(
-    () => accessAction(kind === "register" ? { kind, href: target } : { kind, email: target, app, askCompany }, words),
-    [kind, target, app, askCompany, words],
-  );
-}

package/src/landing/landing-actions.tsx

@@ -1,97 +0,0 @@
-import type { ComponentPropsWithRef } from "react";
-
-import { cn } from "../lib/cn";
-import { Button } from "../components/button";
-import type { ButtonSize } from "../components/button-look";
-import { useAccessAction } from "./access";
-import type { AccessChoice } from "./access";
-import { useLandingLabels } from "./landing-labels";
-import type { LandingLabels } from "./landing-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-
-/**
- * Who is looking at a public page (docs/landing-demo-harmonization.md §3.1, §4.1):
- * nobody signed in, a demo session, or a real account. The app derives it from its auth
- * state — a demo is `isDemoSession(me)`.
- */
-export type LandingSession = "none" | "demo" | "user";
-
-/** keksdose's hero buttons: wider than the kit's `md` (px-5 py-2.5), the page's
- *  largest actions. */
-const LARGE = "px-5 py-2.5";
-
-export interface LandingActionsProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
-  session: LandingSession;
-  access: AccessChoice;
-  /** "Try the demo" without a session, "Continue the demo" with a demo one. Default
-   *  `/demo`, which starts a demo — or, for a live one, continues it (§3.1). `null`
-   *  (0.31.1): the app has no demo yet, and the action is left out — "Request access"
-   *  stands alone (Kurvenschmiede's 0.31 adoption). */
-  demoHref?: string | null;
-  /** "Open app" for a real session: the resume target. Default `/`, which resumes
-   *  through `RootEntry`. */
-  openAppHref?: string;
-  /** `large` (default): the hero's and the CTA band's size. Or a kit `ButtonSize`. */
-  size?: ButtonSize | "large";
-  /** `start` (default) under the hero's copy; `center` in the CTA band. */
-  align?: "start" | "center";
-  labels?: LabelOverride<LandingLabels>;
-}
-
-/**
- * The landing's action pair for the visitor's state (§4.1), shared by {@link Hero} and
- * {@link CtaBand}:
- *
- * | session | actions |
- * |---|---|
- * | none | **Request access** (primary), Try the demo |
- * | demo | **Request access** (primary), Continue the demo |
- * | user | **Open app** (primary), alone |
- *
- * keksdose showed a signed-in visitor (who reached the landing by its brand link,
- * `/welcome`) the register/demo pair, which `RedirectIfAuthed` then silently bounced
- * back into the app; one "Open app" says where it goes. "Request access" is the mail of
- * {@link accessAction}, or "Get started" once the app opens registration.
- *
- * Stacked full-width on a phone, a row from `sm` up — keksdose's layout.
- */
-export function LandingActions({
-  session,
-  access,
-  demoHref = "/demo",
-  openAppHref = "/",
-  size = "large",
-  align = "start",
-  labels: labelsProp,
-  className,
-  ...rest
-}: LandingActionsProps) {
-  const labels = useLandingLabels(labelsProp);
-  const accessLink = useAccessAction(access, labelsProp);
-  const buttonSize: ButtonSize = size === "large" ? "md" : size;
-  const extra = size === "large" ? LARGE : undefined;
-  return (
-    <div
-      {...rest}
-      data-slot="landing-actions"
-      className={cn("flex flex-col gap-3 sm:flex-row", align === "center" && "sm:justify-center", className)}
-    >
-      {session === "user" ? (
-        <Button href={openAppHref} variant="accent" size={buttonSize} className={extra}>
-          {labels.openApp}
-        </Button>
-      ) : (
-        <>
-          <Button href={accessLink.href} variant="accent" size={buttonSize} className={extra}>
-            {accessLink.label}
-          </Button>
-          {demoHref !== null && (
-            <Button href={demoHref} variant="secondary" size={buttonSize} className={extra}>
-              {session === "demo" ? labels.continueDemo : labels.tryDemo}
-            </Button>
-          )}
-        </>
-      )}
-    </div>
-  );
-}

package/src/landing/landing-labels.ts

@@ -1,59 +0,0 @@
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-
-/**
- * The kit's words on the public landing page (docs/landing-demo-harmonization.md §4.1,
- * §4.2) — the `landing` namespace of `<UiKitProvider labels>`.
- *
- * Only the GENERIC words are the kit's: the actions every app's header, hero and CTA band
- * share, the "Beta" badge, and the template of the request-access mail. The marketing
- * copy (the hero's title, the feature rows, the trust strip, the tagline) is each app's,
- * in every language it ships (§4.1 "Words").
- *
- * The demo parts and `SignInForm` read the access words from here too, so "Request
- * access" and its mail are said the same way on the landing, the sign-in page, the demo
- * start, the banner and the end page.
- */
-export interface LandingLabels {
-  /** The header's secondary action without a session; also the demo banner's and the
-   *  end page's way to an existing account. */
-  signIn: string;
-  /** The access action of an invitation-only app: a mail to support (§2.2, §4.2). */
-  requestAccess: string;
-  /** The access action once an app opens registration (`{kind: "register"}`, §4.2). */
-  getStarted: string;
-  /** The hero's and the CTA band's second action without a session. */
-  tryDemo: string;
-  /** The one action for a real session: into the app, at the resume target. */
-  openApp: string;
-  /** The secondary action for a demo session: back into the live demo. */
-  continueDemo: string;
-  /** The hero's optional badge. */
-  beta: string;
-  /** The request mail's subject, given the app's name (`access.app`): "Access to
-   *  Kastlan". `undefined` when the app named none. */
-  accessSubject: (app?: string) => string;
-  /** The request mail's body, one prompt per line; the sender writes after each. */
-  accessName: string;
-  /** Asked only where the app says so (`askCompany`, kastlan). */
-  accessCompany: string;
-  accessUse: string;
-}
-
-export const DEFAULT_LANDING_LABELS: LandingLabels = {
-  signIn: "Sign in",
-  requestAccess: "Request access",
-  getStarted: "Get started",
-  tryDemo: "Try the demo",
-  openApp: "Open app",
-  continueDemo: "Continue the demo",
-  beta: "Beta",
-  accessSubject: (app) => (app ? `Access to ${app}` : "Access request"),
-  accessName: "Name:",
-  accessCompany: "Company:",
-  accessUse: "What would you use it for:",
-};
-
-/** The `landing` namespace, resolved: English, then the provider, then `labels`. */
-export function useLandingLabels(labels?: LabelOverride<LandingLabels>): LandingLabels {
-  return useKitLabels("landing", DEFAULT_LANDING_LABELS, labels);
-}

package/src/landing/landing-sections.tsx

@@ -1,341 +0,0 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
-
-import { cn } from "../lib/cn";
-import { Chip } from "../components/chip";
-import { LegalFooter } from "../components/legal";
-import type { LegalFooterProps } from "../components/legal";
-import { LandingActions } from "./landing-actions";
-import type { LandingActionsProps } from "./landing-actions";
-import { useLandingLabels } from "./landing-labels";
-import type { LandingLabels } from "./landing-labels";
-import type { LabelOverride } from "../i18n/kit-labels";
-
-/**
- * The sections of the public landing page (docs/landing-demo-harmonization.md §4.1),
- * top to bottom: `Hero`, `FeatureRows` of `FeatureRow`, `TrustStrip`, `CtaBand`,
- * `PublicFooter` — keksdose's landing-page.tsx, taken apart.
- *
- * The kit draws the frame; every word of marketing copy is the app's. Colours are the
- * kit's tokens (`--brand`, `--text-*`, `--bg-surface`, `--border`), so keksdose's ten
- * hard-coded teal sites follow the palette now (§2.11).
- *
- * **Visuals are decorative** (§4.1): the `visual` slots are `aria-hidden` and `inert` —
- * mock UI drawn with kit tokens, never screenshots with real data, and never anything a
- * keyboard could land on. The copy beside each one carries the information. A mock's
- * amounts use the demo data's currency, so the landing shows what "Try the demo" opens.
- */
-
-type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-
-/** The decorative slot: hidden from assistive tech and out of the tab order. */
-function Visual({ children, className }: { children: ReactNode; className?: string }) {
-  return (
-    <div aria-hidden inert data-slot="landing-visual" className={cn("mx-auto w-full select-none", className)}>
-      {children}
-    </div>
-  );
-}
-
-/** The action pair's props, as `Hero` and `CtaBand` pass them on. */
-type ActionProps = Pick<LandingActionsProps, "session" | "access" | "demoHref" | "openAppHref">;
-
-/* ── Hero ────────────────────────────────────────────────────────────────── */
-
-export interface HeroProps extends Omit<ComponentPropsWithRef<"section">, "title" | "children">, ActionProps {
-  /** The page's `h1`: what the app does, in a line. */
-  title: ReactNode;
-  /** Under it: for whom, and why. */
-  subtitle?: ReactNode;
-  /** The kit's "Beta" chip above the title. */
-  beta?: boolean;
-  /** A badge of the app's own in that place; wins over `beta`. */
-  badge?: ReactNode;
-  /** Under the actions, quiet: "Free while in beta. Your data stays yours." */
-  trust?: ReactNode;
-  /** The product glimpse beside the copy (below it on a phone). Decorative. */
-  visual?: ReactNode;
-  /** Replaces the action pair ({@link LandingActions}). */
-  actions?: ReactNode;
-  /** Default `h1`; lower where the hero is embedded in another page. */
-  headingAs?: HeadingLevel;
-  labels?: LabelOverride<LandingLabels>;
-}
-
-/**
- * The top of the landing (§4.1.2): an optional "Beta" badge, the `h1`, a subtitle, the
- * action pair for the visitor's state ({@link LandingActions}: "Request access" and "Try
- * the demo", or "Open app" for a session), a trust line, and a visual. Copy left and
- * visual right from `lg` up, stacked below.
- */
-export function Hero({
-  title,
-  subtitle,
-  beta = false,
-  badge,
-  trust,
-  visual,
-  actions,
-  headingAs: Heading = "h1",
-  session,
-  access,
-  demoHref,
-  openAppHref,
-  labels: labelsProp,
-  className,
-  ...rest
-}: HeroProps) {
-  const labels = useLandingLabels(labelsProp);
-  const shownBadge =
-    badge ??
-    (beta ? (
-      // keksdose's chip, padded out to the hero's scale.
-      <Chip size="sm" tone="warning" className="px-3 py-1 font-medium">
-        {labels.beta}
-      </Chip>
-    ) : null);
-  return (
-    <section
-      {...rest}
-      data-slot="landing-hero"
-      className={cn(
-        // `grid-cols-1` below `lg` (0.32.1, Kurvenschmiede's 0.32 report): without a
-        // template the one column is `auto` and grows to the visual's longest unwrapped
-        // line — 80 px past a 360 px phone at Extra large. `minmax(0, 1fr)` holds it to
-        // the page. The same in FeatureRow and TrustStrip.
-        "mx-auto grid max-w-6xl grid-cols-1 items-center gap-12 px-4 py-16 sm:py-24",
-        visual != null && "lg:grid-cols-2",
-        className,
-      )}
-    >
-      <div>
-        {shownBadge != null && <div className="mb-4">{shownBadge}</div>}
-        <Heading className="text-4xl font-bold tracking-tight text-balance text-primary sm:text-5xl">{title}</Heading>
-        {subtitle != null && <p className="mt-4 max-w-xl text-lg text-secondary">{subtitle}</p>}
-        <div className="mt-8">
-          {actions ?? (
-            <LandingActions
-              session={session}
-              access={access}
-              demoHref={demoHref}
-              openAppHref={openAppHref}
-              labels={labelsProp}
-            />
-          )}
-        </div>
-        {trust != null && <p className="mt-4 text-sm text-muted">{trust}</p>}
-      </div>
-      {visual != null && <Visual className="max-w-sm">{visual}</Visual>}
-    </section>
-  );
-}
-
-/* ── Feature rows ────────────────────────────────────────────────────────── */
-
-export type FeatureRowsProps = ComponentPropsWithRef<"section">;
-
-/**
- * The band that holds the feature rows (§4.1.3): two to four {@link FeatureRow}s on the
- * surface colour, between hairlines. The rows alternate sides by themselves — the copy
- * of every second row moves to the end from `lg` up — so the app lists them in order
- * and nothing else.
- */
-export function FeatureRows({ className, children, ...rest }: FeatureRowsProps) {
-  return (
-    <section {...rest} data-slot="landing-feature-rows" className={cn("border-t border-subtle bg-surface", className)}>
-      <div className="mx-auto max-w-6xl px-4 py-8 sm:py-12">{children}</div>
-    </section>
-  );
-}
-
-export interface FeatureRowProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
-  /** A lucide icon (or any SVG) before the eyebrow. Decorative. */
-  icon?: ReactNode;
-  /** The small uppercase line above the heading: "Capture", "Plan". */
-  eyebrow?: ReactNode;
-  /** The row's `h2`. */
-  title: ReactNode;
-  description?: ReactNode;
-  /** Up to three short points; the first three are shown. */
-  bullets?: readonly ReactNode[];
-  /** The mock beside the copy. Decorative. */
-  visual?: ReactNode;
-  /** Default `h2`. */
-  headingAs?: HeadingLevel;
-}
-
-/**
- * One job of the app (§4.1.3), keksdose's "capture → budget → understand": an icon
- * eyebrow, the `h2`, a description, up to three bullets, and a visual on the other side.
- * Inside {@link FeatureRows} every second row puts its copy at the end (`group-even`),
- * which is keksdose's alternation without an index to pass.
- */
-export function FeatureRow({
-  icon,
-  eyebrow,
-  title,
-  description,
-  bullets,
-  visual,
-  headingAs: Heading = "h2",
-  className,
-  ...rest
-}: FeatureRowProps) {
-  const shown = bullets?.slice(0, 3) ?? [];
-  return (
-    <div
-      {...rest}
-      data-slot="landing-feature-row"
-      className={cn(
-        "group/feature grid grid-cols-1 items-center gap-8 py-10",
-        visual != null && "lg:grid-cols-2 lg:gap-16",
-        className,
-      )}
-    >
-      <div className="lg:group-even/feature:order-last">
-        {(icon != null || eyebrow != null) && (
-          <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-brand">
-            {icon != null && (
-              <span aria-hidden className="flex shrink-0 [&_svg]:size-4">
-                {icon}
-              </span>
-            )}
-            {eyebrow}
-          </p>
-        )}
-        <Heading className="mt-2 text-2xl font-semibold tracking-tight text-balance text-primary sm:text-3xl">
-          {title}
-        </Heading>
-        {description != null && <p className="mt-3 max-w-xl text-secondary">{description}</p>}
-        {shown.length > 0 && (
-          <ul className="mt-4 space-y-2">
-            {shown.map((bullet, i) => (
-              <li key={i} className="flex gap-2.5 text-sm text-secondary">
-                <span aria-hidden className="mt-1.5 size-1.5 shrink-0 rounded-full bg-brand" />
-                <span className="min-w-0">{bullet}</span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-      {visual != null && <Visual className="max-w-md">{visual}</Visual>}
-    </div>
-  );
-}
-
-/* ── Trust strip ─────────────────────────────────────────────────────────── */
-
-export interface TrustItem {
-  /** A lucide icon. Decorative. */
-  icon?: ReactNode;
-  /** The item's `h3`: "Hosted in Switzerland". */
-  title: ReactNode;
-  /** One sentence. */
-  description: ReactNode;
-}
-
-export interface TrustStripProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
-  /** Three or four (§4.1.4): hosting, security, data ownership, sharing. */
-  items: readonly TrustItem[];
-  /** The items' heading level. Default `h3`. */
-  headingAs?: HeadingLevel;
-}
-
-/**
- * Quiet, start-aligned facts after the feature rows (§4.1.4) — an icon, an `h3` and one
- * sentence each, on one row from `lg` up (three or four columns), two on a tablet, one
- * on a phone. No marketing volume: keksdose's "trust strip".
- */
-export function TrustStrip({ items, headingAs: Heading = "h3", className, ...rest }: TrustStripProps) {
-  return (
-    <section {...rest} data-slot="landing-trust" className={cn("mx-auto max-w-6xl px-4 py-12 sm:py-16", className)}>
-      <ul
-        className={cn(
-          "grid grid-cols-1 gap-8 sm:grid-cols-2",
-          items.length === 3 ? "lg:grid-cols-3" : "lg:grid-cols-4",
-        )}
-      >
-        {items.map((item, i) => (
-          <li key={i}>
-            {item.icon != null && (
-              <span aria-hidden className="flex text-brand [&_svg]:size-5">
-                {item.icon}
-              </span>
-            )}
-            <Heading className="mt-2 text-sm font-semibold text-primary">{item.title}</Heading>
-            <p className="mt-1 text-sm text-secondary">{item.description}</p>
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-}
-
-/* ── CTA band ────────────────────────────────────────────────────────────── */
-
-export interface CtaBandProps extends Omit<ComponentPropsWithRef<"section">, "title" | "children">, ActionProps {
-  /** The band's `h2`: the last ask. */
-  title: ReactNode;
-  subtitle?: ReactNode;
-  /** Replaces the action pair ({@link LandingActions}). */
-  actions?: ReactNode;
-  /** Default `h2`. */
-  headingAs?: HeadingLevel;
-  labels?: LabelOverride<LandingLabels>;
-}
-
-/**
- * The closing band before the footer (§4.1.5): a centred `h2`, a subtitle, and the same
- * action pair as the hero.
- */
-export function CtaBand({
-  title,
-  subtitle,
-  actions,
-  headingAs: Heading = "h2",
-  session,
-  access,
-  demoHref,
-  openAppHref,
-  labels,
-  className,
-  ...rest
-}: CtaBandProps) {
-  return (
-    <section {...rest} data-slot="landing-cta" className={cn("border-t border-subtle bg-surface", className)}>
-      <div className="mx-auto max-w-5xl px-4 py-16 text-center">
-        <Heading className="text-2xl font-semibold tracking-tight text-balance text-primary sm:text-3xl">
-          {title}
-        </Heading>
-        {subtitle != null && <p className="mx-auto mt-3 max-w-xl text-secondary">{subtitle}</p>}
-        <div className="mt-8">
-          {actions ?? (
-            <LandingActions
-              session={session}
-              access={access}
-              demoHref={demoHref}
-              openAppHref={openAppHref}
-              align="center"
-              labels={labels}
-            />
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-/* ── Footer ──────────────────────────────────────────────────────────────── */
-
-export interface PublicFooterProps extends Omit<LegalFooterProps, "children"> {
-  /** The app's line under the legal links: "Self-hosted household budgeting." */
-  tagline?: ReactNode;
-}
-
-/**
- * The public pages' footer (§4.1.6): the kit's {@link LegalFooter} — the three legal
- * links — with the app's tagline under them. keksdose's `SiteFooter`, which was already
- * this.
- */
-export function PublicFooter({ tagline, ...rest }: PublicFooterProps) {
-  return <LegalFooter {...rest}>{tagline}</LegalFooter>;
-}