@k2b/cloud 0.19.0 → 0.21.0

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/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

@@ -38,6 +38,27 @@ export type RenderMarkdownToPdfInput = {
 
 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; }
@@ -58,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; }
@@ -114,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);
@@ -144,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");
@@ -168,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");
@@ -185,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>
@@ -195,10 +226,17 @@ 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,

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/ai-quotas.ts

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { PrincipalSchema } from "../contracts/shared";
+import { PrincipalSchema, ServiceAccountKindSchema } from "../contracts/shared";
 import { AiPriceSchema } from "./ai-costs";
 
 export const AiBackgroundBudgetSchema = z
@@ -22,6 +22,8 @@ export const AiQuotaRuleSchema = z
           .object({
             principal: PrincipalSchema.refine((p) => p.type !== "public", "Chat quotas require an identity."),
             displayName: z.string().max(300).optional(),
+            /** Presentation only, like `displayName`: service-account grants show the same kind as the principal picker. */
+            serviceAccountKind: ServiceAccountKindSchema.optional(),
             limit: AiPriceSchema.nullable(),
           })
           .strict(),
@@ -71,11 +73,22 @@ export const AiQuotaUsersQuerySchema = z
   })
   .strict();
 
+/**
+ * One own chat allowance as the browser sees it. It carries no amounts, limits, or unit:
+ * `usedPercent` is a whole number from 0 to 100 and reaches 100 only when the allowance is used up.
+ * Below 100 the server can still reject a call that the rest of the allowance cannot cover.
+ * It is `null` when the allowance is unlimited or its usage cannot be measured right now.
+ */
+export type AiChatQuotaBalance = {
+  scope: string;
+  unlimited: boolean;
+  usedPercent: number | null;
+  resetsAt: string | null;
+};
 export type AiChatQuotaSnapshot = {
-  unit?: string;
   unlimitedModels?: string[];
   enabled: boolean;
-  balances: Omit<AiQuotaBalance, "sources" | "sourceDetails">[];
+  balances: AiChatQuotaBalance[];
 };
 
 export const AiQuotaReportQuerySchema = z.object({

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" variant="secondary">
         <i class="ti ti-adjustments-horizontal" aria-hidden="true" />
       </Dropdown.Trigger>
     </Dropdown.Root>

package/src/ssr/MinimalLayout.tsx

@@ -1,46 +1,70 @@
 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 LayoutPreferences from "./LayoutPreferences.island";
 import type { MinimalLayoutContext } from "./layout-context";
+import MinimalLayoutPreferences from "./MinimalLayoutPreferences.island";
+import { profilePreferencesMessages } from "./profile-preferences-messages";
 import TimezoneCookie from "./TimezoneCookie.island";
 
+/**
+ * @deprecated The language and theme settings always sit in the footer; a
+ * position is treated like `true`.
+ */
 export type MinimalLayoutPreferencePosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 export type MinimalLayoutProps = {
   children: JSX.Element;
   c: MinimalLayoutContext;
-  /** Position the shared language/theme control, or disable it entirely. */
-  preferences?: MinimalLayoutPreferencePosition | false;
-};
-
-const menuPosition = (position: MinimalLayoutPreferencePosition) => {
-  if (position === "top-left") return "bottom-right" as const;
-  if (position === "top-right") return "bottom-left" as const;
-  if (position === "bottom-left") return "top-right" as const;
-  return "top-left" as const;
+  /**
+   * Render the footer with legal links and the language and theme settings
+   * (default), or `false` for embeds and fixed presentation surfaces.
+   */
+  preferences?: boolean | MinimalLayoutPreferencePosition;
 };
 
 export default function MinimalLayout(props: MinimalLayoutProps) {
   const cookie = props.c.req.raw.headers.get("Cookie") ?? "";
   const theme = readThemeFromCookieHeader(cookie);
   const locale = getLocale(props.c);
-  const preferences = props.preferences === undefined ? "bottom-right" : props.preferences;
   props.c.get("page").theme = theme;
 
+  if (props.preferences === false) {
+    return (
+      <LocaleProvider locale={locale}>
+        <TimezoneCookie />
+        {props.children}
+      </LocaleProvider>
+    );
+  }
+
+  const t = profilePreferencesMessages.resolve([locale]).t;
+  // Aggregate every running app's legal links like Layout (last wins on
+  // duplicate href). Unlike Layout, MinimalLayout does not require
+  // middleware.runtime(); without it the footer has no legal links.
+  const apps = resolveAppPresentations(props.c.get("runtime")?.apps ?? [], locale);
+  const legalLinks = [...new Map(apps.flatMap((app) => (app.legalLinks ?? []).map((link) => [link.href, link] as const))).values()];
+
   return (
     <LocaleProvider locale={locale}>
       <TimezoneCookie />
-      {props.children}
-      {preferences !== false && (
-        <LayoutPreferences
-          class={`minimal-layout-preferences minimal-layout-preferences--${preferences}`}
-          initialTheme={theme}
-          position={menuPosition(preferences)}
-          triggerClass="minimal-layout-preferences__trigger"
-        />
-      )}
+      <div class="minimal-layout">
+        {props.children}
+        <footer class="minimal-layout-footer">
+          {legalLinks.length > 0 && (
+            <nav class="minimal-layout-footer__links" aria-label={t.legalLinks}>
+              {legalLinks.map((link) => (
+                // A new tab keeps a started upload or a filled-in form on this page.
+                <a href={link.href} target="_blank" rel="noopener">
+                  {link.label}
+                </a>
+              ))}
+            </nav>
+          )}
+          <MinimalLayoutPreferences initialTheme={theme} />
+        </footer>
+      </div>
     </LocaleProvider>
   );
 }

package/src/ssr/MinimalLayoutPreferences.island.tsx

@@ -0,0 +1,52 @@
+import { Button, Dropdown, useLocale } from "@k2b/ui";
+import { type ProfilePreferenceLocale, profilePreferenceLocale, setLocalePreference } from "../browser/locale-preference";
+import { canonicalLocale } from "../shared/locale";
+import type { CloudTheme } from "../shared/theme";
+import { createPreferenceController } from "./preference-controller";
+
+/**
+ * Labeled language and theme controls for the MinimalLayout footer. The
+ * language trigger names the current language; the theme button names the
+ * mode it switches to, like every other Cloud preference menu. Below `md` both
+ * are compact, the language code and the theme icon with the full names as
+ * accessible labels, so they fit next to the legal links on a phone. CSS picks
+ * the form, so the server response is already final.
+ */
+export default function MinimalLayoutPreferences(props: { initialTheme: CloudTheme }) {
+  const locale = useLocale();
+  const preferences = createPreferenceController(props.initialTheme, locale);
+  const t = preferences.messages;
+  const language = () => profilePreferenceLocale(locale());
+  const languageName = () => (language() === "de" ? t().switchToGerman : t().switchToEnglish);
+  // Keep a regional locale such as en-GB when its language is chosen again,
+  // but let a visitor on an unsupported locale such as fr-FR, who reads the
+  // English fallback, still choose English explicitly.
+  const choose = (next: ProfilePreferenceLocale) => {
+    if (canonicalLocale(locale())?.split("-")[0] !== next) setLocalePreference(next);
+  };
+
+  return (
+    <div class="minimal-layout-footer__preferences">
+      <Dropdown.Root
+        label={t().language}
+        position="top-right"
+        width="10rem"
+        items={[
+          { label: t().switchToGerman, choice: "radio", checked: () => language() === "de", action: () => choose("de") },
+          { label: t().switchToEnglish, choice: "radio", checked: () => language() === "en", action: () => choose("en") },
+        ]}
+      >
+        <Dropdown.Trigger label={`${t().language}: ${languageName()}`} size="sm" tooltip={false} variant="ghost">
+          <i class="ti ti-language" aria-hidden="true" />
+          <span class="hidden md:inline">{languageName()}</span>
+          <span class="md:hidden">{language().toUpperCase()}</span>
+          <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>
+    </div>
+  );
+}

package/src/ssr/PageError.tsx

@@ -17,7 +17,7 @@ export const renderPageError = (c: Context, status: PageErrorStatus, options: Pa
   return () =>
     options.layout === "minimal" ? (
       <MinimalLayout c={c}>
-        <main class="min-h-screen bg-[var(--ui-canvas)] p-[var(--ui-space-shell)]">
+        <main class="flex-1 bg-[var(--ui-canvas)] p-[var(--ui-space-shell)]">
           <NotFoundState code={String(status)} title={title} description={description} action={action} />
         </main>
       </MinimalLayout>

package/src/ssr/profile-preferences-messages.ts

@@ -6,6 +6,8 @@ export const profilePreferencesMessages = i18n.define({
     en: {
       menuLabel: "Profile and preferences",
       preferencesMenuLabel: "Appearance and language",
+      language: "Language",
+      legalLinks: "Legal",
       profileSettings: "Profile settings",
       signOut: "Sign out",
       signOutFailed: "Sign out failed. Please try again.",
@@ -17,6 +19,8 @@ export const profilePreferencesMessages = i18n.define({
     de: {
       menuLabel: "Profil und Einstellungen",
       preferencesMenuLabel: "Darstellung und Sprache",
+      language: "Sprache",
+      legalLinks: "Rechtliches",
       profileSettings: "Profileinstellungen",
       signOut: "Abmelden",
       signOutFailed: "Abmelden fehlgeschlagen. Bitte versuche es erneut.",

package/src/styles/resource-search.css

@@ -345,8 +345,8 @@
   display: none;
 }
 .cloud-resource-search :is(.cloud-resource-search__result, .cloud-resource-search__tag-option, .cloud-resource-search__tag):focus-visible {
-  outline: 2px solid var(--color-blue-500);
-  outline-offset: -2px;
+  outline: var(--k2b-focus-width) solid var(--color-blue-500);
+  outline-offset: calc(-1 * var(--k2b-focus-width));
 }
 @media (min-width: 48rem) {
   .cloud-resource-search {

package/src/styles/utilities-feedback.css

@@ -219,8 +219,8 @@
 
 @media (forced-colors: active) {
   .prompt-search-surface:focus-within {
-    outline: 2px solid CanvasText;
-    outline-offset: -2px;
+    outline: var(--k2b-focus-width) solid CanvasText;
+    outline-offset: calc(-1 * var(--k2b-focus-width));
   }
 }
 

package/src/styles/utilities-markdown-editor.css

@@ -433,8 +433,8 @@
 
 .md-link-widget:focus-visible {
   border-radius: 0.125rem;
-  outline: 2px solid var(--ui-app-accent-border);
-  outline-offset: 2px;
+  outline: var(--k2b-focus-width) solid var(--ui-app-accent-border);
+  outline-offset: var(--k2b-focus-offset);
 }
 
 .md-link-icon {

package/src/styles/utilities-navigation.css

@@ -903,36 +903,110 @@
   }
 }
 
-/* MinimalLayout owns no page geometry. Its optional preference trigger is the
-   only positioned element and respects device safe areas in every corner. */
-.minimal-layout-preferences {
-  position: fixed;
-  z-index: 50;
+/* MinimalLayout stacks the page content and its footer in a column at least
+   one viewport tall, so the footer ends a short page and follows a long one.
+   Content that should fill the remaining height grows with flex-1. */
+.minimal-layout {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100dvh;
+  flex-direction: column;
+}
+
+.minimal-layout-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem 1rem;
+  margin-top: auto;
+  padding: 0.75rem max(1rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom))
+    max(1rem, env(safe-area-inset-left));
+  color: var(--k2b-text-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.minimal-layout-footer__links,
+.minimal-layout-footer__preferences {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
 }
 
-.minimal-layout-preferences--top-left {
-  top: max(0.75rem, env(safe-area-inset-top));
-  left: max(0.75rem, env(safe-area-inset-left));
+.minimal-layout-footer__links {
+  column-gap: 1rem;
 }
 
-.minimal-layout-preferences--top-right {
-  top: max(0.75rem, env(safe-area-inset-top));
-  right: max(0.75rem, env(safe-area-inset-right));
+.minimal-layout-footer__preferences {
+  gap: 0.25rem;
 }
 
-.minimal-layout-preferences--bottom-left {
-  bottom: max(0.75rem, env(safe-area-inset-bottom));
-  left: max(0.75rem, env(safe-area-inset-left));
+.minimal-layout-footer__links a {
+  display: inline-flex;
+  min-height: 1.75rem;
+  align-items: center;
+  border-radius: var(--k2b-radius-control);
+  color: inherit;
+  transition: color 150ms ease-out;
 }
 
-.minimal-layout-preferences--bottom-right {
-  right: max(0.75rem, env(safe-area-inset-right));
-  bottom: max(0.75rem, env(safe-area-inset-bottom));
+.minimal-layout-footer__links a:hover {
+  color: var(--k2b-text);
 }
 
-.minimal-layout-preferences__trigger {
-  box-shadow: var(--ui-shadow-float);
-  backdrop-filter: blur(0.5rem);
+.minimal-layout-footer__links a:focus-visible {
+  outline: var(--k2b-focus-width) solid var(--k2b-focus-ring);
+  outline-offset: var(--k2b-focus-offset);
+}
+
+.k2b-ui .minimal-layout-footer .k2b-button[data-size] {
+  color: inherit;
+  font-size: inherit;
+}
+
+.k2b-ui .minimal-layout-footer .k2b-button[data-size]:hover {
+  color: var(--k2b-text);
+}
+
+/* Finger-sized footer targets on touch screens. */
+@media (any-pointer: coarse) {
+  .minimal-layout-footer__links a,
+  .k2b-ui .minimal-layout-footer .k2b-button[data-size] {
+    min-height: 2.75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .minimal-layout-footer__links a {
+    transition: none;
+  }
+}
+
+/* The one centered card of a standalone page (sign-in, a public share, an
+   unlock form). Phones have no room for a frame inside the page padding, so
+   below Tailwind's `md` breakpoint the card loses border, radius, shadow,
+   surface and its own padding, and its content sits on the page background.
+   Pure CSS on the same markup: the server response is already in its final
+   form. The second selector outranks an elevated @k2b/ui Paper.
+   The query is the exact opposite of `md:`, so a page that moves its own
+   padding or columns with `md:` switches at the same width as the card, also
+   with a larger default font size. `(width < 48rem)` is not: the build lowers
+   it to `max-width: calc(48rem - .001px)`, which Chromium still matches at
+   48rem. Without a frame there is nothing left to clip, so the card also
+   stops clipping: its content then reaches the card edge, and a clipping card
+   would cut the outer focus ring of a full-width button or field. */
+@media not all and (min-width: 48rem) {
+  .standalone-card,
+  .k2b-ui .k2b-paper.standalone-card {
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+    overflow: visible;
+  }
 }
 
 /* Workspace navigation chrome and resource identity. */

package/src/types/k2b-ui-fonts.d.ts

@@ -0,0 +1,7 @@
+// The @k2b/ui Plex preset, imported as text (`with { type: "text" }`). The
+// importing module references this file, so npm consumers that type-check
+// Cloud's sources get the declaration without adding it to their tsconfig.
+declare module "@k2b/ui/fonts/plex.css" {
+  const content: string;
+  export default content;
+}