@hanzogui/web 3.0.6 → 4.4.0

package/src/helpers/mainThreadPressEvents.native.ts

@@ -1,41 +1,137 @@
 /**
- * Fallback press handling using React Native's usePressability
- * Split into separate file to avoid deep import warnings when RNGH is enabled
+ * Fallback press handling when RNGH is not available.
  *
- * NOTE: This hook must be called unconditionally in the parent to avoid
- * rules of hooks violations when disabled toggles. The `enabled` param
- * controls whether the pressability events are actually applied.
+ * Implements the responder-based press detection that usePressability provides,
+ * without the deep RN internal import. Supports pressIn/pressOut delays,
+ * long press, cancellation, and min press duration.
  */
 
-import { composeEventHandlers } from '@hanzogui/helpers'
+import { useRef } from 'react'
 
-const dontComposePressabilityKeys: Record<string, boolean> = {
-  onBlur: true,
-  onFocus: true,
+type PressState =
+  | 'idle'
+  | 'pressing' // responder granted, waiting for delay
+  | 'active' // pressIn fired
+  | 'longPressed' // long press detected
+
+interface PressRef {
+  state: PressState
+  pressInTimer: ReturnType<typeof setTimeout> | null
+  pressOutTimer: ReturnType<typeof setTimeout> | null
+  longPressTimer: ReturnType<typeof setTimeout> | null
+  activateTime: number
 }
 
-// empty config for when disabled - usePressability still needs to be called
-const emptyConfig = {}
+const DEFAULT_LONG_PRESS_DELAY = 500
+const DEFAULT_MIN_PRESS_DURATION = 130
+
+export function useMainThreadPressEvents(
+  events: any,
+  viewProps: any,
+  enabled = true,
+  debugName?: string | null
+) {
+  const ref = useRef<PressRef>(null as any)
+  if (!ref.current) {
+    ref.current = {
+      state: 'idle',
+      pressInTimer: null,
+      pressOutTimer: null,
+      longPressTimer: null,
+      activateTime: 0,
+    }
+  }
+
+  if (!enabled || !events) return
+
+  const delayPressIn = Math.max(0, events.delayPressIn ?? 0)
+  const delayPressOut = Math.max(0, events.delayPressOut ?? 0)
+  const delayLongPress = Math.max(0, events.delayLongPress ?? DEFAULT_LONG_PRESS_DELAY)
+  const minPressDuration = Math.max(
+    0,
+    events.minPressDuration ?? DEFAULT_MIN_PRESS_DURATION
+  )
+
+  function activate(e: any) {
+    ref.current.state = 'active'
+    ref.current.activateTime = Date.now()
+    events.onPressIn?.(e)
+  }
+
+  function deactivate(e: any) {
+    const pressDuration = Date.now() - ref.current.activateTime
+    const remaining = Math.max(minPressDuration - pressDuration, delayPressOut)
+
+    if (remaining > 0) {
+      ref.current.pressOutTimer = setTimeout(() => {
+        events.onPressOut?.(e)
+      }, remaining)
+    } else {
+      events.onPressOut?.(e)
+    }
+  }
+
+  function cleanup() {
+    if (ref.current.pressInTimer) clearTimeout(ref.current.pressInTimer)
+    if (ref.current.pressOutTimer) clearTimeout(ref.current.pressOutTimer)
+    if (ref.current.longPressTimer) clearTimeout(ref.current.longPressTimer)
+    ref.current.pressInTimer = null
+    ref.current.pressOutTimer = null
+    ref.current.longPressTimer = null
+  }
+
+  viewProps.onStartShouldSetResponder = () => !events.disabled
 
-let usePressability: any = null
+  viewProps.onResponderGrant = (e: any) => {
+    cleanup()
+    ref.current.state = 'pressing'
 
-export function useMainThreadPressEvents(events: any, viewProps: any, enabled = true) {
-  usePressability =
-    usePressability ||
-    require('react-native/Libraries/Pressability/usePressability').default
+    if (delayPressIn > 0) {
+      ref.current.pressInTimer = setTimeout(() => activate(e), delayPressIn)
+    } else {
+      activate(e)
+    }
 
-  // always call the hook to maintain consistent hook order
-  const pressability = usePressability(enabled ? events : emptyConfig)
+    if (events.onLongPress) {
+      ref.current.longPressTimer = setTimeout(() => {
+        if (ref.current.state === 'active') {
+          ref.current.state = 'longPressed'
+          events.onLongPress?.(e)
+        }
+      }, delayLongPress + delayPressIn)
+    }
+  }
+
+  viewProps.onResponderRelease = (e: any) => {
+    const wasLongPressed = ref.current.state === 'longPressed'
+    cleanup()
+
+    // if pressIn hasn't fired yet (was in delay), fire it now then immediately deactivate
+    if (ref.current.state === 'pressing') {
+      activate(e)
+    }
 
-  if (enabled && pressability) {
-    if (viewProps.hitSlop && events) {
-      events.hitSlop = viewProps.hitSlop
+    if (!wasLongPressed) {
+      events.onPress?.(e)
     }
-    for (const key in pressability) {
-      const og = viewProps[key]
-      const val = pressability[key]
-      viewProps[key] =
-        og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val
+
+    deactivate(e)
+    ref.current.state = 'idle'
+  }
+
+  viewProps.onResponderTerminate = (e: any) => {
+    cleanup()
+    if (ref.current.state === 'active' || ref.current.state === 'longPressed') {
+      deactivate(e)
     }
+    ref.current.state = 'idle'
+  }
+
+  viewProps.onResponderTerminationRequest = () => {
+    return events.cancelable !== false
+  }
+
+  viewProps.onResponderMove = (e: any) => {
+    events.onPressMove?.(e)
   }
 }

package/src/helpers/mainThreadPressEvents.ts

@@ -2,5 +2,6 @@
 export function useMainThreadPressEvents(
   _events: any,
   _viewProps: any,
-  _enabled?: boolean
+  _enabled?: boolean,
+  _debugName?: string | null
 ) {}

package/src/helpers/parseNativeStyle.ts

@@ -5,7 +5,7 @@
  * supports: backgroundImage (linear-gradient), boxShadow, textShadow
  * filter has no RN object equivalent, returns undefined (falls back to string)
  *
- * only called inside process.env.HANZO_GUI_TARGET === 'native' checks,
+ * only called inside process.env.GUI_TARGET === 'native' checks,
  * so this code is dead-code-eliminated on web builds.
  */
 

package/src/helpers/propMapper.ts

@@ -34,7 +34,7 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
 
   setLastFontFamilyToken(null)
 
-  if (!(process.env.HANZO_GUI_TARGET === 'native' && isAndroid)) {
+  if (!(process.env.GUI_TARGET === 'native' && isAndroid)) {
     // this shouldnt be necessary and handled in the outer loop
     if (key === 'elevationAndroid') return
   }
@@ -81,7 +81,7 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
   // on native, parse string backgroundImage/boxShadow/textShadow to RN object format
   // this handles both token-resolved strings and plain strings without tokens
   if (
-    process.env.HANZO_GUI_TARGET === 'native' &&
+    process.env.GUI_TARGET === 'native' &&
     value != null &&
     typeof value === 'string' &&
     (key === 'backgroundImage' || key === 'boxShadow' || key === 'textShadow')
@@ -146,7 +146,7 @@ const resolveVariants: StyleResolver = (
   if (!variantValue) {
     // variant at key exists, but no matching variant
     // disabling warnings, its fine to pass through, could re-enable later somehoiw
-    if (process.env.HANZO_GUI_WARN_ON_MISSING_VARIANT === '1') {
+    if (process.env.GUI_WARN_ON_MISSING_VARIANT === '1') {
       // don't warn on missing booleans
       if (typeof value !== 'boolean') {
         const name = staticConfig.componentName || '[UnnamedComponent]'
@@ -166,7 +166,7 @@ const resolveVariants: StyleResolver = (
     if (
       process.env.NODE_ENV === 'development' &&
       debug === 'verbose' &&
-      process.env.HANZO_GUI_TARGET !== 'native'
+      process.env.GUI_TARGET !== 'native'
     ) {
       console.groupCollapsed('   expanded functional variant', key)
       console.info({ fn, variantValue, extras })

package/src/helpers/registerCSSVariable.ts

@@ -2,14 +2,14 @@ import { createCSSVariable, getVariableValue } from '../createVariable'
 import type { Variable, VariableVal } from '../types'
 
 export const registerCSSVariable = (v: Variable | VariableVal) => {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     tokensValueToVariable.set(getVariableValue(v), v)
   }
 }
 
 export const variableToCSS = (v: Variable, unitless = false) => {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
-    return `--${process.env.HANZO_GUI_CSS_VARIABLE_PREFIX || ''}${createCSSVariable(
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
+    return `--${process.env.GUI_CSS_VARIABLE_PREFIX || ''}${createCSSVariable(
       v.name,
       false
     )}:${!unitless && typeof v.val === 'number' ? `${v.val}px` : v.val}`

package/src/helpers/skipProps.ts

@@ -2,7 +2,7 @@ import { nativeOnlyProps } from './nativeOnlyProps'
 import { webPropsToSkip } from './webPropsToSkip'
 
 /**
- * These are props that dont pass down below Hanzo GUI styled components
+ * These are props that dont pass down below GUI styled components
  */
 export const skipProps = {
   untilMeasured: 1,
@@ -25,11 +25,11 @@ if (process.env.NODE_ENV === 'test') {
 }
 
 // Skip web-only props on native
-if (process.env.HANZO_GUI_TARGET === 'native') {
+if (process.env.GUI_TARGET === 'native') {
   Object.assign(skipProps, webPropsToSkip)
 }
 
 // Skip native-only props on web
-if (process.env.HANZO_GUI_TARGET === 'web') {
+if (process.env.GUI_TARGET === 'web') {
   Object.assign(skipProps, nativeOnlyProps)
 }

package/src/helpers/useRenderElement.tsx

@@ -32,10 +32,7 @@ export function evaluateRenderProp(
   // String tag - swap element type, reuse props from defaultElement
   if (typeof render === 'string') {
     // on native, ignore lowercase tags (html/jsx elements like "div", "span")
-    if (
-      process.env.HANZO_GUI_TARGET === 'native' &&
-      render[0] === render[0].toLowerCase()
-    ) {
+    if (process.env.GUI_TARGET === 'native' && render[0] === render[0].toLowerCase()) {
       return defaultElement
     }
     return createElement(render, props, defaultChildren)

package/src/helpers/wrapStyleTags.tsx

@@ -4,7 +4,7 @@ import type { StyleObject } from '../types'
 // turns out this is pretty slow, creating a bunch of extra tags...
 
 export function getStyleTags(styles: StyleObject[]) {
-  if (process.env.HANZO_GUI_TARGET !== 'native') {
+  if (process.env.GUI_TARGET !== 'native') {
     if (styles.length) {
       return (
         <>

package/src/hooks/getThemeProxied.ts

@@ -125,7 +125,7 @@ export function getThemeProxied(
           const outVal = getVariable(value)
           const { name, scheme } = curState
 
-          if (process.env.HANZO_GUI_TARGET === 'native') {
+          if (process.env.GUI_TARGET === 'native') {
             // ios can avoid re-rendering for scheme changes (light↔dark) when using DynamicColorIOS
             // this does NOT work for sub-theme changes (red→blue) or when scheme inverses from parent
             const fastSchemeChange = getSetting('fastSchemeChange')

package/src/hooks/useTheme.tsx

@@ -30,11 +30,11 @@ export const useThemeWithState = (
 
   if (process.env.NODE_ENV === 'development') {
     if (!props.passThrough && !themeState?.theme) {
-      if (process.env.HANZO_GUI_DISABLE_NO_THEME_WARNING !== '1') {
+      if (process.env.GUI_DISABLE_NO_THEME_WARNING !== '1') {
         console.error(
           `[hanzo-gui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
             props
-          )}).\n\nIf this is intended and you are using Hanzo GUI without any themes, you can disable this warning by setting the environment variable HANZO_GUI_DISABLE_NO_THEME_WARNING=1`
+          )}).\n\nIf this is intended and you are using GUI without any themes, you can disable this warning by setting the environment variable GUI_DISABLE_NO_THEME_WARNING=1`
         )
       }
     }

package/src/hooks/useThemeState.ts

@@ -36,6 +36,7 @@ export const forceUpdateThemes = () => {
   cacheVersion++
   shouldForce = true
   allListeners.forEach((cb) => cb())
+  shouldForce = false
 }
 
 export const getThemeState = (id: ID) => states.get(id)
@@ -125,7 +126,7 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
 
     // check if this is a scheme-only change (light↔dark) where DynamicColorIOS handles it
     const isSchemeOnlyChange =
-      process.env.HANZO_GUI_TARGET === 'native' &&
+      process.env.GUI_TARGET === 'native' &&
       isIos &&
       getSetting('fastSchemeChange') &&
       local &&
@@ -267,7 +268,7 @@ const getNextState = (
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     const message = ` · useTheme(${id}) getNextState => ${name} needsUpdate ${needsUpdate} shouldRerender ${shouldRerender}`
-    if (process.env.HANZO_GUI_TARGET === 'native') {
+    if (process.env.GUI_TARGET === 'native') {
       console.info(message)
     } else {
       console.groupCollapsed(message)

package/src/insertFont.ts

@@ -16,7 +16,7 @@ export function insertFont<A extends GenericFont>(
   const font = createFont(fontIn)
   const tokened = createVariables(font, name) as GenericFont
   const parsed = parseFont(tokened) as DeepVariableObject<A>
-  if (process.env.HANZO_GUI_TARGET === 'web' && typeof document !== 'undefined') {
+  if (process.env.GUI_TARGET === 'web' && typeof document !== 'undefined') {
     const fontVars = registerFontVariables(parsed)
     const styleElement: HTMLStyleElement =
       document.querySelector(`style[${FONT_DATA_ATTRIBUTE_NAME}="${name}"]`) ||
@@ -53,7 +53,7 @@ export function parseFont<A extends GenericFont>(definition: A): DeepVariableObj
 }
 
 export function registerFontVariables(parsedFont: any) {
-  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+  if (!process.env.GUI_DID_OUTPUT_CSS) {
     const response: string[] = []
 
     for (const fkey in parsedFont) {

package/src/interfaces/GuiComponentPropsBaseBase.tsx

@@ -105,7 +105,7 @@ export type GuiComponentPropsBaseBase = {
 
   /**
    * Adds some area outside the typical bounds of the component for touch actions to register.
-   * Hanzo GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
+   * GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
    */
   hitSlop?: number | Insets | null
 }

package/src/setupReactNative.ts

@@ -5,7 +5,7 @@ const ReactNativeStaticConfigs = new WeakMap<any, Partial<StaticConfig> | null>(
 export function getReactNativeConfig(Component: any) {
   if (!Component) return
 
-  if (process.env.HANZO_GUI_TARGET === 'native') {
+  if (process.env.GUI_TARGET === 'native') {
     if (Component.propTypes?.onTextInput || Component.propTypes?.onChangeText) {
       return RNConfigs.TextInput
     }

package/src/styled.tsx

@@ -213,7 +213,7 @@ export function styledHtml<
 }
 
 /**
- * styled() for creating Hanzo GUI components from other components.
+ * styled() for creating GUI components from other components.
  */
 function styled<
   ParentComponent extends StylableComponent,

package/src/types.tsx

@@ -341,7 +341,7 @@ export type GuiComponentPropsBaseBase = {
 
   /**
    * Adds some area outside the typical bounds of the component for touch actions to register.
-   * Hanzo GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
+   * GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
    */
   hitSlop?: number | Insets | null
 
@@ -513,7 +513,7 @@ export interface GuiElementMethods {
 
 /**
  * Cross-platform element ref type. On web, includes GuiElementMethods
- * (measure, focus, blur) which Hanzo GUI adds at runtime. On native, View
+ * (measure, focus, blur) which GUI adds at runtime. On native, View
  * already has these via NativeMethods.
  */
 export type GuiElement = (HTMLElement & GuiElementMethods) | View
@@ -1074,16 +1074,16 @@ type AutocompleteSpecificTokensSetting = boolean | 'except-special'
 export interface GenericGuiSettings {
   /**
    * When true, flexBasis will be set to 0 when flex is positive. This will be
-   * the default in v2 of Hanzo GUI alongside an alternative mode for web compat.
+   * the default in v2 of GUI alongside an alternative mode for web compat.
    */
   styleCompat?: 'react-native' | 'legacy'
 
   // TODO
   /**
-   * When true, Hanzo GUI will always prefer a more specific style prop over a
+   * When true, GUI will always prefer a more specific style prop over a
    * less specific one.
    *
-   * By default, Hanzo GUI processes all style props in order of definition on the
+   * By default, GUI processes all style props in order of definition on the
    * object. This is a bit strange to most people, but it gets around many
    * annoying issues with specificity. You can see our docs on this here:
    * https://gui.hanzo.ai/docs/intro/styles#style-order-is-important
@@ -1134,12 +1134,12 @@ export interface GenericGuiSettings {
   autocompleteSpecificTokens?: AutocompleteSpecificTokensSetting
 
   /**
-   * On iOS, this enables a mode where Hanzo GUI returns color values using
+   * On iOS, this enables a mode where GUI returns color values using
    * `DynamicColorIOS` This is a React Native built in feature, you can read the
    * docs here: https://reactnative.dev/docs/dynamiccolorios
    *
    * We're working to make this enabled by default without any setting, but
-   * Hanzo GUI themes support inversing and/or changing to light/dark at any point
+   * GUI themes support inversing and/or changing to light/dark at any point
    * in the tree. We haven't implemented support for either of these cases when
    * combined with this feature.
    *
@@ -1188,7 +1188,7 @@ export interface GenericGuiSettings {
   /**
    * If building a non-server rendered app, set this to true.
    *
-   * For SSR compatibility on the web, Hanzo GUI will render once with the settings
+   * For SSR compatibility on the web, GUI will render once with the settings
    * from `mediaQueryDefaultActive` set for all media queries. Then, it will render
    * again after the initial render using the proper media query values. This is so that
    * hydration will match perfectly with the server.
@@ -1218,7 +1218,7 @@ export interface GenericGuiSettings {
   /**
    * If you want to style your <body> tag to use theme CSS variables on web, you
    * must place the theme className onto the body element or above. This will do so.
-   * If disabled, Hanzo GUI will place the className onto the element rendered by
+   * If disabled, GUI will place the className onto the element rendered by
    * the GuiProvider
    *
    * @default html
@@ -1226,7 +1226,7 @@ export interface GenericGuiSettings {
   addThemeClassName?: 'body' | 'html' | false
 
   /**
-   * Sets the default position value for all Hanzo GUI components.
+   * Sets the default position value for all GUI components.
    * @default 'static'
    */
   defaultPosition?: 'static' | 'relative'
@@ -1426,19 +1426,14 @@ export type WithMediaProps<A> = {
         [Key in PlatformMediaKeys]?: AddWebOnlyStyleProps<A>
       }
     : Key extends `$platform-web`
-      ? AddWebOnlyStyleProps<A>
-      : A
+      ? AddWebOnlyStyleProps<A> & { [Key in MediaPropKeys]?: AddWebOnlyStyleProps<A> }
+      : A & { [Key in MediaPropKeys]?: A }
 }
 
-type AddWebOnlyStyleProps<A> = {
-  [SubKey in keyof A | keyof CSSProperties]?: SubKey extends keyof CSSProperties
-    ? CSSProperties[SubKey]
-    : SubKey extends keyof A
-      ? A[SubKey]
-      : SubKey extends keyof WebOnlyValidStyleValues
-        ? WebOnlyValidStyleValues[SubKey]
-        : never
-}
+export type AddWebOnlyStyleProps<A> = Partial<CSSProperties> &
+  Partial<WebOnlyValidStyleValues> & {
+    [K in Exclude<keyof A, keyof CSSProperties>]?: A[K]
+  }
 
 export type WebOnlyValidStyleValues = {
   position: '-webkit-sticky'
@@ -1927,7 +1922,14 @@ export type PseudoStyles = {
   exitStyle?: ViewStyle
 }
 
-export type AllPlatforms = 'web' | 'native' | 'android' | 'ios'
+export type AllPlatforms =
+  | 'web'
+  | 'native'
+  | 'android'
+  | 'ios'
+  | 'tv'
+  | 'androidtv'
+  | 'tvos'
 
 // MUST EXPORT ALL IN BETWEEN or else it expands declarations like crazy
 
@@ -2460,6 +2462,7 @@ export interface StackStyleBase
 export interface TextStylePropsBase
   extends Omit<RNTextStyle, keyof ExtendedBaseProps>, ExtendedBaseProps {
   ellipsis?: boolean
+  numberOfLines?: number
   textDecorationDistance?: number
   textOverflow?: Properties['textOverflow']
   whiteSpace?: Properties['whiteSpace']
@@ -2802,7 +2805,7 @@ export type StaticConfigPublic = {
   validStyles?: { [key: string]: boolean }
 
   /**
-   * Accept Hanzo GUI tokens for these props (key for the prop key, val for the token category)
+   * Accept GUI tokens for these props (key for the prop key, val for the token category)
    */
   accept?: {
     [key: string]: keyof Tokens | 'style' | 'textStyle'
@@ -2830,9 +2833,9 @@ export type StaticConfigPublic = {
   isReactNative?: boolean
 
   /**
-   * By default if styled() doesn't recognize a parent Hanzo GUI component or specific react-native views,
+   * By default if styled() doesn't recognize a parent GUI component or specific react-native views,
    * it will assume the passed in component only accepts style={} for react-native compatibility.
-   * Setting `acceptsClassName: true` indicates Hanzo GUI can pass in className props.
+   * Setting `acceptsClassName: true` indicates GUI can pass in className props.
    */
   acceptsClassName?: boolean
 
@@ -3180,6 +3183,10 @@ export type UseAnimatedNumberStyle<
   V extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
 > = (val: V, getStyle: (current: any) => any) => any
 
+export type UseAnimatedNumbersStyle<
+  V extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
+> = (vals: V[], getStyle: (...currentValues: any[]) => any) => any
+
 export type UseAnimatedNumber<
   N extends UniversalAnimatedNumber<any> = UniversalAnimatedNumber<any>,
 > = (initial: number) => N
@@ -3203,6 +3210,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
   }) => React.ReactNode
   useAnimatedNumber: UseAnimatedNumber
   useAnimatedNumberStyle: UseAnimatedNumberStyle
+  useAnimatedNumbersStyle?: UseAnimatedNumbersStyle
   useAnimatedNumberReaction: UseAnimatedNumberReaction
   animations: A
   View?: any

package/src/views/GuiProvider.tsx

@@ -78,7 +78,7 @@ export function GuiProvider({
     <>
       {contents}
 
-      {process.env.HANZO_GUI_TARGET !== 'native' && config && !disableInjectCSS && (
+      {process.env.GUI_TARGET !== 'native' && config && !disableInjectCSS && (
         <style
           // react 19 feature to hoist style tags to header:
           // https://react.dev/reference/react-dom/components/style

package/src/views/Text.tsx

@@ -11,7 +11,7 @@ import type {
 export type Text = GuiTextElement
 
 const ellipsisStyle =
-  process.env.HANZO_GUI_TARGET === 'web'
+  process.env.GUI_TARGET === 'web'
     ? {
         maxWidth: '100%',
         overflow: 'hidden',
@@ -34,7 +34,7 @@ export const Text = createComponent<
   isText: true,
 
   defaultProps:
-    process.env.HANZO_GUI_TARGET === 'web'
+    process.env.GUI_TARGET === 'web'
       ? undefined
       : {
           suppressHighlighting: true,
@@ -43,13 +43,14 @@ export const Text = createComponent<
   inlineWhenUnflattened: new Set(['fontFamily']),
 
   variants: {
-    ...(process.env.HANZO_GUI_TARGET === 'web' && {
+    ...(process.env.GUI_TARGET === 'web' && {
       numberOfLines: {
         1: ellipsisStyle,
 
         ':number': (numberOfLines) =>
           numberOfLines >= 1
             ? {
+                maxWidth: '100%',
                 WebkitLineClamp: numberOfLines,
                 WebkitBoxOrient: 'vertical',
                 display: '-webkit-box',

package/src/views/ThemeProvider.tsx

@@ -11,7 +11,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
   const addThemeClassName = getSetting('addThemeClassName')
 
   // ensure theme is attached to root body node as well to work with modals by default
-  if (process.env.HANZO_GUI_TARGET === 'web') {
+  if (process.env.GUI_TARGET === 'web') {
     useIsomorphicLayoutEffect(() => {
       if (addThemeClassName === false) return
       const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`

package/types/_withStableStyle.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
-/** internal: this is for hanzo-gui babel plugin usage only */
-export declare const _withStableStyle: (Component: any, createStyle: (theme: any, expressions: any[]) => object) => React.NamedExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export declare const _withStableStyle: (Component: any, createStyle: (theme: any, expressions: any[]) => object, hasThemeKeys?: boolean, hasMediaKeys?: boolean) => React.NamedExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
 //# sourceMappingURL=_withStableStyle.d.ts.map

package/types/eventHandling.d.ts

@@ -19,9 +19,9 @@ export declare function getWebEvents<E extends EventLikeObject>(events: E, webSt
 };
 export declare function wrapWithGestureDetector(content: any, _gesture: any, _stateRef: {
     current: any;
-}, _isHOC?: boolean): any;
+}, _isHOC?: boolean, _isCompositeComponent?: boolean): any;
 export declare function useEvents(_events: any, _viewProps: any, _stateRef: {
     current: any;
-}, _staticConfig: any, _isHOC?: boolean, _isInsideNativeMenu?: boolean): null;
+}, _staticConfig: any, _isHOC?: boolean, _isInsideNativeMenu?: boolean, _debugName?: string | null): null;
 export {};
 //# sourceMappingURL=eventHandling.d.ts.map

package/types/eventHandling.native.d.ts

@@ -1,12 +1,12 @@
 /**
- * Native event handling - uses RNGH when available, falls back to usePressability
+ * Native event handling - uses RNGH when available, falls back to responder system
  */
 import type { StaticConfig, GuiComponentStateRef } from './types';
 export declare function getWebEvents(): {};
 export declare function useEvents(events: any, viewProps: any, stateRef: {
     current: GuiComponentStateRef;
-}, staticConfig: StaticConfig, isHOC?: boolean, isInsideNativeMenu?: boolean): any;
+}, staticConfig: StaticConfig, isHOC?: boolean, isInsideNativeMenu?: boolean, debugName?: string | null): any;
 export declare function wrapWithGestureDetector(content: any, gesture: any, stateRef: {
     current: GuiComponentStateRef;
-}, isHOC?: boolean): any;
+}, isHOC?: boolean, isCompositeComponent?: boolean): any;
 //# sourceMappingURL=eventHandling.native.d.ts.map