@eifi1/ui-kit 0.30.0 → 0.31.0

package/src/i18n/locales/hu.ts

@@ -71,6 +71,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
     // A noun after a number stays singular in Hungarian, so the counts need no plural.
     feedbackStatus: {
       OPEN: "Nyitott",
+      READY: "Megvalósításra kész",
       IN_PROGRESS: "Folyamatban",
       IN_EVALUATION: "Értékelés alatt",
       NEEDS_LIVE_TEST: "Élesben tesztelendő",
@@ -129,6 +130,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       phoneActions: "Visszajelzés-műveletek",
     },
     feedbackDetail: {
+      subject: "Tárgy",
       body: "Leírás",
       edit: "Szerkesztés",
       editDescription: "Leírás szerkesztése",
@@ -187,6 +189,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         qrAlt: "QR-kód a hitelesítő alkalmazáshoz",
         secretHint: "Nem sikerül beolvasni? Adja meg inkább ezt a kulcsot az alkalmazásban:",
         copySecret: "Kulcs másolása",
+        // 0.31.0: the card's title; the state ("Bekapcsolva") stands beside it.
+        title: "Kétlépcsős azonosítás",
       },
       passkeys: {
         title: "Hozzáférési kulcsok",
@@ -897,6 +901,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         `${n(length)} betű és számjegy. A kötőjelek és a szóközök nem számítanak.`,
       recoveryCodeInvalid: "Ez a tartalékkód érvénytelen, vagy már felhasználták.",
       rateLimited,
+      // 0.31.0: the same words as `landing.requestAccess`.
+      requestAccess: "Hozzáférés kérése",
     },
     register: {
       firstName: "Keresztnév",
@@ -1332,6 +1338,84 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
           ? `„${group}”: jóváhagyja az ellenőrizetlen szöveget?`
           : `„${group}”: jóváhagyja mind a(z) ${n(count)} ellenőrizetlen szöveget, a képernyőn nem láthatókat is?`,
     },
+    // 0.31.0 — docs/settings-harmonization.md §4.3 and docs/landing-demo-harmonization.md
+    // §4–§5: the settings shell, the landing page's generic words and the demo. The help
+    // lines name things as `accountSettings`, `sessions` and `dataExport` do. "Ön"; the
+    // buttons are nouns, as "Fiók létrehozása"; the numeral stays bare before its noun
+    // ("3 találat", "50 perc"); every value the app passes in stands after a colon.
+    settings: {
+      title: "Beállítások",
+      search: "Keresés a beállításokban",
+      searchPlaceholder: "Keresés a beállításokban…",
+      results: "Megfelelő beállítások",
+      noMatches: (query) => `Nincs a keresésnek megfelelő beállítás: „${query}”.`,
+      // As `commandPalette.clear`.
+      clearSearch: "Keresés törlése",
+      back: "Vissza a beállításokhoz",
+      sections: "Beállításcsoportok",
+      matchCount: (count) => `${n(count)} találat`,
+      groups: {
+        appearance: {
+          title: "Megjelenés",
+          help: "Nyelv, téma és az alkalmazás megjelenése ezen az eszközön.",
+        },
+        account: {
+          title: "Fiók",
+          help: "Az Ön profilja és e-mail-címe.",
+        },
+        security: {
+          title: "Biztonság",
+          help: "Hogyan jelentkezik be: jelszó, ellenőrző kódok, hozzáférési kulcsok és munkamenetek.",
+        },
+        notifications: {
+          title: "Értesítések",
+          help: "Miről, mikor és mely eszközökön kap értesítést.",
+        },
+        data: {
+          title: "Adatok",
+          help: "Exportálja a saját adatait, vagy törölje őket a fiókjával együtt.",
+        },
+      },
+    },
+    landing: {
+      signIn: "Bejelentkezés",
+      requestAccess: "Hozzáférés kérése",
+      getStarted: "Kezdés",
+      tryDemo: "Demó kipróbálása",
+      openApp: "Alkalmazás megnyitása",
+      continueDemo: "Demó folytatása",
+      beta: "Béta",
+      // Plain text: a mail's subject and body lines, never HTML. The app's name after a
+      // colon, so it needs no case ending ("Hozzáférés a Kastlanhoz").
+      accessSubject: (app) => (app ? `Hozzáférési kérelem: ${app}` : "Hozzáférési kérelem"),
+      accessName: "Név:",
+      accessCompany: "Cég:",
+      accessUse: "Mire használná:",
+    },
+    demo: {
+      starting: "A demó indítása…",
+      rateLimited: (minutes) =>
+        minutes
+          ? `Túl sok demó indult erről a hálózatról. Próbálja újra ${n(minutes)} perc múlva.`
+          : "Túl sok demó indult erről a hálózatról. Próbálja újra később.",
+      capacity: "A demó jelenleg megtelt. Kérjük, próbálja újra később.",
+      unavailable: "A demó jelenleg nem érhető el.",
+      failed: "A demót nem sikerült elindítani. Kérjük, próbálja újra.",
+      // As `legal.backHome`.
+      backToStart: "Vissza a kezdőlapra",
+      hoursLeft: (hours, minutes) => `Demó · még ${n(hours)} óra ${n(minutes)} perc`,
+      minutesLeft: (minutes) => `Demó · még ${n(minutes)} perc`,
+      badge: "Demó",
+      readOnly: "Mintaadatokat lát. Módosításra nincs lehetőség.",
+      sandbox: "Amit Ön hoz létre, az a demó végén törlődik.",
+      details: "A demó részletei",
+      writeLocked: "A demóban ez nem lehetséges.",
+      endedTitle: "A demó véget ért",
+      endedReadOnly: "A mintaadatokat rendszeresen visszaállítjuk.",
+      endedSandbox:
+        "A mintaadatokat rendszeresen visszaállítjuk, a demóban létrehozott saját munkáját pedig töröljük.",
+      restart: "Új demó indítása",
+    },
   };
 }
 

