@hanzogui/web 7.3.2 → 8.0.0

package/src/eventHandling.native.ts

@@ -9,6 +9,39 @@ import { Platform, View } from 'react-native'
 import { useMainThreadPressEvents } from './helpers/mainThreadPressEvents'
 import type { StaticConfig, GuiComponentStateRef } from './types'
 
+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
+}
+
+let isNativeDesktopCache: boolean | undefined
+const getIsNativeDesktop = () => {
+  if (isNativeDesktopCache === undefined) {
+    isNativeDesktopCache = Platform?.OS === 'macos' || Platform?.OS === 'windows'
+  }
+  return isNativeDesktopCache
+}
+
+const responderClaim = () => true
+const responderWrapperStyle = { display: 'contents' } as const
+
 // web events not used on native
 export function getWebEvents() {
   return {}
@@ -21,7 +54,8 @@ export function useEvents(
   staticConfig: StaticConfig,
   isHOC?: boolean,
   isInsideNativeMenu?: boolean,
-  debugName?: string | null
+  debugName?: string | null,
+  hasRealPressEvents?: boolean
 ) {
   // focus/blur events always attached directly
   if (events) {
@@ -31,23 +65,34 @@ export function useEvents(
     if (events.onBlur) {
       viewProps['onBlur'] = events.onBlur
     }
+    if (getIsNativeDesktop()) {
+      if (events.onMouseEnter) {
+        viewProps['onMouseEnter'] = events.onMouseEnter
+      }
+      if (events.onMouseLeave) {
+        viewProps['onMouseLeave'] = events.onMouseLeave
+      }
+    }
   }
 
-  const hasPressEvents =
-    // its stable and always on if you have in/out/regular
-    events?.onPress
-  const hasAnyPressCallbacks = Boolean(
-    events?.onPress || events?.onPressIn || events?.onPressOut || events?.onLongPress
-  )
+  // 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 if we ever had press events to avoid re-parenting / hooks issues
+  // 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
+  }
 
-  // avoid hooks/reparenting
   const everEnabled = Boolean(hasPressEvents || stateRef.current.hasHadEvents)
   const isUsingRNGH = gh.isEnabled
 
@@ -108,6 +153,22 @@ export function useEvents(
     const callbacksRef = useRef<any>(isUsingRNGH ? {} : null)
     const gestureRef = useRef<any>(null)
 
+    // Real press handlers use the responder system for delivery even when RNGH
+    // is configured. RNGH Tap begin/end ordering is not stable enough for
+    // nested Gui press arbitration, and Fabric can mount a stale Tap that
+    // claims responder but never finalizes. The responder path is the source of
+    // truth RN already uses for innermost press ownership.
+    //
+    // 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 =
+      !isInsideNativeMenu &&
+      Boolean(hasRealPressEvents || (getIsAndroid() && 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
@@ -119,13 +180,22 @@ export function useEvents(
           }
         : {}
 
+      if (hasRealPressEvents && !isInsideNativeMenu) {
+        // Real handlers are delivered by useMainThreadPressEvents above. Clear
+        // any cached pressStyle observer from an earlier render so it cannot
+        // double-fire after onPress appears dynamically.
+        gestureRef.current = null
+        return null
+      }
+
       // only create gesture once, callbacks are read from ref
       if (!gestureRef.current) {
+        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 { Gesture } = gh.state
           const manual = Gesture.Manual()
             .runOnJS(true)
             .manualActivation(true)
@@ -140,16 +210,27 @@ export function useEvents(
               callbacksRef.current.onPressOut?.({})
             })
           gestureRef.current = manual
-        } else {
-          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!
@@ -168,9 +249,10 @@ export function useEvents(
 export function wrapWithGestureDetector(
   content: any,
   gesture: any,
-  stateRef: { current: GuiComponentStateRef },
+  _stateRef: { current: GuiComponentStateRef },
   isHOC?: boolean,
-  isCompositeComponent?: boolean
+  isCompositeComponent?: boolean,
+  hasRealPressEvents?: boolean
 ) {
   // Skip wrapping for HOC and composite components - they pass press events
   // to the inner component via props instead of using GestureDetector
@@ -179,49 +261,58 @@ export function wrapWithGestureDetector(
   }
 
   const gh = getGestureHandler()
-  const { GestureDetector, Gesture } = gh.state
-
-  // avoid re-parenting: only wrap if we ever had press events
-  const shouldWrap = stateRef.current.hasHadEvents
+  const { GestureDetector } = gh.state
 
-  if (!GestureDetector || !shouldWrap) {
+  // Only wrap when useEvents actually produced an RNGH gesture. Real press
+  // handlers are responder-delivered; wrapping them in a no-op GestureDetector
+  // recreates the same stale Tap/dead-zone failure mode this path avoids.
+  if (!GestureDetector || !gesture) {
     return content
   }
 
-  // use actual gesture or no-op Manual gesture to maintain tree structure
-  const gestureToUse = gesture || Gesture?.Manual()
-
-  if (!gestureToUse) {
-    return content
+  // pressStyle-only observers (Manual + manualActivation gesture) must never
+  // claim the responder — otherwise a nested pressStyle Gui 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 (!hasRealPressEvents) {
+    return React.createElement(GestureDetector, { gesture }, content)
   }
 
-  const detector = 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 Gui 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 }, claimed)
+  }
 
-  // wrap in a responder-claiming View OUTSIDE the GestureDetector.
-  // this blocks parent RN Pressable/TouchableOpacity from firing when
-  // a press lands on this component, without causing the RNGH deadlock
-  // that happens when responder claims are applied to a view inside
-  // the gesture-managed subtree (RNGH intercepts UIManager.setJSResponder
-  // globally — when the claimant is one of its own gesture targets it
-  // creates a coordination conflict, especially at scale on first mount).
+  // 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,
-      // display: contents keeps the wrapper transparent to layout (new arch /
-      // Fabric) so it doesn't become an extra flex child and shift siblings.
       style: responderWrapperStyle,
       onStartShouldSetResponder: responderClaim,
-      onResponderTerminationRequest: responderDeny,
     },
-    detector
+    React.createElement(GestureDetector, { gesture }, content)
   )
 }
-
-const responderClaim = () => true
-const responderDeny = () => false
-const responderWrapperStyle = { display: 'contents' } as const

package/src/eventHandling.ts

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

package/src/helpers/createDesignSystem.ts

@@ -249,8 +249,8 @@ export function getCSS(
 @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}

package/src/helpers/createMediaStyle.ts

@@ -3,7 +3,7 @@ import { mediaObjectToString } from './mediaObjectToString'
 import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
 import { getGroupPropParts, type GroupParts } from './getGroupPropParts'
 
-// TODO have this be used by extractMediaStyle in gui static
+// TODO have this be used by extractMediaStyle in hanzogui static
 // not synced to static/constants for now
 export const MEDIA_SEP = '_'
 

package/src/helpers/defaultAnimationDriver.tsx

@@ -2,7 +2,7 @@ import type { AnimationDriver } from '../types'
 
 const noAnimationDriver = (method: string): any => {
   console.warn(
-    `No animation driver configured. To use ${method}, you must pass \`animations\` to createGui. See: https://gui.dev/docs/core/animations`
+    `No animation driver configured. To use ${method}, you must pass \`animations\` to createGui. See: https://hanzogui.dev/docs/core/animations`
   )
 }
 

package/src/helpers/expandStyle.ts

@@ -5,7 +5,7 @@
 
 import { isAndroid, isWeb } from '@hanzogui/constants'
 
-import { getSetting } from '../config'
+import { getStyleCompat, type StyleCompat } from '../config'
 import type { PropMappedValue } from '../types'
 import { parseBorderShorthand } from './parseBorderShorthand'
 import { parseOutlineShorthand } from './parseOutlineShorthand'
@@ -16,17 +16,66 @@ const neg1Flex = [
   ['flexBasis', 'auto'],
 ] satisfies PropMappedValue
 
-export function expandStyle(key: string, value: any): PropMappedValue {
-  if (process.env.GUI_TARGET === 'web') {
-    if (key === 'flex') {
-      if (value === -1) {
-        return neg1Flex
+function expandFlex(value: unknown, compat: StyleCompat): PropMappedValue {
+  if (typeof value === 'string') {
+    return [['flex', value]]
+  }
+
+  if (typeof value !== 'number') {
+    return
+  }
+
+  if (value === -1) {
+    return neg1Flex
+  }
+
+  switch (compat) {
+    case 'legacy':
+      return [
+        ['flexGrow', value],
+        ['flexShrink', 1],
+        ['flexBasis', 'auto'],
+      ]
+    case 'react-native':
+      if (value > 0) {
+        return [
+          ['flexGrow', value],
+          ['flexShrink', 0],
+          ['flexBasis', 0],
+        ]
+      }
+      if (value === 0) {
+        return [
+          ['flexGrow', 0],
+          ['flexShrink', 0],
+          ['flexBasis', 'auto'],
+        ]
+      }
+      return [
+        ['flexGrow', 0],
+        ['flexShrink', -value],
+        ['flexBasis', 'auto'],
+      ]
+    case 'web':
+      if (value < 0) {
+        return [['flex', value]]
       }
       return [
         ['flexGrow', value],
         ['flexShrink', 1],
-        ['flexBasis', getSetting('styleCompat') === 'legacy' ? 'auto' : 0],
+        ['flexBasis', 0],
       ]
+  }
+}
+
+export function expandStyle(
+  key: string,
+  value: any,
+  styleCompat: StyleCompat = getStyleCompat()
+): PropMappedValue {
+  if (process.env.GUI_TARGET === 'web') {
+    if (key === 'flex') {
+      return expandFlex(value, styleCompat)
     }
 
     switch (key) {
@@ -91,12 +140,21 @@ export function expandStyle(key: string, value: any): PropMappedValue {
       }
     }
 
-    // native-only key expansions (logical properties)
-    if (key in nativeExpansions) {
-      return nativeExpansions[key].map((k) => [k, value])
+    // native-only logical expansions (RTL-aware inline props output RN-style
+    // names like marginStart/borderEndColor that aren't valid CSS on web)
+    if (key in nativeInlineExpansions) {
+      return nativeInlineExpansions[key].map((k) => [k, value])
     }
   }
 
+  // universal logical expansions — applied on both targets so atomic CSS
+  // generates one class per longhand. Otherwise `inset: 0` becomes a single
+  // `_inset-0px` class controlling four sub-properties, which silently breaks
+  // dedup/override against `top`/`left`/etc.
+  if (key in universalExpansions) {
+    return universalExpansions[key].map((k) => [k, value])
+  }
+
   if (key in EXPANSIONS) {
     return EXPANSIONS[key].map((k) => [k, value])
   }
@@ -153,52 +211,62 @@ for (const parent in EXPANSIONS) {
   EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`)
 }
 
-// native-only expansions (logical properties not supported in RN)
-const nativeExpansions: Record<string, string[]> = {
-  // logical border properties
+// Logical expansions whose targets are physical longhands valid on both
+// targets. Applied unconditionally so atomic CSS stays one-class-per-longhand:
+// without this, `inset: 0` emits `_inset-0px` (one class, four sub-properties)
+// and silently breaks dedup/override against `top`/`left`/etc.
+const universalExpansions: Record<string, string[]> = {
+  // inset
+  inset: ['top', 'right', 'bottom', 'left'],
+  insetBlock: ['top', 'bottom'],
+  insetBlockStart: ['top'],
+  insetBlockEnd: ['bottom'],
+  // block-axis margin/padding
+  marginBlock: ['marginTop', 'marginBottom'],
+  marginBlockStart: ['marginTop'],
+  marginBlockEnd: ['marginBottom'],
+  paddingBlock: ['paddingTop', 'paddingBottom'],
+  paddingBlockStart: ['paddingTop'],
+  paddingBlockEnd: ['paddingBottom'],
+  // block-axis border
   borderBlockColor: ['borderTopColor', 'borderBottomColor'],
-  borderInlineColor: ['borderEndColor', 'borderStartColor'],
   borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
-  borderInlineWidth: ['borderEndWidth', 'borderStartWidth'],
   borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
-  borderInlineStyle: ['borderEndStyle', 'borderStartStyle'],
   borderBlockStartColor: ['borderTopColor'],
   borderBlockEndColor: ['borderBottomColor'],
-  borderInlineStartColor: ['borderStartColor'],
-  borderInlineEndColor: ['borderEndColor'],
   borderBlockStartWidth: ['borderTopWidth'],
   borderBlockEndWidth: ['borderBottomWidth'],
-  borderInlineStartWidth: ['borderStartWidth'],
-  borderInlineEndWidth: ['borderEndWidth'],
   borderBlockStartStyle: ['borderTopStyle'],
   borderBlockEndStyle: ['borderBottomStyle'],
+  // logical sizing → physical width/height
+  minBlockSize: ['minHeight'],
+  maxBlockSize: ['maxHeight'],
+  minInlineSize: ['minWidth'],
+  maxInlineSize: ['maxWidth'],
+  blockSize: ['height'],
+  inlineSize: ['width'],
+}
+
+// Inline-axis logical expansions are native-only: their targets are RN-style
+// RTL-aware names (marginStart/borderEndColor/etc.) which web's CSS hyphenator
+// would emit as invalid CSS. On web these props pass through as native CSS
+// logical properties, which the browser handles RTL-aware.
+const nativeInlineExpansions: Record<string, string[]> = {
+  borderInlineColor: ['borderEndColor', 'borderStartColor'],
+  borderInlineWidth: ['borderEndWidth', 'borderStartWidth'],
+  borderInlineStyle: ['borderEndStyle', 'borderStartStyle'],
+  borderInlineStartColor: ['borderStartColor'],
+  borderInlineEndColor: ['borderEndColor'],
+  borderInlineStartWidth: ['borderStartWidth'],
+  borderInlineEndWidth: ['borderEndWidth'],
   borderInlineStartStyle: ['borderStartStyle'],
   borderInlineEndStyle: ['borderEndStyle'],
-  // logical margin/padding
-  marginBlock: ['marginTop', 'marginBottom'],
   marginInline: ['marginEnd', 'marginStart'],
-  paddingBlock: ['paddingTop', 'paddingBottom'],
-  paddingInline: ['paddingEnd', 'paddingStart'],
-  marginBlockStart: ['marginTop'],
-  marginBlockEnd: ['marginBottom'],
   marginInlineStart: ['marginStart'],
   marginInlineEnd: ['marginEnd'],
-  paddingBlockStart: ['paddingTop'],
-  paddingBlockEnd: ['paddingBottom'],
+  paddingInline: ['paddingEnd', 'paddingStart'],
   paddingInlineStart: ['paddingStart'],
   paddingInlineEnd: ['paddingEnd'],
-  // logical sizing
-  minBlockSize: ['minHeight'],
-  maxBlockSize: ['maxHeight'],
-  minInlineSize: ['minWidth'],
-  maxInlineSize: ['maxWidth'],
-  blockSize: ['height'],
-  inlineSize: ['width'],
-  // inset
-  inset: ['top', 'right', 'bottom', 'left'],
-  insetBlock: ['top', 'bottom'],
-  insetBlockStart: ['top'],
-  insetBlockEnd: ['bottom'],
   insetInlineStart: ['left'],
   insetInlineEnd: ['right'],
 }

package/src/helpers/getGroupPropParts.ts

@@ -36,7 +36,7 @@ export function getGroupPropParts(groupProp: string): GroupParts {
   if (pseudoCandidate && !isValidPseudo(pseudoCandidate)) {
     if (process.env.NODE_ENV === 'development') {
       console.warn(
-        `Unknown group prop part "${pseudoCandidate}" in "${groupProp}". If this is a media query, ensure it's defined in your gui config.`
+        `Unknown group prop part "${pseudoCandidate}" in "${groupProp}". If this is a media query, ensure it's defined in your hanzogui config.`
       )
     }
     pseudoCandidate = undefined