@k2b/cloud 0.21.1 → 0.23.0

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

@@ -1,4 +1,4 @@
-import { Button, dialogCore, MarkdownView, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
+import { Button, dialogCore, IconButton, MarkdownView, NoticeCard, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
 import { createSignal, For, onMount, Show } from "solid-js";
 import {
   ANNOUNCEMENTS_COOKIE,
@@ -21,22 +21,6 @@ const writeCookieState = (state: AnnouncementCookieState) => {
   document.cookie = `${ANNOUNCEMENTS_COOKIE}=${serializeAnnouncementCookieState(state)}; Path=/; Max-Age=${ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS}; SameSite=Lax`;
 };
 
-const toneClass = (tone: AnnouncementDisplayEntry["tone"]) => {
-  if (tone === "success")
-    return "border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-100";
-  if (tone === "warning")
-    return "border-amber-200 bg-amber-50 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100";
-  if (tone === "danger") return "border-red-200 bg-red-50 text-red-950 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-100";
-  return "border-blue-200 bg-blue-50 text-blue-950 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-100";
-};
-
-const toneIcon = (tone: AnnouncementDisplayEntry["tone"]) => {
-  if (tone === "success") return "ti ti-circle-check";
-  if (tone === "warning") return "ti ti-alert-triangle";
-  if (tone === "danger") return "ti ti-alert-circle";
-  return "ti ti-info-circle";
-};
-
 export default function GlobalAnnouncements(props: Props) {
   const locale = useLocale();
   const t = () => platformMessages.resolve([locale()]).t;
@@ -113,27 +97,18 @@ export default function GlobalAnnouncements(props: Props) {
       <div class="flex shrink-0 flex-col gap-1">
         <For each={banners()}>
           {(banner) => (
-            <section
-              class={`flex max-h-[min(40vh,14rem)] items-start gap-2 rounded-lg border px-3 py-2 text-xs shadow-sm ${toneClass(banner.tone)}`}
-            >
-              <i class={`${toneIcon(banner.tone)} mt-0.5 shrink-0`} />
-              <div class="min-h-0 min-w-0 flex-1">
-                <p class="font-semibold">{banner.title}</p>
+            <div class="cloud-announcement">
+              <NoticeCard tone={banner.tone} title={banner.title}>
                 <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"
                 />
-              </div>
-              <button
-                type="button"
-                class="ml-auto inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md opacity-70 hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10"
-                aria-label={t().dismissBanner}
-                onClick={() => dismissBanner(banner.version)}
-              >
-                <i class="ti ti-x" />
-              </button>
-            </section>
+              </NoticeCard>
+              <IconButton size="sm" label={t().dismissBanner} onClick={() => dismissBanner(banner.version)}>
+                <i class="ti ti-x" aria-hidden="true" />
+              </IconButton>
+            </div>
           )}
         </For>
       </div>

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}>

package/src/ssr/ProfilePreferences.island.tsx

@@ -3,6 +3,8 @@ import type { CloudTheme } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
 
 type ProfilePreferencesProps = {
+  /** Set while the installation offers the mobile app. */
+  appHref?: string;
   avatarSrc?: string;
   initialTheme: CloudTheme;
   name: string;
@@ -10,7 +12,7 @@ type ProfilePreferencesProps = {
 };
 
 export default function ProfilePreferences(props: ProfilePreferencesProps) {
-  const { preferences, items, signOut, signingOut } = createProfileActions(props.initialTheme);
+  const { preferences, items, signOut, signingOut } = createProfileActions(props.initialTheme, props.appHref);
 
   const avatar = () => <Avatar name={props.name} src={props.avatarSrc} size="xs" />;
 
@@ -32,6 +34,12 @@ export default function ProfilePreferences(props: ProfilePreferencesProps) {
           <i class="ti ti-user-circle" aria-hidden="true" />
           <span>{preferences.messages().profileSettings}</span>
         </a>
+        {props.appHref && (
+          <a href={props.appHref} class="menu-item">
+            <i class="ti ti-device-mobile" aria-hidden="true" />
+            <span>{preferences.messages().app}</span>
+          </a>
+        )}
         <button type="button" class="menu-item" onClick={signOut} disabled={signingOut()}>
           <i class="ti ti-logout" aria-hidden="true" />
           <span>{preferences.messages().signOut}</span>

package/src/ssr/PwaLayout.tsx

@@ -0,0 +1,69 @@
+import { LocaleProvider, MobileShell, TabBar, type TabBarItem } from "@k2b/ui";
+import type { JSX } from "solid-js";
+import { PWA_SCOPE } from "../contracts/pwa";
+import { getLocale } from "../server/locale";
+import { readThemeFromCookieHeader } from "../shared/theme";
+import { visiblePwaParts } from "./app-navigation";
+import type { LayoutContext } from "./layout-context";
+import PwaRuntime from "./PwaRuntime.island";
+import { pwaMessages } from "./pwa-messages";
+import { getRuntimeContext } from "./runtime";
+import TimezoneCookie from "./TimezoneCookie.island";
+
+/** Parts with their own tab; Start lists every part and doubles as "More". */
+const TAB_PARTS = 3;
+
+export type PwaLayoutProps = {
+  /** The request context; the layout also sets the page's framing and referrer headers. */
+  c: LayoutContext & { header(name: string, value: string): void };
+  /** Header heading and document title. */
+  title: string;
+  /** Up-navigation inside the part, for example from a detail back to its list. */
+  back?: { href: string; label: string };
+  /** At most two icon buttons at the header end. */
+  actions?: JSX.Element;
+  children: JSX.Element;
+};
+
+/**
+ * The frame of every page in the installable mobile app (preview): the app's document head, a phone shell with a
+ * tab bar of Start and the first parts, and the browser runtime (service worker, offline notice, session keepalive).
+ * Pages render it below `/pwa/` with `ssr.pwaAccess`.
+ */
+export default function PwaLayout(props: PwaLayoutProps) {
+  const { c } = props;
+  const locale = getLocale(c);
+  const t = pwaMessages.resolve([locale]).t;
+  const user = c.get("user");
+  const cloud = c.get("settings")?.app?.name || "Cloud";
+  const page = c.get("page");
+  page.theme = readThemeFromCookieHeader(c.req.raw.headers.get("Cookie"));
+  page.title = props.title;
+  page.pwa = { name: cloud };
+  // No app page may be framed, and none leaks its address to another site.
+  c.header("Referrer-Policy", "no-referrer");
+  c.header("Content-Security-Policy", "frame-ancestors 'none'");
+
+  const parts = visiblePwaParts(getRuntimeContext(c).apps, user, locale);
+  const path = new URL(c.req.raw.url).pathname;
+  const tabs = parts.slice(0, TAB_PARTS);
+  const currentTab = tabs.find((part) => path === part.pwa.href || path.startsWith(`${part.pwa.href}/`));
+  const items: TabBarItem[] = [
+    { id: "start", label: t.start, icon: "ti ti-home", href: PWA_SCOPE, current: !currentTab },
+    ...tabs.map((part) => ({ id: part.id, label: part.name, icon: part.icon, href: part.pwa.href, current: part === currentTab })),
+  ];
+
+  return (
+    <LocaleProvider locale={locale}>
+      {/* Pages without a person show no times. Their pairing link lives only in memory, and a reload would lose it. */}
+      <TimezoneCookie reload={!!user} />
+      <MobileShell
+        header={<MobileShell.Header title={props.title} back={props.back} actions={props.actions} />}
+        footer={user && parts.length > 0 ? <TabBar label={t.tabs} items={items} /> : undefined}
+      >
+        {props.children}
+      </MobileShell>
+      <PwaRuntime keepalive={!!user} cloud={cloud} />
+    </LocaleProvider>
+  );
+}

package/src/ssr/PwaRuntime.island.tsx

@@ -0,0 +1,105 @@
+import { observeMobileShell, syncThemeColor, type ToastHandle, toast, useLocale } from "@k2b/ui";
+import { onCleanup, onMount } from "solid-js";
+import { renewAppSession } from "../browser/app-session";
+import { PWA_SCOPE, PWA_SERVICE_WORKER_PATH } from "../contracts/pwa";
+import { pwaMessages } from "./pwa-messages";
+
+/** Set once per browsing session, so the first page renews and later navigations do not. */
+const RENEWED_MARKER = "cloud.pwa.renewed";
+const KEEPALIVE_INTERVAL_MS = 60 * 60 * 1000;
+/** Matches `cloud:theme-preference` in the preference controller. */
+const THEME_PREFERENCE_EVENT = "cloud:theme-preference";
+
+export type PwaRuntimeProps = {
+  /** A person uses the app: keep the app session alive. */
+  keepalive: boolean;
+  /** The installation name, for the account notice. */
+  cloud: string;
+};
+
+const firstPageOfSession = (): boolean => {
+  try {
+    if (window.sessionStorage.getItem(RENEWED_MARKER)) return false;
+    window.sessionStorage.setItem(RENEWED_MARKER, "1");
+  } catch {}
+  return true;
+};
+
+/**
+ * The browser side of every mobile app page: the service worker, the offline notice, the app session keepalive,
+ * the status bar colour after a theme change, and the server-rendered shell's measurements.
+ */
+export default function PwaRuntime(props: PwaRuntimeProps) {
+  const locale = useLocale();
+  const t = () => pwaMessages.resolve([locale()]).t;
+
+  onMount(() => {
+    const cleanups: (() => void)[] = [];
+    onCleanup(() => {
+      for (const cleanup of cleanups) cleanup();
+    });
+
+    const shell = document.querySelector<HTMLElement>(".k2b-mobile-shell");
+    if (shell) cleanups.push(observeMobileShell(shell));
+
+    // The launch bounce marks its return; the page is here now, so the marker leaves the address.
+    const url = new URL(location.href);
+    if (url.searchParams.has("pwa_launch")) {
+      url.searchParams.delete("pwa_launch");
+      history.replaceState(history.state, "", url.pathname + url.search + url.hash);
+    }
+
+    // Registration fails in private windows and insecure contexts; the app then simply works online only.
+    void navigator.serviceWorker?.register(PWA_SERVICE_WORKER_PATH, { scope: PWA_SCOPE, updateViaCache: "none" }).catch(() => undefined);
+
+    let offlineToast: ToastHandle | undefined;
+    const offline = () => {
+      offlineToast ??= toast(t().offline, { duration: 0, iconClass: "ti ti-wifi-off" });
+    };
+    const online = () => {
+      offlineToast?.dismiss();
+      offlineToast = undefined;
+    };
+    if (!navigator.onLine) offline();
+    window.addEventListener("offline", offline);
+    window.addEventListener("online", online);
+    cleanups.push(() => {
+      window.removeEventListener("offline", offline);
+      window.removeEventListener("online", online);
+      offlineToast?.dismiss();
+    });
+
+    const syncTheme = () => syncThemeColor();
+    window.addEventListener(THEME_PREFERENCE_EVENT, syncTheme);
+    cleanups.push(() => window.removeEventListener(THEME_PREFERENCE_EVENT, syncTheme));
+
+    if (!props.keepalive) return;
+
+    let otherAccountShown = false;
+    let disposed = false;
+    cleanups.push(() => {
+      disposed = true;
+    });
+    const renew = async () => {
+      const { otherAccount } = await renewAppSession();
+      if (disposed || !otherAccount || otherAccountShown) return;
+      otherAccountShown = true;
+      toast(t().otherAccount({ cloud: props.cloud, name: otherAccount.name }), { duration: 0, iconClass: "ti ti-alert-triangle" });
+    };
+
+    if (firstPageOfSession()) void renew();
+    const visible = () => {
+      if (document.visibilityState === "visible") void renew();
+    };
+    document.addEventListener("visibilitychange", visible);
+    const timer = setInterval(() => {
+      if (document.visibilityState === "visible") void renew();
+    }, KEEPALIVE_INTERVAL_MS);
+    cleanups.push(() => {
+      document.removeEventListener("visibilitychange", visible);
+      clearInterval(timer);
+    });
+  });
+
+  return null;
+}

package/src/ssr/TimezoneCookie.island.tsx

@@ -2,12 +2,18 @@ import { cookies } from "@k2b/stdlib/browser";
 import { onMount } from "solid-js";
 import { TIMEZONE_COOKIE } from "../shared/time";
 
-export default function TimezoneCookie() {
+export type TimezoneCookieProps = {
+  /** Reload once after a timezone change, so the page shows times in the browser's zone. Defaults to `true`. */
+  reload?: boolean;
+};
+
+export default function TimezoneCookie(props: TimezoneCookieProps) {
   onMount(() => {
     const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     const current = cookies.readCookie(TIMEZONE_COOKIE);
     if (timeZone && current !== timeZone) {
       cookies.writeCookie(TIMEZONE_COOKIE, timeZone);
+      if (props.reload === false) return;
       try {
         if (sessionStorage.getItem("cloud.timezone.reload") !== timeZone) {
           sessionStorage.setItem("cloud.timezone.reload", timeZone);

package/src/ssr/app-navigation.ts

@@ -1,5 +1,7 @@
 import type { RuntimeAppMeta } from "../contracts/app";
-import { hasRole, type User } from "../contracts/shared";
+import { isPwaPartId } from "../contracts/pwa";
+import { hasRole, type Role, type User } from "../contracts/shared";
+import { resolveAppPresentation } from "../shared/app-presentation";
 
 export type VisibleNavigationApp = RuntimeAppMeta & {
   nav: NonNullable<RuntimeAppMeta["nav"]>;
@@ -25,17 +27,30 @@ export const hasDedicatedRuntimeRoute = (apps: readonly RuntimeAppMeta[], pathna
   return !!match && match.app.id !== currentAppId;
 };
 
+const hasAnyRole = (user: User | undefined, roles: readonly Role[] | undefined): boolean =>
+  !roles || (!!user && roles.some((role) => (role === "guest" ? user.profile === "guest" : hasRole(user, role))));
+
 /** Apps rendered in the navigation for a given authenticated user. */
 export const visibleNavigationApps = (apps: readonly RuntimeAppMeta[], user: User | undefined): VisibleNavigationApp[] =>
   apps.filter(
     (app): app is VisibleNavigationApp =>
-      !!app.nav &&
-      app.nav.section !== "hidden" &&
-      (!app.nav.requiresAuth || !!user) &&
-      (!app.nav.requiresRoles ||
-        (!!user &&
-          app.nav.requiresRoles.some((role) => {
-            if (role === "guest") return user.profile === "guest";
-            return hasRole(user, role);
-          }))),
+      !!app.nav && app.nav.section !== "hidden" && (!app.nav.requiresAuth || !!user) && hasAnyRole(user, app.nav.requiresRoles),
   );
+
+export type VisiblePwaPart = RuntimeAppMeta & { pwa: NonNullable<RuntimeAppMeta["pwa"]> };
+
+/**
+ * Parts of the mobile app the user may see, localized and sorted by name. Empty without a user. The roles are
+ * coarse visibility like the navigation's; part routes and services still authorize.
+ */
+export const visiblePwaParts = (apps: readonly RuntimeAppMeta[], user: User | undefined, locale: string): VisiblePwaPart[] => {
+  if (!user) return [];
+  // Like the gateway, which routes /pwa/<id> only to a valid part id that claims it.
+  return apps
+    .filter(
+      (app): app is VisiblePwaPart =>
+        !!app.pwa && isPwaPartId(app.id) && app.routes.includes(app.pwa.href) && hasAnyRole(user, app.pwa.requiresRoles),
+    )
+    .map((app) => resolveAppPresentation(app, locale))
+    .sort((a, b) => a.name.localeCompare(b.name, locale) || a.id.localeCompare(b.id));
+};

package/src/ssr/index.ts

@@ -2,13 +2,20 @@
 // Do NOT import from this barrel in .island.tsx or .client.tsx files!
 
 export { default as AdminLayout } from "./AdminLayout";
-export { hasDedicatedRuntimeRoute, resolveRuntimeRoute, visibleNavigationApps } from "./app-navigation";
+export {
+  hasDedicatedRuntimeRoute,
+  resolveRuntimeRoute,
+  type VisiblePwaPart,
+  visibleNavigationApps,
+  visiblePwaParts,
+} from "./app-navigation";
 export { default as Layout } from "./Layout";
 export {
   default as MinimalLayout,
   type MinimalLayoutPreferencePosition,
   type MinimalLayoutProps,
 } from "./MinimalLayout";
+export { default as PwaLayout, type PwaLayoutProps } from "./PwaLayout";
 export { requestPath } from "./request-path";
 export { getLocalizedRuntimeContext, getRuntimeContext, type RuntimeContext } from "./runtime";
 export type { UrlFilterField } from "./url-filter";