better-ship 0.34.0 → 0.35.0

package/dist/polyfills-DEQFkqRI.js

@@ -0,0 +1,28 @@
+//#region src/infrastructure/browser-support/polyfills.ts
+/** Platform APIs `installPolyfills` provides. The lint rule allows these names. */
+const POLYFILLED_APIS = ["URL.parse"];
+/**
+* Install `URL.parse` when the host has none.
+* A native `URL.parse` on `URL` stays in place.
+*/
+function installPolyfills() {
+	if (Object.getOwnPropertyDescriptor(URL, "parse") !== void 0) return;
+	Object.defineProperty(URL, "parse", {
+		configurable: true,
+		writable: true,
+		value: parseUrl
+	});
+}
+function parseUrl(url, base) {
+	try {
+		if (base === void 0) return new URL(url);
+		return new URL(url, base);
+	} catch (cause) {
+		if (cause instanceof TypeError) return null;
+		throw cause;
+	}
+}
+
+//#endregion
+export { installPolyfills as n, POLYFILLED_APIS as t };
+//# sourceMappingURL=polyfills-DEQFkqRI.js.map

package/dist/polyfills-DEQFkqRI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polyfills-DEQFkqRI.js","names":[],"sources":["../src/infrastructure/browser-support/polyfills.ts"],"sourcesContent":["/** Platform APIs `installPolyfills` provides. The lint rule allows these names. */\nexport const POLYFILLED_APIS = ['URL.parse'] as const\n\n/**\n * Install `URL.parse` when the host has none.\n * A native `URL.parse` on `URL` stays in place.\n */\nexport function installPolyfills(): void {\n  if (Object.getOwnPropertyDescriptor(URL, 'parse') !== undefined) return\n  Object.defineProperty(URL, 'parse', {\n    configurable: true,\n    writable: true,\n    value: parseUrl,\n  })\n}\n\nfunction parseUrl(url: string | URL, base?: string | URL): URL | null {\n  try {\n    if (base === undefined) return new URL(url)\n    return new URL(url, base)\n  } catch (cause) {\n    if (cause instanceof TypeError) return null\n    throw cause\n  }\n}\n"],"mappings":";;AACA,MAAa,kBAAkB,CAAC,WAAW;;;;;AAM3C,SAAgB,mBAAyB;CACvC,IAAI,OAAO,yBAAyB,KAAK,OAAO,MAAM,QAAW;CACjE,OAAO,eAAe,KAAK,SAAS;EAClC,cAAc;EACd,UAAU;EACV,OAAO;CACT,CAAC;AACH;AAEA,SAAS,SAAS,KAAmB,MAAiC;CACpE,IAAI;EACF,IAAI,SAAS,QAAW,OAAO,IAAI,IAAI,GAAG;EAC1C,OAAO,IAAI,IAAI,KAAK,IAAI;CAC1B,SAAS,OAAO;EACd,IAAI,iBAAiB,WAAW,OAAO;EACvC,MAAM;CACR;AACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "better-ship",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Foundation for applications on Cloudflare Workers: logger, errors, message bus, infrastructure adapters, and UI primitives",
   "license": "Apache-2.0",
   "repository": {
@@ -27,6 +27,10 @@
     "./better-auth/stripe": "./dist/better-auth/stripe.js",
     "./billing/client": "./dist/billing/client.js",
     "./bin/notify-ci": "./dist/bin/notify-ci.js",
+    "./browser-support/floor": "./dist/browser-support/floor.js",
+    "./browser-support/oxlint": "./dist/browser-support/oxlint.js",
+    "./browser-support/polyfills": "./dist/browser-support/polyfills.js",
+    "./browser-support/update-screen": "./dist/browser-support/update-screen.js",
     "./cloudflare": "./dist/cloudflare.js",
     "./cloudflare/auth-secondary-storage": "./dist/cloudflare/auth-secondary-storage.js",
     "./cloudflare/durable-object-client": "./dist/cloudflare/durable-object-client.js",
@@ -80,9 +84,12 @@
     "@better-auth/stripe": "^1.7.7",
     "@cloudflare/vitest-plugin": "^1.3.4",
     "@cloudflare/workers-types": "5.20260930.2",
+    "@mdn/browser-compat-data": "^8.1.4",
+    "@oxlint/plugins": "^1.86.0",
     "@posthog/react": "^1.11.3",
     "@sentry/cloudflare": "^11.2.0",
     "@sentry/tanstackstart-react": "^11.2.0",
+    "@tailwindcss/node": "^4.3.3",
     "@tanstack/react-router": "^1.170.41",
     "@tanstack/react-start": "^1.168.60",
     "@tanstack/start-client-core": "^1.170.34",
@@ -93,6 +100,7 @@
     "@vitest/browser-playwright": "^4.1.11",
     "auth": "^1.7.7",
     "better-auth": "^1.7.7",
+    "browserslist": "^4.29.3",
     "drizzle-kit": "^0.31.11",
     "drizzle-orm": "^0.45.3",
     "pg": "^8.23.1",
@@ -110,12 +118,15 @@
   },
   "peerDependencies": {
     "@better-auth/stripe": "^1.7.7",
+    "@mdn/browser-compat-data": "^8.1.4",
+    "@oxlint/plugins": "^1.86.0",
     "@posthog/react": "^1.11.3",
     "@sentry/cloudflare": "^11.2.0",
     "@sentry/tanstackstart-react": "^11.2.0",
     "@tanstack/react-router": "^1.170.41",
     "@tanstack/react-start": "^1.168.60",
     "better-auth": "^1.7.7",
+    "browserslist": "^4.29.3",
     "drizzle-orm": "^0.45.3",
     "pg": "^8.23.1",
     "posthog-js": "^1.435.6",
@@ -166,6 +177,15 @@
     },
     "pg": {
       "optional": true
+    },
+    "@mdn/browser-compat-data": {
+      "optional": true
+    },
+    "@oxlint/plugins": {
+      "optional": true
+    },
+    "browserslist": {
+      "optional": true
     }
   },
   "engines": {

package/src/infrastructure/browser-support/.browserslistrc

@@ -0,0 +1,5 @@
+chrome >= 111
+edge >= 111
+firefox >= 128
+safari >= 16.4
+ios >= 16.4

package/src/infrastructure/browser-support/browser-floor.error.ts

@@ -0,0 +1,31 @@
+import { AppError } from '@/core'
+
+/** The browserslist file is missing, empty, or not a query browserslist can resolve. */
+export class BrowserFloorError extends AppError {
+  readonly _tag = 'BrowserFloorError'
+  readonly classification = 'terminal'
+
+  /**
+   * `path` is the file or directory passed to `browserFloor`.
+   * `reason` is `missing` when no config is found, `empty` when the query matches no browsers,
+   * and `invalid` when browserslist rejects the query. `cause` is that rejection.
+   */
+  constructor(
+    readonly path: string,
+    readonly reason: 'missing' | 'empty' | 'invalid',
+    cause?: unknown,
+  ) {
+    super(floorMessage(reason, path), { cause })
+  }
+}
+
+function floorMessage(reason: 'missing' | 'empty' | 'invalid', path: string): string {
+  switch (reason) {
+    case 'missing':
+      return `No browserslist config at ${path}`
+    case 'empty':
+      return `The browserslist config at ${path} matches no browsers`
+    case 'invalid':
+      return `The browserslist config at ${path} is invalid`
+  }
+}

package/src/infrastructure/browser-support/floor.ts

@@ -0,0 +1,145 @@
+import browserslist from 'browserslist'
+
+import { BrowserFloorError } from './browser-floor.error.ts'
+
+export { BrowserFloorError }
+
+/** Oldest and newest version of one browser that the floor still includes. */
+export type BrowserFloorRelease = {
+  readonly browser: string
+  readonly minimum: string
+  readonly maximum: string
+}
+
+/** Title and body for the update screen, taken from the floor versions. */
+export type UpdateScreenCopy = {
+  readonly title: string
+  readonly body: string
+}
+
+/**
+ * Resolve the minimum and maximum version of each browser in the browserslist config.
+ * The path is a config file or any file inside the project that owns `.browserslistrc`.
+ * Throws `BrowserFloorError` when the config is missing, empty, or invalid.
+ */
+export function browserFloor(path: string): readonly BrowserFloorRelease[] {
+  const queries = loadQueries(path)
+  if (queries === undefined) throw new BrowserFloorError(path, 'missing')
+  if (queries.length === 0) throw new BrowserFloorError(path, 'empty')
+  let resolved: readonly string[]
+  try {
+    resolved = browserslist(queries, { path })
+  } catch (cause) {
+    throw new BrowserFloorError(path, 'invalid', cause)
+  }
+  const releases = floorReleases(resolved)
+  if (releases.length === 0) throw new BrowserFloorError(path, 'empty')
+  return releases
+}
+
+/**
+ * Vite `environments.client.build.target` values for the browserslist config at `path`.
+ * Throws `BrowserFloorError` when the config is missing, empty, or invalid.
+ */
+export function buildTargets(path: string): readonly string[] {
+  return browserFloor(path).map((release) => `${viteBrowser(release.browser)}${release.minimum}`)
+}
+
+/** Sentence that names the floor versions. Pass the result of `browserFloor`. */
+export function updateScreenCopy(releases: readonly BrowserFloorRelease[]): UpdateScreenCopy {
+  const versions = releases
+    .map((release) => `${browserLabel(release.browser)} ${release.minimum}`)
+    .join(', ')
+  return {
+    title: 'Update your browser',
+    body: `This application needs ${versions}.`,
+  }
+}
+
+function loadQueries(path: string): readonly string[] | undefined {
+  try {
+    return browserslist.loadConfig({ path })
+  } catch (cause) {
+    throw new BrowserFloorError(path, 'invalid', cause)
+  }
+}
+
+function floorReleases(resolved: readonly string[]): BrowserFloorRelease[] {
+  const ranges = new Map<string, { minimum: string; maximum: string }>()
+  for (const entry of resolved) {
+    const release = splitRelease(entry)
+    if (release === undefined) continue
+    const current = ranges.get(release.browser)
+    if (current === undefined) {
+      ranges.set(release.browser, { minimum: release.version, maximum: release.version })
+      continue
+    }
+    if (compareVersionText(release.version, current.minimum) < 0) current.minimum = release.version
+    if (compareVersionText(release.version, current.maximum) > 0) current.maximum = release.version
+  }
+  return [...ranges.entries()]
+    .map(([browser, range]) => ({ browser, minimum: range.minimum, maximum: range.maximum }))
+    .sort((left, right) => compareText(left.browser, right.browser))
+}
+
+function splitRelease(
+  entry: string,
+): { readonly browser: string; readonly version: string } | undefined {
+  const space = entry.indexOf(' ')
+  if (space === -1) return undefined
+  const browser = entry.slice(0, space)
+  const version = entry.slice(space + 1)
+  if (versionParts(version) === undefined) return undefined
+  return { browser, version }
+}
+
+function compareVersionText(left: string, right: string): number {
+  const leftParts = versionParts(left)
+  const rightParts = versionParts(right)
+  if (leftParts === undefined || rightParts === undefined) return 0
+  return compareVersions(leftParts, rightParts)
+}
+
+function versionParts(version: string): readonly number[] | undefined {
+  const normalized =
+    version.startsWith('≤') || version.startsWith('<=') ? version.replace(/^≤|^<=/, '') : version
+  if (!/^\d+(?:\.\d+)*$/.test(normalized)) return undefined
+  return normalized.split('.').map((part) => Number(part))
+}
+
+function compareVersions(left: readonly number[], right: readonly number[]): number {
+  const length = Math.max(left.length, right.length)
+  for (let index = 0; index < length; index += 1) {
+    const difference = (left[index] ?? 0) - (right[index] ?? 0)
+    if (difference !== 0) return difference
+  }
+  return 0
+}
+
+function compareText(left: string, right: string): number {
+  if (left < right) return -1
+  if (left > right) return 1
+  return 0
+}
+
+function viteBrowser(browser: string): string {
+  if (browser === 'ios_saf') return 'ios'
+  return browser
+}
+
+function browserLabel(browser: string): string {
+  switch (browser) {
+    case 'chrome':
+      return 'Chrome'
+    case 'edge':
+      return 'Edge'
+    case 'firefox':
+      return 'Firefox'
+    case 'safari':
+      return 'Safari'
+    case 'ios_saf':
+      return 'iOS'
+    default:
+      return browser
+  }
+}

package/src/infrastructure/browser-support/oxlint/index.ts

@@ -0,0 +1,13 @@
+import { eslintCompatPlugin } from '@oxlint/plugins'
+
+import { noUnsupportedApiRule } from './no-unsupported-api.ts'
+
+/** Oxlint plugin. Enable `browser-support/no-unsupported-api` in `jsPlugins`. */
+const browserSupportPlugin = eslintCompatPlugin({
+  meta: { name: 'browser-support' },
+  rules: {
+    'no-unsupported-api': noUnsupportedApiRule,
+  },
+})
+
+export default browserSupportPlugin

package/src/infrastructure/browser-support/oxlint/no-unsupported-api.ts

@@ -0,0 +1,219 @@
+import type {
+  BrowserName,
+  CompatStatement,
+  Identifier,
+  SimpleSupportStatement,
+  SupportStatement,
+} from '@mdn/browser-compat-data/forLegacyNode'
+import bcd from '@mdn/browser-compat-data/forLegacyNode'
+import { defineRule } from '@oxlint/plugins'
+import type { ESTree, Scope, SourceCode, Variable } from '@oxlint/plugins'
+
+import type { BrowserFloorRelease } from '../floor.ts'
+import { BrowserFloorError, browserFloor } from '../floor.ts'
+import { POLYFILLED_APIS } from '../polyfills.ts'
+
+const polyfilledApis = new Set<string>(POLYFILLED_APIS)
+
+/**
+ * Reject a global static call that a browser in the floor does not implement.
+ * `POLYFILLED_APIS` and a `// FALLBACK:` comment on the statement are allowed.
+ * The floor is the nearest `.browserslistrc` from the linted file.
+ */
+export const noUnsupportedApiRule = defineRule({
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Disallow a platform API that a browser in the browserslist floor does not implement.',
+    },
+    messages: {
+      unsupported: '{{api}} is missing in {{browsers}}.',
+      floor: 'The browserslist floor for {{path}} is {{reason}}.',
+    },
+  },
+  createOnce(context) {
+    const floors = new Map<string, readonly BrowserFloorRelease[] | BrowserFloorError>()
+    const loadFloor = (path: string): readonly BrowserFloorRelease[] | BrowserFloorError => {
+      const cached = floors.get(path)
+      if (cached !== undefined) return cached
+      try {
+        const releases = browserFloor(path)
+        floors.set(path, releases)
+        return releases
+      } catch (cause) {
+        if (!(cause instanceof BrowserFloorError)) throw cause
+        floors.set(path, cause)
+        return cause
+      }
+    }
+
+    return {
+      Program(node) {
+        const floor = loadFloor(context.filename)
+        if (!(floor instanceof BrowserFloorError)) return
+        context.report({
+          node,
+          messageId: 'floor',
+          data: { path: context.filename, reason: floor.reason },
+        })
+      },
+      MemberExpression(node) {
+        const api = staticApi(node)
+        if (api === undefined) return
+        if (node.object.type !== 'Identifier') return
+        if (!isPlatformReference(context.sourceCode, node.object)) return
+        if (markedFallback(context.sourceCode, node)) return
+        if (polyfilledApis.has(api)) return
+        const floor = loadFloor(context.filename)
+        if (floor instanceof BrowserFloorError) return
+        const compat = compatFor(node.object.name, memberName(node))
+        if (compat === undefined) return
+        const browsers = unsupportedBrowsers(compat, floor)
+        if (browsers.length === 0) return
+        context.report({
+          node,
+          messageId: 'unsupported',
+          data: { api, browsers: browsers.join(', ') },
+        })
+      },
+    }
+  },
+})
+
+function staticApi(node: ESTree.MemberExpression): string | undefined {
+  if (node.computed || node.object.type !== 'Identifier' || node.property.type !== 'Identifier') {
+    return undefined
+  }
+  return `${node.object.name}.${node.property.name}`
+}
+
+function memberName(node: ESTree.MemberExpression): string {
+  if (node.property.type !== 'Identifier') return ''
+  return node.property.name
+}
+
+function isPlatformReference(
+  sourceCode: SourceCode,
+  identifier: ESTree.IdentifierReference,
+): boolean {
+  const variable = resolveVariable(sourceCode, identifier)
+  if (variable === null || variable.defs.length === 0) return true
+  return variable.defs.every((definition) => definition.type === 'ImplicitGlobalVariable')
+}
+
+function resolveVariable(
+  sourceCode: SourceCode,
+  identifier: ESTree.IdentifierReference,
+): Variable | null {
+  let scope: Scope | null = sourceCode.getScope(identifier)
+  while (scope !== null) {
+    const variable = scope.set.get(identifier.name)
+    if (variable !== undefined) return variable
+    scope = scope.upper
+  }
+  return null
+}
+
+function markedFallback(sourceCode: SourceCode, node: ESTree.Node): boolean {
+  let current: ESTree.Node | null = node
+  while (current !== null && current.type !== 'Program') {
+    const comments = [
+      ...sourceCode.getCommentsBefore(current),
+      ...sourceCode.getCommentsAfter(current),
+    ]
+    if (comments.some((comment) => comment.value.includes('FALLBACK:'))) return true
+    current = current.parent
+  }
+  return false
+}
+
+function compatFor(objectName: string, name: string): CompatStatement | undefined {
+  const builtins = bcd.javascript.builtins
+  const fromJavascript = builtins === undefined ? undefined : lookup(builtins, objectName, name)
+  return fromJavascript ?? lookup(bcd.api, objectName, name)
+}
+
+// BCD stores `URL.parse` as `parse_static`. The plain key is the instance or the builtin.
+function lookup(
+  namespace: Identifier,
+  objectName: string,
+  name: string,
+): CompatStatement | undefined {
+  const objectData = namespace[objectName]
+  if (objectData === undefined) return undefined
+  return objectData[`${name}_static`]?.__compat ?? objectData[name]?.__compat
+}
+
+function unsupportedBrowsers(
+  compat: CompatStatement,
+  floor: readonly BrowserFloorRelease[],
+): readonly string[] {
+  const missing: string[] = []
+  for (const release of floor) {
+    const browser = compatBrowser(release.browser)
+    if (browser === undefined || !rangeSupports(compat.support[browser], release)) {
+      missing.push(`${release.browser} ${release.minimum}`)
+    }
+  }
+  return missing
+}
+
+function compatBrowser(browser: string): BrowserName | undefined {
+  switch (browser) {
+    case 'chrome':
+    case 'edge':
+    case 'firefox':
+    case 'safari':
+      return browser
+    case 'ios_saf':
+      return 'safari_ios'
+    default:
+      return undefined
+  }
+}
+
+function rangeSupports(
+  support: SupportStatement | undefined,
+  release: BrowserFloorRelease,
+): boolean {
+  if (support === undefined) return false
+  const statements = Array.isArray(support) ? support : [support]
+  return statements.some((statement) => statementSupports(statement, release))
+}
+
+// An alternative_name or a prefix is a different API. A flag is off by default.
+function statementSupports(
+  statement: SimpleSupportStatement,
+  release: BrowserFloorRelease,
+): boolean {
+  if (statement.alternative_name !== undefined) return false
+  if (statement.prefix !== undefined) return false
+  if (statement.flags !== undefined) return false
+  if (statement.version_added === false) return false
+  const added = versionParts(statement.version_added)
+  const minimum = versionParts(release.minimum)
+  if (added === undefined || minimum === undefined) return false
+  if (compareVersions(minimum, added) < 0) return false
+  if (statement.version_removed === undefined) return true
+  const removed = versionParts(statement.version_removed)
+  const maximum = versionParts(release.maximum)
+  if (removed === undefined || maximum === undefined) return true
+  return compareVersions(maximum, removed) < 0
+}
+
+function versionParts(version: string): readonly number[] | undefined {
+  const normalized =
+    version.startsWith('≤') || version.startsWith('<=') ? version.replace(/^≤|^<=/, '') : version
+  if (!/^\d+(?:\.\d+)*$/.test(normalized)) return undefined
+  return normalized.split('.').map((part) => Number(part))
+}
+
+function compareVersions(left: readonly number[], right: readonly number[]): number {
+  const length = Math.max(left.length, right.length)
+  for (let index = 0; index < length; index += 1) {
+    const difference = (left[index] ?? 0) - (right[index] ?? 0)
+    if (difference !== 0) return difference
+  }
+  return 0
+}

