@k2b/cloud 0.32.0 → 0.33.0

package/src/ssr/{LayoutPreferences.island.tsx → LayoutPreferences.tsx}

@@ -1,9 +1,9 @@
 import { Dropdown, type DropdownPosition, useLocale } from "@k2b/ui";
-import type { CloudTheme } from "../shared/theme";
+import type { CloudThemePreference } from "../shared/theme";
 import { createPreferenceController } from "./preference-controller";
 
 type LayoutPreferencesProps = {
-  initialTheme: CloudTheme;
+  initialTheme: CloudThemePreference;
   position: DropdownPosition;
 };
 

package/src/ssr/LayoutRail.tsx

@@ -1,75 +1,21 @@
-import type { NavigationSearchItem } from "../browser/navigation-search";
-import type { RailSnapshot } from "../contracts/rail-preferences";
-import type { CloudTheme } from "../shared/theme";
-import AppLaunchpad, { type AppLaunchpadApp } from "./AppLaunchpad.island";
-import type { GlobalSearchHelpApp } from "./GlobalSearchHelpDialog";
-import GlobalSearchTrigger from "./GlobalSearchTrigger.island";
-import LayoutHelpTrigger from "./LayoutHelpTrigger.island";
-import ProfilePreferences from "./ProfilePreferences.island";
-import RailApps from "./RailApps.island";
+import { useLocale } from "@k2b/ui";
+import CloudShell from "./CloudShell.island";
+import { platformMessages } from "./platform-messages";
 import type { RailApp } from "./rail-navigation";
 export type LayoutAppLink = RailApp;
 
-type LayoutRailProps = {
-  accent?: string;
-  /** Set while the installation offers the mobile app. */
-  appHref?: string;
-  appsLabel: string;
-  homeLabel: string;
-  launchpadApps: AppLaunchpadApp[];
-  legalLinks: Array<{ label: string; href: string; icon?: string }>;
-  openAppsLabel: string;
-  apps: RailApp[];
-  railSettings: RailSnapshot;
-  /** `pathname + search` of the request; the island resolves it against the browser origin. */
-  currentPath: string;
-  profileAvatarSrc?: string;
-  profileName: string;
-  searchHelpApps: GlobalSearchHelpApp[];
-  searchLinks?: NavigationSearchItem[];
-  theme: CloudTheme;
-};
-
-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 } : {}) };
+/** The rail frame and Home stay server markup; only the navigation is interactive. */
+export default function LayoutRail(props: { currentPath: string }) {
+  const locale = useLocale();
+  const t = () => platformMessages.resolve([locale()]).t;
   return (
-    <>
-      <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 })}
-      </script>
-      <script id="cloud-rail-data" type="application/json">
-        {jsonScript({ apps: props.apps, settings: props.railSettings })}
-      </script>
-      <aside class="layout-rail hidden w-10 shrink-0 flex-col md:flex">
-        <div class="layout-rail-logo flex h-[2.875rem] shrink-0 items-center justify-center">
-          <a href="/" aria-label={props.homeLabel}>
-            <img src="/branding/logo" alt="Logo" class="h-5 w-5" />
-          </a>
-        </div>
-        <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={profile}
-            apps={props.launchpadApps}
-            legalLinks={props.legalLinks}
-            variant="rail"
-            label={props.openAppsLabel}
-          />
-          <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
-              appHref={props.appHref}
-              avatarSrc={props.profileAvatarSrc}
-              initialTheme={props.theme}
-              name={props.profileName}
-            />
-          </div>
-        </nav>
-      </aside>
-    </>
+    <aside class="layout-rail hidden w-10 shrink-0 flex-col md:flex">
+      <div class="layout-rail-logo flex h-[2.875rem] shrink-0 items-center justify-center">
+        <a href="/" aria-label={t().home}>
+          <img src="/branding/logo" alt="Logo" class="h-5 w-5" />
+        </a>
+      </div>
+      <CloudShell slot="rail" currentPath={props.currentPath} />
+    </aside>
   );
 }

package/src/ssr/MinimalLayout.tsx

@@ -2,7 +2,7 @@ import { LocaleProvider } from "@k2b/ui";
 import type { JSX } from "solid-js/jsx-runtime";
 import { getLocale } from "../server/locale";
 import { resolveAppPresentations } from "../shared/app-presentation";
-import { readThemeFromCookieHeader } from "../shared/theme";
+import { readThemePreferenceFromCookieHeader } from "../shared/theme";
 import type { MinimalLayoutContext } from "./layout-context";
 import MinimalLayoutPreferences from "./MinimalLayoutPreferences.island";
 import { profilePreferencesMessages } from "./profile-preferences-messages";