package/src/i18n/locales/it.ts

@@ -70,6 +70,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
     // 0.27.0. "Feedback" stays, as `feedbackDialog`; "rielaborazione" for rework.
     feedbackStatus: {
       OPEN: "Aperto",
+      READY: "Pronto da implementare",
       IN_PROGRESS: "In corso",
       IN_EVALUATION: "In valutazione",
       NEEDS_LIVE_TEST: "Da testare in produzione",
@@ -131,6 +132,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       phoneActions: "Azioni sul feedback",
     },
     feedbackDetail: {
+      subject: "Oggetto",
       body: "Descrizione",
       edit: "Modifica",
       editDescription: "Modifica descrizione",
@@ -191,6 +193,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         qrAlt: "Codice QR per la Sua app di autenticazione",
         secretHint: "Non riesce a scansionarlo? Inserisca invece questa chiave nell’app:",
         copySecret: "Copia chiave",
+        // 0.31.0: the card's title; the state ("Attiva") stands beside it.
+        title: "Autenticazione a due fattori",
       },
       passkeys: {
         title: "Passkey",
@@ -895,6 +899,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       recoveryCodeHint: (length) => `${n(length)} lettere e cifre. Trattini e spazi non contano.`,
       recoveryCodeInvalid: "Questo codice di riserva non è valido o è già stato usato.",
       rateLimited,
+      // 0.31.0: the same words as `landing.requestAccess`.
+      requestAccess: "Richiedi l’accesso",
     },
     register: {
       firstName: "Nome",
@@ -1342,6 +1348,83 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
           ? `Approvare il testo non rivisto in «${group}»?`
           : `Approvare tutti i ${n(count)} testi non rivisti in «${group}», compresi quelli non visibili sullo schermo?`,
     },
