@k2b/cloud 0.17.0 → 0.19.0

package/src/services/pdf/offline-html.ts

@@ -0,0 +1,122 @@
+/**
+ * Offline mode for every HTML document Cloud sends to Gotenberg.
+ *
+ * Chromium in Gotenberg would otherwise run scripts and load every URL the
+ * HTML names. The prepended policy allows only inline styles plus local files
+ * and data URLs for styles, images, and fonts. Local files are the request's
+ * named assets; Gotenberg's default deny list keeps file access inside its
+ * working directory under `/tmp`. Removing elements that run code, navigate,
+ * embed documents, or open connections is a second layer that does not rely
+ * on the policy, which matters for header and footer templates that Chromium
+ * renders apart from the document.
+ *
+ * MathML (`math`) and the SVG elements that hold HTML (`foreignObject`,
+ * `desc`) go as well; they have no print use in Cloud documents. SVG shapes,
+ * images, `title`, and links stay, so graphics still render.
+ *
+ * Chromium takes the PDF title from the document's first `<title>`. Without
+ * one it falls back to the random name Gotenberg gives the uploaded file,
+ * which PDF viewers then show. A caller title fills that gap: it goes ahead
+ * of the document, so it becomes the first title, unless the document names
+ * itself with a non-blank HTML `<title>`. SVG titles label graphics, template
+ * content stays inert, and removed elements take their titles with them, so
+ * none of them count. A title of only whitespace character references, such
+ * as `&#32;`, still counts and leaves the random name; generated HTML does not
+ * write whitespace that way.
+ */
+const POLICY =
+  "default-src 'none'; style-src 'unsafe-inline' file: data:; img-src file: data:; font-src file: data:; base-uri 'none'; form-action 'none'";
+const OFFLINE_META = `<meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${POLICY}">`;
+
+/**
+ * The caller's doctype when it leads the document after whitespace, comments,
+ * and an XML declaration. Repeating it ahead of the policy keeps the caller's
+ * rendering mode: HTML without a doctype still renders in quirks mode. Comments
+ * end where HTML ends them, including `<!-->` and `<!--->`; `<?…>` ends at the
+ * first `>`. A single forward scan keeps the time linear in the input size.
+ */
+const leadingDoctype = (html: string): string => {
+  let at = 0;
+  for (;;) {
+    while (/\s/.test(html.charAt(at))) at += 1;
+    if (html.startsWith("<!--", at)) {
+      if (html.startsWith(">", at + 4)) at += 5;
+      else if (html.startsWith("->", at + 4)) at += 6;
+      else {
+        const dashes = html.indexOf("-->", at + 4);
+        const bang = html.indexOf("--!>", at + 4);
+        if (dashes < 0 && bang < 0) return "";
+        at = dashes >= 0 && (bang < 0 || dashes < bang) ? dashes + 3 : bang + 4;
+      }
+    } else if (html.startsWith("<?", at)) {
+      const end = html.indexOf(">", at + 2);
+      if (end < 0) return "";
+      at = end + 1;
+    } else {
+      if (html.slice(at, at + 9).toLowerCase() !== "<!doctype") return "";
+      const end = html.indexOf(">", at + 9);
+      return end < 0 ? "" : html.slice(at, end + 1);
+    }
+  }
+};
+
+/** An empty comment stands in for a removed element, so the text on either side stays separate. */
+const REMOVED = "<!---->";
+
+// Chromium parses noscript content as markup when JavaScript is disabled.
+// math, foreignObject, and desc: see the module comment.
+const REMOVED_ELEMENTS = [
+  "script",
+  "noscript",
+  "meta",
+  "base",
+  "iframe",
+  "frame",
+  "frameset",
+  "object",
+  "embed",
+  "math",
+  "foreignObject",
+  "desc",
+];
+const INERT_TITLES = ["svg", "template", ...REMOVED_ELEMENTS].map((element) => `${element} title`).join(", ");
+
+const escapeTitle = (title: string): string => title.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+
+export const offlineHtml = (html: string, title?: string): string => {
+  // Only the text of the first HTML title element names the document.
+  let current: { inert: boolean } | undefined;
+  let firstSeen = false;
+  let named = false;
+  const offline = new HTMLRewriter()
+    .on("title", {
+      element() {
+        if (current && !current.inert) firstSeen = true;
+        current = { inert: false };
+      },
+      text(chunk) {
+        if (!firstSeen && !current?.inert && chunk.text.trim()) named = true;
+      },
+    })
+    // Runs after the title handler for the same element, in registration order.
+    .on(INERT_TITLES, {
+      element() {
+        if (current) current.inert = true;
+      },
+    })
+    .on(REMOVED_ELEMENTS.join(", "), {
+      element(element) {
+        element.replace(REMOVED, { html: true });
+      },
+    })
+    .on("link", {
+      element(element) {
+        // The policy limits a stylesheet to named assets and data URLs. Other
+        // link types can preload, prefetch, or connect outside of it.
+        if (element.getAttribute("rel")?.trim().toLowerCase() !== "stylesheet") element.replace(REMOVED, { html: true });
+      },
+    })
+    .transform(html);
+  const fallbackTitle = title?.trim() && !named ? `<title>${escapeTitle(title.trim())}</title>` : "";
+  return leadingDoctype(html) + OFFLINE_META + fallbackTitle + offline;
+};