package/src/infrastructure/browser-support/polyfills.ts

@@ -0,0 +1,25 @@
+/** Platform APIs `installPolyfills` provides. The lint rule allows these names. */
+export const POLYFILLED_APIS = ['URL.parse'] as const
+
+/**
+ * Install `URL.parse` when the host has none.
+ * A native `URL.parse` on `URL` stays in place.
+ */
+export function installPolyfills(): void {
+  if (Object.getOwnPropertyDescriptor(URL, 'parse') !== undefined) return
+  Object.defineProperty(URL, 'parse', {
+    configurable: true,
+    writable: true,
+    value: parseUrl,
+  })
+}
+
+function parseUrl(url: string | URL, base?: string | URL): URL | null {
+  try {
+    if (base === undefined) return new URL(url)
+    return new URL(url, base)
+  } catch (cause) {
+    if (cause instanceof TypeError) return null
+    throw cause
+  }
+}

package/src/infrastructure/browser-support/update-screen.ts

@@ -0,0 +1,142 @@
+/** Set on `documentElement` when the update screen is showing. Hydration checks this name. */
+export const unsupportedBrowserAttribute = 'data-unsupported-browser'
+
+const updateTitleAttribute = 'data-update-title' as const
+const updateBodyAttribute = 'data-update-body' as const
+const fallbackFont = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif'
+
+/** Copy and public URLs for the update screen tags in the document head. */
+export type UpdateScreenHead = {
+  readonly title: string
+  readonly body: string
+  /** Public URL of `updateScreenStyle`. */
+  readonly styleHref: string
+  /** Public URL of `updateScreenScript`. */
+  readonly scriptSrc: string
+}
+
+/** Stylesheet link a root route places in `head().links`. */
+export type UpdateScreenLink = {
+  readonly rel: 'stylesheet'
+  readonly href: string
+}
+
+/** Deferred script a root route places in `head().scripts`. */
+export type UpdateScreenScript = {
+  readonly src: string
+  readonly defer: true
+  readonly 'data-update-title': string
+  readonly 'data-update-body': string
+}
+
+/**
+ * `links` and `scripts` a root route spreads into `head()`.
+ * The arrays are mutable so they match the `head()` return type.
+ */
+export type UpdateScreenHeadEntries = {
+  links: UpdateScreenLink[]
+  scripts: UpdateScreenScript[]
+}
+
+/**
+ * Stylesheet and deferred script entries for a root route `head()`.
+ * Spread `links` and `scripts` into `head()`. The router escapes the attribute values.
+ * `defer` keeps parsing unblocked. The script is classic ES5, so a browser below the floor can show the screen.
+ */
+export function updateScreenHeadScript(head: UpdateScreenHead): UpdateScreenHeadEntries {
+  return {
+    links: [{ rel: 'stylesheet', href: head.styleHref }],
+    scripts: [
+      {
+        src: head.scriptSrc,
+        defer: true,
+        [updateTitleAttribute]: head.title,
+        [updateBodyAttribute]: head.body,
+      },
+    ],
+  }
+}
+
+/** True when the update screen script marked this element. Skip hydration when it is true. */
+export function isUnsupportedBrowser(root: {
+  readonly hasAttribute: (name: string) => boolean
+}): boolean {
+  return root.hasAttribute(unsupportedBrowserAttribute)
+}
+
+/**
+ * Classic ES5 script. Serve it at `scriptSrc`.
+ * It shows the screen when `CSS.registerProperty` or `color-mix()` is missing, and does nothing at the floor.
+ */
+export const updateScreenScript = `(function () {
+  var cssApi = typeof CSS === 'undefined' ? null : CSS;
+  var hasProperty = cssApi !== null && typeof cssApi.registerProperty === 'function';
+  var hasMix = cssApi !== null && typeof cssApi.supports === 'function' && cssApi.supports('color', 'color-mix(in srgb, red, blue)');
+  if (hasProperty && hasMix) return;
+  document.documentElement.setAttribute('${unsupportedBrowserAttribute}', '');
+  var scripts = document.getElementsByTagName('script');
+  var title = 'Update your browser';
+  var body = '';
+  for (var index = 0; index < scripts.length; index = index + 1) {
+    var marker = scripts[index].getAttribute('${updateTitleAttribute}');
+    if (marker === null) continue;
+    title = marker;
+    var text = scripts[index].getAttribute('${updateBodyAttribute}');
+    body = text === null ? '' : text;
+    break;
+  }
+  var screen = document.createElement('div');
+  screen.id = 'unsupported-browser';
+  var heading = document.createElement('h1');
+  heading.className = 'unsupported-browser-title';
+  heading.textContent = title;
+  var paragraph = document.createElement('p');
+  paragraph.className = 'unsupported-browser-body';
+  paragraph.textContent = body;
+  screen.appendChild(heading);
+  screen.appendChild(paragraph);
+  document.body.appendChild(screen);
+})();
+`
+
+// `!important` keeps application styles from painting over the update screen.
+/** Classic CSS for the update screen. Serve it at `styleHref`. Tokens fall back to neutral grey and a system sans-serif. */
+export const updateScreenStyle = `html[${unsupportedBrowserAttribute}],
+html[${unsupportedBrowserAttribute}] body {
+  margin: 0;
+  min-height: 100%;
+  background: var(--band, #f5f5f5);
+}
+html[${unsupportedBrowserAttribute}] body > :not(#unsupported-browser) {
+  display: none !important;
+}
+#unsupported-browser {
+  box-sizing: border-box;
+  min-height: 100vh;
+  margin: 0;
+  padding: 48px 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: var(--band, #f5f5f5);
+  color: var(--foreground, #171717);
+  font-family: var(--font-text, ${fallbackFont});
+}
+.unsupported-browser-title {
+  margin: 0 0 12px;
+  max-width: 28rem;
+  font-family: var(--font-brand, ${fallbackFont});
+  font-size: 2rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+.unsupported-browser-body {
+  margin: 0;
+  max-width: 32rem;
+  color: var(--muted-foreground, #525252);
+  font-size: 1.0625rem;
+  line-height: 1.5;
+}
+`