@k2b/cloud 0.6.0 → 0.8.0

package/src/ssr/help.ts

@@ -0,0 +1,29 @@
+import type { Context } from "hono";
+import { getLocale } from "../server/locale";
+import { createHelpReader } from "../services/help";
+import type { HelpManifestResult } from "../services/help/types";
+import { logger } from "../services/logging";
+import { resolveCurrentApp } from "./app-appearance";
+import { getRuntimeContext } from "./runtime";
+
+const manifests = new WeakMap<object, HelpManifestResult | null>();
+const log = logger("help:ssr");
+export const getLayoutHelp = (c: object): HelpManifestResult | null => manifests.get(c) ?? null;
+
+/** Explicit Help pages also work anonymously; automatic layout loading requires a user. */
+export const preloadLayoutHelp = async (c: Context, appId?: string): Promise<HelpManifestResult | null> => {
+  if (manifests.has(c)) return getLayoutHelp(c);
+  if (!c.get("runtime") || (!appId && !c.get("user"))) return null;
+  const id = appId ?? resolveCurrentApp(getRuntimeContext(c).apps, c.req.path)?.id;
+  if (!id) return null;
+  try {
+    const manifest = await createHelpReader(getLocale(c)).manifest(id);
+    manifests.set(c, manifest);
+    return manifest;
+  } catch (error) {
+    // An unavailable Help store must not prevent an unrelated application page from rendering.
+    log.warn("Help metadata unavailable", { appId: id, error: error instanceof Error ? error.message : String(error) });
+    manifests.set(c, null);
+    return null;
+  }
+};

package/src/ssr/islands/SearchBar.tsx

@@ -0,0 +1,67 @@
+import { IconButtonLink, TextInput, useLocale } from "@k2b/ui";
+import { createMemo, For, Show } from "solid-js";
+import { platformMessages } from "../platform-messages";
+
+type SearchBarProps = {
+  /** Destination URL including every filter to retain. */
+  action: string;
+  value?: string;
+  param?: string;
+  pageParam?: string;
+  placeholder?: string;
+  ariaLabel?: string;
+  disabled?: boolean;
+};
+
+/** Native GET search: works in server HTML and inside hydrated islands. */
+export default function SearchBar(props: SearchBarProps) {
+  const locale = useLocale();
+  const t = () => platformMessages.resolve([locale()]).t;
+  const param = () => props.param ?? "search";
+  const target = createMemo(() => {
+    // Split without resolving against a browser-only origin; relative URLs stay relative.
+    const hashAt = props.action.indexOf("#");
+    const hash = hashAt < 0 ? "" : props.action.slice(hashAt);
+    const href = hashAt < 0 ? props.action : props.action.slice(0, hashAt);
+    const queryAt = href.indexOf("?");
+    const path = queryAt < 0 ? href : href.slice(0, queryAt);
+    const params = new URLSearchParams(queryAt < 0 ? "" : href.slice(queryAt + 1));
+    const value = props.value ?? params.get(param()) ?? "";
+    params.delete(param());
+    params.delete(props.pageParam ?? "page");
+    const query = params.toString();
+    return { action: path + hash, clear: path + (query || !path ? `?${query}` : "") + hash, fields: [...params], value };
+  });
+
+  return (
+    <form action={target().action} method="get" role="search" class="group/search w-full">
+      <For each={target().fields}>{([name, value]) => <input type="hidden" name={name} value={value} />}</For>
+      <TextInput
+        name={param()}
+        type="search"
+        placeholder={props.placeholder || `${t().search}…`}
+        aria-label={props.ariaLabel ?? t().search}
+        icon="ti ti-search"
+        activeIcon="ti ti-search"
+        value={() => target().value}
+        disabled={props.disabled}
+        suffix={
+          <Show when={!props.disabled}>
+            <IconButtonLink
+              href={target().clear}
+              label={t().clearSearch}
+              size="xs"
+              tooltip={false}
+              class="group-has-[input:placeholder-shown]/search:invisible"
+            >
+              <i class="ti ti-x" aria-hidden="true" />
+            </IconButtonLink>
+          </Show>
+        }
+      />
+      <button type="submit" class="hidden" disabled={props.disabled}>
+        {t().search}
+      </button>
+    </form>
+  );
+}

package/src/ssr/islands/index.ts