@@ -26,9 +26,8 @@ export type MinimalLayoutProps = {
 
 export default function MinimalLayout(props: MinimalLayoutProps) {
   const cookie = props.c.req.raw.headers.get("Cookie") ?? "";
-  const theme = readThemeFromCookieHeader(cookie);
+  const theme = readThemePreferenceFromCookieHeader(cookie);
   const locale = getLocale(props.c);
-  props.c.get("page").theme = theme;
 
   if (props.preferences === false) {
     return (

package/src/ssr/MinimalLayoutPreferences.island.tsx

@@ -1,21 +1,15 @@
-import { Button, Dropdown, useLocale } from "@k2b/ui";
+import { Dropdown, useLocale } from "@k2b/ui";
 import { canonicalLocale } from "../shared/locale";
 import { type ProfilePreferenceLocale, profilePreferenceLocale, setLocalePreference } from "../shared/locale-preference";
-import type { CloudTheme } from "../shared/theme";
+import type { CloudThemePreference } from "../shared/theme";
 import { createPreferenceController } from "./preference-controller";
 
-/**
- * Labeled language and theme controls for the MinimalLayout footer. The
- * language trigger names the current language; the theme button names the
- * mode it switches to, like every other Cloud preference menu. Below `md` both
- * are compact, the language code and the theme icon with the full names as
- * accessible labels, so they fit next to the legal links on a phone. CSS picks
- * the form, so the server response is already final.
- */
-export default function MinimalLayoutPreferences(props: { initialTheme: CloudTheme }) {
+/** Both menus name the current choice; compact triggers keep accessible names below md. */
+export default function MinimalLayoutPreferences(props: { initialTheme: CloudThemePreference }) {
   const locale = useLocale();
   const preferences = createPreferenceController(props.initialTheme, locale);
   const t = preferences.messages;
+  const currentTheme = () => preferences.themeOption(preferences.theme());
   const language = () => profilePreferenceLocale(locale());
   const languageName = () => (language() === "de" ? t().switchToGerman : t().switchToEnglish);
   // Keep a regional locale such as en-GB when its language is chosen again,
@@ -43,10 +37,13 @@ export default function MinimalLayoutPreferences(props: { initialTheme: CloudThe
           <i class="ti ti-chevron-down hidden md:inline" aria-hidden="true" />
         </Dropdown.Trigger>
       </Dropdown.Root>
-      <Button aria-label={preferences.themeLabel()} onClick={preferences.toggleTheme} size="sm" variant="ghost">
-        <i class={preferences.theme() === "light" ? "ti ti-moon" : "ti ti-sun-high"} aria-hidden="true" />
-        <span class="hidden md:inline">{preferences.themeLabel()}</span>
-      </Button>
+      <Dropdown.Root label={t().appearance} position="top-right" width="12rem" items={preferences.appearance().items}>
+        <Dropdown.Trigger label={`${t().appearance}: ${currentTheme().label}`} size="sm" tooltip={false} variant="ghost">
+          <i class={currentTheme().icon} aria-hidden="true" />
+          <span class="hidden md:inline">{currentTheme().label}</span>
+          <i class="ti ti-chevron-down hidden md:inline" aria-hidden="true" />
+        </Dropdown.Trigger>
+      </Dropdown.Root>
     </div>
   );
 }

package/src/ssr/MobileNavigation.tsx

@@ -1,8 +1,10 @@
 import { BottomSheet, Navigation, SegmentedControl, useLocale } from "@k2b/ui";
 import { createSignal, onCleanup, Show } from "solid-js";
 import { type AppLaunchpadContext, AppLaunchpadPanel } from "./AppLaunchpadPanel";
+import { appAccentStyle } from "./app-appearance";
 import { openMobileMenu } from "./mobile-menu-history";
 import { platformMessages } from "./platform-messages";
+import { readShellData } from "./shell-data";
 import { observeWorkspaceNavigation, readWorkspaceNavigation } from "./workspace-navigation";
 
 export function openCloudMobileMenu(apps: AppLaunchpadContext) {
@@ -58,14 +60,17 @@ function MobileNavigation(props: {
           when={workspace() && tab() === "app"}
           fallback={<AppLaunchpadPanel surface="sheet" {...props.apps} close={props.close} beforeSelect={props.beforeSelect} />}
         >
-          <Navigation
-            navigation={workspace()!.navigation}
-            label={workspace()!.label || t().appMenu}
-            beforeSelect={async () => {
-              const owner = workspace()?.owner;
-              return (await props.beforeSelect()) && Boolean(owner?.isConnected && readWorkspaceNavigation()?.owner === owner);
-            }}
-          />
+          {/* The sheet opens outside the app canvas, so the app menu takes the app's accent here, as the canvas does. */}
+          <div class="app-accent-scope" style={appAccentStyle(readShellData()?.accent)}>
+            <Navigation
+              navigation={workspace()!.navigation}
+              label={workspace()!.label || t().appMenu}
+              beforeSelect={async () => {
+                const owner = workspace()?.owner;
+                return (await props.beforeSelect()) && Boolean(owner?.isConnected && readWorkspaceNavigation()?.owner === owner);
+              }}
+            />
+          </div>
         </Show>
       </BottomSheet.Body>
     </BottomSheet>

package/src/ssr/MobileProfileActions.tsx

@@ -1,10 +1,10 @@
 import { documentNavigate } from "@k2b/ssr/nav";
-import { Button, ButtonLink } from "@k2b/ui";
-import type { CloudTheme } from "../shared/theme";
+import { Button, ButtonLink, SegmentedControl } from "@k2b/ui";
+import type { CloudThemePreference } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
 
 export function MobileProfileActions(props: {
-  profile: { name: string; theme: CloudTheme; appHref?: string };
+  profile: { name: string; theme: CloudThemePreference; appHref?: string };
   beforeSelect: () => Promise<boolean>;
 }) {
   const { preferences, signingOut, signOut } = createProfileActions(props.profile.theme, props.profile.appHref);
@@ -17,6 +17,13 @@ export function MobileProfileActions(props: {
   };
   return (
     <section class="cloud-mobile-profile" aria-label={preferences.messages().menuLabel}>
+      <SegmentedControl
+        class="cloud-mobile-profile__appearance"
+        ariaLabel={preferences.messages().appearance}
+        options={preferences.themeOptions()}
+        value={preferences.theme}
+        onValueChange={preferences.setTheme}
+      />
       <ButtonLink href="/me" variant="ghost" onClick={navigate("/me")}>
         <i class="ti ti-user-circle" aria-hidden="true" />
         {preferences.messages().profileSettings}
@@ -27,10 +34,6 @@ export function MobileProfileActions(props: {
           {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()}
-      </Button>
       <Button
         variant="ghost"
         onClick={async () => {

package/src/ssr/PageTrailRow.tsx

@@ -0,0 +1,14 @@
+import { PageTitle, type PageTrailState } from "@k2b/ui";
+
+/**
+ * The shell's own place for the way up, above pages without a workspace. It
+ * shows only on a page with a page above it, and steps back when the page
+ * renders a workspace (whose head shows it) or its own `PageTrail`.
+ */
+export default function PageTrailRow(props: { trail: PageTrailState }) {
+  return (
+    <div class="layout-page-head" data-trail={props.trail.ancestors.length ? "up" : "title"}>
+      <PageTitle trail={props.trail} as="p" fallback />
+    </div>
+  );
+}

package/src/ssr/{ProfilePreferences.island.tsx → ProfilePreferences.tsx}

@@ -1,12 +1,12 @@
-import { Avatar, Dropdown } from "@k2b/ui";
-import type { CloudTheme } from "../shared/theme";
+import { Avatar, Dropdown, SegmentedControl } from "@k2b/ui";
+import type { CloudThemePreference } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
 
 type ProfilePreferencesProps = {
   /** Set while the installation offers the mobile app. */
   appHref?: string;
   avatarSrc?: string;
-  initialTheme: CloudTheme;
+  initialTheme: CloudThemePreference;
   name: string;
 };
 
@@ -26,10 +26,15 @@ export default function ProfilePreferences(props: ProfilePreferencesProps) {
         {avatar()}
       </button>
       <div class="layout-profile-preferences__panel dropdown-menu-surface">
-        <button type="button" class="menu-item" onClick={preferences.toggleTheme}>
-          <i class={`ti ${preferences.theme() === "light" ? "ti-moon" : "ti-sun-high"}`} aria-hidden="true" />
-          <span>{preferences.themeLabel()}</span>
-        </button>
+        <div class="layout-profile-preferences__appearance">
+          <SegmentedControl
+            size="sm"
+            ariaLabel={preferences.messages().appearance}
+            options={preferences.themeOptions().map(({ value, label }) => ({ value, label }))}
+            value={preferences.theme}
+            onValueChange={preferences.setTheme}
+          />
+        </div>
         <button type="button" class="menu-item" onClick={preferences.toggleLanguage}>
           <i class="ti ti-language" aria-hidden="true" />
           <span>{preferences.languageLabel()}</span>

package/src/ssr/PwaLayout.tsx

@@ -2,7 +2,6 @@ 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";
@@ -37,7 +36,6 @@ export default function PwaLayout(props: PwaLayoutProps) {
   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.

package/src/ssr/PwaRuntime.island.tsx

@@ -7,7 +7,7 @@ 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. */
+/** Fires for preference changes and system scheme changes from the head script. */
 const THEME_PREFERENCE_EVENT = "cloud:theme-preference";
 
 export type PwaRuntimeProps = {

package/src/ssr/ShellRuntime.island.tsx

@@ -0,0 +1,170 @@
+import type { HelpDocumentManifest } from "@k2b/cloud/shared";
+import {
+  followPageTrail,
+  installAppWorkspaceController,
+  installPageTitleController,
+  serializeAppWorkspaceLayoutState,
+  useLocale,
+} from "@k2b/ui";
+import { createEffect, onCleanup, onMount } from "solid-js";
+import { appWorkspaceCookieName, readAppWorkspaceLayoutCookie } from "../_internal/app-workspace-state";
+import { registerContextAwareCommand } from "../browser/command-bridge";
+import { attachCommandShortcuts } from "../browser/command-shortcuts";
+import { navigationSearchItems } from "../browser/navigation-search";
+import { importOnDemand } from "../browser/reload";
+import { registerGlobalSearchHost } from "../browser/search-bridge";
+import {
+  ANNOUNCEMENTS_COOKIE,
+  ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS,
+  mergeAnnouncementCookieState,
+  parseAnnouncementCookieHeader,
+  serializeAnnouncementCookieState,
+} from "../contracts/announcement-cookie";
+import type { AnnouncementDisplayEntry } from "../contracts/announcements";
+import { createGlobalSearchHost } from "./global-search-host";
+import { LayoutHelpDocuments } from "./layout-help-registry";
+import { installPageTrailRuntime } from "./page-trail-runtime";
+import { platformMessages } from "./platform-messages";
+import { readShellData } from "./shell-data";
+import { syncTimezoneCookie } from "./timezone-cookie";
+
+export type ShellRuntimeProps = {
+  /** Layout pages outside focus mode: keep the current app's workspace layout in its cookie. */
+  workspace?: { appId?: string };
+  /** Layout pages: page titles, the way up (Alt+Up) and its per-tab memory. */
+  pageTrail?: boolean;
+  /** The current app's Help documents. */
+  help?: { documents: readonly HelpDocumentManifest[]; pageBase: string };
+  /** Layout pages outside focus mode: the search host, Cmd/Ctrl+K, the Help command (Shift+/) and command shortcuts. */
+  commands?: { searchResources: boolean };
+  /** Signed-in pages: refresh this browser's push endpoint. */
+  push?: boolean;
+  /** Announcements the person has not seen yet; a dialog shows them once. */
+  announcements?: { entries: AnnouncementDisplayEntry[]; latestVersion: number };
+  /** Banners rendered by Layout: their dismiss buttons record the dismissal. */
+  banners?: boolean;
+};
+
+/** The search rows of the shell's destinations; the page carries each link once, without the fields a row repeats. */
+const searchItems = () => {
+  const data = readShellData();
+  if (!data) return [];
+  const apps = Object.entries(data.searchLinks).flatMap(([id, searchLinks]) => {
+    const app = data.apps.find((candidate) => candidate.id === id);
+    return app ? [{ id, name: app.label, icon: app.iconClass, searchLinks }] : [];
+  });
+  return navigationSearchItems(
+    apps,
+    apps.map((app) => app.id),
+  );
+};
+
+export default function ShellRuntime(props: ShellRuntimeProps) {
+  const locale = useLocale();
+  const t = () => platformMessages.resolve([locale()]).t;
+  onMount(() => syncTimezoneCookie(true));
+
+  if (props.workspace) {
+    onMount(() => {
+      const appId = props.workspace?.appId;
+      onCleanup(
+        installAppWorkspaceController({
+          readState: () => readAppWorkspaceLayoutCookie(document.cookie, appId),
+          writeState: (state) => {
+            if (!appId) return;
+            const secure = window.location.protocol === "https:" ? "; Secure" : "";
+            document.cookie = `${appWorkspaceCookieName(appId)}=${serializeAppWorkspaceLayoutState(state)}; Path=/; Max-Age=31536000; SameSite=Lax${secure}`;
+          },
+        }),
+      );
+    });
+  }
+  if (props.pageTrail) {
+    onMount(() => {
+      const messages = t();
+      const disposeTitles = installPageTitleController(document);
+      const disposeFollow = followPageTrail(document);
+      const disposeRuntime = installPageTrailRuntime((page) => ({
+        title: messages.pageUp({ page }),
+        description: messages.pageUpDescription,
+      }));
+      onCleanup(() => {
+        disposeTitles();
+        disposeFollow();
+        disposeRuntime();
+      });
+    });
+  }
+  if (props.commands) {
+    const host = createGlobalSearchHost(searchItems, props.commands.searchResources);
+    onMount(() => onCleanup(registerGlobalSearchHost(host.open, host.dispose)));
+    // Command schemas and the capability client load with the first shortcut.
+    onMount(() =>
+      onCleanup(
+        attachCommandShortcuts(
+          (command) =>
+            void importOnDemand(() => import("../browser/commands")).then((commands) => commands?.runContextAwareCommand(command)),
+        ),
+      ),
+    );
+    createEffect(() =>
+      onCleanup(
+        registerContextAwareCommand({
+          id: "cloud.search",
+          title: t().openGlobalSearch,
+          description: t().globalSearchDescription,
+          icon: "ti ti-search",
+          shortcut: "mod+k",
+          action: { search: {} },
+        }),
+      ),
+    );
+    createEffect(() =>
+      onCleanup(
+        registerContextAwareCommand({
+          id: "cloud.help",
+          title: t().openShortcutHelp,
+          description: t().shortcutHelpDescription,
+          icon: "ti ti-help-circle",
+          shortcut: "shift+/",
+          // Returning the load keeps the Command busy until the dialog is open; a second press opens no second dialog.
+          action: () =>
+            importOnDemand(() => import("./LayoutHelp")).then((help) => {
+              const data = readShellData();
+              help?.openLayoutHelpDialog(data?.searchHelpApps ?? [], data?.accent);
+            }),
+        }),
+      ),
+    );
+  }
+  onMount(() => {
+    if (props.push) {
+      void import("../browser/notifications")
+        .then(({ browserNotificationClient }) => browserNotificationClient.refreshExisting())
+        .catch((error) => {
+          console.warn("[notifications] Failed to refresh the browser endpoint", error);
+        });
+    }
+    if (props.announcements?.entries.length) {
+      const announcements = props.announcements;
+      void importOnDemand(() => import("./announcements-dialog")).then((loaded) => loaded?.openAnnouncementsDialog(announcements));
+    }
+    if (props.banners) {
+      const dismiss = (event: MouseEvent) => {
+        if (!(event.target instanceof Element)) return;
+        const button = event.target.closest<HTMLButtonElement>("[data-cloud-announcement-dismiss]");
+        if (!button) return;
+        const version = Number(button.dataset.cloudAnnouncementDismiss);
+        const next = mergeAnnouncementCookieState(parseAnnouncementCookieHeader(document.cookie), { dismissedBannerVersions: [version] });
+        document.cookie = `${ANNOUNCEMENTS_COOKIE}=${serializeAnnouncementCookieState(next)}; Path=/; Max-Age=${ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS}; SameSite=Lax`;
+        const banner = button.closest(".cloud-announcement");
+        const list = banner?.parentElement;
+        banner?.remove();
+        if (list && !list.querySelector(".cloud-announcement")) list.remove();
+      };
+      document.addEventListener("click", dismiss);
+      onCleanup(() => document.removeEventListener("click", dismiss));
+    }
+  });
+  return props.help ? <LayoutHelpDocuments documents={props.help.documents} pageBase={props.help.pageBase} /> : null;
+}

package/src/ssr/TimezoneCookie.island.tsx

@@ -1,29 +1,13 @@
-import { cookies } from "@k2b/stdlib/browser";
 import { onMount } from "solid-js";
-import { TIMEZONE_COOKIE } from "../shared/time";
+import { syncTimezoneCookie } from "./timezone-cookie";
 
 export type TimezoneCookieProps = {
   /** Reload once after a timezone change, so the page shows times in the browser's zone. Defaults to `true`. */
   reload?: boolean;
 };
 
+/** The timezone cookie for layouts without the shell runtime: `MinimalLayout` and `PwaLayout`. */
 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);
-          window.location.reload();
-        }
-      } catch {
-        // Cookie persistence still succeeds; the next navigation will render with the browser timezone.
-      }
-    }
-  });
-
+  onMount(() => syncTimezoneCookie(props.reload !== false));
   return null;
 }

package/src/ssr/WorkspaceNavigationProvider.tsx

@@ -5,12 +5,31 @@ import { provideWorkspaceNavigation } from "./workspace-navigation";
 export default function WorkspaceNavigationProvider(props: { navigation: NavigationController; label: string }) {
   let owner!: HTMLScriptElement;
   provideWorkspaceNavigation(props.navigation, { label: () => props.label, owner: () => owner });
+  const snapshot = () => {
+    const switcher = props.navigation.switcher?.();
+    return {
+      label: props.label,
+      items: props.navigation.items(),
+      ...(switcher
+        ? {
+            switcher: {
+              currentId: switcher.currentId,
+              label: switcher.label,
+              description: switcher.description,
+              icon: switcher.icon,
+              color: switcher.color,
+              switchLabel: switcher.switchLabel,
+            },
+          }
+        : {}),
+    };
+  };
   return (
     <script
       ref={owner}
       type="application/json"
       data-cloud-workspace-navigation
-      innerHTML={JSON.stringify({ label: props.label, items: props.navigation.items() }).replace(/</g, "\\u003c")}
+      innerHTML={JSON.stringify(snapshot()).replace(/</g, "\\u003c")}
     />
   );
 }

package/src/ssr/announcements-dialog.tsx

@@ -0,0 +1,66 @@
+import { Button, dialogCore, MarkdownView, PanelDialog, panelDialogOptions, useLocale } from "@k2b/ui";
+import { For } from "solid-js";
+import {
+  ANNOUNCEMENTS_COOKIE,
+  ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS,
+  mergeAnnouncementCookieState,
+  parseAnnouncementCookieHeader,
+  serializeAnnouncementCookieState,
+} from "../contracts/announcement-cookie";
+import type { AnnouncementDisplayEntry } from "../contracts/announcements";
+import { platformMessages } from "./platform-messages";
+
+function AnnouncementsPanel(props: { entries: AnnouncementDisplayEntry[]; close: () => void }) {
+  const locale = useLocale();
+  const t = () => platformMessages.resolve([locale()]).t;
+  return (
+    <PanelDialog>
+      <PanelDialog.Header
+        title={t().announcements}
+        subtitle={t().latestPlatformUpdates}
+        icon="ti ti-speakerphone text-blue-500"
+        close={props.close}
+      />
+      <PanelDialog.Body>
+        <For each={props.entries}>
+          {(entry) => (
+            <article class="panel-dialog-section rounded-[var(--ui-radius-surface)] p-4">
+              <div class="mb-3 flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                  <h2 class="text-base font-semibold text-primary">{entry.title}</h2>
+                  <p class="mt-0.5 text-xs text-dimmed">
+                    {new Date(entry.publishedAt).toLocaleDateString(locale(), {
+                      year: "numeric",
+                      month: "short",
+                      day: "numeric",
+                    })}
+                  </p>
+                </div>
+                <span class="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-medium text-dimmed dark:bg-zinc-800">v{entry.version}</span>
+              </div>
+              <MarkdownView trustedHtml={entry.bodyHtml} />
+            </article>
+          )}
+        </For>
+      </PanelDialog.Body>
+      <PanelDialog.Footer>
+        <span />
+        <Button size="sm" onClick={props.close}>
+          {t().gotIt}
+        </Button>
+      </PanelDialog.Footer>
+    </PanelDialog>
+  );
+}
+
+/** Shows the announcements the person has not seen yet, and records them as seen once the dialog closes. */
+export function openAnnouncementsDialog(props: { entries: AnnouncementDisplayEntry[]; latestVersion: number }) {
+  void dialogCore
+    .open<void>((close) => <AnnouncementsPanel entries={props.entries} close={() => close()} />, panelDialogOptions)
+    .then(() => {
+      const next = mergeAnnouncementCookieState(parseAnnouncementCookieHeader(document.cookie), {
+        seenAnnouncementVersion: props.latestVersion,
+      });
+      document.cookie = `${ANNOUNCEMENTS_COOKIE}=${serializeAnnouncementCookieState(next)}; Path=/; Max-Age=${ANNOUNCEMENTS_COOKIE_MAX_AGE_SECONDS}; SameSite=Lax`;
+    });
+}