+    // 0.31.0 — docs/settings-harmonization.md §4.3 and docs/landing-demo-harmonization.md
+    // §4–§5: the settings shell, the landing page's generic words and the demo. The help
+    // lines name things as `accountSettings`, `sessions` and `dataExport` do. "Lei", and
+    // no sentence about the reader needs a gender ("avvisato/a").
+    settings: {
+      title: "Impostazioni",
+      search: "Cerca nelle impostazioni",
+      searchPlaceholder: "Cerca nelle impostazioni…",
+      results: "Impostazioni corrispondenti",
+      noMatches: (query) => `Nessuna impostazione corrisponde a «${query}».`,
+      // As `commandPalette.clear`.
+      clearSearch: "Cancella ricerca",
+      back: "Torna alle impostazioni",
+      sections: "Sezioni delle impostazioni",
+      matchCount: (count) => `${n(count)} ${plural(count, "risultato", "risultati")}`,
+      groups: {
+        appearance: {
+          title: "Aspetto",
+          help: "Lingua, tema e aspetto dell’app su questo dispositivo.",
+        },
+        account: {
+          title: "Account",
+          help: "Il Suo profilo e il Suo indirizzo email.",
+        },
+        security: {
+          title: "Sicurezza",
+          help: "Come accede: password, codici 2FA, passkey e sessioni.",
+        },
+        notifications: {
+          title: "Notifiche",
+          help: "Quali notifiche riceve, quando e su quali dispositivi.",
+        },
+        data: {
+          title: "Dati",
+          help: "Esporti i Suoi dati o li elimini insieme al Suo account.",
+        },
+      },
+    },
+    landing: {
+      signIn: "Accedi",
+      requestAccess: "Richiedi l’accesso",
+      getStarted: "Inizia",
+      tryDemo: "Prova la demo",
+      openApp: "Apri l’app",
+      continueDemo: "Continua la demo",
+      beta: "Beta",
+      // Plain text: a mail's subject and body lines, never HTML.
+      accessSubject: (app) => (app ? `Accesso a ${app}` : "Richiesta di accesso"),
+      accessName: "Nome:",
+      accessCompany: "Azienda:",
+      accessUse: "Uso previsto:",
+    },
+    demo: {
+      starting: "Avvio della demo…",
+      rateLimited: (minutes) =>
+        minutes
+          ? `Troppe demo da questa rete. Riprovi tra ${n(minutes)} min.`
+          : "Troppe demo da questa rete. Riprovi più tardi.",
+      capacity: "La demo è al completo in questo momento. Riprovi più tardi.",
+      unavailable: "La demo non è disponibile in questo momento.",
+      failed: "Impossibile avviare la demo. Riprovi.",
+      // As `legal.backHome`.
+      backToStart: "Torna alla pagina iniziale",
+      // "ancora" rather than "mancano", which would have to agree with the count.
+      hoursLeft: (hours, minutes) => `Demo · ancora ${n(hours)} h ${n(minutes)} min`,
+      minutesLeft: (minutes) => `Demo · ancora ${n(minutes)} min`,
+      badge: "Demo",
+      readOnly: "Sta guardando dati di esempio. Non è possibile apportare modifiche.",
+      sandbox: "Quello che crea viene eliminato al termine della demo.",
+      details: "Dettagli della demo",
+      writeLocked: "Non è possibile nella demo.",
+      endedTitle: "La demo è terminata",
+      endedReadOnly: "I dati di esempio vengono reimpostati regolarmente.",
+      endedSandbox:
+        "I dati di esempio vengono reimpostati regolarmente; quello che ha creato nella demo viene eliminato.",
+      restart: "Avvia una nuova demo",
+    },
   };
 }
 

package/src/i18n/locales/zh.ts

