@k2b/cloud 0.34.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/ai/capabilities.ts

@@ -425,6 +425,7 @@ const SCHEMA_KEYS = new Set([
   "required",
   "items",
   "prefixItems",
+  "additionalItems",
   "additionalProperties",
   "anyOf",
   "oneOf",
@@ -435,29 +436,139 @@ const SCHEMA_KEYS = new Set([
   "definitions",
 ]);
 
-const reduceSchemaValue = (value: unknown, key?: string): unknown => {
-  if (key === "const") return structuredClone(value);
+type SchemaReductionContext = {
+  root: Record<string, unknown>;
+  mirrorNames: Map<string, string>;
+  mirrors: Record<string, Record<string, unknown>>;
+};
+
+/** A local reference into the input schema: the root (`#`) or one of its `$defs` or `definitions`. */
+const localReference = (
+  reference: unknown,
+  root: Record<string, unknown>,
+): { identity: string; keyword: string; name: string; schema: unknown } | null => {
+  if (reference === "#") {
+    const { $defs: _defs, definitions: _definitions, ...schema } = root;
+    return { identity: "#", keyword: "$defs", name: "root", schema };
+  }
+  const match = typeof reference === "string" ? /^#\/(\$defs|definitions)\/([^/]+)$/.exec(reference) : null;
+  if (!match) return null;
+  const [, keyword, encodedName] = match;
+  const name = encodedName!.replace(/~1/g, "/").replace(/~0/g, "~");
+  const definitions = root[keyword!];
+  if (!definitions || typeof definitions !== "object" || !Object.hasOwn(definitions, name)) return null;
+  return { identity: `${keyword}/${name}`, keyword: keyword!, name, schema: Reflect.get(definitions, name) };
+};
+
+/** Whether a raw schema reaches a tuple; `visited` keeps each definition to one visit per question. */
+const containsTuple = (value: unknown, context: SchemaReductionContext, key?: string, visited = new Set<string>()): boolean => {
+  if (key === "const" || key === "enum" || key === "default" || key === "required" || key === "type") return false;
+  if (Array.isArray(value)) return value.some((item) => containsTuple(item, context, undefined, visited));
+  if (!value || typeof value !== "object") return false;
+  if (key === "properties" || key === "$defs" || key === "definitions") {
+    return Object.values(value).some((schema) => containsTuple(schema, context, undefined, visited));
+  }
+  if (Object.hasOwn(value, "prefixItems") || Array.isArray(Reflect.get(value, "items"))) return true;
+  const reference = localReference(Reflect.get(value, "$ref"), context.root);
+  if (reference && !visited.has(reference.identity)) {
+    visited.add(reference.identity);
+    if (containsTuple(reference.schema, context, undefined, visited)) return true;
+  }
+  return Object.entries(value).some(([childKey, childValue]) => containsTuple(childValue, context, childKey, visited));
+};
+
+const reduceSchemaValue = (value: unknown, context: SchemaReductionContext, key?: string, merged = false): unknown => {
+  if (key === "const" || key === "default") return structuredClone(value);
   if (Array.isArray(value)) {
     if (key === "required" || key === "enum" || key === "type") return structuredClone(value);
-    return value.map((item) => reduceSchemaValue(item));
+    return value.map((item) => reduceSchemaValue(item, context, undefined, merged));
   }
   if (!value || typeof value !== "object") return value;
+  if (key === "properties" || key === "$defs" || key === "definitions") {
+    return Object.fromEntries(Object.entries(value).map(([name, schema]) => [name, reduceSchemaValue(schema, context, undefined, merged)]));
+  }
 
   const output: Record<string, unknown> = {};
   for (const [childKey, childValue] of Object.entries(value)) {
-    if (key === "properties" || key === "$defs" || key === "definitions") {
-      output[childKey] = reduceSchemaValue(childValue);
-      continue;
+    if (!SCHEMA_KEYS.has(childKey) || (merged && childKey === "default")) continue;
+    // Tuple widening can make surrounding union branches overlap, so their defaults belong to the app.
+    const unionMerged =
+      merged ||
+      ((childKey === "anyOf" || childKey === "oneOf") &&
+        Array.isArray(childValue) &&
+        childValue.some((branch) => containsTuple(branch, context)));
+    output[childKey] = reduceSchemaValue(childValue, context, childKey, unionMerged);
+  }
+  if (output.oneOf !== undefined) {
+    if (output.anyOf === undefined) output.anyOf = output.oneOf;
+    else {
+      output.allOf = [...(Array.isArray(output.allOf) ? output.allOf : []), { anyOf: output.anyOf }, { anyOf: output.oneOf }];
+      delete output.anyOf;
     }
-    if (!SCHEMA_KEYS.has(childKey)) continue;
-    output[childKey] = reduceSchemaValue(childValue, childKey);
+    delete output.oneOf;
+  }
+
+  const positions = Array.isArray(output.prefixItems) ? output.prefixItems : Array.isArray(output.items) ? output.items : null;
+  if (positions) {
+    const rest = Array.isArray(output.prefixItems) ? output.items : output.additionalItems;
+    // Extra items of an open tuple may be anything, so the AI side must not narrow them to the positions.
+    const schemas = rest === undefined || rest === true ? [] : rest === false ? positions : [...positions, rest];
+    // Position-erased branches must leave defaults to the app's authoritative tuple schema.
+    const mergedSchemas = schemas.some((schema) => JSON.stringify(schema) !== JSON.stringify(schemas[0]))
+      ? schemas.map((schema) => reduceSchemaValue(schema, context, undefined, true))
+      : schemas;
+    const distinct = mergedSchemas.filter(
+      (schema, index) => mergedSchemas.findIndex((candidate) => JSON.stringify(candidate) === JSON.stringify(schema)) === index,
+    );
+    output.items = distinct.length === 0 ? {} : distinct.length === 1 ? distinct[0] : { anyOf: distinct };
+    if (rest === false)
+      output.maxItems = Math.min(typeof output.maxItems === "number" ? output.maxItems : positions.length, positions.length);
+  }
+  delete output.prefixItems;
+  delete output.additionalItems;
+  if (output.items === false) output.maxItems = 0;
+  // Zod drops array bounds without an item schema, so "any item" stays an empty schema.
+  if (typeof output.items === "boolean") output.items = {};
+  const reference = merged ? localReference(output.$ref, context.root) : null;
+  if (reference) {
+    const { identity, keyword, name } = reference;
+    const definitions = context.root[keyword];
+    const mirrors = context.mirrors[keyword] ?? {};
+    context.mirrors[keyword] = mirrors;
+    let mirrorName = context.mirrorNames.get(identity);
+    if (mirrorName === undefined) {
+      mirrorName = `${name}.ai`;
+      for (
+        let suffix = 1;
+        (definitions && typeof definitions === "object" && Object.hasOwn(definitions, mirrorName)) || Object.hasOwn(mirrors, mirrorName);
+        suffix++
+      ) {
+        mirrorName = `${name}.ai${suffix}`;
+      }
+      // Reserve the mirror before descending so recursive refs never reach default-bearing originals.
+      context.mirrorNames.set(identity, mirrorName);
+      mirrors[mirrorName] = {};
+      mirrors[mirrorName] = reduceSchemaValue(reference.schema, context, undefined, true);
+    }
+    output.$ref = `#/${keyword}/${mirrorName.replace(/~/g, "~0").replace(/\//g, "~1")}`;
   }
   return output;
 };
 
-/** Keep the provider-useful shape while leaving authoritative validation in the target app. */
-export const reduceAiCapabilityInputSchema = (schema: Record<string, unknown>): Record<string, unknown> =>
-  reduceSchemaValue(schema) as Record<string, unknown>;
+/**
+ * Keep the provider-useful shape while leaving authoritative validation in the target app.
+ * Tuples reach the model as bounded arrays of their item schemas and `oneOf` as `anyOf`, because loosened branches may
+ * overlap; the app still validates exact tuple positions and exclusive unions.
+ */
+export const reduceAiCapabilityInputSchema = (schema: Record<string, unknown>): Record<string, unknown> => {
+  const context: SchemaReductionContext = { root: schema, mirrorNames: new Map(), mirrors: {} };
+  const reduced = reduceSchemaValue(schema, context) as Record<string, unknown>;
+  for (const [keyword, mirrors] of Object.entries(context.mirrors)) {
+    const definitions = reduced[keyword];
+    reduced[keyword] = { ...(definitions && typeof definitions === "object" ? definitions : {}), ...mirrors };
+  }
+  return reduced;
+};
 
 export const aiCapabilityInputSchema = (schema: Record<string, unknown>): z.ZodType =>
   z.fromJSONSchema(reduceAiCapabilityInputSchema(schema));

package/src/ai/firecrawl-tools.ts

@@ -1,8 +1,8 @@
-import { isIP } from "node:net";
 import { type ToolContext, truncateMiddle } from "@k2b/nessi";
 import { z } from "zod";
 import type { RequestActor } from "../server";
 import { coreSettings } from "../services";
+import { isUnsafeNetworkAddress, isUnsafeNetworkHostname, parseNetworkAddress } from "../shared/network-address";
 import { AI_WEBSITE_APPROVAL_TOOL, aiTurnAllowsWebsiteApprovals, aiWebsiteApprovalScope, findRememberedAiToolApproval } from "./approvals";
 import { aiConversations } from "./store";
 import { defineAiTool } from "./tools";
@@ -141,31 +141,6 @@ const truncate = (text: string, maxChars: number): { text: string; truncated: bo
   return { text: text.slice(0, Math.max(0, maxChars)).trimEnd(), truncated: true };
 };
 
-const isPrivateIpv4 = (hostname: string): boolean => {
-  const parts = hostname.split(".").map((part) => Number(part));
-  if (parts.length !== 4 || parts.some((part) => !Number.isInteger(part) || part < 0 || part > 255)) return true;
-  const [a, b] = parts as [number, number, number, number];
-  if (a === 0 || a === 10 || a === 127) return true;
-  if (a === 100 && b >= 64 && b <= 127) return true;
-  if (a === 169 && b === 254) return true;
-  if (a === 172 && b >= 16 && b <= 31) return true;
-  if (a === 192 && (b === 0 || b === 168)) return true;
-  if (a === 198 && (b === 18 || b === 19)) return true;
-  return a >= 224;
-};
-
-const isPrivateIpv6 = (hostname: string): boolean => {
-  const normalized = hostname.replace(/^\[|\]$/g, "").toLowerCase();
-  return (
-    normalized === "::" ||
-    normalized === "::1" ||
-    normalized.startsWith("fc") ||
-    normalized.startsWith("fd") ||
-    normalized.startsWith("fe80:") ||
-    normalized.startsWith("2001:db8:")
-  );
-};
-
 export const assertPublicHttpUrl = (rawUrl: string): string => {
   let parsed: URL;
   try {
@@ -176,13 +151,11 @@ export const assertPublicHttpUrl = (rawUrl: string): string => {
   if (parsed.protocol !== "https:" && parsed.protocol !== "http:") throw new Error("URL must use http or https.");
 
   const hostname = parsed.hostname.toLowerCase();
-  if (!hostname || hostname === "localhost" || hostname.endsWith(".localhost")) {
+  if (isUnsafeNetworkHostname(hostname)) {
     throw new Error("URL host is not allowed.");
   }
 
-  const ipKind = isIP(hostname.replace(/^\[|\]$/g, ""));
-  if (ipKind === 4 && isPrivateIpv4(hostname)) throw new Error("URL must not point to a private IP address.");
-  if (ipKind === 6 && isPrivateIpv6(hostname)) throw new Error("URL must not point to a private IP address.");
+  if (parseNetworkAddress(hostname) && isUnsafeNetworkAddress(hostname)) throw new Error("URL must not point to a private IP address.");
   return parsed.toString();
 };
 

package/src/services/network-security.ts

@@ -1,5 +1,6 @@
 import { lookup as dnsLookup } from "node:dns/promises";
-import { isUnsafeNetworkAddress, isUnsafeNetworkHostname, networkAddressFamily, normalizeNetworkHostname } from "../shared/network-address";
+import type { LookupFunction } from "node:net";
+import { isUnsafeNetworkAddress, isUnsafeNetworkHostname, normalizeNetworkHostname, parseNetworkAddress } from "../shared/network-address";
 
 export type PublicNetworkAddress = { address: string; family: 4 | 6 };
 export type NetworkLookup = (
@@ -7,25 +8,48 @@ export type NetworkLookup = (
   options: { all: true; verbatim: true },
 ) => Promise<Array<{ address: string; family: number }>>;
 
+export class NetworkTargetBlockedError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "NetworkTargetBlockedError";
+  }
+}
+
 export const resolvePublicNetworkAddresses = async (
   rawHostname: string,
   lookup: NetworkLookup = (hostname) => dnsLookup(hostname, { all: true, verbatim: true }),
 ): Promise<PublicNetworkAddress[]> => {
   const hostname = normalizeNetworkHostname(rawHostname);
-  if (!hostname || isUnsafeNetworkHostname(hostname)) throw new Error("Network target host is not allowed");
+  if (isUnsafeNetworkHostname(rawHostname)) throw new NetworkTargetBlockedError("Network target host is not allowed");
 
-  const literalFamily = networkAddressFamily(hostname);
-  const addresses = literalFamily ? [{ address: hostname, family: literalFamily }] : await lookup(hostname, { all: true, verbatim: true });
+  const literal = parseNetworkAddress(rawHostname);
+  const addresses = literal ? [literal] : await lookup(hostname, { all: true, verbatim: true });
   if (addresses.length === 0) throw new Error("Network target could not be resolved");
 
   const normalized: PublicNetworkAddress[] = addresses.map((entry) => {
-    const address = normalizeNetworkHostname(entry.address);
-    if (entry.family !== 4 && entry.family !== 6) throw new Error("Network target returned an unsupported address family");
-    if (networkAddressFamily(address) !== entry.family) throw new Error("Network target returned an invalid address");
-    return { address, family: entry.family };
+    const literal = parseNetworkAddress(entry.address);
+    if (entry.family !== 4 && entry.family !== 6)
+      throw new NetworkTargetBlockedError("Network target returned an unsupported address family");
+    if (!literal || literal.family !== entry.family) throw new NetworkTargetBlockedError("Network target returned an invalid address");
+    return literal;
   });
   if (normalized.some((entry) => isUnsafeNetworkAddress(entry.address))) {
-    throw new Error("Network target resolved to a private or reserved address");
+    throw new NetworkTargetBlockedError("Network target resolved to a private or reserved address");
   }
   return normalized;
 };
+
+/** Socket lookup using only addresses already checked by the public resolver. */
+export const pinnedNetworkLookup =
+  (addresses: readonly PublicNetworkAddress[]): LookupFunction =>
+  (_hostname, options, callback) => {
+    const family = options.family === 4 || options.family === 6 ? options.family : 0;
+    const candidates = family ? addresses.filter((entry) => entry.family === family) : [...addresses];
+    const selected = candidates[0];
+    if (!selected) {
+      callback(Object.assign(new Error("No validated address for requested IP family"), { code: "ENOTFOUND" }), "", family || undefined);
+      return;
+    }
+    if (options.all) callback(null, candidates);
+    else callback(null, selected.address, selected.family);
+  };

package/src/shared/network-address.ts

@@ -32,22 +32,12 @@ const UNSAFE_IPV4_RANGES: ReadonlyArray<readonly [string, number]> = [
   ["240.0.0.0", 4],
 ];
 
-const ipv6ToBigInt = (rawAddress: string): bigint | null => {
-  let address = rawAddress.toLowerCase().split("%")[0] ?? "";
-  if (address.includes(".")) {
-    const separator = address.lastIndexOf(":");
-    const ipv4 = ipv4ToNumber(address.slice(separator + 1));
-    if (separator < 0 || ipv4 === null) return null;
-    address = `${address.slice(0, separator)}:${(ipv4 >>> 16).toString(16)}:${(ipv4 & 0xffff).toString(16)}`;
-  }
+// Only canonical IPv6 from the WHATWG parser reaches this conversion.
+const ipv6ToBigInt = (address: string): bigint => {
   const halves = address.split("::");
-  if (halves.length > 2) return null;
   const left = halves[0] ? halves[0].split(":") : [];
   const right = halves[1] ? halves[1].split(":") : [];
-  const missing = halves.length === 2 ? 8 - left.length - right.length : 0;
-  if (missing < 0 || (halves.length === 1 && left.length !== 8)) return null;
-  const groups = [...left, ...Array.from({ length: missing }, () => "0"), ...right];
-  if (groups.length !== 8 || groups.some((group) => !/^[0-9a-f]{1,4}$/.test(group))) return null;
+  const groups = [...left, ...Array.from({ length: 8 - left.length - right.length }, () => "0"), ...right];
   return groups.reduce((value, group) => (value << 16n) | BigInt(`0x${group}`), 0n);
 };
 
@@ -57,51 +47,62 @@ const ipv6InRange = (address: bigint, base: bigint, bits: number): boolean => {
 };
 
 const UNSAFE_IPV6_RANGES: ReadonlyArray<readonly [bigint, number]> = [
-  [ipv6ToBigInt("::")!, 96],
-  [ipv6ToBigInt("64:ff9b::")!, 96],
-  [ipv6ToBigInt("64:ff9b:1::")!, 48],
-  [ipv6ToBigInt("100::")!, 64],
-  [ipv6ToBigInt("2001::")!, 32],
-  [ipv6ToBigInt("2001:2::")!, 48],
-  [ipv6ToBigInt("2001:db8::")!, 32],
-  [ipv6ToBigInt("2002::")!, 16],
-  [ipv6ToBigInt("3fff::")!, 20],
-  [ipv6ToBigInt("fc00::")!, 7],
-  [ipv6ToBigInt("fe80::")!, 10],
-  [ipv6ToBigInt("fec0::")!, 10],
-  [ipv6ToBigInt("ff00::")!, 8],
+  [ipv6ToBigInt("2001::"), 23],
+  [ipv6ToBigInt("2001:db8::"), 32],
+  [ipv6ToBigInt("2002::"), 16],
+  [ipv6ToBigInt("3fff::"), 20],
 ];
 
-export const normalizeNetworkHostname = (hostname: string): string =>
-  hostname
-    .toLowerCase()
-    .replace(/^\[|\]$/g, "")
-    .replace(/\.$/, "");
+export const normalizeNetworkHostname = (hostname: string): string => {
+  const lower = hostname.toLowerCase();
+  if (lower.startsWith("[") && lower.endsWith("]") && lower.includes(":")) return lower.slice(1, -1);
+  return lower.includes(":") ? lower : lower.replace(/\.$/, "");
+};
+
+// WHATWG's "ends in a number" rule: these hosts must parse as IPv4,
+// rather than falling back to DNS (including invalid octal and overflow).
+const endsInNumber = (hostname: string): boolean => {
+  const last = hostname.split(".").at(-1) ?? "";
+  return /^\d+$/.test(last) || /^0x[0-9a-f]*$/i.test(last);
+};
 
-export const networkAddressFamily = (rawAddress: string): 4 | 6 | null => {
+/** Parse all URL IP literal forms without DNS or server-only dependencies. */
+export const parseNetworkAddress = (rawAddress: string): { address: string; family: 4 | 6 } | null => {
   const address = normalizeNetworkHostname(rawAddress);
-  if (ipv4ToNumber(address) !== null) return 4;
-  return ipv6ToBigInt(address) !== null ? 6 : null;
+  const ipv6 = address.includes(":");
+  if (!address || /[\s/@\\?#%\[\]]/.test(address) || (!ipv6 && !endsInNumber(address))) return null;
+  try {
+    // URL implements legacy IPv4 (decimal, octal, hex and shortened forms),
+    // as well as IPv6 compression and dotted tails. Reject zone IDs above.
+    const parsed = new URL(`http://${ipv6 ? `[${address}]` : address}/`).hostname;
+    if (ipv6) return { address: normalizeNetworkHostname(parsed), family: 6 };
+    return ipv4ToNumber(parsed) !== null ? { address: parsed, family: 4 } : null;
+  } catch {
+    return null;
+  }
 };
 
+export const networkAddressFamily = (rawAddress: string): 4 | 6 | null => parseNetworkAddress(rawAddress)?.family ?? null;
+
 export const isUnsafeNetworkAddress = (rawAddress: string): boolean => {
-  const address = normalizeNetworkHostname(rawAddress);
-  const family = networkAddressFamily(address);
-  if (family === 4) return UNSAFE_IPV4_RANGES.some(([base, bits]) => ipv4InRange(address, base, bits));
-  if (family !== 6) return true;
-  const value = ipv6ToBigInt(address);
-  if (value === null) return true;
-  if (value >> 32n === 0xffffn) {
+  const literal = parseNetworkAddress(rawAddress);
+  if (!literal) return true;
+  if (literal.family === 4) return UNSAFE_IPV4_RANGES.some(([base, bits]) => ipv4InRange(literal.address, base, bits));
+  const value = ipv6ToBigInt(literal.address);
+  if (value >> 32n === 0xffffn || ipv6InRange(value, ipv6ToBigInt("64:ff9b::"), 96)) {
     const mapped = Number(value & 0xffffffffn);
-    const ipv4 = [mapped >>> 24, (mapped >>> 16) & 255, (mapped >>> 8) & 255, mapped & 255].join(".");
-    return isUnsafeNetworkAddress(ipv4);
+    return isUnsafeNetworkAddress([mapped >>> 24, (mapped >>> 16) & 255, (mapped >>> 8) & 255, mapped & 255].join("."));
   }
-  return UNSAFE_IPV6_RANGES.some(([base, bits]) => ipv6InRange(value, base, bits));
+  return !ipv6InRange(value, ipv6ToBigInt("2000::"), 3) || UNSAFE_IPV6_RANGES.some(([base, bits]) => ipv6InRange(value, base, bits));
 };
 
 export const isUnsafeNetworkHostname = (rawHostname: string): boolean => {
   const hostname = normalizeNetworkHostname(rawHostname);
   return (
-    hostname === "localhost" || hostname.endsWith(".localhost") || hostname === "metadata.google.internal" || hostname.endsWith(".internal")
+    !hostname ||
+    ["localhost", "localhost.localdomain", "metadata", "metadata.google.internal", "instance-data"].includes(hostname) ||
+    [".localhost", ".internal", ".local", ".home.arpa"].some((suffix) => hostname.endsWith(suffix)) ||
+    /[%\[\]]/.test(hostname) ||
+    ((endsInNumber(hostname) || hostname.includes(":")) && !parseNetworkAddress(hostname))
   );
 };

package/src/ssr/LayoutHelp.tsx

@@ -8,6 +8,7 @@ import {
   MarkdownView,
   NoticeCard,
   Placeholder,
+  prefersReducedMotion,
   prompts,
   ScrollArea,
   TextInput,
@@ -186,7 +187,7 @@ const HelpShell = (props: {
     ).find((element) => element.id === hash);
     if (!heading) return false;
     setActiveSectionId(hash);
-    heading.scrollIntoView({ block: "start", behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+    heading.scrollIntoView({ block: "start", behavior: prefersReducedMotion() ? "auto" : "smooth" });
     return true;
   };
 

package/src/styles/global.css

@@ -255,8 +255,26 @@ html:has(.k2b-mobile-shell) body {
   --color-selection-fg: rgb(239 246 255);
 }
 
-@view-transition {
-  navigation: auto;
+/* @k2b/ui makes motion inside .k2b-ui instant under reduced motion; the
+   page owns its view transitions, so the same two sources stop them here. */
+@media (prefers-reduced-motion: no-preference) {
+  @view-transition {
+    navigation: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
+html[data-k2b-motion="reduced"]::view-transition-group(*),
+html[data-k2b-motion="reduced"]::view-transition-old(*),
+html[data-k2b-motion="reduced"]::view-transition-new(*) {
+  animation: none !important;
 }
 
 ::selection {
@@ -275,15 +293,6 @@ solid-island {
   display: contents;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
 /* Cloud has three shell modes. Phones, below md, get the header and no rail.
    From md, signed-in people get the rail instead of the header: up to 2xl the
    app area meets the window's top, right and bottom edges, and from 2xl it is