@tamagui/web 2.7.7 → 3.0.0-beta.1097.1

package/src/createComponent.tsx

@@ -1,4 +1,4 @@
-import { composeRefs } from '@tamagui/compose-refs'
+import { composeRefs, setRef } from '@tamagui/compose-refs'
 import {
   getPlatformDriver,
   isAndroid,
@@ -19,29 +19,38 @@ import { GroupContext } from './contexts/GroupContext'
 import { didGetVariableValue, setDidGetVariableValue } from './createVariable'
 import { defaultComponentStateMounted } from './defaultComponentState'
 import { getWebEvents, useEvents, wrapWithGestureDetector } from './eventHandling'
-import { getDefaultProps } from './helpers/getDefaultProps'
-import { resolveAnimationDriver } from './helpers/resolveAnimationDriver'
-import { getSplitStyles, useSplitStyles } from './helpers/getSplitStyles'
+import { componentDisplayName } from './helpers/componentDisplayName'
+import { getSplitStyles } from './helpers/getSplitStyles'
+import { getConfigRevisionState } from './helpers/grammarConfig'
+import { getStyleStaticConfig, type StyleStaticConfig } from './helpers/styleStaticConfig'
+import {
+  getNativeStyleEngine,
+  queueNativeViewState,
+  updateNativeStyleLink,
+} from './helpers/nativeStyleEngine'
+import { getThemeProxied } from './hooks/getThemeProxied'
 import { log } from './helpers/log'
 import { type GenericProps, mergeComponentProps } from './helpers/mergeProps'
 import { mergeRenderElementProps } from './helpers/mergeRenderElementProps'
-import { objectIdentityKey } from './helpers/objectIdentityKey'
+import { getMedia } from './helpers/mediaState'
 import { usePointerEvents } from './helpers/pointerEvents'
-import {
-  extractPseudoState,
-  resolveEffectivePseudoTransition,
-} from './helpers/pseudoTransitions'
+import { extractPseudoState } from './helpers/extractPseudoState'
+import { subscribeToSafeArea } from './helpers/resolveSafeAreaVariable'
 import { setElementProps } from './helpers/setElementProps'
-import { subscribeToContextGroup } from './helpers/subscribeToContextGroup'
-import { themeable } from './helpers/themeable'
+import {
+  subscribeToContextGroup,
+  useGroupSetRevision,
+} from './helpers/subscribeToContextGroup'
 import { getStyleTags } from './helpers/wrapStyleTags'
 import { useComponentState } from './hooks/useComponentState'
+import { useSplitStyles } from './hooks/useSplitStyles'
 import { setMediaShouldUpdate, useMedia } from './hooks/useMedia'
 import { useThemeWithState } from './hooks/useTheme'
 import type { TamaguiComponentEvents } from './interfaces/TamaguiComponentEvents'
 import { hooks } from './setupHooks'
 import type {
   AllGroupContexts,
+  AnimationDriverLike,
   ComponentGroupEmitter,
   DebugProp,
   GroupStateListener,
@@ -49,7 +58,6 @@ import type {
   PseudoGroupState,
   SingleGroupContext,
   StaticConfig,
-  StyleableOptions,
   TamaguiComponent,
   TamaguiComponentState,
   TamaguiElement,
@@ -83,7 +91,6 @@ const avoidReRenderKeys = new Set([
   'focus',
   'focusWithin',
   'media',
-  'group',
 ])
 
 const groupPseudoKeys = [
@@ -248,15 +255,75 @@ export function createComponent<
   BaseProps = never,
   BaseStyles extends object = never,
 >(staticConfig: StaticConfig) {
+  // Zero-runtime mode: compiler reference erasure is what removes this module
+  // from the graph, and the bundle gate is what proves it. This is the loud
+  // secondary failure for a reference erasure missed, and it lets Vite and
+  // webpack fold the body to a stub. The full `process.env` comparison is
+  // written out here on purpose: anything between it and the bundler (a helper,
+  // a const, a config read) makes it unfoldable.
+  if (process.env.TAMAGUI_RUNTIME === 'zero') {
+    throw new Error(
+      process.env.NODE_ENV !== 'production'
+        ? `[tamagui zero-runtime] createComponent ran in a zero-runtime graph. No Tamagui component renderer ships in this mode, so a component reference survived compilation. Fix the site or move the owning module to a declared full-runtime island.`
+        : '❌ Error 010'
+    )
+  }
+
   let config: TamaguiInternalConfig | null = null
+  let resolvedDefaultProps: Record<string, any> | undefined
+  let resolvedStyleRevision = -1
+  let resolvedStyleStaticConfig: StyleStaticConfig | undefined
 
   const { Component, isText, isHOC } = staticConfig
 
-  const component = React.forwardRef<Ref, ComponentPropTypes>((propsIn, forwardedRef) => {
+  type ComponentType = TamaguiComponent<
+    ComponentPropTypes,
+    Ref,
+    BaseProps,
+    BaseStyles,
+    {}
+  >
+
+  let res: ComponentType
+
+  const { displayName } = staticConfig
+
+  const component = (propsInWithRef: ComponentPropTypes & { ref?: React.Ref<Ref> }) => {
     'use no memo'
 
+    // read the forwarded ref directly off the incoming props — do NOT clone the
+    // whole object every render just to strip `ref`. the original props object is
+    // passed straight through; `ref` is skipped in the getSplitStyles pass (so it
+    // never forwards onto the host) and the composed ref is assigned explicitly
+    // onto viewProps below.
+    const forwardedRef = propsInWithRef.ref
+    const propsIn = propsInWithRef as Omit<typeof propsInWithRef, 'ref'>
+
     config = config || getConfig()
 
+    const styleRevision = getConfigRevisionState(config).revision
+    if (resolvedStyleRevision !== styleRevision) {
+      resolvedStyleRevision = styleRevision
+      const nextStyleStaticConfig = getStyleStaticConfig(staticConfig, config)
+      resolvedStyleStaticConfig = nextStyleStaticConfig
+      resolvedDefaultProps = nextStyleStaticConfig.defaultProps
+      // the relative-position default is a style, so it joins the base layer
+      // under everything the call site writes
+      if (
+        isWeb &&
+        !staticConfig.isText &&
+        config.settings.defaultPosition === 'relative' &&
+        nextStyleStaticConfig.baseStyle?.position === undefined
+      ) {
+        resolvedStyleStaticConfig = {
+          ...nextStyleStaticConfig,
+          baseStyle: { position: 'relative', ...nextStyleStaticConfig.baseStyle },
+        }
+      }
+    }
+    const styleStaticConfig = resolvedStyleStaticConfig!
+    const styledContextKeys = styleStaticConfig.styledContextKeys
+
     const internalID = process.env.NODE_ENV === 'development' ? React.useId() : ''
 
     if (process.env.NODE_ENV === 'development') {
@@ -293,7 +360,7 @@ export function createComponent<
 
     // set variants through context
     // order is after default props but before props
-    const { context, isReactNative } = staticConfig
+    const { context } = staticConfig
     const debugProp = propsIn['debug'] as DebugProp
 
     const styledContextValue: GenericProps | undefined = context
@@ -304,12 +371,12 @@ export function createComponent<
     const componentContext = React.useContext(ComponentContext)
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
 
-    // On Android, skip RNGH GestureDetector inside native menus (zeego) and use
-    // direct press events instead — GestureDetector consumes touches before they
-    // reach MenuView's native handler, preventing the menu from opening
-    // NativeMenuContext only affects Android RNGH press arbitration inside zeego
-    // menus (see eventHandling.native.ts:182). isAndroid is constant for the whole
-    // app run, so on iOS we skip this context read for every component — the branch
+    // on Android, skip RNGH GestureDetector inside native menus and use direct
+    // press events instead. GestureDetector consumes touches before they reach the
+    // native menu handler, preventing the menu from opening. NativeMenuContext only
+    // affects Android RNGH press arbitration inside native menus (see
+    // eventHandling.native.ts:182). isAndroid is constant for the whole app run,
+    // so on iOS we skip this context read for every component. the branch
     // never flips at runtime, so hook order stays stable (rules-of-hooks safe).
     const isInsideNativeMenu =
       process.env.TAMAGUI_TARGET === 'native' && isAndroid
@@ -337,14 +404,10 @@ export function createComponent<
     // order important so we do loops, you can't just spread because JS does weird things
     let props: ViewProps | TextProps = propsIn
 
-    const componentName = props.componentName || staticConfig.componentName
-
     // merge both default props and styled context props - ensure order is preserved
-    const defaultProps = getDefaultProps(staticConfig, props.componentName)
-
     // merge styled context props over defaults, ensure order is preserved
     const [nextProps, overrides] = mergeComponentProps(
-      defaultProps,
+      resolvedDefaultProps,
       styledContextValue,
       propsIn
     )
@@ -396,7 +459,7 @@ export function createComponent<
             tooltip.style.fontSize = '12px'
             tooltip.style.lineHeight = '12px'
             tooltip.style.fontFamily = 'monospace'
-            tooltip.innerText = `${componentName || ''} ${dataAt} ${dataIn}`.trim()
+            tooltip.innerText = `${displayName || ''} ${dataAt} ${dataIn}`.trim()
 
             overlay.appendChild(tooltip)
             node.appendChild(overlay)
@@ -412,34 +475,35 @@ export function createComponent<
           remove()
           debugKeyListeners?.delete(debugVisualizerHandler)
         }
-      }, [componentName])
+      }, [displayName])
     }
 
     const groupContextParent = React.useContext(GroupContext)
 
     // Get animation driver - either from animatedBy prop lookup or context/config fallback
-    const animationDriver = (() => {
+    const animationDriver: AnimationDriverLike | null = (() => {
       if (props.animatedBy && config) {
         // check animationDrivers for multi-driver config
         if (config.animationDrivers) {
           return (
-            (config.animationDrivers as Record<string, any>)[props.animatedBy] ??
-            config.animations
-          )
+            props.animatedBy in config.animationDrivers
+              ? config.animationDrivers[props.animatedBy]
+              : config.animations
+          ) as AnimationDriverLike | null
         }
         // single driver config - only 'default' makes sense
-        return props.animatedBy === 'default' ? config.animations : null
+        return props.animatedBy === 'default'
+          ? (config.animations as AnimationDriverLike)
+          : null
       }
-      // fall back to context driver, then config.animations
-      // resolveAnimationDriver validates it's a real driver (not a raw multi-driver object)
-      return (
-        resolveAnimationDriver(componentContext.animationDriver) ??
-        resolveAnimationDriver(config?.animations) ??
-        null
-      )
+      return (componentContext.animationDriver ??
+        config?.animations ??
+        null) as AnimationDriverLike | null
     })()
 
-    const useAnimations = animationDriver?.useAnimations as UseAnimationHook | undefined
+    const useAnimations = animationDriver?.isStub
+      ? undefined
+      : (animationDriver?.useAnimations as UseAnimationHook | undefined)
 
     const componentState = useComponentState(
       props,
@@ -450,10 +514,7 @@ export function createComponent<
 
     const {
       disabled,
-      groupName,
       hasAnimationProp,
-      hasEnterStyle,
-      isAnimated,
       isExiting,
       isHydrated,
       presence,
@@ -464,13 +525,30 @@ export function createComponent<
       stateRef,
       inputStyle,
       outputStyle,
+      startedUnhydrated,
+    } = componentState
+    let { groupName } = componentState
+    let {
+      hasEnterStyle,
+      isAnimated,
       willBeAnimated,
       willBeAnimatedClient,
       platformPseudo,
-      startedUnhydrated,
     } = componentState
 
-    if (animationDriver?.avoidReRenders) {
+    // adopt the props object useComponentState resolved: on the enter/exit presence
+    // path it injects presence variants onto a fresh copy instead of mutating our
+    // input (which, with no clone above, would be React's own props object)
+    props = componentState.props as typeof props
+
+    // latch on first render: animationDriver derives from the per-render
+    // animatedBy prop, and the layout effect below is conditioned on
+    // avoidReRenders — letting it flip between renders would change the hook
+    // count mid-lifecycle (same latch pattern as hasAnimated in
+    // useComponentState). ??= keeps the first value: false stays false.
+    stateRef.current.avoidReRenders ??= !!animationDriver?.avoidReRenders
+
+    if (stateRef.current.avoidReRenders) {
       // post-commit reconciliation of `nextState` with the committed React state.
       // `nextState` is the source of truth for the fast `setStateShallow` path; it
       // must stay populated until React actually commits the corresponding update,
@@ -483,7 +561,7 @@ export function createComponent<
         // keeps the last-emitted snapshot latched across re-renders (so an unrelated
         // render doesn't snap a hovered style back to base), but a render can change
         // the styles that FEED the pseudo merge — e.g. a row becoming active removes
-        // its hoverStyle while still hovered — and the stale snapshot would keep
+        // its hover clause while still hovered — and the stale snapshot would keep
         // painting over the new base (hover-beats-active-during-scrub).
         // `updateStyleListener` is rebuilt each render over fresh props/state and
         // reads `nextState || state`, so re-invoking it re-emits the correct merged
@@ -525,49 +603,6 @@ export function createComponent<
       })
     }, [platformPseudo, props.disabled])
 
-    // create new context with groups, or else sublings will grab the same one
-    const allGroupContexts = useMemo((): AllGroupContexts | null => {
-      if (!groupName || props.passThrough) {
-        return groupContextParent
-      }
-
-      const listeners = new Set<GroupStateListener>()
-      stateRef.current.group?.listeners?.clear()
-      stateRef.current.group = {
-        listeners,
-        emit(state) {
-          listeners.forEach((l) => l(state))
-        },
-        subscribe(cb) {
-          listeners.add(cb)
-          if (listeners.size === 1) {
-            setStateShallow({ hasDynGroupChildren: true })
-          }
-          return () => {
-            listeners.delete(cb)
-            if (listeners.size === 0) {
-              setStateShallow({ hasDynGroupChildren: false })
-            }
-          }
-        },
-      }
-
-      return {
-        ...groupContextParent,
-        [groupName]: {
-          state: {
-            pseudo: defaultComponentStateMounted,
-          },
-          subscribe: (listener) => {
-            const dispose = stateRef.current.group?.subscribe(listener)
-            return () => {
-              dispose?.()
-            }
-          },
-        },
-      }
-    }, [stateRef, groupName, groupContextParent])
-
     // if our animation driver supports avoidReRenders, we'll replace this below with
     // a version that essentially uses an internall emitter rather than setting state
     // but still stores the current state and applies if it it needs to during render
@@ -608,11 +643,9 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`theme-props`
 
     const themeStateProps: UseThemeWithStateProps = {
-      componentName,
       disable: disableTheme,
       shallow: props.themeShallow,
       debug: debugProp,
-      unstyled: props.unstyled,
     }
 
     // this is set conditionally if existing in props because we wrap children with
@@ -620,19 +653,27 @@ export function createComponent<
     if ('theme' in props) {
       themeStateProps.name = props.theme
     }
-    // Always set needsUpdate callback so it can check the ref's latest value
-    // This ensures components with $theme-dark/$theme-light re-render on theme change
-    // even when using raw colors (not tokens) since isListeningToTheme is set after useSplitStyles
-    themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme
+    if (!stateRef.current.optimizeForFirstRender) {
+      // this ensures components with dark/light theme clauses re-render on
+      // theme change even when using raw colors (not tokens), since
+      // isListeningToTheme is set after useSplitStyles.
+      themeStateProps.needsUpdate =
+        stateRef.current.themeNeedsUpdate ||
+        (stateRef.current.themeNeedsUpdate = () => !!stateRef.current.isListeningToTheme)
+    }
     // on native we optimize theme changes if fastSchemeChange is enabled, otherwise deopt
     if (process.env.TAMAGUI_TARGET === 'native') {
       themeStateProps.deopt = willBeAnimated
+      // native fast path (experimental): stable proxy so the theme
+      // subscription can hand updates to the per-render styled updater
+      themeStateProps.nativeUpdate = stateRef.current.nativeUpdateProxy ||= (next) =>
+        stateRef.current.nativeStyleUpdate?.(next) ?? false
     }
 
     if (process.env.NODE_ENV === 'development') {
       if (debugProp && debugProp !== 'profile') {
         const name = `${
-          componentName ||
+          displayName ||
           Component?.displayName ||
           Component?.name ||
           '[Unnamed Component]'
@@ -641,7 +682,6 @@ export function createComponent<
         const type =
           (hasEnterStyle ? '(hasEnter)' : ' ') +
           (isAnimated ? '(animated)' : ' ') +
-          (isReactNative ? '(rnw)' : ' ') +
           (noClass ? '(noClass)' : ' ') +
           (state.press || state.pressIn ? '(PRESSED)' : ' ') +
           (state.hover ? '(HOVERED)' : ' ') +
@@ -669,7 +709,7 @@ export function createComponent<
 
             console.groupCollapsed(`${childLog} [inspect props, state, context 👇]`)
             log('props in:', propsIn)
-            log('final props:', props, Object.keys(props))
+            log('final props:', props)
             log({ state, staticConfig, elementType, themeStateProps })
             log({
               context,
@@ -696,10 +736,16 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`theme`
 
-    elementType = element || elementType
+    // don't replace the animated driver component (set above) with the base element,
+    // the render string is forwarded to it via viewProps.render instead
+    if (!isAnimatedCustomComponent) {
+      elementType = element || elementType
+    }
     const isStringElement = typeof elementType === 'string'
 
-    const mediaState = useMedia(componentContext, debugProp)
+    // stateRef.current is this instance's key into useMedia's per-component
+    // States map (setMediaShouldUpdate below writes under the same key)
+    const mediaState = useMedia(componentContext, debugProp, stateRef.current)
 
     setDidGetVariableValue(false)
 
@@ -719,6 +765,8 @@ export function createComponent<
       isExiting,
       isAnimated,
       willBeAnimated,
+      canPlatformPseudo: componentState.platformPseudo,
+      displayName,
       styledContext: styledContextValue,
     } as const
 
@@ -735,17 +783,249 @@ export function createComponent<
       styleProps,
       null,
       componentContext,
-      allGroupContexts,
+      groupContextParent,
       elementType,
       startedUnhydrated,
       debugProp,
-      animationDriver
+      animationDriver,
+      styleStaticConfig
+    )
+
+    const finalizedComponentState = componentState.finalizeStyleFlags(
+      !!splitStyles?.hasEnterStyle,
+      !!splitStyles?.platformPseudo
     )
+    hasEnterStyle = finalizedComponentState.hasEnterStyle
+    isAnimated = finalizedComponentState.isAnimated
+    willBeAnimated = finalizedComponentState.willBeAnimated
+    willBeAnimatedClient = finalizedComponentState.willBeAnimatedClient
+    platformPseudo = finalizedComponentState.platformPseudo
+
+    groupName = (splitStyles?.frontendGroup ?? groupName) as typeof groupName
+    const containerProp = splitStyles?.frontendContainer ?? props.container
+    const containerName =
+      (props.containerName as string | undefined) ||
+      (typeof containerProp === 'string' ? containerProp : undefined)
+    const containerType =
+      (splitStyles?.frontendContainerType as string | undefined) ||
+      (props.containerType as string | undefined) ||
+      (containerProp ? 'inline-size' : undefined)
+    const isContainer = !!containerType && containerType !== 'normal'
+
+    // create new context with groups, or else siblings will grab the same one
+    const allGroupContexts = useMemo((): AllGroupContexts | null => {
+      if ((!groupName && !isContainer) || props.passThrough) {
+        return groupContextParent
+      }
+
+      const listeners = new Set<GroupStateListener>()
+      stateRef.current.group?.listeners?.clear()
+      stateRef.current.group = {
+        listeners,
+        emit(state) {
+          listeners.forEach((l) => l(state))
+        },
+        subscribe(cb) {
+          listeners.add(cb)
+          if (listeners.size === 1) {
+            setStateShallow({ hasDynGroupChildren: true })
+          }
+          return () => {
+            listeners.delete(cb)
+            if (listeners.size === 0) {
+              setStateShallow({ hasDynGroupChildren: false })
+            }
+          }
+        },
+      }
+
+      // one entry object serves every key this component provides: the group
+      // name and the container keys share the same state and emitter
+      const entry: SingleGroupContext = {
+        state: {
+          pseudo: defaultComponentStateMounted,
+        },
+        subscribe: (listener) => {
+          const dispose = stateRef.current.group?.subscribe(listener)
+          return () => {
+            dispose?.()
+          }
+        },
+      }
+
+      const next: AllGroupContexts = { ...groupContextParent }
+      if (groupName) {
+        next[groupName] = entry
+      }
+      if (isContainer) {
+        // `@sm:` reads the nearest container of any name, so every container
+        // writes the `@` key; a named one also writes `@name`. group names
+        // cannot contain `@`, so the namespaces never collide
+        next['@'] = entry
+        if (containerName) {
+          next[`@${containerName}`] = entry
+        }
+      }
+      return next
+    }, [stateRef, groupName, containerName, isContainer, groupContextParent])
 
     const isPassthrough = !splitStyles
 
     // splitStyles === null === passThrough
 
+    // native fast path (experimental, plans/native-fast-path.md): eligible
+    // leaves commit theme-driven style updates straight to the native tree
+    // and skip the re-render. eligibility is re-evaluated every render; the
+    // pushed-state cache resets every render so no native state entry can
+    // outlive the props/state that produced it. repeated toggles between
+    // already-pushed themes are pure native (no style computation at all).
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      const nativeEngine = getNativeStyleEngine()
+      const canNativeUpdate =
+        !!nativeEngine &&
+        !isPassthrough &&
+        !isHOC &&
+        !willBeAnimated &&
+        !groupName &&
+        !props.disableNativeStyle
+      stateRef.current.nativePushedStates = canNativeUpdate ? new Set() : undefined
+      // fresh render: the themeState captured below is current again, and the
+      // render itself commits this state's styles
+      stateRef.current.nativeThemeState = undefined
+      stateRef.current.nativeActiveState = canNativeUpdate ? themeState?.name : undefined
+
+      // push one state's full computed style. keys pushed earlier but absent
+      // from this style commit as null — reset-to-default, exactly what a real
+      // re-render's style diff does when a key disappears (media flip dropping
+      // a $sm style, a removed prop) — and the engine unsticks them from
+      // nativeProps_DEPRECATED so future React renders can set them again.
+      // nulled keys stay in nativePushedKeys: engine state tables retain them,
+      // so every later cold push must keep nulling until a value returns.
+      const pushViewState = canNativeUpdate
+        ? (stateName: string, style: Record<string, unknown>) => {
+            const sr = stateRef.current
+            const outProps = nativeEngine.processStyleColors(style)
+            if (sr.nativePushedKeys) {
+              for (const key of sr.nativePushedKeys) {
+                if (!(key in style)) outProps[key] = null
+              }
+            }
+            const keys = (sr.nativePushedKeys ||= new Set())
+            for (const key in outProps) keys.add(key)
+            sr.nativePushedStates!.add(stateName)
+            queueNativeViewState({
+              id: sr.nativeLink!.id,
+              state: stateName,
+              props: outProps,
+            })
+          }
+        : undefined
+
+      stateRef.current.nativeStyleUpdate = canNativeUpdate
+        ? (nextTheme) => {
+            const sr = stateRef.current
+            if (!sr.nativeLink || !nextTheme.theme) return false
+            sr.nativeThemeState = nextTheme
+
+            const stateName = nextTheme.name
+            // a cascade that resolves to the already-committed state (a
+            // pinned sub-theme under a toggling outer theme) changes nothing:
+            // a real re-render would commit identical styles, so skip both
+            // the push and the re-render
+            if (stateName === sr.nativeActiveState) return true
+            sr.nativeActiveState = stateName
+
+            if (sr.nativePushedStates!.has(stateName)) {
+              queueNativeViewState({ id: sr.nativeLink.id, state: stateName })
+              return true
+            }
+
+            const proxiedTheme = getThemeProxied(
+              themeStateProps,
+              nextTheme,
+              { current: null },
+              { current: null }
+            )
+            const nextStyles = getSplitStyles(
+              props,
+              staticConfig,
+              proxiedTheme,
+              stateName,
+              state,
+              // media may have changed since render: the captured
+              // styleProps.mediaState is a mount-time snapshot in
+              // first-render mode, so resolve against the live global
+              { ...styleProps, mediaState: getMedia() },
+              null,
+              componentContext,
+              allGroupContexts,
+              elementType,
+              startedUnhydrated,
+              debugProp,
+              animationDriver,
+              styleStaticConfig
+            )
+            if (!nextStyles?.style) return false
+
+            pushViewState!(stateName, nextStyles.style as Record<string, unknown>)
+            return true
+          }
+        : undefined
+
+      // a relevant media key flipped: every cached state entry was computed
+      // under the old media state, so the warm cache clears and the current
+      // theme recomputes cold (against the live global media, see above).
+      // one dimension change fires one update per configured media key and in
+      // first-render mode every subscriber passes the snapshot check each
+      // time, so coalesce to a single recompute per event turn — by which
+      // point every key has settled
+      stateRef.current.nativeMediaUpdate = canNativeUpdate
+        ? (onMiss) => {
+            const sr = stateRef.current
+            if (!sr.nativeLink) return false
+            if (!sr.nativeMediaQueued) {
+              sr.nativeMediaQueued = true
+              queueMicrotask(() => {
+                sr.nativeMediaQueued = false
+                if (!sr.nativeLink) return
+                sr.nativePushedStates!.clear()
+                // the same state name must recompute under the new media values
+                sr.nativeActiveState = undefined
+                if (!sr.nativeStyleUpdate!(sr.nativeThemeState || themeState)) {
+                  // couldn't commit natively after all: fall back to the
+                  // re-render this update path had skipped
+                  onMiss?.()
+                }
+              })
+            }
+            return true
+          }
+        : undefined
+
+      // a real render supersedes everything pushed since: its style is the
+      // truth React commits, and RN's nativeProps_DEPRECATED merge refreshes
+      // shared keys from it. the one hazard is a previously-pushed key this
+      // render dropped — RN's merge would resurrect the stale value — so
+      // re-push the fresh style (with nulls for dropped keys) right behind
+      // React's own commit.
+      if (canNativeUpdate && stateRef.current.nativeLink) {
+        const sr = stateRef.current
+        const style = splitStyles.style as Record<string, unknown> | undefined
+        if (style && sr.nativePushedKeys) {
+          let dropped = false
+          for (const key of sr.nativePushedKeys) {
+            if (!(key in style)) {
+              dropped = true
+              break
+            }
+          }
+          if (dropped) {
+            pushViewState!(themeState?.name || '', style)
+          }
+        }
+      }
+    }
+
     // Merge style-resolved context overrides (issues #3670, #3676)
     // When styles set values that are also context keys (from variants, pseudos, media, etc),
     // we need to add them to overriddenContextProps so they propagate to children
@@ -766,7 +1046,9 @@ export function createComponent<
       }
     }
 
-    const groupContext = groupName ? allGroupContexts?.[groupName] || null : null
+    // this component's own entry: same object under every key it provides
+    const groupContext =
+      groupName || isContainer ? allGroupContexts?.[groupName ?? '@'] || null : null
 
     // one tiny mutation 🙏 get width/height optimistically from raw values if possible
     // if set hardcoded it avoids extra renders
@@ -774,7 +1056,7 @@ export function createComponent<
       !isPassthrough &&
       groupContext &&
       // avoids onLayout if we don't need it
-      props.containerType !== 'normal'
+      isContainer
     ) {
       const groupState = groupContext?.state
       if (groupState && groupState.layout === undefined) {
@@ -841,17 +1123,14 @@ export function createComponent<
           elementType,
           startedUnhydrated,
           debugProp,
-          animationDriver
+          animationDriver,
+          styleStaticConfig
         )
 
-        // compute effective transition based on entering/exiting pseudo states
-        const effectiveTransition = resolveEffectivePseudoTransition(
-          stateRef.current.prevPseudoState,
-          updatedState,
-          nextStyles?.pseudoTransitions,
-          // platform-pseudo with no declared transition = instant (CSS :hover semantics)
-          props.transition ?? (platformPseudo ? '0ms' : undefined)
-        )
+        const effectiveTransition =
+          nextStyles?.effectiveTransition ??
+          props.transition ??
+          (platformPseudo ? '0ms' : undefined)
 
         // update prev state for next comparison (includes group states)
         stateRef.current.prevPseudoState = extractPseudoState(updatedState)
@@ -929,9 +1208,13 @@ export function createComponent<
         }
 
         // one thing we have to handle here and where it gets a bit more complex is group styles
-        const canAvoidReRender = Object.keys(next).every((key) =>
-          avoidReRenderKeys.has(key)
-        )
+        let canAvoidReRender = true
+        for (const key in next) {
+          if (!avoidReRenderKeys.has(key)) {
+            canAvoidReRender = false
+            break
+          }
+        }
 
         const updatedState = {
           ...prev,
@@ -945,7 +1228,7 @@ export function createComponent<
             debugProp &&
             debugProp !== 'profile'
           ) {
-            console.groupCollapsed(`[⚡️] avoid setState`, componentName, next, {
+            console.groupCollapsed(`[⚡️] avoid setState`, displayName, next, {
               updatedState,
               props,
             })
@@ -985,10 +1268,6 @@ export function createComponent<
         splitStyles.style = splitStyles.style || {}
         splitStyles.style.opacity = 0
       }
-
-      if (splitStyles.dynamicThemeAccess != null) {
-        stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess
-      }
     }
 
     // only listen for changes if we are using raw theme values or media space, or dynamic media (native)
@@ -1006,16 +1285,21 @@ export function createComponent<
       console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys)
     }
 
-    setMediaShouldUpdate(componentContext, shouldListenForMedia, mediaListeningKeys)
+    setMediaShouldUpdate(
+      stateRef.current,
+      shouldListenForMedia,
+      mediaListeningKeys,
+      stateRef.current.optimizeForFirstRender
+    )
 
     const {
       viewProps: viewPropsIn,
-      pseudos,
       style: splitStylesStyle,
       classNames,
       pseudoGroups,
       mediaGroups,
     } = splitStyles || {}
+    const groupSetRevision = useGroupSetRevision(pseudoGroups, mediaGroups)
 
     const propsWithAnimation = props as UseAnimationProps
 
@@ -1036,7 +1320,7 @@ export function createComponent<
       onMouseLeave,
       onFocus,
       onBlur,
-      onDidAnimate,
+      onTransition,
       separator,
       // ignore from here on out
       passThrough,
@@ -1047,8 +1331,7 @@ export function createComponent<
       ...nonTamaguiProps
     } = viewPropsIn || {}
 
-    // these can ultimately be for DOM, react-native-web views, or animated views
-    // so the type is pretty loose
+    // these can ultimately be for DOM or custom animated views, so the type is loose
     let viewProps = nonTamaguiProps
 
     if (props.forceStyle) {
@@ -1062,6 +1345,23 @@ export function createComponent<
       if (typeof passThrough !== 'undefined') {
         viewProps.passThrough = passThrough
       }
+      // an HOC only wraps another component - its inner render produces the real
+      // styled frame that owns behavior (press handlers, aria/data-state). forward
+      // asChild to that inner frame so IT becomes the slot boundary, instead of the
+      // wrapper consuming asChild here and forwarding only its own (often
+      // behavior-less) props. fixes asChild items whose interaction is injected
+      // below the wrapper (e.g. ToggleGroup.Item asChild -> XGroup.Item -> Button).
+      if (typeof asChild !== 'undefined') {
+        viewProps.asChild = asChild
+      }
+      // an HOC layer doesn't animate itself (shouldUseAnimation is false for
+      // isHOC); forward the animation lifecycle callback to the inner component
+      // that does, so a user onTransition on a styled/HOC-wrapped animated
+      // component (e.g. a skinned Dialog.Content) still reaches the driver and
+      // composes with the component's own onTransition.
+      if (typeof onTransition !== 'undefined') {
+        viewProps.onTransition = onTransition
+      }
     }
 
     // once you set animation prop don't remove it, you can set to undefined/false
@@ -1082,15 +1382,10 @@ export function createComponent<
           }
         : undefined
 
-      // compute effective transition once here (single source of truth)
-      // avoidReRenders path also computes this in updateStyleListener
-      const effectiveTransition = resolveEffectivePseudoTransition(
-        stateRef.current.prevPseudoState,
-        state,
-        splitStyles?.pseudoTransitions,
-        // platform-pseudo with no declared transition = instant (CSS :hover semantics)
-        props.transition ?? (platformPseudo ? '0ms' : undefined)
-      )
+      const effectiveTransition =
+        splitStyles?.effectiveTransition ??
+        props.transition ??
+        (platformPseudo ? '0ms' : undefined)
 
       // add effectiveTransition to splitStyles for drivers to consume
       if (splitStyles) {
@@ -1106,7 +1401,6 @@ export function createComponent<
         // clone style to prevent animation driver mutations from leaking to viewProps
         // during SSR/pre-hydration (CSS driver mutates style.transition in place)
         style: isHydrated ? splitStylesStyle || {} : { ...splitStylesStyle },
-        // @ts-ignore
         styleState: splitStyles,
         useStyleEmitter,
         presence,
@@ -1114,10 +1408,9 @@ export function createComponent<
         styleProps,
         theme,
         themeName,
-        pseudos: pseudos || null,
         staticConfig,
         stateRef,
-        onDidAnimate,
+        onTransition,
       })
 
       if (animations) {
@@ -1138,9 +1431,13 @@ export function createComponent<
       if (process.env.NODE_ENV === 'development' && time) time`animations`
     }
 
-    if (process.env.NODE_ENV === 'development' && props.untilMeasured && !props.group) {
+    if (isWeb && isExiting) {
+      viewProps.className = `t_exiting ${viewProps.className || ''}`
+    }
+
+    if (process.env.NODE_ENV === 'development' && props.untilMeasured && !isContainer) {
       console.warn(
-        `You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.\n\nIf you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`
+        `You set untilMeasured without establishing a container. Set it on the parent with container or container="name", not on the child using a container clause.`
       )
     }
 
@@ -1149,7 +1446,7 @@ export function createComponent<
     if (
       !isPassthrough &&
       groupContext && // avoids onLayout if we don't need it
-      props.containerType !== 'normal'
+      isContainer
     ) {
       nonTamaguiProps.onLayout = composeEventHandlers(
         nonTamaguiProps.onLayout,
@@ -1178,10 +1475,24 @@ export function createComponent<
         stateRef.current.willHydrate
       ) || nonTamaguiProps
 
+    // the composed ref keeps one identity for the life of the component so react
+    // never detaches and reattaches the host mid-life. that means it can't close
+    // over forwardedRef, which would pin the first render's ref forever - read it
+    // off stateRef instead, and record what it actually attached to so a swapped
+    // ref can be handed the host below (#4031)
+    stateRef.current.composedForwardedRef = forwardedRef
+
     if (!stateRef.current.composedRef) {
       stateRef.current.composedRef = composeRefs<TamaguiElement>(
-        (x) => (stateRef.current.host = x as TamaguiElement),
-        forwardedRef,
+        (x) => {
+          stateRef.current.host = x as TamaguiElement
+          if (process.env.TAMAGUI_TARGET === 'native') {
+            updateNativeStyleLink(stateRef.current, x)
+          }
+          const current = stateRef.current.composedForwardedRef
+          stateRef.current.attachedForwardedRef = x ? current : undefined
+          setRef<TamaguiElement>(current, x as TamaguiElement)
+        },
         setElementProps,
         animatedRef
       )
@@ -1189,16 +1500,43 @@ export function createComponent<
 
     viewProps.ref = stateRef.current.composedRef
 
+    if (
+      process.env.TAMAGUI_TARGET === 'native' &&
+      onClick !== undefined &&
+      staticConfig.neverSkipProps?.onClick
+    ) {
+      // native has no click of its own: a component that declares onClick as its
+      // own prop (the DOM primitives, which build the payload from a press)
+      // receives it untouched, rather than through the web press path below
+      viewProps.onClick = onClick
+    }
+
+    // react only re-runs a ref callback when its identity changes, and ours never
+    // does, so hand the host over by hand when a parent swaps the forwarded ref -
+    // react-hook-form re-registering a field after reset() is the common case.
+    // the comparison reads what the ref callback attached, never a value written
+    // during render: a render-phase "previous" pointer reads back its own write
+    // on react's second pass and the handover silently no-ops under StrictMode
+    useIsomorphicLayoutEffect(() => {
+      const attached = stateRef.current.attachedForwardedRef
+      if (attached === forwardedRef) return
+      if (attached) setRef<TamaguiElement | null>(attached, null)
+      stateRef.current.attachedForwardedRef = forwardedRef
+      if (stateRef.current.host) {
+        setRef<TamaguiElement>(forwardedRef, stateRef.current.host)
+      }
+    }, [forwardedRef])
+
     // handle pointer events (native: maps to touch events, web: no-op)
     usePointerEvents(props, viewProps)
 
     if (process.env.NODE_ENV === 'development') {
-      if (!isReactNative && !isText && isWeb && !isHOC) {
+      if (!isText && isWeb && !isHOC) {
         React.Children.toArray(props.children).forEach((item) => {
           // allow newlines because why not its annoying with mdx
           if (typeof item === 'string' && item !== '\n') {
             console.error(
-              `Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || 'View'}>.`,
+              `Unexpected text node: ${item}. A text node cannot be a child of a <${displayName || propsIn.tag || 'View'}>.`,
               props
             )
           }
@@ -1237,7 +1575,7 @@ export function createComponent<
     }
 
     // Animation enter state machine: true -> 'should-enter' -> false
-    // Stage 1: Set 'should-enter' synchronously before paint to apply enterStyle classes
+    // Stage 1: Set 'should-enter' synchronously before paint to apply enter clauses
     // Stage 2: After browser paint, set false to trigger CSS transition
     //
     // CRITICAL: useEffect does NOT guarantee post-paint execution!
@@ -1251,7 +1589,7 @@ export function createComponent<
       }
 
       if (state.unmounted) {
-        // For CSS transitions, we need browser to paint enterStyle before removing it.
+        // For CSS transitions, the browser must paint enter clauses before removing them.
         // Double RAF guarantees paint: first RAF schedules after current frame,
         // second RAF schedules after that frame completes (including paint).
         if (inputStyle === 'css') {
@@ -1270,30 +1608,53 @@ export function createComponent<
         // Non-CSS drivers handle their own animation timing
         setStateShallow({ unmounted: false })
       }
+    }, [state.unmounted, inputStyle])
 
+    // unmount-only cleanup. this must NOT live on the enter effect above: that
+    // effect re-runs on every unmounted transition (true -> 'should-enter' ->
+    // false), and a cleanup returned there ran mid-lifecycle — dropping the
+    // mediaEmit listener right after mount for value-input avoidReRenders
+    // drivers, with no re-registration (render only registers while
+    // mediaEmitCleanup is unset), so media styles silently stopped applying
+    useIsomorphicLayoutEffect(() => {
       return () => {
         componentSetStates.delete(setState)
         stateRef.current.mediaEmitCleanup?.()
+        // clear so a render after a simulated unmount (StrictMode dev) can re-register
+        stateRef.current.mediaEmitCleanup = undefined
       }
-    }, [state.unmounted, inputStyle])
+    }, [])
 
     useIsomorphicLayoutEffect(() => {
-      if (disabled) return
+      let disposeSafeArea: (() => void) | undefined
+      if (splitStyles?.usesSafeArea) {
+        const updateSafeArea = () => {
+          setState((previous) => ({ ...previous }))
+        }
+        disposeSafeArea = subscribeToSafeArea(updateSafeArea)
+        // close the render-to-subscribe race: the provider tracker may have
+        // published new insets after this component evaluated its styles.
+        if (process.env.TAMAGUI_TARGET === 'native') {
+          updateSafeArea()
+        }
+      }
+
+      if (disabled) return disposeSafeArea
 
-      if (!pseudoGroups && !mediaGroups) return
-      if (!allGroupContexts) return
-      return subscribeToContextGroup({
+      if (!pseudoGroups && !mediaGroups) return disposeSafeArea
+      if (!allGroupContexts) return disposeSafeArea
+      const disposeGroup = subscribeToContextGroup({
         groupContext: allGroupContexts,
         setStateShallow,
         mediaGroups,
         pseudoGroups,
       })
-    }, [
-      allGroupContexts,
-      disabled,
-      pseudoGroups ? objectIdentityKey(pseudoGroups) : 0,
-      mediaGroups ? objectIdentityKey(mediaGroups) : 0,
-    ])
+      if (!disposeSafeArea) return disposeGroup
+      return () => {
+        disposeSafeArea()
+        disposeGroup?.()
+      }
+    }, [allGroupContexts, disabled, splitStyles?.usesSafeArea, groupSetRevision])
 
     const groupEmitter = stateRef.current.group
     useIsomorphicLayoutEffect(() => {
@@ -1304,9 +1665,14 @@ export function createComponent<
 
     // if its a group its gotta listen for pseudos to emit them to children
 
-    const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle
-    const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle
-    const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle
+    // native flat-value clauses surface the interaction states they reference
+    // so the component attaches the matching events.
+    const conditionalStates = !disabled ? splitStyles?.programStates : undefined
+
+    const runtimePressStyle =
+      !disabled && (conditionalStates?.has('press') || conditionalStates?.has('active'))
+    const runtimeFocusStyle = !disabled && conditionalStates?.has('focus')
+    const runtimeFocusVisibleStyle = !disabled && conditionalStates?.has('focus-visible')
 
     const attachFocus = Boolean(
       runtimePressStyle ||
@@ -1328,11 +1694,11 @@ export function createComponent<
       onMouseDown ||
       onMouseUp ||
       onLongPress ||
-      onClick ||
-      pseudos?.focusVisibleStyle
+      // only web routes onClick through the press path (see onPress below)
+      (process.env.TAMAGUI_TARGET === 'web' && onClick)
     )
 
-    const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle
+    const runtimeHoverStyle = !disabled && conditionalStates?.has('hover')
     // with a platform pseudo driver the hover STATE is driver-sourced; only keep
     // the JS hover listeners when something else needs them (dynamic group
     // children, or the user's own onMouseEnter/Leave handlers below).
@@ -1372,7 +1738,6 @@ export function createComponent<
         attachHover,
         shouldAttach,
         needsHoverState,
-        pseudos,
       })
     }
 
@@ -1439,7 +1804,7 @@ export function createComponent<
                   // @ts-ignore
                   onClick?.(e)
                   // matches RN pressable behavior - only when an explicit press
-                  // handler is set, so pressStyle alone doesn't swallow clicks
+                  // handler is set, so a press clause alone doesn't swallow clicks
                   if (onPress || onClick) {
                     e.stopPropagation()
                   }
@@ -1465,7 +1830,7 @@ export function createComponent<
                 componentContext.setParentFocusState({ focusWithin: true })
                 next.focusWithin = true
               }
-              if (pseudos?.focusVisibleStyle) {
+              if (conditionalStates?.has('focus-visible')) {
                 if (lastInteractionWasKeyboard.value) {
                   next.focusVisible = true
                 } else {
@@ -1501,12 +1866,11 @@ export function createComponent<
         delayLongPress: viewProps.delayLongPress,
         delayPressIn: viewProps.delayPressIn,
         delayPressOut: viewProps.delayPressOut,
-        focusable: viewProps.focusable ?? true,
         minPressDuration: 0,
       })
     }
 
-    if (process.env.TAMAGUI_TARGET === 'web' && events && !isReactNative) {
+    if (process.env.TAMAGUI_TARGET === 'web' && events) {
       Object.assign(viewProps, getWebEvents(events))
     }
 
@@ -1516,42 +1880,43 @@ export function createComponent<
       log(`events`, { events, attachHover, attachPress })
     }
 
-    const propsWithHref = props as typeof props & { href?: unknown }
-    const propsInWithHref = propsIn as typeof propsIn & { href?: unknown }
-
-    const pressDebugDetail =
-      props.testID ??
-      propsIn.testID ??
-      props.accessibilityLabel ??
-      propsIn.accessibilityLabel ??
-      (typeof propsWithHref.href === 'string' ? propsWithHref.href : null) ??
-      (typeof propsInWithHref.href === 'string' ? propsInWithHref.href : null)
-
-    const pressDebugName =
-      [componentName, pressDebugDetail].filter(Boolean).join(':') || null
-
     // EVENTS native - handles focus/blur, input special cases, and RNGH press handling
     // Skip gesture setup for HOC components - they may return null which crashes GestureDetector
     // hasRealPressEvents distinguishes user-provided handlers from events.onPress
-    // synthesized for pressStyle alone — only the former should claim the responder.
-    const hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress)
-    const pressGesture =
-      process.env.TAMAGUI_TARGET === 'native'
-        ? useEvents(
-            events,
-            viewProps,
-            stateRef,
-            staticConfig,
-            isHOC,
-            isInsideNativeMenu,
-            pressDebugName,
-            hasRealPressEvents
-          )
-        : null
+    // synthesized for press clauses alone — only the former should claim the responder.
+    let hasRealPressEvents = false
+    let pressGesture: ReturnType<typeof useEvents> = null
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      const propsWithHref = props as typeof props & { href?: unknown }
+      const propsInWithHref = propsIn as typeof propsIn & { href?: unknown }
+      const pressDebugDetail =
+        props.testID ??
+        propsIn.testID ??
+        props.accessibilityLabel ??
+        propsIn.accessibilityLabel ??
+        (typeof propsWithHref.href === 'string' ? propsWithHref.href : null) ??
+        (typeof propsInWithHref.href === 'string' ? propsInWithHref.href : null)
+      const pressDebugName = displayName
+        ? pressDebugDetail
+          ? `${displayName}:${pressDebugDetail}`
+          : displayName
+        : pressDebugDetail || null
+      hasRealPressEvents = !!(onPress || onPressIn || onPressOut || onLongPress)
+      pressGesture = useEvents(
+        events,
+        viewProps,
+        stateRef,
+        staticConfig,
+        isHOC,
+        isInsideNativeMenu,
+        pressDebugName,
+        hasRealPressEvents
+      )
+    }
 
     if (process.env.NODE_ENV === 'development' && time) time`hooks`
 
-    if (asChild) {
+    if (asChild && !isHOC) {
       elementType = Slot
       // on native this is already merged into viewProps in useEvents
       if (process.env.TAMAGUI_TARGET === 'web') {
@@ -1566,6 +1931,8 @@ export function createComponent<
             onMouseDown,
             onMouseEnter,
             onMouseLeave,
+            onFocus,
+            onBlur,
           },
           webStyleEvents
         )
@@ -1579,6 +1946,14 @@ export function createComponent<
 
     let content: ReactNode | undefined
 
+    // ONLY native: useChildren reads TextAncestor context (a hook), so it must
+    // run on every render — passthrough included — or toggling passThrough
+    // (Adapt/Popover flip it per breakpoint) would change the hook count
+    // mid-lifecycle. it returns undefined for passthrough.
+    const childrenFromHooks = hooks.useChildren
+      ? hooks.useChildren(elementType, children, viewProps, isPassthrough)
+      : undefined
+
     if (isPassthrough) {
       // avoid re-parenting but avoid layout changes
       content = React.createElement(
@@ -1592,9 +1967,8 @@ export function createComponent<
       )
     } else {
       // here elementType is either the custom animated driver view, or base view
-      if (hooks.useChildren) {
-        // ONLY native:
-        content = hooks.useChildren(elementType, content || children, viewProps)
+      if (childrenFromHooks) {
+        content = childrenFromHooks
       }
 
       const isRenderPropString = typeof renderProp === 'string'
@@ -1610,14 +1984,28 @@ export function createComponent<
         )
         if (out) {
           viewProps = out.viewProps
-          elementType = out.elementType
+          if (
+            isAnimatedCustomComponent &&
+            (elementType as any)['acceptRenderProp'] &&
+            typeof out.elementType === 'string'
+          ) {
+            // an animated driver view is active and owns the (possibly array)
+            // style; forward the render tag so the view renders the element
+            // itself (see acceptRenderProp) instead of us swapping in a raw DOM
+            // tag, which would leak the animated style array onto a plain element
+            // (React DOM throws setting an array on a CSSStyleDeclaration).
+            viewProps.render = out.elementType
+          } else {
+            elementType = out.elementType
+          }
         }
       }
 
       if (!content) {
-        // web-only, handle render === string passing to custom animated component
-        if (isRenderPropString) {
-          viewProps.render === renderProp
+        // web-only, forward render string to custom animated driver components
+        // (they render the tag themselves, see acceptRenderProp in drivers)
+        if (isRenderPropString && elementType['acceptRenderProp']) {
+          viewProps.render = renderProp
         }
 
         content = React.createElement(elementType, viewProps, content || children)
@@ -1642,7 +2030,9 @@ export function createComponent<
 
     // needs to reset the presence state for nested children
     // Use the resolved animationDriver (handles multi-driver config)
-    const ResetPresence = animationDriver?.ResetPresence
+    const ResetPresence = animationDriver?.isStub
+      ? undefined
+      : animationDriver?.ResetPresence
     const needsReset = Boolean(
       // not when passing down to child
       !asChild &&
@@ -1666,7 +2056,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`create-element`
 
-    if ('focusWithinStyle' in propsIn || pseudos?.focusWithinStyle) {
+    if (conditionalStates?.has('focus-within')) {
       content = (
         <ComponentContext.Provider
           {...componentContext}
@@ -1677,7 +2067,10 @@ export function createComponent<
       )
     }
 
-    if ('group' in props) {
+    // containers provide the same context channel groups do. Mount the
+    // provider whenever the resolved component establishes either capability
+    // so descendant clauses can subscribe.
+    if (groupName || isContainer) {
       content = (
         <GroupContext.Provider value={allGroupContexts}>{content}</GroupContext.Provider>
       )
@@ -1701,19 +2094,6 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 
-    if (process.env.TAMAGUI_TARGET === 'web') {
-      if (isReactNative && !asChild) {
-        content = (
-          <span
-            className="_dsp_contents"
-            {...(!isPassthrough && isHydrated && events && getWebEvents(events))}
-          >
-            {content}
-          </span>
-        )
-      }
-    }
-
     if (overriddenContextProps && contextForOverride) {
       const Provider = contextForOverride.Provider!
 
@@ -1735,7 +2115,12 @@ export function createComponent<
 
     // SSR style support - for non compiled styles we render them inline until client takes over
     // on client we then switch over to our global sheet insert, because rendering inline is expensive
-    if (process.env.TAMAGUI_TARGET === 'web' && startedUnhydrated && splitStyles) {
+    if (
+      !process.env.TAMAGUI_DID_OUTPUT_CSS &&
+      process.env.TAMAGUI_TARGET === 'web' &&
+      startedUnhydrated &&
+      splitStyles
+    ) {
       content = (
         <>
           {content}
@@ -1780,7 +2165,6 @@ export function createComponent<
                 hasRuntimeMediaKeys,
                 isStringElement,
                 mediaListeningKeys,
-                pseudos,
                 shouldAttach,
                 noClass,
                 shouldListenForMedia,
@@ -1802,9 +2186,6 @@ export function createComponent<
             console.groupEnd()
           }
         }
-        if (debugProp === 'break') {
-          // debugger intentionally here for debugging
-        }
       }
     }
 
@@ -1821,7 +2202,7 @@ export function createComponent<
     }
 
     return content
-  })
+  }
 
   function notifyGroupSubscribers(
     groupContext: SingleGroupContext | null,
@@ -1865,19 +2246,7 @@ export function createComponent<
 
   // let hasLogged = false
 
-  if (staticConfig.componentName) {
-    component.displayName = staticConfig.componentName
-  }
-
-  type ComponentType = TamaguiComponent<
-    ComponentPropTypes,
-    Ref,
-    BaseProps,
-    BaseStyles,
-    {}
-  >
-
-  let res: ComponentType = component as any
+  res = component as any
 
   // we now have avoid re-renders in many more cases so imo this is way more worth it
   // Text/Button/string taking components
@@ -1886,36 +2255,29 @@ export function createComponent<
 
   res.staticConfig = staticConfig
 
-  function extendStyledConfig(extended?: Partial<StaticConfig>) {
-    return {
+  // `.resolve` chains a component resolver (complete props + env -> style
+  // fragment) by returning a NEW component with the resolver appended
+  res.resolve = (resolver: any) => {
+    const next: any = createComponent({
       ...staticConfig,
-      ...extended,
-      neverFlatten: true,
-      isHOC: true,
-      isStyledHOC: false,
+      resolvers: staticConfig.resolvers
+        ? [...staticConfig.resolvers, resolver]
+        : [resolver],
+    })
+    // carry over statics assigned after creation (styled() copies parent
+    // statics onto the finished component)
+    for (const key in res) {
+      if (key === 'propTypes' || key in next) continue
+      next[key] = (res as any)[key]
     }
+    return next
   }
 
-  function styleable(Component: any, options?: StyleableOptions) {
-    const skipForwardRef = typeof Component === 'function' && Component.length === 1
-
-    let out = skipForwardRef ? Component : React.forwardRef(Component)
-
-    const extendedConfig = extendStyledConfig(options?.staticConfig)
-
-    out = options?.disableTheme ? out : themeable(out, extendedConfig, true)
-
-    if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) {
-      out = React.memo(out)
-    }
-
-    out.staticConfig = extendedConfig
-    out.styleable = styleable
-    return out
+  if (displayName) {
+    res.displayName = displayName
+    ;(res as any)[componentDisplayName] = displayName
   }
 
-  res.styleable = styleable
-
   return res
 }