@k2b/cloud 0.32.0 → 0.34.0

package/src/ssr/LayoutHelpTrigger.tsx

@@ -0,0 +1,49 @@
+import { IconButton, Tooltip, useLocale } from "@k2b/ui";
+import { importOnDemand } from "../browser/reload";
+import { createBusyAction } from "./busy-action";
+import { platformMessages } from "./platform-messages";
+
+type LayoutHelpTriggerProps = {
+  variant: "header" | "rail";
+  class?: string;
+};
+
+/** Opens end-user help from either the desktop rail or the compact header. */
+export default function LayoutHelpTrigger(props: LayoutHelpTriggerProps) {
+  const locale = useLocale();
+  const t = () => platformMessages.resolve([locale()]).t;
+  const action = createBusyAction();
+  const openHelp = () =>
+    action.run(
+      () => importOnDemand(() => import("./LayoutHelp")),
+      (help) => help.openLayoutHelpDialog(),
+    );
+
+  if (props.variant === "rail")
+    return (
+      <Tooltip.Trigger
+        type="button"
+        class={`rail-item text-blue-500 hover:bg-blue-500/10 hover:text-blue-600 dark:text-blue-400 dark:hover:bg-blue-500/15 dark:hover:text-blue-300 ${props.class ?? ""}`}
+        onClick={openHelp}
+        aria-busy={action.busy() ? "true" : undefined}
+        aria-label={t().openHelp}
+        placement="right"
+        delay={0}
+        content={t().helpShortcut}
+      >
+        <i class={`${action.busy() ? "ti ti-loader-2 animate-spin" : "ti ti-help-circle"} text-base`} />
+      </Tooltip.Trigger>
+    );
+
+  return (
+    <IconButton
+      class={props.class}
+      onClick={openHelp}
+      aria-busy={action.busy() ? "true" : undefined}
+      label={t().openHelp}
+      title={t().helpShortcut}
+    >
+      <i class={`${action.busy() ? "ti ti-loader-2 animate-spin" : "ti ti-help-circle"} text-base`} />
+    </IconButton>
+  );
+}

package/src/ssr/LayoutPreferences.tsx

@@ -0,0 +1,31 @@
+import { Dropdown, type DropdownPosition, useLocale } from "@k2b/ui";
+import type { CloudThemePreference } from "../shared/theme";
+import { createPreferenceController } from "./preference-controller";
+
+type LayoutPreferencesProps = {
+  initialTheme: CloudThemePreference;
+  position: DropdownPosition;
+};
+
+export default function LayoutPreferences(props: LayoutPreferencesProps) {
+  const locale = useLocale();
+  const preferences = createPreferenceController(props.initialTheme, locale);
+
+  return (
+    <>
+      <Dropdown.Root
+        items={preferences.items()}
+        label={preferences.messages().preferencesMenuLabel}
+        position={props.position}
+        width="14rem"
+      >
+        <Dropdown.Trigger iconOnly label={preferences.messages().preferencesMenuLabel} size="sm" variant="secondary">
+          <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
+        </Dropdown.Trigger>
+      </Dropdown.Root>
+      <span class="sr-only" aria-live="polite">
+        {preferences.themeAnnouncement()}
+      </span>
+    </>
+  );
+}

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,18 +1,12 @@
-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";
+import { ThemeCycleButton } from "./ThemeCycleButton";
 
-/**
- * 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 }) {
+/** Language opens a menu; appearance cycles in place and keeps its accessible name below md. */
+export default function MinimalLayoutPreferences(props: { initialTheme: CloudThemePreference }) {
   const locale = useLocale();
   const preferences = createPreferenceController(props.initialTheme, locale);
   const t = preferences.messages;
@@ -43,10 +37,7 @@ 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>
+      <ThemeCycleButton preferences={preferences} size="sm" variant="ghost" compact />
     </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,11 @@
 import { documentNavigate } from "@k2b/ssr/nav";
 import { Button, ButtonLink } from "@k2b/ui";
-import type { CloudTheme } from "../shared/theme";
+import type { CloudThemePreference } from "../shared/theme";
 import { createProfileActions } from "./profile-actions";
+import { ThemeCycleButton } from "./ThemeCycleButton";
 
 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 +18,7 @@ export function MobileProfileActions(props: {
   };
   return (
     <section class="cloud-mobile-profile" aria-label={preferences.messages().menuLabel}>
+      <ThemeCycleButton preferences={preferences} variant="ghost" />
       <ButtonLink href="/me" variant="ghost" onClick={navigate("/me")}>
         <i class="ti ti-user-circle" aria-hidden="true" />
         {preferences.messages().profileSettings}
@@ -27,10 +29,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 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,9 +26,9 @@ 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 type="button" class="menu-item" aria-label={preferences.themeCycleLabel()} onClick={preferences.cycleTheme}>
+          <i class={preferences.themeOption(preferences.theme()).icon} aria-hidden="true" />
+          <span>{preferences.themeOption(preferences.theme()).label}</span>
         </button>
         <button type="button" class="menu-item" onClick={preferences.toggleLanguage}>
           <i class="ti ti-language" aria-hidden="true" />
@@ -66,6 +66,9 @@ export default function ProfilePreferences(props: ProfilePreferencesProps) {
           {avatar()}
         </Dropdown.Trigger>
       </Dropdown.Root>
+      <span class="sr-only" aria-live="polite">
+        {preferences.themeAnnouncement()}
+      </span>
     </div>
   );
 }

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,166 @@
+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) => help?.openLayoutHelpDialog()),
+        }),
+      ),
+    );
+  }
+  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/ThemeCycleButton.tsx

@@ -0,0 +1,46 @@
+import { Button, type ButtonSize, type ButtonVariant } from "@k2b/ui";
+import { type createPreferenceController, THEME_CYCLE } from "./preference-controller";
+
+type Props = {
+  preferences: ReturnType<typeof createPreferenceController>;
+  variant: ButtonVariant;
+  size?: ButtonSize;
+  /** Shows only the icon below `md`; the accessible name still states the choice. */
+  compact?: boolean;
+};
+
+/**
+ * One button for the appearance: it shows the current choice and each click switches to the next. The label reserves
+ * the width of the two other choices, so the button and its neighbors stay in place.
+ */
+export function ThemeCycleButton(props: Props) {
+  const current = () => props.preferences.themeOption(props.preferences.theme());
+  const otherLabels = () =>
+    THEME_CYCLE.filter((value) => value !== props.preferences.theme()).map((value) => props.preferences.themeOption(value).label);
+
+  return (
+    <>
+      <Button
+        type="button"
+        class="cloud-theme-cycle"
+        variant={props.variant}
+        size={props.size}
+        aria-label={props.preferences.themeCycleLabel()}
+        onClick={props.preferences.cycleTheme}
+      >
+        <i class={current().icon} aria-hidden="true" />
+        <span
+          class="cloud-theme-cycle__label"
+          data-compact={props.compact ? "true" : undefined}
+          data-reserve-a={otherLabels()[0]}
+          data-reserve-b={otherLabels()[1]}
+        >
+          <span>{current().label}</span>
+        </span>
+      </Button>
+      <span class="sr-only" aria-live="polite">
+        {props.preferences.themeAnnouncement()}
+      </span>
+    </>
+  );
+}

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