@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/helpers/registerCSSVariable.ts

@@ -1,9 +1,22 @@
 import { createCSSVariable, getVariableValue } from '../createVariable'
 import type { Variable, VariableVal } from '../types'
 
+/**
+ * Bumped whenever anything the emitted CSS derives from the shared value map
+ * changes: a token registering (which can re-point a value another config
+ * already resolved) or an auto variable being created. `getCSS` caches its
+ * configuration-static half against this, so it must move for both.
+ */
+let variableGeneration = 0
+export const getVariableGeneration = () => variableGeneration
+
 export const registerCSSVariable = (v: Variable | VariableVal) => {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
-    tokensValueToVariable.set(getVariableValue(v), v)
+    const key = getVariableValue(v)
+    if (tokensValueToVariable.has(key) || tokensValueToVariable.size < 10_000) {
+      tokensValueToVariable.set(key, v)
+      variableGeneration++
+    }
   }
 }
 
@@ -19,32 +32,48 @@ export const variableToCSS = (v: Variable, unitless = false) => {
 
 export const tokensValueToVariable = new Map<any, any>()
 
-// auto-generated vars for theme values not in tokens
+// auto-generated vars for theme values not in tokens. this CSS session owns at
+// most 10,000 variable declarations. later values stay literal, because
+// evicting or renaming a variable could invalidate CSS that still references it.
 let autoVarId = 0
 export const autoVariables: Variable[] = []
 
+const serializeVariables = (variables: Variable[]) =>
+  variables.map((v) => `--${v.name}:${v.val}`).join(';')
+
+export const getAutoVariableCSS = () => serializeVariables(autoVariables)
+
 export const getOrCreateVariable = (val: any): Variable => {
   if (tokensValueToVariable.has(val)) {
     return tokensValueToVariable.get(val)!
   }
+  if (tokensValueToVariable.size >= 10_000) {
+    return { val, name: '', variable: String(val) } as Variable
+  }
   const name = `t${autoVarId++}`
   const variable = `var(--${name})`
   const v = { val, name, variable } as Variable
   tokensValueToVariable.set(val, v)
   autoVariables.push(v)
+  variableGeneration++
   return v
 }
 
-// For mutated themes (runtime theme changes like in /theme builder)
-// Uses same 't' prefix but starts at 10000 to avoid conflicts with SSR-generated vars
+// for runtime theme changes, use a disjoint 10,000-id range. like normal auto
+// variables, later values stay literal instead of recycling a live name.
 let mutatedVarId = 10000
 export const mutatedAutoVariables: Variable[] = []
 const mutatedTokensValueToVariable = new Map<any, any>()
 
+export const getMutatedAutoVariableCSS = () => serializeVariables(mutatedAutoVariables)
+
 export const getOrCreateMutatedVariable = (val: any): Variable => {
   if (mutatedTokensValueToVariable.has(val)) {
     return mutatedTokensValueToVariable.get(val)!
   }
+  if (mutatedTokensValueToVariable.size >= 10_000) {
+    return { val, name: '', variable: String(val) } as Variable
+  }
   const name = `t${mutatedVarId++}`
   const variable = `var(--${name})`
   const v = { val, name, variable } as Variable
@@ -52,3 +81,22 @@ export const getOrCreateMutatedVariable = (val: any): Variable => {
   mutatedAutoVariables.push(v)
   return v
 }
+
+/** cache-generation sizes for development diagnostics and behavior probes */
+export const getCSSVariableCacheStats = () => ({
+  auto: tokensValueToVariable.size,
+  autoDeclarations: autoVariables.length,
+  mutated: mutatedTokensValueToVariable.size,
+  mutatedDeclarations: mutatedAutoVariables.length,
+  autoRetainedBytes: [...tokensValueToVariable].reduce((bytes, [key, value]) => {
+    const variable = value as Partial<Variable>
+    return (
+      bytes +
+      String(key).length +
+      String(variable.val ?? '').length +
+      String(variable.name ?? '').length +
+      String(variable.variable ?? '').length
+    )
+  }, 0),
+  autoCSSBytes: getAutoVariableCSS().length,
+})

package/src/helpers/resolveAnimationDriver.ts

@@ -1,23 +1,26 @@
-import type { AnimationDriver } from '../types'
+import type { AnimationDriverLike } from '../types'
+
+function isAnimationDriver(value: unknown): value is AnimationDriverLike {
+  if (typeof value !== 'object' || value === null) return false
+  if ('isStub' in value && value.isStub === true) return true
+  return 'useAnimations' in value && typeof value.useAnimations === 'function'
+}
 
 /**
- * Resolves a value that might be an AnimationDriver or a multi-driver config object
- * like { default: motionDriver, css: cssDriver } into an actual AnimationDriver.
+ * Resolves a value that might be an animation driver or a multi-driver config
+ * object like { default: motionDriver, css: cssDriver } into a driver.
  */
 export function resolveAnimationDriver(
-  driver: AnimationDriver | Record<string, AnimationDriver> | null | undefined
-): AnimationDriver | null {
+  driver: AnimationDriverLike | Record<string, AnimationDriverLike> | null | undefined
+): AnimationDriverLike | null {
   if (!driver) return null
-  // valid driver
-  if (typeof (driver as any).useAnimations === 'function') {
-    return driver as AnimationDriver
+  // valid driver, including an explicit unsupported stub
+  if (isAnimationDriver(driver)) {
+    return driver
   }
   // multi-driver object - extract default
-  if (
-    'default' in driver &&
-    typeof (driver as any).default?.useAnimations === 'function'
-  ) {
-    return (driver as any).default
+  if ('default' in driver && isAnimationDriver(driver.default)) {
+    return driver.default
   }
   return null
 }

package/src/helpers/resolveNativeUnits.native.ts

@@ -0,0 +1,238 @@
+import { Dimensions, PixelRatio } from 'react-native'
+
+export interface UnitContext {
+  windowWidth: number
+  windowHeight: number
+  fontScale: number
+  remBaseFontSize: number
+  containerWidth: number
+  containerHeight: number
+  elementFontSize: number
+  isFontSizeProp: boolean
+}
+
+const UNIT_RE = /^([+-]?\s*\d*\.?\d+)(px|rem|em|vw|vh|vmin|vmax|cqi|cqw|cqh|cqb)?$/i
+
+export function isDynamicUnitValue(value: unknown): boolean {
+  if (typeof value !== 'string') return false
+  const trimmed = value.trim()
+  if (
+    trimmed.startsWith('clamp(') ||
+    trimmed.startsWith('CLAMP(') ||
+    trimmed.startsWith('calc(') ||
+    trimmed.startsWith('CALC(')
+  )
+    return true
+  // a unit suffix only counts when a number precedes it. matching the suffix
+  // alone turns every word ending in one into a length: 'System' ends in `em`
+  // and resolved to 0, wiping out fontFamily
+  return !!UNIT_RE.exec(trimmed.replace(/\s+/g, ''))?.[2]
+}
+
+function getUnitContext(key: string, styleState?: any): UnitContext {
+  const window = Dimensions.get('window')
+  const fontScale =
+    typeof PixelRatio !== 'undefined' && PixelRatio.getFontScale
+      ? PixelRatio.getFontScale()
+      : 1
+  const remBaseFontSize = styleState?.conf?.settings?.remBaseFontSize ?? 16
+  const isFontSizeProp = key === 'fontSize'
+  const elementFontSize =
+    typeof styleState?.style?.fontSize === 'number'
+      ? styleState.style.fontSize
+      : remBaseFontSize
+
+  // Look up container layout from group context or component state
+  const groupContext = styleState?.flatGroupContext
+  const groupEntry = groupContext?.['@']
+  const groupLayout =
+    groupEntry?.state?.layout || styleState?.componentState?.group?.['@']?.layout
+
+  let containerWidth = groupLayout?.width
+  let containerHeight = groupLayout?.height
+
+  // First-frame seed if unmeasured
+  if (containerWidth === undefined || containerWidth === 0) {
+    const maxWidth =
+      typeof styleState?.style?.maxWidth === 'number'
+        ? styleState.style.maxWidth
+        : undefined
+    containerWidth = Math.min(window.width, maxWidth ?? Infinity)
+  }
+
+  if (containerHeight === undefined || containerHeight === 0) {
+    containerHeight = window.height
+  }
+
+  return {
+    windowWidth: window.width,
+    windowHeight: window.height,
+    fontScale,
+    remBaseFontSize,
+    containerWidth,
+    containerHeight,
+    elementFontSize,
+    isFontSizeProp,
+  }
+}
+
+export function resolveSingleUnit(val: string, ctx: UnitContext): number {
+  const trimmed = val.replace(/\s+/g, '')
+  const match = UNIT_RE.exec(trimmed)
+  if (!match) return Number(trimmed) || 0
+
+  const num = Number.parseFloat(match[1])
+  if (Number.isNaN(num)) return 0
+
+  const unit = (match[2] || 'px').toLowerCase()
+
+  switch (unit) {
+    case 'px':
+      return num
+    case 'rem':
+      // Accessibility: layout props scale with OS fontScale; fontSize leaves scaling to RN Text
+      return num * ctx.remBaseFontSize * (ctx.isFontSizeProp ? 1 : ctx.fontScale)
+    case 'em':
+      return num * ctx.elementFontSize
+    case 'vw':
+      return (num / 100) * ctx.windowWidth
+    case 'vh':
+      return (num / 100) * ctx.windowHeight
+    case 'vmin':
+      return (num / 100) * Math.min(ctx.windowWidth, ctx.windowHeight)
+    case 'vmax':
+      return (num / 100) * Math.max(ctx.windowWidth, ctx.windowHeight)
+    case 'cqi':
+    case 'cqw':
+      return (num / 100) * ctx.containerWidth
+    case 'cqh':
+    case 'cqb':
+      return (num / 100) * ctx.containerHeight
+    default:
+      return num
+  }
+}
+
+export function evaluateCalc(expr: string, ctx: UnitContext): number {
+  let s = expr.trim()
+  if (s.toLowerCase().startsWith('calc(') && s.endsWith(')')) {
+    s = s.slice(5, -1).trim()
+  }
+
+  const tokens = s.match(/[()*/+-]|[^\s()*/+-]+/g) || []
+  let pos = 0
+  const peek = () => tokens[pos]
+  const consume = () => tokens[pos++]
+
+  function parseExpression(): number {
+    let left = parseTerm()
+    while (peek() === '+' || peek() === '-') {
+      const op = consume()
+      const right = parseTerm()
+      if (op === '+') left += right
+      else left -= right
+    }
+    return left
+  }
+
+  function parseTerm(): number {
+    let left = parseFactor()
+    while (peek() === '*' || peek() === '/') {
+      const op = consume()
+      const right = parseFactor()
+      if (op === '*') left *= right
+      else left = right !== 0 ? left / right : 0
+    }
+    return left
+  }
+
+  function parseFactor(): number {
+    if (peek() === '+') {
+      consume()
+      return parseFactor()
+    }
+    if (peek() === '-') {
+      consume()
+      return -parseFactor()
+    }
+    return parsePrimary()
+  }
+
+  function parsePrimary(): number {
+    if (peek() === '(') {
+      consume()
+      const val = parseExpression()
+      if (peek() === ')') consume()
+      return val
+    }
+    const token = consume()
+    return token ? resolveSingleUnit(token, ctx) : 0
+  }
+
+  return parseExpression()
+}
+
+export function resolveClamp(val: string, ctx: UnitContext): number {
+  // Extract content between first '(' and last ')'
+  const start = val.indexOf('(')
+  const end = val.lastIndexOf(')')
+  if (start === -1 || end === -1 || end <= start) return 0
+
+  let inner = val.slice(start + 1, end).trim()
+  const args = splitClampArgs(inner)
+  if (args.length < 3) return 0
+
+  const min = resolveSingleUnit(args[0], ctx)
+  const max = resolveSingleUnit(args[2], ctx)
+  const pref = evaluateCalc(args[1], ctx)
+
+  const lower = Math.min(min, max)
+  const upper = Math.max(min, max)
+  return Math.min(Math.max(pref, lower), upper)
+}
+
+function splitClampArgs(inner: string): string[] {
+  const parts: string[] = []
+  let depth = 0
+  let current = ''
+
+  for (let i = 0; i < inner.length; i++) {
+    const char = inner[i]
+    if (char === '(') depth++
+    else if (char === ')') depth--
+
+    if (char === ',' && depth === 0) {
+      parts.push(current.trim())
+      current = ''
+    } else {
+      current += char
+    }
+  }
+
+  if (current.trim()) {
+    parts.push(current.trim())
+  }
+
+  return parts
+}
+
+export function resolveNativeUnits(key: string, value: any, styleState?: any): any {
+  if (typeof value !== 'string') return value
+
+  const trimmed = value.trim()
+  if (!isDynamicUnitValue(trimmed)) {
+    return value
+  }
+
+  const ctx = getUnitContext(key, styleState)
+
+  if (trimmed.startsWith('clamp(') || trimmed.startsWith('CLAMP(')) {
+    return resolveClamp(trimmed, ctx)
+  }
+
+  if (trimmed.startsWith('calc(') || trimmed.startsWith('CALC(')) {
+    return evaluateCalc(trimmed, ctx)
+  }
+
+  return resolveSingleUnit(trimmed, ctx)
+}

package/src/helpers/resolveNativeUnits.ts

@@ -0,0 +1,10 @@
+/**
+ * Web pass-through: browsers resolve clamp(), cqi, vw, and rem natively.
+ */
+export function resolveNativeUnits(_key: string, value: any, _styleState?: any): any {
+  return value
+}
+
+export function isDynamicUnitValue(_value: unknown): boolean {
+  return false
+}

package/src/helpers/resolveRem.native.ts

@@ -1,44 +1,43 @@
 import { PixelRatio } from 'react-native'
 import { getConfig } from '../config'
 
-const remRegex = /(-?[\d.]+)rem/g
+const remRegex = /^-?(\d*\.?\d+)rem$/i
 
 /**
  * Resolves rem values to pixel values on native platforms.
- * Uses PixelRatio.getFontScale() to account for user's font size preferences.
+ * Uses PixelRatio.getFontScale() for layout props (margin, padding, radius).
+ * For fontSize, leaves OS scaling to React Native Text component to avoid double-scaling.
  *
- * @param value - A string value that may contain rem units (e.g., "1.5rem" or "calc(1rem + 2rem)")
+ * @param value - A string value containing rem units (e.g. "1.5rem")
+ * @param isFontSize - Whether the target property is fontSize
  * @returns The numeric pixel value
  */
-export function resolveRem(value: string): number {
-  const config = getConfig()
-  const baseFontSize = config?.settings?.remBaseFontSize ?? 16
-
-  // Handle simple rem value like "1.5rem"
-  if (value.endsWith('rem') && !value.includes(' ')) {
-    const numericValue = Number.parseFloat(value)
-    if (!Number.isNaN(numericValue)) {
-      return PixelRatio.getFontScale() * baseFontSize * numericValue
+export function resolveRem(value: string, isFontSize = false): number {
+  let baseFontSize = 16
+  try {
+    const config = getConfig()
+    if (config?.settings?.remBaseFontSize) {
+      baseFontSize = config.settings.remBaseFontSize
     }
-  }
+  } catch {}
+  const trimmed = value.trim()
+  const match = remRegex.exec(trimmed)
+  if (!match) return 0
 
-  // Handle multiple rem values in a string (e.g., in calc expressions)
-  let result = 0
-  let match: RegExpExecArray | null
-  while ((match = remRegex.exec(value)) !== null) {
-    const numericValue = Number.parseFloat(match[1])
-    if (!Number.isNaN(numericValue)) {
-      result += PixelRatio.getFontScale() * baseFontSize * numericValue
-    }
-  }
-  remRegex.lastIndex = 0 // Reset regex state
+  const numericValue = Number.parseFloat(match[1])
+  if (Number.isNaN(numericValue)) return 0
 
-  return result
+  const scale =
+    isFontSize || typeof PixelRatio === 'undefined' || !PixelRatio.getFontScale
+      ? 1
+      : PixelRatio.getFontScale()
+  const sign = trimmed.startsWith('-') ? -1 : 1
+  return sign * numericValue * baseFontSize * scale
 }
 
 /**
- * Checks if a value is a rem string
+ * Checks if a value is a strict rem string (e.g. "1.5rem", "-0.5rem")
  */
 export function isRemValue(value: unknown): value is string {
-  return typeof value === 'string' && value.includes('rem')
+  return typeof value === 'string' && remRegex.test(value.trim())
 }

package/src/helpers/resolveRem.ts

@@ -13,5 +13,5 @@ export function resolveRem(value: string): string {
  * Checks if a value is a rem string
  */
 export function isRemValue(value: unknown): value is string {
-  return typeof value === 'string' && value.includes('rem')
+  return typeof value === 'string' && value.endsWith('rem')
 }

package/src/helpers/resolveSafeArea.native.ts

@@ -1,18 +1,98 @@
-const safeAreaEdges: Record<string, 'top' | 'bottom' | 'left' | 'right'> = {
-  $safeAreaTop: 'top',
-  $safeAreaBottom: 'bottom',
-  $safeAreaLeft: 'left',
-  $safeAreaRight: 'right',
+// safe-area value resolution (native).
+//
+// reads insets from the global state set up by @tamagui/native/setup-safe-area
+// (which keeps react-native-safe-area-context's provider snapshot in
+// globalThis.__tamagui_safe_area__).
+//
+// access is via the global rather than a direct import to avoid a circular
+// dependency between @tamagui/core and @tamagui/native.
+
+type Edge = 'top' | 'bottom' | 'left' | 'right'
+
+const propEdges: Record<string, Edge | Edge[]> = {
+  padding: ['top', 'right', 'bottom', 'left'],
+  paddingTop: 'top',
+  paddingBottom: 'bottom',
+  paddingLeft: 'left',
+  paddingRight: 'right',
+  paddingHorizontal: ['left', 'right'],
+  paddingVertical: ['top', 'bottom'],
+  paddingStart: 'left',
+  paddingEnd: 'right',
+  paddingBlock: ['top', 'bottom'],
+  paddingInline: ['left', 'right'],
+  paddingBlockStart: 'top',
+  paddingBlockEnd: 'bottom',
+  paddingInlineStart: 'left',
+  paddingInlineEnd: 'right',
+  margin: ['top', 'right', 'bottom', 'left'],
+  marginTop: 'top',
+  marginBottom: 'bottom',
+  marginLeft: 'left',
+  marginRight: 'right',
+  marginHorizontal: ['left', 'right'],
+  marginVertical: ['top', 'bottom'],
+  marginStart: 'left',
+  marginEnd: 'right',
+  marginBlock: ['top', 'bottom'],
+  marginInline: ['left', 'right'],
+  marginBlockStart: 'top',
+  marginBlockEnd: 'bottom',
+  marginInlineStart: 'left',
+  marginInlineEnd: 'right',
+  inset: ['top', 'right', 'bottom', 'left'],
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  start: 'left',
+  end: 'right',
+}
+
+const edgeToPascal: Record<Edge, string> = {
+  top: 'Top',
+  bottom: 'Bottom',
+  left: 'Left',
+  right: 'Right',
 }
 
-export function resolveSafeAreaValue(value: string): number | undefined {
-  const edge = safeAreaEdges[value]
-  if (!edge) return undefined
+const baseKeyForExpansion: Record<string, string> = {
+  padding: 'padding',
+  paddingHorizontal: 'padding',
+  paddingVertical: 'padding',
+  paddingBlock: 'padding',
+  paddingInline: 'padding',
+  margin: 'margin',
+  marginHorizontal: 'margin',
+  marginVertical: 'margin',
+  marginBlock: 'margin',
+  marginInline: 'margin',
+  inset: '',
+}
 
+function getInsetForEdge(edge: Edge): number {
   const g = globalThis as any
-  const state = g.__tamagui_native_safe_area_state__
+  // matches createGlobalState('safe_area', ...) in @tamagui/native
+  const state = g.__tamagui_safe_area__
   if (state?.enabled && state.initialMetrics) {
-    return state.initialMetrics.insets[edge]
+    return state.initialMetrics.insets[edge] ?? 0
   }
   return 0
 }
+
+export function isSafeAreaKey(key: string): boolean {
+  return key in propEdges
+}
+
+export function expandSafeAreaValue(key: string): Array<[string, number]> | undefined {
+  const edges = propEdges[key]
+  if (!edges) return undefined
+  if (typeof edges === 'string') {
+    return [[key, getInsetForEdge(edges)]]
+  }
+  const base = baseKeyForExpansion[key]
+  if (base === '') {
+    return edges.map((e) => [e, getInsetForEdge(e)])
+  }
+  return edges.map((e) => [`${base}${edgeToPascal[e]}`, getInsetForEdge(e)])
+}

package/src/helpers/resolveSafeArea.ts

@@ -1,10 +1,49 @@
-const safeAreaTokens: Record<string, string> = {
-  $safeAreaTop: 'env(safe-area-inset-top)',
-  $safeAreaBottom: 'env(safe-area-inset-bottom)',
-  $safeAreaLeft: 'env(safe-area-inset-left)',
-  $safeAreaRight: 'env(safe-area-inset-right)',
+// safe-area value resolution.
+//
+// when a user writes e.g. <View pt="safe" /> or <View padding="safe" />,
+// this maps the value to env(safe-area-inset-*) on web, and to numeric
+// insets on native (see resolveSafeArea.native.ts).
+//
+
+type Edge = 'top' | 'right' | 'bottom' | 'left'
+
+const allEdges: Edge[] = ['top', 'right', 'bottom', 'left']
+const suffixEdges: Record<string, Edge[]> = {
+  Horizontal: ['left', 'right'],
+  Inline: ['left', 'right'],
+  Vertical: ['top', 'bottom'],
+  Block: ['top', 'bottom'],
+  Start: ['left'],
+  InlineStart: ['left'],
+  End: ['right'],
+  InlineEnd: ['right'],
+  Top: ['top'],
+  BlockStart: ['top'],
+  Bottom: ['bottom'],
+  BlockEnd: ['bottom'],
+  Left: ['left'],
+  Right: ['right'],
+}
+
+function safeAreaEdges(key: string): [string, Edge[]] | undefined {
+  if (key === 'inset') return ['', allEdges]
+  if (/^(top|right|bottom|left)$/.test(key)) return ['', [key as Edge]]
+  if (key === 'start') return ['', ['left']]
+  if (key === 'end') return ['', ['right']]
+  const match = /^(padding|margin)(.*)$/.exec(key)
+  if (!match) return
+  const edges = match[2] ? suffixEdges[match[2]] : allEdges
+  return edges && [match[1], edges]
 }
 
-export function resolveSafeAreaValue(value: string): string | undefined {
-  return safeAreaTokens[value]
+// resolve key="safe" -> array of [edge-key, value] pairs.
+// returns undefined if key isn't safe-area-aware.
+export function expandSafeAreaValue(key: string): Array<[string, string]> | undefined {
+  const match = safeAreaEdges(key)
+  if (!match) return
+  const [base, edges] = match
+  return edges.map((edge) => [
+    base ? `${base}${edge[0].toUpperCase()}${edge.slice(1)}` : edge,
+    `env(safe-area-inset-${edge})`,
+  ])
 }

package/src/helpers/resolveSafeAreaVariable.native.ts

@@ -0,0 +1,28 @@
+import { getSafeArea } from '@tamagui/native'
+
+let didWarnMissingSetup = false
+
+export function resolveSafeAreaVariable(name: string): number | undefined {
+  const edge = name.startsWith('safe-area-') ? name.slice(10) : ''
+  if (edge !== 'top' && edge !== 'right' && edge !== 'bottom' && edge !== 'left') {
+    return
+  }
+
+  const safeArea = getSafeArea()
+  const state = safeArea.state
+  if (!state.didSetup) {
+    if (process.env.NODE_ENV !== 'production' && !didWarnMissingSetup) {
+      didWarnMissingSetup = true
+      console.warn(
+        '[tamagui] safe-area variables on native require importing @tamagui/native/setup-safe-area and wrapping the app in the SafeAreaProvider from react-native-safe-area-context.'
+      )
+    }
+    return 0
+  }
+
+  return state.enabled ? (state.initialMetrics?.insets[edge] ?? 0) : 0
+}
+
+export function subscribeToSafeArea(listener: () => void): () => void {
+  return getSafeArea().subscribe(listener)
+}

package/src/helpers/resolveSafeAreaVariable.ts

@@ -0,0 +1,10 @@
+export function resolveSafeAreaVariable(name: string): string | undefined {
+  const edge = name.startsWith('safe-area-') ? name.slice(10) : ''
+  return edge === 'top' || edge === 'right' || edge === 'bottom' || edge === 'left'
+    ? `env(safe-area-inset-${edge})`
+    : undefined
+}
+
+export function subscribeToSafeArea(_listener: () => void): (() => void) | undefined {
+  return undefined
+}