@@ -64,6 +64,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     // 0.27.0. 反馈 for feedback, as `feedbackDialog`; 返工 for rework.
     feedbackStatus: {
       OPEN: "待处理",
+      READY: "待实现",
       IN_PROGRESS: "处理中",
       IN_EVALUATION: "评估中",
       NEEDS_LIVE_TEST: "待线上测试",
@@ -122,6 +123,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       phoneActions: "反馈操作",
     },
     feedbackDetail: {
+      subject: "主题",
       body: "描述",
       edit: "编辑",
       editDescription: "编辑描述",
@@ -180,6 +182,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         qrAlt: "身份验证器应用的二维码",
         secretHint: "无法扫描？请改为在应用中输入此密钥：",
         copySecret: "复制密钥",
+        // 0.31.0: the card's title; the state ("已开启") stands beside it.
+        title: "双重验证",
       },
       passkeys: {
         title: "通行密钥",
@@ -866,6 +870,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       recoveryCodeHint: (length) => `共 ${n(length)} 位字母和数字，连字符和空格不影响。`,
       recoveryCodeInvalid: "此备用码无效或已被使用。",
       rateLimited,
+      // 0.31.0: the same words as `landing.requestAccess`.
+      requestAccess: "申请访问权限",
     },
     register: {
       firstName: "名字",
@@ -1276,6 +1282,81 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
           ? `通过“${group}”中的未审校文本？`
           : `通过“${group}”中全部 ${n(count)} 条未审校文本（包括未显示在屏幕上的）？`,
     },
+    // 0.31.0 — docs/settings-harmonization.md §4.3 and docs/landing-demo-harmonization.md
+    // §4–§5: the settings shell, the landing page's generic words and the demo. The help
+    // lines name things as `accountSettings`, `sessions` and `dataExport` do; "访问权限"
+    // as `shareCard`. A space either side of a numeral or a Latin name.
+    settings: {
+      title: "设置",
+      search: "搜索设置",
+      searchPlaceholder: "搜索设置…",
+      results: "匹配的设置",
+      noMatches: (query) => `没有与“${query}”匹配的设置。`,
+      // As `commandPalette.clear`.
+      clearSearch: "清除搜索",
+      back: "返回设置",
+      sections: "设置分类",
+      matchCount: (count) => `${n(count)} 个匹配项`,
+      groups: {
+        appearance: {
+          title: "外观",
+          help: "语言、主题，以及应用在此设备上的外观。",
+        },
+        account: {
+          title: "账户",
+          help: "您的个人资料和电子邮箱地址。",
+        },
+        security: {
+          title: "安全",
+          help: "您的登录方式：密码、双重验证码、通行密钥和会话。",
+        },
+        notifications: {
+          title: "通知",
+          help: "您会收到哪些通知、何时收到，以及在哪些设备上收到。",
+        },
+        data: {
+          title: "数据",
+          help: "导出属于您的数据，或将其连同账户一并删除。",
+        },
+      },
+    },
+    landing: {
+      signIn: "登录",
+      requestAccess: "申请访问权限",
+      getStarted: "开始使用",
+      tryDemo: "体验演示",
+      openApp: "打开应用",
+      continueDemo: "继续演示",
+      beta: "测试版",
+      // Plain text: a mail's subject and body lines, never HTML. Full-width colons.
+      accessSubject: (app) => (app ? `申请访问 ${app}` : "访问权限申请"),
+      accessName: "姓名：",
+      accessCompany: "公司：",
+      accessUse: "用途：",
+    },
+    demo: {
+      starting: "正在启动演示…",
+      rateLimited: (minutes) =>
+        minutes
+          ? `来自此网络的演示过多，请 ${n(minutes)} 分钟后重试。`
+          : "来自此网络的演示过多，请稍后重试。",
+      capacity: "演示名额已满，请稍后重试。",
+      unavailable: "演示暂不可用。",
+      failed: "无法启动演示，请重试。",
+      // As `legal.backHome`.
+      backToStart: "返回首页",
+      hoursLeft: (hours, minutes) => `演示 · 剩余 ${n(hours)} 小时 ${n(minutes)} 分钟`,
+      minutesLeft: (minutes) => `演示 · 剩余 ${n(minutes)} 分钟`,
+      badge: "演示",
+      readOnly: "您正在查看示例数据，无法进行修改。",
+      sandbox: "您自己创建的内容将在演示结束时删除。",
+      details: "演示详情",
+      writeLocked: "演示中无法执行此操作。",
+      endedTitle: "演示已结束",
+      endedReadOnly: "示例数据会定期重置。",
+      endedSandbox: "示例数据会定期重置；您在演示中创建的内容会被删除。",
+      restart: "开始新的演示",
+    },
   };
 }
 

