@k2b/cloud 0.18.0 → 0.20.0

package/src/ai/markdown-pdf-tool.ts

@@ -84,7 +84,15 @@ export const createCloudAiMarkdownToPdfTool = (dependencies: MarkdownPdfToolDepe
     let rendered: { pdf: Uint8Array; contentType: string };
     try {
       rendered = await withAiPdfConversionSlot(() =>
-        render({ markdown, templateId: input.template, customCss: input.customCss }, { signal: ctx.signal }),
+        render(
+          {
+            markdown,
+            title: sourcePath.slice(sourcePath.lastIndexOf("/") + 1, -".md".length),
+            templateId: input.template,
+            customCss: input.customCss,
+          },
+          { signal: ctx.signal },
+        ),
       );
     } catch (error) {
       throw ctx.signal.aborted ? cancelled() : error;

package/src/config/env.ts

@@ -72,6 +72,11 @@ const registry = defineEnv({
     example: "localhost:3000",
     doc: "Public Cloud URL used to bootstrap the `app.url` setting; the stored setting wins once written.",
   },
+  GOTENBERG_URL: {
+    schema: z.string(),
+    example: "http://localhost:3001",
+    doc: "Internal Gotenberg base URL used to bootstrap the `gotenberg.url` PDF rendering setting; the stored setting wins once written.",
+  },
   APP_SECRET: {
     schema: z.string(),
     default: "",

package/src/server/locale.ts

@@ -9,20 +9,33 @@ type LocaleContext = {
   req: { raw: { headers: Headers } };
 };
 
+/**
+ * Languages Cloud ships platform catalogs for and offers in its language
+ * picker. `Accept-Language` negotiation prefers a tag in one of these.
+ */
+const CATALOG_LANGUAGES = new Set(["en", "de"]);
+
 /**
  * The caller's explicit locale preference, or `undefined` when the request
  * carries none. Precedence: `x-cloud-locale` transport metadata, then the
- * `cloud.locale` cookie, then `Accept-Language` in quality order. Every
- * candidate is canonicalized; invalid tags fall through to the next source.
+ * `cloud.locale` cookie, then `Accept-Language`. Every candidate is
+ * canonicalized; invalid tags fall through to the next source.
+ *
+ * `Accept-Language` picks the first tag in quality order whose language has a
+ * catalog, keeping its region (`de-CH`, `en-GB`) for formatting. Without such a
+ * tag, the first valid tag still wins so formatting follows the browser.
  */
 export const preferredLocale = (headers: Headers): string | undefined => {
   const explicit = canonicalLocale(headers.get(LOCALE_HEADER)) ?? canonicalLocale(readCookie(headers, LOCALE_COOKIE));
   if (explicit) return explicit;
+  let firstValid: string | undefined;
   for (const tag of i18n.parseAcceptLanguage(headers.get("Accept-Language"))) {
     const candidate = canonicalLocale(tag);
-    if (candidate) return candidate;
+    if (!candidate) continue;
+    if (CATALOG_LANGUAGES.has(new Intl.Locale(candidate).language)) return candidate;
+    firstValid ??= candidate;
   }
-  return undefined;
+  return firstValid;
 };
 
 /**

package/src/server/middleware/validator.ts

@@ -1,5 +1,5 @@
 import type { Context, ValidationTargets } from "hono";
-import { validator as honoValidator } from "hono-openapi";
+import { type GenerateSpecOptions, validator as honoValidator } from "hono-openapi";
 import type { ZodType } from "zod";
 
 export type ValidatorError = Readonly<{
@@ -9,6 +9,28 @@ export type ValidatorError = Readonly<{
 
 export type ValidatorErrorResolver = (context: Context) => ValidatorError;
 
+/**
+ * OpenAPI description of the 400 body `validator()` sends: `{ message }`, or
+ * `{ code, message }` from a route's error resolver. The generated spec of
+ * every application uses it for validated routes that do not describe their
+ * own 400, in place of hono-openapi's default body, which Cloud never sends.
+ */
+export const validationErrorResponse: Exclude<GenerateSpecOptions["defaultValidationErrorResponse"], boolean> = {
+  description: "Validation failed",
+  content: {
+    "application/json": {
+      schema: {
+        type: "object",
+        properties: {
+          message: { type: "string" },
+          code: { type: "string" },
+        },
+        required: ["message"],
+      },
+    },
+  },
+};
+
 /**
  * Zod validator middleware with pretty error messages and OpenAPI support.
  * Uses hono-openapi validator for automatic OpenAPI schema generation.

package/src/services/gateway.ts

@@ -132,6 +132,11 @@ export const latestGatewayRouteSnapshot = async (): Promise<GatewayRouteSnapshot
   return all.sort((a, b) => b.updatedAt - a.updatedAt)[0] ?? null;
 };
 
+/**
+ * Dead letters keep the event stream's limit. Gateway Ops leaves dead letters
+ * when rollup writes fail; if they exceeded a lowered limit, this topic, and
+ * with it Gateway Ops' start, would fail until they expired.
+ */
 export const gatewayTelemetryTopic = lazySync((sync) =>
   sync.topic<GatewayTelemetryEvent>({
     id: TOPIC_ID,

package/src/services/index.ts

@@ -148,6 +148,7 @@ export {
   MARKDOWN_PDF_TEMPLATE_IDS,
   MarkdownPdfError,
   buildMarkdownPdfHtml,
+  buildPresetPdfHtml,
   getGotenbergConfig,
   attachPdfFiles,
   attachPdfFilesWithConfig,
@@ -163,6 +164,7 @@ export {
   testGotenberg,
 } from "./pdf";
 export type {
+  BuildPresetPdfHtmlInput,
   GotenbergConfig,
   AttachPdfFilesInput,
   RenderFacturXHtmlToPdfInput,

package/src/services/pdf/gotenberg.ts

@@ -32,6 +32,12 @@ export type GotenbergConfig = {
 
 export type RenderHtmlToPdfInput = {
   html: string;
+  /**
+   * Document title that PDF viewers show, such as the document's name. The
+   * HTML's own non-blank `<title>` wins; without either, viewers show a
+   * random file name.
+   */
+  title?: string;
   headerHtml?: string | null;
   footerHtml?: string | null;
   filename?: string;
@@ -49,7 +55,8 @@ export type AttachPdfFilesInput = {
   attachments: Array<{ name: string; data: Blob; relationship?: "Source" | "Data" | "Alternative" | "Supplement" | "Unspecified" }>;
 };
 
-export type RenderFacturXHtmlToPdfInput = RenderHtmlToPdfInput & {
+/** PDF/A conversion drops the document title, so viewers show the file name of a Factur-X invoice. */
+export type RenderFacturXHtmlToPdfInput = Omit<RenderHtmlToPdfInput, "title"> & {
   xml: string;
   conformanceLevel?: "MINIMUM" | "BASIC WL" | "BASIC" | "EN 16931" | "EXTENDED";
   documentType?: "INVOICE" | "ORDER" | "ORDER RESPONSE";
@@ -132,7 +139,7 @@ function htmlForm(input: RenderHtmlToPdfInput, config: GotenbergConfig): FormDat
     (input.assets ?? []).reduce((sum, asset) => sum + asset.data.size, 0);
   if (total > config.maxHtmlBytes) throw new GotenbergRenderError("html_too_large", "HTML and assets exceed the configured input budget.");
   const form = new FormData();
-  form.append("files", new Blob([offlineHtml(input.html)], { type: "text/html" }), "index.html");
+  form.append("files", new Blob([offlineHtml(input.html, input.title)], { type: "text/html" }), "index.html");
   if (input.headerHtml?.trim()) form.append("files", new Blob([offlineHtml(input.headerHtml)], { type: "text/html" }), "header.html");
   if (input.footerHtml?.trim()) form.append("files", new Blob([offlineHtml(input.footerHtml)], { type: "text/html" }), "footer.html");
   const names = new Set(["index.html", "header.html", "footer.html", "factur-x.xml"]);

package/src/services/pdf/index.ts

@@ -22,6 +22,7 @@ export {
   testGotenberg,
 } from "./gotenberg";
 export type {
+  BuildPresetPdfHtmlInput,
   MarkdownPdfErrorCode,
   MarkdownPdfTemplateId,
   RenderMarkdownToPdfInput,
@@ -29,6 +30,7 @@ export type {
 } from "./markdown";
 export {
   buildMarkdownPdfHtml,
+  buildPresetPdfHtml,
   MARKDOWN_PDF_MAX_CUSTOM_CSS_BYTES,
   MARKDOWN_PDF_MAX_MARKDOWN_BYTES,
   MARKDOWN_PDF_TEMPLATE_IDS,

package/src/services/pdf/markdown.ts

@@ -30,12 +30,35 @@ export class MarkdownPdfError extends Error {
 
 export type RenderMarkdownToPdfInput = {
   markdown: string;
+  /** Document title that PDF viewers show, such as the note or file name. */
+  title?: string;
   templateId?: MarkdownPdfTemplateId;
   customCss?: string;
 };
 
 export type RenderMarkdownToPdfOptions = RenderHtmlToPdfOptions;
 
+export type BuildPresetPdfHtmlInput = {
+  /** Body HTML the application rendered from its own document format. */
+  html: string;
+  templateId?: MarkdownPdfTemplateId;
+  customCss?: string;
+  /** Application CSS for its own elements, applied after the preset and before `customCss`. */
+  css?: string;
+};
+
+// Noto Serif, which Gotenberg ships, forms f-ligatures for the report body. It
+// has no "≠" but has "=" and the combining overlay U+0338, so Chromium would
+// build "≠" from both and draw "=/". Without U+0338 in the range, such
+// characters fall back whole to the next font. local() takes the PostScript
+// name and fetches nothing.
+const REPORT_SERIF_RANGE = "U+0-337, U+339-10FFFF";
+const REPORT_SERIF_FACES = `
+@font-face { font-family: "Report Noto Serif"; src: local("NotoSerif-Regular"); unicode-range: ${REPORT_SERIF_RANGE}; }
+@font-face { font-family: "Report Noto Serif"; src: local("NotoSerif-Bold"); font-weight: bold; unicode-range: ${REPORT_SERIF_RANGE}; }
+@font-face { font-family: "Report Noto Serif"; src: local("NotoSerif-Italic"); font-style: italic; unicode-range: ${REPORT_SERIF_RANGE}; }
+@font-face { font-family: "Report Noto Serif"; src: local("NotoSerif-BoldItalic"); font-weight: bold; font-style: italic; unicode-range: ${REPORT_SERIF_RANGE}; }`;
+
 const TEMPLATE_CSS: Record<MarkdownPdfTemplateId, string> = {
   document: `
 @page { size: A4; margin: 22mm 20mm 24mm; }
@@ -56,9 +79,9 @@ th { background: #f1f5f9; font-weight: 650; }
 thead { display: table-header-group; } tr { break-inside: avoid; }
 hr { border: 0; border-top: 1px solid #cbd5e1; margin: 1.5em 0; }
 `,
-  report: `
+  report: `${REPORT_SERIF_FACES}
 @page { size: A4; margin: 24mm 22mm 26mm; }
-:root { color: #263244; font: 10.75pt/1.58 Georgia, "Times New Roman", serif; }
+:root { color: #263244; font: 10.75pt/1.58 Georgia, "Report Noto Serif", "Times New Roman", serif; }
 body { margin: 0; background: #fff; }
 .markdown-document { max-width: 100%; overflow-wrap: anywhere; }
 h1, h2, h3, h4, h5, h6 { color: #13233a; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.18; break-after: avoid-page; }
@@ -112,6 +135,12 @@ const safeLink = (value: string): string | null => {
 const renderMarkdown = (source: string): string => {
   const renderer = new Renderer();
   renderer.html = ({ text }: Tokens.HTML | Tokens.Tag) => escapeHtml(text);
+  // marked flags text that follows an inline <pre>, <code>, <kbd> or <script>
+  // tag as already escaped, because it expects that tag to reach the output as
+  // HTML. The tag is escaped here, so the text after it is escaped as well.
+  renderer.text = function (token: Tokens.Text | Tokens.Escape) {
+    return Renderer.prototype.text.call(this, token.type === "text" && token.escaped ? { ...token, escaped: false } : token);
+  };
   renderer.image = ({ href, title, text }: Tokens.Image) => {
     const label = escapeHtml(text.trim() ? `Image: ${text}` : "Image");
     const safeHref = safeLink(href);
@@ -142,6 +171,10 @@ const renderMarkdown = (source: string): string => {
   }
 };
 
+// Keep CSS inside its style element even when it contains an HTML end tag.
+// The backslash is valid CSS escaping but no longer an HTML token.
+const styleText = (css: string): string => css.replace(/<\/style/giu, "<\\/style");
+
 const validateCustomCss = (customCss: string): string => {
   if (byteLength(customCss) > MARKDOWN_PDF_MAX_CUSTOM_CSS_BYTES) {
     throw new MarkdownPdfError("invalid_css", "Custom CSS exceeds the 32 KiB limit.", "css_too_large");
@@ -166,15 +199,15 @@ const validateCustomCss = (customCss: string): string => {
     }
   });
 
-  // Keep the CSS inside its style element even when input contains an HTML
-  // end tag. The backslash is valid CSS escaping but no longer an HTML token.
-  return root.toString().replace(/<\/style/giu, "<\\/style");
+  return styleText(root.toString());
 };
 
-export const buildMarkdownPdfHtml = (input: RenderMarkdownToPdfInput): string => {
-  if (typeof input.markdown !== "string" || !input.markdown.trim()) {
-    throw new MarkdownPdfError("bad_input", "Markdown must not be empty.", "markdown_empty");
-  }
+/**
+ * Wrap application-rendered HTML in the same print presets and validated
+ * custom CSS as Markdown PDFs, for documents whose Markdown dialect the
+ * application renders itself.
+ */
+export const buildPresetPdfHtml = (input: BuildPresetPdfHtmlInput): string => {
   const templateId = input.templateId;
   if (templateId !== undefined && !MARKDOWN_PDF_TEMPLATE_IDS.includes(templateId)) {
     throw new MarkdownPdfError("bad_input", "Unknown Markdown PDF template.", "unknown_template");
@@ -183,8 +216,8 @@ export const buildMarkdownPdfHtml = (input: RenderMarkdownToPdfInput): string =>
   const suppliedCustomCss = input.customCss?.trim() ?? "";
   const customCss = suppliedCustomCss ? validateCustomCss(input.customCss ?? "") : "";
   const presetCss = templateId ? TEMPLATE_CSS[templateId] : customCss ? "" : TEMPLATE_CSS.document;
-  const stylesheet = `${presetCss}${presetCss && customCss ? `\n/* Custom CSS overrides */\n` : ""}${customCss}`;
-  const content = renderMarkdown(input.markdown);
+  const baseCss = [presetCss, input.css ? styleText(input.css) : ""].filter(Boolean).join("\n");
+  const stylesheet = `${baseCss}${baseCss && customCss ? `\n/* Custom CSS overrides */\n` : ""}${customCss}`;
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -193,15 +226,22 @@ export const buildMarkdownPdfHtml = (input: RenderMarkdownToPdfInput): string =>
 <meta http-equiv="Content-Security-Policy" content="default-src 'none'; base-uri 'none'; connect-src 'none'; font-src 'none'; form-action 'none'; frame-src 'none'; img-src 'none'; media-src 'none'; object-src 'none'; script-src 'none'; style-src 'unsafe-inline'">
 <style>${stylesheet}</style>
 </head>
-<body><main class="markdown-document">${content}</main></body>
+<body><main class="markdown-document">${input.html}</main></body>
 </html>`;
 };
 
+export const buildMarkdownPdfHtml = (input: RenderMarkdownToPdfInput): string => {
+  if (typeof input.markdown !== "string" || !input.markdown.trim()) {
+    throw new MarkdownPdfError("bad_input", "Markdown must not be empty.", "markdown_empty");
+  }
+  return buildPresetPdfHtml({ html: renderMarkdown(input.markdown), templateId: input.templateId, customCss: input.customCss });
+};
+
 export const renderMarkdownToPdfWithConfig = (
   input: RenderMarkdownToPdfInput,
   config: GotenbergConfig,
   options: RenderMarkdownToPdfOptions = {},
-): Promise<RenderHtmlToPdfResult> => renderHtmlToPdfWithConfig({ html: buildMarkdownPdfHtml(input) }, config, options);
+): Promise<RenderHtmlToPdfResult> => renderHtmlToPdfWithConfig({ html: buildMarkdownPdfHtml(input), title: input.title }, config, options);
 
 export const renderMarkdownToPdf = async (
   input: RenderMarkdownToPdfInput,

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

@@ -13,6 +13,16 @@
  * 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'";
@@ -53,13 +63,48 @@ const leadingDoctype = (html: string): string => {
 /** An empty comment stands in for a removed element, so the text on either side stays separate. */
 const REMOVED = "<!---->";
 
-export const offlineHtml = (html: string): string =>
-  leadingDoctype(html) +
-  OFFLINE_META +
-  new HTMLRewriter()
-    // Chromium parses noscript content as markup when JavaScript is disabled.
-    // math, foreignObject, and desc: see the module comment.
-    .on("script, noscript, meta, base, iframe, frame, frameset, object, embed, math, foreignObject, desc", {
+// 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 });
       },
@@ -72,3 +117,6 @@ export const offlineHtml = (html: string): string =>
       },
     })
     .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/settings/core-settings.ts

@@ -317,6 +317,8 @@ export const CORE_SETTINGS = {
     default: "",
     description: "Internal base URL of the Gotenberg service used for HTML-to-PDF rendering.",
     placeholder: "e.g. http://gotenberg:3000",
+    envFallback: () => env.GOTENBERG_URL,
+    envBootstrap: () => env.GOTENBERG_URL,
   },
   "gotenberg.username": {
     kind: "string",

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/LayoutPreferences.island.tsx

@@ -3,10 +3,8 @@ import type { CloudTheme } from "../shared/theme";
 import { createPreferenceController } from "./preference-controller";
 
 type LayoutPreferencesProps = {
-  class?: string;
   initialTheme: CloudTheme;
   position: DropdownPosition;
-  triggerClass?: string;
 };
 
 export default function LayoutPreferences(props: LayoutPreferencesProps) {
@@ -14,21 +12,8 @@ export default function LayoutPreferences(props: LayoutPreferencesProps) {
   const preferences = createPreferenceController(props.initialTheme, locale);
 
   return (
-    <Dropdown.Root
-      class={props.class}
-      items={preferences.items()}
-      label={preferences.messages().preferencesMenuLabel}
-      position={props.position}
-      width="14rem"
-    >
-      <Dropdown.Trigger
-        class={props.triggerClass}
-        iconOnly
-        label={preferences.messages().preferencesMenuLabel}
-        size="sm"
-        tooltip={false}
-        variant="secondary"
-      >
+    <Dropdown.Root items={preferences.items()} label={preferences.messages().preferencesMenuLabel} position={props.position} width="14rem">
+      <Dropdown.Trigger iconOnly label={preferences.messages().preferencesMenuLabel} size="sm" tooltip={false} variant="secondary">
         <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
       </Dropdown.Trigger>
     </Dropdown.Root>