package/src/services/pdf/template-preview.ts

@@ -39,6 +39,8 @@ export type RenderTemplatePdfPreviewInput = {
   data: Record<string, unknown>;
   filters?: LiquidTemplateOptions["filters"];
   filename?: string;
+  /** PDF document title when the rendered HTML has no `<title>`; see `RenderHtmlToPdfInput.title`. */
+  title?: string;
 };
 
 export type RenderTemplatePdfPreviewOptions = RenderHtmlToPdfOptions & {
@@ -89,7 +91,7 @@ export const renderTemplatePdfPreview = async (
   }
 
   try {
-    const pdfInput = { html, headerHtml, footerHtml, filename: input.filename };
+    const pdfInput = { html, title: input.title, headerHtml, footerHtml, filename: input.filename };
     return {
       ok: true,
       html,

package/src/services/providers/local/auth.ts

@@ -1,24 +1,33 @@
 import { redis } from "bun";
 
+/** Requested by email or username on the login page; resolves the account through its email at use. */
+export type EmailLoginTokenPayload = { email: string; category?: "guest" | "login" };
+/** Issued by an administrator for one account; works without an email address. */
+export type AccountLoginTokenPayload = { userId: string };
+
+const loginTokenKey = (token: string) => `email-login:${token}`;
+
 export const createMagicLinkToken = async (params: {
   email: string;
   category?: "guest" | "login";
   ttlSeconds?: number;
 }): Promise<string> => {
   const token = crypto.randomUUID();
-  await redis.set(
-    `email-login:${token}`,
-    JSON.stringify({ email: params.email, category: params.category }),
-    "EX",
-    params.ttlSeconds ?? 300,
-  );
+  await redis.set(loginTokenKey(token), JSON.stringify({ email: params.email, category: params.category }), "EX", params.ttlSeconds ?? 300);
+  return token;
+};
+
+/** Shares the email-link key space, so both token kinds use the same link and verify endpoint. */
+export const createAccountLoginToken = async (params: { userId: string; ttlSeconds?: number }): Promise<string> => {
+  const token = crypto.randomUUID();
+  await redis.set(loginTokenKey(token), JSON.stringify({ userId: params.userId }), "EX", params.ttlSeconds ?? 300);
   return token;
 };
 
-export const consumeMagicLinkToken = async (token: string): Promise<{ email: string; category?: "guest" | "login" } | null> => {
-  const raw = await redis.getdel(`email-login:${token}`);
+export const consumeMagicLinkToken = async (token: string): Promise<EmailLoginTokenPayload | AccountLoginTokenPayload | null> => {
+  const raw = await redis.getdel(loginTokenKey(token));
   if (!raw) return null;
-  return JSON.parse(raw) as { email: string; category?: "guest" | "login" };
+  return JSON.parse(raw) as EmailLoginTokenPayload | AccountLoginTokenPayload;
 };
 
 type PasswordResetPayload = {

package/src/services/providers/local/users.ts

@@ -13,12 +13,32 @@ import * as settings from "../../settings";
 type DbRow = Record<string, unknown>;
 
 export type LocalUserCreateData = {
-  email: string;
+  /** Blank or missing stores NULL, which the email policy below allows only for full accounts. */
+  email?: string | null;
   givenname?: string;
   sn?: string;
   displayName?: string;
 };
 
+/** Created and repaired by the emergency admin login; it never needs an email address. */
+export const EMERGENCY_ADMIN_UID = "admin";
+
+/**
+ * A local account may lack an email only as a full account while
+ * `user.local_email_optional` is on. The setting guards writes only, so
+ * existing accounts stay valid when it is turned off.
+ */
+const missingEmailError = async (profile: UserProfile, uid?: string): Promise<MutationResult<never> | null> => {
+  if (uid === EMERGENCY_ADMIN_UID) return null;
+  if (profile !== "user") return { ok: false, error: "Guest accounts need an email address.", status: 400 };
+  if (await settings.get<boolean>("user.local_email_optional")) return null;
+  return {
+    ok: false,
+    error: "Local accounts need an email address. Administrators can allow accounts without one in the account settings.",
+    status: 400,
+  };
+};
+
 const createLocalUid = async (): Promise<string> => {
   const abbrLen = await settings.get<number>("user.abbr_length");
   return generateUniqueAbbreviation(abbrLen);
@@ -31,7 +51,11 @@ export const create = async (params: {
   admin?: boolean;
   actor?: AuditActor;
 }): Promise<MutationResult<{ id: string }>> => {
-  const email = normalizeAccountEmail(params.data.email);
+  const email = normalizeAccountEmail(params.data.email ?? "") || null;
+  if (!email) {
+    const missing = await missingEmailError(params.profile);
+    if (missing) return missing;
+  }
   const uid = await createLocalUid();
   const admin = resolveStoredAdminState({
     provider: "local",
@@ -43,8 +67,10 @@ export const create = async (params: {
     return await writeLocalAccount(async (tx) => {
       if (!(await isAccountCategoryAllowed({ provider: "local", profile: params.profile }, tx)))
         return { ok: false, error: "This account category is disabled. Contact an administrator.", status: 403 };
-      await lockAccountEmail(tx, email);
-      if ((await findAccountsByEmail(tx, email)).length > 0) return emailAlreadyUsed();
+      if (email) {
+        await lockAccountEmail(tx, email);
+        if ((await findAccountsByEmail(tx, email)).length > 0) return emailAlreadyUsed();
+      }
       const rows = await tx<{ id: string }[]>`
       INSERT INTO auth.users (
         uid,
@@ -118,18 +144,23 @@ export const update = async (params: {
     givenname?: string;
     sn?: string;
     displayName?: string;
-    mail?: string;
+    /** `null` or blank removes the address when the email policy below allows it. */
+    mail?: string | null;
   };
 }): Promise<MutationResult<void>> => {
   return sql.begin(async (tx) => {
-    if (params.data.mail !== undefined) await lockAccountEmail(tx, params.data.mail);
+    const email = params.data.mail === undefined ? undefined : normalizeAccountEmail(params.data.mail ?? "");
+    if (email) await lockAccountEmail(tx, email);
     else await tx`LOCK TABLE auth.users IN ROW EXCLUSIVE MODE`;
-    const [existing] = await tx<{ mail: string | null }[]>`
-      SELECT mail FROM auth.users WHERE id = ${params.id}::uuid AND provider = 'local' FOR UPDATE
+    const [existing] = await tx<{ uid: string; profile: UserProfile; mail: string | null }[]>`
+      SELECT uid, profile, mail FROM auth.users WHERE id = ${params.id}::uuid AND provider = 'local' FOR UPDATE
     `;
     if (!existing) return { ok: false, error: "Local user not found", status: 404 };
-    const email = params.data.mail === undefined ? undefined : normalizeAccountEmail(params.data.mail);
     const changed = email !== undefined && email !== normalizeAccountEmail(existing.mail ?? "");
+    if (changed && !email) {
+      const missing = await missingEmailError(existing.profile, existing.uid);
+      if (missing) return missing;
+    }
     if (changed && email && (await findAccountsByEmail(tx, email)).some((row) => row.id !== params.id)) return emailAlreadyUsed();
     await tx`
       UPDATE auth.users
@@ -150,8 +181,8 @@ export const setProfile = async (params: {
   actor?: AuditActor;
 }): Promise<MutationResult<void>> => {
   const result = await writeLocalAccount(async (tx) => {
-    const rows = await tx<{ provider: string; profile: UserProfile; admin: boolean }[]>`
-    SELECT provider, profile, admin
+    const rows = await tx<{ provider: string; profile: UserProfile; admin: boolean; mail: string | null }[]>`
+    SELECT provider, profile, admin, mail
     FROM auth.users
     WHERE id = ${params.id}::uuid
   `;
@@ -159,6 +190,8 @@ export const setProfile = async (params: {
     if (rows[0]!.provider !== "local") {
       return { ok: false, error: "Only local accounts can change profile locally", status: 400 };
     }
+    if (params.profile === "guest" && !rows[0]!.mail?.trim())
+      return { ok: false, error: "Guest accounts need an email address.", status: 400 };
     if (rows[0]!.profile !== params.profile && !(await isAccountCategoryAllowed({ provider: "local", profile: params.profile }, tx)))
       return { ok: false, error: "This account category is disabled. Contact an administrator.", status: 403 };
 

package/src/services/session/index.ts

@@ -1,4 +1,4 @@
-import { sql } from "bun";
+import { type SQL, sql } from "bun";
 import type { Context } from "hono";
 import { deleteCookie, getCookie, setCookie } from "hono/cookie";
 import { HTTPException } from "hono/http-exception";
@@ -6,6 +6,7 @@ import { env } from "../../config/env";
 import type { User } from "../../contracts/shared";
 import { isAccountCategoryAllowed } from "../account-category-policy";
 import { isAccountExpired } from "../account-model";
+import { audit } from "../audit";
 import { IDENTITY_CLOCK_TOLERANCE_SECONDS, IDENTITY_ROLLOUT_MARGIN_MS } from "../identity/constants";
 import { invalidateIdentitySignerCache, prepareIdentitySigner } from "../identity/key-ring";
 import { getIdentityRuntimeConfig } from "../identity/runtime-config";
@@ -59,6 +60,17 @@ const requestCached = <T>(
 const verifyForRequest = (c: Context, token: string): Promise<CloudSessionClaims | null> =>
   requestCached(verificationByRequest, c, token, () => verifyCredential(token));
 
+/** Moves the account's authentication epoch, which ends every session issued before it.
+ * Request-time expiry uses only this: device operations check expiry themselves and an
+ * administrator can lift it, so revoking devices would depend on which request came first. */
+const endSessions = async (db: SQL, userId: string): Promise<void> => {
+  const [updated] = await db<Array<{ id: string }>>`
+    UPDATE auth.users SET auth_epoch = auth_epoch + 1
+    WHERE id = ${userId}::uuid RETURNING id
+  `;
+  if (!updated) throw new Error("Cannot revoke sessions for an unknown user");
+};
+
 const authenticateVerified = async (credential: CloudSessionClaims): Promise<AuthenticatedSession | null> => {
   const { groupsAdmin } = await getIdentityRuntimeConfig();
   const user = await loadJwtSessionUser({
@@ -69,7 +81,7 @@ const authenticateVerified = async (credential: CloudSessionClaims): Promise<Aut
   });
   if (!user) return null;
   if (isAccountExpired(user.accountExpires)) {
-    await session.revokeAllForUser(user.id);
+    await endSessions(sql, user.id);
     return null;
   }
   return {
@@ -94,7 +106,7 @@ const authenticateUserId = async (token: string): Promise<string | null> => {
   const identity = await loadJwtSessionIdentity({ userId: credential.sub, sid: credential.sid, authEpoch: credential.auth_epoch });
   if (!identity) return null;
   if (isAccountExpired(identity.accountExpires)) {
-    await session.revokeAllForUser(identity.userId);
+    await endSessions(sql, identity.userId);
     return null;
   }
   return identity.userId;
@@ -224,12 +236,25 @@ export const session = {
     deleteCookie(c, "session_token", { path: "/" });
   },
 
+  /** Signs the account out everywhere: every session and every paired sign-in device, audited per device. */
   revokeAllForUser: async (userId: string): Promise<void> => {
-    const [updated] = await sql<Array<{ id: string }>>`
-      UPDATE auth.users SET auth_epoch = auth_epoch + 1
-      WHERE id = ${userId}::uuid RETURNING id
-    `;
-    if (!updated) throw new Error("Cannot revoke sessions for an unknown user");
+    await sql.begin(async (tx) => {
+      await endSessions(tx, userId);
+      // A paired device approves new sign-ins on its own, so a lost one would outlive the epoch change.
+      const devices = await tx<Array<{ id: string }>>`
+        UPDATE auth.app_devices SET revoked_at = now() WHERE user_id = ${userId}::uuid AND revoked_at IS NULL RETURNING id
+      `;
+      for (const device of devices)
+        await audit.record(
+          {
+            action: "auth.app.device.revoke",
+            outcome: "allowed",
+            target: { type: "app_device", id: device.id },
+            metadata: { targetUserId: userId, provenance: "system", reason: "sign_out_everywhere" },
+          },
+          tx,
+        );
+    });
   },
 
   authenticate: authenticateToken,

package/src/services/settings/core-settings.ts

@@ -502,6 +502,13 @@ export const CORE_SETTINGS = {
     default: false,
     description: "Allow creating a local guest account automatically during first email sign-in when no local account exists yet.",
   },
+  "user.local_email_optional": {
+    kind: "boolean",
+    label: "Allow local accounts without email",
+    default: false,
+    description:
+      "Administrators may create local full accounts without an email address or remove it later. These accounts sign in with a paired app or a passkey; email sign-in links, welcome emails and email notifications are unavailable to them. Guests and FreeIPA accounts still need an email address. Turning this off leaves existing accounts unchanged.",
+  },
   "user.abbr_length": {
     kind: "number",
     label: "Username Abbreviation Length",

package/src/shared/markdown/index.ts

@@ -21,8 +21,9 @@ import { taskListExtension } from "./extensions/task-list";
 
 // Create a configured marked instance
 type MarkdownProfile = "content" | "help";
+type LinkStyle = "widget" | "plain";
 
-const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle = "card") => {
+const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle = "card", links: LinkStyle = "widget") => {
   const marked = new Marked();
 
   marked.use({
@@ -35,7 +36,8 @@ const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle
   marked.use(infoBlocksExtension(notices));
   marked.use(taskListExtension());
   marked.use(tablesExtension());
-  marked.use(linksExtension({ internalTarget: profile === "help" ? "_self" : "_blank" }));
+  // Plain links keep marked's own renderer: an anchor around the link text.
+  if (links === "widget") marked.use(linksExtension({ internalTarget: profile === "help" ? "_self" : "_blank" }));
   marked.use(imagesExtension());
   marked.use(katexExtension());
   marked.use(codeExtension());
@@ -48,15 +50,24 @@ const createMarked = (profile: MarkdownProfile = "content", notices: NoticeStyle
 };
 
 const marked = createMarked();
-const minimalNoticeMarked = createMarked("content", "minimal");
 const helpMarked = createMarked("help");
+const contentMarked = new Map<`${NoticeStyle}:${LinkStyle}`, Marked>([["card:widget", marked]]);
 
 export type MarkdownRenderOptions = {
   /** `"minimal"` shows notices as tone colour only; the type name stays for screen readers. */
   notices?: NoticeStyle;
+  /** `"plain"` renders each link as an ordinary anchor around its text, for HTML read outside Cloud such as email. */
+  links?: LinkStyle;
 };
 
-const markedFor = (options: MarkdownRenderOptions): Marked => (options.notices === "minimal" ? minimalNoticeMarked : marked);
+const markedFor = ({ notices = "card", links = "widget" }: MarkdownRenderOptions): Marked => {
+  const key = `${notices}:${links}` as const;
+  const cached = contentMarked.get(key);
+  if (cached) return cached;
+  const created = createMarked("content", notices, links);
+  contentMarked.set(key, created);
+  return created;
+};
 
 const sanitizeRenderedHtml = (html: string): string =>
   sanitizeHtml(html, {

package/src/ssr/LayoutHeader.tsx

@@ -1,4 +1,4 @@
-import { ButtonLink } from "@k2b/ui";
+import { ButtonLink, IconButtonLink } from "@k2b/ui";
 import type { NavigationSearchItem } from "../browser/navigation-search";
 import type { CloudTheme } from "../shared/theme";
 import AppLaunchpad, { type AppLaunchpadApp } from "./AppLaunchpad.island";
@@ -34,17 +34,13 @@ export default function LayoutHeader(props: LayoutHeaderProps) {
       style="box-shadow: var(--ui-shadow-surface)"
     >
       <div class="flex min-w-0 items-center gap-2">
-        <a
-          href="/"
-          class={
-            props.authenticated
-              ? "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-dimmed transition-colors hover:bg-zinc-100 hover:text-secondary lg:hidden dark:hover:bg-zinc-800"
-              : "flex shrink-0 items-center"
-          }
-          aria-label={props.homeLabel}
-        >
-          <img src="/branding/logo" alt="" class={props.authenticated ? "h-4 w-4" : "h-6 w-6"} />
-        </a>
+        {/* Signed-in desktops reach Home through the rail. `lg:hidden` sits on a wrapper because the button's
+            own display would win over the utility on the link. */}
+        <div class={props.authenticated ? "flex shrink-0 lg:hidden" : "flex shrink-0"}>
+          <IconButtonLink href="/" label={props.homeLabel}>
+            <img src="/branding/logo" alt="" class={props.authenticated ? "h-4 w-4" : "h-6 w-6"} />
+          </IconButtonLink>
+        </div>
         <div class="hidden min-w-0 items-center lg:flex">
           <LayoutBreadcrumbs breadcrumbs={props.breadcrumbs} />
         </div>
@@ -66,40 +62,22 @@ export default function LayoutHeader(props: LayoutHeaderProps) {
             searchLinks={props.searchLinks}
             searchResources={props.authenticated}
           />
+          {(props.authenticated || props.appLabel) && (
+            <AppLaunchpad
+              profile={props.authenticated ? { name: props.profileName, theme: props.theme } : undefined}
+              apps={props.launchpadApps}
+              legalLinks={props.legalLinks}
+              variant="header"
+              label={props.openAppsLabel}
+            />
+          )}
         </div>
         {props.authenticated ? (
-          <>
-            <div class="lg:hidden">
-              <AppLaunchpad
-                profile={props.authenticated ? { name: props.profileName, theme: props.theme } : undefined}
-                apps={props.launchpadApps}
-                legalLinks={props.legalLinks}
-                variant="header"
-                label={props.openAppsLabel}
-              />
-            </div>
-            <div class="hidden lg:block">
-              <ProfilePreferences
-                avatarSrc={props.profileAvatarSrc}
-                initialTheme={props.theme}
-                name={props.profileName}
-                placement="header"
-              />
-            </div>
-          </>
+          <div class="hidden lg:block">
+            <ProfilePreferences avatarSrc={props.profileAvatarSrc} initialTheme={props.theme} name={props.profileName} placement="header" />
+          </div>
         ) : (
           <>
-            {props.appLabel && (
-              <div class="lg:hidden">
-                <AppLaunchpad
-                  profile={props.authenticated ? { name: props.profileName, theme: props.theme } : undefined}
-                  apps={props.launchpadApps}
-                  legalLinks={props.legalLinks}
-                  variant="header"
-                  label={props.openAppsLabel}
-                />
-              </div>
-            )}
             <LayoutPreferences initialTheme={props.theme} position="bottom-left" />
             <ButtonLink href="/auth/login" size="sm" variant="primary">
               <i class="ti ti-login" aria-hidden="true" />

package/src/ssr/workspace-navigation.ts

@@ -49,12 +49,14 @@ export function readWorkspaceNavigation(): WorkspaceNavigationState | undefined
   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.
+    // SSR links work before the app island loads; action and disclosure handlers are not yet available,
+    // so the owner's folds only set where the local disclosure starts.
     const links = (items: readonly NavigationItem[]): NavigationItem[] =>
       items.map((item) => ({
         ...item,
         disabled: item.disabled || Boolean(item.action && !item.href),
         ...(item.href ? { action: undefined } : {}),
+        ...(item.expanded !== undefined ? { expanded: undefined, defaultExpanded: item.expanded } : {}),
         ...(item.children ? { children: links(item.children) } : {}),
         ...(item.actions ? { actions: links(item.actions) } : {}),
       }));

package/src/styles/global.css

@@ -278,6 +278,11 @@ solid-island {
 @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);
+  }
+  /* The flat surface replaces the app gradient in both themes. The dark
+     selector matches the specificity of the dark gradient above. */
+  .cloud-app-canvas,
+  .dark .cloud-app-canvas {
     background: var(--ui-surface);
   }
   /* Below lg the document is the page scroller; reserve its scrollbar gutter