@@ -1,4 +1,6 @@
-export { default as SearchBar } from "./SearchBar.island";
+export { default as WorkspaceNavigationProvider } from "../WorkspaceNavigationProvider";
+export { provideWorkspaceNavigation } from "../workspace-navigation";
+export { default as SearchBar } from "./SearchBar";
 
 import { AppLaunchpadButton, AppLaunchpadProvider } from "../AppLaunchpad.island";
 import { LayoutHelpDocuments, LayoutHelpPage } from "../LayoutHelp";

package/src/ssr/layout-context.ts

@@ -1,11 +1,11 @@
-import type { RailPreferences } from "../contracts/rail-preferences";
+import type { RailSnapshot } from "../contracts/rail-preferences";
 import type { User } from "../contracts/shared";
 import type { LayoutAnnouncementsState } from "../server/middleware/settings";
 import type { RuntimeContext } from "./runtime";
 
 export type LayoutContext = {
   get(key: "user"): User | undefined;
-  get(key: "railPreferences"): RailPreferences | undefined;
+  get(key: "railPreferences"): RailSnapshot | undefined;
   get(key: "page"): { theme?: "light" | "dark" };
   get(key: "runtime"): RuntimeContext;
   get(key: "announcements"): LayoutAnnouncementsState | undefined;

package/src/ssr/layout-help-search.ts

@@ -0,0 +1,15 @@
+type SearchTopic = { id: string; title: string; description?: string; kind: "document" | "content" };
+
+/** Use server ranking for documents; metadata remains usable during loading or outages. */
+export const searchHelpTopics = <T extends SearchTopic>(topics: readonly T[], query: string, remoteIds: readonly string[] | null): T[] => {
+  const local = topics.filter((topic) => [topic.title, topic.description].some((part) => part?.toLocaleLowerCase().includes(query)));
+  if (remoteIds === null) return local;
+  const documents = new Map(topics.filter((topic) => topic.kind === "document").map((topic) => [topic.id, topic]));
+  return [
+    ...remoteIds.flatMap((id) => {
+      const topic = documents.get(id);
+      return topic ? [topic] : [];
+    }),
+    ...local.filter((topic) => topic.kind === "content"),
+  ];
+};

package/src/ssr/mobile-menu-history.ts

@@ -0,0 +1,70 @@
+import { bottomSheetOptions, type DialogRender, dialogCore } from "@k2b/ui";
+
+const marker = "cloudMobileMenu";
+let running: Promise<void> | undefined;
+
+/** One transient history entry; complete its Back before a selected operation runs. */
+export function openMobileMenu(view: (beforeSelect: () => Promise<boolean>) => DialogRender<void>) {
+  if (running) return running;
+  let done: () => void = () => {};
+  const cleaned = new Promise<void>((resolve) => {
+    done = resolve;
+  });
+  running = (async () => {
+    const previous = { ...history.state };
+    delete previous[marker];
+    history.replaceState(previous, "");
+    const id = crypto.randomUUID();
+    history.pushState({ ...previous, [marker]: id }, "");
+    const abort = new AbortController();
+    let leavingPage = false;
+    const mobile = window.matchMedia("(max-width: 1023px)");
+    const pop = () => {
+      if (history.state?.[marker] !== id) abort.abort();
+    };
+    const resized = () => {
+      if (!mobile.matches) abort.abort();
+    };
+    const leaving = () => {
+      leavingPage = true;
+      abort.abort();
+    };
+    window.addEventListener("popstate", pop);
+    window.addEventListener("pagehide", leaving);
+    mobile.addEventListener("change", resized);
+    try {
+      await dialogCore.open<void>(
+        (close, context) =>
+          view(async () => {
+            close();
+            await cleaned;
+            return !abort.signal.aborted;
+          })(close, context),
+        { ...bottomSheetOptions, panelClassName: `${bottomSheetOptions.panelClassName} cloud-mobile-menu`, signal: abort.signal },
+      );
+    } finally {
+      window.removeEventListener("popstate", pop);
+      window.removeEventListener("pagehide", leaving);
+      mobile.removeEventListener("change", resized);
+      if (!leavingPage && history.state?.[marker] === id) {
+        await new Promise<void>((resolve) => {
+          const returned = () => {
+            window.removeEventListener("pagehide", returned);
+            window.removeEventListener("popstate", returned);
+            resolve();
+          };
+          window.addEventListener("popstate", returned, { once: true });
+          window.addEventListener("pagehide", returned, { once: true });
+          history.back();
+        });
+      }
+      if (!mobile.matches && !leavingPage) {
+        const launcher = document.querySelector<HTMLButtonElement>(".layout-rail [data-cloud-launchpad]");
+        launcher?.focus({ preventScroll: true });
+      }
+      done();
+      running = undefined;
+    }
+  })();
+  return running;
+}

package/src/ssr/platform-messages.ts

@@ -9,7 +9,9 @@ export const platformMessages = i18n.define({
       start: "Start",
       overview: "Overview",
       general: "General",
+      rail: "App bar",
       announcements: "Announcements",
+      appCredentials: "App credentials",
       ai: "AI",
       settings: "Settings",
       appAdmin: "App administration",
@@ -26,9 +28,15 @@ export const platformMessages = i18n.define({
       skills: "Skills",
       projects: "Projects",
       aiUsage: "Usage",
+      aiQuotas: "Assistant limits",
       backgroundJobs: "Background jobs",
       apps: "Apps",
       openApps: "Open apps",
+      appMenu: "Menu",
+      findApps: "Find an app…",
+      noAppsFound: "No matching apps.",
+      allApps: "All apps",
+      navigation: "Navigation",
       home: "Home",
       profile: "Profile",
       displayName: "display name",
@@ -40,10 +48,6 @@ export const platformMessages = i18n.define({
       guestAccountExpires: ({ date }: { date: string }) => `Your guest account expires on ${date}.`,
       passwordExpired: "Your password has expired. Sign out and in again to change it.",
       passwordExpires: ({ date }: { date: string }) => `Your password expires on ${date}.`,
-      newNotification: "New notification",
-      relatedItemReady: "A related item is ready.",
-      open: "Open",
-      dismissNotification: "Dismiss notification",
       light: "Light",
       dark: "Dark",
       account: "Account",
@@ -73,7 +77,9 @@ export const platformMessages = i18n.define({
       start: "Start",
       overview: "Übersicht",
       general: "Allgemein",
+      rail: "App-Leiste",
       announcements: "Ankündigungen",
+      appCredentials: "App-Zugänge",
       ai: "KI",
       settings: "Einstellungen",
       appAdmin: "App-Verwaltung",
@@ -90,8 +96,14 @@ export const platformMessages = i18n.define({
       skills: "Skills",
       projects: "Projekte",
       aiUsage: "Nutzung",
+      aiQuotas: "Assistant-Limits",
       backgroundJobs: "Hintergrundaufgaben",
       apps: "Apps",
+      appMenu: "Menü",
+      findApps: "App finden…",
+      noAppsFound: "Keine passenden Apps.",
+      allApps: "Alle Apps",
+      navigation: "Navigation",
       openApps: "Apps öffnen",
       home: "Start",
       profile: "Profil",
@@ -104,10 +116,6 @@ export const platformMessages = i18n.define({
       guestAccountExpires: ({ date }) => `Dein Gastkonto läuft am ${date} ab.`,
       passwordExpired: "Dein Passwort ist abgelaufen. Melde dich ab und erneut an, um es zu ändern.",
       passwordExpires: ({ date }) => `Dein Passwort läuft am ${date} ab.`,
-      newNotification: "Neue Benachrichtigung",
-      relatedItemReady: "Ein zugehöriger Inhalt ist verfügbar.",
-      open: "Öffnen",
-      dismissNotification: "Benachrichtigung ausblenden",
       light: "Hell",
       dark: "Dunkel",
       account: "Konto",

package/src/ssr/profile-actions.ts

@@ -0,0 +1,42 @@
+import { type DropdownItem, toast, useLocale } from "@k2b/ui";
+import { createMemo, createSignal } from "solid-js";
+import { browserNotificationClient } from "../browser/notifications";
+import { apiClient } from "../clients/core";
+import type { CloudTheme } from "../shared/theme";
+import { createPreferenceController } from "./preference-controller";
+
+export function createProfileActions(initialTheme: CloudTheme) {
+  const locale = useLocale();
+  const preferences = createPreferenceController(initialTheme, locale);
+  const [signingOut, setSigningOut] = createSignal(false);
+  const signOut = async () => {
+    if (signingOut()) return;
+    setSigningOut(true);
+    try {
+      await browserNotificationClient.disable().catch(() => undefined);
+      const response = await apiClient.auth.logout.$post();
+      if (!response.ok) throw new Error(preferences.messages().signOutFailed);
+      window.location.href = "/auth/login";
+    } catch {
+      toast.error(preferences.messages().signOutFailed);
+      setSigningOut(false);
+    }
+  };
+
+  const items = createMemo<DropdownItem[]>(() => [
+    ...preferences.items(),
+    {
+      href: "/me",
+      icon: "ti ti-user-circle",
+      label: preferences.messages().profileSettings,
+    },
+    {
+      action: signOut,
+      icon: "ti ti-logout",
+      label: preferences.messages().signOut,
+      disabled: signingOut(),
+    },
+  ]);
+
+  return { preferences, items, signOut, signingOut };
+}

package/src/ssr/rail-context.ts

@@ -1,7 +1,7 @@
-import { type RailPreferences, RailPreferencesSchema } from "../contracts/rail-preferences";
+import { type RailPreferences, type RailSnapshot, RailSnapshotSchema } from "../contracts/rail-preferences";
 import type { RailApp } from "./rail-navigation";
 
-export type RailContext = { apps: RailApp[]; settings: RailPreferences };
+export type RailContext = { apps: RailApp[]; settings: RailSnapshot };
 export const RAIL_PREFERENCES_EVENT = "cloud:rail-preferences";
 
 export const readRailContext = (): RailContext | undefined => {
@@ -10,12 +10,16 @@ export const readRailContext = (): RailContext | undefined => {
   if (!text) return undefined;
   // Framework-generated, escaped SSR data; never loaded from localStorage.
   const value: RailContext = JSON.parse(text);
-  return { apps: value.apps, settings: RailPreferencesSchema.parse(value.settings) };
+  return { apps: value.apps, settings: RailSnapshotSchema.parse(value.settings) };
 };
 
 export const publishRailPreferences = (settings: RailPreferences) => {
   const context = readRailContext();
   const element = document.getElementById("cloud-rail-data");
-  if (context && element) element.textContent = JSON.stringify({ ...context, settings }).replace(/</g, "\\u003c");
+  if (context && element)
+    element.textContent = JSON.stringify({
+      ...context,
+      settings: { ...settings, managedShortcuts: context.settings.managedShortcuts },
+    }).replace(/</g, "\\u003c");
   window.dispatchEvent(new CustomEvent(RAIL_PREFERENCES_EVENT));
 };

package/src/ssr/rail-messages.ts

@@ -4,6 +4,7 @@ export const railMessages = i18n.define({
   baseLocale: "en",
   messages: {
     en: {
+      managed: "Provided by the administration",
       customize: "Customize app bar",
       apps: "Visible apps",
       shortcuts: "App bar shortcuts",
@@ -33,6 +34,7 @@ export const railMessages = i18n.define({
       invalid: "Check shortcut titles, links and icons. Each app can be pinned once; settings must fit within 16 KiB.",
     },
     de: {
+      managed: "Von der Administration bereitgestellt",
       customize: "App-Leiste anpassen",
       apps: "Sichtbare Apps",
       shortcuts: "Shortcuts der App-Leiste",

package/src/ssr/rail-navigation.ts

@@ -1,4 +1,4 @@
-import type { RailPreferences } from "../contracts/rail-preferences";
+import type { RailPreferences, RailSnapshot } from "../contracts/rail-preferences";
 
 export type RailApp = {
   id: string;
@@ -21,11 +21,11 @@ export const sortRailApps = (apps: readonly RailApp[], locale: string): RailApp[
 };
 
 /** Input is the authorized navigation catalog, never the unfiltered registry. */
-export const projectRailNavigation = (apps: readonly RailApp[], settings: RailPreferences, locale: string) => {
+export const projectRailNavigation = (apps: readonly RailApp[], settings: RailSnapshot, locale: string) => {
   const catalog = new Map(apps.map((app) => [app.id, app]));
   const pinned = new Set<string>();
   const shortcuts: RailLink[] = [];
-  for (const shortcut of settings.shortcuts) {
+  for (const shortcut of [...(settings.managedShortcuts ?? []), ...settings.shortcuts]) {
     if (shortcut.kind === "app") {
       const app = catalog.get(shortcut.appId);
       if (!app || pinned.has(app.id)) continue;

package/src/ssr/workspace-navigation.ts

@@ -0,0 +1,75 @@
+import { createNavigation, type NavigationController, type NavigationItem } from "@k2b/ui";
+import { createEffect, onCleanup, onMount } from "solid-js";
+
+export type WorkspaceNavigationState = { navigation: NavigationController; label: string; owner: Element };
+const changedEvent = "cloud:workspace-navigation";
+
+declare global {
+  interface Window {
+    __cloudWorkspaceNavigation?: WorkspaceNavigationState;
+  }
+}
+
+/** Bind only the outer application's navigation. Nested workspaces do not register. */
+export function provideWorkspaceNavigation(navigation: NavigationController, options: { label: () => string; owner: () => Element }) {
+  onMount(() => {
+    const state = { navigation, label: options.label(), owner: options.owner() };
+    window.__cloudWorkspaceNavigation = state;
+    createEffect(() => {
+      navigation.items();
+      state.label = options.label();
+      window.dispatchEvent(new Event(changedEvent));
+    });
+    onCleanup(() => {
+      if (window.__cloudWorkspaceNavigation !== state) return;
+      delete window.__cloudWorkspaceNavigation;
+      window.dispatchEvent(new Event(changedEvent));
+    });
+  });
+}
+
+function validItems(value: unknown): value is NavigationItem[] {
+  return (
+    Array.isArray(value) &&
+    value.every((entry) => {
+      if (!entry || typeof entry !== "object" || typeof entry.id !== "string" || typeof entry.label !== "string") return false;
+      if (entry.href !== undefined && typeof entry.href !== "string") return false;
+      if (entry.action !== undefined && typeof entry.action !== "string") return false;
+      return (entry.children === undefined || validItems(entry.children)) && (entry.actions === undefined || validItems(entry.actions));
+    })
+  );
+}
+
+export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined {
+  if (typeof window === "undefined") return;
+  const current = window.__cloudWorkspaceNavigation;
+  if (current?.owner.isConnected) return current;
+  const owner = document.querySelector<HTMLScriptElement>("script[data-cloud-workspace-navigation]");
+  if (!owner) return;
+  try {
+    const value: unknown = JSON.parse(owner.textContent ?? "");
+    if (!value || typeof value !== "object" || !("items" in value) || !validItems(value.items)) return;
+    // SSR links work before the app island loads; action handlers are not yet available.
+    const links = (items: readonly NavigationItem[]): NavigationItem[] =>
+      items.map((item) => ({
+        ...item,
+        disabled: item.disabled || Boolean(item.action && !item.href),
+        ...(item.href ? { action: undefined } : {}),
+        ...(item.children ? { children: links(item.children) } : {}),
+        ...(item.actions ? { actions: links(item.actions) } : {}),
+      }));
+    const items = links(value.items);
+    return {
+      owner,
+      label: "label" in value && typeof value.label === "string" ? value.label : "",
+      navigation: createNavigation({ items: () => items }),
+    };
+  } catch {
+    return;
+  }
+}
+
+export function observeWorkspaceNavigation(listener: () => void) {
+  window.addEventListener(changedEvent, listener);
+  return () => window.removeEventListener(changedEvent, listener);
+}

package/src/styles/effects.css

@@ -794,7 +794,7 @@ dialog:has(.launchpad-panel)::backdrop {
 
 /* Dashboard launchpad app icon. One app colour drives the glyph and graded rim;
    the face stays clean so the tile feels crisp instead of plastic. */
-.launchpad-panel .app-icon {
+:is(.launchpad-panel, .cloud-mobile-apps) .app-icon {
   --icon-face: #ffffff;
   --rim-top: color-mix(in oklab, var(--app-icon-color), white 34%);
   --rim-bottom: color-mix(in oklab, var(--app-icon-color), black 12%);
@@ -817,13 +817,13 @@ dialog:has(.launchpad-panel)::backdrop {
 }
 
 @supports (color: oklch(from red l c h)) {
-  .launchpad-panel .app-icon {
+  :is(.launchpad-panel, .cloud-mobile-apps) .app-icon {
     --glyph: oklch(from var(--app-icon-color) min(l, 0.5) c h);
     --glyph-hover: oklch(from var(--app-icon-color) min(l, 0.4) c h);
   }
 }
 
-.dark .launchpad-panel .app-icon {
+.dark :is(.launchpad-panel, .cloud-mobile-apps) .app-icon {
   --icon-face: #202026;
   --rim-top: color-mix(in oklab, var(--app-icon-color), white 30%);
   --rim-bottom: color-mix(in oklab, var(--app-icon-color), black 24%);
@@ -835,15 +835,15 @@ dialog:has(.launchpad-panel)::backdrop {
 }
 
 @supports (color: oklch(from red l c h)) {
-  .dark .launchpad-panel .app-icon {
+  .dark :is(.launchpad-panel, .cloud-mobile-apps) .app-icon {
     --glyph: oklch(from var(--app-icon-color) max(l, 0.82) c h);
     --glyph-hover: oklch(from var(--app-icon-color) max(l, 0.96) c h);
   }
 }
 
 /* Hover changes only the icon tile, never the whole icon+label item. */
-.launchpad-panel .group:hover > .app-icon,
-.launchpad-panel .app-icon:hover {
+:is(.launchpad-panel, .cloud-mobile-apps) .group:hover > .app-icon,
+:is(.launchpad-panel, .cloud-mobile-apps) .app-icon:hover {
   background:
     linear-gradient(var(--icon-face), var(--icon-face)) padding-box,
     linear-gradient(180deg, var(--rim-top-hover), var(--rim-bottom-hover)) border-box;

package/src/styles/global.css

@@ -29,6 +29,7 @@
 @import "./base-popover.css";
 @import "./effects.css";
 @import "./input.css";
+@import "./resource-search.css";
 
 @theme {
   --color-dark: rgb(9 9 11);
@@ -63,6 +64,12 @@
   );
 }
 
+/* Full-page workspaces own their inner scrolling. Stop iframe scroll gestures
+   from rubber-banding the outer viewport or triggering pull-to-refresh. */
+html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
+  overscroll-behavior: none;
+}
+
 .cloud-app-canvas > :is(.layout-rail, .layout-shell-content) {
   gap: var(--ui-space-shell);
 }
@@ -266,3 +273,50 @@ solid-island {
     transition-duration: 0.01ms !important;
   }
 }
+
+/* Cloud has exactly two shell modes: mobile below lg, desktop from lg. */
+@media (max-width: 1023px) {
+  .cloud-app-canvas {
+    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+    background: var(--ui-surface);
+  }
+  .cloud-app-canvas > .layout-shell-content { gap: 0; }
+  .cloud-app-canvas .layout-header {
+    border-radius: 0; border: 0; border-bottom: 1px solid var(--ui-border);
+    box-shadow: none !important;
+  }
+
+}
+
+.cloud-mobile-menu .k2b-panel-dialog__header {
+  gap: .5rem;
+  padding-inline: 1rem;
+  background: var(--ui-surface);
+}
+.cloud-mobile-menu .k2b-bottom-sheet__handle { background: var(--ui-surface); }
+/* The app name is the first segment; retain a heading for the dialog's name. */
+.cloud-mobile-menu .k2b-panel-dialog__heading {
+  position: absolute; width: 1px; height: 1px; overflow: hidden;
+  clip-path: inset(50%); white-space: nowrap;
+}
+.cloud-mobile-menu .k2b-panel-dialog__actions { flex: 1; min-width: 0; }
+.cloud-mobile-menu__switch { width: 100%; flex-wrap: nowrap; }
+.cloud-mobile-menu__switch button { flex: 1; min-width: 0; min-height: 3rem; white-space: nowrap; }
+.cloud-mobile-menu__switch button > span { overflow: hidden; text-overflow: ellipsis; }
+.cloud-mobile-menu .k2b-dialog__close { width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
+
+.cloud-mobile-menu .k2b-panel-dialog__body { padding: .75rem 1rem 1rem; }
+.cloud-mobile-apps { display: flex; flex-direction: column; gap: 1rem; }
+.cloud-mobile-apps .launchpad-tools { display: flex; align-items: center; gap: .5rem; }
+.cloud-mobile-apps .launchpad-tools > :first-child { flex: 1; min-width: 0; }
+.cloud-mobile-apps .launchpad-customize { margin: 0; flex-shrink: 0; }
+.cloud-mobile-apps .launchpad-apps-grid {
+  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .5rem;
+}
+.cloud-mobile-apps .launchpad-app { width: auto; padding: .5rem .125rem; gap: .6rem; }
+.cloud-mobile-apps .app-icon { width: 3.5rem; height: 3.5rem; border-radius: 1.1rem; font-size: 1.75rem; }
+.cloud-mobile-apps .launchpad-app > span:last-child {
+  width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.3;
+}
+.cloud-mobile-profile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; border-top: 1px solid var(--ui-border); padding-top: 1rem; }
+.cloud-mobile-profile :is(a, button) { min-height: 2.75rem; white-space: normal; text-align: start; justify-content: flex-start; }