package/src/i18n/review.ts

@@ -338,4 +338,17 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "invitations.linkReady": [["{{email}}"]],
   "invitations.notSent": [["{{email}}"]],
   "accountState.deletionOn": [["{{date}}"]],
+  // 0.31.0: the settings shell, the landing page and the demo
+  // (docs/settings-harmonization.md, docs/landing-demo-harmonization.md). An optional
+  // argument both given and left out: the subject without an app name, the refusal
+  // without a `Retry-After`.
+  "settings.noMatches": [["{{query}}"]],
+  "settings.matchCount": one,
+  "landing.accessSubject": [["{{app}}"], [undefined]],
+  "demo.rateLimited": [[], [1], [3]],
+  "demo.hoursLeft": [
+    [1, 1],
+    [3, 12],
+  ],
+  "demo.minutesLeft": one,
 };

package/src/index.ts

@@ -545,7 +545,7 @@ export type { CompanySwitcherProps, CompanySwitcherLabels, CompanySwitcherCompan
 // invitations panel, and the account's own settings — email change, sessions, deletion,
 // export. Callbacks only; the confirmation level is the server's.
 export { isRateLimited, retryAfterSeconds } from "./auth/auth-errors";
-export type { AccountErrorCode, KitErrorCode } from "./auth/auth-errors";
+export type { AccountErrorCode, DemoErrorCode, KitErrorCode } from "./auth/auth-errors";
 export { EmailChangeSetting, DEFAULT_EMAIL_CHANGE_LABELS } from "./account/email-change-setting";
 export type {
   EmailChangeSettingProps,
@@ -633,6 +633,97 @@ export type {
   InvitationsPanelProps,
 } from "./admin/invitations-panel";
 export type { AdminPerson } from "./admin/admin-parts";
+
+// ── 0.31.0: the settings page and the admin page on one shell (docs/settings-harmonization.md) ──
+// Router-aware: the layout, its route and focus hooks (also in `@eifi1/ui-kit/shell`).
+export { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from "./settings/settings-layout";
+export type { SettingsLayoutProps, SettingsLayoutWidth } from "./settings/settings-layout";
+export {
+  useSettingsRoute,
+  resolveSettingsLocation,
+  settingsFromListState,
+  SETTINGS_FROM_LIST_STATE,
+} from "./settings/use-settings-route";
+export type {
+  UseSettingsRouteOptions,
+  SettingsRoute,
+  SettingsLayoutMode,
+  SettingsLocation,
+  SettingsLocationRules,
+  SettingsLocationResult,
+} from "./settings/use-settings-route";
+export { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from "./settings/use-settings-focus";
+// The router-free companions: a card, the context, the heading level, the catalogue.
+export { SettingsSection } from "./settings/settings-section";
+export type { SettingsSectionProps } from "./settings/settings-section";
+export { useSettingsLayout } from "./settings/settings-context";
+export type { SettingsLayoutContextValue } from "./settings/settings-context";
+export { SettingsHeadingLevel, useSettingsHeadingLevel } from "./settings/settings-heading";
+export type { SettingsHeadingLevelProps, SettingsHeadingTag } from "./settings/settings-heading";
+export {
+  settingsSearchEntries,
+  visibleSettingsGroups,
+  visibleSettingsEntries,
+  settingsHref,
+} from "./settings/settings-catalogue";
+export type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from "./settings/settings-catalogue";
+export { DEFAULT_SETTINGS_LABELS } from "./settings/settings-labels";
+export type { SettingsLabels, SettingsGroupLabels, SettingsCoreGroup } from "./settings/settings-labels";
+// Only the language follows the account (§6.2).
+export { useAccountLanguage, resolveAccountLanguage, matchOfferedLanguage } from "./settings/use-account-language";
+export type {
+  UseAccountLanguageOptions,
+  AccountLanguage,
+  AccountLanguageSource,
+  ResolveAccountLanguageInput,
+  ResolvedAccountLanguage,
+} from "./settings/use-account-language";
+
+// ── 0.31.0: the public landing page and the demo (docs/landing-demo-harmonization.md) ──
+export { DEFAULT_LANDING_LABELS, useLandingLabels } from "./landing/landing-labels";
+export type { LandingLabels } from "./landing/landing-labels";
+export { accessAction, useAccessAction } from "./landing/access";
+export type { AccessChoice, AccessLink, AccessLabels } from "./landing/access";
+export { LandingActions } from "./landing/landing-actions";
+export type { LandingActionsProps, LandingSession } from "./landing/landing-actions";
+export { Hero, FeatureRows, FeatureRow, TrustStrip, CtaBand, PublicFooter } from "./landing/landing-sections";
+export type {
+  HeroProps,
+  FeatureRowsProps,
+  FeatureRowProps,
+  TrustItem,
+  TrustStripProps,
+  CtaBandProps,
+  PublicFooterProps,
+} from "./landing/landing-sections";
+export { usePageSeo, seoCopyProblems, metaContent } from "./landing/page-seo";
+export type { SeoCopy, SeoCopyLimits, SeoCopyProblem, SeoCopyProblemCode } from "./landing/page-seo";
+// Router-aware (also in `@eifi1/ui-kit/shell`): the header and the resume.
+export {
+  RootEntry,
+  RedirectIfAuthed,
+  useLastVisitedPage,
+  readLastVisitedPage,
+  clearLastVisitedPage,
+  safeNextPath,
+  NEXT_PARAM,
+  DEFAULT_LAST_VISITED_EXCLUDES,
+} from "./landing/routing";
+export type { RootEntryProps, RedirectIfAuthedProps, LastVisitedPageOptions, PathPattern } from "./landing/routing";
+export { PublicHeader } from "./landing/public-header";
+export type { PublicHeaderProps, PublicHeaderBrand } from "./landing/public-header";
+export { DEFAULT_DEMO_LABELS, useDemoLabels } from "./demo/demo-labels";
+export type { DemoLabels } from "./demo/demo-labels";
+export { isDemoSession } from "./demo/demo-session";
+export type { DemoModel, DemoSessionUser } from "./demo/demo-session";
+export { useDemoCountdown, demoCountdown, DEMO_WARNING_MINUTES, DEMO_MINUTES_ONLY } from "./demo/demo-countdown";
+export type { DemoCountdown, DemoCountdownOptions, DemoExpiry } from "./demo/demo-countdown";
+export { DemoStart } from "./demo/demo-start";
+export type { DemoStartProps } from "./demo/demo-start";
+export { DemoBanner } from "./demo/demo-banner";
+export type { DemoBannerProps } from "./demo/demo-banner";
+export { DemoEnded } from "./demo/demo-ended";
+export type { DemoEndedProps } from "./demo/demo-ended";
 export type {
   LegalPageProps,
   LegalKitSectionProps,

package/src/landing/access.ts

@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+
+import { DEFAULT_LANDING_LABELS, useLandingLabels } from "./landing-labels";
+import type { LandingLabels } from "./landing-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?: Partial<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

@@ -0,0 +1,92 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "../components/ui";
+import type { ButtonSize } from "../components/ui";
+import { useAccessAction } from "./access";
+import type { AccessChoice } from "./access";
+import { useLandingLabels } from "./landing-labels";
+import type { LandingLabels } from "./landing-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<ComponentPropsWithoutRef<"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). */
+  demoHref?: string;
+  /** "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?: Partial<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="brand" size={buttonSize} className={extra}>
+          {labels.openApp}
+        </Button>
+      ) : (
+        <>
+          <Button href={accessLink.href} variant="brand" size={buttonSize} className={extra}>
+            {accessLink.label}
+          </Button>
+          <Button href={demoHref} variant="secondary" size={buttonSize} className={extra}>
+            {session === "demo" ? labels.continueDemo : labels.tryDemo}
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}