@k2b/cloud 0.22.0 → 0.24.0

package/src/shared/markdown/formula.ts

@@ -475,6 +475,76 @@ const isTruthy = (v: EvalValue): boolean => {
   return v.length > 0;
 };
 
+/** Cell text that is one decimal number and nothing else. Each digit has
+ *  one place in the pattern, so a long run of digits never backtracks. */
+const NUMBER_CELL = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i;
+
+/** A number, boolean, or text whose whole content is one number. */
+const toExactNumber = (v: EvalValue): number | null =>
+  typeof v === "string" ? (NUMBER_CELL.test(v.trim()) ? Number(v.trim()) : null) : toNumber(v);
+
+/** An ISO date or timestamp: `2026-10-12`, `2026-10-12 09:30`,
+ *  `2026-10-12T09:30:00.250Z`, or with an offset such as `+02:00`. */
+const ISO_DATE_TIME = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3})\d*)?)?(Z|[+-]\d{2}:?\d{2})?)?$/i;
+
+/** An ISO date without a time, such as `2026-10-12`. */
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+
+/**
+ * The instant an ISO date or timestamp names, or null for anything else,
+ * including impossible dates such as `2026-02-30` and offsets such as
+ * `+00:60`. Text without an offset is local time, like the values TODAY()
+ * and NOW() return.
+ */
+const toDateTime = (v: EvalValue): number | null => {
+  if (typeof v !== "string") return null;
+  const match = ISO_DATE_TIME.exec(v.trim());
+  if (!match) return null;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const hour = Number(match[4] ?? 0);
+  const minute = Number(match[5] ?? 0);
+  const second = Number(match[6] ?? 0);
+  const ms = Number((match[7] ?? "").padEnd(3, "0"));
+  const zone = match[8];
+  if (hour > 23 || minute > 59 || second > 59) return null;
+  const utc = new Date(0);
+  utc.setUTCFullYear(year, month - 1, day);
+  if (utc.getUTCMonth() !== month - 1 || utc.getUTCDate() !== day) return null;
+  if (zone) {
+    utc.setUTCHours(hour, minute, second, ms);
+    if (zone.toUpperCase() === "Z") return utc.getTime();
+    const sign = zone.startsWith("-") ? -1 : 1;
+    const digits = zone.slice(1).replace(":", "");
+    const offsetHours = Number(digits.slice(0, 2));
+    const offsetMinutes = Number(digits.slice(2));
+    if (offsetHours > 23 || offsetMinutes > 59) return null;
+    return utc.getTime() - sign * (offsetHours * 60 + offsetMinutes) * 60_000;
+  }
+  const local = new Date(0);
+  local.setFullYear(year, month - 1, day);
+  local.setHours(hour, minute, second, ms);
+  return local.getTime();
+};
+
+/**
+ * Equality for `==`, `!=`, COUNTIF, and SUMIF: dates by instant; numbers,
+ * also `5 €` against 5, by value; everything else, such as `1.2.3` or
+ * `3 apples`, by its exact text.
+ */
+const isEqual = (l: EvalValue, r: EvalValue): boolean => {
+  const ld = toDateTime(l);
+  const rd = toDateTime(r);
+  if (ld !== null && rd !== null) return ld === rd;
+  if (ld === null && rd === null && (toExactNumber(l) !== null || toExactNumber(r) !== null)) {
+    const ln = toNumber(l);
+    const rn = toNumber(r);
+    if (ln !== null && rn !== null) return ln === rn;
+  }
+  return toString(l) === toString(r);
+};
+
 const lookupColumn = (name: string, ctx: EvalContext): { index: number } | { suggestion?: string } => {
   const lower = name.toLowerCase();
   const idx = ctx.headers.findIndex((h) => h.toLowerCase() === lower);
@@ -492,8 +562,9 @@ const isCurrentFormulaCell = (row: number, col: number, ctx: EvalContext): boole
 /**
  * Resolve a single cell to its evaluated value. If the cell is itself
  * a formula, recursively evaluate it (with cycle detection via
- * `ctx._visited`). Non-formula cells are coerced to number when
- * possible, otherwise returned as-is.
+ * `ctx._visited`). A non-formula cell becomes a number only when its
+ * whole text is one; anything else, such as the ISO date `2026-10-12`
+ * that DATEDIFF needs intact, stays text.
  *
  * Used by both the column-reference resolver in `evaluateAst` and by
  * the column / row aggregate functions, so a `=SUM(total)` aggregating
@@ -503,8 +574,8 @@ const isCurrentFormulaCell = (row: number, col: number, ctx: EvalContext): boole
 const evaluateCell = (row: number, col: number, ctx: EvalContext): EvalResult => {
   const cell = cellAt(row, col, ctx);
   if (!cell.startsWith("=")) {
-    const n = toNumber(cell);
-    return n !== null ? ok(n) : ok(cell);
+    const text = cell.trim();
+    return NUMBER_CELL.test(text) ? ok(Number(text)) : ok(cell);
   }
   const key = `${row},${col}`;
   if (ctx._visited?.has(key)) {
@@ -686,9 +757,8 @@ const FUNCTIONS: Record<string, FuncImpl> = {
     if ("kind" in col) return col;
     const valueArg = state.evaluate(args[1]!);
     if (valueArg.kind === "error") return valueArg;
-    const target = toString(valueArg.value);
     let count = 0;
-    for (const v of col.values) if (v === target) count++;
+    for (const v of col.values) if (isEqual(v, valueArg.value)) count++;
     return ok(count);
   },
   SUMIF: (args, state) => {
@@ -717,13 +787,12 @@ const FUNCTIONS: Record<string, FuncImpl> = {
     }
     const condValueArg = state.evaluate(args[2]!);
     if (condValueArg.kind === "error") return condValueArg;
-    const target = toString(condValueArg.value);
     let total = 0;
     for (let r = 0; r < state.ctx.rows.length; r++) {
       if (isCurrentFormulaCell(r, condLookup.index, state.ctx) || isCurrentFormulaCell(r, sumLookup.index, state.ctx)) continue;
       const condResult = evaluateCell(r, condLookup.index, state.ctx);
       if (condResult.kind !== "ok") continue;
-      if (toString(condResult.value) !== target) continue;
+      if (!isEqual(condResult.value, condValueArg.value)) continue;
       const sumResult = evaluateCell(r, sumLookup.index, state.ctx);
       if (sumResult.kind !== "ok") continue;
       const n = toNumber(sumResult.value);
@@ -989,17 +1058,25 @@ const FUNCTIONS: Record<string, FuncImpl> = {
     if (d1V.kind === "error") return d1V;
     const d2V = state.evaluate(args[1]!);
     if (d2V.kind === "error") return d2V;
-    const d1 = new Date(toString(d1V.value));
-    const d2 = new Date(toString(d2V.value));
-    if (Number.isNaN(d1.getTime())) return err("PARSE_ERROR", `DATEDIFF: first argument is not a valid date`);
-    if (Number.isNaN(d2.getTime())) return err("PARSE_ERROR", `DATEDIFF: second argument is not a valid date`);
+    // ISO values follow the comparison operators, so a date without a
+    // time is local midnight and an impossible one such as 2026-02-30 is
+    // no date; other text keeps the Date parser's reading.
+    const instant = (v: EvalValue): number =>
+      ISO_DATE_TIME.test(toString(v).trim()) ? (toDateTime(v) ?? Number.NaN) : new Date(toString(v)).getTime();
+    const t1 = instant(d1V.value);
+    const t2 = instant(d2V.value);
+    if (Number.isNaN(t1)) return err("PARSE_ERROR", `DATEDIFF: first argument is not a valid date`);
+    if (Number.isNaN(t2)) return err("PARSE_ERROR", `DATEDIFF: second argument is not a valid date`);
     let unit = "days";
     if (args.length === 3) {
       const u = state.evaluate(args[2]!);
       if (u.kind === "error") return u;
       unit = toString(u.value).toLowerCase();
     }
-    const diffMs = d2.getTime() - d1.getTime();
+    // Two dates are whole days apart, also across a daylight saving change.
+    const dayMs = 1000 * 60 * 60 * 24;
+    const wholeDays = ISO_DATE.test(toString(d1V.value).trim()) && ISO_DATE.test(toString(d2V.value).trim());
+    const diffMs = wholeDays ? Math.round((t2 - t1) / dayMs) * dayMs : t2 - t1;
     switch (unit) {
       case "ms":
       case "milliseconds":
@@ -1030,18 +1107,45 @@ const FUNCTION_NAMES = Object.keys(FUNCTIONS);
 
 // -- Binop application --------------------------------------------------------
 
+/**
+ * The two numbers the ordering operators compare, or null when the
+ * values have no common order. Two dates compare as instants and never
+ * with a number or other text, so `2026-10-12` is not `2026`. Text with
+ * a unit, such as `5 €`, compares by its leading number, as does text
+ * against text: `5 €` and `5.00 €` are neither smaller nor greater than
+ * each other, even though `==` tells their texts apart.
+ */
+const orderedPair = (l: EvalValue, r: EvalValue): [number, number] | null => {
+  const ld = toDateTime(l);
+  const rd = toDateTime(r);
+  if (ld !== null || rd !== null) return ld !== null && rd !== null ? [ld, rd] : null;
+  const ln = toNumber(l);
+  const rn = toNumber(r);
+  return ln !== null && rn !== null ? [ln, rn] : null;
+};
+
 const applyBinop = (op: BinOp, l: EvalValue, r: EvalValue): EvalResult => {
   if (op === "==" || op === "!=") {
-    // Equality: if both look numeric, compare as numbers; else as strings.
-    const ln = toNumber(l);
-    const rn = toNumber(r);
-    const equal = ln !== null && rn !== null ? ln === rn : toString(l) === toString(r);
+    const equal = isEqual(l, r);
     return ok((op === "==" ? equal : !equal) ? 1 : 0);
   }
+  if (op === "<" || op === "<=" || op === ">" || op === ">=") {
+    const pair = orderedPair(l, r);
+    if (pair === null) {
+      return toDateTime(l) !== null || toDateTime(r) !== null
+        ? err("TYPE_ERROR", `Cannot compare a date with a value that is not a date using "${op}"`)
+        : err("NON_NUMERIC", `Cannot compare non-numeric values with "${op}"`);
+    }
+    const [a, b] = pair;
+    if (op === "<") return ok(a < b ? 1 : 0);
+    if (op === "<=") return ok(a <= b ? 1 : 0);
+    if (op === ">") return ok(a > b ? 1 : 0);
+    return ok(a >= b ? 1 : 0);
+  }
   const ln = toNumber(l);
   const rn = toNumber(r);
   if (ln === null || rn === null) {
-    return err("NON_NUMERIC", `Cannot compare/compute non-numeric values with "${op}"`);
+    return err("NON_NUMERIC", `Cannot compute non-numeric values with "${op}"`);
   }
   switch (op) {
     case "+":
@@ -1053,14 +1157,6 @@ const applyBinop = (op: BinOp, l: EvalValue, r: EvalValue): EvalResult => {
     case "/":
       if (rn === 0) return err("DIV_BY_ZERO", `Division by zero`);
       return ok(ln / rn);
-    case "<":
-      return ok(ln < rn ? 1 : 0);
-    case "<=":
-      return ok(ln <= rn ? 1 : 0);
-    case ">":
-      return ok(ln > rn ? 1 : 0);
-    case ">=":
-      return ok(ln >= rn ? 1 : 0);
   }
 };
 

package/src/shared/markdown/index.ts

@@ -5,13 +5,13 @@
  * the visual appearance of the CodeMirror editor extensions.
  */
 
-import { Marked } from "marked";
+import { markdownInfoBlocks } from "@k2b/ui";
+import { Marked, type MarkedExtension } from "marked";
 import sanitizeHtml from "sanitize-html";
 import { markdownClient } from "./client";
 import { codeExtension } from "./extensions/code";
 import { guidedHelpExtension } from "./extensions/guided-help";
 import { imagesExtension } from "./extensions/images";
-import { infoBlocksExtension, type NoticeStyle } from "./extensions/info-blocks";
 import { katexExtension } from "./extensions/katex";
 import { linksExtension } from "./extensions/links";
 import { markExtension } from "./extensions/mark";
@@ -23,7 +23,7 @@ import { taskListExtension } from "./extensions/task-list";
 type MarkdownProfile = "content" | "help";
 type LinkStyle = "widget" | "plain";
 
-const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle = "card", links: LinkStyle = "widget") => {
+const createMarked = (profile: MarkdownProfile, links: LinkStyle, infoBlocks: MarkedExtension) => {
   const marked = new Marked();
 
   marked.use({
@@ -33,7 +33,7 @@ const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle
 
   // Apply extensions in order
   // Note: katexExtension must come before codeExtension to handle ```math blocks
-  marked.use(infoBlocksExtension(notices));
+  marked.use(infoBlocks);
   marked.use(taskListExtension());
   marked.use(tablesExtension());
   // Plain links keep marked's own renderer: an anchor around the link text.
@@ -49,24 +49,27 @@ const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle
   return marked;
 };
 
-const marked = createMarked();
-const helpMarked = createMarked("help");
-const contentMarked = new Map<`${NoticeStyle}:${LinkStyle}`, Marked>([["card:widget", marked]]);
+// One instance per UI message catalog, not per requested locale: request
+// headers choose the locale, and `markdownInfoBlocks()` returns one extension
+// for every locale that shares a catalog, so the cache stays bounded.
+const instances = new Map<MarkedExtension, Map<string, Marked>>();
+const markedFor = (profile: MarkdownProfile, links: LinkStyle = "widget", locale?: string): Marked => {
+  const infoBlocks = markdownInfoBlocks({ locale });
+  const byStyle = instances.get(infoBlocks) ?? new Map<string, Marked>();
+  instances.set(infoBlocks, byStyle);
+  const key = `${profile}:${links}`;
+  const instance = byStyle.get(key) ?? createMarked(profile, links, infoBlocks);
+  byStyle.set(key, instance);
+  return instance;
+};
+
+const marked = markedFor("content");
 
 export type MarkdownRenderOptions = {
-  /** `"minimal"` shows notices as tone colour only; the type name stays for screen readers. */
-  notices?: NoticeStyle;
   /** `"plain"` renders each link as an ordinary anchor around its text, for HTML read outside Cloud such as email. */
   links?: LinkStyle;
-};
-
-const markedFor = ({ notices = "card", links = "widget" }: MarkdownRenderOptions): Marked => {
-  const key = `${notices}:${links}` as const;
-  const cached = contentMarked.get(key);
-  if (cached) return cached;
-  const created = createMarked("content", notices, links);
-  contentMarked.set(key, created);
-  return created;
+  /** Request locale for the screen-reader names of untitled info blocks. Defaults to English on the server and the page language in the browser. */
+  locale?: string;
 };
 
 const sanitizeRenderedHtml = (html: string): string =>
@@ -145,7 +148,8 @@ const sanitizeRenderedHtml = (html: string): string =>
  *
  * Supported features:
  * - GFM (GitHub Flavored Markdown)
- * - Notice cards (:::note, :::info, :::success, :::warning, :::danger)
+ * - Info blocks (:::note, :::info, :::success, :::warning, :::danger), shared
+ *   with `MarkdownView` from `@k2b/ui`
  * - Task lists with checkboxes
  * - Tables with cell formatting
  * - Styled links and images
@@ -169,7 +173,7 @@ const sanitizeRenderedHtml = (html: string): string =>
 export function renderMarkdown(content: string, options: MarkdownRenderOptions = {}): string {
   if (!content || typeof content !== "string") return "";
 
-  const html = markedFor(options).parse(content);
+  const html = markedFor("content", options.links, options.locale).parse(content);
   if (typeof html !== "string") return "";
 
   return sanitizeRenderedHtml(html);
@@ -181,7 +185,7 @@ export function renderMarkdown(content: string, options: MarkdownRenderOptions =
 export function renderMarkdownSync(content: string, options: MarkdownRenderOptions = {}): string {
   if (!content || typeof content !== "string") return "";
 
-  const html = markedFor(options).parse(content);
+  const html = markedFor("content", options.links, options.locale).parse(content);
   if (typeof html !== "string") return "";
 
   return sanitizeRenderedHtml(html);
@@ -191,9 +195,9 @@ export function renderMarkdownSync(content: string, options: MarkdownRenderOptio
  * Render trusted documentation Markdown with guided sections and internal
  * navigation. All fenced code remains visible source, as in ordinary Markdown.
  */
-export function renderHelpMarkdown(content: string): string {
+export function renderHelpMarkdown(content: string, locale?: string): string {
   if (!content || typeof content !== "string") return "";
-  const html = helpMarked.parse(content);
+  const html = markedFor("help", "widget", locale).parse(content);
   return typeof html === "string" ? sanitizeRenderedHtml(html) : "";
 }
 

package/src/ssr/AppLaunchpad.island.tsx

@@ -27,7 +27,14 @@ const readEmbeddedContext = (): AppLaunchpadContext | undefined => {
     if (!Array.isArray(parsed.apps)) return undefined;
     return {
       apps: parsed.apps,
-      profile: parsed.profile?.name && (parsed.profile.theme === "dark" || parsed.profile.theme === "light") ? parsed.profile : undefined,
+      profile:
+        parsed.profile?.name && (parsed.profile.theme === "dark" || parsed.profile.theme === "light")
+          ? {
+              name: parsed.profile.name,
+              theme: parsed.profile.theme,
+              ...(parsed.profile.appHref === "/me/app" ? { appHref: parsed.profile.appHref } : {}),
+            }
+          : undefined,
       legalLinks: Array.isArray(parsed.legalLinks) ? parsed.legalLinks : [],
     };
   } catch {

package/src/ssr/AppLaunchpadPanel.tsx

@@ -26,7 +26,7 @@ export type AppLaunchpadLegalLink = {
 };
 
 export type AppLaunchpadContext = {
-  profile?: { name: string; theme: CloudTheme };
+  profile?: { name: string; theme: CloudTheme; appHref?: string };
   apps: AppLaunchpadApp[];
   legalLinks: AppLaunchpadLegalLink[];
 };

package/src/ssr/GlobalAnnouncements.island.tsx

@@ -102,7 +102,7 @@ export default function GlobalAnnouncements(props: Props) {
                 <MarkdownView
                   trustedHtml={banner.bodyHtml}
                   headingScale="compact"
-                  class="mt-1 max-h-36 overflow-y-auto overscroll-contain pr-1 [&_p]:my-0"
+                  class="max-h-36 overflow-y-auto overscroll-contain pr-1 [&_p]:my-0"
                 />
               </NoticeCard>
               <IconButton size="sm" label={t().dismissBanner} onClick={() => dismissBanner(banner.version)}>

package/src/ssr/Layout.tsx

@@ -4,6 +4,7 @@ import type { JSX } from "solid-js/jsx-runtime";
 import { readAppWorkspaceLayoutCookie, resolveAppWorkspaceLayoutForSidebar } from "../_internal/app-workspace-state";
 import { navigationSearchItems } from "../browser/navigation-search";
 import { resolveNavMatch } from "../contracts/app"; // ==========================
+import { isPwaShellAvailable } from "../contracts/pwa";
 import { defaultRailPreferences } from "../contracts/rail-preferences";
 import { hasRole, type User } from "../contracts/shared";
 import { getLocale } from "../server/locale";
@@ -90,9 +91,7 @@ function ProfileWarnings({ user, locale }: { user: User; locale: string }) {
   if (missing.length === 0) return null;
   return (
     <a href="/me" class="block shrink-0 no-underline">
-      <NoticeCard tone="warning" icon={false} bodyClass="flex items-center gap-2">
-        <i class="ti ti-user-exclamation" /> <span>{t.profileIncomplete({ fields: missing.join(", ") })}</span>
-      </NoticeCard>
+      <NoticeCard tone="warning">{t.profileIncomplete({ fields: missing.join(", ") })}</NoticeCard>
     </a>
   );
 }
@@ -100,13 +99,12 @@ function ExpiryWarnings({ user, dateConfig, locale }: { user: User; dateConfig:
   const t = platformMessages.resolve([locale]).t;
   const now = Date.now();
   const warnThreshold = now + WARN_DAYS * 24 * 60 * 60 * 1000;
-  const warnings: { icon: string; message: string; expired: boolean }[] = [];
+  const warnings: { message: string; expired: boolean }[] = [];
   if (user.accountExpires) {
     const expires = new Date(user.accountExpires).getTime();
-    if (expires < now) warnings.push({ icon: "ti-calendar-event", message: t.accountExpired, expired: true });
+    if (expires < now) warnings.push({ message: t.accountExpired, expired: true });
     else if (expires < warnThreshold)
       warnings.push({
-        icon: "ti-calendar-event",
         message:
           user.profile === "guest"
             ? t.guestAccountExpires({ date: dates.formatDate(user.accountExpires, dateConfig) })
@@ -116,10 +114,9 @@ function ExpiryWarnings({ user, dateConfig, locale }: { user: User; dateConfig:
   }
   if (user.ipa?.passwordExpires) {
     const expires = new Date(user.ipa.passwordExpires).getTime();
-    if (expires < now) warnings.push({ icon: "ti-key", message: t.passwordExpired, expired: true });
+    if (expires < now) warnings.push({ message: t.passwordExpired, expired: true });
     else if (expires < warnThreshold)
       warnings.push({
-        icon: "ti-key",
         message: t.passwordExpires({ date: dates.formatDate(user.ipa.passwordExpires, dateConfig) }),
         expired: false,
       });
@@ -129,10 +126,7 @@ function ExpiryWarnings({ user, dateConfig, locale }: { user: User; dateConfig:
     <div class="flex shrink-0 flex-col gap-1">
       {" "}
       {warnings.map((w) => (
-        <NoticeCard tone={w.expired ? "danger" : "warning"} icon={false} bodyClass="flex items-center gap-2">
-          {" "}
-          <i class={`ti ${w.icon}`} /> <span>{w.message}</span>{" "}
-        </NoticeCard>
+        <NoticeCard tone={w.expired ? "danger" : "warning"}>{w.message}</NoticeCard>
       ))}{" "}
     </div>
   );
@@ -205,6 +199,8 @@ export default function Layout(props: LayoutProps) {
   if (!page.title) page.title = pageTitle;
   const breadcrumbs: Breadcrumb[] = !title ? [{ title: appName }] : typeof title === "string" ? [{ title }] : title;
   const showRail = !!user;
+  // The profile menu offers the mobile app only while the installation runs it.
+  const appHref = user && isPwaShellAvailable(runtime.apps) ? "/me/app" : undefined;
   const profileName = user?.displayName || user?.uid || "?";
   const profileAvatarSrc =
     user?.avatarHash && user.id
@@ -253,6 +249,7 @@ export default function Layout(props: LayoutProps) {
         {showRail && (
           <LayoutRail
             accent={currentApp?.appearance?.accent}
+            appHref={appHref}
             appsLabel={t.apps}
             homeLabel={t.home}
             launchpadApps={launchpadApps}
@@ -270,6 +267,7 @@ export default function Layout(props: LayoutProps) {
         )}
         <div class="layout-shell-content flex min-h-0 min-w-0 flex-1 flex-col">
           <LayoutHeader
+            appHref={appHref}
             appLabel={currentApp?.name ?? (pathname.startsWith("/admin") ? t.admin : undefined)}
             accent={currentApp?.appearance?.accent}
             authenticated={showRail}

package/src/ssr/LayoutHeader.tsx

@@ -12,6 +12,8 @@ import ProfilePreferences from "./ProfilePreferences.island";
 
 type LayoutHeaderProps = {
   accent?: string;
+  /** Set while the installation offers the mobile app. */
+  appHref?: string;
   appLabel?: string;
   authenticated: boolean;
   breadcrumbs: LayoutBreadcrumb[];
@@ -64,7 +66,11 @@ export default function LayoutHeader(props: LayoutHeaderProps) {
           />
           {(props.authenticated || props.appLabel) && (
             <AppLaunchpad
-              profile={props.authenticated ? { name: props.profileName, theme: props.theme } : undefined}
+              profile={
+                props.authenticated
+                  ? { name: props.profileName, theme: props.theme, ...(props.appHref ? { appHref: props.appHref } : {}) }
+                  : undefined
+              }
               apps={props.launchpadApps}
               legalLinks={props.legalLinks}
               variant="header"
@@ -74,7 +80,13 @@ export default function LayoutHeader(props: LayoutHeaderProps) {
         </div>
         {props.authenticated ? (
           <div class="hidden lg:block">
-            <ProfilePreferences avatarSrc={props.profileAvatarSrc} initialTheme={props.theme} name={props.profileName} placement="header" />
+            <ProfilePreferences
+              appHref={props.appHref}
+              avatarSrc={props.profileAvatarSrc}
+              initialTheme={props.theme}
+              name={props.profileName}
+              placement="header"
+            />
           </div>
         ) : (
           <>

package/src/ssr/LayoutHelp.tsx

@@ -753,10 +753,8 @@ const HelpShell = (props: {
                 </Show>
                 <Show when={loadError()}>
                   {(message) => (
-                    <NoticeCard tone="danger" icon={false}>
-                      <p class="font-medium">{t().loadFailed}</p>
-                      <p class="mt-1 text-sm">{message()}</p>
-                      <Button size="sm" variant="secondary" class="mt-3" onClick={() => setLoadAttempt((value) => value + 1)}>
+                    <NoticeCard tone="danger" title={t().loadFailed} detail={message()}>
+                      <Button size="sm" variant="secondary" onClick={() => setLoadAttempt((value) => value + 1)}>
                         {t().tryAgain}
                       </Button>
                     </NoticeCard>

package/src/ssr/LayoutRail.tsx

@@ -12,6 +12,8 @@ export type LayoutAppLink = RailApp;
 
 type LayoutRailProps = {
   accent?: string;
+  /** Set while the installation offers the mobile app. */
+  appHref?: string;
   appsLabel: string;
   homeLabel: string;
   launchpadApps: AppLaunchpadApp[];
@@ -31,11 +33,12 @@ type LayoutRailProps = {
 const jsonScript = (value: unknown): string => JSON.stringify(value).replace(/</g, "\\u003c");
 
 export default function LayoutRail(props: LayoutRailProps) {
+  const profile = { name: props.profileName, theme: props.theme, ...(props.appHref ? { appHref: props.appHref } : {}) };
   return (
     <>
-      <AppLaunchpad profile={{ name: props.profileName, theme: props.theme }} apps={props.launchpadApps} legalLinks={props.legalLinks} />
+      <AppLaunchpad profile={profile} apps={props.launchpadApps} legalLinks={props.legalLinks} />
       <script id="cloud-app-launchpad-data" type="application/json">
-        {jsonScript({ apps: props.launchpadApps, legalLinks: props.legalLinks, profile: { name: props.profileName, theme: props.theme } })}
+        {jsonScript({ apps: props.launchpadApps, legalLinks: props.legalLinks, profile })}
       </script>
       <script id="cloud-rail-data" type="application/json">
         {jsonScript({ apps: props.apps, settings: props.railSettings })}
@@ -49,7 +52,7 @@ export default function LayoutRail(props: LayoutRailProps) {
         <nav class="layout-rail-navigation flex min-h-0 flex-1 flex-col items-center gap-1" aria-label={props.appsLabel}>
           <RailApps apps={props.apps} settings={props.railSettings} currentPath={props.currentPath} />
           <AppLaunchpad
-            profile={{ name: props.profileName, theme: props.theme }}
+            profile={profile}
             apps={props.launchpadApps}
             legalLinks={props.legalLinks}
             variant="rail"
@@ -58,7 +61,13 @@ export default function LayoutRail(props: LayoutRailProps) {
           <div class="mt-auto shrink-0 flex flex-col items-center gap-1">
             <GlobalSearchTrigger variant="rail" searchLinks={props.searchLinks} />
             <LayoutHelpTrigger variant="rail" registerCommand searchHelpApps={props.searchHelpApps} accent={props.accent} />
-            <ProfilePreferences avatarSrc={props.profileAvatarSrc} initialTheme={props.theme} name={props.profileName} placement="rail" />
+            <ProfilePreferences
+              appHref={props.appHref}
+              avatarSrc={props.profileAvatarSrc}
+              initialTheme={props.theme}
+              name={props.profileName}
+              placement="rail"
+            />
           </div>
         </nav>
       </aside>

package/src/ssr/MinimalLayoutPreferences.island.tsx

@@ -1,6 +1,6 @@
 import { Button, Dropdown, useLocale } from "@k2b/ui";
-import { type ProfilePreferenceLocale, profilePreferenceLocale, setLocalePreference } from "../browser/locale-preference";
 import { canonicalLocale } from "../shared/locale";
+import { type ProfilePreferenceLocale, profilePreferenceLocale, setLocalePreference } from "../shared/locale-preference";
 import type { CloudTheme } from "../shared/theme";
 import { createPreferenceController } from "./preference-controller";
 

package/src/ssr/MobileProfileActions.tsx

@@ -3,24 +3,30 @@ import { Button, ButtonLink } from "@k2b/ui";
 import type { CloudTheme } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
 
-export function MobileProfileActions(props: { profile: { name: string; theme: CloudTheme }; beforeSelect: () => Promise<boolean> }) {
-  const { preferences, signingOut, signOut } = createProfileActions(props.profile.theme);
+export function MobileProfileActions(props: {
+  profile: { name: string; theme: CloudTheme; appHref?: string };
+  beforeSelect: () => Promise<boolean>;
+}) {
+  const { preferences, signingOut, signOut } = createProfileActions(props.profile.theme, props.profile.appHref);
+  const navigate = (href: string) => (event: MouseEvent) => {
+    if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+    event.preventDefault();
+    void props.beforeSelect().then((allowed) => {
+      if (allowed) documentNavigate(href);
+    });
+  };
   return (
     <section class="cloud-mobile-profile" aria-label={preferences.messages().menuLabel}>
-      <ButtonLink
-        href="/me"
-        variant="ghost"
-        onClick={(event) => {
-          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-          event.preventDefault();
-          void props.beforeSelect().then((allowed) => {
-            if (allowed) documentNavigate("/me");
-          });
-        }}
-      >
+      <ButtonLink href="/me" variant="ghost" onClick={navigate("/me")}>
         <i class="ti ti-user-circle" aria-hidden="true" />
         {preferences.messages().profileSettings}
       </ButtonLink>
+      {props.profile.appHref && (
+        <ButtonLink href={props.profile.appHref} variant="ghost" onClick={navigate(props.profile.appHref)}>
+          <i class="ti ti-device-mobile" aria-hidden="true" />
+          {preferences.messages().app}
+        </ButtonLink>
+      )}
       <Button variant="ghost" onClick={preferences.toggleTheme}>
         <i class={`ti ${preferences.theme() === "light" ? "ti-moon" : "ti-sun-high"}`} aria-hidden="true" />
         {preferences.themeLabel()}

package/src/ssr/PageError.tsx

@@ -1,10 +1,13 @@
-import { NotFoundState } from "@k2b/ui";
+import { ButtonLink, NotFoundState, Placeholder } from "@k2b/ui";
 import type { Context } from "hono";
 import type { PageErrorOptions, PageErrorStatus } from "../_internal/page-responses";
+import { PWA_SCOPE } from "../contracts/pwa";
 import { getLocale } from "../server/locale";
 import Layout from "./Layout";
 import MinimalLayout from "./MinimalLayout";
+import PwaLayout from "./PwaLayout";
 import { pageErrorMessages } from "./page-error-messages";
+import { pwaMessages } from "./pwa-messages";
 
 export const renderPageError = (c: Context, status: PageErrorStatus, options: PageErrorOptions) => {
   const { t } = pageErrorMessages.resolve([getLocale(c)]);
@@ -14,6 +17,25 @@ export const renderPageError = (c: Context, status: PageErrorStatus, options: Pa
   const action = options.action ?? { label: t.home, href: "/" };
   c.get("page").title = title;
 
+  if (options.layout === "pwa") {
+    const pwa = pwaMessages.resolve([getLocale(c)]).t;
+    return () => (
+      <PwaLayout c={c} title={title}>
+        <Placeholder
+          state={status >= 500 ? "error" : "empty"}
+          icon={status === 403 ? "ti ti-lock" : status === 404 ? "ti ti-compass-off" : undefined}
+          title={title}
+          description={description}
+          action={
+            <ButtonLink href={options.action?.href ?? PWA_SCOPE} variant="secondary">
+              {options.action?.label ?? pwa.errorAction}
+            </ButtonLink>
+          }
+        />
+      </PwaLayout>
+    );
+  }
+
   return () =>
     options.layout === "minimal" ? (
       <MinimalLayout c={c}>