@tamagui/web 2.0.0-rc.9 → 2.0.0

package/src/createTamagui.ts

@@ -1,8 +1,8 @@
-import { isWeb } from '@tamagui/constants'
 import { getConfigMaybe, setConfig, setTokens } from './config'
 import type { DeepVariableObject } from './createVariables'
 import { createVariables } from './createVariables'
 import { defaultAnimationDriver } from './helpers/defaultAnimationDriver'
+import { resolveAnimationDriver } from './helpers/resolveAnimationDriver'
 import {
   buildCSSRuleSets,
   createFontCSS,
@@ -46,6 +46,13 @@ function shouldTokenCategoryHaveUnits(category: string): boolean {
   return UNIT_CATEGORIES.has(category)
 }
 
+// code optimizers were causing issues by not calling both of these as esbuild had compiled them
+// pulling them into a single initializeTamaguiConfig to prevent that
+function initializeTamaguiConfig(config: TamaguiInternalConfig) {
+  setConfig(config)
+  configureMedia(config)
+}
+
 export function createTamagui<Conf extends CreateTamaguiProps>(
   configIn: Conf
 ): InferTamaguiConfig<Conf> {
@@ -182,9 +189,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   const defaultPositionSetting = configIn.settings?.defaultPosition || 'static'
 
   const defaultProps = configIn.defaultProps || {}
-  // Apply defaultPosition to viewDefaultStyles directly
-  // This avoids the deprecated defaultProps pattern in createComponent
-  if (process.env.TAMAGUI_TARGET === 'web') {
+  // apply defaultPosition via defaultProps when not static
+  if (process.env.TAMAGUI_TARGET === 'web' && defaultPositionSetting !== 'static') {
     defaultProps.View = {
       ...defaultProps.View,
       position: defaultPositionSetting,
@@ -194,20 +200,30 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   // ensure prefixed with $
   const defaultFontToken = defaultFont ? `$${defaultFont}` : ''
 
-  if (defaultFont) {
-    defaultProps.Text = {
-      ...defaultProps.Text,
-      fontFamily: defaultFontToken,
-    }
-  }
+  // Text inherits font from root via CSS, no need for default fontFamily
+  // only explicit fontFamily prop should add font_* class
+
+  // normalize multi-driver animation config to default driver
+  // supports format: { default: motionDriver, css: cssDriver }
+  // stores full config in animationDrivers for component-level selection via animatedBy
+  const inputAnimations = configIn.animations
+  const resolvedDriver = resolveAnimationDriver(inputAnimations)
+  // multi-driver when resolveAnimationDriver extracted .default (returned different ref)
+  const isMultiDriver = resolvedDriver !== null && resolvedDriver !== inputAnimations
+  const resolvedAnimations = resolvedDriver ?? inputAnimations
+  const animationDrivers = isMultiDriver
+    ? (inputAnimations as Record<string, any>)
+    : undefined
 
   const config: TamaguiInternalConfig = {
     fonts: {},
     onlyAllowShorthands: false,
     fontLanguages: [],
-    animations: defaultAnimationDriver,
     media: {},
     ...configIn,
+    // normalized animations (resolved from multi-driver format if needed)
+    animations: resolvedAnimations ?? defaultAnimationDriver,
+    animationDrivers,
     defaultProps,
     settings: {
       webContainerType: 'inline-size',
@@ -235,16 +251,17 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }
 
-  setConfig(config)
-  configureMedia(config)
+  initializeTamaguiConfig(config)
 
-  if (process.env.NODE_ENV === 'development') {
-    if (process.env.DEBUG?.startsWith('tamagui')) {
-      console.info('Tamagui config:', config)
-    }
-    if (!globalThis['Tamagui']) {
-      globalThis['Tamagui'] = Tamagui
-    }
+  if (process.env.NODE_ENV !== 'development') {
+    return config as any
+  }
+
+  if (process.env.DEBUG?.startsWith('tamagui')) {
+    console.info('Tamagui config:', config)
+  }
+  if (!globalThis['Tamagui']) {
+    globalThis['Tamagui'] = Tamagui
   }
 
   return config as any

package/src/createVariable.ts

@@ -90,7 +90,7 @@ export function getVariableName(v: Variable | any) {
   return v
 }
 
-export function getVariableVariable(v: Variable | any) {
+export function getVariableVariable(v: Variable | string | undefined) {
   if (isVariable(v)) return v.variable
   return v
 }

package/src/eventHandling.native.ts

@@ -1,14 +1,38 @@
 /**
- * Native event handling - uses RNGH when available, falls back to usePressability
+ * Native event handling - uses RNGH when available, falls back to responder system
  */
 
 import { composeEventHandlers } from '@tamagui/helpers'
 import { getGestureHandler } from '@tamagui/native'
 import React, { useRef } from 'react'
+import { Platform, View } from 'react-native'
+import { useMainThreadPressEvents } from './helpers/mainThreadPressEvents'
 import type { StaticConfig, TamaguiComponentStateRef } from './types'
 
-// TODO conditional improt - the way we bundle core test.native.js breaks if inline require need to fix
-import { useMainThreadPressEvents } from './helpers/mainThreadPressEvents'
+const isFabric = !!(globalThis as any).nativeFabricUIManager
+
+// Android (new arch + RNGH 2.30) freezes the JS thread when many pressStyle
+// components each attach a Gesture.Manual()...onTouchesDown observer (e.g. a
+// sheet with several buttons / inputs). Each handler opts into RNGH's
+// pointer-data pipeline (needsPointerData), and the combined coordination
+// cost recreates the same setJSResponder freeze c345b5fc28 was supposed to
+// have killed. iOS Fabric absorbs the cost; Android Fabric doesn't.
+// Skip the observer + wrap on Android — pressStyle visuals fall through to
+// the standard responder path via the synthesized event handlers.
+// computed lazily: the native core bundle is also loaded by the compiler for
+// static extraction, where Platform's init runs after this module's. A
+// top-level read of Platform.OS sees Platform === undefined and crashes the
+// loader. Reading on first call defers until after all module inits complete.
+let isAndroidCache: boolean | undefined
+const getIsAndroid = () => {
+  if (isAndroidCache === undefined) {
+    isAndroidCache = Platform?.OS === 'android'
+  }
+  return isAndroidCache
+}
+
+const responderClaim = () => true
+const responderWrapperStyle = { display: 'contents' } as const
 
 // web events not used on native
 export function getWebEvents() {
@@ -20,7 +44,10 @@ export function useEvents(
   viewProps: any,
   stateRef: { current: TamaguiComponentStateRef },
   staticConfig: StaticConfig,
-  isHOC?: boolean
+  isHOC?: boolean,
+  isInsideNativeMenu?: boolean,
+  debugName?: string | null,
+  hasRealPressEvents?: boolean
 ) {
   // focus/blur events always attached directly
   if (events) {
@@ -32,18 +59,45 @@ export function useEvents(
     }
   }
 
+  // hasPressEvents includes events.onPress synthesized just for pressStyle
+  // visuals; hasRealPressEvents is true only when the caller passed a real
+  // handler. the distinction matters for arbitration: pressStyle-only gestures
+  // must not steal ownership from a real-handler ancestor (e.g. Link asChild's
+  // navigate handler merged onto a child View by Slot).
+  const hasPressEvents = events?.onPress
+
+  const gh = getGestureHandler()
+
+  // track whether this component has ever had press events to keep hooks
+  // ordering stable across renders (gesture is created once per mount).
+  if (hasPressEvents) {
+    stateRef.current.hasHadEvents = true
+  }
+  if (hasRealPressEvents) {
+    stateRef.current.hasRealPressEvents = true
+  }
+
+  const everEnabled = Boolean(hasPressEvents || stateRef.current.hasHadEvents)
+  const isUsingRNGH = gh.isEnabled
+
+  // NOW handle early returns (after all hooks are called)
+  // THESE BRANCHES ARE NEVER CHANGING RENDER-TO-RENDER
+
   // input special case - TextInput needs press events attached directly (not via RNGH)
-  if (staticConfig.isInput && events) {
-    const { onPressIn, onPressOut, onPress } = events
-    const inputEvents: any = {
-      onPressIn,
-      onPressOut: onPressOut || onPress,
-    }
-    if (onPressOut && onPress) {
-      // only supports onPressIn and onPressOut so combine them
-      inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
+  if (staticConfig.isInput) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress } = events
+      const inputEvents: any = {
+        onPressIn,
+        onPressOut: onPressOut || onPress,
+      }
+      if (onPressOut && onPress) {
+        // only supports onPressIn and onPressOut so combine them
+        inputEvents.onPressOut = composeEventHandlers(onPress, onPressOut)
+      }
+      Object.assign(viewProps, inputEvents)
     }
-    Object.assign(viewProps, inputEvents)
+
     // inputs don't use gesture handler
     return null
   }
@@ -52,39 +106,48 @@ export function useEvents(
   // HOC components may return null which crashes GestureDetector (it tries to access
   // _internalInstanceHandle on a null native view). By passing events down, the inner
   // component handles gesture detection at its own level.
-  if (isHOC && events) {
-    const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
-    Object.assign(viewProps, {
-      onPressIn,
-      onPressOut,
-      onPress,
-      onLongPress,
-      delayLongPress,
-    })
-    // HOCs don't use gesture handler at this level
-    return null
-  }
-
-  const hasPressEvents =
-    // its stable and always on if you have in/out/regular
-    events?.onPress
+  //
+  // Composite component special case - when styled() wraps a non-Tamagui component
+  // (e.g. React.forwardRef), the elementType becomes that composite component.
+  // GestureDetector/responder wrapping around a composite component breaks during
+  // re-renders triggered by pressStyle state changes (the gesture/responder loses
+  // attachment to the native view through the composite layers). Pass events as props
+  // so they flow through to the inner native View.
+  const isCompositeComponent =
+    !isHOC && staticConfig.Component && typeof staticConfig.Component !== 'string'
 
-  const gh = getGestureHandler()
-
-  // track if we ever had press events to avoid re-parenting / hooks issues
-  if (hasPressEvents) {
-    stateRef.current.hasHadEvents = true
+  if (isHOC || isCompositeComponent) {
+    if (events) {
+      const { onPressIn, onPressOut, onPress, onLongPress, delayLongPress } = events
+      Object.assign(viewProps, {
+        onPressIn,
+        onPressOut,
+        onPress,
+        onLongPress,
+        delayLongPress,
+      })
+    }
+    // HOCs and composite components don't use gesture handler at this level
+    return null
   }
 
-  // avoid hooks/reparenting
-  const everEnabled = Boolean(hasPressEvents || stateRef.current.hasHadEvents)
-
-  // rngh
-  // gh.isEnabled - set once before app load - never changes
-  if (gh.isEnabled) {
-    const callbacksRef = useRef<any>({})
+  // rngh path - logic (hooks already called above)
+  if (isUsingRNGH) {
+    // rngh path - hooks
+    const callbacksRef = useRef<any>(isUsingRNGH ? {} : null)
     const gestureRef = useRef<any>(null)
 
+    // Android pressStyle-only fallback: wire synthesized press handlers to the
+    // responder system on viewProps instead of an RNGH Manual observer (which
+    // freezes Android — see top-of-file isAndroid comment). Hook is called
+    // unconditionally here for stable hooks order; useMainThreadPressEvents
+    // no-ops when enabled is false.
+    const useResponderFallback =
+      getIsAndroid() &&
+      !(hasRealPressEvents || stateRef.current.hasRealPressEvents) &&
+      Boolean(hasPressEvents)
+    useMainThreadPressEvents(events, viewProps, useResponderFallback, debugName)
+
     if (everEnabled) {
       // store callbacks in refs so gesture doesn't need to be recreated on every render
       callbacksRef.current = hasPressEvents
@@ -98,27 +161,71 @@ export function useEvents(
 
       // only create gesture once, callbacks are read from ref
       if (!gestureRef.current) {
-        gestureRef.current = gh.createPressGesture({
-          onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
-          onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
-          onPress: (e: any) => callbacksRef.current.onPress?.(e),
-          onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
-          delayLongPress: events.delayLongPress,
-          hitSlop: viewProps.hitSlop,
-        })
+        const { Gesture } = gh.state
+
+        if (isInsideNativeMenu) {
+          // Inside native menus on Android: use Manual gesture with manualActivation
+          // so it never goes ACTIVE (which would send ACTION_CANCEL to MenuView).
+          // Press callbacks fire via onTouchesDown/Up instead.
+          const manual = Gesture.Manual()
+            .runOnJS(true)
+            .manualActivation(true)
+            .onTouchesDown(() => {
+              callbacksRef.current.onPressIn?.({})
+            })
+            .onTouchesUp(() => {
+              callbacksRef.current.onPress?.({})
+              callbacksRef.current.onPressOut?.({})
+            })
+            .onTouchesCancelled(() => {
+              callbacksRef.current.onPressOut?.({})
+            })
+          gestureRef.current = manual
+        } else if (hasRealPressEvents || stateRef.current.hasRealPressEvents) {
+          // real user handler: full PressGesture, participates in the press
+          // ownership token system so nested real-handler children win
+          // arbitration (NestedPressExclusive semantics).
+          gestureRef.current = gh.createPressGesture({
+            debugName,
+            onPressIn: (e: any) => callbacksRef.current.onPressIn?.(e),
+            onPressOut: (e: any) => callbacksRef.current.onPressOut?.(e),
+            onPress: (e: any) => callbacksRef.current.onPress?.(e),
+            onLongPress: (e: any) => callbacksRef.current.onLongPress?.(e),
+            delayLongPress: events?.delayLongPress,
+            hitSlop: viewProps.hitSlop,
+          })
+        } else if (!getIsAndroid()) {
+          // pressStyle-only (events.onPress was synthesized to drive pressStyle
+          // visuals, no user handler): use Manual + manualActivation. Touch
+          // observation runs on the UI thread for fast pressStyle feedback,
+          // but the gesture never activates → never claims responder/ownership,
+          // so a real-handler ancestor still wins arbitration. This is the fix
+          // for nested press scenarios like <Link asChild><View><Button/></View></Link>
+          // where the View carries the merged navigate onPress and the inner
+          // pressStyled Button must not steal the press.
+          //
+          // Android: skipped — see isAndroid comment at top. Synthesized
+          // pressStyle handlers fall through to viewProps responder events.
+          gestureRef.current = Gesture.Manual()
+            .runOnJS(true)
+            .manualActivation(true)
+            .onTouchesDown((e: any) => callbacksRef.current.onPressIn?.(e))
+            .onTouchesUp((e: any) => {
+              callbacksRef.current.onPress?.(e)
+              callbacksRef.current.onPressOut?.(e)
+            })
+            .onTouchesCancelled((e: any) => callbacksRef.current.onPressOut?.(e))
+        }
       }
       // TODO update viewProps.hitSlop / events.delayLongPress!
 
       return gestureRef.current
     }
 
-    // don't fall through to useMainThreadPressEvents
     return null
   }
 
-  // fallback - use usePressability when RNGH not enabled
-  // split into separate file to avoid deep import warnings
-  useMainThreadPressEvents(events, viewProps, hasPressEvents)
+  useMainThreadPressEvents(events, viewProps, hasPressEvents, debugName)
 
   return null
 }
@@ -127,19 +234,26 @@ export function wrapWithGestureDetector(
   content: any,
   gesture: any,
   stateRef: { current: TamaguiComponentStateRef },
-  isHOC?: boolean
+  isHOC?: boolean,
+  isCompositeComponent?: boolean
 ) {
-  // Skip wrapping for HOC components - they may return null which crashes GestureDetector
-  // (GestureDetector tries to access _internalInstanceHandle on a null native view)
-  if (isHOC) {
+  // Skip wrapping for HOC and composite components - they pass press events
+  // to the inner component via props instead of using GestureDetector
+  if (isHOC || isCompositeComponent) {
     return content
   }
 
   const gh = getGestureHandler()
   const { GestureDetector, Gesture } = gh.state
 
-  // avoid re-parenting: only wrap if we ever had press events
-  const shouldWrap = stateRef.current.hasHadEvents
+  // wrap whenever any press gesture was attached (real handler OR
+  // synthesized pressStyle observer). only the real-handler path claims
+  // the responder on Paper — observers must not preempt parents.
+  // On Android we skip the observer gesture entirely (see top-of-file
+  // isAndroid comment), so the wrap is real-handlers-only there.
+  const shouldWrap = getIsAndroid()
+    ? stateRef.current.hasRealPressEvents
+    : stateRef.current.hasHadEvents
 
   if (!GestureDetector || !shouldWrap) {
     return content
@@ -152,5 +266,49 @@ export function wrapWithGestureDetector(
     return content
   }
 
-  return React.createElement(GestureDetector, { gesture: gestureToUse }, content)
+  // pressStyle-only observers (Manual + manualActivation gesture) must never
+  // claim the responder — otherwise a nested pressStyle Tamagui child would
+  // preempt a real-handler ancestor (e.g. <Link asChild><View><Button/></View></Link>
+  // where the View carries the merged navigate handler and the inner Button
+  // has only pressStyle). The Manual gesture observes touches on the UI thread
+  // for fast pressStyle visuals without participating in arbitration.
+  if (!stateRef.current.hasRealPressEvents) {
+    return React.createElement(GestureDetector, { gesture: gestureToUse }, content)
+  }
+
+  if (isFabric) {
+    // attach responder claim directly to the gesture target. on Fabric this
+    // does not conflict with RNGH because the responder path goes through
+    // nativeFabricUIManager.setIsJSResponder, not UIManager.setJSResponder
+    // (which RNGH intercepts on Paper). avoids a wrapper view, so layout is
+    // unchanged and we don't trip Fabric's display:contents -> ForceFlattenView.
+    // The claim is what blocks a parent RN Pressable from firing when a press
+    // lands on this Tamagui component (NestedPressExclusive).
+    //
+    // Do NOT also set onResponderTerminationRequest: false here — that would
+    // refuse to release the responder when a parent ScrollView's pan tries to
+    // take over, leaving the press stuck "down" for the whole scroll and
+    // firing onPress on release. The default (allow termination) lets the
+    // ScrollView scroll naturally while the start-claim still blocks parent
+    // Pressables from receiving the touch.
+    const claimed = React.cloneElement(content, {
+      onStartShouldSetResponder: responderClaim,
+    })
+    return React.createElement(GestureDetector, { gesture: gestureToUse }, claimed)
+  }
+
+  // Paper: keep the hoisted display:contents wrapper. claiming on the gesture
+  // target itself triggers RNGH's setJSResponder coordination conflict and
+  // freezes long lists (c345b5fc28). Same as Fabric, only claim on start —
+  // don't deny termination, or parent ScrollViews can't take the responder
+  // back when the user starts scrolling.
+  return React.createElement(
+    View,
+    {
+      collapsable: false,
+      style: responderWrapperStyle,
+      onStartShouldSetResponder: responderClaim,
+    },
+    React.createElement(GestureDetector, { gesture: gestureToUse }, content)
+  )
 }

package/src/eventHandling.ts

@@ -26,7 +26,8 @@ export function wrapWithGestureDetector(
   content: any,
   _gesture: any,
   _stateRef: { current: any },
-  _isHOC?: boolean
+  _isHOC?: boolean,
+  _isCompositeComponent?: boolean
 ) {
   return content
 }
@@ -37,7 +38,10 @@ export function useEvents(
   _viewProps: any,
   _stateRef: { current: any },
   _staticConfig: any,
-  _isHOC?: boolean
+  _isHOC?: boolean,
+  _isInsideNativeMenu?: boolean,
+  _debugName?: string | null,
+  _hasRealPressEvents?: boolean
 ) {
   return null
 }

package/src/helpers/createDesignSystem.ts

@@ -1,5 +1,6 @@
 import { isWeb } from '@tamagui/constants'
 import type { CreateTamaguiProps, Variable } from '../types'
+import { getVariableVariable, isVariable } from '../createVariable'
 import { autoVariables, registerCSSVariable, variableToCSS } from './registerCSSVariable'
 import { getThemeCSSRules } from './getThemeCSSRules'
 import { getAllRules } from './insertStyleRule'
@@ -9,6 +10,38 @@ type ThemeConfig = {
   getThemeRulesSets: () => string[]
 }
 
+// helper to get font property CSS declarations
+function getFontPropertyDeclarations(
+  fontParsed: any,
+  tokenKey: string = '$true'
+): string[] {
+  const props: string[] = ['font-family: var(--f-family)']
+
+  const getVarRef = (obj: any) => {
+    const val = obj?.[tokenKey]
+    if (isVariable(val)) {
+      return getVariableVariable(val)
+    }
+    return undefined
+  }
+
+  const letterSpacing = getVarRef(fontParsed.letterSpacing)
+  if (letterSpacing) props.push(`letter-spacing: ${letterSpacing}`)
+
+  const lineHeight = getVarRef(fontParsed.lineHeight)
+  if (lineHeight) props.push(`line-height: ${lineHeight}`)
+
+  const fontStyle = getVarRef(fontParsed.style)
+  if (fontStyle) props.push(`font-style: ${fontStyle}`)
+
+  const fontWeight = getVarRef(fontParsed.weight)
+  if (fontWeight) props.push(`font-weight: ${fontWeight}`)
+
+  return props
+}
+
+export { getFontPropertyDeclarations }
+
 /**
  * Generates CSS for tokens - registers CSS variables and builds declaration strings
  */
@@ -46,11 +79,14 @@ export function createTokenCSS(
 export function createFontCSS(
   fontsParsed: Record<string, any> | undefined,
   registerFontVariables: (fontParsed: any) => string[]
-): Record<string, { name: string; declarations: string[]; language?: string }> {
+): Record<
+  string,
+  { name: string; declarations: string[]; language?: string; fontParsed: any }
+> {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const fontDeclarations: Record<
       string,
-      { name: string; declarations: string[]; language?: string }
+      { name: string; declarations: string[]; language?: string; fontParsed: any }
     > = {}
 
     if (!fontsParsed) return fontDeclarations
@@ -64,6 +100,7 @@ export function createFontCSS(
         name: name.slice(1),
         declarations: fontVars,
         language,
+        fontParsed,
       }
     }
 
@@ -79,8 +116,9 @@ export function buildCSSRuleSets(
   declarations: string[],
   fontDeclarations: Record<
     string,
-    { name: string; declarations: string[]; language?: string }
-  >
+    { name: string; declarations: string[]; language?: string; fontParsed: any }
+  >,
+  defaultFontToken: string = '$true'
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
@@ -95,11 +133,13 @@ export function buildCSSRuleSets(
       cssRuleSets.push(declarationsToRuleSet(declarations))
     }
 
-    // fonts
+    // fonts - each font_* sets CSS variables
+    const fontSelectors: string[] = []
     const sortedFontDeclarationKeys = Object.keys(fontDeclarations).sort()
     for (const key of sortedFontDeclarationKeys) {
       const { name, declarations, language = 'default' } = fontDeclarations[key]
       const fontSelector = `.font_${name}`
+      fontSelectors.push(fontSelector)
       const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
       const selectors =
         language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
@@ -107,6 +147,20 @@ export function buildCSSRuleSets(
       cssRuleSets.push(specificRuleSet)
     }
 
+    // shared rule: all font_* classes + is_View apply font properties
+    // this resets fonts on Views like React Native does
+    if (fontSelectors.length) {
+      const firstFont = fontDeclarations[sortedFontDeclarationKeys[0]]
+      if (firstFont?.fontParsed) {
+        const fontProps = getFontPropertyDeclarations(
+          firstFont.fontParsed,
+          defaultFontToken
+        )
+        const sharedSelectors = [...fontSelectors, '.is_View'].join(', ')
+        cssRuleSets.push(`${sharedSelectors} {${fontProps.join('; ')}}`)
+      }
+    }
+
     return cssRuleSets
   }
   return []
@@ -176,12 +230,29 @@ export function getCSS(
       ? `:root{${autoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
       : ''
 
+    // notes:
+    // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
+    // display: inline breaks css transform styles
+
+    // !important or else random css easily overrides, the prop is absolute (local-first styling)
+    const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
+._hsb-y::-webkit-scrollbar:vertical { display: none !important; }
+._hsb-x { scrollbar-width: none !important; }
+._hsb-y { scrollbar-width: none !important; }`
+    const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
+:root ._pe-boxnone>* {pointer-events:auto;}`
+
     const designSystem = `._ovs-contain {overscroll-behavior:contain;}
-.is_Text .is_Text {display:inline-flex;font-family:inherit;}
+.t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
+.is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
+.is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+@scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
-.is_Input::selection, .is_TextArea::selection {background-color: var(--selectionColor);}
-.is_Input::placeholder, .is_TextArea::placeholder {color: var(--placeholderColor);}
+.is_Input::selection, .is_TextArea::selection {background-color: var(--t_selectionColor);}
+.is_Input::placeholder, .is_TextArea::placeholder {color: var(--t_placeholderColor);}
+${pointerEventsCSS}
+${hideScrollBarsCSS}
 ${autoVarCSS}
 ${themeConfig.cssRuleSets.join(separator)}`
 

package/src/helpers/createMediaStyle.ts

@@ -22,7 +22,7 @@ const groupPseudoToPseudoCSSMap = {
   focusWithin: 'focus-within',
 }
 
-const specificities = new Array(5)
+const specificities = new Array(12)
   .fill(0)
   .map((_, i) => new Array(i).fill(':root').join(''))
 
@@ -106,7 +106,13 @@ export const createMediaStyle = (
       // add back in the { we used to split
       styleRule = styleInner.replace(selector, nextSelector)
     } else {
-      styleRule = `${specificities[specificity]}${styleInner}`
+      const prefix = specificities[specificity]
+      // when styleInner is wrapped in @media (eg hover), inject specificity
+      // inside the block — `:root@media ...` is invalid CSS
+      styleRule =
+        prefix && styleInner[0] === '@'
+          ? styleInner.replace('{', `{${prefix}`)
+          : `${prefix}${styleInner}`
     }
   }